/* Hallmark · shape: app screen · genre: atmospheric · theme: Kiln (deal 3/3, seed prompt-514d·7a97e200·2026-11-05·r0)
 * nav: top bar with search and the signed-in player, section list and filters in the left rail · signature: the card table, ink art on bone faces lying on the dark ground, beside the live proposals rail · states: loading, error, empty, full, empty art slot (new cards), signed out, unvoted · kiln: ember
 * axes: dark/high-contrast-serif/warm · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R1 V2 · weakest: R, the right rail is a plain list; votes sit on the left of each item so they scan as a column */
/* waive: display face Boska → Cormorant Garamond, body Geist → Golos Text: the UI is Russian and Boska has no Cyrillic */
/* waive: heat ramp marks rarity instead of temperature: rarity is this game's power scale, three steps, never a fill behind text */
/* waive: 19, the en dash in "14–18" is the game's own range notation for damage frames, data rather than punctuation */
/* waive: left rail with three destinations: it carries the filters the catalogue needs, not just navigation */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-bone: oklch(92% 0.022 82);
  --color-bone-ink: oklch(20% 0.02 40);
  --color-bone-muted: oklch(45% 0.02 50);
  --color-scrim: oklch(13% 0.012 40 / 0.72);
  --rail: 232px;
  --aside: 340px;
  --bar: 64px;
}

html, body { overflow-x: clip; }
h1, h2 { text-wrap: balance; }
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--aside); grid-template-rows: var(--bar) minmax(0, 1fr); grid-template-areas: "bar bar bar" "rail main aside"; min-height: 100vh; max-width: 1680px; margin-inline: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-focus); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: var(--color-paper-2); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-3); color: var(--color-ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.link { padding: 0; border: 0; background: none; color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.link:hover { color: var(--color-ink); }

/* top bar */
.bar { grid-area: bar; display: flex; align-items: center; gap: var(--space-lg); padding-inline: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.search { flex: 1; max-width: 480px; display: flex; align-items: center; gap: var(--space-xs); height: 40px; padding-inline: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-muted); }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--color-ink); outline: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--color-focus); }
.search input::placeholder { color: var(--color-muted); }
.user { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-paper-3); color: var(--color-ink); font-weight: 500; }

/* left rail */
.rail { grid-area: rail; padding: var(--space-lg) var(--space-md); border-right: var(--rule-hair) solid var(--color-rule); display: grid; align-content: start; gap: var(--space-xl); }
.sections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.sections a { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-xs) var(--space-sm); border-radius: 10px; color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.sections a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.sections a[aria-current="page"] { background: var(--color-paper-3); color: var(--color-ink); }
.sections .count { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.filter { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.filter legend, .filter .legend { padding: 0 0 var(--space-xs) var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 36px; padding-inline: var(--space-sm); border-radius: 10px; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.check:hover { background: var(--color-paper-2); }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.filter select { margin-inline: var(--space-sm); }

/* main: the card table */
.main { grid-area: main; padding: var(--space-lg); min-width: 0; }
.main-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); }
.main-head h1 { font-size: var(--text-3xl); }
.main-head .count { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sort, .filter select { height: 36px; padding: 0 var(--space-md); background: var(--color-paper-2); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); cursor: pointer; }
.sort { margin-left: auto; }
.sort:hover, .filter select:hover { color: var(--color-ink); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-well); overflow: hidden; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.card:hover { border-color: color-mix(in oklab, var(--color-ink) 30%, transparent); transform: translateY(-2px); }
.card:focus-within { box-shadow: 0 0 0 2px var(--color-focus); }
.art { aspect-ratio: 1; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: var(--color-bone); padding: var(--space-md); }
.art img { width: 100%; height: 100%; object-fit: contain; }
.art--portrait { aspect-ratio: 3 / 4; padding: 0; }
.art--portrait img { object-fit: cover; }
.art--empty { color: var(--color-bone-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-lg); }
.body { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-md); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.heat { display: inline-flex; gap: var(--space-3xs); }
.heat i { width: 10px; height: 4px; border-radius: 1px; background: var(--color-paper-3); }
.heat--1 i:nth-child(-n+1) { background: var(--heat-2); }
.heat--2 i:nth-child(-n+2) { background: var(--heat-3); }
.heat--3 i:nth-child(-n+3) { background: var(--heat-4); }
.new { margin-left: auto; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; }
.card h2 { font-size: var(--text-lg); line-height: 1.1; }
.card h2 a { color: var(--color-ink); text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; }
.card h2 a:focus-visible { outline: none; }
.stats { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0; font-size: var(--text-sm); }
.stats div { display: flex; gap: var(--space-2xs); }
.stats dt { color: var(--color-muted); }
.stats dd { margin: 0; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.talk { font-size: var(--text-xs); color: var(--color-muted); }

/* data states */
.state { display: grid; justify-items: start; gap: var(--space-sm); padding: var(--space-xl) 0; color: var(--color-ink-2); }
.state--error { color: var(--color-error); }

/* right rail: proposals */
.aside { grid-area: aside; border-left: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) var(--space-md); display: grid; align-content: start; gap: var(--space-md); }
.aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.aside-head h2 { font-size: var(--text-2xl); }
.tabs { display: flex; gap: var(--space-2xs); padding: var(--space-3xs); background: var(--color-paper-2); border-radius: var(--radius-pill); }
.tab { flex: 1 1 auto; height: 32px; padding-inline: var(--space-2xs); white-space: nowrap; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tab:hover { color: var(--color-ink); }
.tab[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); }
.props { list-style: none; margin: 0; padding: 0; display: grid; }
.prop { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.vote { display: grid; justify-items: center; align-content: start; gap: var(--space-3xs); }
.vote button { display: grid; place-items: center; width: 36px; height: 30px; border: 0; border-radius: 8px; background: var(--color-paper-2); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.vote button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.vote button:active { transform: scale(0.96); }
.vote button:disabled, .tab:disabled { opacity: 0.45; cursor: not-allowed; }
.vote button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.vote svg { width: 14px; height: 14px; }
.vote .num { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink); }
.prop h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.prop h3 button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.prop h3 button:hover { color: var(--color-ink); }
.prop p { font-size: var(--text-sm); color: var(--color-ink); }
.prop .by { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.prop .missing { color: var(--color-error); }
.prop .full { margin-top: var(--space-xs); white-space: pre-wrap; color: var(--color-ink-2); }
.note { font-size: var(--text-xs); color: var(--color-muted); }
.alert { padding: var(--space-sm) var(--space-md); border-radius: 10px; background: var(--color-paper-2); color: var(--color-error); font-size: var(--text-sm); }

/* full card */
.sheet { width: min(960px, 100% - 2 * var(--space-md)); max-height: min(92vh, 960px); padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-well); background: var(--color-paper-2); color: var(--color-ink); }
.sheet::backdrop { background: var(--color-scrim); }
.sheet-close { position: sticky; top: 0; z-index: var(--z-raised); display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-sm) 0; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-lg); padding: 0 var(--space-lg) var(--space-lg); }
.sheet-grid .art { border-radius: 10px; align-self: start; }
.sheet h2 { max-width: none; font-size: var(--text-3xl); }
.sheet .meta { margin-top: var(--space-xs); font-size: var(--text-sm); }
.fields { display: grid; margin: var(--space-lg) 0 0; }
.field { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.field dt { color: var(--color-muted); font-size: var(--text-sm); }
.field dd { margin: 0; color: var(--color-ink); }
.propose { min-height: 30px; padding: 0 var(--space-sm); font-size: var(--text-xs); }
.groups { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.groups h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.groups ul { margin: 0; padding-left: var(--space-md); font-size: var(--text-sm); }

/* proposal form */
.sheet--form { width: min(640px, 100% - 2 * var(--space-md)); }
.pform-body { display: grid; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-lg); }
.pform-body h2 { font-size: var(--text-2xl); }
.pform-body > .link, .change > .link { justify-self: start; }
.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.change { display: grid; gap: var(--space-sm); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; }
.fld { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.fld input, .fld textarea, .fld select { width: 100%; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-3); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
.fld input:hover, .fld textarea:hover, .fld select:hover { border-color: var(--color-muted); }
.fld textarea { resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--color-muted); }
.was { color: var(--color-ink-2); font-size: var(--text-md); }
.kinds .check { align-items: flex-start; padding-block: var(--space-2xs); }
.kinds .check input { margin-top: var(--space-2xs); }
.pform-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (prefers-reduced-motion: reduce) { .card, .card:hover, .vote button, .tab, .check, .sections a, .btn { transition: none; transform: none; } }
@media (max-width: 75rem) {
  .app { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-areas: "bar bar" "rail main" "rail aside"; }
  .aside { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
}
@media (max-width: 52rem) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "rail" "main" "aside"; }
  .rail { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .search { display: none; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .field { grid-template-columns: minmax(0, 1fr) auto; }
  .field dd { grid-column: 1 / -1; }
}