/* ==========================================================================
   REVERIE — site.css
   Shared chrome for the viewing surfaces: /watch/<id> and /videos.

   One drawn system, two palettes, and since 2026-09-23 they are the same two
   colours with their roles swapped. Daylight ("ink") is the default: the
   logo's ink on the logo's paper, every edge a pen stroke on a pseudo-element,
   no shadows anywhere, the only emphasis a solid mass of ink. Night is that
   arrangement inverted — the paper becomes the page and the ink becomes the
   type. There is no second colour in either: the gold that used to light
   Midnight is archived. Do not invent new tokens.

   Sections are introduced by a title, set large in the display face and in
   sentence case. Never a tracked-out micro-cap eyebrow.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("/fonts/Archivo-400.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"ArchivoN";src:url("/fonts/ArchivoN-500.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Daylight — the ink theme. */
  --paper:#efeeea; --card:#f7f6f3; --well:#e4e2dc; --sink:#dcdad3;
  --ink:#131a24; --mut:#59616c; --faint:#8c929b; --on-accent:#efeeea;
  --pen:rgba(19,26,36,.40); --pen-quiet:rgba(19,26,36,.17);
  --line:rgba(19,26,36,.17); --line-strong:rgba(19,26,36,.40);
  --accent:#131a24; --accent-hi:#000; --accent-soft:rgba(19,26,36,.06); --accent-line:rgba(19,26,36,.40);
  --red:#b3372c; --green:#2f6b46;
  --stage:#e4e2dc; --glass:rgba(247,246,243,.88);
  --wash:rgba(19,26,36,.05); --hover:rgba(19,26,36,.06); --hover-strong:rgba(19,26,36,.10);
  --veil:rgba(19,26,36,.30);
  /* Over real footage the chrome never lightens: footage is footage in either theme. */
  --over-video:rgba(6,11,19,.62); --on-video:#f2f5f9; --on-video-mut:rgba(242,245,249,.62);
  --logo-mark:#131a24;   /* the mark's own ink inside the lockup sprite */
  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --ease:cubic-bezier(.22,1,.36,1); --fast:.14s; --slow:.26s;
  --disp:"ArchivoN","Arial Narrow",sans-serif; --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(18px,4vw,48px); --maxw:1180px; --maxw-wide:1800px;
  color-scheme:light;
}
/* ★ NIGHT IS THE INVERSE OF INK — 2026-09-23, Franz. The gold is archived.
   It was Midnight: blue-black lit by one warm gold. It is now the ink palette
   with its two roles swapped and nothing else added. Every line below is the
   mirror of the line above it in `:root`, in the same order, so the two blocks
   can be read side by side and checked by eye.

   THE TWO COLOURS ARE THE LOGO'S OWN, and neither is a flat black or white:
   `#131a24` is the mark's ink, `#efeeea` is its paper. In day the paper is the
   page and the ink is the type; at night they change places.

   THE SURFACES INVERT LITERALLY. In ink a card is LIGHTER than the page and a
   well is DARKER; here a card is darker and a well is lighter. That is what
   "the exact opposite" means, it matches the landing page, and it is the rule
   to keep when a new surface is added.

   THREE VALUES DO NOT INVERT, and each has a reason.
   `--red` and `--green` are meanings rather than decoration, and a legible red
   on a dark ground is a different red from a legible red on paper.
   `--stage` stays DARKER than the page in both themes: it is what footage sits
   on, and a video wants the most recessed surface there is. In ink that
   happens to be the literal mirror; here it is deliberately not. */
:root[data-theme="midnight"]{
  --paper:#131a24; --card:#0e1520; --well:#1f2733; --sink:#242d39;
  --ink:#efeeea; --mut:#a8aeb6; --faint:#767c85; --on-accent:#131a24;
  --pen:rgba(239,238,234,.40); --pen-quiet:rgba(239,238,234,.17);
  --line:rgba(239,238,234,.17); --line-strong:rgba(239,238,234,.40);
  --accent:#efeeea; --accent-hi:#ffffff; --accent-soft:rgba(239,238,234,.08); --accent-line:rgba(239,238,234,.40);
  --red:#e05252; --green:#6fbf8f;
  --stage:#0b1017; --glass:rgba(14,21,32,.88);
  --wash:rgba(239,238,234,.05); --hover:rgba(239,238,234,.06); --hover-strong:rgba(239,238,234,.10);
  --veil:rgba(8,12,18,.45);
  --logo-mark:#efeeea;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); font-family:var(--ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background var(--slow) var(--ease), color var(--slow) var(--ease);
}
body.no-motion *{transition:none!important;animation:none!important}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
:focus{outline:none}
:focus-visible{outline:2px solid var(--line-strong);outline-offset:3px;border-radius:var(--r-sm)}
svg{display:block}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
/* Reading measure is 1180. A workbench is not reading — the editor and the
   library want the screen they were given, so they take it. */
.wrap.wide{width:min(var(--maxw-wide),100% - 2*var(--gut))}

/* ---- The pen ------------------------------------------------------------
   Every edge of a shape is drawn, not ruled. The stroke is a pseudo-element
   pushed through a fractal-noise displacement so it wobbles like ink; the
   type on top stays razor-crisp because the filter never touches it.      */
.dd{position:relative;isolation:isolate}
.dd::before{
  content:"";position:absolute;inset:0;border:1.3px solid var(--pen);
  border-radius:inherit;filter:url(#rough-a);pointer-events:none;z-index:1;
}
.dd.quiet::before{border-color:var(--pen-quiet)}
.dd.b::before{filter:url(#rough-b)}
.dd.lg::before{filter:url(#rough-lg)}
.dd.twice::after{
  content:"";position:absolute;inset:-2px -1px 0 -2px;border:1.2px solid var(--pen-quiet);
  border-radius:inherit;filter:url(#rough-b);pointer-events:none;opacity:.75;z-index:1;
}
.pen-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- Header ------------------------------------------------------------ */
.top{padding:18px 0}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lockup{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.lockup .mark{width:26px;height:26px;color:var(--accent)}
.lockup .word{height:15px;width:auto;color:var(--ink)}
.lockup .word .tittle{fill:var(--accent)}
.top-r{display:flex;align-items:center;gap:10px}
.top-r .link{font-size:14px;color:var(--mut);text-decoration:none;padding:6px 4px;transition:color var(--fast) var(--ease)}
.top-r .link:hover{color:var(--ink)}

/* The rooms. Centre of the bar, one drawn capsule, the room you are in filled
   with ink — the same shape the segmented controls use everywhere else, so
   nothing new has to be learned to read it. */
/* The app's topbar: the mark, centred, and nothing else. */
.top-in.centred{justify-content:center}

/* The dock sits at the foot of every room, centred, one object. On a room that
   scrolls it stays in view — the bar is the app's one fixed thing. */
.appdock{position:sticky;bottom:0;z-index:30;display:flex;justify-content:center;
  padding:10px 0 14px;background:linear-gradient(to top,var(--paper) 62%,transparent)}
.appdock .acct .pop{bottom:calc(100% + 10px);top:auto}
/* Two of the bar's rooms are links, and the app's are buttons — so they arrive
   underlined. The room you are in is filled, the way the segmented controls
   everywhere else mark their choice. */
.rv-dock .isl-pill{text-decoration:none}
/* The shared half of the bar is injected into a <span>; `display:contents`
   makes its children direct flex items of the dock, so the bar stays one row
   instead of wrapping the rooms above the utilities. */
.rv-dock [data-dock-tail]{display:contents}
/* The Mac app is named but not sold until it ships. The rule lived on two
   pages and not the third, so the recorder offered a download that does not
   exist. It belongs with the tokens, once. */
html:not(.has-mac-app) .mac-only{display:none}
/* The app's own rules colour every pill in the dock, so the current room has to
   out-specify them rather than merely come later — `.dock-nav` in the selector
   is what does it. */
.rv-dock .dock-nav .isl-pill[aria-current="page"],
.rv-dock .dock-nav .isl-pill-plain[aria-current="page"]{
  background:var(--accent);color:var(--on-accent)
}
.rv-dock .dock-nav .isl-pill[aria-current="page"]::before{border-color:transparent}

.rooms{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;margin:0 auto}
.rooms::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);
  border-radius:999px;filter:url(#rough-b);pointer-events:none}
.rooms a{position:relative;z-index:1;display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border-radius:999px;font-size:13px;color:var(--mut);text-decoration:none;white-space:nowrap;
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.rooms a:hover{color:var(--ink)}
.rooms a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
@media(max-width:640px){.rooms a{padding:0 11px;font-size:12.5px}}
@media (max-width:560px){.top-r .link.hide-sm{display:none}}

/* ---- Buttons ------------------------------------------------------------
   A glyph is a circle, a word is a pill. Icons never sit before text.      */
.btn{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:400;color:var(--ink);
  text-decoration:none;white-space:nowrap;background:transparent;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen);border-radius:999px;filter:url(#rough-a);pointer-events:none}
.btn:hover{background:var(--wash)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--accent);color:var(--on-accent)}
.btn.solid::before{border-color:transparent}
.btn.solid:hover{background:var(--accent-hi)}
.btn.sm{height:32px;padding:0 14px;font-size:13px}
.btn.danger{color:var(--red)}
.btn.danger::before{border-color:currentColor;opacity:.7}
.btn .ok{display:none}
.btn.done .ok{display:inline}.btn.done .idle{display:none}
.roundbtn{
  position:relative;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background var(--fast) var(--ease);
}
.roundbtn::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);border-radius:50%;filter:url(#rough-b);pointer-events:none}
.roundbtn:hover{background:var(--wash)}
.roundbtn svg{width:16px;height:16px}
/* The gear is a roundbtn that happens to be a link, and it matches the
   day/night switch it stands beside — 34px, quiet until you want it. */
a.roundbtn.gear{width:34px;height:34px;color:var(--mut);text-decoration:none;flex:none}
a.roundbtn.gear:hover{color:var(--accent)}
a.roundbtn.gear[aria-current="page"]{color:var(--ink);background:var(--wash)}

/* Tooltips from data-tip — no `title`, the browser's is slow and unstyled. */
[data-tip]{position:relative}
/* A page that draws its own tooltips (the editor uses the app's tip.js, which
   lives on <body> and moves to stay on screen) sets `app-tips` on <body>, and
   these stand down. `:where` keeps every override's specificity as it was. */
:where(body:not(.app-tips)) [data-tip]::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  background:var(--ink);color:var(--paper);font-size:12px;line-height:1;padding:7px 9px;border-radius:6px;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
}
:where(body:not(.app-tips)) [data-tip]:hover::after,:where(body:not(.app-tips)) [data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:.35s}
:where(body:not(.app-tips)) .tip-below[data-tip]::after{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
:where(body:not(.app-tips)) .tip-below[data-tip]:hover::after{transform:translate(-50%,0)}

/* Theme toggle: a two-word pill, the chosen word solid. */
/* The day/night switch. Icon only, in both themes — the pair of glyphs is its
   own label, and it is the sole exception to the site's text-first rule. Only
   ONE of the two is ever in the document flow, so it never resizes as it
   toggles. Same shape as the app's. */
.viewbtn{width:34px;height:34px;border-radius:50%;line-height:0;flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;color:var(--ink);border:1.3px solid var(--pen-quiet);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.viewbtn:hover{color:var(--accent);border-color:var(--pen)}
.viewbtn .vi{display:none}
:root[data-theme="midnight"] .viewbtn .vi-sun,
:root:not([data-theme="midnight"]) .viewbtn .vi-moon{display:block}
.theme{
  position:relative;display:inline-flex;height:32px;border-radius:999px;padding:3px;gap:2px;font-size:12.5px;
}
.theme::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);border-radius:999px;filter:url(#rough-b);pointer-events:none}
.theme button{position:relative;z-index:1;height:100%;padding:0 11px;border-radius:999px;color:var(--mut);transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.theme button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.theme button:not([aria-pressed="true"]):hover{color:var(--ink)}

/* A segmented filter: the same two-word pill as the theme toggle, any number
   of words wide. The chosen one is solid; the rest are quiet. */
.seg{position:relative;display:inline-flex;height:32px;border-radius:999px;padding:3px;gap:2px;font-size:12.5px}
.seg::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);border-radius:999px;filter:url(#rough-b);pointer-events:none}
.seg button{position:relative;z-index:1;height:100%;padding:0 12px;border-radius:999px;color:var(--mut);white-space:nowrap;transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:not([aria-pressed="true"]):hover{color:var(--ink)}

/* ---- Type ------------------------------------------------------------- */
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.05;letter-spacing:-.005em;margin:0;color:var(--ink)}
h1{font-size:clamp(26px,3.4vw,38px)}
h2{font-size:clamp(21px,2.4vw,26px)}
h3{font-size:18px}
p{margin:0}
.mut{color:var(--mut)}
.faint{color:var(--faint)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--mut)}
.meta b{font-weight:400;color:var(--ink)}
.meta .dot::before{content:"\00B7";margin-right:14px;color:var(--faint)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- Fields ------------------------------------------------------------ */
.field{position:relative;display:flex;align-items:center;height:40px;border-radius:var(--r-sm);background:var(--card)}
.field::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);border-radius:inherit;filter:url(#rough-b);pointer-events:none}
.field:focus-within::before{border-color:var(--pen)}
.field input{flex:1;min-width:0;height:100%;padding:0 12px;background:transparent;border:0;color:var(--ink);font:inherit;font-size:14px}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none}
.field.mono input{font-variant-numeric:tabular-nums}
.check{display:inline-flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;user-select:none}
.check input{appearance:none;width:18px;height:18px;margin:0;border-radius:5px;position:relative;background:var(--card);cursor:pointer}
.check input::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen);border-radius:inherit;filter:url(#rough-b)}
.check input:checked{background:var(--accent)}
.check input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ---- Cards, dialogs, toasts ------------------------------------------ */
.card{position:relative;border-radius:var(--r-md);background:var(--card);padding:18px 20px}
.card::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen-quiet);border-radius:inherit;filter:url(#rough-a);pointer-events:none}
.scrim{position:fixed;inset:0;background:var(--veil);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;opacity:0;pointer-events:none;transition:opacity var(--slow) var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.dialog{position:relative;width:min(460px,100%);border-radius:var(--r-lg);background:var(--paper);padding:26px 26px 22px;transform:translateY(8px);transition:transform var(--slow) var(--ease)}
.scrim.open .dialog{transform:none}
.dialog::before{content:"";position:absolute;inset:0;border:1.4px solid var(--pen);border-radius:inherit;filter:url(#rough-a);pointer-events:none}
.dialog h2{margin-bottom:6px}
.dialog .lede{color:var(--mut);font-size:14px;margin-bottom:18px}
.dialog .row{display:flex;gap:10px;align-items:center;margin-top:14px}
.dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.dialog .err{color:var(--red);font-size:13px;margin-top:10px;min-height:1.2em}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);font-size:13.5px;padding:10px 14px;border-radius:999px;z-index:60;
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- The account control ------------------------------------------------
   Mounted by `site.js` into `<div class="acct">` on every signed-in surface.
   A word, so it is a pill; the panel opens BELOW it and closes on an outside
   click. Flat, like everything else — the panel is a drawn edge, not a card
   floating on a shadow. */
.acct{position:relative}
.acct .pop{position:absolute;right:0;top:calc(100% + 8px);width:270px;border-radius:var(--r-md);background:var(--paper);padding:16px 16px 12px;z-index:40;display:none}
.acct .pop::before{content:"";position:absolute;inset:0;border:1.3px solid var(--pen);border-radius:inherit;filter:url(#rough-a);pointer-events:none}
.acct.open .pop{display:block}
.acct .pop .who{font-size:14px;overflow-wrap:anywhere}
.acct .pop .plan{font-size:13px;color:var(--mut);margin-top:2px}
.acct .pop .well{position:relative;height:8px;border-radius:999px;background:var(--well);margin:12px 0 6px}
.acct .pop .well i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:inherit}
.acct .pop .lnk{display:block;width:100%;text-align:left;font-size:13.5px;padding:8px 0;color:var(--mut);text-decoration:none}
.acct .pop .lnk:hover{color:var(--ink)}
.acct .pop hr{border:0;height:1px;background:var(--line);margin:10px 0 4px}

/* ---- Footer ------------------------------------------------------------ */
.foot{margin-top:auto;padding:34px 0 26px;color:var(--faint);font-size:13px}
/* A page that must fit the window gets a thinner foot. */
/* `fits` means: this page is the size of the window and never scrolls.
   body is already a flex column with the footer pushed down, so main only
   has to take the rest and refuse to grow past it. */
body.fits{height:100dvh;overflow:hidden}
body.fits .foot{padding:10px 0 12px;margin-top:0}
body.fits main{flex:1;min-height:0;display:flex;flex-direction:column}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.foot a{color:var(--mut);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 16px}

/* ---- Empty / error states -------------------------------------------- */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:40px 24px;min-height:100%}
.state h2{font-size:clamp(20px,2.4vw,26px)}
.state p{color:var(--mut);max-width:44ch;font-size:14.5px}
.state .row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.state .mark{width:36px;height:36px;color:var(--faint);margin-bottom:6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Selected text swaps the two colours, so it reads on every surface in
   either theme — the words take the page colour on a block of ink. */
::selection{background:var(--ink);color:var(--paper)}