/* Auditovňa — Phase 4 design pass.
 *
 * Every colour comes from tokens.css (D-011); a test fails if a literal
 * appears here. Two rules from that decision run through the whole file:
 *
 *   - accent text sits on --card, never on --paper (--amber-deep is 4.22:1 on
 *     paper, below the 4.5 body text needs, and 4.68:1 on a card);
 *   - form controls are bounded by --line-control, not --line, because a
 *     control's visible edge needs 3:1 and --line gives 1.24:1.
 *
 * And one rule from D5: state is never signalled by colour alone. Every
 * failure carries a word or a mark as well.
 */

@import url("/static/tokens.css");
@import url("/static/fonts.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute is how the app toggles the login screen, the inline
   rename form, and the conflict/error banners. The browser hides `[hidden]`
   with `display: none` — but that is a UA rule, and any author `display:` beats
   it. `.login` (grid) and `.inline-form` (flex) both set one, so without this
   the login block never disappears after signing in. Belongs at the top,
   before anything that sets `display`. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 20px 16px 80px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

header,
nav,
main,
.toolbar,
.banner,
#app > * {
  max-width: var(--maxw);
  margin-inline: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; margin-bottom: 4px; }
h3 { font-size: 15px; margin: 18px 0 6px; }
h4 { font-size: 16px; }

p { margin: 0 0 8px; }

/* ── focus: visible on every surface, and never colour alone ─────────────── */

:focus-visible {
  outline: 3px solid var(--line-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── header ──────────────────────────────────────────────────────────────── */

header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 2px;
}

/* Status and sign-out share the right-hand end of the header. Baseline-aligned
   so the button does not drag the status line off the header's bottom edge. */
.header-end {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* The status line is the operator's only signal that a save landed, so it says
   what happened in words; the colour is a second cue, never the only one. */
.status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.status.saving::before { content: "… "; }
.status.saved::before { content: "✓ "; }
.status.failed::before { content: "✕ "; }
.status.saved { color: var(--ok); }
.status.failed { color: var(--danger); font-weight: 600; }

/* ── banners ─────────────────────────────────────────────────────────────── */

.banner {
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 10px auto;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
}
.banner.conflict { border-color: var(--amber-deep); }
.banner.conflict::before { content: "⚠ "; font-weight: 700; }
.banner.error { border-color: var(--danger); color: var(--danger); }
.banner.error::before { content: "✕ "; font-weight: 700; }
.banner button { margin-top: 8px; }

/* ── toolbars, nav ───────────────────────────────────────────────────────── */

/* The client row and the audit row are one grid, not two independent flex
   rows. Five shared columns mean the selects start at the same x and each
   button column is as wide as the wider of its two labels — so "+ Klient" and
   "+ Audit" come out the same size instead of each hugging its own text.
   `display: contents` on the rows is what lets their children join the outer
   grid; the row divs carry no semantics, so nothing leaves the accessibility
   tree with them. The delete column is last on purpose: arming it swaps in
   "Naozaj zmazať?" and only its own right edge moves.

   The select column is `0.5fr`, not `1fr`: a flex factor below 1 takes that
   fraction of the leftover space instead of all of it, so the two fields come
   out at half the width they used to stretch to and the buttons sit next to
   them rather than out at the right edge. */
.toolbars {
  display: grid;
  grid-template-columns: max-content minmax(0, 0.5fr) repeat(3, max-content);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.toolbars > .toolbar { display: contents; }
/* A select's intrinsic width follows its longest option — a client with a long
   name would otherwise push the buttons off the row. */
.toolbars > .toolbar > select { min-width: 0; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Below this the five columns stop fitting, and each row goes back to wrapping
   on its own — alignment is worth less than not overflowing the screen. */
@media (max-width: 720px) {
  .toolbars { display: block; }
  .toolbars > .toolbar { display: flex; }
}
.toolbar > label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px auto 20px;
}
/* 11px, not 12px, so all eight sections sit on one line. JetBrains Mono has a
   fixed advance of 0.6em, so this is arithmetic rather than taste: at 12px the
   eight labels plus padding and gaps come to ~1137px against the 1120px of
   --maxw, and the row wraps. At 11px it is ~1065px. The same size the toolbar
   labels already use. tests/test_page.py recomputes this, so adding a section
   or lengthening a label fails there rather than silently wrapping again. */
nav button {
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 999px;
  padding: 8px 13px;
}
nav button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
  font-weight: 600;
}

/* ── cards ───────────────────────────────────────────────────────────────── */

section.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  margin-bottom: 16px;
}

/* Section codes are the one place amber earns its keep — on a card, where
   --amber-deep clears AA. */
.sec-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--amber-deep);
  margin-bottom: 6px;
}
.lead { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }
.small { font-size: 13px; color: var(--ink-soft); }
.quote { font-style: italic; }

.subcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ── controls ────────────────────────────────────────────────────────────── */

input,
select,
textarea,
button {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-control);
  border-radius: 8px;
  padding: 8px 10px;
}
input,
textarea { width: 100%; }
textarea { min-height: 62px; resize: vertical; line-height: 1.55; }

button {
  cursor: pointer;
  background: var(--paper);
  font-weight: 500;
  width: auto;
}
button:hover:not(:disabled) { border-color: var(--line-strong); }
button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
  font-weight: 600;
}

/* A control that has fired stops being clickable — the double submit that
   creates two clients, or starts two paid evaluations, is a real cost. */
button:disabled,
button[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
button[aria-busy="true"]::after { content: " …"; }

/* The armed second click of a delete. Ported from the prototype, which used it
   because artifact sandboxes block confirm() — kept because it is simply
   better than a native dialog: it undoes itself if you just wait. */
button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}
button.armed {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--card);
  font-weight: 700;
}

.chk { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.chk input { width: 18px; height: 18px; margin-top: 3px; }

.q { margin-bottom: 16px; }
.q > label { display: block; font-weight: 600; margin-bottom: 3px; }
.q .hint { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.q .num { font-family: var(--font-mono); color: var(--amber-deep); margin-right: 6px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }

/* ── inline rename, replacing prompt() ───────────────────────────────────── */

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--amber-deep);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px auto;
}
.inline-form input { width: 280px; }
.inline-form label { font-size: 13px; color: var(--ink-soft); }

/* ── empty states ────────────────────────────────────────────────────────── */

/* Written, not just absent: an empty list should say what to do next. */
.empty {
  color: var(--ink-soft);
  font-size: 14px;
  padding: 14px;
  border: 1px dashed var(--line-control);
  border-radius: 10px;
  background: var(--paper);
}

/* ── tables ──────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th,
td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; }
th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
td input { padding: 6px 8px; }
/* The 1–5 score inputs. A class rather than a style attribute, because the CSP
   in D-015 blocks inline styles. */
.narrow { width: 60px; }
.score { font-family: var(--font-mono); color: var(--amber-deep); font-weight: 700; }
.calc { font-family: var(--font-mono); font-size: 13px; color: var(--ok); }

/* ── exports ─────────────────────────────────────────────────────────────── */

.exportbox {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  max-height: 380px;
  overflow: auto;
}

/* ── evaluation ──────────────────────────────────────────────────────────── */

.steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }

/* A leading mark and the border weight carry the state; colour only reinforces
   it (WCAG 1.4.1). The failed state is the one an operator must not miss. */
.step {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-control);
  color: var(--ink-soft);
}
.step::before { content: "○ "; }
.step.running { border-color: var(--amber-deep); color: var(--amber-deep); }
.step.running::before { content: "◐ "; }
.step.ok { border-color: var(--ok); color: var(--ok); }
.step.ok::before { content: "✓ "; }
.step.failed {
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 700;
  border-width: 2px;
}
.step.failed::before { content: "✕ "; }

.rec {
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber-deep);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--card);
}

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.kv > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--paper);
}
.kv .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.kv .v { font-weight: 600; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
ul.plain li:last-child { border-bottom: none; }

/* ── login ───────────────────────────────────────────────────────────────── */

.login {
  max-width: 340px;
  margin: 14vh auto;
  display: grid;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.login form { display: grid; gap: 10px; }
.err { color: var(--danger); font-size: 14px; }
.err::before { content: "✕ "; }

/* ── motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}