/* recite — reader styles. Owned by the reader phase. Tokens live in app.css :root; use them, do not redefine them. */

/* ============================== home =================================== */

.trc-hero { margin-bottom: var(--trc-s5); }
.trc-hero h1 { font-size: 30px; margin-bottom: var(--trc-s2); }
.trc-hero p { max-width: 44em; }

.trc-lawlist { list-style: none; margin: 0; padding: 0; }
.trc-lawlist-sub { margin-top: var(--trc-s2); }

.trc-lawrow {
  display: flex; align-items: center; gap: var(--trc-s3); flex-wrap: wrap;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow);
  padding: var(--trc-s3) var(--trc-s4);
  margin-bottom: var(--trc-s2);
}
.trc-lawrow-main { flex: 1; min-width: 220px; }
.trc-lawrow-title { font-size: 15px; font-weight: 600; color: var(--trc-text); }
.trc-lawrow-title:hover { color: var(--trc-accent); }
.trc-lawrow-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.trc-lawrow-actions { flex: 0 0 auto; }
.trc-lawrow-sub { background: var(--trc-surface-sunk); box-shadow: none; }

.trc-lawgroup { margin: var(--trc-s3) 0 var(--trc-s4) var(--trc-s5); }
.trc-lawgroup-label { margin-bottom: var(--trc-s2); font-weight: 600; }

.trc-btn.is-downloaded { color: var(--trc-success); border-color: var(--trc-success); }

.trc-installcard { margin-bottom: var(--trc-s4); border-color: var(--trc-accent); }
.trc-installcard strong { display: block; margin-bottom: var(--trc-s2); }
.trc-installcard p { margin-bottom: var(--trc-s2); }
/* Same shape as .trc-voicehelp-steps — both are "do this on your device" lists. */
.trc-install-steps {
  margin: var(--trc-s1) 0 var(--trc-s3); padding-left: var(--trc-s5);
  color: var(--trc-text-2); font-size: 13px;
}
.trc-install-steps li { margin: 2px 0; }
.trc-installcard-actions { display: flex; flex-wrap: wrap; gap: var(--trc-s2); }

.trc-downloaded { margin: var(--trc-s4) 0; }
.trc-downloaded-list { list-style: none; margin: var(--trc-s2) 0 0; padding: 0; }
.trc-downloaded-list li {
  display: flex; align-items: center; gap: var(--trc-s2);
  padding: 4px 0;
}
.trc-downloaded-list li .trc-btn { margin-left: auto; }

/* ============================ law page ================================= */

.trc-lawhead { margin-bottom: var(--trc-s4); }
.trc-lawhead h1 { margin-bottom: var(--trc-s1); }
.trc-lawhead p { margin-bottom: var(--trc-s3); }

.trc-lawtree { max-height: none; }
.trc-lawtree .trc-tree ul[hidden] { display: none; }
.trc-tree-provision > .trc-tree-row { padding-left: 2px; }
li.is-collapsed > .trc-tree-row .trc-tree-label { color: var(--trc-text-2); }

/* ========================== provision page ============================= */

.trc-provision { position: relative; min-width: 0; }


.trc-body-reader .trc-main { padding-bottom: var(--trc-s8); }

/* ---- layout: statute text, then the law's other provisions beside it ---
   sidebar.css owns `.trc-reader-layout .trc-reader-wrap` and wins on the SSR
   page. This unscoped copy is the fallback for the offline shell, whose <main>
   is offline.html's plain .trc-main — same geometry, same 860px breakpoint, so
   the two can never disagree. */
.trc-reader-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--trc-s5);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .trc-reader-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the player, now ABOVE the text ---------------------------------- */

/* app.css sticks .trc-playbar to the BOTTOM (it used to live under the text).
   The top variant overrides that in both directions: it hangs under the site
   header so the controls stay reachable while the statute scrolls past. */
.trc-playbar-top {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-s2));
  bottom: auto;
  margin: var(--trc-s4) 0 var(--trc-s3);
  row-gap: var(--trc-s2);
}

.trc-playbar-top .trc-playbar-meta { flex: 1 1 140px; }

/* ☰ มาตราอื่น sits with the transport controls, because the play bar is the
   one strip of this page that is reachable at every scroll position. Above
   860px the aside is a plain column and there is nothing to toggle, so
   sidebar.css keeps `.trc-side-toggle` display:none and this only sizes it. */
.trc-playbar-controls .trc-side-toggle { font-size: 15px; }

.trc-queue-count {
  display: inline-block; min-width: 18px; padding: 0 5px;
  border-radius: 999px; text-align: center;
  background: var(--trc-accent); color: var(--trc-text-invert);
  font-size: 11px; font-weight: 600; line-height: 16px;
}
.trc-queue-count.is-empty { background: var(--trc-border-strong); color: var(--trc-text-2); }

/* ---- เพิ่งดู ----------------------------------------------------------
   The same sheet as the queue (it carries .trc-queue-panel too), holding the
   other half of the split: คิว is what you chose, เพิ่งดู is where you have
   been. They dock to the same corner on a phone, so queue.js and recent.js
   keep only one of them open at a time. */

.trc-recent-items { list-style: none; margin: 0; padding: 0; }

.trc-recent-item {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  padding: 2px var(--trc-s3);
}
.trc-recent-item + .trc-recent-item {
  border-top: var(--trc-border-w) solid var(--trc-border);
}

/* The row itself is the link — the whole strip is the tap target, not just the
   few characters of "มาตรา ๔๒๐". */
.trc-recent-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--trc-s2) 0;
  color: inherit;
  text-decoration: none;
}
.trc-recent-open:hover .trc-recent-label { color: var(--trc-accent); }

.trc-recent-label {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trc-recent-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the queue panel -------------------------------------------------- */

/* Sticks directly under the player. The player's real height is measured by
   queue.js into --trc-playbar-real-h, because the option row wraps and a
   hard-coded token would let the two overlap at some widths. */
.trc-queue-panel {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-playbar-real-h, var(--trc-playbar-h)) + var(--trc-s3));
  z-index: calc(var(--trc-z-playbar) - 1);
  margin: 0 0 var(--trc-s5);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-pop);
  overflow: hidden;
}
.trc-queue-panel[hidden] { display: none; }

.trc-queue-head {
  display: flex; align-items: center; gap: var(--trc-s2);
  padding: var(--trc-s2) var(--trc-s3);
  border-bottom: var(--trc-border-w) solid var(--trc-border);
  background: var(--trc-surface-sunk);
}

.trc-queue-body { max-height: 46vh; overflow-y: auto; padding: var(--trc-s2) 0; }

.trc-queue-section + .trc-queue-section { border-top: var(--trc-border-w) solid var(--trc-border); }
.trc-queue-heading {
  margin: 0; padding: var(--trc-s2) var(--trc-s3) var(--trc-s1);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--trc-text-3);
}

.trc-queue-items { list-style: none; margin: 0; padding: 0; }

.trc-queue-item {
  display: flex; align-items: center; gap: var(--trc-s1);
  padding: 2px var(--trc-s2) 2px var(--trc-s1);
  background: var(--trc-surface);
}
.trc-queue-item + .trc-queue-item { border-top: var(--trc-border-w) solid var(--trc-border); }
/* Matches .trc-chunk.is-playing: the reading position is information, not an
   alert. Brand red is reserved for deleted/overdue (tcs §13). */
.trc-queue-item.is-playing { background: var(--trc-info-soft); }
.trc-queue-item.is-dragging {
  opacity: .9; box-shadow: var(--trc-shadow-pop); border-radius: var(--trc-radius-sm);
}

/* Pointer-events drag: the browser must not steal the gesture for scrolling. */
.trc-queue-handle {
  touch-action: none;
  flex: 0 0 auto; width: 26px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0;
}
.trc-queue-handle-fixed { color: var(--trc-accent); cursor: default; }

.trc-queue-jump {
  flex: 1; min-width: 0; text-align: start;
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--trc-s2) var(--trc-s1);
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.trc-queue-jump:hover .trc-queue-label { color: var(--trc-accent); }
.trc-queue-label {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trc-queue-sub { font-size: 11px; }
.trc-queue-remove { flex: 0 0 auto; }

.trc-queue-empty { margin: 0; padding: var(--trc-s4) var(--trc-s3); font-size: 13px; }

.trc-select-inline {
  width: auto; min-height: 28px; padding: 2px 6px; font-size: 13px;
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius-sm);
}

.trc-playbar .trc-progress { order: 4; }

/* ---- voice diagnostics: never fail silently -------------------------- */

.trc-voicenote {
  order: 5; width: 100%;
  padding-top: var(--trc-s2);
  border-top: var(--trc-border-w) solid var(--trc-border);
  font-size: 13px;
}
.trc-voicehelp strong { display: block; margin-bottom: var(--trc-s1); color: var(--trc-danger); }
.trc-voicehelp-steps {
  margin: var(--trc-s1) 0; padding-left: var(--trc-s5);
  color: var(--trc-text-2); font-size: 13px;
}
.trc-voicehelp-steps li { margin: 2px 0; }

/* ============================== search ================================= */

.trc-searchform {
  display: flex; gap: var(--trc-s2); margin-bottom: var(--trc-s4);
}
.trc-searchform .trc-input { flex: 1; }

/* ---- ประมวล + เลขมาตรา + ข้อความ, one card ---------------------------
   Two rows on purpose. The first is "which มาตรา" — a picker and a number,
   the pair a reader arrives with. The second is "which words". They wrap to a
   single column on a phone in the order they are written, so the number field
   is reachable without scrolling past a full-width search box. */

.trc-findform {
  display: flex;
  flex-direction: column;
  gap: var(--trc-s2);
  margin-bottom: var(--trc-s5);
  padding: var(--trc-s3);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
}

.trc-findform-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--trc-s2);
}

.trc-findform-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trc-findform-label { line-height: 1.2; }

/* The picker takes what it needs for a code's short title; the number is a
   handful of characters and should not claim a third of the row for them. */
.trc-findform-law    { flex: 2 1 190px; }
.trc-findform-number { flex: 1 1 130px; }
.trc-findform-q      { flex: 1 1 240px; }

.trc-findform-field .trc-input,
.trc-findform-field .trc-select { width: 100%; }

.trc-findform-go { flex: 0 0 auto; min-height: 38px; }

@media (max-width: 520px) {
  /* Below this the two fields in a row are both too narrow to read.
     `flex-basis` is measured along the MAIN axis, so the moment the row turns
     into a column those 190px / 130px / 240px stop being widths and become
     HEIGHTS — every field grew into a tall empty box with an input at the
     bottom of it. Reset the basis with the direction that gave it meaning. */
  .trc-findform-row { flex-direction: column; align-items: stretch; }
  .trc-findform-law,
  .trc-findform-number,
  .trc-findform-q { flex: 0 0 auto; }
  .trc-findform-go { width: 100%; }
}

.trc-results { list-style: none; margin: 0; padding: 0; }
.trc-result {
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  padding: var(--trc-s3) var(--trc-s4);
  margin-bottom: var(--trc-s2);
}
.trc-result-title { font-weight: 600; font-size: 15px; }
.trc-result-law { margin-bottom: var(--trc-s2); }
.trc-result-snippet {
  margin: 0; font-size: 15px; line-height: 1.8;
  color: var(--trc-text); word-break: break-word;
}
.trc-result-snippet mark {
  background: var(--trc-hl-yellow); color: inherit;
  border-radius: 3px; padding: 0 2px;
}

/* ============================== shell ================================== */

.trc-body-offline .trc-main { padding-top: var(--trc-s5); }

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

@media (max-width: 860px) {
  .trc-lawrow { align-items: flex-start; }
  .trc-lawrow-actions { width: 100%; }
  .trc-lawrow-actions .trc-btn { width: 100%; }
  .trc-lawgroup { margin-left: var(--trc-s3); }
  .trc-hero h1 { font-size: 24px; }

  /* app.css pins .trc-playbar above the tab bar, from when the player lived
     under the text. The top player must not go anywhere near the tab bar —
     it docks under the site header instead, where the thumb finds it while
     reading and where it can never cover the bottom navigation. */
  .trc-playbar-top {
    position: sticky;
    left: auto; right: auto;
    top: var(--trc-header-total);
    bottom: auto;
    margin: 0 0 var(--trc-s3);
    padding: var(--trc-s2) var(--trc-s3);
    gap: var(--trc-s2);
    border-radius: var(--trc-radius);
  }
  .trc-playbar-top .trc-playbar-controls { gap: 2px; }
  .trc-playbar-top .trc-btn-icon { width: 34px; height: 34px; }
  .trc-playbar-top .trc-playbar-meta { flex: 1 1 100px; font-size: 12px; }

  /* 380px has to fit ความเร็ว, ซ้ำ, อ่านเลขมาตรา, วนซ้ำ and the queue button:
     let the row scroll sideways rather than stack four lines tall. */
  .trc-playbar-top .trc-playbar-opts {
    order: 3; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: var(--trc-s3);
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trc-playbar-top .trc-playbar-opts::-webkit-scrollbar { display: none; }
  .trc-playbar-top .trc-playbar-opts > * { flex: 0 0 auto; }

  /* A bottom sheet that stops above the tab bar. Anchoring it to the viewport
     bottom (rather than sticking it under the player) is the only way it can
     never cover the tab navigation, whatever the scroll position. */
  .trc-queue-panel {
    position: fixed;
    left: var(--trc-s2); right: var(--trc-s2);
    top: auto;
    bottom: calc(var(--trc-tabbar-h) + var(--trc-s2) + env(safe-area-inset-bottom));
    z-index: var(--trc-z-modal);
    margin: 0;
    max-height: 58vh;
    border-radius: var(--trc-radius-lg);
  }
  .trc-queue-body { max-height: calc(58vh - 44px); }
  .trc-queue-item { padding-block: 1px; }
  .trc-queue-handle { width: 32px; height: 34px; }
}

/* ===== provenance: import footnote + source link =====
   Quieter than the statute text on purpose. A note about which act amended a
   provision is useful context, but it is not the law and must never read as
   though it were. */
.trc-provenance {
  margin: var(--trc-s5) 0 0;
  padding: var(--trc-s3) var(--trc-s4);
  border-left: 3px solid var(--trc-border-strong);
  background: var(--trc-surface-sunk);
  border-radius: 0 var(--trc-radius) var(--trc-radius) 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--trc-text-2);
  max-width: var(--trc-read-measure);
}
.trc-provenance p { margin: 0; }
.trc-provenance p + p { margin-top: var(--trc-s2); }
.trc-provenance-note { white-space: pre-wrap; word-break: break-word; }
.trc-provenance-src { font-size: 12px; color: var(--trc-text-3); }

/* ===== per-วรรค play control =====
   The controls live in an overlay layer that is a SIBLING of the paragraphs,
   never inside them: a `.trc-chunk` must contain the statutory text and nothing
   else, or annotate.js — which rebuilds each paragraph from its text and
   character offsets — flattens the button into a literal character and shifts
   every annotation offset. */

.trc-reader {
  position: relative;
  /* Room in the gutter for the per-วรรค controls. Without it they sit at a
     negative offset and overlap the index column on the left. */
  padding-left: 30px;
}

.trc-chunk-play-layer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  pointer-events: none;
}

.trc-chunk-play {
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: var(--trc-text-3);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}

.trc-reader:hover .trc-chunk-play,
.trc-chunk-play:focus-visible { opacity: 1; }

.trc-chunk-play:hover { color: var(--trc-accent); border-color: var(--trc-accent); }

/* No hover on touch: the control must simply be there. */
@media (hover: none) { .trc-chunk-play { opacity: 1; } }

/* Narrow screens have no margin to sit in. */
@media (max-width: 900px) {
  .trc-chunk-play-layer { display: none; }
  .trc-reader { padding-left: 0; }
}