/* Vistilla design system.
   Two surfaces: a pale aqua ground for the library and forms, a monitor
   surface wherever video lives. One motif carries through: the track — a
   horizontal band of time with comment markers pinned to it.

   The neutrals are teal rather than grey, and they were recoloured by moving
   the hue and then walking each one back to the luminance it had before, so
   the palette changed colour without changing a single contrast ratio the
   design was tuned to. Cobalt and coral stay as they were: one marks the
   action to take, the other marks recording, and neither job changed.

   The mark's own teal is taking cobalt's place a page at a time. A page that
   has been redrawn carries .brand-accent on its body, and there the teal
   does both jobs: it says where you are and what to do next. The pages that
   have not been redrawn keep cobalt, and nothing below has to know which
   kind of page it is on.

   Both surfaces are themed. Light is the original paper-and-dark-monitor
   design; dark recolours the same tokens, so every rule below is written
   once. The picture itself is black under either theme (--stage), and a
   panel that must stay dark on a light page carries .on-dark. */

:root {
  color-scheme: light;

  --paper: #e4eff1;
  --card: #ffffff;
  --rule: #c7dfe3;
  --rule-soft: #daedf0;
  --rule-strong: #a1cbd2;
  --ink: #0c181b;
  --ink-soft: #46595e;
  --ink-faint: #7e979d;

  --btn-hover: #f0f9fa;
  --rail-hover: #eaf6f8;
  --ghost-hover: rgba(16, 32, 36, 0.06);
  --empty-bg: rgba(255, 255, 255, 0.5);

  /* The surface around video: chrome, panels, the comment rail. */
  --monitor: #e4eff1;
  --monitor-2: #ffffff;
  --monitor-3: #cce7eb;
  --monitor-ink: #0c181b;
  --monitor-soft: #46595e;
  --monitor-hover: #c1e1e5;
  --monitor-ghost-hover: rgba(16, 32, 36, 0.06);
  /* The picture, which is black whatever the theme says — so anything
     written over it is light under both themes. */
  --stage: #000000;
  --stage-ink: #e1edf0;
  --stage-soft: #8daaaf;

  /* An off switch is a control, not a divider: it has to be seen against the
     card it sits on, which the hairline colours are deliberately too faint
     to manage. */
  --switch-off: #6b9ba8;
  --track-bg: #d4edf0;
  --track-rail: #badde2;
  --track-head: #ffffff;
  --marker-halo: rgba(16, 32, 36, 0.22);

  /* --cobalt paints surfaces, --cobalt-ink writes on them. They part company
     in dark, where a blue readable as text is too pale to sit under white. */
  --cobalt: #1b4fd8;
  --cobalt-hover: #1740b6;
  --cobalt-ink: #1b4fd8;
  --cobalt-soft: #e7ecfc;
  --cobalt-wash: rgba(27, 79, 216, 0.1);
  --cobalt-wash-strong: rgba(27, 79, 216, 0.18);
  --coral: #f04e3e;
  --coral-hover: #d93d2d;
  --coral-soft: #ffe9e6;
  --coral-ink: #c23523;
  --moss: #2f7d5e;
  --moss-soft: #e3f1ea;
  --amber: #c8841a;
  --danger-solid: #a8281a;

  /* Vistilla's teal. --brand-soft is an alpha so it tints whatever it lies on,
     which on the rail is itself a tint of the page. The deep ink is the
     screen of the mark in logo.svg, taken from it rather than matched by eye;
     it and the ground (a shade deeper than the mark's own tile, so a tile
     still stands off the page) do not change with the theme, any more than
     the mark does. */
  --brand: #2a7d94;
  --brand-ink: #17596b;
  --brand-soft: rgba(42, 125, 148, 0.14);
  --brand-deep: #0f3d47;
  --brand-ground: radial-gradient(circle at 52% 44%, #d9edf3 0%, #b4d6e0 58%, #7aafbe 100%);

  /* --brand changes with the theme and --brand-solid does not: it is the
     teal as a fill with white on it — a ticked box, the count in the
     selection bar — and the lighter teal of the dark theme cannot carry
     white. */
  --brand-solid: #2a7d94;
  --brand-solid-hover: #226a7e;
  /* --brand-soft with the alpha taken out, for a fill that has to cover what
     is under it: a chosen row in a list whose gaps are drawn by its ground. */
  --brand-tint: #dcecf0;
  /* One gradient for every filled control in the brand's colour (the tour's
     buttons, the upload arrow, a team's badge), made from that colour alone
     so it stays clean whichever colour a team picks: lighter at the top
     left, deeper at the bottom right, mixed in OKLab so it never muddies. */
  --brand-grad: linear-gradient(135deg,
    color-mix(in oklab, var(--brand-solid) 78%, white) 0%,
    var(--brand-solid) 52%,
    color-mix(in oklab, var(--brand-solid) 84%, black) 100%);
  --brand-glow: color-mix(in oklab, var(--brand-solid) 55%, transparent);

  /* The rail lets the page wash through instead of covering it with a card,
     so it takes the colour of the corner it sits in. */
  --rail-bg: rgba(255, 255, 255, 0.66);
  /* The faint ink for text that has to be read rather than glanced past: a
     role, a count, a date. --ink-faint was chosen against white and loses
     its footing on a tint; this one holds 4.5:1 on the rail and on a card. */
  --ink-quiet: #586e73;

  /* A recording with no frame to show still gets a picture: the ground the
     mark is drawn on, with a play button where the mark has its card. */
  --poster-ground: linear-gradient(140deg, #dcedf2 0%, #c5e0e8 52%, #a9cfda 100%);
  --poster-glyph: rgba(255, 255, 255, 0.82);
  /* A text field standing on glass rather than on a card. */
  --field-glass: rgba(255, 255, 255, 0.7);
  --on-accent: #ffffff;

  /* Toasts, the selection bar and the track tooltip: one slab that has to
     stand out from the page under either theme. In light it is the deep
     teal the mark draws its comment bubble in. */
  --inverse-bg: #123a4a;
  --inverse-ink: #ffffff;
  --inverse-ink-soft: rgba(255, 255, 255, 0.62);
  --inverse-btn: rgba(255, 255, 255, 0.14);
  --inverse-btn-hover: rgba(255, 255, 255, 0.24);

  /* The page is a wash rather than a flat fill: four soft pools of light on
     the paper colour, deeper at the top left and bottom left, opening out
     towards the middle. Every stop fades to its own colour at zero alpha
     rather than to `transparent`, which some browsers interpolate through
     transparent black and leave a grey bloom across the middle of. */
  --page-wash:
    radial-gradient(1100px 780px at 12% 6%, rgba(112, 173, 188, 0.38) 0%, rgba(112, 173, 188, 0) 62%),
    radial-gradient(900px 700px at 98% 40%, rgba(126, 184, 196, 0.28) 0%, rgba(126, 184, 196, 0) 58%),
    radial-gradient(1000px 820px at 4% 98%, rgba(104, 167, 184, 0.34) 0%, rgba(104, 167, 184, 0) 60%),
    radial-gradient(1250px 950px at 64% 62%, rgba(238, 251, 253, 0.9) 0%, rgba(238, 251, 253, 0) 66%);

  --space: 4px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --ui: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  /* Mono is reserved for timecodes and durations, where digits must align. */
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;

  --shadow-raise: 0 1px 2px rgba(16, 32, 36, 0.06), 0 8px 24px -12px rgba(17, 23, 34, 0.18);
  --track-h: 46px;
}

/* Dark: the old monitor palette, now covering the whole product.
   theme-boot.js resolves "follow the system" into a concrete data-theme
   before first paint, so one selector is enough here. */
:root[data-theme="dark"],
.on-dark {
  color-scheme: dark;

  --monitor: #081518;
  --monitor-2: #0d2327;
  --monitor-3: #173439;
  --monitor-ink: #e1edf0;
  --monitor-soft: #8daaaf;
  --monitor-hover: #1e4147;
  --monitor-ghost-hover: rgba(255, 255, 255, 0.08);

  --switch-off: #3f737c;
  --track-bg: #0d2327;
  --track-rail: #173439;
  --marker-halo: rgba(255, 255, 255, 0.35);

  --cobalt: #3f6ae0;
  --cobalt-hover: #3157c9;
  --cobalt-ink: #9fc0ff;
  --cobalt-soft: #1b2947;
  --cobalt-wash: rgba(91, 134, 247, 0.14);
  --cobalt-wash-strong: rgba(91, 134, 247, 0.24);
  --coral: #f05a49;
  /* Hovering darkens here as it does in light. Lifting a fill towards white
     is the usual move on a dark page, but these two are worn by buttons with
     a white label on them, and every step towards white takes the label with
     it: the old #ff7263 left it at 2.7:1, which is a button you cannot read
     exactly while you are pointing at it. */
  --coral-hover: #d8442f;
  --coral-soft: rgba(240, 78, 62, 0.18);
  --coral-ink: #ff9c90;
  --moss: #4fb089;
  --moss-soft: rgba(79, 176, 137, 0.18);
  --amber: #dda23f;

  --brand: #4aa9c2;
  --brand-ink: #8fd3e4;
  --brand-soft: rgba(84, 180, 204, 0.18);
  --brand-tint: #17373f;
}

:root[data-theme="dark"] {
  /* A shade under the monitor palette, so a dark panel sitting on the page
     still reads as a panel. */
  --paper: #061113;
  --card: #0c1f23;
  --rule: #183a3f;
  --rule-soft: #132e33;
  --rule-strong: #264d52;
  --ink: #e1edf0;
  --ink-soft: #8daaaf;
  --ink-faint: #6f8a90;

  --btn-hover: #173439;
  --rail-hover: #132e33;
  --ghost-hover: rgba(255, 255, 255, 0.08);
  --empty-bg: rgba(255, 255, 255, 0.03);

  --danger-solid: #b43426;
  --inverse-bg: #1a393e;

  --rail-bg: rgba(12, 31, 35, 0.6);
  --ink-quiet: #7d989e;

  --poster-ground: linear-gradient(140deg, #18404a 0%, #113038 52%, #0b2228 100%);
  --poster-glyph: rgba(143, 211, 228, 0.14);
  --field-glass: rgba(255, 255, 255, 0.05);

  /* The same four pools, sunk. The one in the middle lifts rather than
     darkens, so the page still opens out where the light one does. */
  --page-wash:
    radial-gradient(1100px 780px at 12% 6%, rgba(17, 74, 89, 0.62) 0%, rgba(17, 74, 89, 0) 62%),
    radial-gradient(900px 700px at 98% 40%, rgba(14, 60, 73, 0.5) 0%, rgba(14, 60, 73, 0) 58%),
    radial-gradient(1000px 820px at 4% 98%, rgba(20, 84, 99, 0.5) 0%, rgba(20, 84, 99, 0) 60%),
    radial-gradient(1250px 950px at 64% 62%, rgba(24, 66, 77, 0.55) 0%, rgba(24, 66, 77, 0) 66%);

  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.9);
}

/* A panel that stays dark on a light page — the sign-in pitch, say. It takes
   the monitor half of the dark palette above and paints itself with it. */
.on-dark {
  background: var(--monitor);
  color: var(--monitor-ink);
}

/* The redrawn pages: every rule that reaches for cobalt gets the mark's teal
   instead. Set on the body rather than the root so it sits below the theme,
   and resolves the theme's own teal for each one. A panel that stays dark
   sets cobalt for itself, so it has to be told again. */
body.brand-accent,
body.brand-accent .on-dark {
  --cobalt: var(--brand-solid);
  --cobalt-hover: var(--brand-solid-hover);
  --cobalt-ink: var(--brand-ink);
  --cobalt-soft: var(--brand-tint);
  --cobalt-wash: var(--brand-soft);
  --cobalt-wash-strong: var(--brand-soft);
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute has to beat our own display rules. The browser's own
   [hidden] { display: none } is a user-agent rule, so any author rule setting
   display — on an overlay, a toolbar, a panel — silently defeats it and the
   element stays on screen after being "hidden". */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Selected text in the brand's teal, not the browser's own blue or purple. */
::selection { background: color-mix(in srgb, var(--cobalt) 28%, transparent); }

body {
  margin: 0;
  /* The colour is the floor and the wash is painted over it, so anything that
     fills with --paper still matches the page where the wash is thinnest.
     Not fixed: a fixed background pushes the page onto a different
     compositing path, which is a known way to lose a video to a black
     rectangle, and this one is not worth that risk. */
  background-color: var(--paper);
  background-image: var(--page-wash);
  color: var(--ink);
  /* Checkboxes, radios and sliders the page does not draw itself take the
     accent too, instead of the browser's own blue. */
  accent-color: var(--cobalt);
  font: 400 15px/1.55 var(--ui);
  font-feature-settings: "kern" 1;
  min-height: 100vh;
}

/* Every checkbox drawn the same way: a rounded box that fills with the
   accent and a white tick, with a soft ring on hover and a clear one for
   the keyboard. Switches and the library's card picker draw their own. */
input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input)) {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1.5px solid var(--rule-strong, var(--rule));
  border-radius: 6px;
  background: var(--card) center / 12px 12px no-repeat;
  cursor: pointer;
  vertical-align: -4px;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input)):hover {
  border-color: var(--brand-solid, var(--cobalt));
  box-shadow: 0 0 0 4px var(--brand-soft, var(--cobalt-wash));
}
input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input)):checked {
  border-color: var(--brand-solid, var(--cobalt));
  background-color: var(--brand-solid, var(--cobalt));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.7 2.7L11 4.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input)):focus-visible {
  outline: 2px solid var(--brand-solid, var(--cobalt)); outline-offset: 2px;
}
input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input)):disabled {
  opacity: .5; cursor: default; box-shadow: none;
}
/* A label holding one sits beside it with room between the box and the words. */
label:has(> input[type="checkbox"]:where(:not(.ask-switch, [role="switch"], .switch input, .pick input, .attach-chip input, .chip input))) {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}

body.on-monitor {
  background-color: var(--monitor);
  background-image: var(--page-wash);
  color: var(--monitor-ink);
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 31px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; max-width: 68ch; }

a { color: var(--cobalt-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cobalt-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- time -------------------------------------------------------------- */

.tc {
  font: 500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- top bar ----------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
body.on-monitor .topbar {
  background: var(--monitor-2);
  border-bottom-color: var(--monitor-3);
}
/* Glass over the same wash the rail lets through, so the bar and the rail
   read as one frame around the page. Asked for by name, and only by pages
   with no video on them: the blur costs a compositing layer, and a video
   under one of those is how a picture turns into a black rectangle. */
.topbar-glass {
  gap: 8px;
  background: var(--rail-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
/* Every top bar, glass or not, draws its buttons' icons at one size, so
   Library looks the same over a video as it does in settings. */
.topbar .btn-ghost svg { width: 18px; height: 18px; flex: none; display: block; }
.topbar-glass :focus-visible { outline-color: var(--brand); }
/* As wide as the rail under it, so whatever comes next in the bar starts on
   the same line as the page's own content. */
.topbar-glass .brand { min-width: 248px; }
@media (max-width: 860px) {
  .topbar-glass .brand { min-width: 0; margin-right: 8px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: inherit;
}
.brand:hover { text-decoration: none; }
/* The mark is one drawing rather than two circles built from borders, so the
   thing beside the word is the same thing the tab and the home screen show. */
.brand-mark {
  width: 26px; height: 26px;
  flex: none;
  background: url("/assets/logo.svg") center / contain no-repeat;
}

/* In the top bar the mark is the first thing seen, so it is drawn larger,
   nearly the bar's height, and the name grows a little with it. */
.topbar .brand { gap: 11px; font-size: 18px; }
.topbar .brand-mark { width: 40px; height: 40px; }

.topbar .spacer { flex: 1; }

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: 500 14px/1 var(--ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--cobalt-hover); }

.btn-rec {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--on-accent);
}
.btn-rec:hover { background: var(--coral-hover); }
/* The lamp on a recorder: the mark's own red ring, turned inside out. */
.rec-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  margin: 0 2px 0 3px;
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--ghost-hover); color: var(--ink); }

.btn-lg { height: 42px; padding: 0 20px; font-size: 15px; }
.btn-icon, .btn .icon { flex: none; width: 16px; height: 16px; }
.btn .icon svg { display: block; width: 100%; height: 100%; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }

body.on-monitor .btn {
  background: var(--monitor-3);
  border-color: transparent;
  color: var(--monitor-ink);
}
body.on-monitor .btn:hover { background: var(--monitor-hover); }
body.on-monitor .btn-ghost { background: transparent; color: var(--monitor-soft); }
body.on-monitor .btn-ghost:hover { background: var(--monitor-ghost-hover); color: var(--monitor-ink); }
body.on-monitor .btn-primary { background: var(--cobalt); color: var(--on-accent); }
body.on-monitor .btn-rec { background: var(--coral); color: var(--on-accent); }
/* The plain hover above outranks the two coloured buttons, which only set a
   background and leave the white label from the rule before it — so without
   these, pointing at Publish or Start washed the button out and left the
   label invisible on it. */
body.on-monitor .btn-primary:hover { background: var(--cobalt-hover); }
body.on-monitor .btn-rec:hover { background: var(--coral-hover); }

/* --- forms ------------------------------------------------------------- */

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: 400 15px/1.4 var(--ui);
}
textarea { resize: vertical; min-height: 76px; }
input:focus, textarea:focus, select:focus { border-color: var(--cobalt); outline-offset: 0; }

body.on-monitor input[type="text"], body.on-monitor input[type="password"],
body.on-monitor textarea, body.on-monitor select {
  background: var(--monitor-2);
  border-color: var(--monitor-3);
  color: var(--monitor-ink);
}

/* --- a dropdown the page draws itself ------------------------------------- */

/* A native select can be styled to the edge of its box and no further: the
   list that opens belongs to the operating system. select.js replaces the
   list and leaves the control itself holding the value. */
.choice { position: relative; }
.choice-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: 400 15px/1.4 var(--ui);
  text-align: left;
  cursor: pointer;
}
.choice-trigger:hover { border-color: var(--monitor-3); }
.choice-trigger:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.choice-trigger[aria-expanded="true"] { border-color: var(--cobalt); }
.choice-trigger:disabled { opacity: 0.55; cursor: default; }
.choice-icon { flex: none; width: 18px; height: 18px; display: block; }
.choice-icon svg { width: 100%; height: 100%; display: block; }
.choice-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-mark {
  flex: none;
  width: 16px; height: 16px;
  color: var(--ink-faint);
  transition: transform 140ms ease;
}
.choice-trigger[aria-expanded="true"] .choice-mark { transform: rotate(180deg); }

.choice-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-raise);
}
.choice-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 400 14.5px/1.3 var(--ui);
  text-align: left;
  cursor: pointer;
}
.choice-option:hover,
.choice-option:focus-visible { background: var(--ghost-hover); outline: none; }
/* The chosen row is marked, not highlighted: a block of colour under one line
   says "hovered" to everyone who has used a menu before. */
.choice-option[aria-selected="true"] { color: var(--cobalt-ink); font-weight: 500; }
.choice-tick { flex: none; width: 16px; height: 16px; margin-left: auto; opacity: 0; }
.choice-option[aria-selected="true"] .choice-tick { opacity: 1; }

body.on-monitor .choice-trigger,
body.on-monitor .choice-list {
  background: var(--monitor-2);
  border-color: var(--monitor-3);
  color: var(--monitor-ink);
}
body.on-monitor .choice-option { color: var(--monitor-ink); }
body.on-monitor .choice-option:hover,
body.on-monitor .choice-option:focus-visible { background: var(--monitor-ghost-hover); }
body.on-monitor .choice-option[aria-selected="true"] { color: var(--cobalt-ink); }
body.on-monitor .choice-mark { color: var(--monitor-soft); }

.hint { font-size: 13px; color: var(--ink-faint); }
.error-text { font-size: 13px; color: var(--coral); min-height: 18px; }

/* --- layout ------------------------------------------------------------ */

.shell { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 56px); }
.main { padding: 26px 28px 60px; min-width: 0; }
.center-pane { max-width: 420px; margin: 8vh auto; padding: 0 20px; }
.wide-pane { max-width: 1000px; margin: 0 auto; }

/* --- the rail ---------------------------------------------------------- */

/* It stays put while the library scrolls past it, and scrolls on its own
   once a team has more collections than the window has room for. */
.rail {
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding: 18px 12px 24px;
  border-inline-end: 1px solid var(--rule);
  background: var(--rail-bg);
}
.rail :focus-visible { outline-color: var(--brand); }

.rail-group { margin-bottom: 14px; }
.rail-group:last-child { margin-bottom: 0; }
/* Sections are told apart by a hairline and air, not by boxes. */
.rail-group + .rail-group { padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.rail-title {
  font: 650 11px/1.2 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 6px;
  padding: 0 10px;
}
/* A section's heading, with its one action as a small + at the far end. */
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 26px; margin-bottom: 4px; padding-inline-end: 4px;
}
.rail-head .rail-title { margin: 0; }
.rail-plus {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 8px;
  background: none; color: var(--ink-quiet); cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.rail-plus .icon, .rail-plus svg { display: block; width: 16px; height: 16px; }
.rail-plus:hover { background: var(--brand-soft); color: var(--brand-ink); }
.rail-plus:active { transform: scale(0.92); }

/* The team being looked at: a card on top of the rail, which opens the
   switch to another team. */
.rail-teamcard {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px;
  border: 1px solid var(--rule-soft); border-radius: 16px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(12, 30, 38, 0.05), 0 10px 26px -18px rgba(12, 30, 38, 0.35);
  text-align: start; cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.rail-teamcard:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--rule-soft));
  box-shadow: 0 1px 2px rgba(12, 30, 38, 0.06), 0 14px 30px -18px rgba(12, 30, 38, 0.45);
  transform: translateY(-1px);
}
.rail-teamcard:active { transform: translateY(0); }
.rail-teamcard[aria-expanded="true"] { border-color: color-mix(in srgb, var(--brand) 45%, var(--rule-soft)); }
.rail-teamcard[aria-expanded="true"] .rail-teamcard-switch { color: var(--brand-ink); }
.rail-teamwrap { position: relative; margin-bottom: 16px; }
/* The list of teams that drops from the card, as wide as it. */
.team-switch {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  display: grid; gap: 2px; padding: 6px;
  border: 1px solid var(--rule-soft); border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 40px -16px rgba(12, 30, 38, 0.35), 0 2px 6px rgba(12, 30, 38, 0.08);
  transform-origin: top center;
  animation: team-switch-in 160ms cubic-bezier(.2, .9, .3, 1.2);
}
.team-switch .menu-rule { margin: 4px 4px; }
@keyframes team-switch-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.rail-teamcard-tile {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-grad);
  color: #fff; font: 700 14px/1 var(--ui); letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -4px var(--brand-glow);
}
.rail-teamcard-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.25; }
.rail-teamcard-text b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-teamcard-text span { font-size: 12px; color: var(--ink-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-teamcard-switch { flex: none; width: 18px; height: 18px; color: var(--ink-quiet); transition: color 120ms ease; }
.rail-teamcard-switch svg { display: block; width: 100%; height: 100%; }
.rail-teamcard:hover .rail-teamcard-switch { color: var(--brand-ink); }

.rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  font: 500 14px/1.3 var(--ui);
  text-align: start;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.rail-link + .rail-link { margin-top: 2px; }
/* An alpha, not --rail-hover: that one is a near-white picked to show on a
   card, and on a rail that is already a tint it shows as nothing at all. */
.rail-link:hover { background: var(--ghost-hover); color: var(--ink); text-decoration: none; }
.rail-link[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 600;
}
.rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail-icon {
  flex: none;
  width: 18px; height: 18px;
  color: var(--ink-quiet);
  transition: color 120ms ease;
}
.rail-icon svg { display: block; width: 100%; height: 100%; }
.rail-link:hover .rail-icon { color: var(--ink-soft); }
.rail-link[aria-current="true"] .rail-icon { color: var(--brand); }

/* A count is a quantity, not a time, so it is set in the interface face and
   only borrows the fixed-width digits. Nothing in a collection is said
   quietly: a column of pills all reading 0 is a column of noise. */
.rail-link .count {
  flex: none;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 10px;
  background: var(--ghost-hover);
  color: var(--ink-soft);
  font: 600 11.5px/14px var(--ui);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rail-link .count[data-empty="true"] { background: none; color: var(--ink-quiet); font-weight: 500; }
.rail-link[aria-current="true"] .count { background: var(--brand-soft); color: var(--brand-ink); }
.rail-link[aria-current="true"] .count[data-empty="true"] { background: none; }

/* A team is a place rather than a filter, so it gets a tile of its own —
   and the one you are in wears the ground the mark is drawn on. */
.rail-team { padding: 7px 8px; }
.rail-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ghost-hover);
  color: var(--ink-soft);
  font: 650 12px/1 var(--ui);
  letter-spacing: 0.01em;
}
.rail-team[aria-current="true"] .rail-tile { background: var(--brand-ground); color: var(--brand-deep); }
.rail-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rail-text .rail-label { flex: none; }
.rail-role {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-quiet);
  text-transform: capitalize;
}
/* On the tinted row the quiet ink is too close to its ground to read. */
.rail-team[aria-current="true"] .rail-role { color: inherit; }

/* A collection that can be changed: the row, and over the end of it the two
   things that can be done to it. They take the count's place while the row
   is pointed at or tabbed into, and the name gives up the room they need. */
.rail-row { position: relative; }
.rail-row + .rail-row, .rail-row + .rail-link, .rail-link + .rail-row,
.rail-row + .rail-new, .rail-new + .rail-row, .rail-new + .rail-link { margin-top: 2px; }
.rail-acts {
  position: absolute; inset-inline-end: 4px; top: 50%;
  display: flex; gap: 1px;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease;
}
.rail-act {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 7px;
  background: none; color: var(--ink-quiet);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.rail-act svg { display: block; width: 15px; height: 15px; }
.rail-act:hover { background: var(--ghost-hover); color: var(--ink); }
.rail-act[data-tone="danger"]:hover { background: var(--coral-soft); color: var(--coral-ink); }
.rail-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.rail-row:hover .rail-acts, .rail-row:has(:focus-visible) .rail-acts { opacity: 1; pointer-events: auto; }
.rail-row:hover .rail-link, .rail-row:has(:focus-visible) .rail-link { padding-inline-end: 62px; background: var(--ghost-hover); color: var(--ink); }
.rail-row:hover .rail-link[aria-current="true"], .rail-row:has(:focus-visible) .rail-link[aria-current="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.rail-row:hover .count, .rail-row:has(:focus-visible) .count { display: none; }
/* Nothing hovers on a touch screen, so there the collection that is open
   carries them all the time. */
@media (hover: none) {
  .rail-row:has(.rail-link[aria-current="true"]) .rail-acts { opacity: 1; pointer-events: auto; }
  .rail-row:has(.rail-link[aria-current="true"]) .rail-link { padding-inline-end: 62px; }
  .rail-row:has(.rail-link[aria-current="true"]) .count { display: none; }
}

.rail-add { color: var(--ink-quiet); }
.rail-empty { margin: 0; padding: 2px 10px 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-quiet); }
.rail-new { display: flex; gap: 6px; margin-top: 2px; }
.rail-new input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; font-size: 14px; }
.rail-new input:focus { border-color: var(--brand); }
.rail-new .btn { height: 34px; }

/* --- the track: time with comments pinned to it ------------------------ */

.track {
  position: relative;
  height: var(--track-h);
  background: var(--track-bg);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.track-rail {
  position: absolute;
  left: 0; right: 0;
  top: 30px;
  height: 5px;
  background: var(--track-rail);
  border-radius: 3px;
}
.track-fill {
  position: absolute;
  left: 0;
  top: 30px;
  height: 5px;
  background: var(--cobalt);
  border-radius: 3px;
  width: 0;
}
.track-head {
  position: absolute;
  top: 26px;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--track-head);
  border: 3px solid var(--cobalt);
  pointer-events: none;
}
/* Holds the rail, the lit chapter and the fill in a box exactly the track's
   size, so the chapter gaps can be cut out of all three with one mask. */
.track-bar { position: absolute; inset: 0; pointer-events: none; }
/* The stretch of the chapter under the pointer, a shade brighter. */
.track-segment {
  position: absolute;
  top: 30px; height: 5px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}
.track-tip-title {
  display: block; margin-bottom: 2px;
  font: 600 12.5px/1.25 var(--ui); max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
/* A marker is a flag: a stem on the rail and a head above it. */
.marker {
  position: absolute;
  top: 6px;
  width: 18px; height: 30px;
  margin-left: -9px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.marker::before {
  content: "";
  position: absolute;
  left: 8px; top: 14px;
  width: 2px; height: 14px;
  background: currentColor;
  opacity: 0.55;
}
.marker::after {
  content: "";
  position: absolute;
  left: 3px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50% 50% 50% 2px;
  background: currentColor;
  transform: rotate(-45deg);
}
.marker { color: var(--coral); }
.marker[data-resolved="true"] { color: var(--moss); }
.marker[data-pinned="true"] { color: var(--amber); }
.marker:hover { transform: translateY(-2px); }
.marker.is-active::after { box-shadow: 0 0 0 3px var(--marker-halo); }

/* The single orchestrated motion in the product: a new marker drops onto
   the track, so you see where your comment landed. */
@keyframes marker-drop {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.marker.is-new { animation: marker-drop 260ms cubic-bezier(0.2, 0.9, 0.3, 1); }

.track-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  font: 500 12px/1.2 var(--mono);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.track:hover .track-tip,
.track.is-scrubbing .track-tip { opacity: 1; }

/* Miniature track on library cards: feedback density at a glance. */
.minitrack {
  position: relative;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 3px;
  margin-top: 10px;
}
.minitrack i {
  position: absolute;
  top: -1px;
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--coral);
  margin-left: -1.5px;
}
.minitrack i[data-resolved="true"] { background: var(--moss); }

/* --- video cards ------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 20px;
}
.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.vcard:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-raise);
  transform: translateY(-2px);
}

.vcard-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--poster-ground);
}
.vcard-poster img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.vcard:hover .vcard-poster img { transform: scale(1.03); }
/* In a grid, a band of the brand under the picture, so a white one still
   ends where the card's words begin. */
.vcard-poster:not(.is-blank)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--brand) 55%, transparent);
}
.grid.layout-list .vcard-poster::after { display: none; }
.vcard-poster .no-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

/* A recording on its way: a ring that fills with what has arrived, over a
   ground lit from one corner, breathing while it moves. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.vcard-poster.is-uploading {
  background:
    radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 62%),
    radial-gradient(70% 90% at 100% 100%, color-mix(in oklab, var(--brand-solid) 18%, transparent) 0%, transparent 60%),
    var(--poster-ground);
}
.up-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  transition: --p 450ms ease-out;
}
.up-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--brand) 70%, transparent);
  backdrop-filter: blur(6px);
}
.up-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--brand-solid) 0%, color-mix(in oklab, var(--brand-solid) 70%, white) calc(var(--p) * 1%),
    color-mix(in srgb, var(--brand) 16%, transparent) calc(var(--p) * 1%));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.up-num {
  position: relative;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
}
.up-num small { font-size: 11px; font-weight: 600; margin-left: 1px; opacity: 0.7; }
.up-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-ink);
}
.up-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: up-pulse 1.6s ease-out infinite;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent);
}
.up-line {
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.up-face[data-mode="live"] .up-ring { animation: up-breathe 2.4s ease-in-out infinite; }
.up-face[data-mode="stopped"] .up-arc {
  background: conic-gradient(var(--amber) calc(var(--p) * 1%),
    color-mix(in srgb, var(--amber) 16%, transparent) calc(var(--p) * 1%));
}
.up-face[data-mode="stopped"] .up-num,
.up-face[data-mode="stopped"] .up-label { color: var(--amber); }
.up-face[data-mode="stopped"] .up-label::before { animation: none; background: var(--amber); }
@keyframes up-breathe {
  50% { box-shadow: 0 10px 34px -6px var(--brand-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .up-face[data-mode="live"] .up-ring, .up-label::before { animation: none; }
}

/* Over a captured frame the button waits for the pointer, and is white
   whatever the theme, because the frame could be any colour at all. On the
   blank ground it is the picture, so it is there from the start and takes
   the theme's teal. */
.vcard-play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-deep);
  box-shadow: 0 6px 18px -6px rgba(8, 36, 46, 0.5);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 160ms ease, transform 160ms ease;
}
.vcard-play svg { display: block; width: 22px; height: 22px; }
.vcard:hover .vcard-play,
.vcard-poster:focus-visible .vcard-play { opacity: 1; transform: scale(1); }
.vcard-poster.is-blank .vcard-play {
  background: var(--poster-glyph);
  color: var(--brand-ink);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.vcard:hover .vcard-poster.is-blank .vcard-play { transform: scale(1.06); }

.vcard-dur {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(8, 21, 24, 0.8);
  color: #fff;
  font: 500 12px/1.3 var(--mono);
}

.vcard-body { flex: 1; display: flex; flex-direction: column; padding: 13px 14px 13px; }
.vcard-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}
.vcard-title:hover { color: var(--brand-ink); text-decoration: none; }
.vcard :focus-visible { outline-color: var(--brand); }

.vcard-by { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.vcard-by .avatar { width: 22px; height: 22px; font-size: 10px; }
.vcard-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.vcard-when { flex: none; color: var(--ink-quiet); }
.vcard-when::before { content: "·"; margin-right: 7px; }

.vcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.vcard-tag {
  height: 22px;
  padding: 0 9px;
  border: none;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font: 500 12px/22px var(--ui);
  cursor: pointer;
  transition: background 120ms ease;
}
.vcard-tag:hover { background: color-mix(in srgb, var(--brand) 26%, transparent); }

/* The last line of every card in a row sits on the same level, however many
   lines the title above it ran to. */
/* Where a search found the recording: what was said, or a comment, with
   the words searched for marked, opening the recording at that moment. */
.vcard-match {
  display: flex; align-items: baseline; gap: 6px; margin-top: 10px;
  padding: 7px 9px; border-radius: 9px; background: var(--brand-soft);
  color: var(--ink); font-size: 12.5px; line-height: 1.4; text-decoration: none;
}
.vcard-match:hover { text-decoration: none; filter: brightness(0.97); }
.vcard-match-kind { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-quiet); }
.vcard-match-tc { flex: none; font: 600 11.5px/1 var(--mono); color: var(--brand-ink); }
.vcard-match-text {
  min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vcard-match mark { background: color-mix(in srgb, var(--brand) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.vcard-stats {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink-quiet);
  font-size: 13px;
}
.vcard-stat { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.vcard-stat .icon { flex: none; width: 15px; height: 15px; }
.vcard-stat .icon svg { display: block; width: 100%; height: 100%; }
.vcard-stats .tc { margin-left: auto; font-size: 12px; }

/* --- collections as folders, above All recordings ------------------------- */

.folders:empty { display: none; }
.folders { margin-bottom: 30px; }
.folders-head {
  margin: 0 0 12px; color: var(--ink-soft);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
html[lang="ar"] .folders-head { letter-spacing: 0; text-transform: none; font-size: 14px; }
.fcard-cover { width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; }
/* No picture yet: the brand's teal running into the mark's coral, a folder
   in the middle. */
.fcard-cover.is-blank {
  display: grid; place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 30%, var(--card)) 0%,
    color-mix(in srgb, var(--brand) 12%, var(--card)) 55%,
    color-mix(in srgb, var(--coral) 26%, var(--card)) 100%);
}
.fcard-mark { display: block; width: 30%; max-width: 92px; color: var(--brand-ink); opacity: 0.75; }
.fcard-mark svg { display: block; width: 100%; height: auto; }
.fcard-badge {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 7px;
  background: rgba(8, 21, 24, 0.78); color: #fff;
  font: 600 12px/1.3 var(--mono);
}
html[dir="rtl"] .fcard-badge { left: auto; right: 8px; }
.fcard-badge .icon { display: block; width: 14px; height: 14px; }
.fcard-badge svg { display: block; width: 100%; height: 100%; }
.fcard-name {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: start;
  font-family: inherit;
}
/* Owners change the picture from a round button on it, shown on hover. */
.fcard-edit {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--brand-ink);
  box-shadow: 0 4px 12px -4px rgba(8, 21, 24, 0.45);
  opacity: 0; transition: opacity 140ms ease, transform 140ms ease;
}
html[dir="rtl"] .fcard-edit { right: auto; left: 8px; }
.fcard-edit .icon, .fcard-edit svg { display: block; width: 18px; height: 18px; }
.fcard:hover .fcard-edit, .fcard-edit:focus-visible { opacity: 1; }
.fcard-edit:hover { transform: scale(1.06); }
@media (hover: none) { .fcard-edit { opacity: 1; } }
.grid.layout-list .fcard-edit { top: 16px; right: auto; left: 16px; }
html[dir="rtl"] .grid.layout-list .fcard-edit { left: auto; right: 16px; }
.fcard.is-drop { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- layout switch: large cards, a grid, a list --------------------------- */

/* Three round buttons in one glass pill, as in the Android app; the one in
   use filled with the brand's teal. */
.view-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--rule)); border-radius: 999px;
  background: color-mix(in srgb, var(--card) 62%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 20px -16px color-mix(in srgb, var(--brand) 60%, #000);
}
.view-switch button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.view-switch button svg { width: 18px; height: 18px; }
.view-switch button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.view-switch button[aria-checked="true"] {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #0b2730)); color: #ffffff;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 80%, #000);
}
.view-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The sort, as a pill of the same glass beside the layout switch. */
.sort-pick .choice-trigger {
  height: 42px; padding: 0 14px 0 12px; width: auto; border-radius: 999px;
  border-color: color-mix(in srgb, var(--brand) 20%, var(--rule));
  background: color-mix(in srgb, var(--card) 62%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 20px -16px color-mix(in srgb, var(--brand) 60%, #000);
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
.sort-pick .choice-trigger:hover { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 40%, var(--rule)); }
.sort-pick .choice-icon { color: var(--brand); }
.sort-pick .choice-list { left: auto; right: 0; min-width: 200px; }
html[dir="rtl"] .sort-pick .choice-list { right: auto; left: 0; }
/* On a phone the words go, the arrows stay. */
@media (max-width: 560px) {
  .sort-pick .choice-value, .sort-pick .choice-mark { display: none; }
  .sort-pick .choice-trigger { padding: 0 12px; }
  .sort-pick .choice-list { right: auto; left: 0; }
  html[dir="rtl"] .sort-pick .choice-list { left: auto; right: 0; }
}

/* Large cards: fewer, wider, a bigger title. */
.grid.layout-large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.grid.layout-large .vcard-body { padding: 16px 18px; }
.grid.layout-large .vcard-title { font-size: 17px; }

/* A list: one recording to a row, the picture on the start side, its words
   beside it, the counts and size at the foot of the words. */
.grid.layout-list { grid-template-columns: 1fr; gap: 12px; }
.grid.layout-list .vcard { flex-direction: row; align-items: stretch; border-radius: 18px; }
.grid.layout-list .vcard:hover { transform: translateY(-1px); }
.grid.layout-list .vcard-poster { flex: none; width: 236px; aspect-ratio: 16 / 9; align-self: center; margin: 10px; border-radius: 12px; }
.grid.layout-list .vcard-body { min-width: 0; padding: 14px 18px 12px 6px; }
html[dir="rtl"] .grid.layout-list .vcard-body { padding: 14px 6px 12px 18px; }
.grid.layout-list .vcard-title { font-size: 16px; -webkit-line-clamp: 1; }
/* A picture as pale as the card would melt into it, so it sits in a frame:
   a thin band of the brand's teal running into the mark's coral, the
   picture rounded inside it. */
.grid.layout-list .vcard-poster:not(.is-blank) {
  padding: 3px;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, #8fd3e4) 55%, var(--coral) 100%);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 70%, #000);
}
.grid.layout-list .vcard-poster:not(.is-blank) img { border-radius: 9px; }
.grid.layout-list .vcard-stats { padding-top: 8px; }
.grid.layout-list .pick { top: 18px; left: 18px; }
@media (max-width: 640px) {
  .grid.layout-list .vcard-poster { width: 132px; margin: 8px; border-radius: 10px; }
  .grid.layout-list .vcard-body { padding: 10px 12px 10px 4px; }
  .grid.layout-list .vcard-title { -webkit-line-clamp: 2; font-size: 14.5px; }
  .grid.layout-list .vcard-dur { font-size: 11px; }
}

.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-faint);
}
/* Hairline separators instead of punctuation between meta items. */
.meta > * + * { padding-inline-start: 10px; border-inline-start: 1px solid var(--rule); }

.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font: 600 11px/1 var(--ui);
  color: #fff;
  flex: none;
}
.avatar.lg { width: 32px; height: 32px; font-size: 13px; }
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--rule-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}
.badge.cobalt { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.badge.coral { background: var(--coral-soft); color: var(--coral-ink); }
.badge.moss { background: var(--moss-soft); color: var(--moss); }

/* --- selecting several recordings -------------------------------------- */

/* A ring in the mark's teal, and a second, softer one outside it, so a
   picked card is told apart by more than the colour of a hairline. */
.vcard.is-picked,
.vcard.is-picked:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px var(--brand-soft);
}

/* The checkbox stays out of the way until you hover, or until a selection is
   under way and showing every box makes the set obvious. */
.pick {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: grid;
  opacity: 0;
  transition: opacity 110ms ease;
}
/* Drawn rather than left to the browser: the native box cannot be rounded,
   and its tick comes in whatever colour the platform likes. It is white
   under both themes for the same reason the play button is — it sits on a
   picture. */
.pick input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 1.5px solid rgba(12, 40, 50, 0.34);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94) center / 14px 14px no-repeat;
  box-shadow: 0 1px 4px rgba(8, 36, 46, 0.28);
  cursor: pointer;
  transition: background-color 110ms ease, border-color 110ms ease;
}
.pick input:hover { border-color: var(--brand-solid); }
.pick input:checked {
  border-color: var(--brand-solid);
  background-color: var(--brand-solid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.7 2.7L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pick input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vcard:hover .pick,
.vcard:focus-within .pick,
.vcard.is-picked .pick,
.grid.is-picking .pick { opacity: 1; }

/* Move to: a list of collections. */
@keyframes menu-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.move-menu {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 230px; max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow-raise); z-index: 40;
  animation: menu-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.move-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; border-radius: 9px; background: none; cursor: pointer;
  color: var(--ink); font: 500 14px/1.2 var(--ui); text-align: left;
}
.move-item .icon { width: 17px; height: 17px; color: var(--brand-ink); flex: none; }
.move-item:hover, .move-item:focus-visible { background: var(--brand-soft); outline: none; }
.move-item.is-out { color: var(--ink-soft); border-top: 1px solid var(--rule-soft); border-radius: 0 0 9px 9px; margin-top: 4px; }
.move-item.is-out .icon { color: var(--ink-quiet); }
.move-empty { margin: 0; padding: 10px; font-size: 13px; color: var(--ink-quiet); }

/* While a recording is dragged, the collections it can go into say so, and
   the one under it lights up. */
body.is-dragging-video #collectionsGroup .rail-link, body.is-dragging-video #channelsGroup .rail-link[aria-current="false"] { outline: 1.5px dashed var(--rule); outline-offset: -2px; }
#collectionsGroup .rail-link.is-drop, #channelsGroup .rail-link.is-drop { background: var(--brand-soft); outline: 2px solid var(--brand); outline-offset: -2px; }
.vcard[draggable="true"] { cursor: grab; }
.vcard[draggable="true"]:active { cursor: grabbing; }

/* The right-click menu on a recording: the same list, opened where the
   pointer is. */
.ctx-menu { position: fixed; bottom: auto; transform: none; max-height: calc(100vh - 16px); min-width: 220px; }
.ctx-head { margin: 0; padding: 8px 10px 4px; font: 600 12px/1.2 var(--ui); color: var(--ink-quiet); }
.ctx-rule { margin: 5px 4px; border: none; border-top: 1px solid var(--rule-soft); }
.move-item.is-danger { color: var(--coral-ink); }
.move-item.is-danger .icon { color: var(--coral-ink); }
.move-item.is-danger:hover, .move-item.is-danger:focus-visible { background: var(--coral-soft); }

/* --- panels, empty states, toasts ------------------------------------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px;
}
body.on-monitor .panel { background: var(--monitor-2); border-color: var(--monitor-3); }

.empty {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 52px 24px 48px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--empty-bg);
}
.empty h3 { margin-bottom: 6px; color: var(--ink); }
/* The same tile the current team wears in the rail, a size up. */
.empty-mark {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--brand-ground);
  color: var(--brand-deep);
}
.empty-mark svg { display: block; width: 26px; height: 26px; }

.toast-stack {
  position: fixed;
  inset: auto auto 20px 50%;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  box-shadow: var(--shadow-raise);
  max-width: 90vw;
}
.toast[data-kind="error"] { background: var(--danger-solid); color: #fff; }

/* --- asking first ------------------------------------------------------ */

/* The question put before something is destroyed. A card over a dimmed
   page, with the two answers at its foot and the one that destroys in the
   colour the mark keeps for stopping. */
.ask {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 32, 36, 0.08), 0 32px 64px -24px rgba(8, 36, 46, 0.55);
  /* Not clipped, so a list opened from a field can reach past the card; the
     tinted foot rounds its own corners instead. */
  overflow: visible;
}
/* Written out, not taken from the tokens: a backdrop does not everywhere
   inherit from the page it lies over. */
.ask::backdrop {
  background: rgba(8, 30, 38, 0.46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .ask { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 32px 70px -22px rgba(0, 0, 0, 0.9); }
:root[data-theme="dark"] .ask::backdrop { background: rgba(2, 10, 13, 0.62); }
.ask[open] { animation: ask-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.ask[open]::backdrop { animation: ask-dim 180ms ease; }
@keyframes ask-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ask-dim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ask[open], .ask[open]::backdrop { animation: none; }
}
.ask-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 20px; }
.ask-mark {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.ask[data-tone="danger"] .ask-mark { background: var(--coral-soft); color: var(--coral-ink); }
.ask-mark svg { display: block; width: 21px; height: 21px; }
.ask-text { min-width: 0; padding-top: 1px; }
.ask-text h3 { margin: 0; font-size: 16.5px; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ask-text p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.ask-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0 0 17px 17px;
  background: var(--brand-soft);
}
.ask-foot .btn { height: 36px; min-width: 84px; padding: 0 16px; border-radius: 10px; font-weight: 600; }
.ask-foot .btn-danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #ffffff; }
.ask-foot .btn-danger:hover { background: var(--danger-solid); filter: brightness(0.9); }
.ask-foot .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ask-foot .btn-danger:focus-visible { outline-color: var(--danger-solid); }
.ask-foot .btn-primary:disabled { opacity: 0.45; }

/* The same card, asking for words rather than a yes. The fields sit between
   the question and its answers, on the card itself, each with its label
   above it and any hint below. */
.ask-fields { display: grid; gap: 14px; padding: 0 22px 22px 76px; }
.ask .ask-field { display: grid; gap: 6px; min-width: 0; }
/* Link buttons in a dialog: a row per button, its site's logo, the text
   over the address, and a way to take it out; more can be added below. */
.ask-links { display: grid; gap: 10px; }
.ask-link-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.ask-link-pick { position: relative; }
.ask-link-mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; padding: 0; cursor: pointer;
  background: var(--brand-soft); border: 1px dashed var(--rule-strong);
}
.ask-link-mark:hover { border-color: var(--brand); }
.ask-link-clear {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink-soft); color: #fff; font-size: 13px; line-height: 18px; cursor: pointer;
}
.ask-link-clear[hidden] { display: none; }
.ask-link-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.ask-link-inputs { display: grid; gap: 6px; min-width: 0; }
.ask-link-remove {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: 20px; line-height: 1;
}
.ask-link-remove:hover { background: var(--ghost-hover); color: var(--ink); }
.ask-links-add {
  justify-self: start; margin-top: 2px; padding: 6px 10px; border: 1px dashed var(--rule-strong); border-radius: 9px;
  background: none; color: var(--brand-ink); font: 600 13px/1.2 var(--ui); cursor: pointer;
}
.ask-links-add:hover { background: var(--brand-soft); }
.ask-links-add[hidden], .ask-link-remove[hidden] { display: none; }
.ask-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ask-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.4; }
.ask-hint[data-state="bad"] { color: var(--coral-ink); }
.ask-hint[data-state="good"] { color: var(--brand-ink, var(--cobalt-ink)); }
.ask .ask-field input:not([type="checkbox"]),
.ask .ask-field textarea,
.ask .ask-field .choice-trigger {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 400 14.5px/1.45 var(--ui);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.ask .ask-field textarea { min-height: 96px; resize: vertical; }
.ask .ask-field input:not([type="checkbox"]):hover,
.ask .ask-field textarea:hover,
.ask .ask-field .choice-trigger:hover { border-color: var(--rule-strong); }
.ask .ask-field input:not([type="checkbox"]):focus,
.ask .ask-field textarea:focus {
  outline: none;
  border-color: var(--brand-solid);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.ask .ask-field input[readonly] { color: var(--ink-soft); font-family: var(--mono); font-size: 13px; }
.ask .ask-field .choice-list { z-index: 30; }

/* A yes-or-no answer is a switch, with what it means beside it. */
.ask .ask-toggle {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}
.ask-toggle-text { display: grid; gap: 2px; }
.ask-toggle .ask-label { color: var(--ink); font-weight: 550; }
.ask-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 38px; height: 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--switch-off, #9fbfc4);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.ask-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ask-switch:checked { background: var(--brand-solid); }
.ask-switch:checked::after { transform: translateX(16px); }
.ask-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* A few fixed answers side by side, one of them chosen: a segmented control,
   so every choice is in view without opening anything. */
.ask-segments {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--paper);
}
.ask-segments label { flex: 1; position: relative; }
.ask-segments input { position: absolute; opacity: 0; pointer-events: none; }
.ask-segments span {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 550;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.ask-segments span:hover { color: var(--ink); }
.ask-segments input:checked + span {
  background: var(--card);
  color: var(--brand-ink);
  box-shadow: 0 1px 2px rgba(16, 32, 36, 0.12), 0 0 0 1px var(--rule);
}
.ask-segments input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

@media (max-width: 420px) {
  .ask-fields { padding-left: 22px; }
  .ask-foot { flex-direction: column-reverse; }
  .ask-foot .btn { width: 100%; height: 40px; }
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--rule);
}
.table td { padding: 11px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }

.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stack-lg > * + * { margin-top: 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .main { padding: 18px 16px 48px; }
}

/* --- provider setup ---------------------------------------------------------- */

.provider { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; }
.provider + .provider { margin-top: 16px; }
.provider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.provider-head h3 { font-size: 16px; }
.provider-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.provider-grid .field { margin-bottom: 0; }
.provider-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.provider-state { font-size: 13px; }
.provider-state[data-tone="ok"] { color: var(--moss); }
.provider-state[data-tone="bad"] { color: var(--coral); }

.model-field { display: block; }
.model-field select { width: 100%; height: 38px; }

/* The key's label carries the link to get one, on the same line. */
.field > .key-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* Which model the provider will use, chosen for the workspace, said plainly. */
.ai-model {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 11px 14px;
  border-radius: var(--radius); background: var(--cobalt-soft);
  font-size: 14px; color: var(--ink-soft);
}
.ai-model b { color: var(--ink); font-weight: 600; }
.ai-model-mark {
  width: 18px; height: 18px; flex: none; background: var(--cobalt-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.2 6.1a2 2 0 0 0 1.2 1.2l6.1 2.2-6.1 2.2a2 2 0 0 0-1.2 1.2L12 21.5l-2.2-6.1a2 2 0 0 0-1.2-1.2L2.5 12l6.1-2.2a2 2 0 0 0 1.2-1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.2 6.1a2 2 0 0 0 1.2 1.2l6.1 2.2-6.1 2.2a2 2 0 0 0-1.2 1.2L12 21.5l-2.2-6.1a2 2 0 0 0-1.2-1.2L2.5 12l6.1-2.2a2 2 0 0 0 1.2-1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ai-model-does { margin-left: auto; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 560px) {
  .ai-model-does { margin-left: 28px; flex-basis: 100%; margin-top: -6px; }
}
.key-saved {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 6px 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); font-size: 14px; color: var(--ink-soft);
}
.key-saved > span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-saved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); flex: none; }
.key-change {
  border: 0; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font: 500 13px var(--ui); color: var(--cobalt-ink);
}
.key-change:hover { background: var(--ghost-hover); }
.key-actions { display: flex; align-items: baseline; gap: 6px; }
.key-label .key-change { padding: 0 4px; font-size: 13px; }
.key-link { font-weight: 500; color: var(--cobalt-ink); text-decoration: none; }
.key-link:hover { text-decoration: underline; }

/* --- theme switch ------------------------------------------------------ */

/* Light, dark or follow the system, cycled by one button in the top bar. */
.theme-toggle, .btn-square { width: 34px; padding: 0; }
/* A square button is a drawing with no label, and may carry a badge. */
.btn-square { position: relative; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* --- quick search (Ctrl+K) ------------------------------------------------ */

.palette {
  width: min(600px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 32, 36, 0.08), 0 32px 64px -24px rgba(8, 36, 46, 0.55);
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop {
  background: rgba(8, 30, 38, 0.46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .palette::backdrop { background: rgba(2, 10, 13, 0.62); }
.palette-field { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.palette .palette-input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 6px 0; background: none; border-radius: 0;
  color: var(--ink); font: inherit; font-size: 16px;
}
.palette .palette-input:focus { box-shadow: none; }
.palette-esc, .palette-open kbd {
  padding: 2px 6px; border: 1px solid var(--rule); border-radius: 5px;
  font: 500 11px/1.4 var(--mono); color: var(--ink-quiet); background: none;
}
.palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
/* Its scroll bar, as the mention list's: a slim rounded thumb in the brand's
   teal on no track, with no arrow buttons, in place of the system's grey
   one. Chrome and Safari draw it from the ::-webkit-scrollbar rules; the
   standard properties, which would bring the arrows back there, are for
   Firefox. */
.palette-list { scroll-padding-block: 6px; }
.palette-list::-webkit-scrollbar { width: 12px; }
.palette-list::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.palette-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 50%, transparent); background-clip: padding-box;
  border: 4px solid transparent; border-radius: 12px;
}
.palette-list::-webkit-scrollbar-thumb:hover { background-color: var(--brand); }
.palette-list::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  .palette-list { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 50%, transparent) transparent; }
}
.palette-head {
  padding: 10px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.palette-item { display: grid; gap: 2px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--brand-soft); }
.palette-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub b { font-weight: 600; color: var(--brand-ink); }
.palette mark { background: none; color: var(--brand-ink); font-weight: 650; }
.palette-status { margin: 0; padding: 0 16px; color: var(--ink-soft); font-size: 14px; }
.palette-status:not(:empty) { padding: 4px 16px 14px; }
.palette-open { gap: 8px; }
@media (max-width: 680px) { .palette-open kbd { display: none; } }

.empty-tour { display: block; margin-top: 14px; font-size: 14px; font-weight: 550; color: var(--brand-ink); }

/* --- guided tour --------------------------------------------------------- */

/* The page goes dark but for one lit control. Four dark panels frame it and
   take every click off the rest of the page; the control itself is left
   uncovered, so the real thing can be clicked. */
.guide { position: fixed; inset: 0; z-index: 1000; pointer-events: none; animation: guide-in 220ms ease; }
.guide.is-leaving { opacity: 0; transition: opacity 180ms ease; }
@keyframes guide-in { from { opacity: 0; } to { opacity: 1; } }
.guide-shield {
  position: fixed; pointer-events: auto; background: rgba(3, 10, 13, 0.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: left 320ms cubic-bezier(.3,.7,.2,1), top 320ms cubic-bezier(.3,.7,.2,1),
              width 320ms cubic-bezier(.3,.7,.2,1), height 320ms cubic-bezier(.3,.7,.2,1);
}
.guide-hole {
  position: fixed; pointer-events: none; border-radius: 12px;
  transition: left 320ms cubic-bezier(.3,.7,.2,1), top 320ms cubic-bezier(.3,.7,.2,1),
              width 320ms cubic-bezier(.3,.7,.2,1), height 320ms cubic-bezier(.3,.7,.2,1);
}
.guide.is-centred .guide-hole { display: none; }
/* The lit control: a bright white ring with a teal glow right round it,
   and a halo that breathes outward, so even a small dark button in the
   player's bar stands out at once. */
.guide-hole { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(58, 166, 191, 0.85), 0 0 28px 8px rgba(127, 211, 230, 0.6); }
.guide-hole::after {
  content: ""; position: absolute; inset: -8px; border-radius: 18px;
  border: 2px solid rgba(127, 211, 230, 0.9);
  animation: guide-pulse 1.6s ease-out infinite;
}
@keyframes guide-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* The card: a frosted panel with a sparkle mark and the step count, a
   progress line, the words, and Back and Next at its foot. Each step's
   words slide in fresh. */
.guide-card {
  position: fixed; pointer-events: auto; padding: 16px 18px 16px;
  background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--rule)); border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 70px -20px rgba(0, 0, 0, .55);
  transition: left 320ms cubic-bezier(.3,.7,.2,1), top 320ms cubic-bezier(.3,.7,.2,1);
}
/* While a tour runs, the player's bar stays up rather than fading away under
   a still pointer, and a small lit control is drawn solid white with a teal
   mark so it stands out from whatever it sits on. */
body.guide-on .player-bar { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.guide-lit {
  background: #ffffff !important; color: var(--brand-solid, #2a7d94) !important;
  box-shadow: 0 0 0 1px rgba(16, 32, 36, .12) !important; opacity: 1 !important;
}
.guide-lit svg { color: var(--brand-solid, #2a7d94) !important; opacity: 1 !important; }
/* The arrow on the card's edge, pointing at the lit control. */
.guide-card[data-side]::before {
  content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg);
  background: inherit; border: inherit; border-radius: 3px;
}
.guide-card[data-side="below"]::before { top: -8px; left: calc(var(--arrow-x) - 7px); border-right: 0; border-bottom: 0; }
.guide-card[data-side="above"]::before { bottom: -8px; left: calc(var(--arrow-x) - 7px); border-left: 0; border-top: 0; }
.guide-card[data-side="right"]::before { left: -8px; top: calc(var(--arrow-y) - 7px); border-right: 0; border-top: 0; }
.guide-card[data-side="left"]::before { right: -8px; top: calc(var(--arrow-y) - 7px); border-left: 0; border-bottom: 0; }
.guide.is-centred .guide-card {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)) !important; padding: 22px 24px 20px;
}
.guide-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.guide-mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 6px 14px -8px var(--brand-glow);
}
.guide-mark svg { width: 17px; height: 17px; }
.guide-count { font: 650 12.5px/1 var(--ui); color: var(--brand-ink); letter-spacing: .01em; }
.guide-skip {
  border: 0; background: none; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font: 600 12.5px var(--ui); color: var(--ink-faint);
}
.guide-skip:hover { color: var(--ink); background: var(--ghost-hover); }
.guide-progress { height: 4px; border-radius: 4px; background: var(--rule-soft); overflow: hidden; margin-bottom: 14px; }
.guide-progress i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-solid), color-mix(in oklab, var(--brand-solid) 70%, white));
  transition: width 320ms cubic-bezier(.3,.7,.2,1);
}
.guide-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.guide.is-centred .guide-card h3 { font-size: 22px; }
.guide-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.guide-card .guide-tip {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 4px;
}
.guide-card .guide-tip::before { content: "👆"; font-size: 12px; }
.guide-card.is-new .guide-body { animation: guide-words 260ms cubic-bezier(.3,.7,.2,1); }
@keyframes guide-words { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.guide-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.guide-gap { flex: 1; }
.guide-back {
  height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: 600 13.5px/1 var(--ui);
}
.guide-back:hover { border-color: var(--brand); color: var(--brand-ink); }
.guide-next {
  height: 36px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  font: 700 13.5px/1 var(--ui);
  background: var(--brand-grad);
  box-shadow: 0 8px 18px -10px var(--brand-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.guide-next:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px var(--brand-glow); }
.guide-next:focus-visible, .guide-back:focus-visible, .guide-skip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .guide, .guide-hole, .guide-shield, .guide-card, .guide-hole::after, .guide-progress i, .guide-card.is-new .guide-body { animation: none; transition: none; }
}

/* --- storage meter ---------------------------------------------------------- */

/* A card at the foot of the library's rail: a ring of the store's size with
   the used part drawn round it, this workspace in solid teal and others in a
   paler one, and the free part left as the open track; then used and free in
   words. It sweeps in, and warms to amber and then coral as it fills. */
@property --mine { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --all { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.storage-group { margin-top: 6px; }
.storage-card {
  --fill-a: var(--brand-solid);
  --fill-b: color-mix(in oklab, var(--brand-solid) 62%, white);
  --free: color-mix(in srgb, var(--rule) 75%, transparent);
  position: relative; overflow: hidden;
  padding: 14px 14px 12px;
  border: 1px solid var(--rule); border-radius: 16px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--brand-soft) 0%, transparent 60%),
    var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px -12px rgba(18, 58, 74, 0.35);
}
.storage-card[data-tone="high"] { --fill-a: #c8841a; --fill-b: #f0b54a; }
.storage-card[data-tone="full"] { --fill-a: #d6402f; --fill-b: #f37a5f; }
.storage-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.storage-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: #fff;
  box-shadow: 0 4px 10px -4px var(--fill-a);
}
.storage-mark svg { width: 15px; height: 15px; }
.storage-title { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.storage-plan {
  margin-inline-start: auto; font: 600 11.5px/1 var(--mono); color: var(--ink-soft);
  padding: 4px 8px; border-radius: 99px; background: var(--free);
}
.storage-body { display: flex; align-items: center; gap: 10px; }
.storage-ring {
  --mine: 0%; --all: 0%;
  position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(
    var(--fill-a) 0%, var(--fill-b) var(--mine),
    color-mix(in srgb, var(--fill-b) 40%, transparent) var(--mine) var(--all),
    var(--free) var(--all) 100%);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--fill-a) 25%, transparent));
  transition: --mine 1s cubic-bezier(.2, .8, .2, 1), --all 1s cubic-bezier(.2, .8, .2, 1);
}
.storage-ring-hole {
  position: absolute; inset: 8px; border-radius: 50%; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}
.storage-ring-hole b { font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.storage-ring-hole span { font-size: 10.5px; color: var(--ink-faint); }
.storage-rows { flex: 1; min-width: 0; display: grid; gap: 9px; }
.storage-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.storage-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.storage-row.is-used .dot { background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fill-b) 18%, transparent); }
.storage-row.is-free .dot { background: var(--card); border: 2.5px solid var(--free); }
.storage-row-label { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-row b { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.storage-row.is-free b { color: var(--fill-a); }
:root[data-theme="dark"] .storage-row.is-free b { color: var(--fill-b); }
.storage-note {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-size: 12.5px; color: var(--ink-soft);
}
.storage-rows .storage-note { margin: 0; padding: 0; border: 0; }
.storage-card[data-tone="full"] .storage-note { color: var(--coral); font-weight: 600; }
.storage-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.storage-legend span { display: inline-flex; align-items: center; gap: 5px; }
.storage-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); }
.storage-legend .dot.is-others { background: color-mix(in srgb, var(--fill-b) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .storage-ring { transition: none; } }

/* --- documentation button --------------------------------------------------- */

/* A pill with a gradient edge: the brand's teal running into a light cyan,
   drawn as a second background clipped to the border so the inside stays
   the card's colour in either theme. A light sweeps across it on hover, and
   the arrow says it opens somewhere else. */
.docs-btn {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 5px; border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, color-mix(in oklab, var(--brand-solid) 84%, black), var(--brand-solid) 35%, color-mix(in oklab, var(--brand-solid) 62%, white) 70%, color-mix(in oklab, var(--brand-solid) 30%, white)) border-box;
  color: var(--brand-ink); text-decoration: none;
  font: 650 13.5px/1 var(--ui); letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--brand-solid) 70%, transparent);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.docs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand-solid) 85%, transparent);
}
.docs-btn:active { transform: translateY(0); }
.docs-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.docs-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
}
.docs-btn:hover::after { transform: translateX(120%); transition: transform 700ms ease; }
.docs-btn-mark {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 2px 6px -2px var(--brand-glow);
}
.docs-btn-mark svg { width: 14px; height: 14px; }
.docs-btn-arrow { width: 13px; height: 13px; opacity: 0.7; transition: transform 200ms ease, opacity 200ms ease; }
.docs-btn:hover .docs-btn-arrow { transform: translate(2px, -2px); opacity: 1; }
:root[data-theme="dark"] .docs-btn { color: var(--brand-ink); }
:root[data-theme="dark"] .docs-btn::after {
  background: linear-gradient(105deg, transparent 35%, rgba(143, 211, 228, 0.25) 50%, transparent 65%);
}
@media (max-width: 720px) {
  .docs-btn { padding-right: 5px; }
  .docs-btn-label, .docs-btn-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-btn, .docs-btn-arrow { transition: none; }
  .docs-btn:hover::after { transition: none; }
}


/* Upload meter: a big live percentage over a glowing bar. */
.uploader {
  margin-top: 18px; padding: 16px 18px 14px;
  border: 1px solid var(--monitor-3); border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--cobalt-wash) 0%, transparent 60%),
    var(--card);
}
.up-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.up-step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--cobalt-ink); }
.up-step::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt);
  box-shadow: 0 0 0 0 var(--cobalt-wash-strong); animation: up-pulse 1.6s ease-out infinite; }
.up-pct { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--cobalt-ink); }
.up-pct small { font-size: 16px; font-weight: 600; margin-left: 2px; opacity: 0.7; }
.up-track { position: relative; height: 10px; margin-top: 12px; border-radius: 999px;
  background: var(--monitor-3); overflow: hidden; }
.up-track i { position: relative; display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--cobalt) 0%, color-mix(in oklab, var(--cobalt) 70%, white) 100%);
  box-shadow: 0 0 12px var(--cobalt-wash-strong); transition: width 300ms ease-out; overflow: hidden; }
.up-track i::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  transform: translateX(-100%); animation: up-sweep 1.8s ease-in-out infinite; }
.up-meta { margin-top: 9px; font-size: 13px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; min-height: 1.3em; }
.uploader[data-step="save"] .up-track i,
.uploader[data-step="done"] .up-track i { width: 100% !important; }
.uploader[data-step="done"] .up-step::before { animation: none; background: var(--moss); }
.uploader[data-step="failed"] .up-step { color: var(--danger-solid); }
.uploader[data-step="failed"] .up-step::before { animation: none; background: var(--danger-solid); }
.uploader[data-step="failed"] .up-track i::after { animation: none; opacity: 0; }
@keyframes up-sweep { to { transform: translateX(100%); } }
@keyframes up-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .up-track i::after, .up-step::before { animation: none; }
}

/* A link button's logo when the site gives none: its first letter on a
   colour worked out from its name, so each site keeps its own. */
.cta-letter {
  display: inline-grid; place-items: center; flex: none;
  background: hsl(var(--hue, 190) 52% 40%) !important; color: #fff;
  font: 700 12px/1 var(--ui); padding: 0 !important; box-shadow: none;
}
.ask-link-holder { display: grid; place-items: center; }
.ask-link-logo.cta-letter { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; }
.cta-go .cta-letter { font-size: 14px; }

/* A list to take things out of: chapters, say. A struck row stays, faded
   and crossed through, until Save, so a slip can be taken back. */
.ask-remove { display: grid; gap: 6px; }
.ask-remove-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 30px; gap: 10px; align-items: center;
  padding: 6px 6px 6px 10px; border: 1px solid var(--rule); border-radius: 10px;
}
.ask-remove-meta { font: 600 12.5px/1 var(--mono); color: var(--brand-ink); }
.ask-remove-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-remove-x {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: 18px; line-height: 1;
}
.ask-remove-x:hover { background: var(--ghost-hover); color: var(--ink); }
.ask-remove-row.is-removed { opacity: .55; }
.ask-remove-row.is-removed .ask-remove-label { text-decoration: line-through; }

/* Upload a file, in the library: a round button on the page with the arrow
   in a gradient circle of the team's colour; its name is its tooltip.
   Pointed at, it lifts, its edge takes the colour and the arrow rises out
   of its tray. */
.upload-cta {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; cursor: pointer; user-select: none;
  background: var(--card); color: var(--ink); font: 650 14px/1 var(--ui); letter-spacing: -0.005em;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(16, 32, 36, .06), 0 10px 24px -16px rgba(16, 32, 36, .45);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.upload-cta-mark {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: var(--brand-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -4px var(--brand-glow);
}
.upload-cta-mark svg { width: 18px; height: 18px; display: block; overflow: visible; }
.upload-cta-arrow { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.upload-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 55%, var(--rule));
  box-shadow: 0 1px 2px rgba(16, 32, 36, .06), 0 16px 30px -18px color-mix(in srgb, var(--brand) 75%, #000);
}
.upload-cta:hover .upload-cta-arrow { transform: translateY(-2px); }
.upload-cta:active { transform: translateY(0) scale(.98); }
/* The file input is visually hidden; its focus is shown on the pill. */
.row:has(#fileInput:focus-visible) .upload-cta { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .upload-cta, .upload-cta-arrow { transition: none; } }

/* --- a team's colour ------------------------------------------------------ */

/* A team may wear a colour of its own (Settings of the team, from the team
   card). data-accent on the root swaps the mark's teal for it, in light and
   in dark; everything drawn in --brand, and through body.brand-accent in
   --cobalt, follows. No attribute, or "teal", is Vistilla's own. */
:root[data-accent="blue"] {
  --brand: #2563eb; --brand-ink: #1e4fc0; --brand-soft: rgba(37,99,235, 0.13); --brand-deep: #102a6b;
  --brand-ground: radial-gradient(circle at 52% 44%, #dbe6fd 0%, #b3c9f8 58%, #7d9fee 100%);
  --brand-solid: #2563eb; --brand-solid-hover: #1d4fd0; --brand-tint: #dde7fc;
}
:root[data-theme="dark"][data-accent="blue"], :root[data-accent="blue"] .on-dark {
  --brand: #5b8cf5; --brand-ink: #a9c3ff; --brand-soft: rgba(91,140,245, 0.2); --brand-tint: #18264a;
}
:root[data-accent="indigo"] {
  --brand: #5b4fd6; --brand-ink: #4338b0; --brand-soft: rgba(91,79,214, 0.13); --brand-deep: #241d63;
  --brand-ground: radial-gradient(circle at 52% 44%, #e6e3fb 0%, #c6c0f3 58%, #988fe4 100%);
  --brand-solid: #5b4fd6; --brand-solid-hover: #4b40bd; --brand-tint: #e5e2fa;
}
:root[data-theme="dark"][data-accent="indigo"], :root[data-accent="indigo"] .on-dark {
  --brand: #8c82f0; --brand-ink: #c4beff; --brand-soft: rgba(140,130,240, 0.2); --brand-tint: #25214a;
}
:root[data-accent="violet"] {
  --brand: #9333ea; --brand-ink: #7a24c2; --brand-soft: rgba(147,51,234, 0.13); --brand-deep: #3b0f63;
  --brand-ground: radial-gradient(circle at 52% 44%, #f1e4fd 0%, #dcbcf8 58%, #b98af0 100%);
  --brand-solid: #9333ea; --brand-solid-hover: #7e22ce; --brand-tint: #f0e3fc;
}
:root[data-theme="dark"][data-accent="violet"], :root[data-accent="violet"] .on-dark {
  --brand: #b57af5; --brand-ink: #dcbcff; --brand-soft: rgba(181,122,245, 0.2); --brand-tint: #2e1a45;
}
:root[data-accent="pink"] {
  --brand: #db2777; --brand-ink: #b81c63; --brand-soft: rgba(219,39,119, 0.13); --brand-deep: #5c0a30;
  --brand-ground: radial-gradient(circle at 52% 44%, #fde3ee 0%, #f6b8d2 58%, #ec82ae 100%);
  --brand-solid: #db2777; --brand-solid-hover: #be185d; --brand-tint: #fce4ef;
}
:root[data-theme="dark"][data-accent="pink"], :root[data-accent="pink"] .on-dark {
  --brand: #f06ba5; --brand-ink: #ffb3d3; --brand-soft: rgba(240,107,165, 0.2); --brand-tint: #44192d;
}
:root[data-accent="red"] {
  --brand: #dc2626; --brand-ink: #b91c1c; --brand-soft: rgba(220,38,38, 0.13); --brand-deep: #5f0f0f;
  --brand-ground: radial-gradient(circle at 52% 44%, #fde3e3 0%, #f6b6b6 58%, #ec8080 100%);
  --brand-solid: #dc2626; --brand-solid-hover: #b91c1c; --brand-tint: #fde4e4;
}
:root[data-theme="dark"][data-accent="red"], :root[data-accent="red"] .on-dark {
  --brand: #f26b6b; --brand-ink: #ffb0b0; --brand-soft: rgba(242,107,107, 0.2); --brand-tint: #451a1a;
}
:root[data-accent="orange"] {
  --brand: #ea580c; --brand-ink: #b4440b; --brand-soft: rgba(234,88,12, 0.13); --brand-deep: #5c2306;
  --brand-ground: radial-gradient(circle at 52% 44%, #feeadb 0%, #fbc9a3 58%, #f59f63 100%);
  --brand-solid: #ea580c; --brand-solid-hover: #c2410c; --brand-tint: #fdeadc;
}
:root[data-theme="dark"][data-accent="orange"], :root[data-accent="orange"] .on-dark {
  --brand: #f68a4b; --brand-ink: #ffc49e; --brand-soft: rgba(246,138,75, 0.2); --brand-tint: #44261a;
}
:root[data-accent="green"] {
  --brand: #16a34a; --brand-ink: #137a3a; --brand-soft: rgba(22,163,74, 0.13); --brand-deep: #0b3d1f;
  --brand-ground: radial-gradient(circle at 52% 44%, #dcf4e5 0%, #ade5c1 58%, #72cf95 100%);
  --brand-solid: #16a34a; --brand-solid-hover: #15803d; --brand-tint: #dcf3e4;
}
:root[data-theme="dark"][data-accent="green"], :root[data-accent="green"] .on-dark {
  --brand: #4cc47a; --brand-ink: #9fe6b8; --brand-soft: rgba(76,196,122, 0.2); --brand-tint: #173826;
}
:root[data-accent="slate"] {
  --brand: #475569; --brand-ink: #334155; --brand-soft: rgba(71,85,105, 0.13); --brand-deep: #1e293b;
  --brand-ground: radial-gradient(circle at 52% 44%, #e5e9ef 0%, #c3ccd8 58%, #94a3b8 100%);
  --brand-solid: #475569; --brand-solid-hover: #334155; --brand-tint: #e2e8f0;
}
:root[data-theme="dark"][data-accent="slate"], :root[data-accent="slate"] .on-dark {
  --brand: #94a3b8; --brand-ink: #cbd5e1; --brand-soft: rgba(148,163,184, 0.2); --brand-tint: #1f2937;
}

/* The ground follows the colour too: paper, cards, hairlines, the wash of
   light across the page, the panels round a video and the quiet inks, all
   mixed from the team's colour rather than the mark's teal, in light and in
   dark. The colours themselves are above; this only says how much of each. */
:root:not([data-theme="dark"])[data-accent] {
  --paper: color-mix(in srgb, var(--brand-solid) 7%, #f4f6f7);
  --rule: color-mix(in srgb, var(--brand-solid) 18%, #e6eaec);
  --rule-soft: color-mix(in srgb, var(--brand-solid) 10%, #eef1f2);
  --rule-strong: color-mix(in srgb, var(--brand-solid) 32%, #dde3e5);
  --ink: color-mix(in srgb, var(--brand-solid) 8%, #101416);
  --ink-soft: color-mix(in srgb, var(--brand-solid) 14%, #4b5356);
  --ink-quiet: color-mix(in srgb, var(--brand-solid) 14%, #5b6366);
  --ink-faint: color-mix(in srgb, var(--brand-solid) 14%, #868e91);
  --btn-hover: color-mix(in srgb, var(--brand-solid) 6%, #ffffff);
  --rail-hover: color-mix(in srgb, var(--brand-solid) 8%, #ffffff);
  --monitor: color-mix(in srgb, var(--brand-solid) 9%, #f3f6f7);
  --monitor-3: color-mix(in srgb, var(--brand-solid) 17%, #f1f3f4);
  --monitor-hover: color-mix(in srgb, var(--brand-solid) 22%, #eef1f2);
  --monitor-soft: color-mix(in srgb, var(--brand-solid) 14%, #4b5356);
  --switch-off: color-mix(in srgb, var(--brand-solid) 45%, #8a9396);
  --track-bg: color-mix(in srgb, var(--brand-solid) 13%, #f4f6f7);
  --track-rail: color-mix(in srgb, var(--brand-solid) 24%, #eef1f2);
  --inverse-bg: color-mix(in srgb, var(--brand-solid) 45%, #0b1418);
  --poster-ground: linear-gradient(140deg,
    color-mix(in srgb, var(--brand-solid) 12%, #f6f8f9) 0%,
    color-mix(in srgb, var(--brand-solid) 22%, #eef2f3) 52%,
    color-mix(in srgb, var(--brand-solid) 36%, #e4eaec) 100%);
  --page-wash:
    radial-gradient(1100px 780px at 12% 6%, color-mix(in srgb, var(--brand-solid) 22%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 62%),
    radial-gradient(900px 700px at 98% 40%, color-mix(in srgb, var(--brand-solid) 16%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 58%),
    radial-gradient(1000px 820px at 4% 98%, color-mix(in srgb, var(--brand-solid) 19%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 60%),
    radial-gradient(1250px 950px at 64% 62%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 66%);
}
:root[data-theme="dark"][data-accent],
:root[data-accent] .on-dark {
  --monitor: color-mix(in srgb, var(--brand-solid) 13%, #05090b);
  --monitor-2: color-mix(in srgb, var(--brand-solid) 18%, #090e10);
  --monitor-3: color-mix(in srgb, var(--brand-solid) 28%, #0b1113);
  --monitor-ink: color-mix(in srgb, var(--brand-solid) 8%, #e9eef0);
  --monitor-soft: color-mix(in srgb, var(--brand-solid) 22%, #98a1a4);
  --monitor-hover: color-mix(in srgb, var(--brand-solid) 36%, #0d1316);
  --switch-off: color-mix(in srgb, var(--brand-solid) 45%, #4a5356);
  --track-bg: color-mix(in srgb, var(--brand-solid) 18%, #090e10);
  --track-rail: color-mix(in srgb, var(--brand-solid) 28%, #0b1113);
}
:root[data-theme="dark"][data-accent] {
  --paper: color-mix(in srgb, var(--brand-solid) 10%, #04070a);
  --card: color-mix(in srgb, var(--brand-solid) 14%, #090d10);
  --rule: color-mix(in srgb, var(--brand-solid) 26%, #0b1012);
  --rule-soft: color-mix(in srgb, var(--brand-solid) 20%, #0a0f11);
  --rule-strong: color-mix(in srgb, var(--brand-solid) 36%, #0d1316);
  --ink: color-mix(in srgb, var(--brand-solid) 8%, #e9eef0);
  --ink-soft: color-mix(in srgb, var(--brand-solid) 22%, #98a1a4);
  --ink-quiet: color-mix(in srgb, var(--brand-solid) 20%, #8a9396);
  --ink-faint: color-mix(in srgb, var(--brand-solid) 18%, #737c80);
  --btn-hover: color-mix(in srgb, var(--brand-solid) 26%, #0b1012);
  --rail-hover: color-mix(in srgb, var(--brand-solid) 20%, #0a0f11);
  --rail-bg: color-mix(in srgb, var(--card) 60%, transparent);
  --inverse-bg: color-mix(in srgb, var(--brand-solid) 30%, #0d1416);
  --poster-ground: linear-gradient(140deg,
    color-mix(in srgb, var(--brand-solid) 34%, #0b1113) 0%,
    color-mix(in srgb, var(--brand-solid) 24%, #090e10) 52%,
    color-mix(in srgb, var(--brand-solid) 16%, #070b0d) 100%);
  --poster-glyph: color-mix(in srgb, var(--brand) 18%, transparent);
  --page-wash:
    radial-gradient(1100px 780px at 12% 6%, color-mix(in srgb, var(--brand-solid) 34%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 62%),
    radial-gradient(900px 700px at 98% 40%, color-mix(in srgb, var(--brand-solid) 24%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 58%),
    radial-gradient(1000px 820px at 4% 98%, color-mix(in srgb, var(--brand-solid) 26%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 60%),
    radial-gradient(1250px 950px at 64% 62%, color-mix(in srgb, var(--brand-solid) 18%, transparent) 0%, color-mix(in srgb, var(--brand-solid) 0%, transparent) 66%);
}

/* Picking a team's colour: round swatches, the chosen one ringed. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 10px; }
.swatch {
  aspect-ratio: 1; width: 100%; max-width: 44px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--swatch) 55%, white) 0%, var(--swatch) 60%, color-mix(in srgb, var(--swatch) 75%, black) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px -3px color-mix(in srgb, var(--swatch) 70%, transparent);
  transition: transform 140ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 140ms ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--swatch), 0 6px 14px -4px color-mix(in srgb, var(--swatch) 70%, transparent);
}
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.swatch-name { display: block; margin-top: 12px; font: 600 13px/1.2 var(--ui); color: var(--ink-soft); }
/* The menu's "Team color" item shows the colour the team wears now. */
.menu-swatch {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-solid);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, white 40%, transparent);
}

/* --- pictures in comments ---------------------------------------------------- */

/* Sent with a comment: small, rounded, side by side; one opens full size. */
.comment-pics { display: grid; gap: 6px; margin-top: 8px; max-width: 360px; }
.comment-pics.n1 { grid-template-columns: 1fr; }
.comment-pics.n2, .comment-pics.n4 { grid-template-columns: 1fr 1fr; }
.comment-pics.n3 { grid-template-columns: 1fr 1fr 1fr; }
.comment-pics .comment-pic { display: block; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--card); cursor: zoom-in; }
.comment-pics img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 160ms ease; }
.comment-pics.n1 img { aspect-ratio: auto; object-fit: contain; }
.comment-pics .comment-pic:hover img { transform: scale(1.03); }

/* The picture viewer, over everything. */
.pic-view {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(6, 12, 14, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: pic-in 140ms ease-out;
}
@keyframes pic-in { from { opacity: 0; } to { opacity: 1; } }
.pic-view-img { max-width: min(92vw, 1600px); max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); object-fit: contain; }
.pic-view-x, .pic-view-arrow {
  position: absolute; border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font: 600 26px/44px var(--ui); padding: 0;
}
.pic-view-x { top: 16px; right: 16px; }
.pic-view-arrow.prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pic-view-arrow.next { right: 16px; top: 50%; transform: translateY(-50%); }
.pic-view-x:hover, .pic-view-arrow:hover { background: rgba(255, 255, 255, 0.26); }
.pic-view-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font: 600 13px var(--ui); }
.pic-view-open { position: absolute; bottom: 18px; right: 20px; color: rgba(255, 255, 255, 0.85); font: 600 13px var(--ui); text-decoration: none; }
.pic-view-open:hover { color: #fff; text-decoration: underline; }

/* Before sending: the previews, each with × to drop it. */
.pic-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.pic-chip { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); }
.pic-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-x {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 13px/20px var(--ui); cursor: pointer; padding: 0;
}
.pic-add { display: inline-flex; align-items: center; gap: 6px; }
.pic-add svg { width: 17px; height: 17px; }

/* --- Arabic ------------------------------------------------------------------ */

/* Cairo, a modern Arabic typeface (SIL Open Font License, fonts/OFL-Cairo.txt),
   served from here; it covers only Arabic letters, so Latin text keeps the
   site's own font beside it. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
html[lang="ar"] { --ui: "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[lang="ar"] body { font-family: var(--ui); }
/* Arabic words among numbers ("117 ميغابايت") take Cairo, not the
   monospaced face, whose fallback draws Arabic letters unjoined; the digits
   stay monospaced. Letter spacing pulls Arabic letters apart, so it goes. */
html[lang="ar"] { --mono: "Cairo", "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
html[lang="ar"] body * { letter-spacing: normal !important; }
/* In the narrow side bar the storage figures go under their labels. */
html[dir="rtl"] .storage-row { grid-template-columns: 10px minmax(0, 1fr); row-gap: 1px; }
html[dir="rtl"] .storage-row b { grid-column: 2; }
html[dir="rtl"] .storage-plan { white-space: nowrap; padding-inline: 6px; }
html[dir="rtl"] .storage-title { white-space: nowrap; }
/* Arabic letters sit taller than Latin ones: a little more room per line. */
html[lang="ar"] body { line-height: 1.6; }

/* Hidden until the words are in Arabic, never for long. */
html.i18n-pending body { animation: i18n-wait 1.5s step-end forwards; }
@keyframes i18n-wait { from { visibility: hidden; } to { visibility: visible; } }

/* What people wrote takes its own direction, English or Arabic. */
html[dir="rtl"] .comment-text,
html[dir="rtl"] textarea,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] #title,
html[dir="rtl"] .vcard-title { unicode-bidi: plaintext; text-align: start; }

/* A video's timeline runs left to right in every language, as players do. */
html[dir="rtl"] .player-shell,
html[dir="rtl"] .playbar,
html[dir="rtl"] .scrub,
/* Trim: the whole recording as a rail, the kept part between two grips.
   The recorder uses it before publishing, the video page to cut later. */
.trim { margin-bottom: 18px; }
.trim-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.trim-head b { font-size: 13px; font-weight: 600; }
.trim-head .hint { flex: 1; }
.trim-reset { background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
              color: var(--cobalt-ink); cursor: pointer; }
.trim-reset:hover { text-decoration: underline; }
.trim-bar { position: relative; height: 34px; border-radius: 6px; background: var(--monitor-3);
            touch-action: none; user-select: none; }
.trim-keep { position: absolute; top: 0; bottom: 0; border-radius: 6px;
             background: var(--cobalt-soft); box-shadow: inset 0 0 0 2px var(--cobalt); }
.trim-head-pos { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
                 background: var(--monitor-ink); pointer-events: none; }
.trim-grip { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; padding: 0;
             border: 0; border-radius: 5px; background: var(--cobalt); cursor: ew-resize; }
.trim-grip::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 7px; width: 2px;
                    border-radius: 1px; background: rgba(255, 255, 255, 0.85); }
.trim-grip:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
html[dir="rtl"] .trim-bar { direction: ltr; }

/* Arrows that point onward point the other way. */
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* --- the language switch ----------------------------------------------------- */

/* Two letters in a glassy pill, the chosen one on a coloured thumb that
   slides across when the other is picked. */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 32px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 14px -8px rgba(12, 40, 48, 0.35);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  direction: ltr;
  isolation: isolate;
}
.lang-switch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--brand-grad, var(--brand));
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--brand) 70%, transparent);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lang-switch.is-ar::before { transform: translateX(100%); }
.lang-switch button {
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border: none;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  font: 700 12px/26px var(--ui);
  letter-spacing: 0.04em;
  color: var(--ink-soft, var(--ink));
  transition: color 200ms ease;
}
.lang-switch button[lang="ar"] { font: 700 14px/26px "Cairo", var(--ui); letter-spacing: 0; }
.lang-switch button[aria-pressed="true"] { color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* A name written in Latin letters (a channel, a collection, a team) keeps
   its own direction, but in Arabic it lines up on the right with the rest
   of the side bar and menus. */
html[dir="rtl"] :is(.rail-label, .rail-teamcard-text, .menu-pick-text, .notif-line)[dir="auto"],
html[dir="rtl"] :is(.rail-teamcard-text, .menu-pick-text) > [dir="auto"] { text-align: right; }

/* --- the top bar, in groups ------------------------------------------------
   The guide, then the small switches side by side in one box (help,
   language, theme, the bell), then Record and the account. Everything is
   the same height and the same rounded shape, with thin rules between the
   groups and even gaps, so the bar reads as one piece. */
.topbar-sep { flex: none; width: 1px; height: 20px; background: var(--rule); margin-inline: 2px; }
.topbar-cluster {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  height: 36px; padding: 2px; border-radius: 999px;
  background: color-mix(in oklab, var(--card) 62%, transparent);
  border: 1px solid var(--rule);
}
.topbar-cluster > .btn-square, .topbar-cluster > .theme-toggle,
.topbar-cluster > .notif-wrap > .btn-square { width: 30px; height: 30px; min-height: 0; border-radius: 50%; }
/* Inside the box the language switch needs no frame of its own. */
.topbar-cluster .lang-switch {
  height: 30px; padding: 2px; margin-inline: 2px; box-shadow: none; border-color: transparent;
  background: color-mix(in oklab, var(--rule) 45%, transparent);
}
.topbar-cluster .lang-switch button { height: 26px; }
.topbar:has(.topbar-cluster) .docs-btn { height: 36px; }
body.no-team .topbar-cluster + .topbar-sep { display: none; }
.topbar:has(.topbar-cluster) { gap: 10px; }
/* On a phone the groups sit closer, without their rules, and Record shows
   just its red dot, so the bar keeps to one row over the search. */
@media (max-width: 560px) {
  .topbar-sep { display: none; }
  .topbar:has(.topbar-cluster) { gap: 6px; }
  .topbar-cluster .lang-switch { margin-inline: 0; }
  .topbar .btn-rec { font-size: 0; gap: 0; width: 38px; padding-inline: 0; justify-content: center; }
}
.topbar-cluster .lang-switch::before { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); }

/* --- the Android app button ------------------------------------------------ */

/* A dark glass pill, the way app-store badges are: Android's green in a lit
   tile, the name, the version and size the button will give (apk.js), and a
   round download arrow. A ring of the brand's teal and the mark's coral turns
   slowly round its edge; on hover it lifts, a sheen crosses it and the arrow
   dips. The same in both themes, as a badge is, a little brighter in dark. */
@property --apk-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.apk-get {
  --apk-bg: linear-gradient(135deg, #0e2f39 0%, #0a222a 55%, #071a20 100%);
  --apk-ring: conic-gradient(from var(--apk-turn), #2a7d94, #4aa9c2, #3ddc84, #f05a49, #2a7d94);
  --apk-lift: rgba(8, 36, 46, 0.55);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 408px; min-height: 62px; padding: 9px 10px 9px 9px;
  border: 1.5px solid transparent; border-radius: 18px;
  background: var(--apk-bg) padding-box, var(--apk-ring) border-box;
  color: #ffffff; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 34px -18px var(--apk-lift);
  animation: apk-turn 7s linear infinite;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease;
}
:root[data-theme="dark"] .apk-get {
  --apk-bg: linear-gradient(135deg, #15414d 0%, #0f303a 55%, #0b252d 100%);
  --apk-lift: rgba(0, 0, 0, 0.75);
}
@keyframes apk-turn { to { --apk-turn: 360deg; } }
/* The sheen, parked off the left edge until the pointer comes. */
.apk-get::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 48%, transparent 66%);
  transform: translateX(-100%);
}
.apk-get, .apk-get:hover { text-decoration: none; }
.apk-get:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 22px 40px -18px var(--apk-lift); }
.apk-get:hover::after { transform: translateX(100%); transition: transform 760ms ease; }
.apk-get:active { transform: translateY(0); }
.apk-get:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.apk-tile {
  position: relative; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: radial-gradient(120% 120% at 30% 15%, #7cf0b0 0%, #3ddc84 45%, #18a862 100%);
  color: #06301c;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 8px 18px -6px rgba(61, 220, 132, 0.6);
}
.apk-tile svg { width: 26px; height: 26px; }

.apk-text { flex: 1; min-width: 0; display: grid; gap: 5px; }
.apk-title { font-size: 15.5px; font-weight: 680; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apk-meta { display: flex; align-items: center; gap: 6px; overflow: hidden; color: rgba(223, 240, 244, 0.68); font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
.apk-meta[hidden] { display: none; }
.apk-meta b { font-weight: 650; font-variant-numeric: tabular-nums; color: #bfe9f3; }
.apk-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.apk-meta i[hidden] { display: none; }

.apk-go {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: background 160ms ease;
}
.apk-go svg { width: 19px; height: 19px; transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.apk-get:hover .apk-go { background: #ffffff; color: #0a222a; }
.apk-get:hover .apk-go svg { transform: translateY(2px); }

/* The extension's: a teal-to-coral tile, the mark's colours, in place of
   Android's green; and no use on a phone, where it cannot be installed. */
.apk-get.is-extension .apk-tile {
  background: radial-gradient(120% 120% at 30% 15%, #8fd3e4 0%, #2a7d94 55%, #17596b 100%);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 18px -6px rgba(42, 125, 148, 0.7);
}
.apk-get.is-extension .apk-tile svg circle { fill: #ffb3a8; }
@media (max-width: 900px), (pointer: coarse) { .apk-get.is-extension { display: none; } }
/* In the narrow rail, just the browsers it is for. */
.apk-get.is-extension.is-compact .apk-meta b, .apk-get.is-extension.is-compact .apk-meta i { display: none; }

/* In the library's side rail, under the storage card. */
.apk-get.is-compact { min-height: 64px; gap: 11px; padding: 11px 12px 11px 11px; border-radius: 16px; }
.apk-get.is-compact .apk-tile { width: 40px; height: 40px; border-radius: 12px; }
.apk-get.is-compact .apk-tile svg { width: 23px; height: 23px; }
.apk-get.is-compact .apk-title { font-size: 14.5px; }
.apk-get.is-compact .apk-meta { font-size: 12px; }
/* The rail is narrow: the number and size alone, so neither runs under the arrow. */
.apk-get.is-compact .apk-meta > span:first-child { display: none; }
.apk-get.is-compact .apk-go { width: 30px; height: 30px; }
.apk-get.is-compact .apk-go svg { width: 17px; height: 17px; }
.rail-group.apk-group { display: grid; gap: 8px; padding-top: 0; border-top: 0; }

/* In Arabic the sheen crosses the other way; the version stays left to right. */
html[dir="rtl"] .apk-get { padding: 9px 9px 9px 10px; }
html[dir="rtl"] .apk-get.is-compact { padding: 11px 11px 11px 12px; }
html[dir="rtl"] .apk-get.is-compact .apk-title { font-size: 13.5px; }
html[dir="rtl"] .apk-get::after { transform: translateX(100%); }
html[dir="rtl"] .apk-get:hover::after { transform: translateX(-100%); }
html[dir="rtl"] .apk-meta b { direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  .apk-get { animation: none; }
  .apk-get:hover::after { transition: none; }
}