/* ═══════════════════════════════════════════════════════════════════════
   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; cursor: pointer;
  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; }
.dx-row:hover { background: color-mix(in srgb, var(--row-bg, #F6F1E6) 90%, #000);
  border-left-color: color-mix(in srgb, var(--nav-gold, #B8832A) 70%, 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; }

.dx-check { width: 15px; height: 15px; 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; }
.dx-pvw { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 21px;
  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; } }