/* Trình tạo /create: bố cục hai cột, form tuỳ chọn, xem trước. Nạp sau app.css, dùng chung token. */

/* Thanh tóm tắt dính: máy · năm · số trang · chép link · tải bản thử. Máy chủ dựng, JS thay sau mỗi lần xem trước */
html { scroll-padding-top: 64px; } /* ô được focus không nằm dưới thanh dính */
.cbar { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.cbar-in { max-width: var(--max); margin: 0 auto; padding: var(--s2) var(--gutter); display: flex; align-items: center; gap: var(--s5); }
.cbar-sum { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; font-size: 14px; line-height: 1.35; white-space: nowrap; }
.cbar-dev { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cbar-meta { flex: none; color: var(--ink-2); }
.cbar-meta > span::before { content: "\00B7"; margin: 0 var(--s2); }
.cbar-pages.over { color: var(--error); font-weight: 500; }
.cbar-copy { flex: none; display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 500; }
.cbar .btn { flex: none; }
.btn[aria-disabled="true"] { color: var(--ink-3); background: var(--white); border-color: var(--line); cursor: not-allowed; }
@media (max-width: 699px) {
  .cbar-in { gap: var(--s3); padding: 5px var(--gutter); }
  .cbar-sum { flex-direction: column; align-items: stretch; gap: 0; font-size: 13px; }
  .cbar-meta { overflow: hidden; text-overflow: ellipsis; }
  .cbar-meta > span:first-child::before { content: none; }
  .cbar-meta:has(.over) > span:first-child { display: none; }
  .cbar-meta .over::before { content: none; }
  .cbar-month { display: none; }
  .cbar-copy { min-height: 44px; font-size: 13px; }
}

/* Bố cục: điện thoại một cột (form trên, xem trước dưới); desktop hai cột */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s5) var(--gutter) var(--s7); }
.setup h1 { margin: 0 0 var(--s3); font-size: 32px; line-height: 1.15; }
.setup .lead { margin-bottom: var(--s5); }
.alert { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-left: 3px solid var(--error); background: var(--white); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; }
.alert p { margin: 0 0 var(--s1); }
.alert ul { margin: 0; padding-left: 20px; }
.alert b { font-weight: 500; }

/* Lỗi cạnh ô: câu báo 13 px đỏ ngay dưới ô sai, viền ô đỏ */
.ferr { display: block; font-size: 13px; line-height: 1.4; color: var(--error); }
.check + .ferr { margin-top: -14px; } /* sát ô đánh dấu, bù khoảng cách 18 px của .sec-body */
[aria-invalid="true"], [aria-invalid="true"]:hover { border-color: var(--error); }
.notice { margin: 0 0 20px; padding: var(--s3) var(--s4); border-left: 3px solid var(--ink); background: var(--white); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; }

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); } /* tóm tắt dài trong tiêu đề mục không nới rộng form */
.form legend { font-size: 13px; color: var(--ink-2); padding: 0; margin-bottom: var(--s1); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; } /* câu báo lỗi dưới một ô không kéo cao ô bên cạnh */
.hint { margin: 0; font-size: 13px; color: var(--ink-2); }
input::placeholder { color: var(--ink-2); opacity: 1; }
input[type="number"] { -moz-appearance: textfield; }
.opt { font-weight: 400; color: var(--ink-2); }

/* Nhóm nút radio dạng thanh chọn: mục chọn nền mực, như tab */
.seg { display: flex; padding: 3px; gap: 3px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r); }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; min-height: 36px; padding: 7px 8px; text-align: center; font-size: 15px; border-radius: 4px; cursor: pointer; }
.seg label:hover span { background: var(--paper-2); }
.seg input:checked + span { background: var(--ink); color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.btn-quiet { justify-self: start; }
.link-btn { padding: 0; border: 0; background: none; font: 500 14px/1.4 var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); cursor: pointer; }
.link-btn:hover { text-decoration-color: currentColor; }

/* Xem trước */
.stage { min-width: 0; background: var(--paper-2); padding: 20px var(--gutter) var(--s5); margin: 0 calc(-1 * var(--gutter)); }
.pv-title { margin: 0; font-size: 20px; font-weight: 500; }
.pv-meta { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.pv-break { margin: 2px 0 0; font: 11.5px/1.6 var(--mono); color: var(--ink-2); }
.pv-total.over { color: var(--error); font-weight: 500; }
.pv-note { margin: var(--s3) 0 20px; font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.pv-warn { margin: var(--s3) 0 20px; padding: 10px 14px; max-width: 60ch; font-size: 14px; color: var(--error); background: var(--white); border: 1px solid var(--error); border-radius: var(--r); }
#preview[aria-busy="true"] .pages { opacity: 0.55; transition: opacity 0.15s; }

/* Điện thoại: lướt ngang qua các trang, mỗi trang gần bằng bề ngang màn hình */
.pages { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--s2); }
.page { margin: 0; scroll-snap-align: start; min-width: 0; }
.page figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page .link-btn { font-size: 13px; }
.page svg {
  display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow);
  font-kerning: none; font-variant-ligatures: none; text-rendering: geometricPrecision;
}
@media (min-width: 640px) {
  .stage { margin: 0; padding: var(--s5); border-radius: var(--r); }
  .pages { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; gap: var(--s5); overflow: visible; }
}
@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 40px; max-width: var(--max); margin: 0 auto; padding-top: var(--s6); align-items: start; }
  /* Cột xem trước dính dưới thanh tóm tắt (cao 53 px) và tự cuộn bên trong khi form dài */
  .stage {
    padding: 28px var(--s6) var(--s6);
    position: sticky; top: 61px; max-height: calc(100vh - 61px);
    overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  }
}

/* Điện thoại: nút nổi góc dưới phải, nhảy xuống xem trước rồi ngược lên form (create.js đổi chữ) */
.jump { display: none; }
@media (max-width: 699px) {
  .jump {
    position: fixed; z-index: 9; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4);
    font: 500 14px/1 var(--font); color: var(--white); background: var(--ink); border-radius: var(--r); text-decoration: none;
  }
  .jump.up .icon { transform: rotate(180deg); }
  .foot { padding-bottom: 88px; } /* dòng cuối footer không nằm dưới nút nổi */
}


/* Preset */
.presets { margin-bottom: 8px; }
.presets-title { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.preset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.preset {
  display: grid; gap: 2px; align-content: start;
  padding: 10px 12px; min-height: 44px;
  text-align: left; font: inherit; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer;
}
.preset:hover { border-color: var(--ink); }
.preset-name { font-size: 15px; font-weight: 500; }
.preset-desc { font-size: 13px; line-height: 1.35; color: var(--ink-2); }

/* Mục gập/mở */
.sec { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.sec > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 16px;
  font-size: 16px; font-weight: 500;
  list-style: none; cursor: pointer;
  border-radius: var(--r);
}
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after {
  content: ""; width: 16px; height: 16px; margin-left: auto; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c5c66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
}
.sec[open] > summary::after { transform: rotate(180deg); }
.sec > summary:hover { background: var(--paper); }
.sec[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.sec-name { flex: none; }
.sec-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.sec-sum::before { content: "\00B7"; margin-right: var(--s2); }
.sec { scroll-margin-top: 72px; }
.sec-body { display: grid; gap: 18px; padding: 16px; }

/* Kiểu trang tuần: danh sách radio có mô tả */
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.style { position: relative; display: block; cursor: pointer; }
.style input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.style > span {
  display: grid; gap: 1px; height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.style:hover > span { border-color: var(--ink); }
.style input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.style input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.style-name { font-size: 14px; font-weight: 500; }
.style-desc { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }

/* Tracker, collection */
.items { display: grid; gap: 10px; }
.items:empty { display: none; }
.item {
  margin: 0; padding: 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  display: grid; gap: 10px;
}
.item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.item-title { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.item-grid .wide { grid-column: 1 / -1; }
.lbl { font-size: 13px; font-weight: 500; }
.item .link-btn { min-height: 24px; }

@media (max-width: 359px) { .styles, .preset-list { grid-template-columns: 1fr; } }