/* Kafedrum 2.9 — one design system.
   Loaded last and authoritative. The earlier layers keep their layout work; this file owns
   colour, surfaces, type, controls, feedback, icons and motion, so every screen speaks the
   same component language.

   Surfaces   canvas → primary surface → raised surface (dialogs, menus). Flat fills, 1px
              structural borders, 8 / 10 / 12 px radii. Grain lives only on the page canvas.
   Controls   44–48 px buttons, 40 px icon targets (44 on touch), form fields with ≥ 3:1
              boundaries. Red is reserved for errors, destructive actions and recording.
   Feedback   inline field errors with an icon, requirement checklists, busy buttons that
              keep focus, skeletons for first loads, crossfades instead of reflows.
   Motion     press 140 · menu 160 · tab 180 · dialog 200 · drawer 260 ms; never on reading
              scroll; everything collapses under prefers-reduced-motion. */

:root {
  /* colour */
  --bg: #0a0d0b;
  --panel: #111512;
  --panel-2: #171c18;
  --panel-3: #1e241f;
  --line: #2b322c;
  --line-2: #3a423b;
  --field-line: #6b736a;
  --field-line-hover: #858d83;
  --text: #f1f3e8;
  --muted: #b7bdb1;
  --subtle: #8e978c;          /* metadata at 14px and larger only */
  --reader-ink: #dfe3d7;
  --accent: #dde7ce;
  --accent-2: #ebf1e0;
  --accent-ink: #11140f;
  --focus: #dde7ce;
  --good: #82b89a;
  --good-ink: #82b89a;
  --good-line: rgba(130, 184, 154, .45);
  --warn: #e6d28a;
  --warn-ink: #e6d28a;
  --warn-surface: #2a2411;
  --warn-line: rgba(230, 210, 138, .34);
  --bad: #d85b4f;
  --bad-ink: #efa094;         /* the same red lifted for small text */
  --bad-surface: rgba(216, 91, 79, .12);
  --bad-line: rgba(216, 91, 79, .55);

  /* shape and depth */
  --radius: 8px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-dialog: 0 28px 72px rgba(0, 0, 0, .52), 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-menu: 0 14px 36px rgba(0, 0, 0, .48);

  /* sizing and type */
  --control-h: 44px;
  --control-h-lg: 48px;
  --fs-meta: 14px;
  --fs-ui: 15px;
  --fs-body: 16px;
  --fs-reader: 18px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-press: 140ms;
  --dur-menu: 160ms;
  --dur-tab: 180ms;
  --dur-dialog: 200ms;
  --dur-drawer: 260ms;
  --dur-rail: 320ms;
}

/* ---------- canvas and texture ---------- */
html { scroll-behavior: auto; }
/* The root paints the canvas: once :root has a background of its own, body's no longer
   propagates, so every area body does not cover (short pages, overscroll, safe areas,
   the scrollbar gutter) must carry the same dark fill. */
:root, body, #app-view { background: var(--bg); color: var(--text); }
body::before, body::after, .topbar::after { content: none; }
/* Grain is a brand element of the canvas only: it sits under opaque surfaces and never over controls. */
.auth { position: relative; isolation: isolate; }
.auth::before, .study-workbench::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 240px 240px; opacity: .02; transform: translateZ(0); }
.study-workbench { isolation: isolate; background: var(--bg); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- focus ---------- */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; box-shadow: none; }
:where(h1, h2, h3, h4, [role="tabpanel"], .segment)[tabindex="-1"]:focus { outline: none !important; }

/* ---------- icons: one 24px outline family, rendered at 16 / 20 / 24 ---------- */
.ui-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon.icon-16 { width: 16px; height: 16px; }
.ui-icon.icon-24 { width: 24px; height: 24px; }
.logo svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- typography helpers ---------- */
.stamp, .release-stamp { color: var(--muted); font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.study-bar .study-bar-note, .self-check-answer .answer-note, .study-bookmarks-label { color: var(--muted) !important; font-size: 14px !important; }
.pane-intro { font-size: 15px; }
.link-button { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font: 600 15px/1.3 var(--display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-press) var(--ease); }
.link-button:hover { color: var(--accent-2); }
.link-button .ui-icon { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn, .button {
  position: relative; min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text);
  box-shadow: none; cursor: pointer; font: 600 15px/1.2 var(--display); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease);
}
.btn:hover:not(:disabled):not([aria-disabled="true"]), .button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--field-line); background: var(--panel-3); color: var(--text); box-shadow: none; transform: none; }
.btn:active:not(:disabled):not([aria-disabled="true"]), .button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn.primary, .button.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn.primary:hover:not(:disabled):not([aria-disabled="true"]), .button.primary:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--accent-2); background: var(--accent-2); color: var(--accent-ink); box-shadow: none; }
.btn.large { min-height: var(--control-h-lg); padding-inline: 20px; }
.btn.small, .button.compact { min-height: 40px; padding-inline: 12px; font-size: 14px; }
.btn.small .ui-icon, .button.compact .ui-icon { width: 16px; height: 16px; }
.btn.wide, .button.wide { width: 100%; }
.btn.ghost, .button.quiet { min-height: 40px; padding-inline: 12px; border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled):not([aria-disabled="true"]), .button.quiet:hover:not(:disabled):not([aria-disabled="true"]) { border-color: transparent; background: rgba(241, 243, 232, .07); color: var(--text); }
.btn.danger, .button.danger { border-color: var(--bad-line); background: var(--bad-surface); color: var(--bad-ink); }
.btn.danger:hover:not(:disabled):not([aria-disabled="true"]), .button.danger:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--bad); background: rgba(216, 91, 79, .22); color: #ffd6cf; }
.btn.danger-text { border-color: transparent; background: transparent; color: var(--bad-ink); }
.btn.danger-text:hover:not(:disabled):not([aria-disabled="true"]) { border-color: transparent; background: var(--bad-surface); color: #ffd6cf; }
/* Unavailable stays legible: the label keeps ≥ 5:1 and the reason is shown beside the control. */
.btn:disabled, .btn[aria-disabled="true"], .button:disabled, .button[aria-disabled="true"] { border-color: var(--line); background: var(--panel); color: var(--subtle); cursor: not-allowed; opacity: 1; transform: none; }
.btn.primary:disabled, .btn.primary[aria-disabled="true"] { border-color: var(--line-2); background: #262c27; color: #a9b0a4; }
.btn.ghost:disabled, .btn.ghost[aria-disabled="true"] { border-color: transparent; background: transparent; }
.btn.is-busy, .btn.is-busy[aria-disabled="true"] { cursor: progress; }
.btn.primary.is-busy { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); opacity: .82; }

.icon-btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; font-size: 0; line-height: 0; transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); }
.icon-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(241, 243, 232, .08); color: var(--text); }
.icon-btn[aria-expanded="true"] { background: rgba(241, 243, 232, .1); color: var(--text); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { color: var(--subtle); cursor: not-allowed; }
.knowledge-actions .icon-btn, .reader-controls .icon-btn, .result-dialog .dialog-close { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 0; }
@media (pointer: coarse) {
  .icon-btn, .knowledge-actions .icon-btn, .reader-controls .icon-btn, .result-dialog .dialog-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

.spinner { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wc-spin 800ms linear infinite; }

/* ---------- form fields ---------- */
.field { min-width: 0; display: grid; align-content: start; gap: 6px; margin: 0; }
.field .field-label, .field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; color: var(--text); font: 600 15px/1.35 var(--display); letter-spacing: 0; text-transform: none; }
.field-optional { color: var(--muted); font: 400 14px var(--display); }
.field-hint { margin: 0; color: var(--muted); font: 400 14px/1.45 var(--display); }
.field-meta { color: var(--muted); font: 400 14px var(--display); font-variant-numeric: tabular-nums; }
.field :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) {
  width: 100%; min-height: var(--control-h); margin: 0; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); box-shadow: none; outline: none; font: 400 16px/1.4 var(--display); letter-spacing: 0;
  transition: border-color var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
}
.field :is(input, select, textarea)::placeholder { color: var(--subtle); opacity: 1; }
.field :is(input:not([type="checkbox"]):not([type="file"]), select, textarea):hover { border-color: var(--field-line-hover); }
.field :is(input:not([type="checkbox"]):not([type="file"]), select, textarea):focus,
.field :is(input:not([type="checkbox"]):not([type="file"]), select, textarea):focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none !important; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad); }
.field :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7bdb1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px 16px; }
.field select option { background: var(--panel-2); color: var(--text); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bad-ink); font: 500 14px/1.45 var(--display); }
.field-error[hidden], .field-error:empty { display: none; }
.field-error .ui-icon { width: 16px; height: 16px; margin-top: 2px; }

.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; margin: 0; color: var(--text); cursor: pointer; font: 400 15px/1.45 var(--display); letter-spacing: 0; text-transform: none; }
.check input { appearance: none; width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; padding: 0; border: 1.5px solid var(--field-line); border-radius: 5px; background: var(--bg) center / 14px 14px no-repeat; box-shadow: none; cursor: pointer; transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); }
.check input:hover { border-color: var(--field-line-hover); }
.check input:focus { box-shadow: none; }
.check input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311140f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3C/svg%3E"); }
.check input[aria-invalid="true"] { border-color: var(--bad); }
.check input:disabled { cursor: not-allowed; opacity: .75; }
.check-copy { min-width: 0; display: grid; gap: 2px; }
.check-label { color: var(--text); font: 600 16px/1.35 var(--display); }

/* form-level problems (server or network), product-styled with an icon */
.form-error { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--bad-line); border-radius: var(--radius-sm); background: var(--bad-surface); color: var(--text); font: 400 15px/1.45 var(--display); letter-spacing: 0; }
.form-error:empty { display: none; }
.form-error .ui-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--bad-ink); }

.notice-inline { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-surface); color: var(--text); font: 400 15px/1.45 var(--display); }
.notice-inline[hidden] { display: none; }
.notice-inline .ui-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--warn-ink); }

/* ---------- chips and status ---------- */
.job-status, .status-chip, .chip {
  min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm) !important;
  background: var(--panel); color: var(--muted); font: 500 14px/1.2 var(--display); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.job-status .ui-icon, .status-chip .ui-icon, .chip .ui-icon { width: 16px; height: 16px; }
.status-chip b { color: var(--text); font-weight: 600; }
.job-status.completed, .status-chip.is-ready, .chip.is-ready { border-color: var(--good-line); background: var(--panel); color: var(--good-ink); }
.job-status.leased, .job-status.queued, .status-chip.is-processing, .chip.is-processing { border-color: var(--line-2); background: var(--panel); color: var(--accent); }
.job-status.failed, .status-chip.is-failed, .chip.is-failed { border-color: var(--bad-line); background: var(--bad-surface); color: var(--bad-ink); }
.chip.is-recording { border-color: var(--bad-line); background: var(--bad-surface); color: var(--text); }
.rec-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px rgba(216, 91, 79, .22); animation: wc-pulse 1.6s var(--ease-in-out) infinite; }

.service-state { min-height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); font: 500 14px var(--display); letter-spacing: 0; text-transform: none; }
.service-state .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.service-state.online .ui-icon { color: var(--good); }
.service-state.offline .ui-icon { color: var(--warn-ink); }

/* ---------- skeletons and list updates ---------- */
.skeleton { position: relative; overflow: hidden; border-radius: 4px; background: var(--panel-3); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(241, 243, 232, .05), transparent); transform: translateX(-100%); animation: wc-shimmer 1.4s var(--ease-in-out) infinite; }
.skeleton-line { display: block; height: 12px; }
.skeleton-block { display: block; width: 32px; height: 32px; border-radius: var(--radius-sm); }
.is-skeleton { pointer-events: none; }
.is-updated { animation: wc-fade-in var(--dur-tab) var(--ease) both; }
.load-error { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px; border: 1px solid var(--bad-line); border-radius: var(--radius-md); background: var(--panel); color: var(--text); }
.load-error p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 15px/1.45 var(--display); }
.load-error .ui-icon { color: var(--bad-ink); }

.refresh-btn.is-refreshing .ui-icon { color: var(--accent); animation: wc-spin 900ms linear infinite; }
.refresh-btn.is-refreshing span { animation: none; }
.lecture-row-meta .job-status.lecture-row-meta-status { display: none; }
@media (max-width: 600px) { .lecture-row-meta .job-status.lecture-row-meta-status { display: inline-flex; } }
.refresh-status { min-height: 20px; display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); font: 400 14px/1.3 var(--display); white-space: nowrap; }
.refresh-status .ui-icon { width: 16px; height: 16px; }
.refresh-status.is-done { color: var(--muted); }
.refresh-status.is-done .ui-icon { color: var(--good); }
.refresh-status.is-error { color: var(--bad-ink); }
.section-tools { display: flex; align-items: center; gap: 8px; }
.nav-utility .refresh-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-utility.is-done .ui-icon { color: var(--good); }
.nav-utility.is-error { color: var(--bad-ink); }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 250; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: min(420px, calc(100% - 32px)); display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); color: var(--text); box-shadow: var(--shadow-menu); font: 400 15px/1.45 var(--display); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease); }
.toast.visible { opacity: 1; transform: none; }
.toast .ui-icon { width: 20px; height: 20px; color: var(--good); }
.toast.error { border-color: var(--bad-line); background: var(--panel-2); }
.toast.error .ui-icon { color: var(--bad-ink); }
.toast.info .ui-icon { color: var(--accent); }

/* ---------- top bar, navigation, sidebar ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg); backdrop-filter: none; }
.topbar .logo, .brand .logo { border: 0; background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.avatar { background: var(--accent); color: var(--accent-ink); }
.nav-btn { transition: color var(--dur-press) var(--ease); }
.nav-btn::after { transition: transform var(--dur-menu) var(--ease); }
.nav-btn[aria-disabled="true"] { color: var(--subtle); cursor: not-allowed; }
.nav-soon { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); font: 500 12px/1.4 var(--display); }
.profile-button { border-radius: var(--radius-sm); transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); }

.unified-layout { transition: grid-template-columns var(--dur-rail) var(--ease-in-out); }
.library-panel { border-right: 1px solid var(--line); background: var(--panel); transition: opacity var(--dur-drawer) var(--ease); }
.library-footer { background: var(--panel); }
.knowledge-base-item { border-radius: var(--radius-sm); transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.knowledge-base-item:hover { background: rgba(241, 243, 232, .05); transform: none; }
.knowledge-base-item.is-active { background: var(--panel-3); box-shadow: inset 2px 0 var(--accent); }
.kb-icon { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.nav-utility { border-radius: var(--radius-sm); transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.nav-utility .ui-icon { width: 20px; margin-inline: 6px; }
.nav-utility[aria-disabled="true"] { cursor: progress; }
.popover-menu { border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); box-shadow: var(--shadow-menu); animation: wc-menu-in var(--dur-menu) var(--ease) both; }
.menu-item { border-radius: 6px; transition: background-color var(--dur-press) var(--ease); }
.tooltip { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #232a24; color: var(--text); box-shadow: var(--shadow-menu); font: 500 14px/1.35 var(--display); animation: wc-fade-in var(--dur-menu) var(--ease) both; }
.study-workbench { transition: padding-left var(--dur-rail) var(--ease-in-out); }
.workspace-shell { transition: width var(--dur-rail) var(--ease-in-out); }
/* Collapsing the rail is one movement: the panel, the canvas and the rail's own furniture
   travel on the same curve, so nothing snaps into its collapsed shape ahead of the panel. */
.knowledge-base-list, .kb-group-label, .knowledge-base-item, .nav-utility, .library-footer, .rail-record {
  transition: width var(--dur-rail) var(--ease-in-out), padding var(--dur-rail) var(--ease-in-out),
              margin var(--dur-rail) var(--ease-in-out), border-radius var(--dur-rail) var(--ease-in-out),
              background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease),
              transform var(--dur-press) var(--ease);
}
.knowledge-base-item { overflow: hidden; }
@media (max-width: 850px) {
  .library-panel, .sidebar-collapsed .library-panel { transition: transform var(--dur-drawer) var(--ease), visibility 0s linear var(--dur-drawer); }
  .drawer-open .library-panel { transition: transform var(--dur-drawer) var(--ease); }
  .drawer-backdrop { background: rgba(4, 6, 5, .74); transition: opacity var(--dur-drawer) var(--ease), visibility 0s linear var(--dur-drawer); }
  .drawer-open .drawer-backdrop { transition: opacity var(--dur-drawer) var(--ease); }
}

/* ---------- workspace surfaces ---------- */
.view-enter { animation: wc-fade-in var(--dur-tab) var(--ease) both; }
.processing-notice { align-items: flex-start; border: 1px solid var(--warn-line); border-radius: var(--radius-md); background: var(--warn-surface); color: var(--text); }
.processing-notice > .ui-icon { width: 24px; height: 24px; margin-top: 2px; color: var(--warn-ink); }
.processing-notice strong, .notice-safe b { color: var(--warn-ink); }
.processing-notice span { color: var(--text); }
.notice-more summary { color: var(--accent); }
.notice-more p { color: var(--muted); }

.subject-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: none; transition: border-color var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease); }
.subject-card::before { content: none; }
.subject-card:hover { z-index: auto; border-color: var(--line-2); background: var(--panel-2); box-shadow: none; transform: none; }
.subject-card > .ui-icon { transition: transform var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.subject-card.is-skeleton { grid-template-columns: 40px minmax(0, 1fr); }
.subject-card.is-skeleton .skeleton-block { width: 40px; height: 40px; }
.subject-card.is-skeleton .subject-card-copy { gap: 10px; }
.subjects-empty, .subject-empty { border: 1px dashed var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.how-steps li { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.how-steps li::before { color: var(--muted); font-size: 14px; }

.lecture-rows { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.lecture-row:first-child { border-radius: 9px 9px 0 0; }
.lecture-row:last-child { border-radius: 0 0 9px 9px; }
.lecture-row:only-child { border-radius: 9px; }
.lecture-row { transition: background-color var(--dur-press) var(--ease); }
.lecture-row:hover { background: var(--panel-2); }
.lecture-row-icon { border-radius: var(--radius-sm); }
.status-leased .lecture-row-icon, .status-queued .lecture-row-icon { border-color: var(--line-2); color: var(--accent); }
.lecture-row-progress span { background: var(--accent); }
.lecture-row-open { border-radius: var(--radius-sm); transition: border-color var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease); }
.lecture-row-open .spinner { width: 14px; height: 14px; }
.lecture-row.is-skeleton .lecture-row-main { cursor: default; }
.lecture-row.is-skeleton .lecture-row-copy { gap: 8px; }

/* ---------- dialogs ---------- */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(4, 6, 5, .74); backdrop-filter: blur(2px); }
dialog[open] { animation: wc-dialog-in var(--dur-dialog) var(--ease) both; }
dialog[open]::backdrop { animation: wc-fade-in var(--dur-dialog) var(--ease) both; }
.confirm-dialog, .record-dialog, .photo-dialog { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel-2); color: var(--text); box-shadow: var(--shadow-dialog); }
.confirm-dialog { width: min(480px, calc(100% - 32px)); padding: 24px; }
.confirm-dialog h2 { margin: 0; color: var(--text); font: 650 20px/1.3 var(--display); letter-spacing: -.01em; }
.confirm-dialog p { margin: 12px 0 0; color: var(--muted); font: 400 16px/1.55 var(--display); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; margin-top: 24px; }
.confirm-dialog .form-error { margin-top: 16px; }
.dialog-mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -8px -8px 16px 0; }
.dialog-mini-head h2 { margin: 4px 0 0; }
.dialog-mini-head .tile-label { color: var(--muted); font: 500 14px var(--display); letter-spacing: 0; text-transform: none; }
.knowledge-dialog form { display: grid; gap: 16px; }
.knowledge-info-dialog ol, .privacy-dialog ol { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 22px; color: var(--muted); font: 400 16px/1.55 var(--display); }
.privacy-dialog { width: min(600px, calc(100% - 32px)); }
.rented-gpu-terms { display: grid; gap: 8px; margin: 16px 0; padding-left: 22px; color: var(--muted); font: 400 16px/1.55 var(--display); }
#rented-gpu-dialog .check { margin-top: 8px; }
#rented-gpu-status:empty, #rented-gpu-error:empty { display: none; }
.privacy-steps { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.privacy-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.privacy-steps strong { display: block; color: var(--text); font: 600 16px/1.4 var(--display); }
.privacy-steps p { margin: 2px 0 0; font-size: 15px; }
.step-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--accent); }
.step-icon .ui-icon { width: 16px; height: 16px; }
.delete-lecture-title { border-left-color: var(--bad); border-radius: var(--radius-sm); background: var(--bad-surface); }

/* ---------- auth ---------- */
.auth-card.webcheck-auth { position: relative; z-index: 1; max-width: 440px; padding: 32px 28px 28px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel-2); box-shadow: var(--shadow-dialog); }
.auth-card::before { border-top-left-radius: var(--radius-lg); }
.auth-card::after { border-bottom-right-radius: var(--radius-lg); }
.tagline { margin: 16px 0 20px; color: var(--muted); font: 400 15px/1.5 var(--display); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.seg .segment-control { min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; font: 600 15px var(--display); letter-spacing: 0; text-transform: none; transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.seg .segment-control:hover { color: var(--text); }
.seg .segment-control.is-active { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.auth-form { display: grid; gap: 16px; }
.auth-form .form-error { margin: 0; }
.hint.center { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: 400 14px/1.5 var(--display); }

/* ---------- recording and upload flow ---------- */
.record-dialog { width: min(760px, calc(100% - 32px)); max-width: none; height: auto; max-height: min(calc(100dvh - 32px), 920px); padding: 0; overflow: hidden; }
.record-dialog[open] { display: flex; }
.flow { width: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.flow-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 24px; }
.flow-head-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.flow-head .stamp { font-size: 12px; }
.flow-head h2 { margin: 0; color: var(--text); font: 650 22px/1.2 var(--display); letter-spacing: -.02em; }
.flow-rec-indicator { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--bad-line); border-radius: var(--radius-sm); background: var(--bad-surface); color: var(--text); cursor: pointer; font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.flow-rec-indicator[hidden] { display: none; }

.flow-steps { flex: none; padding: 0 24px 12px; border-bottom: 1px solid var(--line); }
.flow-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.flow-step { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; font: 500 15px/1.2 var(--display); text-align: left; transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.flow-step:hover { background: rgba(241, 243, 232, .05); color: var(--text); }
.flow-step[aria-current="step"] { border-color: var(--line-2); background: var(--panel); color: var(--text); font-weight: 600; }
.flow-step-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--field-line); border-radius: 50%; font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.flow-step-mark .ui-icon { display: none; width: 16px; height: 16px; }
.flow-step.is-complete .flow-step-mark { border-color: var(--good-line); color: var(--good); }
.flow-step.is-complete .flow-step-mark .ui-icon { display: block; }
.flow-step.is-complete .flow-step-num { display: none; }
.flow-step[aria-current="step"] .flow-step-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.flow-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flow-body { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 20px 24px 24px; scrollbar-gutter: stable; }
.flow-panel { display: grid; gap: 20px; }
.flow-panel[hidden] { display: none; }
.flow-panel.is-entering { animation: wc-fade-in var(--dur-tab) var(--ease) both; }
.flow-title { margin: 0; color: var(--text); font: 600 18px/1.3 var(--display); letter-spacing: -.01em; }
.flow-lede { margin: -14px 0 0; color: var(--muted); font: 400 15px/1.5 var(--display); }

.flow-source-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flow-source { min-width: 0; min-height: 68px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease); }
.flow-source > .ui-icon { width: 24px; height: 24px; color: var(--muted); }
.flow-source strong { display: block; font: 600 16px/1.3 var(--display); }
.flow-source small { display: block; color: var(--muted); font: 400 14px/1.35 var(--display); }
.flow-source:hover { border-color: var(--field-line); background: var(--panel-3); }
.flow-source[aria-selected="true"] { border-color: var(--accent); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--accent); }
.flow-source[aria-selected="true"] > .ui-icon { color: var(--accent); }
.flow-source-radio { width: 20px; height: 20px; border: 1.5px solid var(--field-line); border-radius: 50%; }
.flow-source[aria-selected="true"] .flow-source-radio { border: 6px solid var(--accent); }

.consent-field { min-width: 0; display: grid; gap: 4px; margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.consent-field.has-error { border-color: var(--bad-line); }
.consent-field > .link-button, .consent-field > .field-error { margin-left: 32px; }
.consent-field > .link-button { justify-self: start; }

.flow-source-panel { min-height: 312px; display: grid; align-content: start; gap: 12px; }
.flow-source-panel[hidden] { display: none; }
.rec-stage { display: grid; justify-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); text-align: center; }
.rec-status { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font: 400 14px/1.4 var(--display); text-align: left; }
.rec-status-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.rec-timer { margin-top: 4px; color: var(--text); font: 600 clamp(40px, 7vw, 56px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.rec-button { width: 76px; height: 76px; display: grid; place-items: center; padding: 0; border: 3px solid var(--text); border-radius: 50%; background: var(--bad); color: #fff; cursor: pointer; box-shadow: 0 0 0 6px rgba(241, 243, 232, .06); transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease); }
.rec-button:hover { background: #e26a5e; }
.rec-button:active { transform: scale(.96); }
.rec-glyph-record { width: 24px; height: 24px; border-radius: 50%; background: currentColor; }
.rec-button .ui-icon { display: none; width: 28px; height: 28px; stroke-width: 2.5; }
.rec-button.is-recording { border-color: var(--bad); background: var(--panel-2); color: var(--text); }
.rec-button.is-recording .rec-glyph-record { display: none; }
.rec-button.is-recording .ui-icon { display: block; }
.rec-button[aria-disabled="true"] { cursor: progress; opacity: .7; }
.rec-hint { margin: 0; color: var(--muted); font: 400 15px/1.4 var(--display); }
.rec-quality { max-width: 30rem; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); font: 400 14px/1.4 var(--display); text-align: left; }
.rec-quality[hidden] { display: none; }
.rec-quality .ui-icon { width: 16px; height: 16px; margin-top: 1px; }
.rec-quality.is-warning { border-color: var(--warn-line); background: var(--warn-surface); color: var(--warn-ink); }
.rec-actions { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rec-markers { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.rec-markers[hidden] { display: none; }
.rec-markers-title { margin: 0; color: var(--text); font: 600 15px/1.35 var(--display); }
.marker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.marker-grid .btn { min-height: 64px; flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 14px; white-space: normal; }
.markers-list { display: flex; flex-wrap: wrap; gap: 6px; }
.markers-list:empty { display: none; }
.rec-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font: 400 14px/1.45 var(--display); }
.rec-note .ui-icon { width: 16px; height: 16px; margin-top: 2px; }

.dropzone-field { position: relative; min-height: 244px; display: grid; place-content: center; justify-items: center; gap: 8px; margin: 0; padding: 24px; border: 1.5px dashed var(--field-line); border-radius: var(--radius-md); background: var(--bg); color: var(--muted); cursor: pointer; text-align: center; transition: border-color var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease), min-height var(--dur-tab) var(--ease); }
.dropzone-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.dropzone-field:hover, .dropzone-field.dragging { border-color: var(--accent); background: var(--panel); }
.dropzone-field:focus-within { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone-field > .ui-icon { width: 24px; height: 24px; color: var(--accent); }
.dropzone-field strong { color: var(--text); font: 600 17px/1.3 var(--display); }
.dropzone-field > span { font: 400 14px/1.45 var(--display); }
.dropzone-field .dropzone-cta { margin-top: 4px; pointer-events: none; }
.dropzone-field.is-compact { min-height: 112px; }
.dropzone-field.is-compact > .ui-icon, .dropzone-field.is-compact > span { display: none; }
.audio-summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.audio-summary[hidden] { display: none; }
.audio-summary-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--accent); }
.audio-summary > div { min-width: 0; display: grid; gap: 2px; }
.audio-summary strong { overflow: hidden; color: var(--text); font: 600 15px/1.35 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.audio-summary span { color: var(--muted); font: 400 14px/1.35 var(--display); }

.consent-review { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.consent-review-state { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 400 15px/1.4 var(--display); }
.consent-review-state .ui-icon { color: var(--muted); }
.consent-review-state.is-ok .ui-icon { color: var(--good); }

.flow-disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.flow-disclosure > summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: var(--radius-md); cursor: pointer; list-style: none; }
.flow-disclosure > summary::-webkit-details-marker { display: none; }
.flow-disclosure > summary strong { display: block; color: var(--text); font: 600 16px/1.35 var(--display); }
.flow-disclosure > summary small { display: block; color: var(--muted); font: 400 14px/1.35 var(--display); }
.flow-disclosure > summary > .ui-icon { color: var(--muted); transition: transform var(--dur-menu) var(--ease); }
.flow-disclosure[open] > summary > .ui-icon { transform: rotate(180deg); }
.flow-disclosure-body { display: grid; gap: 16px; padding: 4px 16px 16px; }
.photo-picker-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.photo-picker-row input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.photo-picker-row label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.photo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.photo-grid:empty { display: none; }
.photo-thumb { position: relative; min-width: 0; margin: 0; }
.photo-thumb img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.photo-thumb .icon-btn { position: absolute; top: 4px; right: 4px; border-color: var(--line-2); background: rgba(10, 13, 11, .86); color: var(--text); }

.review-list { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.review-row { display: grid; grid-template-columns: minmax(120px, 176px) minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 4px 8px 4px 16px; }
.review-row dd .btn { flex: none; margin-left: auto; }
.review-row + .review-row { border-top: 1px solid var(--line); }
.review-row dt { color: var(--muted); font: 500 14px/1.4 var(--display); }
.review-row dd { min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font: 400 15px/1.45 var(--display); overflow-wrap: anywhere; }
.review-row dd .ui-icon { width: 16px; height: 16px; color: var(--good); }
.review-row dd.is-missing { color: var(--muted); }
.review-row dd.is-missing .ui-icon { color: var(--muted); }

.lifecycle { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.lifecycle h4 { margin: 0; color: var(--text); font: 600 16px/1.35 var(--display); }
.lifecycle ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lifecycle li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; }
.lifecycle strong { display: block; color: var(--text); font: 600 15px/1.4 var(--display); }
.lifecycle li span:not(.step-icon) { display: block; color: var(--muted); font: 400 14px/1.5 var(--display); }
.lifecycle .link-button { justify-self: start; }

.flow-foot { flex: none; display: grid; gap: 12px; padding: 12px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel-2); }
.flow-requirements { display: grid; gap: 8px; }
.flow-requirements[hidden] { display: none; }
.flow-requirements-title { margin: 0; color: var(--muted); font: 500 14px/1.4 var(--display); }
.flow-requirements ul { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.req-item { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: 500 14px/1.3 var(--display); text-align: left; }
button.req-item { cursor: pointer; transition: border-color var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease); }
button.req-item:hover { border-color: var(--field-line); background: var(--panel-3); }
.req-item .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.req-item.is-done { border-color: transparent; background: transparent; color: var(--muted); }
.req-item.is-done .ui-icon { color: var(--good); }
.flow-attempted .req-item:not(.is-done) { border-color: var(--bad-line); }
.flow-attempted .req-item:not(.is-done) .ui-icon { color: var(--bad-ink); }
.flow-ready { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font: 500 15px/1.4 var(--display); }
.flow-ready .ui-icon { width: 16px; height: 16px; color: var(--good); }
.flow-progress { display: grid; gap: 6px; }
.flow-progress[hidden] { display: none; }
.flow-progress-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.flow-progress-track > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width var(--dur-tab) var(--ease); }
.flow-progress p { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); font: 400 14px/1.4 var(--display); }
.flow-progress b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-actions { display: flex; align-items: center; gap: 12px; }
.flow-actions .btn.primary { min-width: 168px; margin-left: auto; }
.flow-submit-note { margin: -4px 0 0; color: var(--muted); font: 400 14px/1.45 var(--display); text-align: right; }
.flow-submit-note[hidden] { display: none; }

body.recording-focus .rec-note { display: none; }

/* ---------- reader ---------- */
.result-dialog { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-dialog); }
.result-dialog .dialog-head, .result-dialog .result-tabs, .result-dialog .dialog-actions, .result-scroll { background: var(--panel); }
.result-pane.pane-enter { animation: wc-fade-in var(--dur-tab) var(--ease) both; }
.result-tab { transition: color var(--dur-press) var(--ease); }
.source-status { border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); }
.source-status-mark { border: 0; color: var(--accent); }
.source-status-mark .ui-icon { width: 20px; height: 20px; }
.learning-map { border-radius: var(--radius-md) !important; background: var(--panel-2) !important; }
.callout-icon { border-radius: 6px; }
.callout-icon .ui-icon { width: 16px; height: 16px; }
.chapter-number { border-radius: var(--radius-sm); }
.study-action .ui-icon, .ts .ui-icon, .ts-link .ui-icon, .bookmark-chip .ui-icon, .clip-row .button .ui-icon, .chapter-flags .ui-icon, .pane-intro .ui-icon { width: 16px; height: 16px; }
.study-action[data-bookmark][aria-pressed="true"] .ui-icon, .flag-bookmark .ui-icon, .bookmark-chip .ui-icon { fill: currentColor; }
.study-action, .ts, .ts-link, .bookmark-chip { transition: background-color var(--dur-press) var(--ease), border-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease); }
.text-action[aria-expanded]::after { content: none; }
.text-action .ui-icon { width: 16px; height: 16px; transition: transform var(--dur-menu) var(--ease); }
.text-action[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.reader-player { background: var(--panel-2); }
.lecture-photo-card { border-radius: var(--radius-sm); background: var(--panel-2); }
.usage-card { border-radius: var(--radius-md) !important; background: var(--panel-2) !important; }
.reader-controls span { color: var(--muted); font: 500 14px var(--display); font-variant-numeric: tabular-nums; }
.photo-dialog { background: var(--bg); }

/* ---------- responsive ---------- */
@media (max-width: 850px) {
  .record-dialog, .result-dialog { border: 0; border-radius: 0; }
  .record-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; }
  .flow-head { padding: calc(12px + env(safe-area-inset-top)) 8px 8px 16px; }
  .flow-steps { padding: 0 16px 10px; }
  .flow-body { padding: 16px; }
  .flow-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .flow-head h2 { font-size: 20px; }
  .flow-steps ol { display: flex; gap: 4px; }
  .flow-steps li { flex: 0 0 auto; }
  .flow-steps li:has([aria-current="step"]) { flex: 1 1 auto; min-width: 0; }
  .flow-step { padding-right: 6px; }
  /* Only the current step keeps its visible label; the others stay named for assistive tech. */
  .flow-step:not([aria-current="step"]) .flow-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flow-source-switch { grid-template-columns: 1fr; }
  .flow-source { min-height: 60px; }
  .flow-source-panel { min-height: 0; }
  .field-row { grid-template-columns: 1fr; }
  .marker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-row { grid-template-columns: minmax(0, 1fr); padding: 8px 4px 4px 14px; }
  .flow-actions { gap: 8px; }
  .flow-actions .btn { padding-inline: 12px; }
  .flow-actions .btn.primary { min-width: 0; flex: 1 1 auto; white-space: normal; text-align: center; }
  /* On phones the checklist names only what is still missing, keeping the action bar short. */
  .flow-requirements li:has(.is-done) { display: none; }
  .flow-requirements ul { gap: 6px; }
  .flow-submit-note { text-align: left; }
  .toast { left: 16px; right: 16px; max-width: none; }
  .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .auth-card.webcheck-auth { padding: 24px 20px 20px; }
}

/* ---------- motion ---------- */
@keyframes wc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wc-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes wc-spin { to { transform: rotate(360deg); } }
@keyframes wc-shimmer { to { transform: translateX(100%); } }
@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .spinner, .skeleton::after, .rec-dot, .refresh-btn.is-refreshing .ui-icon { animation: none !important; }
}

/* Profile and plan dialog (quick plain layout; the frontend is to be redesigned) */
.account-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.account-section { margin-top: 20px; }
.account-section h3 { margin: 0 0 8px; font-size: 16px; }
.account-rows { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.account-rows dt { color: var(--muted); }
.account-rows dd { margin: 0; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-usage { display: grid; gap: 12px; margin-bottom: 12px; }
.account-usage-row { display: grid; gap: 4px; }
.account-usage-row span { color: var(--muted); }
.account-usage-row progress { width: 100%; height: 8px; accent-color: var(--accent); }
.account-plans { display: grid; gap: 12px; }
.account-plan { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.account-plan.is-current { border-color: var(--accent); }
.account-plan h4 { margin: 0; font-size: 16px; }
.account-plan-mark { color: var(--good-ink); font-weight: 400; }
.account-plan-price { margin: 0; font-weight: 600; }
.account-plan ul { margin: 0; padding-left: 20px; color: var(--muted); }