/* Tabellio "Moonlight" — tokens: _meta/design-lokalny.md (single source of color). */
:root {
  --night:     oklch(0.16 0.03 240);
  --surface:   oklch(0.20 0.035 238);
  --surface-2: oklch(0.24 0.04 236);
  --moon:      oklch(0.82 0.09 235);
  --glow:      oklch(0.90 0.06 230);
  --silver:    oklch(0.92 0.01 240);
  --muted:     oklch(0.68 0.02 240);
  --line:      oklch(0.32 0.03 238);
  --full-moon: oklch(0.88 0.06 95);
  --warn:      oklch(0.75 0.12 70);
  --danger:    oklch(0.62 0.17 25);
  --radius: 12px;
}

@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fonts/Figtree.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body {
  min-height: 100vh; color: var(--silver); background: var(--night);
  font: 400 15px/1.55 "Figtree", system-ui, sans-serif;
}
h1, h2, h3, .num, .brand { font-family: "Space Grotesk", system-ui, sans-serif; }
a { color: var(--moon); text-decoration: none; }
a:hover { color: var(--glow); }
code, .mono { font-family: ui-monospace, Consolas, monospace; }

/* night sky: radial glow + sparse static stars (no animation) */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 78% -10%, oklch(0.24 0.045 238 / .8), transparent 60%),
    radial-gradient(2px 2px at 12% 22%, oklch(0.92 0.01 240 / .22), transparent 100%),
    radial-gradient(2px 2px at 33% 64%, oklch(0.92 0.01 240 / .16), transparent 100%),
    radial-gradient(2px 2px at 58% 18%, oklch(0.92 0.01 240 / .20), transparent 100%),
    radial-gradient(2px 2px at 82% 48%, oklch(0.92 0.01 240 / .14), transparent 100%),
    radial-gradient(2px 2px at 91% 82%, oklch(0.92 0.01 240 / .18), transparent 100%),
    var(--night);
}

.topbar {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
}
.brand { font-size: 22px; font-weight: 600; color: var(--silver); letter-spacing: .02em; }
.brand-moon { color: var(--moon); text-shadow: 0 0 18px oklch(0.90 0.06 230 / .55); }
.brand-sub { color: var(--muted); font-size: 13px; }
.logout-form { margin-left: auto; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.page-head.sect { margin-top: 32px; }
.page-head h1 { font-size: 26px; font-weight: 600; }
.page-head .link-out, .page-head .primary { margin-left: auto; }
.crumbs { margin: 4px 0 12px; font-size: 13px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }

button {
  font: inherit; cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--line); padding: 8px 16px;
  background: var(--surface-2); color: var(--silver);
}
button.primary {
  background: var(--moon); border-color: var(--moon); color: var(--night); font-weight: 600;
}
button.primary:hover { background: var(--glow); box-shadow: 0 0 16px oklch(0.90 0.06 230 / .35); }
button.ghost { background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--silver); border-color: var(--muted); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.card {
  background: linear-gradient(180deg, var(--surface), oklch(0.18 0.032 239));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.card-head h2 { font-size: 18px; font-weight: 600; }
.card-head h2 a { color: var(--silver); }
.card-head h2 a:hover { color: var(--glow); }
.card-head .primary { margin-left: auto; flex-shrink: 0; }

/* moon phases = statuses (signature element) — must read at a glance */
.phase { font-size: 30px; line-height: 1; flex-shrink: 0; filter: saturate(1.1); }
.phase.full { color: var(--full-moon); text-shadow: 0 0 18px oklch(0.88 0.06 95 / .7); }
.phase.half { color: var(--warn); text-shadow: 0 0 14px oklch(0.75 0.12 70 / .5); }
.phase.new  { color: var(--muted); text-shadow: 0 0 10px oklch(0.68 0.02 240 / .35); }
.page-head .phase { font-size: 34px; vertical-align: -2px; }

.facts { display: grid; gap: 6px; font-size: 14px; }
.facts > div { display: flex; gap: 10px; }
.facts dt { color: var(--muted); min-width: 128px; flex-shrink: 0; }
.facts dd { overflow-wrap: anywhere; }
.chip {
  display: inline-block; padding: 1px 9px; margin: 0 4px 4px 0;
  border-radius: 999px; border: 1px solid var(--line); font-size: 12px;
}
.chip.on { color: var(--full-moon); border-color: oklch(0.88 0.06 95 / .45); }
.chip.off { color: var(--muted); text-decoration: line-through; }
.chip.ev { color: var(--moon); }

.stats-row { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.stat .num { display: block; font-size: 26px; font-weight: 600; color: var(--glow); }
.stat .lbl { font-size: 12px; color: var(--muted); }
.spark-box { margin-left: auto; }
.spark-box.big svg { width: 320px; height: 56px; }
.spark { width: 220px; height: 44px; }
.spark polyline { fill: none; stroke: var(--moon); stroke-width: 2; stroke-linejoin: round; }
.events { margin-top: 10px; }
.events-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.events-table td { padding: 5px 8px; border-top: 1px solid var(--line); }
.events-table .num-cell { text-align: right; color: var(--glow); font-family: "Space Grotesk"; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.detail-grid .wide { grid-column: 1 / -1; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.warn { color: var(--warn); }
.error { color: var(--danger); margin: 8px 0; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* login */
.login-card {
  max-width: 360px; margin: 12vh auto 0; text-align: center;
  background: linear-gradient(180deg, var(--surface), oklch(0.18 0.032 239));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px;
}
.login-moon { font-size: 44px; color: var(--moon); text-shadow: 0 0 26px oklch(0.90 0.06 230 / .6); }
.login-card h1 { margin: 8px 0 2px; }
.login-card form { display: grid; gap: 12px; margin-top: 20px; }
.login-card input {
  font: inherit; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--night); color: var(--silver);
}
.login-card input:focus { outline: none; border-color: var(--moon); }

/* code modal */
.code-modal {
  background: var(--surface); color: var(--silver); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; max-width: 460px;
}
.code-modal::backdrop { background: oklch(0.10 0.02 240 / .75); }
.code-once { color: var(--warn); font-size: 13px; margin: 6px 0 12px; }
.code-value {
  display: block; font-size: 19px; letter-spacing: .04em; text-align: center;
  padding: 14px; border-radius: var(--radius); border: 1px dashed var(--moon);
  background: var(--night); color: var(--glow); user-select: all;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }