/* apps/website/html/css/system.css — the ausual.day design system.

   Sections 2-8 of docs/superpowers/specs/2026-08-13-pulse-redesign-design.md: type, colour,
   shape, buttons and states. Page-agnostic by rule, not by accident — §8.6 says no page keeps
   its own palette, webfont or radius ramp, so anything wanted here is changed here and the
   estate moves together. Pages link this first, then their own stylesheet for layout.

   Light is a variable swap, not a second stylesheet. */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');

:root, [data-theme="dark"] {
  --bg:#171718; --surface:#1e1e1f; --edge:#3b3b3d; --line:#2d2d2f; --line-2:#222224;
  --ink:#f3f3f4; --ink-2:#adadb0; --ink-3:#94949a; --ink-4:#84848a; --ink-5:#6d6d70;
  --ok:#7fae86; --warn:#c9975e; --err:#cf6b5c;
  --s1:#b9a4f5; --s2:#6fc9c9; --mark:2px; --hdr-h:53px;
}
[data-theme="light"] {
  --bg:#e6e6e8; --surface:#eeeef0; --edge:#9a9aa2; --line:#c9c9d0; --line-2:#d0d0d6;
  --ink:#141518; --ink-2:#4a4a50; --ink-3:#5a5a62; --ink-4:#6a6a72; --ink-5:#7c7c84;
  --ok:#2f7a3e; --warn:#b07213; --err:#c0392b;
  --s1:#5f5296; --s2:#2a6f73; --mark:3px;   /* 2px marks vanish on a pale ground */
}

body { background:var(--bg); color:var(--ink-2);
  font-family:Urbanist,ui-sans-serif,system-ui,sans-serif;
  font-variant-numeric:tabular-nums; margin:0 }
* { box-sizing:border-box; border-radius:0 }

.p-sec { margin-bottom:22px }
.p-label { display:flex; justify-content:space-between; align-items:center;
  border-left:2px solid var(--edge); padding-left:9px; margin-bottom:11px }
.p-label h4 { margin:0; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3) }
.p-label h4.clickable { cursor:pointer; border-bottom:1px solid transparent }
.p-label h4.clickable:hover { color:var(--ink); border-bottom-color:var(--edge) }
.p-label .p-meta { font-size:12px; color:var(--ink-4) }
.p-label.warn { border-left-color:var(--warn) } .p-label.err { border-left-color:var(--err) }

.p-card { background:var(--surface); border-left:2px solid var(--edge); padding:10px 12px }
.p-card.warn { border-left-color:var(--warn) } .p-card.err { border-left-color:var(--err) }
.p-card .k { display:block; font-size:12px; color:var(--ink-4); margin-bottom:3px }
.p-card .v { display:block; font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.015em }
.p-card .v u { text-decoration:none; font-size:12px; color:var(--ink-4); font-weight:400; margin-left:2px }
.p-card .sub { display:block; font-size:12px; color:var(--ink-4); margin-top:5px }

.p-meter { height:2px; background:var(--line); margin-top:8px }
.p-meter > i { display:block; height:100%; background:var(--s1) }
.p-meter.warn > i { background:var(--warn) } .p-meter.err > i { background:var(--err) }

.p-bar { width:var(--mark); height:11px; display:inline-block; vertical-align:-1px;
  margin-right:8px; background:var(--edge) }
.p-bar.ok { background:var(--ok) } .p-bar.warn { background:var(--warn) } .p-bar.err { background:var(--err) }

table.p-table { width:100%; border-collapse:collapse }
.p-table th { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4);
  text-align:left; font-weight:500; padding:0 10px 7px 0; border-bottom:1px solid var(--line) }
/* A right-aligned column butted against the next left-aligned one has no gutter — the
   headers read as "SIZEPROGRESS" and "RATIOSTATE". Keep the right padding except on the
   last column, which has nothing to collide with. Found by screenshotting the page. */
.p-table th.n, .p-table td.n { text-align:right; padding-right:14px }
.p-table th:last-child, .p-table td:last-child { padding-right:0 }
.p-table td { font-size:13px; padding:8px 10px 8px 0; border-bottom:1px solid var(--line-2); color:var(--ink-2) }
.p-table td.nm, .p-table td.n { color:var(--ink) }
.p-table tr.sel td, .p-table tbody tr:hover td { background:var(--line-2) }

.p-btn { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
  cursor:pointer; user-select:none; padding:5px 0; background:none; border:0; font-family:inherit;
  transition:color 120ms ease }
.p-btn:hover { color:var(--ink) }
.p-btn svg { flex-shrink:0; stroke:var(--ink-4); fill:none; stroke-width:1.4; transition:stroke 120ms ease }
.p-btn:hover svg { stroke:var(--s1) }
.p-btn.busy { color:var(--ink-4); cursor:default } .p-btn.busy svg { stroke:var(--s1); animation:p-spin 1.4s linear infinite }
.p-btn.done svg { stroke:var(--ok) } .p-btn.fail { color:var(--err) } .p-btn.fail svg { stroke:var(--err) }
@keyframes p-spin { to { transform:rotate(360deg) } }

.p-btn-2 { font-size:13px; color:var(--ink-2); cursor:pointer; padding:0 11px;
  background:none; border:0; font-family:inherit }
.p-btn-2:first-child { padding-left:0 }
.p-btn-2 + .p-btn-2 { border-left:1px solid var(--line) }
.p-btn-2:hover { color:var(--ink) } .p-btn-2.del:hover { color:var(--err) }

/* ── Page chrome: the header row and the action strip ──────────────────────── */
.p-hdr { display:flex; justify-content:space-between; align-items:baseline;
  padding:15px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5 }
.p-wm { font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.02em }
.p-wm em { font-style:normal; color:var(--ink-5); font-weight:400; margin-left:10px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.p-hmeta { display:flex; gap:15px; align-items:center; font-size:12px; color:var(--ink-4) }
.p-acts { display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap }