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

   /folders/{id} is the provision page's three-column reading surface applied to
   a playlist:

     ┌──────────────┬────────────────────────────┬──────────────┐
     │ folder items │ player on top, then the    │ notes for    │
     │              │ text of what is playing    │ that มาตรา   │
     └──────────────┴────────────────────────────┴──────────────┘

   The grid, the two asides and both breakpoints (1180px drops notes, 860px
   turns the list into a drawer) come from parts/sidebar.css and parts/notes.css
   via .trc-reader-layout / .trc-reader-side / .trc-reader-notes, so the two
   pages can never drift apart. Only what is specific to a FOLDER lives here.
   ========================================================================= */

/* ------------------------------------------------------------- page head */

/* Breadcrumb + title + actions sit above the grid, aligned to the same measure
   the grid uses, so nothing jumps as the columns drop out at each breakpoint. */
.trc-folder-head {
  max-width: 1480px;
  margin: 0 auto var(--trc-s3);
}
@media (max-width: 1180px) { .trc-folder-head { max-width: none; } }

/* ---------------------------------------------------------- the item list */

/* .trc-reader-side gives the sticky column, its own scroll and the ≤860px
   drawer. The list scrolls inside it; the page never grows with the folder. */
.trc-folder-side .trc-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--trc-s2);
}

/* Inside a 260px column the sticky bulk bar has nothing to stick to, and its
   shadow over a scrolling list reads as a second surface. Flatten it. */
.trc-folder-side .trc-bulkbar {
  position: static;
  margin: 0;
  border-radius: 0;
  border-width: 0 0 var(--trc-border-w);
  box-shadow: none;
}

.trc-folder-side .trc-folder-item {
  gap: var(--trc-s2);
  padding: var(--trc-s2);
  border-left: 3px solid transparent;
}
.trc-folder-side .trc-folder-item-link { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0; }
.trc-folder-side .trc-folder-item-link > span { flex: 1 1 100%; font-size: 11px; }

/* The row being read. Same blue as .trc-chunk.is-playing — the reading position
   is information, not an alert (tcs §13: brand red is deleted/overdue). */
.trc-folder-item.is-playing {
  background: var(--trc-info-soft);
  border-left-color: var(--trc-info);
}

/* "เอาออก" is housekeeping: it appears on hover/focus, so a 260px row is not
   two-thirds button. Touch has no hover, hence the coarse-pointer override. */
.trc-folder-side .trc-folder-item [data-item-remove] {
  opacity: 0;
  transition: opacity .12s ease;
}
.trc-folder-side .trc-folder-item:hover [data-item-remove],
.trc-folder-side .trc-folder-item:focus-within [data-item-remove] { opacity: 1; }
@media (pointer: coarse) {
  .trc-folder-side .trc-folder-item [data-item-remove] { opacity: 1; }
}

/* ------------------------------------------------------------- the stage */

/* The head of .trc-provision-head without its class: that class is the hook
   bookmarks.js and folders.js hang a provision-page button on, and a button
   bound to one มาตรา has no business on a stage that swaps them. */
.trc-stage-head {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s3);
  flex-wrap: wrap;
  margin: var(--trc-s4) 0 var(--trc-s4);
}
.trc-stage-head[hidden] { display: none; }
.trc-folder-stage .trc-provision-number { font-size: 22px; }

/* Same reading measure as .trc-reader (app.css); a separate class for the same
   reason the head has one. */
.trc-folder-stage [data-folder-reader] {
  font-size: var(--trc-read-size);
  line-height: var(--trc-read-lh);
  max-width: var(--trc-read-measure);
  min-height: 40vh;
}

/* The folder player carries five transport buttons and six options; without a
   floor the meta column collapses to the width of "พร้อมเล่น". */
.trc-folder-stage .trc-playbar-meta { flex: 1 1 160px; }

/* ------------------------------------------------------------ the notes */

.trc-folder-notes:empty { min-height: 0; }

/* Shown only when notes.js could not mount (it is absent, or offline without a
   local copy). Deliberately NOT .trc-note-card: that class is how notes.js
   decides it has already mounted. */
.trc-note-fallback { padding: var(--trc-s4); }
.trc-note-fallback h2 { font-size: 15px; font-weight: 600; margin: 0 0 var(--trc-s2); }
.trc-note-fallback p { margin: 0 0 var(--trc-s3); }

/* ==================================================================== */
/* "เพิ่มมาตรา" — the multi-select provision picker                       */
/* ==================================================================== */

.trc-pick { width: min(560px, calc(100vw - 32px)); }
.trc-pick h2 { font-size: 16px; font-weight: 600; margin: 0 0 var(--trc-s3); }

.trc-pick-controls {
  display: flex;
  gap: var(--trc-s2);
  margin-bottom: var(--trc-s2);
}
.trc-pick-controls .trc-select { flex: 0 1 auto; min-width: 0; }
.trc-pick-controls .trc-input { flex: 1 1 auto; min-width: 0; }

.trc-pick-tools {
  align-items: center;
  gap: var(--trc-s2);
  margin-bottom: var(--trc-s2);
}
.trc-pick-status { margin: 0; white-space: nowrap; }

/* 1,849 rows live in the DOM at once so Ctrl+F and a screen reader find every
   มาตรา. `content-visibility` lets the browser skip laying out the ones that
   are scrolled away, which is what makes that affordable. */
.trc-pick-list {
  max-height: 46vh;
  overflow-y: auto;
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  background: var(--trc-surface-sunk);
}

.trc-pick-row {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  padding: 5px var(--trc-s3);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.trc-pick-row[hidden] { display: none; }
.trc-pick-row + .trc-pick-row { border-top: var(--trc-border-w) solid var(--trc-border); }
.trc-pick-row:hover { background: var(--trc-surface); }
.trc-pick-row:has(input:checked) { background: var(--trc-accent-soft); }

.trc-pick-label { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.trc-pick-in { flex: 0 0 auto; }

/* Already in the folder: shown, ticked and locked, so the reader can see what
   they have without a second trip. */
.trc-pick-row.is-in { cursor: default; color: var(--trc-text-2); }

.trc-pick-actions {
  align-items: center;
  gap: var(--trc-s2);
  margin-top: var(--trc-s3);
}

@media (max-width: 560px) {
  .trc-pick-controls { flex-wrap: wrap; }
  .trc-pick-controls .trc-select { flex: 1 1 100%; }
  .trc-pick-list { max-height: 40vh; }
}