/* App Insights, drawn as a number chart. Ink and paper, the Awaken gradient
   only in the band under the app bar, colour kept for the data: Sunday bars
   in Awaken orange-red and the day-and-hour map. Selected things are a pill. Light and dark
   follow the device. Figures are Figtree's lining figures, right-aligned in
   columns: its tabular figures widen commas and spaces ("1 , 204"). */
:root {
  --paper: #FAF9F7; --ink: #161418; --ink-2: #3E3B40; --muted: #6A696C; --rule: #E6E3DE; --orbit: #C1BFB7;
  --bar: #161418; --sun: #EE4137; --rest: #8E8B87; --hover: #F2F0EC; --bad: #B3261E;
  --heat-0: #EFEDE9; --heat-1: #FBD5D0; --heat-2: #F5998F; --heat-3: #EE4137; --heat-4: #B5261C; --heat-4-fg: #FFFFFF;
  --dev-0: #161418; --dev-1: #6A696C; --dev-2: #C1BFB7;
  --app: #161418; --app-fg: #FAF9F7; --app-muted: #C1BFB7; --app-line: #4A474D;
  --band: linear-gradient(45deg, #E80E8A, #EE4137 55%, #F59220);
  --sans: "Circular Std", Circular, Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Quarto, "Bodoni Moda", Georgia, serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121013; --ink: #F3F1EE; --ink-2: #D3D0CB; --muted: #A6A3A0; --rule: #2E2B30; --orbit: #5C595F;
    --bar: #E9E6E1; --sun: #FF5A4A; --rest: #75717A; --hover: #1C191D; --bad: #FF8A80;
    --heat-0: #232025; --heat-1: #4A1D19; --heat-2: #7E2820; --heat-3: #C9372B; --heat-4: #FF6A5C; --heat-4-fg: #161418;
    --dev-0: #E9E6E1; --dev-1: #9A979C; --dev-2: #57545A;
    --app: #0A090B; --app-line: #3A373D;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scrollbar-color: var(--orbit) transparent; }
::selection { background: var(--sun); color: #fff; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ app bar */
.appbar { position: sticky; top: 0; z-index: 5; background: var(--app); color: var(--app-fg); }
.appbar::after { content: ""; display: block; height: 3px; background: var(--band); }
.appbar .in { max-width: 1360px; margin: 0 auto; padding: 10px var(--gutter); min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 8px; }
.brand { font-family: var(--serif); font-weight: 800; font-size: 23px; letter-spacing: -0.01em; color: inherit; text-decoration: none; white-space: nowrap; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1240px) { .tabs { position: relative; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
.tabs a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--app-muted); text-decoration: none; white-space: nowrap; transition: color .15s; }
.tabs a:hover { color: var(--app-fg); }
.tabs a[aria-current="page"] { background: var(--app-fg); color: #161418; }
.tabs a:focus-visible { outline-offset: -3px; }
.range { display: flex; gap: 2px; margin-left: auto; }
.range button { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--app-muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.range button:hover { color: var(--app-fg); }
.range button[aria-pressed="true"] { border-color: var(--app-muted); color: var(--app-fg); }
.acct { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--app-muted); }
.acct:empty { display: none; }
.email { overflow-wrap: anywhere; }
.out { background: none; border: 0; padding: 6px 0; color: var(--app-fg); text-decoration: underline; text-underline-offset: 3px; }
.demo { border: 1px solid var(--app-line); border-radius: 999px; padding: 4px 11px; color: var(--app-fg); white-space: nowrap; }
@media (max-width: 1240px) {
  .tabs { order: 5; flex-basis: 100%; margin: 0 -6px; }
  .range { margin-left: auto; }
}
@media (max-width: 1240px) and (min-width: 721px) { .acct { order: 4; } }
@media (max-width: 900px) { .email { display: none; } }
@media (max-width: 720px) {
  .appbar { position: static; }
  .brand { font-size: 21px; }
  .acct { margin-left: auto; }
  .range { order: 6; margin: 0 0 2px -12px; }
  .demo { white-space: normal; text-align: right; }
}

/* ------------------------------------------------------------ page */
main { max-width: 1360px; margin: 0 auto; padding: 44px var(--gutter) 80px; transition: opacity .2s; }
main.busy { opacity: .5; }
h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.012em; word-spacing: 0.06em; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 18px 0 4px; }
.answer { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); margin: 14px 0 36px; max-width: 62ch; text-wrap: pretty; }
.fig, .answer b { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums; }
.note { font-size: 13px; color: var(--muted); }
.bad { color: var(--bad); }
.over { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; margin-top: 56px; }
@media (max-width: 1100px) { .over, .cols { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
.col { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.sect { border-top: 2px solid var(--ink); padding-top: 14px; min-width: 0; }
.sect > .note { margin: 4px 0 14px; }

/* ------------------------------------------------------------ the chart */
.score { --name: minmax(170px, 220px); --num: 92px; min-width: 0; }
.marks, .row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) var(--num); column-gap: 24px; }
.solo .marks, .line { display: grid; grid-template-columns: minmax(0, 1fr) var(--num); column-gap: 24px; align-items: end; }
.marks { font-size: 12px; color: var(--muted); padding-bottom: 8px; font-variant-numeric: lining-nums; }
.mk { display: flex; padding-right: 7px; }
.mk span { flex: 1 1 0; padding-left: 9px; white-space: nowrap; overflow: visible; display: flex; align-items: center; }
.rm { border: 1.5px solid var(--ink); color: var(--ink); font-weight: 800; font-size: 11px; line-height: 14px; padding: 0 4px; margin-right: 6px; border-radius: 2px; }
.unit { text-align: left; }
.row { align-items: end; padding: 18px 14px; margin: 0 -14px; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background-color .15s; }
.row:last-of-type { border-bottom: 1px solid var(--rule); }
.row:hover { background: var(--hover); }
.row:focus-visible { outline-offset: -2px; border-radius: 0; }
.nm { min-width: 0; align-self: center; }
.nm b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.nm span { font-size: 13px; color: var(--muted); }
.num { text-align: left; line-height: 1; white-space: nowrap; }
.num b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.num span { font-size: 12px; color: var(--muted); }
.quiet .nm b, .quiet .num b { color: var(--muted); }

.strip { display: flex; height: 64px; }
.strip::after { content: ""; flex: none; width: 7px; border-left: 1.5px solid var(--bar); border-right: 3.5px solid var(--bar); margin-left: 2px; box-sizing: border-box; }
.wk { flex: 1 1 0; display: flex; align-items: flex-end; gap: 3px; padding: 0 5px 0 9px; position: relative; min-width: 0; }
.wk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--bar); }
.strip:not(.dense) { padding-top: 13px; }
.strip.dense .wk { gap: 1px; padding: 0 2px 0 5px; }
.wk i { flex: 1 1 0; min-width: 1px; height: var(--h); background: var(--bar); border-radius: 1.5px 1.5px 0 0; transform-origin: bottom; }
.wk i.sun { background: var(--sun); position: relative; }
/* The accent over each Sunday downbeat, drawn as a chevron. */
.strip:not(.dense) .wk i.sun:not(.rest)::before { content: ""; position: absolute; left: 50%; top: -11px; width: 5px; height: 5px; border-top: 1.5px solid var(--sun); border-right: 1.5px solid var(--sun); transform: translateX(-70%) rotate(45deg); }
.wk i.rest { height: 3px; background: var(--rest); border-radius: 1.5px; }
.quiet .wk::before { background: var(--rest); }
.quiet .strip::after { border-color: var(--rest); }
.solo .strip { height: clamp(96px, 14vw, 150px); }
.solo .num b { font-size: 36px; }
.enter .wk i { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 9ms); }
.enter .dense .wk i { animation-delay: calc(var(--k) * 4ms); }
@keyframes rise { from { transform: scaleY(0); } }

.legend { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw.sun { background: var(--sun); }
.sw.rest { height: 3px; background: var(--rest); }
.sw.l1 { background: var(--heat-1); } .sw.l2 { background: var(--heat-2); } .sw.l3 { background: var(--heat-3); } .sw.l4 { background: var(--heat-4); }

@media (max-width: 720px) {
  main { padding-top: 28px; }
  .answer { margin-bottom: 24px; }
  .score .marks { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm num" "st st"; row-gap: 14px; padding: 16px 0; margin: 0; }
  .row .nm { grid-area: nm; } .row .num { grid-area: num; align-self: center; text-align: right; } .row .strip { grid-area: st; height: 44px; }
  .row:hover { background: none; }
  .line { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .line .num { display: none; }
  .solo .strip { height: 96px; }
}

/* ------------------------------------------------------------ campuses */
.camp { --cols: repeat(var(--n), minmax(0, 1.4fr)); }
.cr { display: grid; grid-template-columns: minmax(96px, 1fr) var(--cols); gap: 12px; align-items: center; font-size: 14px; padding: 4px 0; }
.cr.ch { font-size: 12px; color: var(--muted); padding-bottom: 0; }
.cn { overflow-wrap: anywhere; }
.camp .gap { height: 14px; }
.cell { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.cell b { text-align: right; font-weight: 700; font-variant-numeric: lining-nums; }
.cell.zero b { color: var(--muted); font-weight: 400; }
.meter { display: block; height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--bar); border-radius: 4px; }

/* ------------------------------------------------------------ app page */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px 8px 0; border-bottom: 1px solid var(--rule); }
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
.t { display: block; font-weight: 600; }
.p { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.n { text-align: right; font-variant-numeric: lining-nums; white-space: nowrap; }
@media (max-width: 560px) { .hide-sm { display: none; } }

.heat { display: grid; grid-template-columns: 38px repeat(18, minmax(13px, 1fr)); gap: 3px; align-items: center; min-width: 440px; }
.hl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dl { font-size: 12px; font-weight: 600; color: var(--muted); }
.dl.sun { color: var(--ink); }
.heat .c { height: 26px; border-radius: 3px; background: var(--heat-0); }
.c.l1 { background: var(--heat-1); } .c.l2 { background: var(--heat-2); } .c.l3 { background: var(--heat-3); } .c.l4 { background: var(--heat-4); }

.ledger { list-style: none; margin: 8px 0 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ledger b { font-size: 28px; font-weight: 800; line-height: 1.1; text-align: right; font-variant-numeric: lining-nums; letter-spacing: -0.01em; }

.stack { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin: 12px 0 10px; }
.stack span { flex: 1 1 0; }
.d0 { background: var(--dev-0); } .d1 { background: var(--dev-1); } .d2 { background: var(--dev-2); }
.devices, .shares { list-style: none; margin: 0; padding: 0; }
.devices li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.devices li b, .shares b { font-weight: 700; font-variant-numeric: lining-nums; text-align: right; }
.devices li .note { min-width: 9ch; text-align: right; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 32px; margin-top: 8px; }
.shares li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(32px, 1fr) 36px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.shares li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ who's using it */
.weeks { margin-top: 4px; }
.wr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px 64px; gap: 12px; align-items: center; padding: 5px 0; font-size: 14px; }
.wl { font-size: 13px; color: var(--muted); white-space: nowrap; }
.wr b { text-align: right; font-weight: 700; font-variant-numeric: lining-nums; }
.wr .note { white-space: nowrap; }
.wbar { display: flex; gap: 2px; height: 14px; }
.wbar span { display: block; height: 100%; border-radius: 2px; }
.wbar .ret, .sw.ret { background: var(--bar); }
.wbar .new, .sw.new { background: var(--dev-1); }
table.rate { width: auto; min-width: 100%; }
table.rate th[scope="row"] { font-weight: 600; white-space: nowrap; padding-right: 16px; }
table.rate td, table.rate th { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
td.rc { padding: 3px 4px; min-width: 58px; }
td.rc span { display: block; padding: 5px 6px; border-radius: 3px; text-align: center; font-size: 13px; font-weight: 600; background: var(--heat-0); }
td.rc .r1 { background: var(--heat-1); } td.rc .r2 { background: var(--heat-2); }
td.rc .r3 { background: var(--heat-3); } td.rc .r4 { background: var(--heat-4); color: var(--heat-4-fg); }
.sources li { grid-template-columns: minmax(0, 1.6fr) minmax(32px, 1fr) 40px; font-size: 14px; }

/* ------------------------------------------------------------ sign-in */
.gate { max-width: 600px; padding: clamp(32px, 10vh, 120px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gate p { color: var(--ink-2); font-size: 17px; max-width: 52ch; }
.gate .wait { color: var(--muted); font-size: 15px; }
.primary { min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; margin-top: 6px; transition: background-color .15s; }
.primary:hover { background: var(--ink-2); }
.textbtn { background: none; border: 0; padding: 6px 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  main, .row, .tabs a, .primary { transition: none; }
  .enter .wk i { animation: none; }
}