/* ============================================================================
   LUSKI ARCADE — Dossier (7th arcade component)

   The v2.1 sitewide identity: a dark, dense INDEX (evidence-board list, one
   row per item) opens a warm parchment CASE FILE (the detail panel) on the
   right. Ticking two or more rows' compare checkboxes turns the file panel
   into a side-by-side comparison spread instead of a single open file.

   Extracted from the approved design concept (collection-c.html) into a
   shared stylesheet rather than copy-pasted per page -- the class names
   (dos-index, dos-row, dos-file, dos-specs, dos-compare-table, ...) were
   already generic (not car-specific) in the original concept, so this file
   is usable as-is for cars, models, guides, or anything else that wants the
   index+file pattern. Every page still writes its OWN small JS (which rows
   exist, what spec fields to show, what filters apply) -- this file only
   owns the shared visual language, the same split bay.js/bay.css and
   paginate.js/paginate.css already use elsewhere in this component library.

   Tokens only, no literal colors -- see arcade/tokens.css's "parchment/gold"
   block (already shipped, originally written for item-card/dialogue-box) for
   the full palette this draws from. Nav and index stay on the site's dark
   --arc-bg/--arc-ink pair; the file panel is the one surface that switches to
   --arc-parchment/--arc-parchment-ink -- that contrast (dark board, warm
   file) IS the design, not an inconsistency to fix.
   ============================================================================ */

.dos-shell{max-width:1400px;margin:0 auto;padding:20px 24px 80px;display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:20px;align-items:start}
@media (max-width:900px){
  .dos-shell{grid-template-columns:1fr;padding:16px 14px 60px}
}

/* ── LEFT: index ─────────────────────────────────────────────────────── */
.dos-index{border:1px solid var(--arc-line);border-radius:calc(var(--arc-radius)*2);overflow:hidden;background:rgba(255,255,255,.02)}
.dos-index__head{padding:14px 14px 12px;border-bottom:1px solid var(--arc-line)}
.dos-index__title{font-family:var(--arc-font-display);font-size:var(--arc-scale-md);font-weight:600;margin:0 0 2px;color:var(--arc-ink)}
.dos-index__hint{font-size:var(--arc-scale-xs);color:var(--arc-ink-faint);margin:0}

.dos-filters{padding:12px 14px;border-bottom:1px solid var(--arc-line);display:flex;flex-direction:column;gap:9px}
.dos-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dos-filter-row__label{font-family:var(--arc-font-hud);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--arc-ink-faint);flex:none;min-width:52px}
.dos-chip{flex:none;border:1px solid var(--arc-line);background:transparent;color:var(--arc-ink-dim);font-family:var(--arc-font-hud);font-size:.68rem;letter-spacing:.03em;padding:5px 10px;border-radius:999px;cursor:pointer}
.dos-chip:hover{color:var(--arc-ink)}
.dos-chip[aria-pressed="true"]{background:var(--arc-accent-dim);border-color:var(--arc-accent);color:var(--arc-ink)}

.dos-sort{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--arc-line);font-size:.72rem;color:var(--arc-ink-faint)}
.dos-sort select{background:var(--arc-bg);color:var(--arc-ink);border:1px solid var(--arc-line);border-radius:6px;padding:4px 8px;font-size:.72rem;font-family:var(--arc-font-body)}
.dos-count{margin-left:auto;font-family:var(--arc-mono);font-size:.68rem;color:var(--arc-ink-faint)}

.dos-compare-banner{display:none;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:var(--arc-accent-dim);border-bottom:1px solid var(--arc-line);font-size:.72rem;color:var(--arc-ink)}
.dos-compare-banner.is-active{display:flex}
.dos-compare-banner button{background:none;border:1px solid var(--arc-accent);color:var(--arc-ink);border-radius:6px;padding:4px 9px;font-size:.66rem;cursor:pointer;font-family:var(--arc-font-hud);letter-spacing:.04em}

.dos-rows{list-style:none;margin:0;padding:0}
.dos-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--arc-line);cursor:pointer;position:relative}
.dos-row:last-child{border-bottom:none}
.dos-row:hover{background:rgba(255,255,255,.035)}
.dos-row.is-active{background:var(--arc-accent-dim)}
.dos-row.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--arc-accent)}
.dos-row[hidden]{display:none}
/* Press feedback for .dos-row now lives in arcade/interact.css (family T4),
   along with its hover, focus ring and reduced-motion fallback, so every
   row-like control in the site presses identically. */
/* Rarity-tier differentiation, per row -- keyed off the same real
   data-rarity value (rarity_for() in generate_cars.py, "never invented
   per-car") that already drives the star count itself. Deliberately just a
   soft glow on the stars, not a coloured frame or left-edge stripe (which
   would visually collide with .is-active's own accent bar) -- and
   deliberately subtle everywhere, because rarity here means market
   scarcity of comparable sales, not "this is a better car"; anything
   louder risks implying the opposite of what the copy actually says. */
.dos-row[data-rarity="3"] .dos-row__stars{text-shadow:0 0 6px var(--arc-gold)}

.dos-row__check{flex:none;width:16px;height:16px;accent-color:var(--arc-accent);cursor:pointer}
.dos-row__thumb{flex:none;width:58px;height:40px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--arc-line)}
.dos-row__thumb img{width:100%;height:100%;object-fit:cover}
.dos-row__thumb--empty{display:flex;align-items:center;justify-content:center;color:var(--arc-ink-faint);font-size:.9rem}
.dos-row__body{flex:1 1 auto;min-width:0}
.dos-row__name{font-weight:700;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--arc-ink)}
.dos-row__name--muted{color:var(--arc-ink-faint);font-weight:600;font-style:italic}
.dos-row__meta{font-size:.68rem;color:var(--arc-ink-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dos-row__right{flex:none;text-align:right}
.dos-row__price{font-family:var(--arc-mono);font-weight:700;font-size:.78rem;color:var(--arc-ink)}
.dos-row__stars{color:var(--arc-gold);font-size:.72rem;letter-spacing:1px;margin-top:2px}
.dos-row__caseno{flex:none;font-family:var(--arc-mono);font-size:.62rem;color:var(--arc-ink-faint);width:26px}

.dos-empty-list{padding:22px 16px;text-align:center;color:var(--arc-ink-faint);font-size:.78rem}
.dos-empty-list[hidden]{display:none}
.dos-empty-list button{margin-top:8px;background:none;border:1px solid var(--arc-line);color:var(--arc-ink-dim);border-radius:6px;padding:6px 12px;font-size:.7rem;cursor:pointer;font-family:var(--arc-font-hud)}

/* ── RIGHT: case file (parchment) ────────────────────────────────────── */
.dos-file{background:linear-gradient(180deg,var(--arc-parchment) 0%,var(--arc-parchment-2) 100%);color:var(--arc-parchment-ink);border-radius:calc(var(--arc-radius)*2);border:1px solid var(--arc-gold-line);padding:22px;min-height:520px;position:relative;overflow:hidden}
.dos-file::before{content:"";position:absolute;inset:0;pointer-events:none;border:10px solid transparent;box-shadow:inset 0 0 0 1px rgba(43,34,19,.06)}

.dos-file__tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--arc-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--arc-gold-strong);border:1px solid var(--arc-gold-line);border-radius:4px;padding:3px 8px;margin-bottom:14px}

.dos-file__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dos-file__title{font-family:var(--arc-font-display);font-size:clamp(1.5625rem,3vw,2.4414rem);font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.dos-file__subtitle{color:var(--arc-parchment-ink-dim);font-size:.85rem}
.dos-file__price{font-family:var(--arc-mono);font-size:var(--arc-scale-lg);font-weight:800;white-space:nowrap}

.dos-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dos-badge-fair{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--arc-good);color:#08150f;padding:4px 9px;border-radius:5px}
.dos-rarity{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;color:var(--arc-parchment-ink-dim)}
.dos-rarity__stars{color:var(--arc-gold-strong);letter-spacing:2px;font-size:.95rem}
/* Same rarity-3 glow as the index row's stars -- see the .dos-row rule
   above for why this stays this subtle. */
.dos-file[data-rarity="3"] .dos-rarity__stars{text-shadow:0 0 6px var(--arc-gold-strong)}

/* Entrance replay on every file swap -- open a different car, close the
   open one, or open the compare spread, all restart this the same way
   arcade/dialogue-box.js's replayEntrance() already does elsewhere (see the
   JS: the class is removed, a reflow is forced, then re-added). Was a hard
   cut before; Eric wanted it to open "smoothly instead of snapping". */
.dos-file.dos-file--enter{animation:dosFileEnter .32s var(--arc-ease)}
@keyframes dosFileEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.dos-file__media{display:grid;grid-template-columns:1fr 84px;gap:10px;margin-bottom:18px}
.dos-file__photo{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--arc-gold-line);background:#000;aspect-ratio:16/10}
.dos-file__photo img{width:100%;height:100%;object-fit:cover}
.dos-file__photo-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 6px;pointer-events:none}
.dos-file__photo-btn{pointer-events:auto;width:30px;height:30px;border-radius:50%;border:none;background:rgba(7,7,7,.55);color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dos-file__photo-btn:hover{background:rgba(7,7,7,.8)}
.dos-file__photo-count{position:absolute;right:8px;bottom:8px;background:rgba(7,7,7,.6);color:#fff;font-family:var(--arc-mono);font-size:.62rem;padding:2px 7px;border-radius:4px}
.dos-file__thumbs{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:100%}
.dos-file__thumb{border:1px solid var(--arc-gold-line);border-radius:4px;overflow:hidden;cursor:pointer;aspect-ratio:16/10;background:#000;padding:0}
.dos-file__thumb img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity var(--arc-transition) var(--arc-ease)}
.dos-file__thumb.is-active img,.dos-file__thumb:hover img{opacity:1}
.dos-file__thumb.is-active{outline:2px solid var(--arc-gold-strong)}

.dos-specs{border-top:1px solid var(--arc-gold-line);border-bottom:1px solid var(--arc-gold-line);margin-bottom:18px}
.dos-specs__row{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px dotted var(--arc-gold-line);font-family:var(--arc-mono);font-size:.78rem}
.dos-specs__row:last-child{border-bottom:none}
.dos-specs__label{color:var(--arc-parchment-ink-dim);letter-spacing:.03em;text-transform:uppercase;font-size:.66rem;align-self:center}
.dos-specs__val{font-weight:700}

.dos-file__cta{display:inline-flex;align-items:center;gap:8px;background:var(--arc-accent);color:#fff;font-family:var(--arc-font-hud);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;padding:12px 20px;border-radius:7px;text-decoration:none}
.dos-file__cta:hover{background:var(--arc-accent-deep)}

/* empty / placeholder file state */
.dos-file--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:480px}
.dos-file--empty .dos-file__icon{font-size:1.8rem;opacity:.3}
.dos-file--empty h3{font-family:var(--arc-font-display);font-size:var(--arc-scale-md);margin:0;font-weight:600}
.dos-file--empty p{max-width:38ch;color:var(--arc-parchment-ink-dim);font-size:.82rem;line-height:1.6;margin:0}

/* compare (spread) layout */
.dos-compare__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.dos-compare__title{font-family:var(--arc-font-display);font-size:var(--arc-scale-lg);font-weight:600;margin:0}
.dos-compare-table-wrap{overflow-x:auto}
table.dos-compare-table{border-collapse:collapse;width:100%;min-width:480px}
table.dos-compare-table th,table.dos-compare-table td{border-bottom:1px dotted var(--arc-gold-line);padding:8px 10px;text-align:left;vertical-align:top}
table.dos-compare-table th.dos-ct-carhead{padding-top:0}
.dos-ct-photo{width:100%;aspect-ratio:16/10;border-radius:5px;overflow:hidden;border:1px solid var(--arc-gold-line);background:#000;margin-bottom:6px}
.dos-ct-photo img{width:100%;height:100%;object-fit:cover}
.dos-ct-photo--empty{display:flex;align-items:center;justify-content:center;color:rgba(242,239,242,.4);font-size:.7rem;background:rgba(43,34,19,.08)}
.dos-ct-name{font-family:var(--arc-font-display);font-weight:600;font-size:.86rem}
.dos-ct-name--muted{font-style:italic;color:var(--arc-parchment-ink-dim);font-weight:500}
.dos-ct-label{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--arc-parchment-ink-dim);white-space:nowrap;width:110px}
.dos-ct-val{font-family:var(--arc-mono);font-size:.78rem;font-weight:700}
.dos-ct-val--muted{color:var(--arc-parchment-ink-dim);font-style:italic;font-weight:500}
.dos-compare-cta-row{margin-top:16px}

/* ── standalone single-file page (no index -- a car/model's OWN full page,
   e.g. /cars/<slug>/ or /bmw/<model>/, reached by following a dos-file__cta
   link out of an index+file browse page). Same parchment surface, just full
   width with no left column, since there's nothing to browse from here --
   this page IS the file. ── */
.dos-file--standalone{max-width:900px;margin:0 auto}

/* ── tabbed restructure (arcade/case-tabs.js, progressive enhancement) ──
   Purely a runtime layer: a no-JS visitor or crawler sees every section
   (gallery, specs, trust notices) in one normal scrolling page, completely
   unchanged, exactly matching arcade/paginate.js's own contract -- this
   CSS only ever applies to markup that script itself builds at runtime. */
.dos-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--arc-gold-line)}
.dos-tab{flex:1 1 auto;background:none;border:none;border-bottom:2px solid transparent;padding:10px 4px;font-family:var(--arc-font-hud);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--arc-parchment-ink-dim);cursor:pointer}
.dos-tab:hover{color:var(--arc-parchment-ink)}
.dos-tab--active{color:var(--arc-parchment-ink);border-bottom-color:var(--arc-accent)}
.dos-tab-panel[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  .dos-file.dos-file--enter{animation:none}
}