/* ===========================================================================
   split.css — โครงเหตุผล, the Statute Splitter Engine's view of a provision.

   Owns: `.trc-viewswitch*`, `.trc-split*`, and the one rule that parks
   reader.js's per-วรรค ▶ layer while the paragraphs it measures are hidden.
   Everything else on the provision page belongs to reader.css / sidebar.css.

   §7 of docs/engine/ENGINE-SPEC-v2.md is MANDATORY AND EXACT, and this file is
   where three quarters of it is actually enforced:

     · จุดกลม `•` at EVERY level. One `::before` rule, shared by every level —
       there is deliberately no way to give a level its own symbol. Never a
       dash, never a square, never a numeral, and `list-style: none` so the
       browser cannot add one of its own either.
     · The level is carried by INDENTATION ONLY — `--trc-split-indent`, ~0.8cm,
       per nested list.
     · HANGING INDENT: a line that wraps aligns with the TEXT, not with the
       bullet. That is the `padding-left` on the `<li>` plus the absolutely
       positioned bullet, and it is the whole reason the bullet is not simply
       `list-style-type: disc`.
     · Our Thai addresses (`n`) are never rendered — enforced in
       `Renderer::html()`, which never prints them.
   =========================================================================== */

:root {
  /* ~0.8cm per level (§7), measured BULLET TO BULLET — the same thing a word
     processor calls the list indent, which is where the number came from. A
     CSS cm is a fixed 37.8px; it must not scale with the font, or how deep an
     item sits would stop matching the printed book. */
  --trc-split-indent: 0.8cm;
  /* Bullet column: enough for `•` plus a gap, in reading-font em so it tracks
     the statute text rather than the UI. */
  --trc-split-bullet: 1.15em;
}

/* --------------------------------------------------------- the view switch */

.trc-viewswitch {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 var(--trc-s4);
  padding: 2px;
  background: var(--trc-surface-sunk);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
}

.trc-viewswitch-opt {
  display: inline-flex;
  align-items: center;
  min-height: var(--trc-h-input);
  padding: 0 var(--trc-s3);
  font-size: var(--trc-fs-md);
  line-height: 1;
  color: var(--trc-text-2);
  text-decoration: none;
  border-radius: var(--trc-radius-sm);
  transition: background .12s ease, color .12s ease;
}

/* `text-decoration: none` is repeated here on purpose: app.css underlines every
   `a:hover`, and that rule outranks the one on `.trc-viewswitch-opt`. Underlined,
   the two options read as links in a row of buttons instead of as one segmented
   control — which is exactly what they stopped being when they moved into the
   play bar. */
.trc-viewswitch-opt:hover {
  color: var(--trc-text);
  background: var(--trc-surface-hover);
  text-decoration: none;
}
.trc-viewswitch-opt:focus-visible { outline: none; box-shadow: var(--trc-focus-ring); }

.trc-viewswitch-opt.is-on {
  color: var(--trc-text);
  background: var(--trc-surface);
  box-shadow: var(--trc-shadow);
  font-weight: 600;
}

/* ---- the switch inside the play bar ---------------------------------------
   THIS IS WHERE THE SWITCH LIVES, and it is not a cosmetic choice. It used to
   sit in the page between the queue panel and the statute, which made it
   reachable only at the top of the มาตรา: three screens into a long provision
   the one control that changes how the text reads had scrolled away. The play
   bar (`.trc-playbar-top`, sticky under the site header at a higher z-index) is
   the one strip of this page that is reachable at every scroll position, so the
   reader can change view whenever they want to.

   It leads `.trc-playbar-opts`. The bar is chrome, not reading surface, so the
   options step down to the compact control height the rest of the row uses
   rather than the full --trc-h-input the standalone switch had. */

.trc-playbar .trc-viewswitch {
  margin: 0;
  flex: 0 0 auto;
}

.trc-playbar .trc-viewswitch-opt {
  min-height: var(--trc-h-input-sm);
  padding: 0 var(--trc-s2);
  font-size: var(--trc-fs-md);
}

/* ------------------------------------------------------------- the tree */

.trc-split-view {
  margin: 0 0 var(--trc-s4);
  font-size: var(--trc-read-size);
  /* Tighter than the running text on purpose: the split already gives the eye
     a line per idea, so the extra leading of prose only spreads it thin. */
  line-height: 1.75;
  word-break: break-word;
}

/* The label the engine consumed off the front of the chunk — `มาตรา ๘๐`,
   `(๑)`. Bold, per §7's symbol table. */
.trc-split-head {
  margin: 0 0 var(--trc-s2);
  font-weight: 700;
}

.trc-split,
.trc-split-sub {
  list-style: none;   /* the bullet is ours; the browser must not add one */
  margin: 0;
  padding: 0;
}

/* Level 2, 3, 4 — indentation, and nothing else, says how deep you are.
   A nested list already starts at its parent item's TEXT, one bullet column in,
   so that column is subtracted here: the step from one level's bullet to the
   next's is then exactly --trc-split-indent, which is the 0.8cm §7 asks for —
   not 0.8cm plus a bullet, which is what nesting gives you for free and which
   pushes a level-4 item off a phone. */
.trc-split-sub { margin-left: calc(var(--trc-split-indent) - var(--trc-split-bullet)); }

.trc-split li,
.trc-split-sub li {
  position: relative;
  /* Hanging indent: the text starts here and every wrapped line comes back
     here, so a long อนุมาตรา reads as one block instead of stepping under its
     own bullet. */
  padding-left: var(--trc-split-bullet);
  margin: 0 0 var(--trc-s2);
}

/* THE bullet rule. One symbol, every level. */
.trc-split li::before,
.trc-split-sub li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--trc-text-3);
  /* The bullet is furniture, not statute: it must never be picked up by a
     copy of the provision text. */
  user-select: none;
  -webkit-user-select: none;
}

/* A nested list opens right under its parent's text, not after a blank line. */
.trc-split li > .trc-split-sub { margin-top: var(--trc-s2); }

/* An อนุมาตรา keeps the statute's OWN marker, verbatim and in bold (§7 and
   ENGINE-CONTRACT R6). `อนุฯ` is the label; `(๑)` is the statute's. */
.trc-split-anu {
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------ view interaction */

/* reader.js's per-วรรค ▶ controls measure the paragraphs they sit beside. In
   split view those paragraphs are `hidden`, so every control would stack at
   the top of the article. Park the layer instead — pressing play still reads
   the whole provision, and switching back to ตัวบท brings the controls back
   (the article's ResizeObserver repositions them). */
.trc-reader[data-reader-view="split"] .trc-chunk-play-layer { display: none; }

/* ------------------------------------------------------------- phone */

/* The indent stays 0.8cm here on purpose: measured bullet-to-bullet it is 30px,
   so even the deepest item the engine may emit (level 4 — seven chunks in the
   whole corpus) sits ~90px in and still leaves ~270px of measure at 380px. §7's
   number is the same number on a phone as on paper. Only the type steps down,
   to the 16px iOS needs to not zoom a tap-focused page. */
@media (max-width: 480px) {
  .trc-split-view { font-size: 16px; }

  /* At this width `.trc-playbar-opts` stops wrapping and scrolls sideways
     (parts/reader.css), and a control that scrolls off the right edge is a
     control nobody finds — that is the whole reason คิว and เพิ่งดู lead the
     row. The view switch must be reachable at EVERY scroll position of the bar
     as well as of the page, so it is pinned to the left edge of the scrollport
     and the rest of the row travels underneath it.

     The box shadow is not decoration: it paints the --trc-s3 flex gap in the
     bar's own surface colour, so a button sliding past does not appear in the
     gap between the switch and คิว. */
  .trc-playbar-opts > .trc-viewswitch {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: var(--trc-s3) 0 0 0 var(--trc-surface);
  }
}