/* ============================================================
   stav.nousoos.com: client status pages in the NOUSOOS world.
   Paper and ink, one hairline, BasierSquare. Colour appears only
   when something fails ("pripálené"); everything else is monochrome.
   State vocabulary, used everywhere on the page:
     solid ink square   = runs
     hatched burnt cell = failure that day / now
     pale square        = no data yet
   ============================================================ */

@font-face { font-family:'BasierSquare'; src:url('fonts/BasierSquare-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'BasierSquare'; src:url('fonts/BasierSquare-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'BasierSquare'; src:url('fonts/BasierSquare-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --bg:         #F1EEEA;
  --bg-deep:    #e6e1d9;
  --ink:        #0a0a0a;
  --ink-soft:   #5a544a;
  --rule:       #d8d2c4;
  --inverse:    #0a0a0a;
  --inverse-fg: #F1EEEA;
  --inverse-soft: #cbc6bb;
  --inverse-mute: #8a8478;
  --fail:       #b3261e;   /* burnt crust: the only colour, and only for failure */
  --max:        1440px;
  --gutter:     clamp(20px, 4vw, 56px);
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --hatch: repeating-linear-gradient(135deg, var(--fail) 0 2px, transparent 2px 4.5px);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scrollbar-color:var(--ink-soft) var(--bg); }
body {
  font-family:'BasierSquare','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection { background:var(--ink); color:var(--inverse-fg); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.foot :focus-visible { outline-color:var(--inverse-fg); }
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

.shell { max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.skip {
  position:absolute; left:var(--gutter); top:-60px; z-index:10;
  background:var(--ink); color:var(--inverse-fg); padding:10px 14px;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
}
.skip:focus { top:12px; }

/* tiny tracked label, the brand's "— cookies · z našej pece" voice */
.label {
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* ─── top bar ─── */
.top {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:72px;
}
.top__brand { font-weight:600; font-size:18px; letter-spacing:-0.04em; }
.top__brand span { font-weight:400; color:var(--ink-soft); letter-spacing:-0.02em; }
.top__brand:hover span { color:var(--ink); }

.langs { display:flex; border:1px solid var(--ink); }
.langs button {
  min-width:44px; min-height:34px; padding:0 12px;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}
.langs button + button { border-left:1px solid var(--ink); }
.langs button[aria-pressed="true"] { background:var(--ink); color:var(--inverse-fg); }
.langs button:not([aria-pressed="true"]):hover { background:var(--bg-deep); }

/* ─── hero: client name, one verdict line ─── */
.hero {
  padding-top:clamp(56px, 10vw, 160px);
  padding-bottom:clamp(56px, 8vw, 128px);
}
.hero__name {
  margin:0;
  font-weight:600;
  font-size:clamp(52px, 11vw, 176px);
  line-height:0.86;
  letter-spacing:-0.05em;
  text-transform:lowercase;
  text-wrap:balance;
  overflow-wrap:anywhere;
  max-width:14ch;
}
.hero__name.keep-case { text-transform:none; }
.verdict {
  display:flex; align-items:baseline; gap:0.42em;
  margin:clamp(28px, 4vw, 52px) 0 0;
  font-weight:500;
  font-size:clamp(24px, 2.6vw, 38px);
  line-height:1.15;
  letter-spacing:-0.025em;
}
.verdict .mark { width:0.56em; height:0.56em; flex:none; transform:translateY(-0.02em); }
.verdict[data-state="down"] { color:var(--fail); }
.verdict[data-state="stale"], .verdict[data-state="error"], .verdict[data-state="loading"] { color:var(--ink-soft); }
.hero__meta { margin:14px 0 0; font-size:14px; color:var(--ink-soft); letter-spacing:0.01em; max-width:62ch; }
.hero__meta strong { font-weight:500; color:var(--fail); }

/* the shared square: solid / hatched / pale */
.mark { display:inline-block; background:var(--ink); }
.mark--fail { background:var(--hatch); box-shadow:inset 0 0 0 1.5px var(--fail); }
.mark--none { background:var(--bg-deep); box-shadow:inset 0 0 0 1px var(--rule); }
.mark--wait { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-soft); }

/* ─── notice from Kuma (planned maintenance etc.) ─── */
.notice { background:var(--inverse); color:var(--inverse-fg); padding:clamp(24px, 3vw, 40px); margin-bottom:clamp(40px, 6vw, 80px); }
.notice[hidden] { display:none; }
.notice .label { color:var(--inverse-mute); }
.notice h3 { margin:12px 0 8px; font-size:clamp(22px, 2.4vw, 32px); font-weight:600; letter-spacing:-0.03em; line-height:1.1; text-transform:lowercase; }
.notice p { margin:0; color:var(--inverse-soft); font-size:15px; max-width:68ch; white-space:pre-line; }

/* ─── sections ─── */
.sec { padding-bottom:clamp(72px, 10vw, 160px); }
.sec__head {
  display:flex; align-items:baseline; gap:clamp(16px, 2.4vw, 32px);
  padding-bottom:22px;
  border-bottom:1px solid var(--ink);
}
.sec__num { font-size:13px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); min-width:2.2em; }
.sec__head h2 {
  margin:0; flex:1;
  font-weight:600; font-size:clamp(30px, 3.8vw, 52px); line-height:1; letter-spacing:-0.035em;
  text-transform:lowercase;
}

/* ─── one website = one ledger row ─── */
.sites { list-style:none; margin:0; padding:0; }
.site { padding:clamp(28px, 3.4vw, 44px) 0 clamp(32px, 4vw, 52px); border-bottom:1px solid var(--rule); }
.site__head { display:flex; align-items:baseline; gap:clamp(14px, 2vw, 28px); flex-wrap:wrap; }
.site__no { font-size:11px; font-weight:500; letter-spacing:0.18em; color:var(--ink-soft); min-width:3.4em; }
.site__host {
  flex:1 1 auto; min-width:0;
  font-weight:600; font-size:clamp(26px, 3.4vw, 46px); line-height:1.02; letter-spacing:-0.035em;
  text-transform:lowercase; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.16em;
  text-decoration-color:transparent;
  transition:text-decoration-color 200ms var(--ease);
}
.site__host:hover { text-decoration-color:currentColor; }
.state {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap;
}
.state .mark { width:9px; height:9px; }
.state--down { background:var(--fail); color:var(--inverse-fg); padding:7px 11px 6px; }
.state--down .mark { background:var(--inverse-fg); }
.state--pending, .state--paused, .state--maintenance { color:var(--ink-soft); }

/* 90-day strip: one cell per day */
.bars {
  position:relative;
  display:grid; grid-template-columns:repeat(var(--days, 90), 1fr); gap:3px;
  height:38px; margin:clamp(22px, 2.6vw, 32px) 0 10px;
}
.bars i { display:block; background:var(--ink); }
.bars i.d--fail { background:var(--hatch); box-shadow:inset 0 0 0 1.5px var(--fail); }
.bars i.d--none { background:var(--bg-deep); }
.bars i:hover { outline:1.5px solid var(--ink); outline-offset:2px; }
.bars.is-revealing { animation:reveal 900ms var(--ease) both; }
@keyframes reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
.bars__scale { display:flex; justify-content:space-between; gap:12px; }

.tip {
  position:fixed; z-index:20; pointer-events:none;
  background:var(--ink); color:var(--inverse-fg);
  padding:8px 11px 7px; font-size:12px; letter-spacing:0.02em; white-space:nowrap;
  transform:translate(-50%, calc(-100% - 10px));
  opacity:0; transition:opacity 120ms var(--ease);
}
.tip.on { opacity:1; }
.tip b { font-weight:500; }

/* four facts per site, hairline columns like the brand's step grid */
.facts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:clamp(24px, 3vw, 36px) 0 0; }
.fact { margin:0; padding:2px 20px 0; border-left:1px solid var(--rule); min-width:0; }
.fact:first-child { border-left:0; padding-left:0; }
.fact dt { margin:0 0 12px; }
.fact dd { margin:0; }
.fact__value {
  font-weight:500; font-size:clamp(24px, 2.4vw, 34px); line-height:1.05; letter-spacing:-0.03em;
  display:flex; align-items:baseline; gap:0.32em;
}
.fact__value .mark { width:0.42em; height:0.42em; }
.fact__sub { margin-top:8px !important; font-size:13px; color:var(--ink-soft); line-height:1.45; }
.fact.is-warn .fact__value, .fact.is-warn .fact__sub strong { color:var(--fail); }
.fact__sub strong { font-weight:500; }
.fact.is-empty .fact__value { color:var(--ink-soft); }

.legend { display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:24px; }
.legend span { display:inline-flex; align-items:center; gap:10px; }
.legend .mark { width:12px; height:12px; }

/* ─── incident log ─── */
.log { list-style:none; margin:0; padding:0; }
.log li {
  display:grid; grid-template-columns:minmax(7.5em, 0.9fr) 3fr minmax(5.5em, auto); gap:16px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--rule);
}
.log__date { font-size:14px; color:var(--ink-soft); }
.log__site { font-weight:500; font-size:17px; letter-spacing:-0.015em; overflow-wrap:anywhere; }
.log__len { font-weight:500; font-size:15px; color:var(--fail); text-align:right; display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.log__len .mark { width:10px; height:10px; }
.log__more { padding-top:18px; }
.empty {
  margin:0; padding:clamp(28px, 3.4vw, 44px) 0 0;
  font-weight:500; font-size:clamp(22px, 2.4vw, 34px); letter-spacing:-0.025em; line-height:1.15;
  display:flex; align-items:baseline; gap:0.42em;
}
.empty .mark { width:0.5em; height:0.5em; }

/* ─── footer: the black block with the crumb texture ─── */
.foot { background:var(--inverse); color:var(--inverse-fg); position:relative; overflow:hidden; }
.foot__bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:url('textura.svg'); background-size:max(100%, 900px) auto; background-position:right top; background-repeat:no-repeat;
  opacity:.13;
}
.foot__inner {
  position:relative;
  display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:48px; align-items:end;
  padding-top:clamp(72px, 10vw, 150px); padding-bottom:clamp(40px, 5vw, 64px);
}
.foot__claim {
  margin:0; font-weight:600; font-size:clamp(40px, 5.6vw, 88px); line-height:0.96; letter-spacing:-0.045em;
  text-transform:lowercase;
}
.foot__hl {
  display:inline-block; background:var(--inverse-fg); color:var(--ink);
  padding:0.02em 0.2em 0.1em 0.06em; margin-top:0.08em;
  transition:background-color 200ms var(--ease), color 200ms var(--ease);
}
.foot__hl:hover { background:var(--bg-deep); }
.foot__side p { margin:0 0 22px; font-size:14px; color:var(--inverse-soft); max-width:34ch; }
.foot__link {
  display:inline-flex; align-items:center; gap:14px; padding-bottom:8px;
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  border-bottom:1px solid var(--inverse-fg);
}
.foot__link svg { width:26px; height:12px; transition:transform 260ms var(--ease); }
.foot__link:hover svg { transform:translateX(5px); }
.foot__bottom {
  position:relative;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:26px; border-top:1px solid var(--rule);
  font-size:12px; letter-spacing:0.04em; color:var(--inverse-mute);
}
.foot__word { font-size:11px; letter-spacing:0.32em; text-transform:uppercase; }

/* ─── root page ─── */
.intro { padding-top:clamp(56px, 10vw, 160px); padding-bottom:clamp(72px, 10vw, 160px); }
.intro .hero__name { max-width:none; font-size:clamp(96px, 22vw, 340px); }
.intro__lead { margin:clamp(28px, 4vw, 52px) 0 0; font-weight:500; font-size:clamp(22px, 2.4vw, 34px); line-height:1.26; letter-spacing:-0.025em; max-width:26ch; text-wrap:balance; }
.intro__small { margin:18px 0 0; font-size:14px; color:var(--ink-soft); max-width:52ch; }
.btn {
  display:inline-flex; align-items:center; gap:14px; margin-top:36px;
  padding:14px 18px; border:1px solid var(--ink);
  font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  transition:background-color 180ms var(--ease), color 180ms var(--ease);
}
.btn svg { width:26px; height:12px; }
.btn:hover { background:var(--ink); color:var(--inverse-fg); }

/* ─── loading skeleton: rows exist before data arrives ─── */
.is-loading .site__host, .is-loading .fact__value { color:var(--ink-soft); }

/* ─── responsive ─── */
@media (max-width:980px) {
  .facts { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:26px; }
  .fact:nth-child(3) { border-left:0; padding-left:0; }
}
@media (max-width:720px) {
  .foot__inner { grid-template-columns:1fr; gap:36px; }
  .bars { height:30px; gap:2px; }
  .log li { grid-template-columns:1fr auto; gap:4px 16px; }
  .log__date { grid-column:1 / -1; font-size:13px; }
}
@media (max-width:420px) {
  .fact { padding:0 12px; }
  .fact dt { letter-spacing:0.1em; }
  .fact__value { font-size:22px; }
  .site__no { min-width:0; }
}
@media (prefers-reduced-motion:reduce) {
  .bars.is-revealing { animation:none; }
  * { transition:none !important; }
}
@media print {
  .langs, .tip, .skip { display:none; }
  .foot { background:none; color:var(--ink); }
  .foot__bg { display:none; }
}
.noscript { padding-top:24px; padding-bottom:24px; font-size:14px; color:var(--ink-soft); }