/* Scribe design system: fonts, tokens of the three skins (light + dark), base components.
 *
 * Pages load this first, then their own <style>. skin.js sets on <html>:
 *   data-skin = paper | studio | dossier   (default paper)
 *   data-mode = light | dark               (the user's choice, or the system's)
 * Components use only tokens - never raw colours, sizes or fonts - so every skin works.
 * Right-to-left (Hebrew, Arabic): only logical properties (margin-inline-start, border-inline-end,
 * text-align: start, inset-inline-...) - never left/right - so dir="rtl" mirrors everything.
 * Content (transcript lines, messages, names, phone numbers, titles typed by people) always gets
 * dir="auto" (blocks) or <bdi> (inline), so Russian inside Hebrew and back keeps its punctuation.
 * The old page variables (--card, --chip, --ok-bg, ...) are kept as aliases at the end.
 */

/* ---------------------------------------------------------------- fonts (OFL, see fonts/*.LICENSE) */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Hebrew: the same family names, so Hebrew letters get a matching face (the browser picks by unicode-range) */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
  src: url(fonts/noto-sans-hebrew-hebrew-wght-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap;
  src: url(fonts/noto-serif-hebrew-hebrew-wght-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-hebrew-hebrew-600-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap;
  src: url(fonts/ibm-plex-sans-hebrew-hebrew-700-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* ---------------------------------------------------------------- tokens shared by all skins */
:root {
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;  /* also covers Hebrew */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* spacing scale */
  --s1: 2px; --s2: 4px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 24px; --s7: 32px;
  /* type scale, relative to the skin's --fs */
  --fs-xs: calc(var(--fs) * .73); --fs-sm: calc(var(--fs) * .86); --fs-md: var(--fs);
  --fs-lg: calc(var(--fs) * 1.13); --fs-xl: calc(var(--fs) * 1.47); --fs-2xl: calc(var(--fs) * 1.87);
  --lh: 1.5;
  --r-pill: 999px;
  --dur: .15s;
  /* speaker colours (names in transcripts), light */
  --sp1: #3a6fd8; --sp2: #b0457a; --sp3: #4b8a2e; --sp4: #8a4fbf; --sp5: #b26b00; --sp6: #0e7f86;
}
:root[data-mode="dark"] {
  --sp1: #8fb0ff; --sp2: #f08cbc; --sp3: #9fd47c; --sp4: #c9a3f0; --sp5: #f0b35a; --sp6: #6fd3d9;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- A: paper (default) */
:root, :root[data-skin="paper"] {
  --font: var(--sys); --font-head: var(--sys); --font-num: var(--sys); --fs: 15px;
  --bg: #f5f4f0; --surface: #ffffff; --surface-2: #faf9f6; --side-bg: #ffffff;
  --ink: #1d1d1b; --muted: #6b6b66; --line: #e5e3dc; --chip: #efeee9;
  --accent: #3157c8; --accent-ink: #ffffff; --accent-soft: #e8edfb;
  --ok: #217a3c; --ok-soft: #e5f4e9; --warn: #a86400; --warn-soft: #fff1d9; --err: #b3261e; --err-soft: #fce8e6;
  --note: #fff6d1; --note-line: #d4a000; --mark: #ffe066;
  --r-s: 6px; --r-m: 8px; --r-l: 12px;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 2px 8px rgb(0 0 0 / .04);
  --pad: 14px;
}
:root[data-skin="paper"][data-mode="dark"], :root:not([data-skin])[data-mode="dark"] {
  --bg: #161615; --surface: #1f1f1e; --surface-2: #242422; --side-bg: #1c1c1b;
  --ink: #ecebe6; --muted: #9a9993; --line: #34332f; --chip: #2a2a28;
  --accent: #8aa4ff; --accent-ink: #0d1330; --accent-soft: #232a45;
  --ok: #7fd49a; --ok-soft: #173323; --warn: #f0b35a; --warn-soft: #3a2c14; --err: #ff8a80; --err-soft: #3b1a17;
  --note: #3a3114; --note-line: #b8952a; --mark: #6b5a12;
  --shadow: none;
}

/* ---------------------------------------------------------------- B: studio - dense pro tool */
:root[data-skin="studio"] {
  --font: "Inter", var(--sys); --font-head: var(--font); --font-num: var(--mono); --fs: 14px;
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --side-bg: #fbfbfc;
  --ink: #111827; --muted: #6b7280; --line: #e5e7eb; --chip: #e8ebef;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #e0f2f0;
  --ok: #15803d; --ok-soft: #dcfce7; --warn: #b45309; --warn-soft: #fef3c7; --err: #b91c1c; --err-soft: #fee2e2;
  --note: #fef9c3; --note-line: #eab308; --mark: #fde047;
  --r-s: 4px; --r-m: 6px; --r-l: 8px;
  --shadow: none;
  --pad: 10px;
}
:root[data-skin="studio"][data-mode="dark"] {
  --bg: #0f1115; --surface: #161a20; --surface-2: #1b2028; --side-bg: #12151a;
  --ink: #e5e7eb; --muted: #8b93a1; --line: #262c36; --chip: #1f2530;
  --accent: #2dd4bf; --accent-ink: #042f2e; --accent-soft: #10302d;
  --ok: #4ade80; --ok-soft: #12301d; --warn: #fbbf24; --warn-soft: #33270c; --err: #f87171; --err-soft: #3a1515;
  --note: #2f2a10; --note-line: #a16207; --mark: #6b5a12;
}

/* ---------------------------------------------------------------- C: dossier - calm, document-like */
:root[data-skin="dossier"] {
  --font: "IBM Plex Sans", var(--sys); --font-head: "Source Serif 4", Georgia, serif; --font-num: var(--font); --fs: 15px;
  --bg: #f3efe7; --surface: #fffdf9; --surface-2: #f9f5ee; --side-bg: #fbf8f2;
  --ink: #1b2433; --muted: #66707f; --line: #e3dccf; --chip: #ece6da;
  --accent: #1f3a5f; --accent-ink: #ffffff; --accent-soft: #e4eaf2;
  --ok: #2f6b45; --ok-soft: #e1efe5; --warn: #9a5b00; --warn-soft: #f8ecd4; --err: #a3271f; --err-soft: #f7e3e0;
  --note: #f7ecc9; --note-line: #c9a227; --mark: #f3d77a;
  --r-s: 3px; --r-m: 5px; --r-l: 8px;
  --shadow: 0 1px 0 rgb(27 36 51 / .06);
  --pad: 14px;
}
:root[data-skin="dossier"][data-mode="dark"] {
  --bg: #12161d; --surface: #1a1f28; --surface-2: #1f2530; --side-bg: #161b23;
  --ink: #e8e4dc; --muted: #9aa1ac; --line: #2c3340; --chip: #262d39;
  --accent: #9db8e0; --accent-ink: #0e1a2b; --accent-soft: #22304a;
  --ok: #86c79b; --ok-soft: #1a3024; --warn: #e3b061; --warn-soft: #362a14; --err: #f08a80; --err-soft: #3b1c19;
  --note: #362e14; --note-line: #9a7d22; --mark: #6b5a12;
  --shadow: none;
}

/* Before skin.js runs (or without it): follow the system's dark mode with paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --bg: #161615; --surface: #1f1f1e; --surface-2: #242422; --side-bg: #1c1c1b;
    --ink: #ecebe6; --muted: #9a9993; --line: #34332f; --chip: #2a2a28;
    --accent: #8aa4ff; --accent-ink: #0d1330; --accent-soft: #232a45;
    --ok: #7fd49a; --ok-soft: #173323; --warn: #f0b35a; --warn-soft: #3a2c14; --err: #ff8a80; --err-soft: #3b1a17;
    --note: #3a3114; --note-line: #b8952a; --mark: #6b5a12; --shadow: none;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- aliases for the existing pages */
:root {
  --card: var(--surface); --ok-bg: var(--ok-soft); --warn-bg: var(--warn-soft); --err-bg: var(--err-soft);
  --code: var(--chip);
}

/* ---------------------------------------------------------------- base */
body { font-family: var(--font); }
h1, h2, h3 { font-family: var(--font-head); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- components (ds-*) */
.ds-btn { font: inherit; font-size: var(--fs-sm); line-height: 1.3; padding: 6px 12px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background var(--dur); }
.ds-btn:hover { background: var(--chip); }
.ds-btn:disabled { opacity: .5; cursor: default; }
.ds-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ds-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.ds-btn.ghost { background: transparent; border-color: transparent; }
.ds-btn.ghost:hover { background: var(--chip); }
.ds-btn.danger { color: var(--err); }
.ds-btn.danger:hover { background: var(--err-soft); }
.ds-btn.sm { padding: 3px 8px; font-size: var(--fs-xs); }
.ds-btn.icon { padding: 6px; }

.ds-field { font: inherit; font-size: var(--fs-sm); padding: 6px 10px; border-radius: var(--r-m); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); min-width: 0; }
.ds-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-field::placeholder { color: var(--muted); }
.ds-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: var(--s2); }

.ds-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-m); background: var(--chip); }
.ds-seg button { font: inherit; font-size: var(--fs-sm); border: 0; padding: 4px 10px; border-radius: calc(var(--r-m) - 2px);
  background: transparent; color: var(--muted); cursor: pointer; }
.ds-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

.ds-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--chip); color: var(--ink); font-size: var(--fs-xs); line-height: 1.6; white-space: nowrap; border: 0; font-family: inherit; }
button.ds-chip { cursor: pointer; }
.ds-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ds-chip.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.ds-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--chip); color: var(--muted); }
.ds-badge.ok { background: var(--ok-soft); color: var(--ok); }
.ds-badge.warn { background: var(--warn-soft); color: var(--warn); }
.ds-badge.err { background: var(--err-soft); color: var(--err); }
.ds-badge.accent { background: var(--accent-soft); color: var(--accent); }

.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); }
.ds-card > .head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--pad) calc(var(--pad) + 2px); border-bottom: 1px solid var(--line); }
.ds-card > .head h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.ds-card > .body { padding: var(--pad) calc(var(--pad) + 2px); }
.ds-card.accent { border-color: var(--accent); }
.ds-card.accent > .head { background: var(--accent-soft); }

.ds-nav { display: flex; flex-direction: column; gap: 2px; }
.ds-nav a, .ds-nav button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-m);
  color: var(--ink); text-decoration: none; font: inherit; font-size: var(--fs-sm); background: none; border: 0; cursor: pointer; text-align: start; }
.ds-nav a:hover, .ds-nav button:hover { background: var(--chip); }
.ds-nav .on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ds-nav .n { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-xs); font-family: var(--font-num); }
.ds-nav svg { width: 16px; height: 16px; flex: none; }
.ds-section { margin: var(--s5) 10px var(--s2); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }

.ds-note { background: var(--note); border-inline-start: 3px solid var(--note-line); padding: 4px 8px; border-radius: var(--r-s); font-size: var(--fs-sm); }
.ds-alert { padding: var(--s3) var(--s4); border-radius: var(--r-m); font-size: var(--fs-sm); background: var(--accent-soft); color: var(--ink); }
.ds-alert.ok { background: var(--ok-soft); } .ds-alert.warn { background: var(--warn-soft); } .ds-alert.err { background: var(--err-soft); }
.ds-alert b { color: var(--accent); } .ds-alert.ok b { color: var(--ok); } .ds-alert.warn b { color: var(--warn); } .ds-alert.err b { color: var(--err); }

.ds-progress { height: 6px; border-radius: var(--r-pill); background: var(--chip); overflow: hidden; }
.ds-progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s; }

.ds-kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; color: var(--muted); background: var(--surface); }
.ds-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }  /* times stay 09:42 · 3:18 in RTL */
.ds-muted { color: var(--muted); }
.ds-sp1 { color: var(--sp1); } .ds-sp2 { color: var(--sp2); } .ds-sp3 { color: var(--sp3); }
.ds-sp4 { color: var(--sp4); } .ds-sp5 { color: var(--sp5); } .ds-sp6 { color: var(--sp6); }

/* RTL */
[dir="rtl"] .ds-flip { transform: scaleX(-1); }  /* arrows and other icons that point along the line */