/* ==========================================================================
   app.css — application shell
   Direction: quiet and minimal. One accent (teal), hairline borders,
   generous whitespace, one radius scale (8 / 12 / 16).
   ========================================================================== */
:root {
  /* palette taken from the reference kit (stem-water-filter-kit) */
  --page: #f6f3ea;
  --bg: #efeadd;
  --surface: #fbf9f3;
  --field: #fffdf8;
  --ink: #1d2433;
  --ink-2: #5b6170;
  --ink-3: #8d909a;
  --line: #d9d2bf;
  --line-2: #cbc2ab;
  --hover: #b9b09a;
  --accent: #0f5c8c;
  --accent-ink: #0a4266;
  --accent-soft: #dbe8f0;
  --bad: #b3261e;
  --bad-soft: #f9e6e3;
  --ok: #2f7d4a;
  --s: #2f7d4a; --t: #1f63a8; --e: #c4561b; --m: #7a3fa0;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }
.opt { font-weight: 400; color: var(--ink-3); font-size: .9em; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: rgba(246, 243, 234, .92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand-tiles { display: flex; gap: 3px; }
.brand-tiles b { width: 20px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: #fff; font: 700 .8rem/1 "Chakra Petch", sans-serif; }
.brand-tiles .s { background: var(--s); } .brand-tiles .t { background: var(--t); } .brand-tiles .e { background: var(--e); } .brand-tiles .m { background: var(--m); }
.brand-name { display: grid; font: 700 1rem/1.15 "Chakra Petch", sans-serif; letter-spacing: -.01em; }
.brand-name small { font: 400 .76rem/1.2 "IBM Plex Sans Thai", sans-serif; color: var(--ink-3); letter-spacing: 0; }
.topbar-actions { display: flex; gap: .25rem; }
.tb-btn {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; border-radius: var(--r-sm); padding: .5rem .75rem; cursor: pointer;
  font: 500 .92rem/1 "Chakra Petch", sans-serif; color: var(--ink-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.tb-btn:hover { background: var(--bg); color: var(--ink); }
.tb-btn svg { width: 18px; height: 18px; }
.dot { position: absolute; top: 7px; left: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- composer ---------- */
.composer { padding: clamp(1.5rem, 5vh, 3.25rem) clamp(1rem, 4vw, 2.5rem) 2rem; }
@media (min-width: 981px) { .composer { min-height: calc(100vh - var(--bar-h)); display: grid; align-content: center; } .composer-inner { width: 100%; } .composer-intro { align-self: center; } }
.composer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.composer-intro { padding-top: .5rem; }
.includes { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .95rem; color: var(--ink-2); }
.includes li { position: relative; padding-left: 1.1rem; }
.includes li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 2px; background: var(--accent); }
.includes li:nth-child(4n+1)::before { background: var(--s); } .includes li:nth-child(4n+2)::before { background: var(--t); }
.includes li:nth-child(4n+3)::before { background: var(--e); } .includes li:nth-child(4n+4)::before { background: var(--m); }
@media (max-width: 980px) { .composer-inner { grid-template-columns: 1fr; max-width: 720px; gap: 1.5rem; } .includes { display: none; } }
.composer form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: 0 1px 2px rgba(29, 36, 51, .04); }
.composer .advanced { margin-bottom: 1.25rem; padding-top: .85rem; }
.composer .field { margin-bottom: 1.4rem; }
.composer .field > label, .composer .field > legend { margin-bottom: .55rem; }
.composer h1 {
  font: 700 clamp(1.9rem, 3.4vw, 2.7rem)/1.2 "Chakra Petch", sans-serif;
  letter-spacing: -.015em; margin: 0 0 1rem; color: var(--ink);
}
.composer-lead { color: var(--ink-2); max-width: 46ch; margin: 0 0 1.5rem; font-size: 1.05rem; }
.eyebrow { font: 600 .9rem/1.3 "Chakra Petch", sans-serif; color: var(--accent); margin: 0 0 .9rem; }

.field { margin: 0 0 2.25rem; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend {
  display: block; font: 600 .95rem/1.3 "Chakra Petch", sans-serif; color: var(--ink);
  margin-bottom: .7rem; padding: 0;
}

/* inputs share one look */
.topic-field input,
.advanced select, .advanced input, .advanced textarea,
.set-model select, .key-row input {
  width: 100%; background: var(--field); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: .75rem .9rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.topic-field input:hover, .advanced :is(select, input, textarea):hover, .set-model select:hover, .key-row input:hover { border-color: var(--hover); }
.topic-field input:focus, .advanced :is(select, input, textarea):focus, .set-model select:focus, .key-row input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.advanced select, .set-model select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%235b6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
}

.topic-field input { font: 500 1.2rem/1.4 "Chakra Petch", sans-serif; padding: .85rem 1rem; border-radius: var(--r-lg); }
.topic-field input::placeholder { color: #a7a596; font-weight: 400; }
.field-error { color: var(--bad); font-size: .92rem; margin: .5rem 0 0; }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .65rem; }
.suggest-label { font-size: .88rem; color: var(--ink-3); margin-right: .25rem; }
.sg {
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border: 0; border-radius: 999px; padding: .3rem .8rem;
  font-size: .88rem; color: var(--ink-2); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.sg:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* grade picker */
.grade-rows { display: grid; gap: .5rem; }
.grade-row { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: .75rem; }
.grade-band { font-size: .88rem; color: var(--ink-3); }
.grade-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.grade-chips label { position: relative; display: block; }
.grade-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.grade-chips span {
  display: grid; place-items: center; height: 2.5rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  font: 600 1rem/1 "Chakra Petch", sans-serif; color: var(--ink-2); cursor: pointer; user-select: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.grade-chips label:hover span { border-color: var(--hover); color: var(--ink); }
.grade-chips input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.grade-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* only shown when the chosen model has no key */
.model-hint {
  margin: 0 0 1.25rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad); font-size: .9rem;
}
.link-btn { background: none; border: 0; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.advanced { border-top: 1px solid var(--line); padding: 1.1rem 0 0; margin: 0 0 2.5rem; }
.advanced summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font: 600 .95rem/1.4 "Chakra Petch", sans-serif; color: var(--ink);
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform .2s var(--ease); margin: 0 .2rem;
}
.advanced[open] summary::before { transform: rotate(45deg); }
.advanced summary .opt { font: 400 .88rem/1.4 "IBM Plex Sans Thai", sans-serif; }
.adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .9rem; margin-top: 1.25rem; }
.adv-grid .field { margin-bottom: 1.1rem; }
.adv-grid .field > label { font: 500 .85rem/1.3 "IBM Plex Sans Thai", sans-serif; color: var(--ink-2); margin-bottom: .4rem; }
.adv-grid select, .adv-grid input { padding: .6rem .75rem; border-radius: var(--r-sm); font-size: .95rem; }
.adv-grid select { padding-right: 2.2rem; background-position: right .6rem center; }
.adv-grid textarea { border-radius: var(--r-sm); font-size: .95rem; resize: vertical; }
.adv-wide { grid-column: 1 / -1; }

/* buttons */
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn-main, .btn-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer;
  border-radius: var(--r-md); font: 600 1rem/1 "Chakra Petch", sans-serif;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn-main { background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: .85rem 1.7rem; }
.btn-main:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-main:active, .btn-sub:active { transform: translateY(1px); }
.btn-main:disabled { opacity: .5; cursor: not-allowed; }
.btn-sub { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: .85rem 1.3rem; }
.btn-sub:hover { background: var(--accent-soft); }
.small { padding: .55rem .95rem; font-size: .88rem; border-radius: var(--r-sm); }
.btn-sub.danger { color: var(--bad); border-color: transparent; }
.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.form-note { margin: 1.25rem 0 0; color: var(--ink-3); font-size: .9rem; }
.form-note:empty { display: none; }

/* ---------- progress ---------- */
.progress { max-width: 760px; margin: clamp(2rem, 6vw, 4rem) auto; padding: 1.5rem clamp(1rem, 4vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (max-width: 800px) { .progress { margin-inline: 1rem; } }
.progress-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.progress h2 { font: 600 1.5rem/1.3 "Chakra Petch", sans-serif; margin: 0 0 .25rem; }
.progress-meta { margin: 0; color: var(--ink-3); font-size: .95rem; }
.progress-tools { display: flex; align-items: center; gap: .75rem; }
.progress-tools .btn-sub { padding: .6rem 1rem; font-size: .9rem; border-radius: var(--r-sm); }
.resume-model { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-2); }
.resume-model select { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--field); padding: .5rem .6rem; font-size: .88rem; max-width: 15rem; }
.progress-tools { flex-wrap: wrap; justify-content: flex-end; }
.elapsed { font: 500 1rem/1 "Chakra Petch", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.stages { list-style: none; margin: 0; padding: 0; }
.stage { display: grid; grid-template-columns: 1.25rem 1fr auto; gap: .15rem 1rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.stage-ico {
  width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); font: 700 .68rem/1 "Chakra Petch", sans-serif; color: transparent;
}
.stage-name { color: var(--ink-3); transition: color .2s var(--ease); }
.stage-detail { grid-column: 2 / -1; font-size: .86rem; color: var(--ink-3); margin: 0; }
.stage-count { font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stage.is-running .stage-name, .stage.is-done .stage-name, .stage.is-error .stage-name { color: var(--ink); }
.stage.is-running .stage-ico { border-color: var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; }
.stage.is-running .stage-ico span { display: none; }
.stage.is-done .stage-ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.stage.is-error .stage-ico { background: var(--bad); border-color: var(--bad); color: #fff; }
.stage.is-error .stage-detail { color: var(--bad); }
.progress-foot { margin: 1.25rem 0 0; font-size: .88rem; color: var(--ink-3); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stage.is-running .stage-ico { animation-duration: 3s; } }

/* ---------- viewer ---------- */
.viewer-head {
  max-width: 1120px; margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 3rem) 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.vh-text { min-width: 0; }
.vh-meta { margin: 0 0 .15rem; font-size: .85rem; color: var(--ink-3); }
.vh-title { margin: 0; font: 600 1.05rem/1.4 "Chakra Petch", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-actions { display: flex; gap: .5rem; flex: none; }
.act {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border-radius: var(--r-sm); padding: .6rem 1rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); font: 600 .9rem/1 "Chakra Petch", sans-serif; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.act:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.act svg { width: 17px; height: 17px; flex: none; }
.act-plain { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.act-plain:hover { background: var(--bg); border-color: var(--hover); color: var(--ink); }

.viewer-bar {
  position: sticky; top: var(--bar-h); z-index: 15;
  background: rgba(246, 243, 234, .94); backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.viewer-bar { display: flex; align-items: center; gap: .75rem; padding: 0 max(clamp(1rem, 4vw, 3rem), calc((100% - 1120px) / 2 + clamp(1rem, 4vw, 3rem))); }
.viewer-nav { flex: 1; display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.viewer-nav::-webkit-scrollbar { display: none; }
.viewer-nav a {
  position: relative; color: var(--ink-3); text-decoration: none; font: 500 .9rem/1 "Chakra Petch", sans-serif; white-space: nowrap;
  padding: 1rem 0 .95rem; transition: color .15s var(--ease);
}
.viewer-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color .15s var(--ease); }
.viewer-nav a:hover { color: var(--ink); }
.viewer-nav a.is-on { color: var(--ink); }
.viewer-nav a.is-on::after { background: var(--accent); }
.viewer-bar { background: rgba(246, 243, 234, .94); }
.act-icon {
  flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--accent);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), background-color .15s var(--ease);
}
.act-icon svg { width: 17px; height: 17px; }
.act-icon:hover { background: var(--accent-soft); }
.viewer.is-scrolled .act-icon { opacity: 1; pointer-events: auto; }
.report { max-width: 1120px; margin: 0 auto; }

/* ---------- dialogs ---------- */
.modal {
  border: 0; padding: 0; border-radius: var(--r-lg); width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  color: var(--ink); background: var(--surface);
  box-shadow: 0 1px 2px rgba(29, 36, 51, .06), 0 24px 64px rgba(23, 33, 43, .18);
}
.modal[open] { animation: pop .18s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal::backdrop { background: rgba(29, 36, 51, .35); backdrop-filter: blur(2px); }
.modal-wide { width: min(960px, calc(100vw - 24px)); }
.modal-inner { padding: 0 clamp(1.1rem, 3vw, 1.9rem) 1.9rem; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0 .75rem;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-head h2 { font: 600 1.2rem/1.3 "Chakra Petch", sans-serif; margin: 0; }
.x {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; flex: none;
  background: none; border: 0; border-radius: var(--r-sm); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-3);
}
.x:hover { background: var(--bg); color: var(--ink); }
.modal-lead { color: var(--ink-2); margin: 0 0 1.5rem; font-size: .95rem; }

.set-model { margin: 0 0 1.75rem; }
.set-model label { display: block; font: 600 .92rem/1.3 "Chakra Petch", sans-serif; margin-bottom: .5rem; }
.set-model select { font: 500 .98rem/1.4 "Chakra Petch", sans-serif; }
.set-model-hint { margin: .5rem 0 0; font-size: .86rem; color: var(--ink-3); }

.provider { border-top: 1px solid var(--line); padding: 1.35rem 0 1.25rem; position: relative; }
.provider.is-active::before { content: ""; position: absolute; left: calc(-1 * clamp(1.1rem, 3vw, 1.9rem)); top: 1.35rem; bottom: 1.25rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.prov-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prov-head h3 { margin: 0; font: 600 1rem/1.3 "Chakra Petch", sans-serif; display: flex; align-items: center; gap: .5rem; }
.prov-active { font: 500 .75rem/1 "IBM Plex Sans Thai", sans-serif; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .3rem .55rem; }
.prov-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-3); }
.prov-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.prov-status.is-set { color: var(--ok); }
.prov-status.is-set::before { background: var(--ok); }
.prov-models { margin: .2rem 0 .9rem; font-size: .85rem; color: var(--ink-3); }
.key-row { display: flex; gap: .4rem; }
.key-row input { flex: 1; min-width: 0; padding: .65rem .8rem; border-radius: var(--r-sm); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }
.key-row input[readonly] { background: var(--bg); color: var(--ink-2); border-color: var(--line); cursor: default; }
.key-row input[readonly]:focus { box-shadow: none; border-color: var(--line-2); }
.key-eye { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 0 .85rem; cursor: pointer; font-size: .85rem; color: var(--ink-2); }
.key-eye:hover { background: var(--bg); }
.key-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .7rem; }
.key-actions .btn-sub.danger { border-color: transparent; background: none; }
.key-actions .btn-sub.danger:hover { background: var(--bad-soft); }
.getkey { font-size: .85rem; color: var(--accent); margin-left: auto; text-decoration: none; }
.getkey:hover { text-decoration: underline; text-underline-offset: 3px; }
.key-msg { margin: .6rem 0 0; font-size: .86rem; color: var(--ink-3); }
.key-msg:empty { display: none; }
.key-msg.ok { color: var(--ok); } .key-msg.err { color: var(--bad); }
.security { border-top: 1px solid var(--line); padding-top: 1.25rem; font-size: .88rem; color: var(--ink-2); }
.security h3 { font: 600 .92rem/1.3 "Chakra Petch", sans-serif; margin: 0 0 .5rem; color: var(--ink); }
.security ul { margin: 0; padding-left: 1.1rem; }
.security li { margin: .2rem 0; }

.history { list-style: none; padding: 0; margin: 0; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.history li:first-child { border-top: 0; }
.history .h-title { font-weight: 600; display: block; }
.history .h-meta { font-size: .85rem; color: var(--ink-3); }
.history .h-actions { display: flex; gap: .35rem; flex: none; }
.history-empty { color: var(--ink-3); padding: 1rem 0; }
.ws-dlg-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ws-preview { background: var(--bg); padding: 1rem; border-radius: var(--r-md); }
.ws-preview .ws-sheet { box-shadow: 0 1px 3px rgba(23, 33, 43, .08); }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: #fff; padding: .75rem 1.15rem; border-radius: var(--r-md);
  max-width: calc(100vw - 32px); font-size: .93rem; box-shadow: 0 10px 30px rgba(23, 33, 43, .2);
  animation: toast .2s var(--ease);
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 6px); } }
.toast.err { background: var(--bad); }

@media (max-width: 760px) {
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .tb-btn span:not(.dot) { display: none; }
  .viewer-head { flex-direction: column; align-items: stretch; gap: .85rem; padding-top: 1rem; }
  .vh-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .viewer-actions .act:not(.act-plain) { flex: 1; justify-content: center; }
  .viewer-actions .act-plain span { display: none; }
  .viewer-actions .act-plain { padding: .6rem; }
  .viewer-nav { gap: 1.2rem; }
  .getkey { margin-left: 0; width: 100%; }
  .provider.is-active::before { display: none; }
}
@media (max-width: 420px) {
  .grade-chips span { height: 2.5rem; font-size: .92rem; }
  .brand-name small { display: none; }
}

@media print {
  .topbar, .composer, .progress, .viewer-bar, .toast, .skip { display: none !important; }
  .report { max-width: none; }
}

/* compact start screen on phones */
@media (max-width: 600px) {
  .composer { padding-top: 1.25rem; }
  .composer .eyebrow { display: none; }
  .composer h1 { font-size: 1.6rem; margin-bottom: .5rem; }
  .composer h1 br { display: none; }
  .composer-lead { font-size: .95rem; margin-bottom: 1rem; }
  .composer form { padding: 1rem; }
  .composer .field { margin-bottom: 1.1rem; }
  .suggest .sg:nth-of-type(n+4) { display: none; }
  .grade-row { grid-template-columns: 3rem 1fr; align-items: center; gap: .5rem; }
  .grade-chips { gap: .3rem; }
  .grade-chips span { height: 2.3rem; font-size: .9rem; }
  .composer .advanced { padding-top: .7rem; margin-bottom: 1rem; }
  .form-actions { gap: .5rem; }
  .form-actions > * { flex: 1 1 0; padding-inline: .5rem; }
}