/* GRAPE wiedza — app layer on the Sotapoc design system (tokens.css + ds.css). Colours, type and spacing
   come from tokens only. App rules from the system: borders not shadows, radius-sm on controls, radius-md on
   cards, one primary action per screen, 14px base size, shadow only on floating layers. */

html, body { margin: 0; height: 100%; background: var(--surface); }
body.sp-root { font-size: 14px; line-height: 20px; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-evidence svg { stroke: none; }
.hidden { display: none !important; }
:focus-visible { outline: var(--stroke-rule) solid var(--focus); outline-offset: 2px; }

/* Shell: sidebar + content */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-5);
        padding: var(--space-5) var(--space-4); background: var(--surface-sunken); border-right: var(--stroke-hair) solid var(--line); }
.brand { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 var(--space-2); text-decoration: none !important; }
.brand__mark { font: 700 14px/16px var(--font-sans); letter-spacing: 0.18em; color: var(--brand); }
.brand__sub { font: 500 18px/20px var(--font-serif); color: var(--ink-secondary); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
         color: var(--ink-secondary); font-weight: 500; text-decoration: none; }
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: var(--tint); color: var(--ink); }
.nav a.active { background: var(--tint); color: var(--primary); }
.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
.side__foot .sp-btn { justify-content: flex-start; padding-left: var(--space-1); }
.side__foot svg { width: 18px; height: 18px; }
.main { min-width: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: var(--space-7) var(--space-7) 120px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { z-index: 5; height: auto; flex-direction: row; align-items: center; gap: var(--space-3);
          padding: var(--space-2) var(--space-4); border-right: 0; border-bottom: var(--stroke-hair) solid var(--line); overflow-x: auto; }
  .nav { flex-direction: row; } .nav a span { display: none; } .side__foot { margin: 0 0 0 auto; flex-direction: row; }
  .side__foot .sp-caption, .side__foot span { display: none; }
  .container { padding: var(--space-5) var(--space-4) 120px; }
}

/* Page head: kicker, serif title, lead */
.page-head { margin-bottom: var(--space-6); }
.page-head .sp-h1 { margin: var(--space-2) 0; color: var(--ink); }
.page-head .lead { max-width: 72ch; color: var(--ink-secondary); font-size: 16px; line-height: 24px; margin: 0; }
.section { margin-top: var(--space-6); }
.section > .sp-colhead { margin-bottom: var(--space-4); }

/* Forms (system: 40px controls, radius-sm, line-strong border, focus ring) */
.input { width: 100%; box-sizing: border-box; font: 400 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-raised);
         border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px var(--space-3); min-height: 40px; }
textarea.input { min-height: 160px; resize: vertical; font-size: 16px; line-height: 24px; padding: var(--space-3) var(--space-4); }
.input::placeholder { color: var(--ink-muted); }
.input:focus { outline: var(--stroke-rule) solid var(--focus); outline-offset: 2px; }
.input--sm { min-height: 32px; padding: 4px var(--space-2); width: auto; }
select.input { width: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.toolbar .grow { flex: 1; min-width: 220px; }

/* Cards and lists */
.card { background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }
.card + .card { margin-top: var(--space-3); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.card__title { font: 500 20px/26px var(--font-serif); margin: var(--space-2) 0 var(--space-1); color: var(--ink); }
.card__title a { color: inherit; } .card__title a:hover { color: var(--primary); text-decoration: none; }
.card--hero .card__title { font-size: 28px; line-height: 36px; }
.card__meta { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.card__why { margin: var(--space-3) 0 0; color: var(--ink); font-size: 15px; line-height: 22px; }
.card__desc { margin: var(--space-2) 0 0; color: var(--ink-secondary); }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.gen { color: var(--ink-muted); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); }
a.sp-tag { text-decoration: none; } a.sp-tag:hover { text-decoration: underline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 960px) { .grid2 { grid-template-columns: 1fr; } }

/* Quote: the system's quote style — serif on tint, no left border */
.quote { background: var(--tint); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-3);
         font: 400 15px/23px var(--font-serif); color: var(--ink-secondary); }
.quote__loc { display: flex; align-items: center; gap: var(--space-1); font: 700 12px/16px var(--font-sans);
              color: var(--primary); margin-bottom: var(--space-1); }
.quote__loc[data-play] { cursor: pointer; } .quote__loc[data-play]:hover { text-decoration: underline; }
.quote__loc svg { width: 14px; height: 14px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--tint); border-radius: var(--radius-md); padding: var(--space-4); }
.kpi .sp-figure { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.kpi .sp-figure__num { font-size: 32px; line-height: 36px; }
.kpi .sp-figure__label { font-weight: 600; color: var(--ink-secondary); max-width: none; }
.kpi--status .sp-figure__num { font: 600 16px/22px var(--font-sans); }
.ok-text { color: var(--positive); } .bad-text { color: var(--negative); } .muted { color: var(--ink-muted); }

/* Match result */
.match-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: start; }
.score { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.score .sp-figure__num { font-family: var(--font-serif); font-size: 40px; line-height: 44px; color: var(--primary); }
.score .sp-evidence { font-weight: 600; color: var(--ink-secondary); }
.draft { white-space: pre-wrap; font-family: var(--font-sans); font-size: 15px; line-height: 23px; color: var(--ink); background: var(--surface-raised);
         border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0; }
.alt-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0;
           border-bottom: var(--stroke-hair) solid var(--line); }
.alt-row:last-child { border-bottom: 0; }
.alt-row .card__title { font-size: 17px; line-height: 24px; margin: var(--space-1) 0; }
.notice { background: var(--accent-tint); color: var(--accent-text); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: 600; }
.error { background: var(--negative-tint); color: var(--negative); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); white-space: pre-wrap; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-md); }
.table-wrap .sp-table td:first-child { font-weight: 400; color: var(--ink-secondary); }
.table-wrap .sp-table .strong { font-weight: 600; color: var(--ink); }
.sp-table th { background: var(--surface-raised); white-space: nowrap; }
.sp-table tbody tr:hover td { background: var(--tint); }
.sp-table pre { white-space: pre-wrap; font: 12px/16px ui-monospace, Menlo, monospace; color: var(--ink-secondary); margin: var(--space-2) 0 0; max-height: 240px; overflow: auto; }
details summary { cursor: pointer; color: var(--primary); font-weight: 600; }

/* Source page */
.chunk { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.chunk:last-child { border-bottom: 0; }
.loc { font: 700 12px/20px var(--font-sans); color: var(--primary); white-space: nowrap; }
.loc[data-play] { cursor: pointer; } .loc[data-play]:hover { text-decoration: underline; }
.spk { font-weight: 700; color: var(--ink); }
.reading { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.reading img, .thumbs img { width: 100%; border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-sm); background: #fff; display: block; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: var(--space-2); margin-top: var(--space-3); }
.md-table { white-space: pre; overflow-x: auto; font: 12px/16px ui-monospace, Menlo, monospace; background: var(--surface-sunken);
            padding: var(--space-3); border-radius: var(--radius-sm); margin-top: var(--space-2); }
.comment { padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.comment.reply { margin-left: var(--space-6); }
@media (max-width: 700px) { .reading, .chunk { grid-template-columns: 1fr; } }

/* Topics */
.area { margin-bottom: var(--space-3); }
.area .card__title { margin-top: 0; }
.topic-chip { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
              background: var(--tint); color: var(--ink); text-decoration: none !important; font-weight: 500; }
.topic-chip:hover { background: var(--tint-strong); color: var(--ink); }
.topic-chip small { color: var(--ink-muted); font-weight: 400; }
.topic-chip.proposed { background: transparent; border: var(--stroke-hair) dashed var(--line-strong); }

/* A/B diffs */
.diff { display: grid; grid-template-columns: 70px 1fr 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
.diff .pick { background: var(--positive-tint); border-radius: var(--radius-sm); padding: 0 var(--space-1); }

/* Spinner */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--primary);
           border-radius: var(--radius-pill); animation: spin 0.9s linear infinite; vertical-align: -2px; margin-right: var(--space-2); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { color: var(--ink-muted); padding: var(--space-5) 0; }

/* Player: a floating layer, the one place a shadow is allowed */
.player { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--space-4); width: min(920px, calc(100% - 32px)); box-sizing: border-box;
          display: flex; align-items: center; gap: var(--space-3); background: var(--surface-raised); border: var(--stroke-hair) solid var(--line);
          border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-2) var(--space-3); z-index: 20; }
.player audio { flex: 1; min-width: 140px; height: 36px; }
.player__title { max-width: 32%; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Login, setup: no sidebar */
body.bare .side { display: none; }
body.bare .shell { grid-template-columns: 1fr; }
.auth { max-width: 440px; margin: 10vh auto 0; }
.auth__form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); max-width: 420px; }
.auth__form .sp-btn { margin-top: var(--space-3); align-self: flex-start; }
.label { font: 700 14px/20px var(--font-sans); margin-top: var(--space-2); }
.qr { background: #fff; display: inline-block; padding: var(--space-3); border-radius: var(--radius-md); margin: var(--space-3) 0; }
.qr img { display: block; image-rendering: pixelated; }
code { font: 12px/16px ui-monospace, Menlo, monospace; background: var(--surface-sunken); padding: 1px 4px; border-radius: var(--radius-sm); word-break: break-all; }