/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (deal 2/3, seed madla-zakaznicka-linka-czechai-861e·104cedb2·2026-10-28·r0)
 * nav: top bar, wordmark and live line status · signature: the measurement ledger, every answer timed per stage on one ruler · states: loading, empty, error, full, handed-over
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S4 R3 V4 · weakest: H, the screen opens on a plain head; the call key and the ledger carry it instead of ornament */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --bar-h: 56px;
  --panel-pad: var(--space-md);
  --msg-max: 62ch;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.skryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* bar */
.bar { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.bar__in { min-height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.znacka { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); text-decoration: none; letter-spacing: var(--tracking-display); }
.znacka span { color: var(--color-accent); font-weight: 500; }
.stav { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.stav[data-ok="1"] { color: var(--color-success); }
.stav[data-ok="0"] { color: var(--color-error); }

/* uvod */
.uvod { padding-block: var(--space-2xl) var(--space-xl); }
.uvod h1 { font-size: var(--text-3xl); max-width: 24ch; }
.uvod__veta { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 52ch; }

/* plocha */
.plocha { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; padding-bottom: var(--space-3xl); }
.bok { display: grid; gap: var(--gap-columns); min-width: 0; }
@media (max-width: 60rem) { .plocha { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--panel-pad); min-width: 0;
}
@supports (corner-shape: bevel) {
  .panel { border-radius: var(--cut-l) 4px; corner-shape: bevel round bevel round; }
}
.panel__titulek { font-size: var(--text-lg); max-width: none; }
.pozn { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3xs); }

/* hovor */
.hovor { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--space-sm); min-height: min(72vh, 680px); }
.hovor__hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.hovor__akce { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.hovor__hlas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-accent-wash); border-radius: var(--radius-input); color: var(--color-ink); }
.hovor__hlas p { font-weight: 500; }
.vlna { display: flex; gap: var(--space-3xs); align-items: center; height: 20px; }
.vlna span { width: 3px; height: 100%; background: var(--color-accent); border-radius: 2px; transform: scaleY(0.25); transform-origin: center; transition: transform var(--dur-micro) var(--ease-out); }
.hovor__hlas[data-mluvi="1"] .vlna span { animation: vlna 0.9s var(--ease-in-out) infinite; }
.hovor__hlas[data-mluvi="1"] .vlna span:nth-child(2) { animation-delay: 0.12s; }
.hovor__hlas[data-mluvi="1"] .vlna span:nth-child(3) { animation-delay: 0.24s; }
.hovor__hlas[data-mluvi="1"] .vlna span:nth-child(4) { animation-delay: 0.36s; }
.hovor__hlas[data-mluvi="1"] .vlna span:nth-child(5) { animation-delay: 0.48s; }
@keyframes vlna { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

.zpravy { list-style: none; margin: 0; padding: var(--space-xs) var(--space-3xs); display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; max-height: 56vh; min-height: 240px; border-block: var(--rule-hair) solid var(--color-rule); }
.zprava { max-width: var(--msg-max); display: grid; gap: var(--space-3xs); }
.zprava__kdo { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.zprava__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.zprava--zakaznik { align-self: end; text-align: left; }
.zprava--zakaznik .zprava__text { background: var(--color-paper-3); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); }
.zprava--operator .zprava__text { border-left: 2px solid var(--color-accent); padding-left: var(--space-sm); }
.zprava--system .zprava__text { color: var(--color-muted); font-size: var(--text-sm); }
.zprava--chyba .zprava__text { color: var(--color-error); }
.zdroje { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.zdroje a { color: var(--color-ink-2); }
.zdroje a:hover { color: var(--color-accent); }
.nacita { display: grid; gap: var(--space-2xs); width: min(100%, 40ch); }
.nacita span { height: 10px; border-radius: 3px; background: var(--color-paper-3); animation: tep 1.2s var(--ease-in-out) infinite; }
.nacita span:nth-child(2) { width: 80%; }
@keyframes tep { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.prazdno p { color: var(--color-muted); }
.navrhy { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

.psani { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); align-items: end; }
textarea, input {
  width: 100%; color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input);
  padding: var(--space-xs) var(--space-sm); min-height: 40px; resize: vertical;
  transition: border-color var(--dur-micro) var(--ease-out);
}
textarea:hover, input:hover { border-color: var(--color-ink-2); }
textarea:focus-visible, input:focus-visible { transition: none; outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-wash), 0 0 0 3px var(--color-focus); }
textarea:disabled, input:disabled { background: var(--color-paper-2); color: var(--color-muted); }
input[aria-invalid="true"] { border-color: var(--color-error); }

/* keys */
.klavesa, .cip {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm);
  min-height: 40px; padding: 0 var(--space-sm); color: var(--color-ink);
  background: var(--color-key-face); border: var(--rule-hair) solid var(--color-key-edge); border-radius: var(--radius-input);
  box-shadow: var(--shadow-key); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.cip { min-height: 36px; box-shadow: none; background: var(--color-paper-2); border-color: var(--color-rule-2); }
.klavesa:hover, .cip:hover { transform: translateY(-1px); }
.cip:hover { background: var(--color-accent-wash); }
.klavesa:active, .cip:active, .klavesa[aria-pressed="true"] { transform: translateY(2px); box-shadow: var(--shadow-key-press); }
.klavesa:focus-visible, .cip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.klavesa:disabled, .cip:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; }
.klavesa--hlavni { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent-edge); box-shadow: var(--shadow-key-accent); }
.klavesa--hlavni:hover { background: var(--color-accent-deep); }
.klavesa[aria-pressed="true"] { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent-deep); }
.klavesa[aria-busy="true"] { cursor: progress; opacity: 0.8; }

/* ledger */
.tabulka-obal { overflow-x: auto; margin-top: var(--space-sm); }
.mereni { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mereni th { font-family: var(--font-display); font-weight: 500; color: var(--color-muted); text-align: right; padding: var(--space-2xs) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.mereni th:first-child, .mereni td:first-child { text-align: left; padding-left: 0; }
.mereni td { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; padding: var(--space-2xs) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.mereni td:first-child { font-family: var(--font-body); }
.mereni tr:first-child td { background: var(--color-accent-wash); }
.mereni__prazdno td { font-family: var(--font-body); color: var(--color-muted); text-align: left; background: none !important; }
.pravitko { margin-top: var(--space-sm); display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--color-paper-3); }
.pravitko span { display: block; height: 100%; min-width: 2px; }
.pravitko .p-stt { background: var(--color-glyph-2); }
.pravitko .p-rag { background: var(--color-glyph-3); }
.pravitko .p-llm { background: var(--color-accent); }
.pravitko .p-tts { background: var(--color-accent-deep); }
.pravitko .p-sit { background: var(--color-rule-2); }

/* predani */
.predani form { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.predani label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-2xs); }
.predani button { margin-top: var(--space-sm); justify-self: start; }
.chyba { color: var(--color-error); font-size: var(--text-sm); }
.hotovo { margin-top: var(--space-sm); color: var(--color-success); font-weight: 500; }

/* obrazek */
.obrazek { margin: 0; display: grid; gap: var(--space-2xs); }
.obrazek img { border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); }
.obrazek figcaption { color: var(--color-muted); font-size: var(--text-sm); }

/* pata */
.pata { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.pata__in { padding-block: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.pata a:hover { color: var(--color-accent); }