/* Chytré úly pro Silicon Hill – shared styles for the dashboard and the setup page.
   Layout: one column of scale cards in a wrapping grid, detail charts below; warm paper + honey accent. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}

:root{
  --bg:#f6f4ee; --panel:#fffdf8; --fg:#1f2429; --muted:#5f6670; --line:#ddd6c6; --line-strong:#a39b8b;
  --accent:#a8680f; --accent-soft:#f4e7cb; --good:#2f7a45; --good-soft:#e1f0e4; --warn:#a33a1f; --warn-soft:#f8e3da;
  --chart-net:#a8680f; --chart-raw:#8a8f96; --chart-cell:#c2410c; --chart-box:#2d6bd6; --chart-bat:#2f7a45;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14171b; --panel:#1b1f24; --fg:#e8e5dd; --muted:#9ca3ad; --line:#2f353d; --line-strong:#59616b;
  --accent:#e3a940; --accent-soft:#3a2f19; --good:#7cc492; --good-soft:#1c3023; --warn:#f08a6c; --warn-soft:#3b211a;
  --chart-net:#e3a940; --chart-raw:#7d858f; --chart-cell:#f28b5b; --chart-box:#78a6f0; --chart-bat:#7cc492; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14171b; --panel:#1b1f24; --fg:#e8e5dd; --muted:#9ca3ad; --line:#2f353d; --line-strong:#59616b;
  --accent:#e3a940; --accent-soft:#3a2f19; --good:#7cc492; --good-soft:#1c3023; --warn:#f08a6c; --warn-soft:#3b211a;
  --chart-net:#e3a940; --chart-raw:#7d858f; --chart-cell:#f28b5b; --chart-box:#78a6f0; --chart-bat:#7cc492; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--font-body)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:24px 56px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}

header.top{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:end;justify-content:space-between;border-bottom:2px solid var(--fg);padding-bottom:14px;margin-bottom:22px}
header.top h1{margin:0;font-size:30px;line-height:1.1;text-wrap:balance}
.kicker{font:600 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.sub{color:var(--muted);margin:4px 0 0;max-width:70ch}
.meta{font:13px var(--font-mono);color:var(--muted);text-align:right}
@media (max-width:640px){.meta{text-align:left}}

h2{font-size:20px;margin:34px 0 12px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h2 .n{font:600 13px var(--font-mono);color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:8px;cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%}
.card:hover{border-color:var(--line-strong)}
.card[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card .name{font-weight:600;font-size:16px}
.card .loc{font-size:12.5px;color:var(--muted);margin-top:-6px}
.card .big{font:600 30px/1.1 var(--font-body);font-variant-numeric:tabular-nums}
.card .big small{font-size:15px;font-weight:400;color:var(--muted)}
.card .rows{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13.5px}
.card .rows dt{color:var(--muted)}
.card .rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.card svg.spark{width:100%;height:44px;display:block}
.chip{font:600 11px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.nehlasi{background:var(--warn-soft);color:var(--warn)}
.chip.ceka{background:var(--accent-soft);color:var(--accent)}
.up{color:var(--good)} .down{color:var(--warn)}

.empty{background:var(--panel);border:1px dashed var(--line-strong);border-radius:10px;padding:22px;color:var(--muted)}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{font:500 13.5px var(--font-body);background:var(--panel);color:var(--fg);border:0;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.toolbar .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;font:500 13.5px var(--font-body);background:var(--panel);color:var(--fg);border:1px solid var(--line-strong);border-radius:8px;padding:6px 12px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 10px 4px;margin-bottom:12px;min-width:0}
.chartbox h3{margin:2px 6px 4px;font-size:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.chartbox h3 .lg{font:400 12.5px var(--font-body);color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.chartbox h3 .lg i{width:16px;height:3px;border-radius:2px;display:inline-block}
.chart{width:100%;min-height:120px}
.note{font-size:13.5px;color:var(--muted);max-width:80ch}
.events{list-style:none;padding:0;margin:6px 0;display:grid;gap:4px;font-size:14px}
.events li{display:flex;gap:12px;flex-wrap:wrap}
.events time{font-family:var(--font-mono);color:var(--muted);font-size:13px;min-width:12ch}

footer{margin-top:44px;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}

/* uPlot theming */
.u-legend{display:none}
.uplot{font-family:var(--font-body)}
.u-select{background:color-mix(in srgb,var(--accent) 15%,transparent)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}