/* Terminal aesthetic, palette C (spec §5.4). System monospace only -- SF Mono on iOS,
   zero bytes, no webfont request. */
:root {
  --bg:#0d1117; --fg:#c9d1d9; --dim:#6e7681; --hdr:#8b949e; --bright:#e6edf3;
  --up:#3fb950; --down:#f85149; --trim:#d29922; --add:#58a6ff;
}
* { box-sizing:border-box; }
body {
  margin:0; padding:14px 12px; background:var(--bg); color:var(--fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.label{color:var(--hdr);margin-right:8px}
.big{color:var(--bright);font-weight:600;font-size:16px}
.head{margin-bottom:14px}
.split{color:var(--hdr)}
.pctshare{margin-left:8px}
.stamp{color:var(--hdr);text-align:right}
.thead,.row{display:grid;grid-template-columns:4.5em 1fr 4.2em 4.6em 3.4em;gap:6px;
            white-space:nowrap}
.thead{color:var(--hdr);border-bottom:1px solid #21262d;margin-bottom:4px}
/* The row line is the tap target (spec §5.3). Cursor is the desktop affordance; the
   phone has none, which is why the handler must be on the row and not on a small glyph. */
.row{cursor:pointer}
.val,.row span:nth-child(3),.row span:nth-child(4){text-align:right}
.up{color:var(--up)} .down{color:var(--down)}
.zone-trim{background:var(--trim);color:var(--bg);border-radius:3px;text-align:center;
           font-weight:600}
.zone-add {background:var(--add); color:var(--bg);border-radius:3px;text-align:center;
           font-weight:600}
.zone-none{color:var(--dim);text-align:center}
.detail{color:var(--hdr);padding:2px 0 6px 1.5em}
.banner{color:var(--down);font-weight:600;margin-bottom:10px}
.refresh{position:fixed;right:14px;bottom:14px;background:#21262d;color:var(--fg);
         border:1px solid #30363d;border-radius:8px;font-size:18px;padding:8px 12px;
         font-family:inherit}

/* Stale: a failed fetch desaturates EVERYTHING, so degradation is legible from arm's
   length without reading a character (spec D10). The banner stays fully saturated. */
.stale{color:var(--dim)}
.stale .big{color:#7d8590}
.stale .up{color:#35603f}
.stale .down{color:#6e3b38}
.stale .zone-trim{background:#5c4a1f;color:var(--hdr)}
.stale .zone-add {background:#24405e;color:var(--hdr)}
.stale .label,
.stale .thead,
.stale .stamp,
.stale .split,
.stale .detail{color:#565d66}
.stale .banner{color:var(--down)}

/* Phase 3b. Bottom-left so it cannot be hit while reaching for .refresh, which sits
   bottom-right and is tapped constantly -- a sign-out one pixel from a refresh is a
   trap on a phone. Muted rather than accented: it is the rarest action on the screen. */
.logout{position:fixed;left:14px;bottom:14px;background:transparent;color:#565d66;
        border:1px solid #30363d;border-radius:8px;font-size:12px;padding:6px 10px;
        font-family:inherit}
.signin{display:inline-block;margin-top:14px;color:var(--fg);text-decoration:none;
        border:1px solid #30363d;border-radius:8px;padding:8px 14px;font-size:14px}