/* recite — tree. Tokens only: use --trc-* from app.css, never redefine :root. */

/* ===== selection =====
   The checkbox is a SIBLING of .trc-tree-row, not a child: the row is an <a>
   for a provision and a <button> for a branch, and a checkbox inside either is
   a bad target on touch. The <li> becomes the flex line instead, with the
   nested <ul> wrapping under it.

   The boxes are server-rendered but stay display:none until the reader turns
   SELECTION MODE on and tree.js marks the container `is-selectable` — an index
   of a code should not open looking like a form, and a reader with JavaScript
   off gets exactly the tree they had before. */

.trc-tree-check { display: none; }

.trc-lawtree.is-selectable .trc-tree-check {
  display: inline-block;
  flex: 0 0 auto;
}

/* A branch with nothing selectable below it keeps the alignment, silently. */
.trc-lawtree.is-selectable span.trc-tree-check {
  visibility: hidden;
  pointer-events: none;
}

.trc-lawtree.is-selectable .trc-tree li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.trc-lawtree.is-selectable .trc-tree li > .trc-tree-row {
  /* basis 0, not auto: the <li> wraps, and a row whose hypothetical size is its
     whole (nowrap, ellipsised) label would throw itself onto a second line the
     moment the label is long. Zero basis keeps it beside its checkbox always. */
  flex: 1 1 0;
  min-width: 0;
  /* A branch row is a <button> carrying width:100% so it fills the line when
     the <li> is a plain block. Here the <li> IS the line and the checkbox is
     sharing it, so 100% would push the row onto a second row. */
  width: auto;
}
.trc-lawtree.is-selectable .trc-tree li > ul {
  flex: 1 1 100%;
}

/* Matches how a selected row reads on /folders. */
.trc-lawtree.is-selectable li:has(> .trc-select-box:checked) > .trc-tree-row {
  background: var(--trc-accent-soft);
  border-radius: var(--trc-radius-sm);
}

@media (pointer: coarse) {
  .trc-lawtree.is-selectable .trc-select-box { width: 18px; height: 18px; }
}

/* How many provisions a branch checkbox would select. */
.trc-tree-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

/* ===== bulk bar =====
   Inserted before the tree card; user.css already makes .trc-bulkbar sticky. */

.trc-tree-bulkbar [data-bulk-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .trc-tree-bulkbar [data-bulk-count] { flex: 1 1 100%; }
  .trc-tree-bulkbar .trc-spacer { display: none; }
}

/* ===== law page layout =====
   Codes on the left, this code's tree on the right. The aside reuses
   sidebar.css's .trc-side-head / .trc-side-list / .trc-side-item so the two
   indexes on this site look like one thing; only the geometry lives here.

   There is no mobile drawer: the code list is a handful of rows, not 1,849,
   so below the breakpoint it simply sits above the tree — no toggle button,
   no backdrop, nothing to get out of sync. */

.trc-law-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--trc-s4);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.trc-law-main { min-width: 0; }

.trc-law-side {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-s4));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--trc-header-total) - var(--trc-s6));
  max-height: calc(100dvh - var(--trc-header-total) - var(--trc-s6));
  min-height: 0;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  overflow: hidden;
}

/* Provision counts sit right, tabular so the column reads as a column. */
.trc-lawnav-count {
  flex: 0 0 auto;
  padding-left: var(--trc-s2);
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

/* group_label from the home page ("กฎหมายลำดับรอง" and friends). */
.trc-lawnav-group {
  padding: var(--trc-s3) var(--trc-s2) var(--trc-s1);
  font-weight: 600;
}

/* ===== the row IS the toggle =====
   law.php renders a structural row with children as
   <button class="trc-tree-row trc-tree-branch">. Everything here undoes the UA
   button so it still reads as a row; nothing may make it look like a control,
   because the whole point is that the line you can see is the thing you press.
   Scoped to .trc-lawtree — the folders tree still uses app.css's caret button
   and its .trc-tree-toggle[aria-expanded] rule, which is left untouched. */

.trc-lawtree .trc-tree-branch {
  width: 100%;
  font: inherit;
  text-align: start;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* `font: inherit` and `color: inherit` above also wipe the structural row's own
   weight and tint, which app.css sets on .trc-tree-structural > .trc-tree-row.
   Say it again, at higher specificity, so a branch looks like its siblings. */
.trc-lawtree .trc-tree-structural > .trc-tree-branch {
  color: var(--trc-text-2);
  font-weight: 500;
}

/* Collapsed is the resting state on this page, so the caret is the primary
   affordance rather than a hint — 10px of --trc-text-3 was easy to miss. It is
   a decorative <span> now: the state lives on the row, so the row is what
   rotates it. */
.trc-lawtree .trc-tree-toggle {
  width: 20px;
  flex: 0 0 20px;
  font-size: var(--trc-fs-md);
  color: var(--trc-text-2);
}
.trc-lawtree .trc-tree-row:hover .trc-tree-toggle { color: var(--trc-text); }
.trc-lawtree .trc-tree-branch[aria-expanded="false"] .trc-tree-toggle { transform: rotate(-90deg); }

/* Keyboard users tab through 227 branch rows; the ring has to be visible. */
.trc-lawtree .trc-tree-row:focus-visible {
  outline: none;
  box-shadow: var(--trc-focus-ring);
}

/* 3px of padding around 13.5px of text is a ~24px line — fine with a mouse,
   not a thumb. Touch only, so the desktop outline stays dense. */
@media (pointer: coarse) {
  .trc-lawtree .trc-tree-row { min-height: 40px; }
}

/* user.css drops a row's label onto its own line below 720px, which is what
   lets a FOLDER row carry seven action buttons on a phone. A law-tree row is
   caret + name + count and wants one line; unscoped, that rule turned every
   branch into three stacked lines and made the whole index three times as
   tall. Corrected here rather than there — the folders tree still needs it. */
@media (max-width: 720px) {
  .trc-lawtree .trc-tree-row { flex-wrap: nowrap; }
  .trc-lawtree .trc-tree-row .trc-tree-label { flex: 1; }
}

/* Short rows, so the skip-rendering the sibling list needs only costs paint. */
.trc-lawnav-item { content-visibility: visible; }

@media (max-width: 900px) {
  .trc-law-wrap { display: block; max-width: none; }
  .trc-law-side {
    position: static;
    max-height: 42vh;
    margin-bottom: var(--trc-s4);
  }
}

/* ===== collapsible page header =====
   Collapsed, the law keeps a one-line bar: you always know which code you are
   in, and the tree starts near the top of the viewport instead of below a
   title, a count and two buttons. */

/* The WHOLE title line folds the header, not the caret alone — the same
   complaint the tree rows answered, on the same page: a 24px square holding a
   13px glyph beside a 28px heading read as a stray dot rather than a control.
   mountLawHead() listens on this bar; the button inside stays the ONE focusable
   control and keeps aria-expanded / aria-controls, so there is still a single
   tab stop with a single accessible name and the <h1> is still an <h1>. (An
   overlay would have been tidier, but an absolutely-positioned ::after inside a
   <button> is not hit-tested in Blink — clicks fell straight through to the
   heading. Hence the listener rather than a stretched pseudo-element.)

   The title stays SELECTABLE — it is the name of a code, and people cite it.
   mountLawHead() tells a drag from a click instead, so no user-select here. */
.trc-lawhead-bar {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  /* Pulled back out by the same amount, so the tint has room to breathe but
     the title still lines up with the meta line and the tree below it. */
  padding: var(--trc-s1) var(--trc-s2);
  margin-inline: calc(-1 * var(--trc-s2));
  border-radius: var(--trc-radius-sm);
  cursor: pointer;
}
.trc-lawhead-bar h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.trc-lawhead-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--trc-radius-sm);
  background: none;
  color: var(--trc-text-2);
  font-size: var(--trc-fs-xl);
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease;
}

/* Hover and focus belong to the bar, because the bar is what responds. A ring
   around the 28px caret would promise a target that is not the one you get. */
.trc-lawhead-bar:hover { background: var(--trc-surface-hover); }
.trc-lawhead-bar:hover .trc-lawhead-toggle { color: var(--trc-text); }
.trc-lawhead-toggle:focus-visible { outline: none; }
.trc-lawhead-bar:has(.trc-lawhead-toggle:focus-visible) { box-shadow: var(--trc-focus-ring); }

/* Same caret contract as the tree: one ▾ in the markup, CSS points it. */
.trc-lawhead-toggle[aria-expanded="false"] { transform: rotate(-90deg); }

.trc-lawhead-body { margin-top: var(--trc-s2); }
.trc-lawhead-body[hidden] { display: none; }

/* ===== the header's meta line and action row =====
   What used to be here: a breadcrumb, then a count on its own line, then two
   identical outline buttons — three blocks of the same weight and a third of a
   phone screen before the tree started. Now it is two lines with real
   hierarchy: everything factual is one dot-separated --trc-text-2 line, and one
   action row where filled > outline > ghost says which action is which. */

.trc-lawhead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--trc-s1) var(--trc-s2);
  margin-bottom: var(--trc-s2);
  font-size: var(--trc-fs-sm);
  color: var(--trc-text-2);
}
/* The breadcrumb is a <nav> for a reason (it is still the page's path), but on
   this line it is one run of text among several, not a block of its own. */
.trc-lawhead-meta .trc-breadcrumb {
  margin-bottom: 0;
  gap: var(--trc-s1);
  font-size: inherit;
}
.trc-lawhead-dot { color: var(--trc-text-3); }

.trc-lawhead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--trc-s2);
}

/* Downloaded reads as success, and reader.css's .is-downloaded only recolours
   the text and border — which is invisible on a filled accent button. Restate
   it as the soft-tinted state the design language uses everywhere else. */
.trc-lawhead-actions .trc-btn.is-downloaded {
  background: var(--trc-success-soft);
  border-color: var(--trc-success);
  color: var(--trc-success);
}

/* Selection mode, on. Scoped to this button: /folders owns its own equivalent
   and the two must be free to differ. */
.trc-lawselect-toggle[aria-pressed="true"] {
  background: var(--trc-accent-soft);
  border-color: var(--trc-accent);
  color: var(--trc-accent);
}

/* ที่มา leaves the site. It is a ghost link, not a peer of the download, and
   the ↗ is drawn here so no text node of the button pattern is disturbed —
   .trc-btn's own gap spaces it, so there is no invented value. */
.trc-lawhead-source { color: var(--trc-text-2); }
.trc-lawhead-source::after { content: "↗"; font-size: var(--trc-fs-xs); }
.trc-lawhead-source:hover { color: var(--trc-text); }

/* One line, and the title drops to the size of a section label — so the caret
   steps down with it rather than outweighing the words it belongs to. */
.trc-lawhead.is-collapsed { margin-bottom: var(--trc-s3); }
.trc-lawhead.is-collapsed .trc-lawhead-toggle { font-size: var(--trc-fs-lg); }
.trc-lawhead.is-collapsed .trc-lawhead-bar h1 {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media print {
  .trc-law-side,
  .trc-lawhead-toggle { display: none !important; }
  .trc-law-wrap { display: block; }
  .trc-lawhead-body[hidden] { display: block !important; }
}