/* ═══════════════════════════════════════════════════════════════════════
   darx_listrow.css — THE shared platform list-row component (2026-06-25)

   ONE row object for EVERY document/item list surface (library · registry ·
   section portals · sitemap · bookmarks · glossary). Extracted from the
   registry's `.f5_row` (the chosen "rich row" model) and re-pointed from
   docr.php's local --reg-*/--fs-* aliases to the PLATFORM tokens, so it
   renders identically wherever it is loaded:
     font  → --font-mono            ink   → --text-color
     gold  → --nav-gold             fill  → --row-bg
     sizes → --ui-fs-title/label/micro (the one scale ladder)

   Render rows with darx_doc_row() (api/darx_listrow.php) so the MARKUP is
   identical too. Three lines: title / filename·date·size / id·status·chips·eye.
   Parts are optional — pass opts to show/hide checkbox, chips, preview, etc.
   ═══════════════════════════════════════════════════════════════════════ */

/* local aliases → platform tokens (so the rules below read like docr's, but
   resolve from the single platform source) */
.dx-list, .dx-list * { --_ink: var(--text-color, #2A2620); }
.dx-list {
  --_font:  var(--font-mono, ui-monospace, monospace);
  --_dim:   color-mix(in srgb, var(--text-color, #2A2620) 66%, transparent);
  --_faint: color-mix(in srgb, var(--text-color, #2A2620) 48%, transparent);
  --_gold:  var(--nav-gold, var(--gold, #B8832A));
  display: flex; flex-direction: column; gap: 4px;
}

/* ── THE ROW ──────────────────────────────────────────────────────────── */
.dx-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px;
  padding: 5px 12px 6px 10px; border-radius: 6px;
  background: var(--row-bg, var(--surface-color, #F6F1E6)); color: var(--text-color, #2A2620);
  border: 1px solid color-mix(in srgb, var(--text-color, #2A2620) 16%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--text-color, #2A2620) 34%, transparent);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }

/* ── NO ROW HOVER. AT ALL. (2026-07-26, user) ─────────────────────────────
   Reported: "rows get highlighted on mouse over, so you don't see effects on
   mouse over the links contained in the row — the GLOSSARY page works right."

   Cause: the row hover repainted the SURFACE its child controls sit on, and
   those controls signal with TRANSLUCENT fills (domains' .dom-svc hover is
   `color-mix(… --ink-on-light 18%, transparent)`). A translucent fill over a
   backdrop that just darkened by the same order of magnitude is a delta you
   cannot see. .glx_row on the glossary page has no hover at all — which is
   exactly why that page reads correctly: the affordance always belongs to the
   thing the pointer is actually on.

   My first pass kept the hover for rows that ARE controls (<a> = bookmarks,
   <label> = registry) and only stood it down over child links. The owner
   rejected that: the bookmarks rows still highlighted, so it still read as
   broken. The rule is now unconditional and there are no exceptions to
   remember — a row NEVER repaints on hover, whatever element it is.

   The affordance that remains is the one that costs no pixels: `cursor:pointer`
   on the rows that really are clickable. It stays OFF plain containers (the
   domains rows merely HOLD links), because a pointer cursor over dead space
   advertises a click that does not exist.

   SELECTION is not hover — the :checked rule below is state, and it stays. */
/* Rows that really do something on click. `label.dx-row` is GONE — the
   renderer no longer emits a <label> wrapper (HTML §4.10.4), so a check row
   is a <div> whose click is handled by darx_listrow_js(). */
a.dx-row, div.dx-row:has(.dx-check) { cursor: pointer; }

/* ONE underline per row, not three (2026-07-26, user: "how many different on
   each one of these rows??"). darx_doc_row() wraps the ENTIRE row in a single
   <a>, so the UA's default `text-decoration: underline` inherited down to every
   descendant — the title, the filename AND the date all drew their own line, so
   a row that is one link advertised three. Killing it at the wrapper leaves the
   row clean at rest; the hover rule below then draws exactly one underline, on
   the title, which is the thing the row actually opens. */
a.dx-row { text-decoration: none; }

/* ── THE EFFECT MOVES ONTO THE THING YOU POINT AT ────────────────────────────
   Killing the surface repaint was only half the job — it left rows with NO
   feedback at all. The glossary was never "no effects"; it is "the effect
   belongs to the control, not the card". So every clickable part of a row now
   answers for itself, and none of them touch the row's fill:

   · TITLE — on rows that ARE one link (<a>, bookmarks) or one toggle (<label>,
     registry), the title is what you are actually activating, so it takes the
     gold + underline. Ink and underline only: no box, no fill, nothing that can
     sit under a sibling control and wash out its own hover.
   · FILENAME — the dim second line lifts to full ink so it stops reading as
     disabled while you are on the row.
   · CHIPS that are links, and the eye button, keep their own hover (below) and
     are UNAFFECTED by the row, because the row no longer paints anything. */
/* ONLY the <a> row gets the link vocabulary. A CHECK row is deliberately
   excluded: clicking its title selects the record, it does not navigate, and
   an underline there would promise a link that does not exist (SC 3.2.4 —
   one identification per function). Its affordance is the pointer cursor and
   the checkbox itself. */
a.dx-row:hover .dx-title {
  color: var(--nav-gold, #B8832A);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a.dx-row:hover .dx-file { color: var(--text-color, #2A2620); }
/* chips that are real links (entity/section filters) — edge + ink, no fill flip */
.dx-row a.dx-chip { transition: border-color .12s ease, color .12s ease; }
.dx-row a.dx-chip:hover {
  color: var(--text-color, #2A2620);
  border-color: color-mix(in srgb, var(--nav-gold, #B8832A) 85%, transparent); }
.dx-row:has(.dx-check:checked) {
  background: color-mix(in srgb, var(--nav-gold, #B8832A) 12%, var(--row-bg, #F6F1E6));
  border-left-color: var(--nav-gold, #B8832A);
  box-shadow: inset 0 0 0 1px var(--nav-gold, #B8832A); }

/* TXT corner marker */
.dx-row[data-ext="txt"]::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 11px solid var(--f5-txt-mark, #3E6FA8); border-left: 11px solid transparent;
  border-top-right-radius: 6px; pointer-events: none; }

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum), AA — a pointer target must be at
   least 24×24 CSS px. This checkbox was 15×15: it failed on both axes, and
   html{zoom:.75} paints it smaller still. The BOX stays visually 15px (bigger
   would shout on a dense row); the TARGET is grown to 24×24 with padding, which
   is exactly how the criterion is meant to be met — the hit area is what is
   measured, not the ink. box-sizing keeps the drawn control at its old size. */
.dx-check { width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  padding: 4.5px; box-sizing: border-box; background-clip: content-box;
  accent-color: var(--nav-gold, #B8832A); cursor: pointer; flex: 0 0 auto; }

/* cells */
.dx-c-doc  { flex: 1 1 200px; min-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-c-doc .dx-title { font-family: var(--font-mono); font-size: var(--ui-fs-title); font-weight: 700;
  line-height: 1.2; color: var(--text-color); text-transform: uppercase; letter-spacing: .01em; }
.dx-file  { font-family: var(--font-mono); font-size: var(--ui-fs-label);
  color: color-mix(in srgb, var(--text-color) 48%, transparent); }
.dx-c-uid  { font-family: var(--font-mono); font-size: var(--ui-fs-label); font-weight: 600; letter-spacing: .05em;
  color: color-mix(in srgb, var(--text-color) 74%, transparent); }
.dx-c-stat { font-family: var(--font-mono); font-size: var(--ui-fs-label); letter-spacing: .06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--text-color) 66%, transparent); }
.dx-c-size, .dx-c-upd { font-family: var(--font-mono); font-size: var(--ui-fs-label);
  color: color-mix(in srgb, var(--text-color) 48%, transparent); white-space: nowrap; }

/* 3-line reflow via flex order + two zero-height breaks */
.dx-row .dx-check  { order: 1; flex: 0 0 auto; }
.dx-row .dx-c-doc  { order: 2; flex: 1 1 auto; }                         /* line 1 — TITLE */
.dx-break, .dx-brk2 { flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; }
.dx-break { order: 3; }
.dx-row .dx-file   { order: 4; margin-left: 25px; flex: 0 1 auto; min-width: 0;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* line 2 — filename */
.dx-row .dx-c-upd  { order: 4; flex: 0 0 auto; white-space: nowrap; margin-left: auto; }  /* line 2 — date */
.dx-row .dx-c-size { order: 5; flex: 0 0 auto; white-space: nowrap; }                     /* line 2 — size */
.dx-brk2 { order: 6; }
.dx-row .dx-c-uid  { order: 7; margin-left: 25px; flex: 0 0 auto; white-space: nowrap; }  /* line 3 — id */
.dx-row .dx-c-stat { order: 8; flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.dx-row .dx-c-ent  { order: 9;  flex: 0 0 auto; }
.dx-row .dx-c-sec  { order: 10; flex: 0 0 auto; }
.dx-row .dx-c-dep  { order: 11; flex: 0 0 auto; }
.dx-row .dx-c-pvw  { order: 13; flex: 0 0 auto; }                                        /* eye — far right */

/* ── FACET / TAG CHIPS — set = solid · scanned = dashed · none = dash ── */
.dx-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--ui-fs-micro);
  font-weight: 600; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; }
.dx-chip-set  { background: color-mix(in srgb, var(--text-color) 12%, var(--row-bg, #F6F1E6));
  color: color-mix(in srgb, var(--text-color) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 28%, transparent); }
.dx-chip-scan { background: transparent; color: color-mix(in srgb, var(--text-color) 66%, transparent);
  border: 1px dashed color-mix(in srgb, var(--text-color) 38%, transparent); }
.dx-chip-none { color: color-mix(in srgb, var(--text-color) 48%, transparent); border: none; padding: 2px 4px; }
.dx-chip-more { font-size: var(--ui-fs-micro); font-weight: 400; margin-left: 4px; opacity: .7; }

/* ── PREVIEW (eye) ── */
.dx-c-pvw { display: flex; justify-content: center; }
/* SC 2.5.8 again — this was 28×21, failing on height by 3px. */
.dx-pvw { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; min-height: 24px;
  border-radius: 4px; cursor: pointer; color: var(--row-bg, #EFE7D6);
  background: color-mix(in srgb, var(--text-color) 82%, #000);
  border: 1px solid color-mix(in srgb, var(--text-color) 90%, #000); transition: background .12s ease, color .12s ease; }
.dx-pvw:hover { background: var(--nav-gold, #B8832A); color: var(--row-bg, #1C1205); }
.dx-pvw svg { display: block; }

/* ── STATUS DOTS ── */
.dx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  vertical-align: 1px; background: #9B9489; }
.dx-dot-live { background: #2F6B3A; } .dx-dot-review { background: #B07818; }
.dx-dot-archived { background: #6E6A60; } .dx-dot-unpublished { background: #A8432F; }
.dx-dot-design_review { background: #6B4F9E; } .dx-dot-content_update { background: #2F7E8A; }

/* ── EMPTY STATE ── */
.dx-empty { padding: 28px 16px; text-align: center; border-radius: 6px; background: var(--row-bg, #F6F1E6);
  color: color-mix(in srgb, var(--text-color) 66%, transparent); font-family: var(--font-mono); font-style: italic;
  font-size: var(--ui-fs-value); border: 1px solid color-mix(in srgb, var(--text-color) 22%, transparent); }

/* Narrow viewports: let the title wrap */
@media (max-width: 700px) { .dx-row .dx-c-uid { flex-basis: auto; } .dx-row .dx-c-doc { white-space: normal; } }

/* ── VISUALLY-HIDDEN COLUMN HEADER ROW (WCAG 2.1 SC 1.3.1, A) ─────────────
   These lists are tabular data drawn with flex/grid, so nothing associated a
   value with its column: "19 kB" was announced with no idea it was a size.
   darx_list_open() now emits a role="row" of role="columnheader" cells; this
   rule takes it off the screen without taking it out of the accessibility
   tree. `display:none` / `visibility:hidden` would remove it from BOTH, which
   is why the clip pattern is used instead of either. */
.dx-list > .dx-head-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── FOCUS (WCAG 2.1 SC 2.4.7 Focus Visible, AA) ──────────────────────────
   Keyboard users get the same "where am I" the mouse gets from the title
   hover. Two rules, because the row and its inner controls are different
   targets and must not share one outline. */
.dx-row:focus-visible,
.dx-row :focus-visible {
  outline: 2px solid var(--nav-gold, #B8832A); outline-offset: 1px; border-radius: 4px;
}