/* DocketIQ's own look: linen page, warm greys, near-black ink. Borders only:
   no glows, no soft shadows, no coloured edge stripes, no underlines, no
   focus rings (a darker border shows focus instead). */
:root {
  --surface: #f4f4f4; /* the website's page colour, under its grain */
  --raised: #fffefc;
  --line: #e3e1db;
  --line-strong: #bdb9b0;
  --body: #1c1b19;
  --muted: #64615b;
  --ink: #22211f;
  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #171614;
    --raised: #1f1e1b;
    --line: #34322e;
    --line-strong: #57534c;
    --body: #ecebe7;
    --muted: #a19d95;
    --ink: #f3f2ee;
  }
}
:root[data-theme="dark"] {
  --surface: #171614; --raised: #1f1e1b; --line: #34322e; --line-strong: #57534c;
  --body: #ecebe7; --muted: #a19d95; --ink: #f3f2ee;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
*:focus, *:focus-visible { outline: none; }
html, body { margin: 0; background: var(--surface); color: var(--body); font: 15px/1.45 var(--font); }
/* The website's paper grain (docketiq-website app/globals.css): fixed fractal
   noise at 10% over the page colour. Cards and the video cover it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.top, .layout { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }

.top { display: flex; align-items: center; gap: 24px; padding: 18px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wordmark { height: 34px; width: auto; display: block; }
.mode { margin: 0; color: var(--muted); font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--raised); text-wrap: balance; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; padding: 24px 28px 40px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); padding: 16px; } }

.frame { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
video { width: 100%; height: 100%; display: block; background: var(--raised); object-fit: cover; }
/* The start card: the dashboard still behind a linen scrim, until playback starts. */
.cover { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--surface) 62%, transparent); }
.cover[hidden] { display: none; }
.cover-card { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 8px; max-width: 460px; }
.cover-kicker { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cover-title { margin: 0; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); font-weight: 650; text-wrap: balance; }
.cover-meta { margin: 0 0 6px; color: var(--muted); text-wrap: pretty; }
.cover-actions { display: flex; gap: 8px; flex-wrap: wrap; }
video::cue { font: 500 18px/1.35 var(--font); background: rgba(20, 19, 17, 0.82); }

.now { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin: 14px 2px 10px; flex-wrap: wrap; }
.now-chapter { margin: 0; font-weight: 600; color: var(--ink); font-size: 17px; }
.now-scene { margin: 2px 0 0; color: var(--muted); }
.now-note { margin: 0; max-width: 520px; font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--raised); text-wrap: pretty; }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
button, select { font: inherit; color: var(--body); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button:hover, select:hover { border-color: var(--line-strong); }
button:focus-visible, select:focus-visible, input:focus-visible { border-color: var(--ink); }
button.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); min-width: 84px; }
.field, .check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.check input { accent-color: var(--ink); }

.scrub { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.scrub input { flex: 1; accent-color: var(--ink); }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 110px; text-align: right; }

.topics { margin-top: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border-radius: 999px; padding: 5px 12px; font-size: 14px; }

.toc { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 1000px) { .toc { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; } }
/* Chapter list: no boxes. The open chapter gets a light fill and its scenes;
   everything lines up on one title column (the 32px number column + gap). */
.toc ol, .toc .scenes { list-style: none; margin: 0; padding: 0; }
.toc li.chapter { border-radius: 8px; }
.toc li.chapter.current { background: var(--raised); }
.chapter-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.chapter-head:hover .name { color: var(--ink); }
.chapter-head .num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.chapter-head .name { color: var(--body); font-weight: 500; text-wrap: balance; }
li.chapter.current .chapter-head .name { color: var(--ink); font-weight: 600; }
.chapter-head .len { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.progress { height: 2px; background: var(--line); border-radius: 1px; margin: 0 12px 9px 46px; overflow: hidden; }
.progress[hidden] { display: none; }
.progress span { display: block; height: 100%; background: var(--muted); width: 0; }
.toc .scenes { display: none; padding: 2px 12px 10px 46px; }
li.chapter.current .scenes { display: grid; gap: 1px; }
.scenes button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 4px 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; border-radius: 0; cursor: pointer; }
.scenes button > span:first-child { text-wrap: balance; }
.scenes button .at { font-size: 12px; font-variant-numeric: tabular-nums; }
.scenes button:hover, .scenes button.current { color: var(--ink); }
.scenes button.current { font-weight: 500; }
.guide-note { color: var(--muted); font-size: 13px; margin-top: 16px; text-wrap: pretty; }