/* Base for every page: the font, tokens, reset, shared controls, the top bar, dialogs, splitters and
   the toast. Page layouts live in their own files. Tokens are the only source of colors, spacing,
   corners and borders. */

/* Heebo (variable, OFL): Hebrew and Latin drawn as one family. Files and license in /fonts. */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/heebo-hebrew-wght-normal.woff2?v=24194cee7b") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/heebo-latin-ext-wght-normal.woff2?v=24194cee7b") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/heebo-latin-wght-normal.woff2?v=24194cee7b") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Neutrals. Depth comes from surface steps, never shadows (Rule 8). */
  --bg: #0b0c10;
  --surface: #14161c;
  --surface-2: #1b1e26;
  --surface-3: #242833;
  --line: #22252e;
  --line-strong: #323745;
  --text: #f2f3f7;
  --text-2: #c5c9d3;
  --muted: #8c92a0;
  --faint: #636977;

  /* One color per job (Rule 7): mid-range, strong, never neon. */
  --tone-primary: #3e7bfa;
  --tone-primary-hover: #3170f4;
  --tone-danger: #e5484d;
  --tone-danger-text: #f2858a;
  --tone-success: #30a46c;
  --tone-success-text: #63c995;
  --tone-vod: #8e4ec6;
  --tone-vod-text: #c39be8;
  --tone-series: #3e63dd;
  --tone-series-text: #9fb2f5;
  --tone-search: #f76b15;
  --tone-search-text: #ff9a57;
  --tone-mail: #12a594;
  --tone-mail-text: #4cc9b6;
  --tone-star: #ffc53d;
  --tone-cache: #0090ff;
  --tone-cache-text: #6cc0ff;
  --tone-direct: #8fb52a;
  --tone-direct-text: #b5d45e;
  --tone-notice: #f76b15;
  /* Favorites: a red heart. */
  --tone-like: #ec3a48;
  /* New titles and episodes: a solid red mark with white text. */
  --tone-new: #e50914;
  /* Downloads kept for later: a grass green, with its text tint. */
  --tone-save: #46a758;
  --tone-save-text: #71d083;
  /* Last watch, where a title was left: a pink, with its text tint. */
  --tone-resume: #d6409f;
  --tone-resume-text: #f28fcf;
  /* The admin site and its Console: a purple, bluer than the movies one. */
  --tone-admin: #7b5cf0;
  --tone-admin-text: #ad9bff;

  /* 4-point grid. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Fluid steps, snapped to the 4px grid where round() is supported (Rule 12). */
  --gap: 8px;
  --pad: 16px;
  --pad-card: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  /* The page's side gutter: the top bar and every page's content share this one edge. */
  --edge: var(--gap);

  /* Corners (Rule 16): sized to the piece, always well under half of its short side. */
  --r-card: 12px;
  --r-ctl: 8px;
  --r-inner: 8px;
  --r-chip: 4px;
  --r-mark: 2px;
  --r-line: 1px;

  /* Every border and outline is at least this thick (Rule 9). */
  --border: 2px;
  /* The keyboard and remote focus ring: thick enough to see from across a room. */
  --focus-w: 3px;

  /* Control heights. */
  --h-chip: 24px;
  --h-s: 32px;
  --h-m: 40px;
  --h-row: 44px;

  /* Fluid type scale. */
  --t-xs: clamp(0.69rem, 0.08vw + 0.67rem, 0.75rem);
  --t-s: clamp(0.78rem, 0.12vw + 0.75rem, 0.84rem);
  --t-m: clamp(0.88rem, 0.18vw + 0.84rem, 0.95rem);
  --t-l: clamp(1rem, 0.35vw + 0.92rem, 1.15rem);
  --t-xl: clamp(1.2rem, 0.9vw + 0.98rem, 1.6rem);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  font-family: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-m);
  line-height: 1.5;
  letter-spacing: -0.003em;
}

@supports (width: round(1px, 4px)) {
  :root {
    --gap: round(clamp(8px, 0.6vw + 4px, 16px), 4px);
    --pad: round(clamp(12px, 0.8vw + 6px, 20px), 4px);
    --pad-card: round(clamp(16px, 1vw + 8px, 24px), 4px);
    --space-1: round(clamp(4px, 0.3vw + 3px, 8px), 4px);
    --space-2: round(clamp(8px, 0.4vw + 6px, 12px), 4px);
    --space-3: round(clamp(12px, 1vw + 8px, 24px), 4px);
    --space-4: round(clamp(16px, 2vw + 8px, 32px), 4px);
  }
}

/* Reset. The body is never locked, so pull-to-refresh keeps working (Rule 11). */

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--tone-primary);
}

.muted { color: var(--muted); }
.small { font-size: var(--t-s); }
.error { color: var(--tone-danger-text); }

.eyebrow {
  color: var(--faint);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

svg.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-mark); }
::-webkit-scrollbar-track { background: transparent; }

/* Controls */

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

input:where(:not([type="range"], [type="checkbox"], [type="radio"])) {
  width: 100%;
  min-width: 0;
  height: var(--h-m);
  padding: 0 var(--s3);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text);
  font-size: max(var(--t-s), 16px);
}

@media (pointer: fine) {
  input:where(:not([type="range"], [type="checkbox"], [type="radio"])) { font-size: var(--t-s); }
}

input::placeholder { color: var(--faint); }

input:where(:not([type="range"], [type="checkbox"], [type="radio"])):focus {
  border-color: var(--tone-primary);
  outline: 0;
}

/* Keyboard and remote focus: a ring inside the control, so no scroll box clips it, in the control's job
   color (--focus-tone); filled controls take a white one. A ring, never a glow (Rule 8). Small native
   controls keep it outside, where it can't cover them. Text fields show :focus-visible on a click too,
   so their ring waits for a navigation key (key-nav.js sets data-input). */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-tone, var(--tone-primary));
  outline-offset: calc(-1 * var(--focus-w));
}

input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible { outline-offset: 2px; }

:root[data-input="keys"] input:where(:not([type="range"], [type="checkbox"], [type="radio"])):focus:not(.field input) {
  outline: var(--focus-w) solid var(--tone-primary);
  outline-offset: calc(-1 * var(--focus-w));
}

:root[data-input="keys"] .field:has(input:focus) {
  outline: var(--focus-w) solid var(--tone-search);
  outline-offset: calc(-1 * var(--focus-w));
}

.btn-tone { --focus-tone: var(--btn-tone); }
.btn-primary { --focus-tone: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--h-m);
  padding: 0 var(--s4);
  background: var(--surface-2);
  border: var(--border) solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text-2);
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { background: var(--surface-3); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-small { height: var(--h-s); padding: 0 var(--s3); }
.btn-icon { width: var(--h-s); padding: 0; }
.btn-quiet { background: transparent; border-color: transparent; }

/* Job colors for buttons (Rule 7): the same job always gets the same tone. */
.btn-primary { background: var(--tone-primary); border-color: var(--tone-primary); color: #fff; }
.btn-primary:hover { background: var(--tone-primary-hover); border-color: var(--tone-primary-hover); color: #fff; }

.btn-tone {
  background: transparent;
  border-color: color-mix(in srgb, var(--btn-tone) 60%, transparent);
  color: var(--btn-tone-text);
}

.btn-tone:hover {
  background: color-mix(in srgb, var(--btn-tone) 14%, transparent);
  color: var(--btn-tone-text);
}

.btn-danger { --btn-tone: var(--tone-danger); --btn-tone-text: var(--tone-danger-text); }
.btn-mail { --btn-tone: var(--tone-mail); --btn-tone-text: var(--tone-mail-text); }
.btn-cache { --btn-tone: var(--tone-cache); --btn-tone-text: var(--tone-cache-text); }
.btn-save { --btn-tone: var(--tone-save); --btn-tone-text: var(--tone-save-text); }.btn-save .icon { fill: currentColor; stroke: none; }

/* A toggle that is on. */
.btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--tone-success) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--tone-success) 60%, transparent);
  color: var(--tone-success-text);
}

/* Chips (tags) */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: var(--h-chip);
  padding: 0 var(--s2);
  background: var(--surface-3);
  border-radius: var(--r-chip);
  color: var(--text-2);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip-vod { background: color-mix(in srgb, var(--tone-vod) 20%, transparent); color: var(--tone-vod-text); }
.chip-series { background: color-mix(in srgb, var(--tone-series) 22%, transparent); color: var(--tone-series-text); }
.chip-cache { background: color-mix(in srgb, var(--tone-cache) 18%, transparent); color: var(--tone-cache-text); }
.chip-direct { background: color-mix(in srgb, var(--tone-direct) 20%, transparent); color: var(--tone-direct-text); }
.chip-star { background: color-mix(in srgb, var(--tone-star) 16%, transparent); color: var(--tone-star); }
.chip-warn { background: color-mix(in srgb, var(--tone-danger) 18%, transparent); color: var(--tone-danger-text); }
.chip-ok { background: color-mix(in srgb, var(--tone-success) 18%, transparent); color: var(--tone-success-text); }
.chip-save { background: color-mix(in srgb, var(--tone-save) 20%, transparent); color: var(--tone-save-text); }
.chip-search { background: color-mix(in srgb, var(--tone-search) 20%, transparent); color: var(--tone-search-text); }
.chip-mail { background: color-mix(in srgb, var(--tone-mail) 18%, transparent); color: var(--tone-mail-text); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Segmented control (tabs). The selected segment gets a mark in its job color. */

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--r-ctl);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 0;
  height: var(--h-s);
  padding: 0 var(--s3);
  background: transparent;
  border: 0;
  border-radius: var(--r-chip);
  color: var(--muted);
  font-size: var(--t-s);
  font-weight: 650;
  white-space: nowrap;
}

.seg-btn:hover { color: var(--text-2); }
.seg-btn[aria-selected="true"] { background: var(--surface-3); color: var(--text); }

.seg-btn[aria-selected="true"]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-mark);
  background: var(--seg-tone, var(--tone-primary));
}

.seg-btn .count {
  color: var(--faint);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* Grouped list: rows divided inside one rounded box. */

.group {
  display: grid;
  margin: 0;
  padding: 0;
  background: var(--surface-2);
  border-radius: var(--r-inner);
  list-style: none;
  overflow: hidden;
}

.group > * + * { border-top: var(--border) solid var(--line); }

.group-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  font-size: var(--t-s);
}

.group-row dt { flex: none; color: var(--muted); }
.group-row dd { min-width: 0; margin: 0; color: var(--text); text-align: end; }

/* Top bar shared by every signed-in page: the brand, the page nav, the page's tools and the account
   each own their part. */

.shell-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--pad);
  min-height: 52px;
  padding: var(--safe-top) calc(var(--safe-right) + var(--edge)) 0 calc(var(--safe-left) + var(--edge));
  background: var(--bg);
}

.bar-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-l);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The site's icon (brand/<site>/icon.svg, rounded in the picture itself), sized to the name beside it. */
.brand-mark {
  display: block;
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

/* The owner's site says which it is by its name's color alone. */
.brand-owner { color: var(--tone-admin-text); }

/* The page links push the rest of the bar to the end; a site with one page has none, so the part after
   the brand does it. */
.bar-brand + :not(.bar-nav) { margin-inline-start: auto; }

.bar-nav {
  display: flex;
  gap: var(--s1);
  margin-inline-end: auto;
  padding: var(--s1);
  background: var(--surface);
  border-radius: var(--r-ctl);
}

.bar-nav a {
  display: inline-flex;
  align-items: center;
  height: var(--h-s);
  padding: 0 var(--s4);
  border-radius: var(--r-chip);
  color: var(--muted);
  font-size: var(--t-s);
  font-weight: 650;
  text-decoration: none;
}

.bar-nav a .icon { display: none; }
.bar-nav a:hover { color: var(--text-2); }
.bar-nav a[aria-current="page"] { background: var(--surface-3); color: var(--text); }

.bar-tools {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.bar-account {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
}

/* The account button: the person mark and the username; narrow screens keep the mark only (its name
   stays in title). */
.account-open { color: var(--text-2); }
.account-open .icon { display: block; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: var(--h-s);
  padding: 0 var(--s3);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-ctl);
  color: var(--text-2);
  font-size: var(--t-s);
  white-space: nowrap;
}

.status:hover { background: var(--surface-2); }

.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-mark);
  background: var(--faint);
}

.status[data-state="ok"] .status-dot { background: var(--tone-success); }
.status[data-state="error"] .status-dot { background: var(--tone-danger); }
.status[data-state="busy"] .status-dot { background: var(--tone-cache); }

@media (max-width: 48rem) {
  .shell-bar { gap: var(--s2); min-height: 52px; }
  .account-open { width: var(--h-s); padding: 0; }
  .account-open .btn-label { display: none; }
  .bar-nav a { justify-content: center; width: var(--h-s); padding: 0; }
  .bar-nav a .icon { display: block; }
  .bar-nav .nav-label { display: none; }
}

/* Narrow phones: the brand drops its name so the bar fits one line (the admin site's Watch bar, the
   fullest, needs about 23.75rem with it); the icon still tells the sites apart. */
@media (max-width: 24rem) {
  .bar-brand .brand-name { display: none; }
}

/* Dialogs: the dialog positions itself, the layer inside owns the content. */

.dialog {
  width: min(100% - 2 * var(--s4), 28rem);
  max-height: calc(100dvh - 2 * var(--s4));
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--text);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--r-card);
}

.dialog::backdrop { background: rgb(0 0 0 / 0.6); }

.dialog-layer {
  display: grid;
  gap: var(--s4);
  padding: var(--pad-card);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.dialog-head h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-l);
}

/* A dialog's job mark: an 8px square in its tone (--dialog-tone on the dialog) before the heading. */
.dialog-head h2.marked::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-mark);
  background: var(--dialog-tone);
}

.dialog-field {
  display: grid;
  gap: var(--s2);
  color: var(--muted);
  font-size: var(--t-s);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s2);
  margin: 0;
}

/* The account dialog's parts (account.js): each owns one job, divided by a line. */
.account-part {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding-top: var(--s4);
  border-top: var(--border) solid var(--line);
}

.account-part h3 { font-size: var(--t-m); }

/* Splitters (splitters.js): a short grip that grows when touched. */

.split {
  position: relative;
  display: grid;
  place-items: center;
  touch-action: none;
}

.split-x { cursor: col-resize; }
.split-y { cursor: row-resize; }

.split::after {
  content: "";
  border-radius: var(--r-line);
  background: var(--line-strong);
}

.split-x::after { width: 4px; height: 32px; }
.split-y::after { width: 32px; height: 4px; }
.split-x:is(:hover, :focus-visible, .active)::after { height: 64px; background: var(--muted); }
.split-y:is(:hover, :focus-visible, .active)::after { width: 64px; background: var(--muted); }
.split.active::after { background: var(--text); }
.split:focus-visible { outline: 0; }

/* Toast: a short note at the bottom of the screen, above the iPhone home bar. */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--toast-lift, 0px) + var(--space-3));
  z-index: 70;
  max-width: calc(100% - 2 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: var(--border) solid var(--tone-primary);
  border-radius: var(--r-ctl);
  color: var(--text);
  font-size: var(--t-s);
  transform: translateX(-50%);
}

.toast.error { border-color: var(--tone-danger); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}