/* O2 Agent: the admin page. O2's own colours; system type; quiet surfaces. */
:root {
  --canvas: #F6F8FC; --surface: #FFFFFF; --sunken: #EEF1F6;
  --ink: #111722; --ink-2: #4B5668; --ink-3: #5F6A7D;
  --accent: #245BFF; --accent-press: #1B49D6; --accent-soft: #EAF0FF; --on-accent: #FFFFFF;
  --hair: rgba(17, 23, 34, .08); --hair-2: rgba(17, 23, 34, .16);
  --ok: #0E7A4B; --ok-soft: #E6F5EE; --warn: #7E5300; --warn-soft: #FFF4DB; --warn-dot: #D99A1C; --err: #B3261E; --err-soft: #FDECEA;
  --bar-bg: rgba(246, 248, 252, .78);
  --focus: rgba(36, 91, 255, .28);
  --shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(17, 23, 34, .03), 0 12px 32px -18px rgba(17, 23, 34, .14);
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Thai", Thonburi, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0D111A; --surface: #151B28; --sunken: #1C2433;
    --ink: #F3F5F9; --ink-2: #B8C2D3; --ink-3: #9AA6BA;
    --accent: #6E93FF; --accent-press: #86A5FF; --accent-soft: #1B2747; --on-accent: #0B1020;
    --hair: rgba(255, 255, 255, .09); --hair-2: rgba(255, 255, 255, .2);
    --ok: #55D69C; --ok-soft: #12301F; --warn: #F1C56A; --warn-soft: #33270C; --warn-dot: #E0A93A; --err: #FF8F86; --err-soft: #3A1614;
    --bar-bg: rgba(13, 17, 26, .76);
    --focus: rgba(110, 147, 255, .4);
    --shadow: 0 0 0 1px var(--hair), 0 18px 40px -22px rgba(0, 0, 0, .7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); font: 100%/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, dl, dd, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; border-radius: var(--r-s); background: var(--ink); color: var(--canvas); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }

/* ---- the bar ------------------------------------------------------------------------------------------------------ */
.bar { position: sticky; top: 0; z-index: 10; background: var(--bar-bg); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 var(--hair); }
.bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 1120px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 32px) 8px; }
.brand { display: flex; align-items: flex-end; gap: 8px; }
.brand__mark { width: 39px; height: 32px; }
.brand__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.014em; line-height: 1; padding-bottom: 6px; color: var(--ink-2); }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 12px; border-radius: var(--pill); background: var(--sunken); font-size: .8125rem; font-weight: 550; color: var(--ink-2); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.status[data-state="ok"] { background: var(--ok-soft); color: var(--ok); } .status[data-state="ok"] .status__dot { background: var(--ok); }
.status[data-state="warn"] { background: var(--warn-soft); color: var(--warn); } .status[data-state="warn"] .status__dot { background: var(--warn-dot); }
.status[data-state="err"] { background: var(--err-soft); color: var(--err); } .status[data-state="err"] .status__dot { background: var(--err); }

.tabs { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__in { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--sunken); }
.tab { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--pill); background: transparent; color: var(--ink-2); font-size: .9375rem; font-weight: 550; white-space: nowrap; cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), transform 100ms ease-out; }
.tab:hover { color: var(--ink); }
.tab:active { transform: scale(.97); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(17, 23, 34, .08); }

/* ---- the page ----------------------------------------------------------------------------------------------------- */
main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 32px) 56px; }
.panel { display: grid; gap: 20px; animation: in 280ms var(--ease) both; }
.panel--narrow { max-width: 760px; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.head > div:first-child { flex: 1 1 420px; min-width: 0; }
.head__acts { display: flex; gap: 8px; flex-wrap: wrap; }
h1 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 680; }
h2 { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 640; }
.lead { margin-top: 8px; max-width: 66ch; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.hint { color: var(--ink-3); font-size: .875rem; line-height: 1.5; max-width: 66ch; }
.card { display: grid; gap: 16px; padding: clamp(16px, 2.6vw, 24px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); }
.starting { margin-top: 4px; }
.note { padding: 10px 14px; border-radius: var(--r-m); background: var(--warn-soft); color: var(--warn); font-size: .875rem; }

/* ---- controls ----------------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--sunken); color: var(--ink); font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background 180ms var(--ease), transform 100ms ease-out, opacity 180ms; }
.btn:hover { background: var(--hair-2); }
.btn:active { transform: scale(.97); }
.btn--main { background: var(--accent); color: var(--on-accent); }
.btn--main:hover { background: var(--accent-press); }
.btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn--quiet:hover { background: var(--sunken); }
.btn--danger { background: transparent; color: var(--err); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn--danger:hover { background: var(--err-soft); }
.btn--s { min-height: 32px; padding: 0 12px; font-size: .8125rem; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.field { display: grid; gap: 6px; }
.field--grow { flex: 1 1 220px; min-width: 0; }
.field__label { font-size: .875rem; font-weight: 620; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.field__label output { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.field__hint { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
input[type="text"], input[type="search"], textarea, select { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--r-m); background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 160ms var(--ease), background 160ms var(--ease); }
textarea { display: block; resize: vertical; line-height: 1.55; min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--focus); }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--sunken); justify-self: start; max-width: 100%; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 14px; border-radius: 11px; font-size: .875rem; font-weight: 550; color: var(--ink-2); transition: background 160ms var(--ease), color 160ms var(--ease), transform 100ms ease-out; }
.seg input:active + span { transform: scale(.97); }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(17, 23, 34, .08); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.check strong { display: block; font-size: .9375rem; font-weight: 600; }
.check small { display: block; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acts__gap { flex: 1; }
.msg { padding: 10px 14px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--ink); font-size: .875rem; line-height: 1.45; }
.msg[data-kind="err"] { background: var(--err-soft); color: var(--err); }
.msg[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
.msg--inline { padding: 6px 12px; }

/* ---- teach -------------------------------------------------------------------------------------------------------- */
.teach { display: grid; gap: 20px; align-items: start; }
@media (min-width: 880px) { .teach { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); } }
.teach__list, .teach__side { display: grid; gap: 12px; min-width: 0; }
.teach__side { gap: 20px; }
.count { font-size: .8125rem; color: var(--ink-3); padding: 0 4px; }
.notes { display: grid; gap: 6px; }
.note-row { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--hair); text-align: left; cursor: pointer; transition: box-shadow 160ms var(--ease), transform 100ms ease-out, background 160ms; }
.note-row:hover { box-shadow: 0 0 0 1px var(--hair-2); }
.note-row:active { transform: scale(.99); }
.note-row[aria-current="true"] { box-shadow: 0 0 0 1.5px var(--accent); background: var(--accent-soft); }
.note-row__title { font-size: .9375rem; font-weight: 620; line-height: 1.3; overflow-wrap: anywhere; }
.note-row__text { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.note-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.note-row.is-off .note-row__title { color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--pill); background: var(--sunken); font-size: .6875rem; font-weight: 620; letter-spacing: .02em; color: var(--ink-2); }
.chip--always { background: var(--accent-soft); color: var(--accent); }
.chip--off { background: var(--warn-soft); color: var(--warn); }
.chip--wait { background: var(--warn-soft); color: var(--warn); }
.empty { padding: 20px; border-radius: var(--r-m); background: var(--sunken); color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.more > summary { cursor: pointer; font-size: .875rem; font-weight: 620; color: var(--ink-2); padding: 8px 4px; border-radius: var(--r-s); }
.more[open] > summary { margin-bottom: 8px; }
.card.more { gap: 0; }
.card.more > summary { padding: 0; font-size: 1.0625rem; color: var(--ink); }
.card.more[open] > summary { margin-bottom: 16px; }
.fine { display: grid; gap: 16px; }
.notes--removed .note-row { background: transparent; }
.editor h2 { font-size: 1.25rem; letter-spacing: -.018em; }
.history { display: grid; gap: 8px; padding-top: 4px; }
.version { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sunken); }
.version__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; color: var(--ink-3); }
.version__text { font-size: .875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow: auto; }
.found { display: grid; gap: 6px; margin-top: 4px; }
.found__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sunken); font-size: .875rem; }
.found__row button { border: 0; padding: 0; background: none; color: var(--accent); font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.found__row button:hover { text-decoration: underline; }
.found__why { flex: none; color: var(--ink-3); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ---- facts and tables --------------------------------------------------------------------------------------------- */
.facts { display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 12px; padding: 12px 0; box-shadow: 0 1px 0 var(--hair); }
.facts > div:last-child { box-shadow: none; padding-bottom: 0; } .facts > div:first-child { padding-top: 0; }
.facts dt { font-size: .875rem; color: var(--ink-3); }
.facts dd { font-size: .9375rem; overflow-wrap: anywhere; }
.facts dd small { display: block; font-size: .8125rem; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.good { color: var(--ok); font-weight: 620; } .bad { color: var(--err); font-weight: 620; } .soso { color: var(--warn); font-weight: 620; }
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 8px 12px 8px 0; text-align: right; white-space: nowrap; box-shadow: 0 1px 0 var(--hair); }
.table th { font-weight: 620; color: var(--ink-3); font-size: .8125rem; }
.table th:first-child, .table td:first-child { text-align: left; }
.steps { display: grid; gap: 12px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: .9375rem; line-height: 1.5; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.steps small { display: block; color: var(--ink-3); font-size: .8125rem; }
code { font: .875em ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 6px; border-radius: 6px; background: var(--sunken); overflow-wrap: anywhere; }

/* ---- foot, toast --------------------------------------------------------------------------------------------------- */
.foot { display: flex; justify-content: center; padding: 8px 16px 20px; color: var(--ink-3); }
.o2-credit { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-size: .6875rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.o2-credit:hover, .o2-credit:focus-visible { opacity: .8; }
.o2-credit__lockup { white-space: nowrap; }
.o2-credit__mark { display: inline-block; width: 1.95em; height: 1.6em; margin-right: .5em; vertical-align: -.366em; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translateX(-50%); max-width: min(92vw, 480px); padding: 12px 18px; border-radius: var(--pill); background: var(--ink); color: var(--canvas); font-size: .9375rem; font-weight: 550; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); animation: toast 260ms var(--ease) both; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 10px); } }

@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .head__acts { width: 100%; } .head__acts .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn:active, .tab:active, .note-row:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) { .bar { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) {
  :root { --hair: rgba(17, 23, 34, .3); --hair-2: rgba(17, 23, 34, .5); --ink-3: #3A4354; }
  .bar { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
  input[type="text"], input[type="search"], textarea, select { box-shadow: inset 0 0 0 1px var(--hair-2); }
}

/* ---- signing in, and what only the online page has ---------------------------------------------------------------- */
.gate { display: grid; gap: 16px; max-width: 420px; margin: clamp(24px, 10vh, 96px) auto 0; }
.gate h1 { font-size: 1.75rem; }
.gate .card { gap: 14px; }
.bar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.status { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 560px) { .status { font-size: .75rem; } .brand__name { font-size: 1rem; } }
.lede-note { padding: 12px 14px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--ink); font-size: .875rem; line-height: 1.5; }

/* ---- knowledge: list, editor and test side by side (Teach AI brief, 17 October 2026) ---------------------------- */
main:has(#p-teach:not([hidden])) { max-width: 1560px; }
.bar__in, .tabs { max-width: 1560px; }
.h3 { font-size: 1rem; font-weight: 640; }
.kb { display: grid; gap: 20px; align-items: start; }
.kb__list, .kb__main, .kb__test { display: grid; gap: 12px; min-width: 0; align-content: start; }
.kb__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.kb__top h1 { font-size: 1.625rem; }
.kb__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.kb__lede { font-size: .8125rem; }
.kb__back { display: none; justify-self: start; }
.kb__back::before { content: "←"; }
.kb__blank { padding: 40px 24px; border-radius: var(--r-l); background: var(--sunken); color: var(--ink-2); text-align: center; }
@media (min-width: 900px) {
  .kb { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .kb__list { position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow: auto; padding: 2px 6px 16px 2px; overscroll-behavior: contain; }
  .kb__test { grid-column: 1 / -1; }
}
@media (min-width: 1320px) {
  .kb { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(360px, 440px); }
  .kb__test { grid-column: auto; position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow: auto; padding: 2px 2px 16px; overscroll-behavior: contain; }
}
@media (max-width: 899px) {
  .kb[data-view="list"] .kb__main, .kb[data-view="list"] .kb__test { display: none; }
  .kb[data-view="detail"] .kb__list { display: none; }
  .kb[data-view="detail"] .kb__back { display: inline-flex; }
}
.summary { display: flex; flex-wrap: wrap; gap: 6px; }
.sum { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--pill); background: var(--sunken); color: var(--ink-2); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background 160ms var(--ease), transform 100ms ease-out; }
.sum b { font-variant-numeric: tabular-nums; color: var(--ink); }
.sum:hover { background: var(--hair-2); }
.sum:active { transform: scale(.97); }
.sum[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.sum[aria-pressed="true"] b { color: var(--canvas); }
.filters > summary { cursor: pointer; font-size: .8125rem; font-weight: 620; color: var(--ink-2); padding: 4px 2px; }
.filters[open] { display: grid; gap: 10px; }
.filters__grid, .more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.field--s { gap: 4px; }
.field--s .field__label { font-size: .8125rem; }
.field--s input, .field--s select { min-height: 38px; padding: 7px 12px; font-size: .875rem; }
.field--wide { grid-column: 1 / -1; }
input[type="date"] { width: 100%; min-height: 38px; padding: 7px 12px; border: 0; border-radius: var(--r-m); background: var(--sunken); color: var(--ink); }
.note-row__meta .badge { margin-right: 2px; }
.note-row__when { font-size: .75rem; color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: .6875rem; font-weight: 680; letter-spacing: .02em; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--live { background: var(--ok-soft); color: var(--ok); }
.badge--draft { background: var(--accent-soft); color: var(--accent); }
.badge--paused { background: var(--warn-soft); color: var(--warn); }
.badge--archived { background: var(--sunken); color: var(--ink-2); }
.badge--review, .badge--stale { background: var(--warn-soft); color: var(--warn); }
.badge--fail { background: var(--err-soft); color: var(--err); }
.badge--pass { background: var(--ok-soft); color: var(--ok); }
.badge--none { background: var(--sunken); color: var(--ink-2); }
.empty--err { background: var(--err-soft); color: var(--err); }
.empty .acts { margin-top: 10px; }

.editor { display: grid; gap: 16px; padding: clamp(16px, 2.4vw, 24px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); }
.editor__head { display: grid; gap: 6px; }
.editor__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-2); }
.banner { padding: 12px 14px; border-radius: var(--r-m); background: var(--warn-soft); color: var(--ink); font-size: .875rem; line-height: 1.5; }
.banner .acts { margin-top: 8px; }
.acts--editor { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * clamp(16px, 2.4vw, 24px)) calc(-1 * clamp(16px, 2.4vw, 24px)); padding: 12px clamp(16px, 2.4vw, 24px); border-radius: 0 0 var(--r-l) var(--r-l); background: var(--surface); box-shadow: 0 -1px 0 var(--hair); }
.check--s { grid-template-columns: 20px 1fr; font-size: .8125rem; color: var(--ink-2); }
.check--s input { width: 18px; height: 18px; }

.test__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.seg--s { padding: 3px; }
.seg--s button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.seg--s button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 1px 3px rgba(17, 23, 34, .08); }
.row--wrap { align-items: flex-end; }
.pv { height: min(68vh, 660px); min-height: 420px; border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.pv iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--canvas); }
.diag { display: grid; gap: 10px; }
.turn { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--hair); font-size: .8125rem; line-height: 1.5; }
.turn__q { font-weight: 620; font-size: .875rem; overflow-wrap: anywhere; }
.turn__facts { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-2); }
.turn__notes { display: grid; gap: 6px; }
.used { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-s); background: var(--sunken); }
.used__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.used__head button { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; font-weight: 620; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.used__why { color: var(--ink-3); }
.used details summary { cursor: pointer; color: var(--ink-3); }
.used__text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); max-height: 10em; overflow: auto; }
.found__row { flex-wrap: wrap; }

/* ---- dialogs -------------------------------------------------------------------------------------------------------- */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); }
.dlg--wide { width: min(880px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(10, 14, 22, .45); }
.dlg__in { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); max-height: calc(100vh - 24px); overflow: auto; }
.dlg h2 { font-size: 1.25rem; }
.dlg h3 { margin: 0; font-size: .9375rem; font-weight: 640; }
.dlg__sec { display: grid; gap: 8px; }
#review-body, #correct-body, #import-body { display: grid; gap: 20px; }
.dlg__sec > p:not([class]) { font-size: .9375rem; }
.warns { display: grid; gap: 6px; }
.warn { padding: 10px 12px; border-radius: var(--r-m); background: var(--warn-soft); font-size: .875rem; line-height: 1.5; }
.warn--info { background: var(--sunken); }
.warn b { margin-right: 4px; }
.diff { display: grid; padding: 10px 12px; border-radius: var(--r-m); background: var(--sunken); font: .8125rem/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.diff span { display: block; padding: 2px 8px; border-radius: 4px; }
.diff .add { background: var(--ok-soft); }
.diff .add::before { content: "+ "; color: var(--ok); }
.diff .del { background: var(--err-soft); text-decoration: line-through; }
.diff .del::before { content: "− "; color: var(--err); }
.diff .same::before { content: "  "; }
.compare { display: grid; gap: 12px; }
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare > div { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-m); background: var(--sunken); font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.order { display: grid; gap: 8px; padding-left: 1.25em; font-size: .9375rem; line-height: 1.5; }
.import-list { display: grid; gap: 6px; }
.import-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--r-m); background: var(--sunken); font-size: .875rem; }

/* ---- tests ---------------------------------------------------------------------------------------------------------- */
.checks { display: grid; gap: 12px; }
.ck-pair { display: grid; gap: 10px; }
@media (min-width: 960px) { .ck-pair { grid-template-columns: 1fr 1fr; } }
.ck { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); align-content: start; }
.ck__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ck__title { font-weight: 640; font-size: .9375rem; margin-right: auto; overflow-wrap: anywhere; }
.ck__q { font-size: .875rem; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ck__meta { font-size: .75rem; color: var(--ink-3); }
.ck__reasons { display: grid; gap: 4px; font-size: .8125rem; line-height: 1.45; }
.ck__reasons li::before { display: inline-block; width: 1.4em; font-weight: 700; }
.ck__reasons .ok::before { content: "✓"; color: var(--ok); }
.ck__reasons .no::before { content: "✕"; color: var(--err); }
.ck__reasons .read::before { content: "?"; color: var(--warn); }
.ck__answer { font-size: .8125rem; line-height: 1.5; padding: 8px 10px; border-radius: var(--r-s); background: var(--sunken); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12em; overflow: auto; }
.ck .acts { margin-top: 2px; }
@media (max-width: 560px) { .acts--editor .btn { flex: 1 1 auto; } }
/* On a phone the bar scrolls away with the page: pinned, it would take a quarter of the screen from the note. */
@media (max-width: 899px) { .bar { position: static; } }