/* «Архив партий» — the console mock's АРХИВ ПАРТИЙ block.

   The mock's wide grid is `210px minmax(0,1fr) minmax(0,1fr)` with a 13px gap;
   `medium` collapses it to one column. Written narrow-first, and the
   breakpoints are @container scene, never @media: at a 1280px window the scene
   is ~858px, so a @media (min-width: 900px) here would lay a three-column
   screen into an 858px hole (see shell.css § WINDOW CLASSES, and gear.css for
   the same argument spelled out).

   The mock writes its styles inline with exact pixels; the numbers below are
   copied from those style strings rather than eyeballed. Colours ride the
   tokens.css TONE triplets where the mock's rgba matches one (it almost always
   does — the mock and tokens.css share the palette by construction). */

#view.arv-host,
#scene.shell-scene #view.arv-host {
  max-width: none;
  padding: 0;
  overflow-x: hidden;
}

.arv-view {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px 15px 14px;
  min-width: 0;
}

.arv-rail,
.arv-main,
.arv-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.arv-rail.hidden,
.arv-card.hidden { display: none; }

/* ── Left rail ─────────────────────────────────────────────────────────── */

/* mock: gap:5px;padding:12px 13px;radius 15;border rgba(241,193,82,.26);
   background:linear-gradient(115deg,rgba(50,33,12,.5),rgba(16,11,30,.86)) */
.arv-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border-radius: 15px;
  border: 1px solid rgba(var(--t-gold), 0.26);
  background: linear-gradient(115deg, rgba(50, 33, 12, 0.5), rgba(16, 11, 30, 0.86));
}
.arv-head-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}
.arv-head-totals {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* mock cardStyle: min-height:44px;column;gap:3px;padding:10px 12px;radius 12;
   border rgba(167,139,250,.28);background rgba(20,13,38,.55) */
.arv-dossier {
  text-align: left;
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-violet), 0.28);
  background: rgba(20, 13, 38, 0.55);
  transition: border-color 0.16s;
}
.arv-dossier-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--violet-300);
}
.arv-dossier-sub {
  font-size: 9px;
  line-height: 1.4;
  color: rgba(var(--t-mute), 0.44);
  text-wrap: pretty;
}

/* mock switchStyle */
.arv-switch {
  white-space: nowrap;
  min-height: 44px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.55);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  transition: border-color 0.16s;
}

.arv-days {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* mock day row: min-height:44px;gap:9px;padding:9px 11px;radius 11 */
.arv-day {
  text-align: left;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(20, 13, 38, 0.4);
  transition: background 0.16s, border-color 0.16s;
}
.arv-day.is-idle { background: transparent; }
.arv-day.is-on {
  border-color: rgba(var(--t-gold), 0.34);
  background: rgba(var(--t-gold), 0.09);
}
.arv-day-label {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--t-mute), 0.78);
}
.arv-day.is-idle .arv-day-label { color: var(--text-faint); }
.arv-day.is-on .arv-day-label { font-weight: 800; color: var(--gold); }
.arv-day-count {
  white-space: nowrap;
  font-size: 10px;
  color: rgba(var(--t-mute), 0.4);
}
.arv-day-delta {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.28);
}
.arv-day-delta.is-up { color: rgba(var(--t-ok), 0.9); }
.arv-day-delta.is-down { color: rgba(var(--t-danger), 0.9); }

.arv-sessions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* mock sectionStyle */
.arv-section {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-gold), 0.72);
}
.arv-rail-note {
  font-size: 9px;
  line-height: 1.4;
  color: rgba(var(--t-gold), 0.6);
  text-wrap: pretty;
}
/* mock session card: gap:2px;padding:9px 11px;radius 11;border violet .16 */
.arv-session {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(var(--t-violet), 0.16);
  background: rgba(20, 13, 38, 0.42);
}
.arv-session-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(var(--t-mute), 0.8);
}
.arv-session-sub {
  font-size: 9px;
  color: rgba(var(--t-mute), 0.45);
}

/* ── Middle column: the day ────────────────────────────────────────────── */

.arv-day-head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}
.arv-day-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}
.arv-day-sum {
  flex: 1;
  min-width: 120px;
  font-size: 10px;
  color: var(--text-soft);
}

/* mock chipStyle: the filter is always visible and always removable. */
.arv-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-gold), 0.34);
  background: rgba(var(--t-gold), 0.09);
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--t-gold), 0.9);
}
.arv-chip-label { flex: 1; min-width: 0; }
.arv-chip-clear {
  white-space: nowrap;
  min-height: 44px;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid rgba(var(--t-mute), 0.24);
  font-size: 9px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.72);
  transition: border-color 0.16s;
}

/* mock month grid: repeat(7,1fr), gap 5px, aspect-ratio 1 cells. */
.arv-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.arv-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 8px;
  border: 1px solid rgba(var(--t-violet), 0.08);
  background: transparent;
  transition: border-color 0.16s;
}
.arv-cell.is-low {
  border-color: rgba(var(--t-violet), 0.2);
  background: rgba(var(--t-violet), 0.06);
}
.arv-cell.is-mid {
  border-color: rgba(var(--t-violet), 0.2);
  background: rgba(var(--t-violet), 0.12);
}
.arv-cell.is-hot {
  border-color: rgba(var(--t-gold), 0.4);
  background: rgba(var(--t-gold), 0.14);
}
.arv-cell.is-future { opacity: 0.35; cursor: default; }
.arv-cell-day {
  font-size: 9px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.22);
}
.arv-cell.is-low .arv-cell-day,
.arv-cell.is-mid .arv-cell-day { color: rgba(var(--t-mute), 0.7); }
.arv-cell.is-hot .arv-cell-day { color: var(--gold); }
.arv-cell-count {
  font-size: 8px;
  color: rgba(var(--t-mute), 0.4);
}

/* mock subStyle, reused for the calendar note and the two card notes. */
.arv-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: pretty;
}
.arv-note.is-warn { color: rgba(var(--t-gold), 0.75); }

/* mock empty card: dashed violet border, violet title. */
.arv-empty {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 18px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--t-violet), 0.3);
  background: rgba(20, 13, 38, 0.42);
}
.arv-empty-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--violet-300);
}
.arv-empty-body {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(var(--t-mute), 0.62);
  text-wrap: pretty;
}
/* The quieter empty sentences: a day off, or a quiet month over a real
   archive. Same register as .sub, framed so the column does not read as a
   render failure. */
.arv-none {
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px dashed rgba(var(--t-violet), 0.22);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: pretty;
}

.arv-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* mock row: column;gap:6px;padding:11px 13px;radius 13; tone border when
   selected, violet .14 otherwise. */
.arv-row {
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(var(--t-violet), 0.14);
  background: rgba(20, 13, 38, 0.46);
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.arv-row.is-sel.is-win { border-color: rgba(var(--t-ok), 0.5); background: rgba(var(--t-ok), 0.08); }
.arv-row.is-sel.is-loss { border-color: rgba(var(--t-danger), 0.5); background: rgba(var(--t-danger), 0.08); }
.arv-row.is-sel.is-draw { border-color: rgba(var(--t-violet), 0.5); background: rgba(var(--t-violet), 0.08); }
.arv-row.is-sel.is-none { border-color: rgba(var(--t-mute), 0.5); background: rgba(var(--t-mute), 0.08); }
.arv-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.arv-row-time {
  white-space: nowrap;
  font-size: 10px;
  color: rgba(var(--t-mute), 0.4);
}
.arv-row-icon {
  width: 22px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 14px;
}
.arv-row-who {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* mock markStyle: 9px, 800, letterspaced uppercase, in the row's tone. */
.arv-row-mark {
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arv-row-mark.is-win { color: rgba(var(--t-ok), 0.95); }
.arv-row-mark.is-loss { color: rgba(var(--t-danger), 0.95); }
.arv-row-mark.is-draw { color: rgba(var(--t-violet), 0.95); }
.arv-row-mark.is-none { color: rgba(var(--t-mute), 0.95); }
.arv-row-delta {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: rgba(var(--t-mute), 0.4);
}
.arv-row.is-win .arv-row-delta { color: var(--ok); }
.arv-row.is-loss .arv-row-delta { color: var(--danger-soft); }
.arv-row-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.arv-row-game {
  font-size: 10px;
  color: rgba(var(--t-mute), 0.44);
  white-space: nowrap;
}
.arv-row-reason {
  flex: 1;
  min-width: 80px;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(var(--t-mute), 0.52);
  text-wrap: pretty;
}
/* mock tagStyle: the off-nominal chip is gold — as loud as a win. */
.arv-row-tag {
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(var(--t-gold), 0.1);
  border: 1px solid rgba(var(--t-gold), 0.28);
  font-size: 9px;
  font-weight: 700;
  color: rgba(var(--t-gold), 0.85);
}
/* mock kindStyle: «реплей» gold-framed, «итоги» quiet violet. */
.arv-row-kind {
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(var(--t-violet), 0.2);
  font-size: 9px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.45);
}
.arv-row-kind.is-replay {
  border-color: rgba(var(--t-gold), 0.3);
  color: rgba(var(--t-gold), 0.85);
}
.arv-row-series {
  font-size: 9px;
  color: rgba(196, 181, 253, 0.8);
}

/* ── The selected game's card ──────────────────────────────────────────── */

.arv-card {
  gap: 11px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(16, 11, 30, 0.66);
}
.arv-sel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
.arv-sel-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arv-sel-when {
  font-size: 10px;
  color: rgba(var(--t-mute), 0.4);
}
.arv-sel-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-wrap: pretty;
}
/* mock selMarkStyle: pill in the result's tone. */
.arv-sel-mark {
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arv-sel-mark.is-win {
  background: rgba(var(--t-ok), 0.12);
  border: 1px solid rgba(var(--t-ok), 0.34);
  color: rgba(var(--t-ok), 0.95);
}
.arv-sel-mark.is-loss {
  background: rgba(var(--t-danger), 0.12);
  border: 1px solid rgba(var(--t-danger), 0.34);
  color: rgba(var(--t-danger), 0.95);
}
.arv-sel-mark.is-draw {
  background: rgba(var(--t-violet), 0.12);
  border: 1px solid rgba(var(--t-violet), 0.34);
  color: rgba(var(--t-violet), 0.95);
}
.arv-sel-mark.is-none {
  background: rgba(var(--t-mute), 0.12);
  border: 1px solid rgba(var(--t-mute), 0.34);
  color: rgba(var(--t-mute), 0.95);
}
.arv-sel-reason {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(var(--t-mute), 0.62);
  text-wrap: pretty;
}

.arv-who {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.arv-who-link {
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-violet), 0.28);
  background: rgba(20, 13, 38, 0.55);
  font-size: 10px;
  font-weight: 700;
  color: rgba(196, 181, 253, 0.92);
  transition: border-color 0.16s;
}
.arv-who-link.is-off {
  border-style: dashed;
  border-color: rgba(var(--t-violet), 0.2);
  background: transparent;
  color: var(--text-faint);
  cursor: not-allowed;
}

/* The final-position vignette. mock: width:min(230px,100%), aspect 1, 8×8,
   radius 10, gold border, deep shadow. */
.arv-board {
  width: min(230px, 100%);
  align-self: center;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--t-gold), 0.24);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.arv-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  background: rgba(20, 13, 38, 0.9);
}
.arv-sq.is-light { background: rgba(var(--t-violet), 0.18); }

.arv-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arv-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(var(--t-violet), 0.16);
  background: rgba(20, 13, 38, 0.46);
}
.arv-fact-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: rgba(var(--t-mute), 0.46);
}
.arv-fact-val {
  font-size: 11px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.86);
}

.arv-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* mock: the main action is the gold slab; secondaries are quiet; disabled is
   a dashed frame with not-allowed — visibly a fact, not a broken button. */
.arv-act {
  white-space: nowrap;
  flex: 1;
  min-width: 130px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-violet), 0.3);
  background: rgba(20, 13, 38, 0.6);
  font-size: 11px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.78);
  transition: border-color 0.18s, transform 0.18s;
}
.arv-act.is-main {
  min-width: 150px;
  padding: 12px 16px;
  border: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}
.arv-act.is-off,
.arv-act.is-main.is-off {
  border: 1px dashed rgba(var(--t-violet), 0.2);
  background: rgba(20, 13, 38, 0.3);
  font-family: inherit;
  font-size: 11px;
  color: var(--text-faint);
  cursor: not-allowed;
}

/* mock: the two dashed prose cards at the card's foot. */
.arv-note-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px dashed rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.4);
}
.arv-note-icon { font-size: 12px; }

/* ── Hover, on devices that have it ────────────────────────────────────── */

@media (hover: hover) {
  .arv-dossier:hover { border-color: rgba(var(--t-gold), 0.5); }
  .arv-switch:hover { border-color: rgba(var(--t-violet), 0.55); }
  .arv-day:hover { background: rgba(var(--t-violet), 0.08); }
  .arv-cell:not(.is-future):hover { border-color: rgba(var(--t-gold), 0.6); }
  .arv-row:hover { transform: translateX(2px); }
  .arv-chip-clear:hover { border-color: rgba(var(--t-mute), 0.5); }
  .arv-who-link:not(.is-off):hover { border-color: rgba(var(--t-violet), 0.55); }
  .arv-act:not(.is-off):hover { transform: translateY(-1px); }
}

/* ── Wide scene: the mock's three columns ──────────────────────────────── */

@container scene (min-width: 900px) {
  .arv-view {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    padding: 16px 18px;
  }
  /* When the failure state hides the rail and the card, the admission owns
     the whole width rather than sitting in a 210px-offset hole. */
  .arv-rail.hidden + .arv-main { grid-column: 1 / -1; }
}