/* Glance — house style from /Users/keith/Max/DESIGN.md (Apple's system, adopted
   2026-08-26). Tokens only: light and dark are both first-class and follow the OS.
   Two regions: reading = 17px, data = 14px. 12px is for labels only, never prose.
   No shadows. Depth is surface change, one hairline, and backdrop blur. */

:root {
  --bg: #f5f5f7; --panel: #ffffff; --panel-2: #fafafc;
  --line: #e0e0e0; --line-soft: #f0f0f0;
  --t1: #1d1d1f; --t2: #333333; --t3: #6e6e6e;
  --accent: #0066cc; --focus: #0071e3; --on-accent: #ffffff;
  --ok: #2e7d4f; --warn: #9a5f0a; --bad: #c0392b;
  --scrim: rgba(0, 0, 0, 0.32);
  --xxs: 4px; --xs: 8px; --sm: 12px; --md: 17px; --lg: 24px; --xl: 32px; --xxl: 48px;
  --dur-fast: 160ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --panel: #272729; --panel-2: #2a2a2c;
    --line: rgba(255, 255, 255, 0.12); --line-soft: rgba(255, 255, 255, 0.08);
    --t1: #ffffff; --t2: #cccccc; --t3: #98989d;
    --accent: #2997ff; --focus: #2997ff;
    --ok: #5fd68a; --warn: #efa34a; --bad: #f0796f;
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--t1); -webkit-font-smoothing: antialiased; }
body { font: 400 17px/1.47 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.374px; }
code { font: 400 14px/1.43 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }

.page { max-width: 1440px; margin: 0 auto; padding: var(--xl) var(--lg) var(--xxl); }
.kicker { font: 400 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.12px; color: var(--t3); text-transform: uppercase; margin: 0 0 var(--sm); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: var(--lg); }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); flex-wrap: wrap; padding-bottom: var(--sm); border-bottom: 1px solid var(--line); margin-bottom: var(--sm); }
.verdict { font: 600 21px/1.19 system-ui, -apple-system, sans-serif; letter-spacing: 0.231px; margin: 0; }
.strip { font: 400 14px/1.43 system-ui, -apple-system, sans-serif; letter-spacing: -0.224px; color: var(--t3); margin: 0; }

.chip { display: inline-block; font: 400 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.12px; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); color: var(--t2); white-space: nowrap; vertical-align: 2px; }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.bad { color: var(--bad); border-color: var(--bad); }
.chip.off { color: var(--t3); }

/* The grid. The first column stays put when the rest scrolls sideways on a phone. */
.scroll { overflow-x: auto; }
/* When the grid is wider than the card, a soft edge shows on the side that has more. */
.scroll {
  background:
    linear-gradient(to right, var(--panel) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--line), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--line), transparent) right center / 14px 100% no-repeat scroll;
}
.grid { display: grid; grid-template-columns: 96px repeat(5, minmax(168px, 1fr)); gap: var(--xs); min-width: 936px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.grid.ic { grid-template-columns: 96px repeat(2, minmax(168px, 1fr)); min-width: 0; max-width: 720px; }
.h { font: 400 12px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.12px; color: var(--t3); text-transform: uppercase; padding: var(--xs); align-self: end; }
.e { font-weight: 600; padding: var(--sm) var(--xs); position: sticky; left: 0; background: var(--panel); z-index: 1; }
.ic .e { font-weight: 400; color: var(--t3); }

.cell { display: block; width: 100%; min-height: 64px; text-align: left; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: var(--xs) var(--sm); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; cursor: pointer; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.cell .v { display: block; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t1); }
.cell .s { display: block; color: var(--t3); margin-top: var(--xxs); }
.cell.muted .v { font-weight: 400; color: var(--t3); }
.cell.stale { background: var(--bg); }
.cell.stale .v { color: var(--t3); font-weight: 400; }
.cell.opened .v { color: var(--t2); }
.cell.still { cursor: default; }
.cell:not(.still):hover { background: var(--bg); }
.cell:not(.still):active { transform: scale(0.95); }
.ic .cell .v { font-weight: 400; color: var(--t3); }

.between { font: 600 12px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.12px; color: var(--t3); text-transform: uppercase; margin: var(--md) 0 var(--xs); padding-top: var(--sm); border-top: 1px solid var(--line-soft); }
.note { font: 400 14px/1.43 system-ui, -apple-system, sans-serif; letter-spacing: -0.224px; color: var(--t3); margin: 0 0 var(--xs); }
.foot { font: 400 14px/1.43 system-ui, -apple-system, sans-serif; letter-spacing: -0.224px; color: var(--t3); margin: var(--sm) 0 0; padding-top: var(--sm); border-top: 1px solid var(--line); }
.foot + .foot { border-top: 0; padding-top: 0; margin-top: var(--xs); }

.notice { background: var(--panel); border: 2px solid var(--warn); border-radius: 18px; padding: var(--md) var(--lg); margin: 0 0 var(--md); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.notice p { margin: 0 0 var(--xs); }
.notice ul { margin: 0 0 var(--xs); padding-left: var(--lg); }

/* The sheet that opens when a figure is tapped: the records that made it. */
dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: var(--lg); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--t1); border: 1px solid var(--line); border-radius: 18px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); overflow: auto; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
@supports not (backdrop-filter: blur(1px)) { dialog { background: var(--panel); } }
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sm); margin-bottom: var(--sm); }
dialog h2 { font: 600 21px/1.19 system-ui, -apple-system, sans-serif; letter-spacing: 0.231px; margin: 0; }
dialog h3 { font: 600 14px/1.29 system-ui, -apple-system, sans-serif; letter-spacing: -0.224px; margin: var(--md) 0 var(--xs); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--xxs) var(--md); margin: 0 0 var(--sm); }
dt { color: var(--t3); }
dd { margin: 0; font-variant-numeric: tabular-nums; }
dd.wide { grid-column: 1 / -1; color: var(--t3); }
.close { min-height: 44px; min-width: 44px; padding: 0 var(--md); border-radius: 9999px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-size: 14px; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.close:hover { background: var(--bg); }
.close:active { transform: scale(0.95); }
.records-scroll { max-height: 40vh; overflow: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: var(--xs) var(--sm) var(--xs) 0; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--t2); position: sticky; top: 0; background: var(--panel); }
.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; white-space: nowrap; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 734px) {
  .page { padding: var(--lg) var(--sm) var(--xl); }
  .card { padding: var(--md); }
  .verdict { font-size: 19px; }
  dialog { padding: var(--md); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .records-scroll { max-height: 50vh; max-height: 50dvh; }
  /* On a phone the grid stacks: each entity is a heading, each figure a labelled
     cell beneath it, so nothing sits off-screen behind a sideways scroll. */
  .grid, .grid.ic { grid-template-columns: 1fr; min-width: 0; max-width: none; }
  .grid .h { display: none; }
  .e { position: static; padding: var(--md) var(--xs) 0; font-size: 17px; }
  .ic .e { font-weight: 600; color: var(--t2); }
  .cell::before { content: attr(data-col); display: block; font: 400 12px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.12px; color: var(--t3); text-transform: uppercase; margin-bottom: var(--xxs); }
}
@media (prefers-reduced-motion: reduce) {
  .cell, .close { transition: none; }
  .cell:not(.still):active, .close:active { transform: none; background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  dialog { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}