/* ============================================================================
   recite (trc) — ตัวบท
   Design system: taxcount studio "Notion-solid".

   Derived from the real system, not a guess:
     tcs/docs/DESIGN_SYSTEM.md
     tcs/docs/reference/UI_DESIGN_SYSTEM.md
     tcs/docs/reference/system-ui-principles.md
     tcs/assets/css/app.css   (:root)

   The vocabulary, in its own words: warm off-white surface, thin 1px borders
   and almost no shadows, hierarchy from background tint rather than elevation,
   compact density, a single brand accent, soft-keyed interactions. "If a new
   feature wants a fancier look, it should be expressed by layout, not by
   decoration."

   TWO DELIBERATE DEPARTURES, both recite-specific:

   1. READER TYPOGRAPHY IS NOT COMPACT. The 13px/32px density rule governs UI
      chrome — it exists so the app "feels like a spreadsheet". Statutory Thai
      set at 13px is unreadable; Thai needs the leading. So chrome follows tcs
      exactly and the reader body stays 17px / 1.9. This is the one surface in
      recite that is a document, not a spreadsheet.

   2. DESTRUCTIVE ACTIONS ARE OUTLINED, NOT FILLED. tcs uses brand red for both
      the primary CTA and "deleted/overdue", which it permits because "no screen
      ever shows a primary CTA next to deletion state". recite breaks that
      premise: a folder row carries ▶ play beside ลบ. Filling both in #B92025
      would make the two indistinguishable at a glance, so danger uses tcs's own
      btn-danger-ghost treatment (transparent, red text, soft red border).

   Token names keep the trc- prefix; the values are taxcount studio's.
   ========================================================================= */

:root {
  /* --- brand: single accent ------------------------------------------- */
  --trc-accent:        #B92025;
  --trc-accent-hover:  #9A1A1F;
  --trc-accent-soft:   #FFF1F1;
  --trc-accent-ring:   rgba(185, 32, 37, 0.18);

  /* --- secondary palette (semantic state only, never decoration) ------ */
  --trc-yellow:        #FFBC00;
  --trc-yellow-soft:   #FFF6DB;
  --trc-green:         #007426;
  --trc-green-soft:    #E0F2E7;
  --trc-blue:          #2025B9;
  --trc-blue-soft:     #E6E7F8;
  --trc-gray-deep:     #363636;

  /* --- surfaces (warm, Notion-leaning) -------------------------------- */
  --trc-bg:            #FBFAF9;
  --trc-surface:       #FFFFFF;
  --trc-surface-sunk:  #F5F4F2;
  --trc-surface-hover: rgba(55, 53, 47, 0.06);
  --trc-surface-active:rgba(55, 53, 47, 0.10);
  --trc-overlay:       rgba(15, 15, 15, .45);

  /* --- sidebar (light, never dark) ------------------------------------ */
  --trc-side-bg:       #F7F6F3;
  --trc-side-border:   #ECEAE4;
  --trc-side-muted:    rgba(55, 53, 47, 0.55);

  /* --- borders: 1px, always. no 2px borders --------------------------- */
  --trc-border:        #E6E5E1;
  --trc-border-strong: #D6D5D0;
  --trc-border-hover:  #B8B7B2;
  --trc-border-w:      1px;

  /* --- text ------------------------------------------------------------ */
  --trc-text:          #1F1F1F;
  --trc-text-2:        #6B6B6B;
  --trc-text-3:        #9A9A9A;
  --trc-text-invert:   #FFFFFF;

  /* --- semantic (state, not accent) ----------------------------------- */
  --trc-success:       var(--trc-green);
  --trc-success-soft:  var(--trc-green-soft);
  --trc-warning:       #8A6100;
  --trc-warning-soft:  var(--trc-yellow-soft);
  --trc-danger:        var(--trc-accent);
  --trc-danger-soft:   var(--trc-accent-soft);
  --trc-danger-border: #FECACA;
  --trc-danger-border-hover: #FCA5A5;
  /* The word being spoken right now, inside the active paragraph. */
  --trc-reading-mark: #FCE8A6;
  --trc-info:          var(--trc-blue);
  --trc-info-soft:     var(--trc-blue-soft);

  /* --- annotation highlights (reader only; tinted, never saturated) --- */
  --trc-hl-yellow:     #FFF3C4;
  --trc-hl-green:      #DDF3E4;
  --trc-hl-blue:       #E6E7F8;
  --trc-hl-pink:       #FBE4EF;
  --trc-hl-purple:     #EAE4F9;
  --trc-hl-orange:     #FBE7D6;

  /* --- geometry: hierarchy from tint, not elevation -------------------- */
  --trc-radius-xs:     4px;
  --trc-radius-sm:     6px;
  --trc-radius:        8px;
  --trc-radius-lg:     10px;
  --trc-shadow:        0 1px 0 rgba(15, 15, 15, 0.04);
  --trc-shadow-pop:    0 4px 12px rgba(15, 15, 15, 0.10), 0 0 0 1px rgba(15, 15, 15, 0.06);
  --trc-focus-ring:    0 0 0 3px var(--trc-accent-ring);

  /* --- spacing: pick from this list, do not invent --------------------- */
  --trc-s1: 4px;  --trc-s2: 8px;  --trc-s3: 12px; --trc-s4: 16px;
  --trc-s5: 24px; --trc-s6: 32px; --trc-s7: 48px; --trc-s8: 64px;

  /* --- density (chrome) ------------------------------------------------ */
  --trc-h-input:       32px;
  --trc-h-input-sm:    26px;
  --trc-h-input-lg:    38px;
  --trc-row-height:    34px;

  /* --- type scale ------------------------------------------------------ */
  --trc-fs-xs:         11px;
  --trc-fs-sm:         12px;
  --trc-fs-md:         13px;   /* base UI */
  --trc-fs-lg:         15px;
  --trc-fs-xl:         18px;
  --trc-fs-2xl:        22px;
  --trc-fs-3xl:        28px;

  --trc-ui-size:       13px;
  --trc-ui-lh:         1.55;

  /* --- reader: the one non-compact surface ---------------------------- */
  --trc-read-size:     17px;
  --trc-read-lh:       1.9;
  --trc-read-measure:  40em;

  /* --- fonts ----------------------------------------------------------- */
  /* Thai first: this app is Thai statutory text before it is anything else. */
  --trc-font: "Noto Sans Thai", "Sarabun", "Prompt", "Kanit",
              -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
              "Inter", "Helvetica Neue", Arial, sans-serif;
  /* The only serif in the system, and only for the brand mark. */
  --trc-font-display: "Playfair Display", "Sarabun", Georgia, serif;
  --trc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- layout ---------------------------------------------------------- */
  --trc-sidebar-w:     240px;
  --trc-tabbar-h:      56px;
  --trc-playbar-h:     64px;
  --trc-header-h:      44px;

  --trc-z-header:  30;
  --trc-z-playbar: 40;
  --trc-z-tabbar:  45;
  --trc-z-pop:     60;
  --trc-z-modal:   70;

  /* --- installed-app safe areas ---------------------------------------- */
  /* In a browser tab these are all 0 and every calc() below collapses to the
     plain value. Installed on a notched iPhone they become the status bar, the
     home indicator, and — in landscape — the sensor housing on one side.
     env() resolves to 0px on browsers that do not implement it, so the fallback
     argument is belt and braces rather than the load-bearing part. */
  --trc-safe-top:    env(safe-area-inset-top, 0px);
  --trc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --trc-safe-left:   env(safe-area-inset-left, 0px);
  --trc-safe-right:  env(safe-area-inset-right, 0px);

  /* The header's real height including whatever it reserves for the status
     bar. Anything that hangs off the bottom of the header — the sidebar, the
     open-on-mobile sidebar, the side sheet — measures from this, never from
     --trc-header-h, or it drifts by the inset on exactly the devices that
     matter. */
  --trc-header-total: calc(var(--trc-header-h) + var(--trc-safe-top));

  /* The floor the tab bar occupies, home indicator included. */
  --trc-tabbar-total: calc(var(--trc-tabbar-h) + var(--trc-safe-bottom));
}


/* ============================ reset / base ============================= */

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

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

body {
  margin: 0;
  background: var(--trc-bg);
  color: var(--trc-text);
  font-family: var(--trc-font);
  font-size: var(--trc-ui-size);
  line-height: var(--trc-ui-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--trc-s3); font-weight: 600; line-height: 1.35; }
h1 { font-size: var(--trc-fs-3xl); }
h2 { font-size: var(--trc-fs-xl); }
h3 { font-size: var(--trc-fs-lg); }
h4 { font-size: var(--trc-fs-md); }
p  { margin: 0 0 var(--trc-s3); }

a { color: var(--trc-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

hr {
  border: 0;
  border-top: var(--trc-border-w) solid var(--trc-border);
  margin: var(--trc-s5) 0;
}

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

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

[hidden] { display: none !important; }

/* ============================== layout ================================= */

/* 100dvh, not 100vh: on iOS the small/large viewport differ by the URL bar, and
   100vh is the LARGE one — a full-height page in Safari is taller than the
   screen and the last line hides behind the toolbar. Installed, the two are the
   same and this changes nothing. The 100vh line stays as the fallback for
   browsers without dvh. */
.trc-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.trc-header {
  position: sticky; top: 0; z-index: var(--trc-z-header);
  height: var(--trc-header-total);
  display: flex; align-items: center; gap: var(--trc-s3);
  /* The status-bar inset is padding, not height, so the bar's contents sit
     below the notch while its background still fills it. */
  padding: var(--trc-safe-top) calc(var(--trc-s4) + var(--trc-safe-right))
           0 calc(var(--trc-s4) + var(--trc-safe-left));
  background: var(--trc-surface);
  border-bottom: var(--trc-border-w) solid var(--trc-border);
}

.trc-brand {
  display: flex; align-items: baseline; gap: var(--trc-s2);
  font-weight: 700; color: var(--trc-text); text-decoration: none;
}
.trc-brand:hover { text-decoration: none; }
.trc-brand-mark {
  font-family: var(--trc-font-display);
  font-size: var(--trc-fs-xl);
  letter-spacing: .01em;
  /* The wordmark carries the taxcount accent; the tagline stays quiet. */
  color: var(--trc-accent);
}
.trc-brand-sub  { font-size: 11px; color: var(--trc-text-3); font-weight: 500; }

.trc-header-spacer { flex: 1; }

.trc-header-nav { display: flex; align-items: center; gap: var(--trc-s1); }
.trc-header-nav a {
  padding: 6px 10px; border-radius: var(--trc-radius-sm);
  color: var(--trc-text-2); font-size: 13px;
}
.trc-header-nav a:hover { background: var(--trc-surface-hover); color: var(--trc-text); text-decoration: none; }
.trc-header-nav a[aria-current="page"] { color: var(--trc-text); background: var(--trc-surface-hover); }
/* Same font, size and weight as its siblings — only the route differs. */
.trc-header-nav a.trc-nav-home { font-family: inherit; font-weight: inherit; letter-spacing: 0; }

.trc-shell { flex: 1; display: flex; align-items: stretch; min-height: 0; }

.trc-sidebar {
  width: var(--trc-sidebar-w); flex: 0 0 var(--trc-sidebar-w);
  border-right: var(--trc-border-w) solid var(--trc-side-border);
  background: var(--trc-side-bg);
  padding: var(--trc-s4) var(--trc-s3);
  overflow-y: auto;
  position: sticky; top: var(--trc-header-total);
  height: calc(100vh - var(--trc-header-total));
  height: calc(100dvh - var(--trc-header-total));
}

.trc-main { flex: 1; min-width: 0; padding: var(--trc-s5) var(--trc-s5) var(--trc-s8); }
.trc-container { max-width: 960px; margin: 0 auto; }
.trc-container-narrow { max-width: 720px; margin: 0 auto; }

/* ============================ components =============================== */

.trc-card {
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  padding: 14px;
}
.trc-card + .trc-card { margin-top: 14px; }
.trc-card-flush { padding: 0; overflow: hidden; }

.trc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--trc-h-input); padding: 5px 12px;
  background: var(--trc-surface); color: var(--trc-text);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  font-size: var(--trc-fs-md); font-weight: 500; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  text-decoration: none;
}
.trc-btn:hover { background: var(--trc-surface-hover); text-decoration: none; }
.trc-btn:disabled, .trc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.trc-btn-primary {
  background: var(--trc-accent); color: var(--trc-text-invert);
  border-color: var(--trc-accent);
}
.trc-btn-primary:hover { background: var(--trc-accent-hover); border-color: var(--trc-accent-hover); }

/* Outlined, never filled: a folder row shows ▶ play beside ลบ, and two solid
   #B92025 buttons side by side are indistinguishable. This is tcs's own
   btn-danger-ghost treatment. */
.trc-btn-danger {
  background: transparent;
  color: var(--trc-danger);
  border-color: var(--trc-danger-border);
}
.trc-btn-danger:hover { background: var(--trc-danger-soft); border-color: var(--trc-danger-border-hover); }

.trc-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.trc-btn-ghost:hover { background: var(--trc-surface-hover); }

.trc-btn-sm { min-height: var(--trc-h-input-sm); padding: 2px 9px; font-size: var(--trc-fs-sm); }
.trc-btn-lg { min-height: var(--trc-h-input-lg); padding: 8px 18px; font-size: var(--trc-fs-lg); }

.trc-btn-icon {
  width: var(--trc-h-input); height: var(--trc-h-input); padding: 0; border-radius: var(--trc-radius-sm);
}
.trc-btn-round { border-radius: 999px; }

.trc-input, .trc-select, .trc-textarea {
  width: 100%; min-height: var(--trc-h-input); padding: 5px 10px;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  font-size: 14px;
}
.trc-textarea { min-height: 90px; line-height: 1.6; resize: vertical; }
.trc-input:focus, .trc-select:focus, .trc-textarea:focus {
  outline: none; border-color: var(--trc-accent);
  box-shadow: var(--trc-focus-ring);
}

.trc-field { margin-bottom: var(--trc-s4); }
.trc-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--trc-text-2); }
.trc-hint  { margin-top: 4px; font-size: 12px; color: var(--trc-text-3); }

.trc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.6;
  background: var(--trc-surface-hover); color: var(--trc-text-2);
  border: var(--trc-border-w) solid var(--trc-border);
}
/* State by colour FAMILY, never by accent (tcs §13):
   green = active/published · yellow = pending/draft · blue = info
   red = repealed/deleted · grey = neutral. */
.trc-badge-active   { background: var(--trc-success-soft); color: var(--trc-success); border-color: transparent; }
.trc-badge-amended  { background: var(--trc-warning-soft); color: var(--trc-warning); border-color: transparent; }
.trc-badge-repealed { background: var(--trc-danger-soft);  color: var(--trc-danger);  border-color: transparent; }
.trc-badge-pending  { background: var(--trc-info-soft);    color: var(--trc-info);    border-color: transparent; }

.trc-alert {
  padding: var(--trc-s3) var(--trc-s4);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  background: var(--trc-surface);
  margin-bottom: var(--trc-s4);
  font-size: 14px;
}
.trc-alert-ok      { background: var(--trc-success-soft); border-color: transparent; color: var(--trc-success); }
.trc-alert-error   { background: var(--trc-danger-soft);  border-color: transparent; color: var(--trc-danger); }
.trc-alert-warning { background: var(--trc-warning-soft); border-color: transparent; color: var(--trc-warning); }
.trc-alert-info    { background: var(--trc-info-soft);    border-color: transparent; color: var(--trc-info); }

.trc-table { width: 100%; border-collapse: collapse; font-size: var(--trc-fs-md); }
.trc-table th, .trc-table td {
  padding: 7px 10px; text-align: left;
  border-bottom: var(--trc-border-w) solid var(--trc-border);
  vertical-align: top;
}
.trc-table th {
  font-weight: 600; color: var(--trc-text-2);
  background: var(--trc-surface-sunk); font-size: var(--trc-fs-sm);
}
.trc-table tbody tr:hover { background: var(--trc-surface-hover); }
.trc-table-wrap { overflow-x: auto; }

.trc-empty {
  padding: var(--trc-s7) var(--trc-s4);
  text-align: center; color: var(--trc-text-3);
}

.trc-muted    { color: var(--trc-text-2); }
.trc-muted-2  { color: var(--trc-text-3); }
.trc-small    { font-size: 12px; }
.trc-mono     { font-family: var(--trc-font-mono); font-size: 12px; }
.trc-row      { display: flex; align-items: center; gap: var(--trc-s2); }
.trc-row-wrap { flex-wrap: wrap; }
.trc-spacer   { flex: 1; }
.trc-stack > * + * { margin-top: var(--trc-s3); }

/* ============================== reader ================================= */

.trc-breadcrumb {
  font-size: 13px; color: var(--trc-text-2);
  margin-bottom: var(--trc-s3);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.trc-breadcrumb a { color: var(--trc-text-2); }
.trc-breadcrumb a:hover { color: var(--trc-text); }
.trc-breadcrumb-sep { color: var(--trc-text-3); }

.trc-provision-head {
  display: flex; align-items: baseline; gap: var(--trc-s3);
  flex-wrap: wrap; margin-bottom: var(--trc-s4);
}
.trc-provision-number { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.trc-provision-law    { color: var(--trc-text-2); font-size: 14px; }

.trc-reader {
  font-size: var(--trc-read-size);
  line-height: var(--trc-read-lh);
  max-width: var(--trc-read-measure);
}
.trc-chunk {
  margin: 0 0 var(--trc-s4);
  position: relative;
  padding: 2px 0 2px var(--trc-s3);
  border-left: 3px solid transparent;
  border-radius: 2px;
  transition: background .15s ease, border-color .15s ease;
  white-space: pre-wrap;
  word-break: break-word;
}
.trc-chunk-sub { margin-left: var(--trc-s5); }
/* The reading position is INFORMATION, not an alert. Brand red down the side of
   the paragraph you are listening to reads as an error; blue does not. */
.trc-chunk.is-playing {
  background: var(--trc-info-soft);
  border-left-color: var(--trc-info);
}
/* The moving word highlight while a วรรค is being read.
   ::highlight() paints a Range — no element, no DOM mutation — which is what
   lets the reading position move over a paragraph that already carries the
   reader's own .trc-ann highlights without disturbing a single one of them.
   See the header comment in reader.js. `mark.trc-reading` is kept because
   shell.js and older cached pages may still emit one. */
::highlight(trc-reading) {
  background-color: var(--trc-reading-mark);
  color: inherit;
}
mark.trc-reading {
  background: var(--trc-reading-mark); color: inherit;
  border-radius: 3px; padding: 0 1px;
}

/* annotation styles */
.trc-ann { border-radius: 2px; }
.trc-ann-highlight  { background: var(--trc-hl-yellow); }
.trc-ann-underline  { border-bottom: 2px solid var(--trc-accent); }
.trc-ann-bold       { font-weight: 700; }
.trc-ann-italic     { font-style: italic; }
.trc-ann.has-note   { cursor: pointer; box-shadow: inset 0 -2px 0 var(--trc-warning); }

.trc-ann[data-color="yellow"] { background: var(--trc-hl-yellow); }
.trc-ann[data-color="green"]  { background: var(--trc-hl-green); }
.trc-ann[data-color="blue"]   { background: var(--trc-hl-blue); }
.trc-ann[data-color="pink"]   { background: var(--trc-hl-pink); }
.trc-ann[data-color="purple"] { background: var(--trc-hl-purple); }
.trc-ann[data-color="orange"] { background: var(--trc-hl-orange); }

/* selection toolbar */
.trc-seltoolbar {
  position: absolute; z-index: var(--trc-z-pop);
  display: flex; gap: 2px; padding: 4px;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-pop);
}
.trc-swatches { display: flex; gap: 4px; padding: 0 4px; align-items: center; }
.trc-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: var(--trc-border-w) solid var(--trc-border-strong);
  cursor: pointer; padding: 0;
}

/* ============================== play bar =============================== */

/* The base player is bottom-docked: that is still how the FOLDER view uses it.
   The provision page moved its player above the statute text and overrides this
   with .trc-playbar-top in parts/reader.css. Both shapes are live; do not
   "simplify" one away without checking the other. */
.trc-playbar {
  position: sticky; bottom: 0; z-index: var(--trc-z-playbar);
  display: flex; align-items: center; gap: var(--trc-s3);
  min-height: var(--trc-playbar-h);
  padding: var(--trc-s2) var(--trc-s4);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-pop);
  margin-top: var(--trc-s5);
  flex-wrap: wrap;
}
.trc-playbar-controls { display: flex; align-items: center; gap: var(--trc-s1); }
.trc-playbar-meta { min-width: 0; flex: 1; font-size: 13px; color: var(--trc-text-2); }
.trc-playbar-meta strong { display: block; color: var(--trc-text); font-weight: 600; }
.trc-playbar-opts { display: flex; align-items: center; gap: var(--trc-s3); flex-wrap: wrap; font-size: 13px; }

.trc-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.trc-toggle input { accent-color: var(--trc-accent); }

.trc-progress {
  width: 100%; height: 3px; border-radius: 999px;
  background: var(--trc-border); overflow: hidden;
}
.trc-progress-bar { height: 100%; background: var(--trc-accent); width: 0; transition: width .2s linear; }

/* ============================ tree browser ============================= */

.trc-tree { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.trc-tree ul { list-style: none; margin: 0; padding-left: var(--trc-s4); }
.trc-tree li { margin: 1px 0; }
.trc-tree-row {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: var(--trc-radius-sm);
  color: var(--trc-text); text-decoration: none;
}
.trc-tree-row:hover { background: var(--trc-surface-hover); text-decoration: none; }
.trc-tree-row[aria-current="page"] { background: var(--trc-surface-active); color: var(--trc-text); font-weight: 600; }
.trc-tree-toggle {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--trc-text-3); font-size: 10px;
  transition: transform .12s ease;
}
.trc-tree-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.trc-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-tree-structural > .trc-tree-row { color: var(--trc-text-2); font-weight: 500; }

/* ============================== folders ================================ */

.trc-folder-item {
  display: flex; align-items: center; gap: var(--trc-s3);
  padding: var(--trc-s2) var(--trc-s3);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  margin-bottom: 6px;
  touch-action: none;
}
.trc-folder-item.is-dragging { opacity: .5; box-shadow: var(--trc-shadow-pop); }
.trc-folder-item.is-drop-target { border-color: var(--trc-accent); }
.trc-drag-handle {
  cursor: grab; color: var(--trc-text-3); padding: 4px;
  font-size: 15px; line-height: 1; user-select: none;
}
.trc-drag-handle:active { cursor: grabbing; }

/* ============================ flashcards =============================== */

.trc-card-face {
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius-lg);
  box-shadow: var(--trc-shadow);
  padding: var(--trc-s6) var(--trc-s5);
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: var(--trc-read-size); line-height: var(--trc-read-lh);
}
.trc-blank {
  display: inline-block; min-width: 4em;
  border-bottom: 2px solid var(--trc-text-3);
  cursor: pointer; text-align: center;
  color: var(--trc-text-3);
}
.trc-blank.is-revealed { border-bottom-color: var(--trc-success); color: var(--trc-success); font-weight: 600; }
.trc-blank.is-wrong    { border-bottom-color: var(--trc-danger);  color: var(--trc-danger); }

.trc-rating { display: flex; gap: var(--trc-s2); flex-wrap: wrap; justify-content: center; }
.trc-rating .trc-btn { flex: 1; min-width: 76px; }

/* ============================== dialogs ================================ */

.trc-sheet {
  position: fixed; z-index: var(--trc-z-modal);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  box-shadow: var(--trc-shadow-pop);
}
.trc-sheet-side {
  top: var(--trc-header-total); right: 0; bottom: 0; width: 340px;
  border-right: 0; border-top: 0; border-bottom: 0;
  padding: var(--trc-s4); overflow-y: auto;
  padding-right: calc(var(--trc-s4) + var(--trc-safe-right));
}
.trc-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--trc-z-modal) - 1);
  background: var(--trc-overlay);
}
.trc-modal {
  position: fixed; z-index: var(--trc-z-modal);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px - var(--trc-safe-top) - var(--trc-safe-bottom));
  overflow-y: auto;
  background: var(--trc-surface);
  border-radius: var(--trc-radius-lg);
  box-shadow: var(--trc-shadow-pop);
  padding: var(--trc-s5);
}

.trc-toast-host {
  position: fixed; left: 50%; bottom: calc(var(--trc-tabbar-total) + 16px);
  transform: translateX(-50%); z-index: var(--trc-z-modal);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.trc-toast {
  background: var(--trc-text); color: var(--trc-text-invert);
  padding: 8px 14px; border-radius: 999px; font-size: 13px;
  box-shadow: var(--trc-shadow-pop);
}

/* ============================== tab bar ================================ */

.trc-tabbar { display: none; }

/* ============================== diffs ================================== */

.trc-diff { font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.trc-diff ins { background: var(--trc-success-soft); color: var(--trc-success); text-decoration: none; }
.trc-diff del { background: var(--trc-danger-soft);  color: var(--trc-danger); }

/* ============================== mobile ================================= */

@media (max-width: 860px) {
  .trc-sidebar { display: none; }
  .trc-sidebar.is-open {
    display: block; position: fixed; inset: var(--trc-header-total) 0 0 0;
    width: 100%; height: auto; z-index: var(--trc-z-modal);
    background: var(--trc-surface);
    padding-bottom: calc(var(--trc-s4) + var(--trc-tabbar-total));
  }

  .trc-main {
    padding: var(--trc-s4)
             calc(var(--trc-s4) + var(--trc-safe-right))
             calc(var(--trc-tabbar-total) + 96px)
             calc(var(--trc-s4) + var(--trc-safe-left));
  }

  :root { --trc-read-size: 17px; }

  .trc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--trc-z-tabbar);
    display: flex; height: var(--trc-tabbar-total);
    background: var(--trc-surface);
    border-top: var(--trc-border-w) solid var(--trc-border);
    /* The home indicator sits inside the bar's background, under its labels. */
    padding: 0 var(--trc-safe-right) var(--trc-safe-bottom) var(--trc-safe-left);
  }
  .trc-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    font-size: 11px; color: var(--trc-text-2); text-decoration: none;
  }
  .trc-tabbar a[aria-current="page"] { color: var(--trc-accent); }
.trc-tabbar a[aria-current="page"] .trc-tabbar-icon { color: var(--trc-accent); }
  .trc-tabbar-icon { font-size: 17px; line-height: 1; }

  .trc-playbar {
    position: fixed;
    left: calc(8px + var(--trc-safe-left)); right: calc(8px + var(--trc-safe-right));
    bottom: calc(var(--trc-tabbar-total) + 8px);
    margin-top: 0;
  }
  .trc-playbar-opts { width: 100%; order: 3; }

  .trc-sheet-side {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 70vh; max-height: 70dvh;
    border-radius: var(--trc-radius-lg) var(--trc-radius-lg) 0 0;
    border: var(--trc-border-w) solid var(--trc-border);
    padding-bottom: calc(var(--trc-s4) + var(--trc-safe-bottom));
  }

  /*
   * The header is a fixed 44px bar, and at 390px its contents did not fit: the
   * wordmark broke across two lines, the tagline broke across two more, and
   * every nav label wrapped inside its own pill. Nothing here is optional at
   * this width — the tagline is the one thing that is, so it goes, and
   * everything else is told not to wrap.
   */
  .trc-brand-sub { display: none; }
  .trc-brand { flex: 0 0 auto; }
  .trc-brand-mark { white-space: nowrap; }

  .trc-header { gap: var(--trc-s2); }

  /* Signed in, this row holds five or six links. Rather than drop any of them
     — the tab bar covers three, but not notes, bookmarks or admin — let the row
     scroll sideways on its own, inside a header that keeps its height. */
  .trc-header-nav {
    flex: 0 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trc-header-nav::-webkit-scrollbar { display: none; }
  .trc-header-nav a { padding: 6px 8px; white-space: nowrap; }
}

@media (max-width: 420px) {
  .trc-provision-number { font-size: 22px; }
  .trc-main { padding-left: var(--trc-s3); padding-right: var(--trc-s3); }
}

@media print {
  .trc-header, .trc-sidebar, .trc-playbar, .trc-tabbar, .trc-seltoolbar { display: none !important; }
  .trc-main { padding: 0; }
  body { background: #fff; }
}

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