/* Design tokens, taken from docs/design/home-mockup.html.
 *
 * Colour carries meaning here and the meanings are fixed:
 *   spruce  good, money earned, crew
 *   timber  costs
 *   sky     money in
 *   brick   problems, and only ever problems
 *   hd      Home Depot, and only Home Depot, so its bars read as the same store everywhere
 *   job-1..5  one colour per job where several jobs share a chart. Richer steps of the same
 *             earthy hues, because the base tokens are too grey to tell five apart. Checked
 *             with the dataviz validator for colour-blind separation in both themes.
 *
 * Using brick for anything that is not a problem is how a page stops being scannable:
 * once everything is urgent, nothing is.
 */

:root {
  --ground:#F3F4F0; --panel:#FFFFFF; --panel-2:#F8F9F6; --ink:#1F2A22; --muted:#6F786F; --line:#E1E5DC;
  --spruce:#3E6B35; --spruce-2:#7FA873; --spruce-soft:#DDE9D7;
  --timber:#B8863B; --timber-2:#D9B878; --timber-soft:#F2E6CF;
  --sky:#4F7A8C; --sky-soft:#DCE8ED;
  --brick:#B4412E; --brick-soft:#F5DFD9;
  --hd:#E8762B;
  --glass-fill:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 100%);
  --glass-edge:rgba(255,255,255,.95); --glass-edge-hover:rgba(62,107,53,.35); --glass-sheen:rgba(255,255,255,.9);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(31,42,34,.05), 0 1px 2px rgba(31,42,34,.06), 0 6px 16px -6px rgba(31,42,34,.16);
  --glass-shadow-hover:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(31,42,34,.05), 0 2px 4px rgba(31,42,34,.06), 0 12px 24px -8px rgba(31,42,34,.24);
  --job-1:#3A732C; --job-2:#C78B28; --job-3:#1C719A; --job-4:#A9AB54; --job-5:#8C4877;
  --shadow:0 1px 0 rgba(31,42,34,.04), 0 8px 24px -16px rgba(31,42,34,.18);
  --radius:16px;

  /* Spec 18: the system the crew pages (and the dashboard's crew side) are built on.
   *   display  Lexend Giga, the wordmark's face: headings and the big numbers, never above 500.
   *   body     Hanken Grotesk at 400 and 600; 700 for names and totals in lists.
   *   scale    13 · 15 · 17 · 22 · 28 · 40 (px). Nothing else.
   *   space    4 · 8 · 12 · 16 · 24 · 32 · 48. Tight inside a group, generous between groups.
   *   radius   20 for the one raised object on a screen, 12 for controls, 999 for pills.
   *   surfaces --raise for the raised object, --paper for the ticket and the slip, --tint for a
   *            highlighted row, --hair for a row separator. Borders only where an outline means
   *            "you can choose this".
   *   podium   gold, silver and bronze: the leaderboard's top three, nowhere else.
   *   motion   150 / 240 / 400 ms, one ease-out and one spring; transform and opacity only. */
  --display:"Lexend Giga", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --paper:#FBF8F1; --paper-2:#F5EFE2;
  --tint:color-mix(in srgb, var(--spruce) 9%, var(--panel));
  --hair:color-mix(in srgb, var(--ink) 10%, transparent);
  --soft-ink:color-mix(in srgb, var(--ink) 72%, var(--ground));
  --raise:0 1px 2px rgba(31,42,34,.06), 0 10px 30px -12px rgba(31,42,34,.24);
  --raise-up:0 2px 4px rgba(31,42,34,.06), 0 16px 36px -12px rgba(31,42,34,.3);
  --gold:#C9A24A; --silver:#B4BAB1; --bronze:#B07A4F;
  --r-object:20px; --r-control:12px;
  --t-fast:150ms; --t-base:240ms; --t-slow:400ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.3,1.5,.5,1);
}
@supports (transition-timing-function:linear(0, 1)) {
  :root { --spring:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163,
                         1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); }
}

/* Follows the system, unless a theme has been forced. The forced case exists so the
 * screenshot run can capture both themes without changing the machine's settings. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#121813; --panel:#1A221B; --panel-2:#1F2820; --ink:#E7ECE4; --muted:#96A194; --line:#2C372D;
    --spruce:#86B876; --spruce-2:#4E7A44; --spruce-soft:#223425;
    --timber:#DDB266; --timber-2:#8F6A2E; --timber-soft:#382F20;
    --sky:#8BB8CB; --sky-soft:#1F3139; --brick:#E4806C; --brick-soft:#3B2420; --hd:#F08A45;
    --glass-fill:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
    --glass-edge:rgba(255,255,255,.10); --glass-edge-hover:rgba(134,184,118,.45); --glass-sheen:rgba(255,255,255,.07);
    --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.3), 0 8px 18px -8px rgba(0,0,0,.6);
    --glass-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.3), 0 14px 26px -8px rgba(0,0,0,.7);
    --job-1:#387D3D; --job-2:#CB8230; --job-3:#377DB4; --job-4:#979836; --job-5:#9B548D;
    --shadow:none;
    --paper:#1E261F; --paper-2:#242E25;
    --raise:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -12px rgba(0,0,0,.65);
    --raise-up:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.35), 0 18px 36px -12px rgba(0,0,0,.75);
    --gold:#E2C068; --silver:#C8CEC5; --bronze:#CF9465;
  }
}

:root[data-theme="dark"] {
  --glass-fill:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
  --glass-edge:rgba(255,255,255,.10); --glass-edge-hover:rgba(134,184,118,.45); --glass-sheen:rgba(255,255,255,.07);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.3), 0 8px 18px -8px rgba(0,0,0,.6);
  --glass-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.3), 0 14px 26px -8px rgba(0,0,0,.7);
  --job-1:#387D3D; --job-2:#CB8230; --job-3:#377DB4; --job-4:#979836; --job-5:#9B548D;
  --ground:#121813; --panel:#1A221B; --panel-2:#1F2820; --ink:#E7ECE4; --muted:#96A194; --line:#2C372D;
  --spruce:#86B876; --spruce-2:#4E7A44; --spruce-soft:#223425;
  --timber:#DDB266; --timber-2:#8F6A2E; --timber-soft:#382F20;
  --sky:#8BB8CB; --sky-soft:#1F3139; --brick:#E4806C; --brick-soft:#3B2420; --hd:#F08A45;
  --shadow:none;
  --paper:#1E261F; --paper-2:#242E25;
  --raise:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -12px rgba(0,0,0,.65);
  --raise-up:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.35), 0 18px 36px -12px rgba(0,0,0,.75);
  --gold:#E2C068; --silver:#C8CEC5; --bronze:#CF9465;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:15px/1.5 var(--body);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* Figures line up in columns only if the digits are the same width. Without this a
 * table of money jitters as the numbers change. */
.num, table { font-variant-numeric:tabular-nums; }

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

a { color:var(--spruce); }

/* Focus must be visible on everything reachable by keyboard. This is the whole of the
 * keyboard accessibility story for a read-only page, so it is not optional. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline:2px solid var(--spruce);
  outline-offset:2px;
  border-radius:6px;
}

/* No motion on load, ever. Transitions belong to hover and focus, which are things a
 * person did on purpose. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* The page never scrolls sideways. A chart too wide for its card scrolls inside it. */
html, body { max-width:100%; overflow-x:hidden; }
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }