/* =========================================================================
   user.css — Phase 5–6: annotations, notes, bookmarks, folders.

   Owned by the user-data phase. app.css already carries .trc-ann, .trc-swatch,
   .trc-seltoolbar, .trc-folder-item, .trc-drag-handle, .trc-sheet-side and the
   highlight palette; everything here is what those need on top of it.
   Tokens only — never redefine :root, never edit app.css.
   ========================================================================= */

/* ------------------------------------------------------------- visibility */

/* .trc-seltoolbar and .trc-sheet set display, which beats the UA's [hidden]. */
.trc-seltoolbar[hidden],
.trc-sheet[hidden],
.trc-ann-pop[hidden],
.trc-ann-pop-stack[hidden] { display: none !important; }

/* ------------------------------------------------------------- page heads */

.trc-page-title { font-size: 22px; font-weight: 700; margin: 0 0 var(--trc-s4); }
.trc-page-head  { margin-bottom: var(--trc-s3); gap: var(--trc-s2); }
.trc-page-head .trc-page-title { margin-bottom: 0; }

/* ------------------------------------------------------------ annotations */

.trc-seltoolbar .trc-btn { white-space: nowrap; }
.trc-swatch:hover  { transform: scale(1.12); }
.trc-swatch:focus-visible { outline: 2px solid var(--trc-accent); outline-offset: 1px; }

/* The style row is the same widget in the toolbar and in the editor, so a
   reader learns it once. Only its wrapping differs. */
.trc-ann-styles { display: flex; gap: 2px; flex-wrap: wrap; }
.trc-ann-styles-inline { flex-wrap: nowrap; }
.trc-ann-styles .trc-btn.is-active {
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
  border-color: var(--trc-danger-border);
}

/* The chosen colour, in both places. */
.trc-swatch.is-active {
  border-color: var(--trc-text);
  box-shadow: 0 0 0 2px var(--trc-surface), 0 0 0 3px var(--trc-text);
}

/* ------------------------------------------------ a highlight is a control */

/* The reader had no way of telling that clicking a highlight did anything.
   Pointer + a hover/focus ring says "press me" without decorating the statute. */
.trc-ann {
  cursor: pointer;
  transition: box-shadow .12s ease, outline-color .12s ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.trc-ann:hover { outline-color: var(--trc-border-hover); }
.trc-ann:focus-visible { outline-color: var(--trc-accent); }

/* trc:note-locate — notes.js asked us to show where this range lives. */
@keyframes trc-ann-flash {
  0%, 100% { outline-color: transparent; }
  15%, 65% { outline-color: var(--trc-accent); }
}
.trc-ann.is-flash { animation: trc-ann-flash 1.5s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .trc-ann.is-flash { animation: none; outline-color: var(--trc-accent); }
}

/* ---------------------------------------------------- the annotation editor */

.trc-ann-pop {
  position: absolute;
  z-index: var(--trc-z-pop);
  display: flex;
  flex-direction: column;
  gap: var(--trc-s2);
  width: 304px;
  max-width: calc(100vw - 16px);
  padding: var(--trc-s3);
  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-ann-pop-stack {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding-bottom: var(--trc-s2);
  border-bottom: var(--trc-border-w) solid var(--trc-border);
}
.trc-ann-pop-chip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-ann-pop-chip.is-active { background: var(--trc-accent-soft); color: var(--trc-accent); }

.trc-ann-pop-quote {
  margin: 0;
  padding: var(--trc-s2) var(--trc-s3);
  max-height: 5.4em;
  overflow-y: auto;
  background: var(--trc-surface-sunk);
  border-left: 3px solid var(--trc-warning);
  border-radius: var(--trc-radius-sm);
  font-size: 14px; line-height: 1.7;
}

.trc-ann-pop-row { display: flex; align-items: center; gap: var(--trc-s2); flex-wrap: wrap; }

.trc-ann-pop-note { min-height: 72px; font-size: 14px; line-height: 1.7; resize: vertical; }

.trc-ann-pop-foot { display: flex; align-items: center; gap: var(--trc-s2); }
.trc-ann-pop-status { flex: 1; min-height: 1.2em; }

/* "ต้องตรวจ" — annotations the amended text no longer anchors. */
.trc-ann-review { border-left: 3px solid var(--trc-warning); }
.trc-ann-review-title { font-size: 15px; font-weight: 600; margin: 0 0 var(--trc-s1); }
.trc-ann-review-list { list-style: none; margin: var(--trc-s3) 0 0; padding: 0; }
.trc-ann-review-list li {
  display: flex; align-items: flex-start; gap: var(--trc-s2);
  padding: var(--trc-s2) 0;
  border-top: var(--trc-border-w) solid var(--trc-border);
}
.trc-ann-review-quote {
  flex: 1; margin: 0; font-size: 14px; line-height: 1.7;
  color: var(--trc-text-2);
}

/* ------------------------------------------------------ provision extras */

.trc-bookmark-toggle.is-on { color: var(--trc-warning); border-color: var(--trc-warning); }

.trc-note-card { margin-top: var(--trc-s5); }
.trc-note-title { font-size: 15px; font-weight: 600; margin: 0 0 var(--trc-s2); }
.trc-note-input { min-height: 120px; resize: vertical; }
.trc-note-status { min-height: 1.2em; margin: var(--trc-s1) 0 0; }

.trc-anon-nudge {
  display: flex; align-items: center; gap: var(--trc-s3); flex-wrap: wrap;
  margin-bottom: var(--trc-s4);
}
.trc-anon-nudge .trc-btn { margin-left: auto; }

/* -------------------------------------------------------------- bookmarks */

.trc-bm-group + .trc-bm-group { margin-top: var(--trc-s3); }
.trc-bm-law { font-size: 15px; font-weight: 600; margin: 0 0 var(--trc-s2); }
.trc-bm-law a { color: inherit; }
.trc-bm-list { list-style: none; margin: 0; padding: 0; }
.trc-bm-item {
  display: flex; align-items: center; gap: var(--trc-s3);
  padding: var(--trc-s2) 0;
  border-top: var(--trc-border-w) solid var(--trc-border);
}
.trc-bm-item > a { font-weight: 500; }
.trc-bm-item .trc-bm-remove { margin-left: auto; }

/* ---------------------------------------------------------------- folders */

/* THE TWO KINDS OF ROW, AND HOW YOU TELL THEM APART
   =================================================
   /folders shows two different things in one tree: FOLDERS, which contain, and
   มาตรา, which are contained. Until this section existed both were "a caret you
   could barely see, then some text", and the only difference between them was
   the link colour — which on a list where every folder is red and every มาตรา
   is black reads as "some of these are links", not as "these are containers and
   those are their contents".

   Three signals carry the difference now, and each one works on its own:

     1. SHAPE  — a FILLED folder glyph against an OUTLINED document glyph. Both
        are CSS masks (--trc-mask below), so all three renderers — folders.php,
        folders.js and shell.js — emit the same inert <span> and no SVG. The
        folder glyph opens when its branch does, off `li.is-collapsed`.
     2. WEIGHT — a folder name is 600 at full contrast; a มาตรา is 500 with its
        law in --trc-text-3 beside it.
     3. RAIL   — every มาตรา hangs off a 2px rule at the left edge of its
        folder's contents, so "inside" is visible without counting indents.

   The old ▾ is gone. A 13px text triangle at the left edge of a row carrying
   seven buttons rendered as a speck — the "dot" — and a speck is not a control.
   The caret is a masked chevron in a box you can hit, and it ROTATES: the glyph
   never swaps, which is the same bargain tree.js struck for the law tree. */

/* ------------------------------------------------------------- the glyphs */

/* One mechanism for every icon on this page: a mask over `currentColor`, so an
   icon inherits its row's colour and its :hover state for free, and adding one
   is adding a --trc-mask. These are deliberately NOT in :root — parts/*.css
   never touches app.css's token block. */
.trc-tree-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--trc-mask) center / 16px 16px no-repeat;
  mask: var(--trc-mask) center / 16px 16px no-repeat;
}

.trc-icon-folder {
  color: var(--trc-accent);
  --trc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1.25 4.1c0-1.02.83-1.85 1.85-1.85h2.42c.45 0 .88.16 1.22.46l1.06.92h5.1c1.02 0 1.85.83 1.85 1.85v6.46c0 1.02-.83 1.85-1.85 1.85H3.1a1.85 1.85 0 0 1-1.85-1.85V4.1Z'/%3E%3C/svg%3E");
}

/* Open folder, for a branch that is showing its contents. */
.trc-folder-node:not(.is-collapsed) > .trc-tree-row > .trc-icon-folder {
  --trc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1.25 4.1c0-1.02.83-1.85 1.85-1.85h2.42c.45 0 .88.16 1.22.46l1.06.92h5.1c1.02 0 1.85.83 1.85 1.85v1.02H3.3a1.85 1.85 0 0 0-1.78 1.35L1.25 9.2V4.1Z'/%3E%3Cpath fill='%23000' d='M3.3 7.75h11.1c.79 0 1.36.75 1.15 1.51l-1.06 3.85a1.85 1.85 0 0 1-1.78 1.36H2.35c-.79 0-1.36-.75-1.15-1.51l1.32-4.8c.1-.35.42-.6.78-.6Z'/%3E%3C/svg%3E");
}

/* A มาตรา. Outline against the folder's fill, and grey against its red: the
   two glyphs must be distinguishable at a glance AND with colour removed. */
.trc-icon-doc {
  color: var(--trc-text-3);
  --trc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.45' stroke-linejoin='round'%3E%3Cpath d='M3.75 2.4h4.6l3.9 3.9v7.3h-8.5z'/%3E%3Cpath d='M8.1 2.6v3.9h3.9'/%3E%3Cpath d='M6 9.4h4M6 11.6h2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- the folder row */

/* Every action on a folder row is visible, on every row, at every width.
   They used to fade in from opacity:0 on hover, with a ≤860px override to
   rescue them for touch: on a phone that made ▶ and แฟลชการ์ด the only actions
   a nested folder appeared to have, and on a desktop it hid เปลี่ยนชื่อ / ย้าย /
   ลบ behind a gesture nothing announced. Visible chrome is cheaper than a
   discoverable gesture, and this row is a menu, not a document. */
.trc-folder-node > .trc-tree-row {
  gap: var(--trc-s2);
  padding: 5px 6px;
  /* The row's own surface folds the branch under it (folders.js). */
  cursor: pointer;
}

/* A folder is a heading for the things under it, so it is set like one. */
.trc-folder-node > .trc-tree-row > .trc-tree-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--trc-text);
}
.trc-folder-node > .trc-tree-row:hover > .trc-tree-label { color: var(--trc-accent); }

/* Top-level folders are the outline of the page; a hairline between them stops
   three shallow trees from reading as one long list. */
[data-folders-page] > .trc-tree > .trc-folder-node + .trc-folder-node {
  margin-top: var(--trc-s2);
  padding-top: var(--trc-s2);
  border-top: var(--trc-border-w) solid var(--trc-border);
}

/* One flex item, so the seven controls wrap together instead of one at a
   time — and can be sent to their own line on a narrow screen. */
.trc-folder-actions {
  display: flex;
  align-items: center;
  gap: var(--trc-s1);
  flex-wrap: wrap;
  /* Shrinkable, so on a cramped desktop row the group wraps inside itself
     instead of pushing the row into a horizontal overflow. */
  flex: 0 1 auto;
}

/* The name is only as wide as the name.

   app.css gives .trc-tree-label `flex: 1`, which on a folder row stretched a
   six-character name across 442px of empty line — so "click the row to open
   it" landed on the link and navigated to /folders/{id} instead. The link
   shrinks to its text now and the .trc-spacer beside it (folders.js) takes the
   slack, which makes the middle of the row genuinely bare surface: the row's
   own toggle target, exactly as the law tree behaves. min-width + ellipsis
   keep a long folder name from pushing the actions off the line. */
.trc-folder-node > .trc-tree-row .trc-tree-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A folder name reads the same whether the folder is open or shut.

   parts/reader.css carries `li.is-collapsed > .trc-tree-row .trc-tree-label
   { color: var(--trc-text-2) }` for the reader sidebar, where a collapsed
   branch is dimmed on purpose. Folder rows only started matching it when they
   learned to collapse — and since collapsed is their DEFAULT, every folder
   name on /folders turned grey and stopped reading as something you can click.
   This puts the colour back for folder rows only; reader.css is right about
   its own tree and is left alone. Do not delete this as redundant: it is the
   only thing standing between a folder name and disabled-looking text. */
li.trc-folder-node.is-collapsed > .trc-tree-row > a.trc-tree-label {
  color: var(--trc-text);
}

/* ------------------------------------------------------------- the caret */

/* Columns the row reserves before the name. The contents of a folder indent
   one --trc-s4 step past that, so a มาตรา starts to the RIGHT of the name of
   the folder it belongs to, at every level and on a coarse pointer.
   folders.js adds the per-level indent on top. */
.trc-folder-node {
  --trc-folder-grip: 18px;
  --trc-folder-caret: 22px;
  --trc-folder-child: calc(6px + var(--trc-folder-grip) + var(--trc-folder-caret)
                           + var(--trc-s2) + var(--trc-s4));
}

.trc-folder-toggle {
  width: var(--trc-folder-caret);
  height: 22px;
  flex: 0 0 var(--trc-folder-caret);
  border-radius: var(--trc-radius-xs);
  color: var(--trc-text-2);
}
/* app.css rotates the whole .trc-tree-toggle by -90° when collapsed, which is
   right for a ▾ glyph. Ours points RIGHT to start with, so the box must stay
   still and the chevron inside it turn — otherwise a collapsed folder points
   up. Specificity (0,3,0) beats app.css's (0,2,0); no !important needed. */
.trc-folder-node > .trc-tree-row > .trc-folder-toggle,
.trc-folder-node > .trc-tree-row > .trc-folder-toggle[aria-expanded="false"] {
  transform: none;
}
.trc-folder-toggle::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  transition: transform .14s ease;
  --trc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.25 10.75 8 6 12.75' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--trc-mask) center / 12px 12px no-repeat;
  mask: var(--trc-mask) center / 12px 12px no-repeat;
}
.trc-folder-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.trc-folder-toggle:hover { background: var(--trc-surface-active); color: var(--trc-text); }
.trc-folder-node > .trc-tree-row:hover .trc-folder-toggle,
.trc-folder-node > .trc-tree-row:focus-within .trc-folder-toggle {
  color: var(--trc-text);
}

/* ------------------------------------------------------------- the grip */

/* Drag-to-reorder needs a target that says so. It is a real <button>, not a
   <span>: the row's bare-surface click handler skips a, button, input, label,
   select and textarea, so a <span> handle would fold the branch every time a
   drag ended on it — and a button is focusable, which is what makes the
   keyboard alternative (↑ ↓ ← →, folders.js) reachable at all.

   Hidden until the row is hovered or focused on a fine pointer, always present
   on a coarse one, and it holds its column either way so nothing shifts. */
.trc-tree-grip {
  flex: 0 0 var(--trc-folder-grip, 18px);
  width: var(--trc-folder-grip, 18px);
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--trc-text-3);
  cursor: grab;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
  /* On /folders this is the one element that opts out of browser scrolling, so
     a drag starts on the handle and a swipe anywhere else on the row still
     scrolls the page. (/folders/{id} puts touch-action:none on the whole
     .trc-folder-item in app.css; that predates this and is left alone.) */
  touch-action: none;
}
.trc-tree-grip::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  --trc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23000' x='2.5' y='4' width='11' height='1.7' rx='.85'/%3E%3Crect fill='%23000' x='2.5' y='7.15' width='11' height='1.7' rx='.85'/%3E%3Crect fill='%23000' x='2.5' y='10.3' width='11' height='1.7' rx='.85'/%3E%3C/svg%3E");
  -webkit-mask: var(--trc-mask) center / 12px 12px no-repeat;
  mask: var(--trc-mask) center / 12px 12px no-repeat;
}
/* .trc-folder-item is the /folders/{id} side-list row; it carries the same grip
   and must reveal it the same way. */
.trc-tree-row:hover > .trc-tree-grip,
.trc-tree-row:focus-within > .trc-tree-grip,
.trc-folder-item:hover > .trc-tree-grip,
.trc-folder-item:focus-within > .trc-tree-grip { opacity: 1; }
.trc-tree-grip:focus-visible { opacity: 1; box-shadow: var(--trc-focus-ring); border-radius: var(--trc-radius-xs); }
.trc-tree-grip:hover { color: var(--trc-text); }
.trc-tree-grip:active { cursor: grabbing; }
@media (pointer: coarse) {
  /* .trc-folder-item is the /folders/{id} row. It is not a .trc-folder-node, so
     it never saw the variable and its grip stayed 18px wide while growing to
     40px tall — a sliver to hit with a thumb. */
  .trc-folder-item { --trc-folder-grip: 30px; }
  .trc-folder-node {
    --trc-folder-grip: 30px;
    --trc-folder-caret: 40px;
    /* NOT the fine-pointer arithmetic. Finger-sized grip + caret + icon + gaps
       come to ~100px, which on a 390px screen leaves a มาตรา row a quarter of
       the line to say "มาตรา ๑๒๙๙ ป.พ.พ." in. One step past the grip is enough
       to read as "inside", and it is what fits. */
    --trc-folder-child: calc(6px + var(--trc-folder-grip) + var(--trc-s2));
  }
  .trc-folder-toggle { height: 40px; }
  .trc-tree-grip { opacity: 1; height: 40px; }
}

/* ------------------------------------------------------- a folder's contents */

/* The branch: this folder's own มาตรา (lazily loaded on first expand), then
   its sub-folders. The มาตรา are indented by an inline
   `calc(level*16px + var(--trc-folder-child))` (folders.js); the sub-folders
   keep the tree's own `.trc-tree ul` step from app.css. */
.trc-folder-leaves:empty { display: none; }

/* The rail. It is a border on each row rather than a line drawn behind the
   list because the list's own left edge is an inline calc() the stylesheet
   cannot see — a ::before would have to duplicate that arithmetic and would
   drift the first time the indent changed. */
.trc-folder-leaf,
.trc-folder-leaf-note {
  border-left: 2px solid var(--trc-border);
  border-radius: 0 var(--trc-radius-sm) var(--trc-radius-sm) 0;
}
.trc-folder-leaf {
  padding: 3px 6px 3px 8px;
  gap: var(--trc-s2);
}
.trc-folder-leaf:hover { border-left-color: var(--trc-accent); }
.trc-folder-leaf-link {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s2);
  font-weight: 500;
  color: var(--trc-text);
}
.trc-folder-leaf-link > span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* The law is context, not the name of the thing. */
.trc-folder-leaf-sub { color: var(--trc-text-3); font-size: 11px; font-weight: 400; }
.trc-folder-leaf-note { margin: 0; padding: 4px 6px 4px 8px; }

/* "เอาออก" is housekeeping: present, but not competing with the มาตรา. */
.trc-folder-leaf [data-branch-remove] { opacity: 0; transition: opacity .12s ease; }
.trc-folder-leaf:hover [data-branch-remove],
.trc-folder-leaf:focus-within [data-branch-remove] { opacity: 1; }
@media (pointer: coarse) {
  .trc-folder-leaf [data-branch-remove] { opacity: 1; }
}

/* The count, as a pill rather than a run of grey text that a Thai reader has
   to parse to learn a folder is empty. Empty means the count has not been
   resolved yet, and an empty pill is worse than none. */
.trc-tree-row .trc-folder-count {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 7px;
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: 999px;
  background: var(--trc-surface-sunk);
  color: var(--trc-text-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}
.trc-tree-row .trc-folder-count:empty { display: none; }

/* --------------------------------------------------------- drag and drop */

/* While a drag is live the page must not select text under the pointer, and
   every row must stop answering hover — the pointer is carrying something, it
   is not browsing. folders.js puts this on <html>. */
.trc-tree-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.trc-tree-dragging .trc-tree-row:hover { background: none; }

/* What is being carried. Kept at .4 rather than hidden so the reader can see
   where it came from and undo by dropping it back. */
.trc-folder-node.is-dragging > .trc-tree-row,
.trc-folder-leaf.is-dragging { opacity: .4; }

/* Dropping ONTO a folder — "put this inside" — is a different answer from
   dropping BETWEEN two rows, so it gets a different mark: the row fills, where
   an insertion is a line. */
.trc-tree-row.is-drop-into {
  background: var(--trc-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--trc-accent);
  border-radius: var(--trc-radius-sm);
}

/* Dropping BETWEEN two rows. A real element in the flow, not an outline on a
   neighbour, so it lands in exactly the gap the drop will use. */
.trc-drop-line {
  height: 2px;
  margin: -1px 0;
  border-radius: 2px;
  background: var(--trc-accent);
  pointer-events: none;
}

/* The thing under the pointer. Fixed, so it is never clipped by the card's
   overflow, and pointer-events:none so hit-testing sees through it. */
.trc-drag-ghost {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  padding: 4px 10px;
  border-radius: var(--trc-radius-sm);
  background: var(--trc-surface);
  box-shadow: var(--trc-shadow-pop);
  font-size: 13px;
  font-weight: 600;
  color: var(--trc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* The tree's own floor: a strip under the last folder that means "top level".
   Without it there is no way to drag a nested folder back out to the root —
   every pixel of the tree belongs to some folder. It only exists mid-drag. */
.trc-tree-root-drop {
  display: none;
  margin-top: var(--trc-s2);
  padding: var(--trc-s2);
  border: 1px dashed var(--trc-border-strong);
  border-radius: var(--trc-radius-sm);
  color: var(--trc-text-3);
  font-size: 12px;
  text-align: center;
}
.trc-tree-dragging .trc-tree-root-drop { display: block; }
.trc-tree-root-drop.is-drop-into {
  border-style: solid;
  border-color: var(--trc-accent);
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
}

/* Selection mode and dragging are two gestures for the same rows; folders.js
   refuses to start a drag while selection is on, and the grip says so. */
.is-selectable .trc-tree-grip { opacity: .3; cursor: default; }

.trc-folder-item-link { display: flex; align-items: baseline; gap: var(--trc-s2); min-width: 0; }
.trc-folder-item-link > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trc-select-sm { min-height: 28px; padding: 3px 24px 3px 8px; font-size: 13px; }

/* -------------------------------------------------- add-to-folder picker */

.trc-addto-title { font-size: 16px; font-weight: 600; margin: 0 0 var(--trc-s3); }
.trc-addto-list { max-height: 44vh; overflow-y: auto; margin-bottom: var(--trc-s3); }
.trc-addto-row {
  display: flex; width: 100%; padding: var(--trc-s2) 0;
  border-bottom: var(--trc-border-w) solid var(--trc-border);
}
.trc-addto-actions { margin-top: var(--trc-s3); gap: var(--trc-s2); }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .trc-seltoolbar { max-width: calc(100vw - 16px); flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* Anchoring a 300px panel to a word on a phone puts half of it off-screen,
     so the editor becomes a bottom sheet. annotate.js adds .is-sheet and stops
     writing inline top/left at the same breakpoint. */
  .trc-ann-pop.is-sheet {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    max-height: 72vh; overflow-y: auto;
    border-radius: var(--trc-radius-lg) var(--trc-radius-lg) 0 0;
    padding-bottom: calc(var(--trc-s4) + env(safe-area-inset-bottom, 0px));
  }
  .trc-ann-pop.is-sheet .trc-ann-pop-note { min-height: 96px; }

  /* Fingers, not a mouse. */
  .trc-ann-pop .trc-swatch { width: 26px; height: 26px; }
}

/* ===== folders list: play + flashcard controls per row ===== */

.trc-folder-play.is-playing {
  background: var(--trc-accent);
  color: var(--trc-text-invert);
  border-color: var(--trc-accent);
}

.trc-folder-drill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.trc-folder-nowplaying {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-s2));
  z-index: 2;
  margin-bottom: var(--trc-s3);
  padding: var(--trc-s2) var(--trc-s3);
  background: var(--trc-accent-soft);
  border: var(--trc-border-w) solid var(--trc-accent);
  border-radius: var(--trc-radius);
  font-size: 13px;
}

/* The row is dense on desktop; on a phone let the controls wrap under the name. */
@media (max-width: 720px) {
  .trc-tree-row { flex-wrap: wrap; row-gap: 4px; }
  /* Unchanged, and deliberately global: this is what puts a LAW tree row's
     label on its own line. Folder rows opt out of it in the folders block
     above (.trc-folder-node > .trc-tree-row .trc-tree-label), and folder
     leaves opt out again below. */
  .trc-tree-row .trc-tree-label { flex: 1 1 100%; }

  /* A folder row keeps grip + caret + icon + name + count on the first line —
     the name is the thing you are looking for — and drops the whole action
     group onto the second one, which is what makes seven always-visible
     buttons survive a 390px screen. */
  .trc-folder-node > .trc-tree-row .trc-folder-actions { flex: 1 1 100%; }

  /* A มาตรา row is a name and one ghost button; it never needs two lines. */
  .trc-folder-leaf .trc-tree-label { flex: 1 1 auto; }

  /* On a phone the law title goes under the number rather than pushing the
     number into an ellipsis — but the row itself stays on ONE line. Letting it
     wrap sent "เอาออก" to a line of its own on exactly the rows with a longer
     number (มาตรา ๓ ฉ, มาตรา ๓ เบญจ), so a list of มาตรา came out ragged. */
  .trc-folder-leaf { flex-wrap: nowrap; }
  .trc-folder-leaf .trc-tree-label { flex: 1 1 auto; min-width: 0; }
  .trc-folder-leaf [data-branch-remove] { flex: 0 0 auto; }
  .trc-folder-leaf-link { flex-wrap: wrap; row-gap: 0; }
  .trc-folder-leaf-link > .trc-folder-leaf-sub { flex: 1 1 100%; }
}

/* ===== multiple selection + bulk actions ===== */

/* Selection mode. `เลือก` puts .is-selectable on the list; only then do the ROW
   checkboxes exist visually. A list that opens with a checkbox in front of
   every line reads like a form, and on a phone it is mostly something to hit by
   accident — the law tree hides its boxes the same way (parts/tree.css).

   Only the two row checkboxes carry .trc-row-check. The provision picker and
   the add-to-folder picker use .trc-select-box as well and their boxes ARE the
   interface, so they must never be caught by this. */
.trc-row-check { display: none; }
.is-selectable .trc-row-check { display: inline-block; }

/* The switch itself, while it is on. Same treatment as an active style button
   in the annotation toolbar, so "pressed" reads the same everywhere. */
[data-select-mode][aria-pressed="true"] {
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
  border-color: var(--trc-danger-border);
}

.trc-select-box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  accent-color: var(--trc-accent);
  cursor: pointer;
}

.trc-bulkbar {
  position: sticky;
  top: calc(var(--trc-header-total) + var(--trc-s2));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  flex-wrap: wrap;
  margin-bottom: var(--trc-s3);
  padding: var(--trc-s2) var(--trc-s3);
  background: var(--trc-surface);
  border: var(--trc-border-w) solid var(--trc-accent);
  border-radius: var(--trc-radius);
  box-shadow: var(--trc-shadow-pop);
  font-size: 13px;
}

.trc-folder-item:has(.trc-select-box:checked),
.trc-tree-row:has(.trc-select-box:checked) {
  background: var(--trc-accent-soft);
  border-radius: var(--trc-radius-sm);
}

@media (max-width: 640px) {
  .trc-bulkbar { gap: 6px; }
  .trc-bulkbar .trc-btn { flex: 1 1 auto; }
}