/* The design system. It began as the tokens of docs/concept/amaya-events.html and has since been
   refined on the real screens with real decks in them; the app is now the reference, and the
   concept is the record of where it started. */

/* Layout: a machined tray — rail and work surface as plates on a soft canvas.
   Nothing scrolls but lists and readers; the profile arrives on the right and expands
   across the work surface, never over the rail. */
:root {
  color-scheme: light;

  /* ground + plates */
  --canvas: #eceef3;
  --canvas-2: #e4e7ee;
  --tray: rgba(255, 255, 255, 0.5);
  --surface: #fff;
  --surface-2: #f7f8fb;
  --paper: #dfe2e9;

  /* ink */
  --ink: #10151f;
  --ink-2: #4a5567;
  /* Secondary text. #737f92 measured 4.05:1 on white at 12px, which fails AA; this clears it on
     both the card surface (5.22) and the canvas (4.51). Dark mode already passed at 5.77. */
  --ink-3: #636d7e;
  /* The faintest tier that still carries words. Every use of it is text a person reads — the
     nav's section labels, the deck counts, the eyebrows — so it cannot sit below AA to look
     quieter. #95a0b1 measured 2.64:1 at 10.5px. It is now close to --ink-3 on purpose: the
     hierarchy is carried by size, weight and caps, not by making a label hard to read. Nothing
     fainter than this may hold text. */
  --ink-4: #656d78;

  /* hairlines + fills */
  --hair: rgba(16, 21, 31, 0.08);
  --hair-2: rgba(16, 21, 31, 0.12);
  --fill: rgba(16, 21, 31, 0.04);
  --fill-2: rgba(16, 21, 31, 0.07);
  --fill-3: rgba(16, 21, 31, 0.11);

  /* elevation: hairline ring, ambient, then a key light */
  --ring-hair: 0 0 0 .5px rgba(16, 21, 31, 0.07);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --e1: 0 1px 1px rgba(16, 21, 31, 0.04), 0 4px 10px -4px rgba(16, 21, 31, 0.1);
  --e2: 0 2px 4px rgba(16, 21, 31, 0.05), 0 12px 28px -10px rgba(16, 21, 31, 0.2);
  --e3: 0 6px 12px -4px rgba(16, 21, 31, 0.1), 0 32px 64px -24px rgba(16, 21, 31, 0.34);

  /* accent + meaning */
  --accent: #2a5fc9;
  --on-accent: #fff;
  --accent-wash: #e8eefc;
  --accent-ink: #1f4ba3;
  --ring: rgba(42, 95, 201, 0.34);
  --red: #b03b39;
  --red-wash: #fbecec;
  --amber: #8a5410;
  --amber-wash: #fbf1e1;
  --green: #1f6b52;
  --green-wash: #e4f1ea;

  /* stage hues */
  --b-pre: #4f6076;
  --b-seed: #6049c0;
  --b-a: #0f6e6a;
  --b-out: #9d3791;
  --logo-a: #8db8f7;
  --logo-b: #7fcfe0;
  --logo-ink: #0b1422;
  --scrim: rgba(12, 16, 22, 0.26);
  --glow: 26%;

  /* type */
  /* One face on every machine. The system stack came first before, so a Mac drew SF and a
     Windows laptop drew a different, wider font: two products. */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui,
    sans-serif;
  --fw-med: 500;
  --fw-semi: 600;

  /* geometry + motion */
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 8px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --rail: 218px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0a0d12;
    --canvas-2: #070a0e;
    --tray: rgba(255, 255, 255, 0.03);
    --surface: #171c25;
    --surface-2: #1d2330;
    --paper: #0d1016;
    --ink: #edf1f7;
    --ink-2: #aeb9c9;
    --ink-3: #8b97a8;
    --ink-4: #818c9b;
    --hair: rgba(255, 255, 255, 0.09);
    --hair-2: rgba(255, 255, 255, 0.14);
    --fill: rgba(255, 255, 255, 0.05);
    --fill-2: rgba(255, 255, 255, 0.09);
    --fill-3: rgba(255, 255, 255, 0.14);
    --ring-hair: 0 0 0 .5px rgba(255, 255, 255, 0.08);
    --hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --e1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
    --e2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 32px -12px rgba(0, 0, 0, 0.75);
    --e3: 0 8px 18px -6px rgba(0, 0, 0, 0.6), 0 40px 72px -28px rgba(0, 0, 0, 0.9);
    --accent: #78a2f5;
    --on-accent: #0a0d12;
    --accent-wash: #1a2639;
    --accent-ink: #9dbcfb;
    --ring: rgba(120, 162, 245, 0.4);
    --red: #f09490;
    --red-wash: #39211f;
    --amber: #e0b375;
    --amber-wash: #332717;
    --green: #6fcfa8;
    --green-wash: #12302a;
    --b-pre: #92a1b6;
    --b-seed: #b2a2ec;
    --b-a: #5fc6c0;
    --b-out: #df8ad3;
    --scrim: rgba(0, 0, 0, 0.5);
    --glow: 9%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0a0d12;
  --canvas-2: #070a0e;
  --tray: rgba(255, 255, 255, 0.03);
  --surface: #171c25;
  --surface-2: #1d2330;
  --paper: #0d1016;
  --ink: #edf1f7;
  --ink-2: #aeb9c9;
  --ink-3: #8b97a8;
  --ink-4: #818c9b;
  --hair: rgba(255, 255, 255, 0.09);
  --hair-2: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.09);
  --fill-3: rgba(255, 255, 255, 0.14);
  --ring-hair: 0 0 0 .5px rgba(255, 255, 255, 0.08);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --e1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  --e2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 32px -12px rgba(0, 0, 0, 0.75);
  --e3: 0 8px 18px -6px rgba(0, 0, 0, 0.6), 0 40px 72px -28px rgba(0, 0, 0, 0.9);
  --accent: #78a2f5;
  --on-accent: #0a0d12;
  --accent-wash: #1a2639;
  --accent-ink: #9dbcfb;
  --ring: rgba(120, 162, 245, 0.4);
  --red: #f09490;
  --red-wash: #39211f;
  --amber: #e0b375;
  --amber-wash: #332717;
  --green: #6fcfa8;
  --green-wash: #12302a;
  --b-pre: #92a1b6;
  --b-seed: #b2a2ec;
  --b-a: #5fc6c0;
  --b-out: #df8ad3;
  --scrim: rgba(0, 0, 0, 0.5);
  --glow: 9%;
}

* {
  box-sizing: border-box;
}
/* `hidden` must win over a component's own display, or a screen that is switched off still
   draws. The app shell is display:grid, which silently beat the attribute. */
[hidden] {
  display: none !important;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.47;
  color: var(--ink);
  background: var(--canvas);
  /* The logo's two blues, very faintly, as light falling on the canvas from the top corners. */
  background-image: radial-gradient(
      46% 38% at 12% -8%,
      color-mix(in srgb, var(--logo-a) var(--glow), transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      40% 34% at 92% -6%,
      color-mix(in srgb, var(--logo-b) var(--glow), transparent) 0%,
      transparent 70%
    ), linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.004em;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  letter-spacing: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.scroll {
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--fill-3) transparent;
}
.scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.scroll::-webkit-scrollbar-thumb {
  background: var(--fill-3);
  border-radius: 9px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- shell: a tray holding two plates ---------- */
.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 12px;
}
.rail {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  z-index: 2;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
}
.mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--logo-a), var(--logo-b));
  color: var(--logo-ink);
  display: grid;
  place-items: center;
  font-weight: var(--fw-semi);
  font-size: 15px;
  flex: none;
  box-shadow: 0 1px 2px rgba(16, 21, 31, 0.18);
}
.brand b {
  font-size: 15px;
  font-weight: var(--fw-semi);
  letter-spacing: -.018em;
  display: block;
}
.brand span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: -1px;
}
.evpick {
  margin: 2px 10px 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--fill);
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 20px);
  text-align: left;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.evpick:hover {
  background: var(--fill-2);
}
.evpick:active {
  transform: scale(0.985);
}
.evpick .mn {
  min-width: 0;
  flex: 1;
}
.evpick b {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-med);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evpick small {
  color: var(--ink-3);
  font-size: 11.5px;
  letter-spacing: 0;
}
.navsec {
  padding: 10px 16px 4px;
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 9px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover {
  background: var(--fill);
  color: var(--ink);
}
.nav a.on {
  background: var(--fill-2);
  color: var(--ink);
  font-weight: var(--fw-med);
}
.nav .ic {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--ic, var(--ink-3));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: var(--fw-semi);
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 1.5px rgba(16, 21, 31, 0.16);
}
.nav .ct {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.railfoot {
  margin-top: auto;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: .5px solid var(--hair);
}
.railfoot .who {
  min-width: 0;
  flex: 1;
}
.railfoot b {
  display: block;
  font-size: 12.5px;
  font-weight: var(--fw-med);
}
.railfoot small {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.topbar {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
}
.seg {
  display: flex;
  background: var(--fill);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  transition: color .2s var(--ease);
}
.seg button.on {
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-med);
  box-shadow: var(--ring-hair), 0 1px 2px rgba(16, 21, 31, 0.08);
}
.topbar .sp {
  flex: 1;
}
.conceptchip {
  font-size: 11px;
  color: var(--ink-4);
  padding: 3px 10px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 .5px var(--hair-2);
  letter-spacing: 0;
}
.iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.iconbtn:hover {
  background: var(--fill-2);
  color: var(--ink);
}
.iconbtn:active {
  transform: scale(0.93);
}

.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.head {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.head .mn {
  flex: 1;
  min-width: 0;
}
.head h1 {
  font-size: 30px;
  font-weight: var(--fw-semi);
  letter-spacing: -.028em;
  line-height: 1.1;
  text-wrap: balance;
}
.head .lede {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 5px;
  max-width: 74ch;
}
.eyebrow {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---------- plates ---------- */
/* a column that scrolls must never squash its own cards */
.card,
.sec {
  flex: none;
}
.rprof > *,
.rprof .colA > *,
.rprof .colB > *,
.sections > * {
  flex: none;
}
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
  min-height: 0;
}
.pad {
  padding: 16px 18px;
}
.sep {
  height: .5px;
  background: var(--hair);
}

/* ---------- chips, pills, tiles ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: var(--fw-med);
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--fill-2);
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: 0;
}
.chip.good {
  background: var(--green-wash);
  color: var(--green);
}
.chip.warn {
  background: var(--amber-wash);
  color: var(--amber);
}
.chip.bad {
  background: var(--red-wash);
  color: var(--red);
}
.chip.acc {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.chip b {
  font-weight: var(--fw-semi);
}
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: var(--fw-med);
  box-shadow: 0 1px 2px rgba(16, 21, 31, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.pill:hover {
  filter: brightness(1.07);
}
.pill:active {
  transform: scale(0.97);
}
.pill.ghost {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
}
.pill.ghost:hover {
  background: var(--surface-2);
  filter: none;
}
.tile {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: var(--fw-semi);
  font-size: 12px;
  color: #fff;
  flex: none;
  background: var(--t, var(--ink-3));
  letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(16, 21, 31, 0.18);
}
.tile.lg {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 16px;
}
.kv {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kv small {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.kv b {
  font-size: 15px;
  font-weight: var(--fw-med);
  letter-spacing: -.014em;
}
.kv .prov {
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0;
}
.unk {
  color: var(--ink-4);
  font-weight: 400;
}

/* ---------- rows ---------- */
.rows {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .18s var(--ease);
}
.row:hover {
  background: var(--fill);
}
.row.on {
  background: var(--accent-wash);
}
.row .mn {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 9px;
  row-gap: 1px;
}
.row.stack .mn {
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
.row.stack .nm,
.row.stack .sub {
  white-space: normal;
}
.row .nm {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .sub {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk {
  font-size: 12px;
  color: var(--ink-4);
  width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sc {
  font-size: 17px;
  font-weight: var(--fw-med);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  width: 34px;
  text-align: right;
}
.bucket-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 7px;
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.bucket-h .ln {
  flex: 1;
  height: .5px;
  background: var(--hair);
}

/* ---------- progress ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.step .b {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--fill-3);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: var(--ink-3);
}
.step.done {
  color: var(--ink-2);
}
.step.done .b {
  background: var(--green);
  box-shadow: none;
  color: #fff;
}
.step.now {
  color: var(--ink);
  font-weight: var(--fw-med);
}
.step.fail {
  color: var(--red);
}
.step.fail .b {
  background: var(--red);
  box-shadow: none;
  color: #fff;
}
.step.now .b {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  border-top: 1.5px solid transparent;
  animation: spin 1.1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step.now .b {
    animation: none;
  }
}
.bar {
  height: 6px;
  border-radius: 99px;
  background: var(--fill-2);
  overflow: hidden;
  box-shadow: inset 0 1px 1.5px rgba(16, 21, 31, 0.07);
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

/* ---------- rating ---------- */
.score {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.score .n {
  font-size: 44px;
  font-weight: var(--fw-semi);
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score .d {
  font-size: 14px;
  color: var(--ink-3);
}
.dims {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dim {
  display: grid;
  grid-template-columns: 1fr 56px 32px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.dim .t {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dim .v {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* ---------- profile ---------- */
.prof {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1;
}
.sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
}
.sec .hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.sec .ic {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--fw-semi);
  color: #fff;
  background: var(--c, var(--ink-3));
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.sec .hd b {
  font-size: 13px;
  font-weight: var(--fw-semi);
  letter-spacing: -.012em;
  flex: 1;
}
.sec p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.56;
}
.cites {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.cite {
  font-size: 11px;
  font-weight: var(--fw-med);
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--fill);
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cite:hover {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.cite.on {
  background: var(--accent);
  color: var(--on-accent);
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5px;
  background: var(--hair);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ring-hair);
}
.facts > div {
  background: var(--surface);
  padding: 10px 12px;
}
.stagerow {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

/* ---------- panel ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
  z-index: 40;
}
.scrim.on {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease);
}
.panel {
  position: fixed;
  z-index: 50;
  top: 12px;
  bottom: 12px;
  right: max(12px, env(safe-area-inset-right, 0px));
  width: min(600px, calc(100% - 24px));
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--ring-hair), var(--hi), var(--e3);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 28px));
  visibility: hidden;
  transition: transform .52s var(--ease), visibility 0s linear .52s;
}
.panel.on {
  transform: none;
  visibility: visible;
  transition: transform .52s var(--ease);
}
.panel.wide {
  width: min(980px, calc(100% - 24px));
}
.panel .ph {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: .5px solid var(--hair);
}
.panel .ph b {
  font-size: 15px;
  font-weight: var(--fw-semi);
  letter-spacing: -.018em;
}
.panel .pb {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.panel .pf {
  flex: none;
  padding: 13px 16px;
  border-top: .5px solid var(--hair);
  display: flex;
  gap: 9px;
  align-items: center;
}

/* ---------- deck pages ---------- */
.thumbs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: auto;
  min-height: 0;
  padding: 1px 3px 1px 1px;
}
.thumb {
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: var(--ring-hair), var(--e1);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  color: var(--ink-4);
  cursor: pointer;
  flex: none;
  transition: box-shadow .2s var(--ease), color .2s var(--ease);
}
.thumb:hover {
  color: var(--ink-2);
}
.thumb.on {
  box-shadow: 0 0 0 2px var(--accent), var(--e1);
  color: var(--accent);
}
.page {
  background: #fff;
  color: #14181f;
  border-radius: 12px;
  box-shadow: var(--e2);
  padding: 30px 34px;
  overflow: auto;
  min-height: 0;
}
.page h4 {
  font-size: 21px;
  font-weight: var(--fw-semi);
  letter-spacing: -.022em;
  margin: 0 0 12px;
  color: #14181f;
}
.page p,
.page li {
  font-size: 13.5px;
  color: #3a4150;
  line-height: 1.62;
  margin: 0 0 9px;
}
.page mark {
  background: #ffeba6;
  color: #14181f;
  padding: 1px 3px;
  border-radius: 4px;
  box-decoration-break: clone;
}
.page .ph {
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #9aa3b2;
  border: 0;
  padding: 0;
  margin-bottom: 16px;
}

/* ---------- upload ---------- */
.drop {
  border-radius: var(--r-lg);
  padding: 30px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  background: var(--fill);
  box-shadow: inset 0 0 0 1.5px var(--hair-2);
}
.drop b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--fw-semi);
  letter-spacing: -.018em;
  margin-bottom: 4px;
}

/* ---------- showcase ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}
.gcard {
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.gcard:hover {
  box-shadow: var(--ring-hair), var(--hi), var(--e2);
  transform: translateY(-1px);
}
.gcard.on {
  box-shadow: 0 0 0 1.5px var(--accent), var(--hi), var(--e2);
}
.gcard .nm {
  font-size: 14px;
  font-weight: var(--fw-semi);
  letter-spacing: -.015em;
}
.gcard p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- toolbar ---------- */
.toolbar,
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 10px;
  padding: 6px 11px;
  min-width: 190px;
  box-shadow: var(--ring-hair), var(--hi);
  color: var(--ink-4);
}
.search input {
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.search input::placeholder {
  color: var(--ink-4);
}
.tab {
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--ink-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tab:hover {
  background: var(--fill);
  color: var(--ink-2);
}
.tab.on {
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: var(--fw-med);
}
.sel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fill);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sel select {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--fw-med);
  letter-spacing: -.006em;
  text-transform: none;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}
.stageseg {
  display: flex;
  background: var(--fill);
  border-radius: 11px;
  padding: 2px;
  gap: 2px;
}
.stageseg button {
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s var(--ease);
}
.stageseg button:hover {
  color: var(--ink-2);
}
.stageseg button.on {
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-med);
  box-shadow: var(--ring-hair), 0 1px 2px rgba(16, 21, 31, 0.08);
}
.stageseg .n {
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.stageseg button.on .n {
  color: var(--ink-3);
}

.sw {
  width: 40px;
  height: 23px;
  border-radius: 99px;
  background: var(--fill-3);
  position: relative;
  flex: none;
  transition: background .26s var(--ease);
  box-shadow: inset 0 1px 2px rgba(16, 21, 31, 0.12);
}
.sw.on {
  background: var(--accent);
}
.sw i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 21, 31, 0.35);
  transition: transform .26s var(--ease);
}
.sw.on i {
  transform: translateX(17px);
}
.sheetwrap {
  background: var(--paper);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  place-items: start center;
  overflow: auto;
  min-height: 0;
  height: 100%;
}
.sheet {
  width: 760px;
  max-width: 100%;
  aspect-ratio: 210 / 297;
  background: #fff;
  color: #14181f;
  border-radius: 3px;
  box-shadow: var(--e3);
  padding: 46px 50px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet .sh-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e6e9ef;
}
.sheet .sh-lg {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #1b4a8f;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}
.sheet h3 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.028em;
  margin: 22px 0 4px;
  color: #14181f;
}
.sheet .sh-one {
  font-size: 14px;
  color: #4a5365;
}
.sheet .sh-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sheet .sh-tag {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: #eff2f7;
  color: #4a5365;
}
.sheet .sh-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e6e9ef;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.sheet .sh-figs > div {
  background: #fff;
  padding: 9px 12px;
}
.sheet .sh-k {
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #99a2b1;
}
.sheet .sh-v {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: #14181f;
}
.sheet .sh-p {
  font-size: 8.5px;
  color: #aab2bf;
  margin-top: 1px;
}
.sheet .sh-area {
  margin-top: 14px;
}
.sheet .sh-area b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #14181f;
  display: block;
  margin-bottom: 3px;
}
.sheet .sh-area p {
  font-size: 11.5px;
  line-height: 1.5;
  color: #4a5365;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet .sh-ft {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e6e9ef;
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: #aab2bf;
}
.empty {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--ink-3);
  gap: 5px;
  font-size: 13px;
}
.subtle {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.dot.fl-good {
  background: var(--green);
}
.dot.fl-warn {
  background: var(--amber);
}
.dot.fl-bad {
  background: var(--red);
}
.dot.fl-acc {
  background: var(--accent);
}
.empty b {
  font-size: 16px;
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
  color: var(--ink);
}

/* ---------- the reader ---------- */
.reader {
  position: fixed;
  z-index: 48;
  top: 12px;
  bottom: 12px;
  right: max(12px, env(safe-area-inset-right, 0px));
  left: auto;
  width: min(620px, calc(100% - 24px));
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--ring-hair), var(--hi), var(--e3);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 30px));
  visibility: hidden;
  transition: transform .52s var(--ease), width .46s var(--ease), left .46s var(--ease), visibility
    0s linear .52s;
}
.reader.on {
  transform: none;
  visibility: visible;
  transition: transform .52s var(--ease), width .46s var(--ease), left .46s var(--ease);
}
/* expanded covers the work surface — never the rail */
.reader.wide {
  left: calc(var(--rail) + max(12px, env(safe-area-inset-left, 0px)) + 12px);
  width: auto;
}
.grip {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 62px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e2);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  z-index: 3;
  transition: color .2s var(--ease);
}
.grip:hover {
  color: var(--ink);
}
.grip svg {
  transition: transform .46s var(--ease);
}
.reader.wide .grip svg {
  transform: rotate(180deg);
}
.grip .lbl {
  position: absolute;
  right: 42px;
  white-space: nowrap;
  font-size: 12px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 5px 11px;
  border-radius: 9px;
  box-shadow: var(--ring-hair), var(--e2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
.grip:hover .lbl {
  opacity: 1;
}
.rhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: .5px solid var(--hair);
}
.rhead .mn {
  min-width: 0;
  flex: 1;
}
.rhead .nm {
  font-size: 16px;
  font-weight: var(--fw-semi);
  letter-spacing: -.022em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rhead .sub {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbody {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.rbody.split {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
}
.srcpane {
  border-right: .5px solid var(--hair);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  border-bottom-left-radius: var(--r-xl);
}
.srchead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  font-size: 12px;
  color: var(--ink-3);
}
.srcbody {
  flex: 1;
  min-height: 0;
  padding: 0 13px 13px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
}
.rprof {
  overflow: auto;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rprof.two {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.rprof.two .colA,
.rprof.two .colB {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rfoot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-top: .5px solid var(--hair);
}
.stepbtn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: var(--fill);
  font-size: 13px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.stepbtn:hover {
  background: var(--fill-2);
  color: var(--ink);
}
.stepbtn:active {
  transform: scale(0.92);
}

@media (max-width: 1240px) {
  .prof {
    grid-template-columns: minmax(0, 1fr);
  }
  .rprof.two {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  body {
    overflow: auto;
  }
  .app {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .rail {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nav .ct {
    margin-left: 5px;
  }
  .railfoot {
    display: none;
  }
  .view {
    min-height: 60vh;
  }
  .head h1 {
    font-size: 25px;
  }
  .reader,
  .reader.wide {
    left: max(12px, env(safe-area-inset-left, 0px));
    width: auto;
  }
  .rbody.split {
    grid-template-columns: minmax(0, 1fr);
  }
  .srcpane {
    display: none;
  }
}

/* A short notice: what just happened, without a click to dismiss it. */
.say {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  font-weight: var(--fw-med);
  line-height: 1.45;
  box-shadow: var(--e2);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.say.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A choice of one. Drawn as a ring with a dot, because a list of rows where one is chosen needs
   a mark that says "chosen", not just a tint that could mean "hovered". */
.radio {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
  display: grid;
  place-items: center;
  transition: box-shadow .2s var(--ease);
}
.radio.on {
  box-shadow: inset 0 0 0 5px var(--accent);
}

/* A button that cannot be pressed looks it, and does not pretend to respond. */
.pill:disabled,
.pill[disabled] {
  opacity: 0.45;
  cursor: default;
  filter: none;
  transform: none;
}

/* ====================================================================================
   Refinements, made on the real screens with six real decks in them.
   ==================================================================================== */

/* ---------- motion: a view arrives, it does not flicker ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.view.enter > * {
  animation: rise .5s var(--ease) both;
}
.view.enter > *:nth-child(2) {
  animation-delay: .05s;
}
.view.enter > *:nth-child(3) {
  animation-delay: .1s;
}
.view.enter > *:nth-child(4) {
  animation-delay: .15s;
}
/* A hairline across the top while a screen is fetching: something is happening, without a
   spinner taking the screen over. */
.loadbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  background: linear-gradient(90deg, var(--logo-a), var(--accent), var(--logo-b));
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.loadbar.on {
  opacity: 1;
  animation: load 1.6s var(--ease) infinite;
}
@keyframes load {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(0.7);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .view.enter > *,
  .loadbar.on,
  .enter .ring .fg,
  .enter .dim .bar i,
  .rbody.enter .rprof > * {
    animation: none !important;
  }
}

/* ---------- icons ---------- */
.ico {
  flex: none;
  display: block;
}

/* ---------- the rail ---------- */
.brand {
  padding: 18px 16px 14px;
}
.mark {
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(16, 21, 31, 0.18), 0 4px 10px
    -4px color-mix(in srgb, var(--logo-a) 70%, transparent);
}
.mark.xl {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 26px;
}
.brand b {
  font-size: 14.5px;
  letter-spacing: -.02em;
}
.brand span {
  font-size: 11.5px;
  margin-top: 0;
}
.evpick {
  padding: 8px 10px;
  border-radius: 12px;
  background: none;
  box-shadow: inset 0 0 0 .5px var(--hair-2);
  color: var(--ink-3);
}
.evpick:hover {
  background: var(--fill);
}
.evpick b {
  color: var(--ink);
}
.navsec {
  padding: 14px 18px 6px;
  font-size: 11px;
  font-weight: var(--fw-med);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-4);
}
.nav {
  gap: 2px;
  padding: 0 10px;
}
.nav a {
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: var(--fw-med);
  position: relative;
}
.nav a.on {
  background: var(--fill-2);
  color: var(--ink);
}
.nav .ic {
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 1.5px rgba(16, 21, 31, 0.18);
  transition: transform .3s var(--ease);
}
.nav a:hover .ic {
  transform: scale(1.06);
}
.nav .ct {
  font-size: 11px;
  font-weight: var(--fw-med);
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  text-align: center;
  background: var(--fill);
  color: var(--ink-3);
}
.nav a.on .ct {
  background: var(--surface);
  box-shadow: var(--ring-hair);
}
.nav .ct.live {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.railfoot {
  padding: 10px 12px;
}
.iconbtn.sm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

/* ---------- top bar ---------- */
.conceptchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  background: var(--tray);
}
.conceptchip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

/* ---------- headings ---------- */
.head {
  align-items: center;
  padding: 2px 2px 0;
}
.head h1 {
  font-size: 28px;
  letter-spacing: -.032em;
  line-height: 1.12;
}
.head .lede {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 6px;
  max-width: 68ch;
  text-wrap: pretty;
}
.head .over {
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--accent-ink);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.eyebrow {
  font-size: 11.5px;
  font-weight: var(--fw-med);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.chead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px 6px;
  min-height: 46px;
}
.chead b {
  font-size: 13.5px;
  font-weight: var(--fw-semi);
  letter-spacing: -.012em;
}
.chead .sp {
  flex: 1;
}

/* ---------- buttons ---------- */
.pill {
  height: 34px;
  padding: 0 15px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(16, 21, 31, 0.16), 0 6px 14px
    -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease);
}
.pill:hover {
  transform: translateY(-.5px);
}
.pill:active {
  transform: scale(0.97);
}
.pill.ghost {
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
}
.pill.lg {
  height: 42px;
  font-size: 14px;
  padding: 0 20px;
}
.pill.block {
  width: 100%;
  justify-content: center;
}
.pill.done {
  background: var(--green-wash);
  color: var(--green);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--green) 30%, transparent);
}
/* A small button. It has an edge, so it never reads as a status chip — the old screens drew
   "remove" and "admin" as the same pill, and one of them deleted a person. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 .5px var(--hair-2), 0 1px 1px rgba(16, 21, 31, 0.04);
  white-space: nowrap;
  flex: none;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.btn:active {
  transform: scale(0.96);
}
.btn.quiet {
  background: none;
  box-shadow: none;
  color: var(--ink-3);
}
.btn.quiet:hover {
  background: var(--fill);
  color: var(--ink);
}
.btn.acc {
  color: var(--accent-ink);
}
.btn.danger {
  color: var(--red);
}
.btn.danger:hover {
  background: var(--red-wash);
  color: var(--red);
}
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  padding: 4px 8px;
  margin-right: -8px;
  border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.linkbtn:hover {
  color: var(--accent-ink);
  background: var(--accent-wash);
}
.linkbtn .ico {
  transition: transform .3s var(--ease);
}
.linkbtn:hover .ico {
  transform: translateX(2px);
}

/* ---------- chips: status only ---------- */
.chip {
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  border-radius: 7px;
}
.chip.stage {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: color-mix(in srgb, var(--c) 78%, var(--ink));
}
.chip .dot {
  width: 6px;
  height: 6px;
}
.chip.live .dot {
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.3;
  }
}

/* ---------- tiles: a thing is a tinted monogram, a place is a solid icon ---------- */
.tile {
  background: color-mix(in srgb, var(--t, var(--ink-3)) 15%, var(--surface));
  color: color-mix(in srgb, var(--t, var(--ink-3)) 74%, var(--ink));
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--t, var(--ink-3)) 30%, transparent);
  width: 32px;
  height: 32px;
  font-size: 12px;
  letter-spacing: 0;
}
.tile.sm {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
}
.tile.lg {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 16px;
}
.tile.round {
  border-radius: 50%;
}
.tile.file {
  --t: var(--ink-3);
}

/* ---------- form fields ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  text-align: left;
}
.field:first-child {
  margin-top: 0;
}
.field > span {
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
}
.field > small {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 1px 1px rgba(16, 21, 31, 0.03);
  transition: box-shadow .2s var(--ease);
}
.input::placeholder {
  color: var(--ink-4);
  opacity: 0.8;
}
.input:hover {
  box-shadow: inset 0 0 0 1px var(--fill-3);
}
.input:focus,
.input:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--ring);
  outline: none;
}
textarea.input {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
.input.lg {
  height: 42px;
  font-size: 14.5px;
  border-radius: 12px;
  padding: 0 14px;
}
.note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  min-height: 1.5em;
}
.callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.callout .ico {
  margin-top: 2px;
  color: var(--ink-3);
}
.search {
  height: 32px;
  padding: 0 11px;
  transition: box-shadow .2s var(--ease);
}
.search:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--ring);
  color: var(--accent);
}
.sel {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: var(--fw-med);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi);
}
.sel select {
  max-width: 190px;
  text-overflow: ellipsis;
}
.stageseg {
  height: 32px;
  align-items: stretch;
}
.stageseg button {
  padding: 0 11px;
  font-weight: var(--fw-med);
}
.stageseg .n {
  font-weight: 400;
}
.tab {
  height: 28px;
  padding: 0 11px;
  border-radius: 9px;
  font-weight: var(--fw-med);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- sign in ---------- */
.signin {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
}
.signcard {
  width: min(400px, 100%);
  padding: 34px 32px 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e3);
  text-align: center;
  animation: rise .7s var(--ease) both;
}
.signcard .mark {
  margin: 0 auto 18px;
}
.signcard h1 {
  font-size: 22px;
  font-weight: var(--fw-semi);
  letter-spacing: -.028em;
}
.signcard .lede {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 8px auto 22px;
  max-width: 32ch;
  text-wrap: balance;
}
.signcard .pill {
  margin-top: 14px;
}
.signcard .note {
  margin-top: 14px;
  text-wrap: balance;
  word-break: break-word;
}
.signfoot {
  font-size: 12px;
  color: var(--ink-4);
}

/* ---------- empty states ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 220px;
  padding: 28px;
}
.empty .eico {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  color: var(--ink-3);
  background: var(--fill);
  box-shadow: inset 0 0 0 .5px var(--hair);
}
.empty b {
  font-size: 15px;
}
.empty span {
  max-width: 38ch;
  line-height: 1.5;
  text-wrap: balance;
}
.empty .pill,
.empty .btn {
  margin-top: 14px;
}

/* ---------- the score ring ---------- */
.ring {
  position: relative;
  width: var(--s, 36px);
  height: var(--s, 36px);
  flex: none;
  display: grid;
  place-items: center;
}
.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
}
.ring .tr {
  stroke: var(--fill-2);
}
.ring .fg {
  stroke: var(--c, var(--accent));
  stroke-linecap: round;
}
/* Rings and bars draw themselves in when a screen or a profile arrives — not again on every
   redraw, or a list that refreshes itself would shimmer. */
.enter .ring .fg {
  animation: ringin .9s var(--ease) both;
}
@keyframes ringin {
  from {
    stroke-dashoffset: var(--full);
  }
}
.ring b {
  position: relative;
  font-size: 12.5px;
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ring.none b {
  color: var(--ink-4);
  font-weight: 400;
}
.ring.lg b {
  font-size: 32px;
  letter-spacing: -.045em;
}
.b-strong {
  --c: var(--green);
}
.b-promising {
  --c: var(--accent);
}
.b-mixed {
  --c: var(--amber);
}
.b-weak {
  --c: var(--red);
}

/* ---------- lists ---------- */
.row {
  gap: 12px;
  padding: 8px 12px;
}
.row .nm {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  letter-spacing: -.01em;
}
.row .sub {
  font-size: 12.5px;
}
.row .when {
  font-size: 12px;
  color: var(--ink-4);
  flex: none;
}
.rk {
  width: 20px;
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--ink-4);
  text-align: center;
  flex: none;
}
.bucket-h {
  padding: 16px 12px 8px;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink-2);
}
.bucket-h .dot {
  width: 7px;
  height: 7px;
  background: var(--c, var(--ink-4));
}
.bucket-h .n {
  font-weight: 400;
  color: var(--ink-4);
}
.bucket-h:first-child {
  padding-top: 10px;
}
/* The startups table. One grid for the header and every row, so columns line up; columns
   fall away as the list narrows beside the reader, the name and the rating last. */
.tbl {
  container-type: inline-size;
  padding: 0 8px 12px;
}
.thead,
.trow {
  display: grid;
  /* Every column a fixed share, the same in every row. The status column was "auto", which a
     grid row sizes to its own chips: a row with "Limited evidence" and "Shared" pushed its sector
     and location left of the rows above it. Each row is its own grid, so nothing here may
     depend on what a row contains. */
  grid-template-columns: 20px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 236px 40px;
  align-items: center;
  gap: 16px;
  padding: 7px 12px;
}
.thead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 13px;
  padding-bottom: 9px;
  background: var(--surface);
  border-bottom: .5px solid var(--hair);
  font-size: 11.5px;
  font-weight: var(--fw-med);
  color: var(--ink-4);
}
.thead span:last-child {
  text-align: center;
}
.trow {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.trow:hover {
  background: var(--fill);
}
.trow.on {
  background: var(--accent-wash);
}
.trow .co {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.trow .co > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.trow .nm {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  letter-spacing: -.01em;
}
.trow .nm,
.trow .sub,
.trow .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trow .sub {
  font-size: 12.5px;
  color: var(--ink-3);
}
.trow .cell {
  font-size: 12.5px;
  color: var(--ink-2);
}
.trow .flags {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
@container (max-width: 900px) {
  .thead,
  .trow {
    grid-template-columns: 20px minmax(0, 2.4fr) minmax(0, 1fr) 236px 40px;
  }
  .c-sector {
    display: none;
  }
}
@container (max-width: 640px) {
  .thead,
  .trow {
    grid-template-columns: 20px minmax(0, 1fr) 40px;
  }
  /* Beside the reader the names need the room; each status is on the profile itself. */
  .trow .flags,
  .thead .h-status {
    display: none;
  }
  .c-hq {
    display: none;
  }
}
/* Beside the docked reader the list keeps its own room instead of sliding underneath it. */
/* From 1180px the list keeps its own room beside the reader; below that the reader covers it.
   At 1280 it covered the status and the rating of every row. */
@media (min-width: 1180px) {
  body.reading[data-view="startups"] .main,
  body.reading[data-view="home"] .main {
    padding-right: 632px;
  }
  /* beside the reader there is room for the list, not for the sentence about the list */
  body.reading[data-view="startups"] .head .lede {
    display: none;
  }
}

/* ---------- home ---------- */
.homegrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
  container-type: inline-size;
}
.homegrid > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.homegrid .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@container (max-width: 700px) {
  .homegrid > .side {
    display: none;
  }
}
body.reading[data-view="home"] .homegrid {
  grid-template-columns: minmax(0, 1fr);
}
body.reading[data-view="home"] .homegrid > .side {
  display: none;
}
.stackbar {
  display: flex;
  gap: 3px;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--fill-2);
  margin: 4px 18px 0;
}
.stackbar i {
  display: block;
  height: 100%;
  background: var(--c);
  border-radius: 2px;
  transition: flex-grow .8s var(--ease);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 14px 14px;
}
.stat {
  padding: 11px 12px 10px;
  border-radius: 12px;
  text-align: left;
  transition: background .2s var(--ease);
}
button.stat:hover {
  background: var(--fill);
}
.stat small {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.stat small .dot {
  width: 7px;
  height: 7px;
  background: var(--c, var(--ink-4));
}
.stat b {
  display: block;
  margin-top: 3px;
  font-size: 26px;
  font-weight: var(--fw-semi);
  letter-spacing: -.035em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat b.zero {
  color: var(--ink-4);
  font-weight: 400;
}
.flagrow {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  transition: background .18s var(--ease);
}
.flagrow:hover {
  background: var(--fill);
}
.flagrow .fi {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.flagrow .fi.warn {
  background: var(--amber-wash);
  color: var(--amber);
}
.flagrow .fi.bad {
  background: var(--red-wash);
  color: var(--red);
}
.flagrow .fi.muted {
  background: var(--fill);
  color: var(--ink-3);
}
.flagrow b {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-med);
}
.flagrow span span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.bands {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 18px 16px;
}
.bandrow {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.bandrow .bar i {
  background: var(--c);
}
.bandrow b {
  font-weight: var(--fw-med);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- events ---------- */
.evcard {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.evcard:hover {
  box-shadow: var(--ring-hair), var(--hi), var(--e2);
  transform: translateY(-1px);
}
.evcard.on {
  box-shadow: 0 0 0 1.5px var(--accent), var(--hi), var(--e1);
}
.evcard .mn {
  flex: 1;
  min-width: 0;
}
.evcard .nm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: var(--fw-semi);
  letter-spacing: -.015em;
}
.evcard .sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* ---------- activity: the trace as a timeline ---------- */
.tl {
  display: flex;
  flex-direction: column;
}
.tl-i {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  padding-bottom: 18px;
}
.tl-i::before {
  content: "";
  position: absolute;
  left: 10.5px;
  top: 24px;
  bottom: 2px;
  width: 1px;
  background: var(--hair-2);
}
.tl-i:last-child {
  padding-bottom: 0;
}
.tl-i:last-child::before {
  display: none;
}
.tl-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-wash);
  color: var(--green);
}
.tl-n.refused {
  background: var(--amber-wash);
  color: var(--amber);
}
.tl-n.fail {
  background: var(--red-wash);
  color: var(--red);
}
.tl-n.now {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  border-top: 1.5px solid var(--surface);
  animation: spin 1.1s linear infinite;
}
.tl-t {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  line-height: 22px;
}
.tl-t small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-4);
  margin-left: 6px;
}
.tl-d {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  text-wrap: pretty;
}
.tl-ms {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

/* ---------- the reader ---------- */
.rhead {
  gap: 12px;
  padding: 13px 14px 13px 18px;
}
.rhead .nm {
  font-size: 16.5px;
  letter-spacing: -.024em;
}
.rhead .sub {
  font-size: 12.5px;
}
.stepgroup {
  display: flex;
  background: var(--fill);
  border-radius: 9px;
  padding: 2px;
}
.stepbtn {
  background: none;
  border-radius: 7px;
  width: 26px;
  height: 26px;
}
.stepbtn:disabled {
  opacity: 0.3;
  cursor: default;
}
.rfoot {
  gap: 8px;
  padding: 11px 14px;
}
.rfoot .sp {
  flex: 1;
}
.rfoot .pos {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  background: var(--fill);
  box-shadow: inset 0 -1px 0 var(--hair-2);
}
.keys {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-4);
  white-space: nowrap;
}
.reader.wide .keys {
  display: inline-flex;
}
.rprof {
  padding: 14px;
  gap: 12px;
  background: var(--surface-2);
}
.rprof.two .colA,
.rprof.two .colB {
  gap: 12px;
}
.rbody {
  overflow: hidden;
  border-top: 0;
}
.rcard {
  flex: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e1);
  padding: 16px 18px;
}
.rcard h3 {
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  margin-bottom: 12px;
}
.verdict {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.verdict .fi {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--green-wash);
  color: var(--green);
}
.verdict.warn {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 34%, transparent), var(--e1);
}
.verdict.warn .fi {
  background: var(--amber-wash);
  color: var(--amber);
}
.verdict.muted .fi {
  background: var(--fill);
  color: var(--ink-3);
}
.verdict b {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-semi);
}
.verdict p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 1px;
}
.rating {
  display: flex;
  align-items: center;
  gap: 18px;
}
.rating .meta {
  min-width: 0;
}
.rating .band {
  font-size: 17px;
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
  text-transform: capitalize;
  color: color-mix(in srgb, var(--c) 80%, var(--ink));
}
.rating .meta small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.dims {
  gap: 10px;
  margin-top: 16px;
}
.dim {
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 38px;
  gap: 12px;
  font-size: 12.5px;
}
.dim .t {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dim .t .dot {
  width: 7px;
  height: 7px;
  background: var(--c);
}
.dim .bar {
  height: 6px;
}
.dim .bar i {
  background: var(--c);
  transform-origin: left;
}
.enter .dim .bar i {
  animation: grow .8s var(--ease) both;
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
.dim .v {
  font-size: 12px;
  color: var(--ink-2);
}
.dim .v em {
  font-style: normal;
  color: var(--ink-4);
}
.fine {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  text-wrap: pretty;
}
.rcard .fine {
  margin-top: 14px;
  padding-top: 12px;
  border-top: .5px solid var(--hair);
}
/* What the deck states: a label, its value, the page that says it. A list reads; the old grid
   of bold cells shouted "30 CUSTOMERS live and paying" three to a row. */
.fgroup + .fgroup {
  margin-top: 14px;
  padding-top: 12px;
  border-top: .5px solid var(--hair);
}
.fgroup h4 {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: var(--fw-med);
  color: var(--ink-4);
}
.frow {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}
.frow dt {
  color: var(--ink-3);
  font-size: 12.5px;
}
.frow dd {
  margin: 0;
  font-weight: var(--fw-med);
  letter-spacing: -.008em;
  text-wrap: pretty;
}
.frow dd.corr {
  color: var(--green);
}
dl.fl {
  margin: 0;
}
.missing {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.missing .chip {
  background: none;
  box-shadow: inset 0 0 0 .5px var(--hair-2);
  color: var(--ink-3);
}
/* the five areas */
.sec {
  padding: 16px 18px;
}
.sec .hd {
  gap: 10px;
  margin-bottom: 10px;
}
.sec .ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  color: color-mix(in srgb, var(--c) 78%, var(--ink));
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c) 28%, transparent);
}
.sec .hd b {
  font-size: 14px;
}
.sec .pts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sec .pts em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-4);
}
.sec .pts .bar {
  width: 44px;
  height: 5px;
}
.sec .pts .bar i {
  background: var(--c);
}
.sec p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 72ch;
  text-wrap: pretty;
}
.sec p.none {
  color: var(--ink-3);
}
.checks {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 8px;
  border-top: .5px solid var(--hair);
}
.check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-2);
}
.check .m {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-wash);
  color: var(--green);
}
.check.no {
  color: var(--ink-3);
}
.check.no .m {
  background: var(--fill);
  color: var(--ink-4);
}
.check span::first-letter {
  text-transform: uppercase;
}
.cite {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cite.inl {
  display: inline;
  padding: 1px 5px;
  margin: 0 1px;
  font-size: 11.5px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.cite.inl:hover {
  background: var(--accent);
  color: var(--on-accent);
}
/* the deck beside the words */
.srcpane {
  background: var(--paper);
}
.srchead {
  padding: 10px 12px 10px 14px;
}
.srchead b {
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srcbody {
  grid-template-columns: 54px minmax(0, 1fr);
  padding: 0 12px 12px;
}
.srcbody .page {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  border-radius: 10px;
  background: #fff;
}
.thumbs {
  gap: 6px;
  scrollbar-width: none;
}
.thumb {
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: var(--fw-med);
  background: var(--surface);
}
.deckstrip {
  display: flex;
  gap: 7px;
}
.deckstrip .thumb {
  flex: 1;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
}

/* ---------- settings ---------- */
.setgrid {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.setnav {
  align-self: start;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setnav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
  text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.setnav button .ico {
  color: var(--ink-3);
}
.setnav button:hover {
  background: var(--fill);
  color: var(--ink);
}
.setnav button.on {
  background: var(--fill-2);
  color: var(--ink);
}
.setnav button.on .ico {
  color: var(--accent);
}
.setcol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  padding-bottom: 4px;
}
.setrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 18px;
}
.setrow + .setrow {
  border-top: .5px solid var(--hair);
}
.setrow .mn {
  flex: 1;
  min-width: 0;
}
.setrow .nm {
  font-size: 13.5px;
  font-weight: var(--fw-med);
}
.setrow .sub {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 1px;
  text-wrap: pretty;
}
.setrow .val {
  font-size: 13px;
  font-weight: var(--fw-med);
  color: var(--ink);
  white-space: nowrap;
}
button.setrow {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease);
}
button.setrow:hover {
  background: var(--fill);
}
.card.list {
  overflow: hidden;
}
.card.list > .chead {
  border-bottom: .5px solid var(--hair);
  padding-bottom: 10px;
}
.prose p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.prose p + p {
  margin-top: 8px;
}
.prose p.dim2 {
  color: var(--ink-3);
  font-size: 12.5px;
}
.danger-zone {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 22%, transparent), var(--e1);
}
.swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--ring-hair);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.swatch:not(:disabled):hover {
  transform: scale(1.08);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c);
}
.personrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
}
.personrow + .personrow {
  border-top: .5px solid var(--hair);
}
.personrow .mn {
  flex: 1;
  min-width: 0;
}
.personrow .nm {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personrow .nm em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-4);
}
.personrow .sub {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.personrow .acts {
  display: flex;
  gap: 6px;
  opacity: 0.0;
  transition: opacity .2s var(--ease);
}
.personrow:hover .acts,
.personrow:focus-within .acts {
  opacity: 1;
}
@media (hover: none) {
  .personrow .acts {
    opacity: 1;
  }
}

/* ---------- panels ---------- */
.panel .ph {
  padding: 14px 14px 14px 20px;
}
.panel .ph b {
  font-size: 16px;
  letter-spacing: -.022em;
}
.panel .pb {
  padding: 20px;
}
.panel .pf {
  padding: 12px 20px;
  justify-content: flex-end;
}
.drop {
  padding: 34px 24px;
  background: var(--surface-2);
  box-shadow: none;
  border: 1.5px dashed var(--fill-3);
  line-height: 1.5;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.drop.over {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.drop .eico {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.drop .pill {
  margin-top: 14px;
}
.choice {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  box-shadow: inset 0 0 0 .5px var(--hair-2);
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.choice + .choice {
  margin-top: 6px;
}
.choice:hover:not(:disabled) {
  background: var(--fill);
}
.choice[aria-checked="true"] {
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.choice:disabled {
  opacity: 0.45;
  cursor: default;
}
.choice b {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-med);
}
.choice span span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.plabel {
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
  margin: 18px 0 8px;
}
.plabel:first-child {
  margin-top: 0;
}

/* ---------- the investor's gallery ---------- */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding: 2px 2px 12px;
}
.gcard {
  padding: 18px;
  gap: 12px;
  min-height: 168px;
}
.gcard:hover {
  transform: translateY(-2px);
}
.gcard .nm {
  font-size: 15px;
}
.gcard p {
  font-size: 13px;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard .foot {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

/* ---------- small screens keep working ---------- */
@media (max-width: 900px) {
  .homegrid,
  .setgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .setnav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rfoot {
    flex-wrap: wrap;
  }
  .personrow .acts {
    opacity: 1;
  }
}

/* a file in a list: its name on one line, however long, and what is known about it under */
.row.file .mn {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1px;
}
.row.file .nm,
.row.file .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row.stack .nm,
.row.stack .sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a profile's cards arrive in turn */
.rbody.enter .rprof > *,
.rbody.enter .rprof.two .colA > *,
.rbody.enter .rprof.two .colB > * {
  animation: rise .45s var(--ease) both;
}
.rbody.enter .rprof.two > * {
  animation: none;
}
.rbody.enter .rprof > *:nth-child(2),
.rbody.enter .rprof.two .colA > *:nth-child(2),
.rbody.enter .rprof.two .colB > *:nth-child(2) {
  animation-delay: .05s;
}
.rbody.enter .rprof > *:nth-child(n + 3),
.rbody.enter .rprof.two .colA > *:nth-child(n + 3),
.rbody.enter .rprof.two .colB > *:nth-child(n + 3) {
  animation-delay: .1s;
}
/* the filters stay on one line and slide sideways when there is no room */
.filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -4px;
  padding: 4px;
}
.filters::-webkit-scrollbar {
  display: none;
}
.filters > * {
  flex: none;
}
.sec .pts > span {
  min-width: 34px;
  text-align: right;
}
details.earlier {
  margin-top: 22px;
  padding-top: 14px;
  border-top: .5px solid var(--hair);
}
details.earlier summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: var(--fw-med);
  color: var(--ink-3);
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 8px;
}
details.earlier summary::-webkit-details-marker {
  display: none;
}
details.earlier summary:hover {
  background: var(--fill);
  color: var(--ink);
}
details.earlier summary .ico {
  transition: transform .25s var(--ease);
}
details.earlier[open] summary .ico {
  transform: rotate(90deg);
}
/* A wrapping column sizes its lines to their content, so a long one-liner ran under the ring. */
.row.stack .mn {
  flex-wrap: nowrap;
}

/* ---------- the investor's view: no rail, because there is nowhere to go ---------- */
body.guest .app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  max-width: 1280px;
  margin: 0 auto;
}
body.guest .rail {
  flex-direction: row;
  align-items: center;
  border-radius: var(--r-lg);
  overflow: visible;
}
body.guest .brand {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
}
body.guest .railfoot {
  margin: 0;
  border: 0;
  padding: 10px 14px;
}
body.guest .railfoot .who {
  flex: none;
}
body.guest .topbar,
body.guest .evpick,
body.guest .navsec,
body.guest .nav {
  display: none;
}

/* ---------- a phone: the rail is a header, its places one row that slides ---------- */
@media (max-width: 900px) {
  .rail {
    position: static;
  }
  .brand {
    padding: 14px 14px 10px;
  }
  .brand span,
  .navsec {
    display: none;
  }
  .evpick {
    margin: 0 10px 8px;
  }
  .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 10px 6px;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav a {
    flex: none;
  }
  #nav2 {
    padding-bottom: 10px;
  }
  .head {
    flex-wrap: wrap;
  }
  .panel,
  .reader {
    top: 8px;
    bottom: 8px;
  }
}

/* ---------- the shortlist ---------- */
.rk.in {
  color: var(--accent-ink);
  font-weight: var(--fw-semi);
}
/* the line under the last company that makes it */
.cutline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 8px;
  font-size: 11.5px;
  font-weight: var(--fw-med);
  color: var(--accent-ink);
}
.cutline::before,
.cutline::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.cutline span {
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--accent-wash);
}
.bandrow.wide {
  grid-template-columns: 78px minmax(0, 1fr) auto;
}
.bandrow b em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-4);
}
.cfoot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 14px 12px 18px;
  border-top: .5px solid var(--hair);
  font-size: 12.5px;
  color: var(--ink-3);
}
.cfoot .sp {
  flex: 1;
}
.tab .n {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.tab.on .n {
  color: inherit;
  opacity: 0.7;
}
.sel select {
  max-width: 132px;
}
/* with the shortlist tab the row was 21px too wide at 1440 */
.stageseg button,
.tab {
  padding: 0 9px;
}
.btn.picked {
  color: var(--accent-ink);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Beside the list there is no room for five labelled buttons: the three lesser ones keep
   their icons and say what they are on hover. Expanded, they have their words back. */
.reader:not(.wide) .rfoot .btn.sec {
  padding: 0;
  width: 28px;
  justify-content: center;
}
.reader:not(.wide) .rfoot .btn.sec .l {
  display: none;
}

/* ---------- PDFs drawn in the app ---------- */
.srcbody {
  grid-template-columns: 46px minmax(0, 1fr);
}
.pdfwrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}
.qbar {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #fff3c4;
  color: #5b4a10;
  font-size: 12px;
  line-height: 1.45;
}
.qbar .ico {
  margin-top: 2px;
  flex: none;
}
.qbar span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qbar em {
  display: block;
  margin-left: auto;
  padding-left: 8px;
  font-style: normal;
  font-weight: var(--fw-med);
  white-space: nowrap;
  color: #8a6d12;
}
.qbar.miss {
  background: var(--fill-2);
  color: var(--ink-2);
}
.qbar.miss em {
  color: var(--ink-3);
}
.pdfview {
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--paper) 70%, #000 0%);
}
.pdfpage,
.pdfsheet {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(16, 21, 31, 0.2), 0 10px 26px -12px rgba(16, 21, 31, 0.35);
  overflow: hidden;
}
.pdfpage canvas,
.pdfsheet canvas {
  display: block;
}
.pdfload {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 24px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}
/* The cited words. A plain yellow wash multiplied away to nothing on a dark slide, so the mark
   is a translucent fill with a solid ring: the text shows through, and the ring shows on any
   page colour. */
.pdfpage .hl {
  position: absolute;
  border-radius: 3px;
  background: rgba(255, 210, 0, 0.32);
  box-shadow: 0 0 0 1.5px #f2b600, 0 0 0 4px rgba(242, 182, 0, 0.22);
  pointer-events: none;
  animation: mark 0.6s var(--ease) both;
  transform-origin: left center;
}
@keyframes mark {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdfpage .hl {
    animation: none;
  }
}
.pdfstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 6px 4px 18px;
  min-height: 100%;
}
.panel.wide .pb {
  background: var(--paper);
}
/* with the deck open, the deck is what is being read: it gets the larger half */
.rbody.split {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

/* the status column: chips right-aligned, on one line, in the column's own width */
.trow .flags {
  overflow: hidden;
  min-width: 0;
}
.thead .h-status {
  text-align: right;
}
.trow .cell.none {
  color: var(--ink-4);
}
@container (max-width: 640px) {
  .trow .flags {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* the search, sector and sort sit on the heading's line, so the filters below never overflow */
.headtools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
/* beside the reader the list keeps its search; sector and sort wait until it closes */
body.reading[data-view="startups"] .headtools .sel,
body.reading[data-view="startups"] .headtools .dd {
  display: none;
}
.cite.inl {
  margin: 0;
}
/* beside the reader the filters wrap onto a second line rather than run off the edge */
body.reading[data-view="startups"] .filters {
  flex-wrap: wrap;
  row-gap: 6px;
}
@media (max-width: 900px) {
  .headtools {
    flex-wrap: wrap;
    width: 100%;
  }
  .headtools .search {
    flex: 1 1 100%;
    width: auto !important;
  }
}

/* ---------- the concise card: the essentials, the rest on "More" ---------- */
.morebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--accent-ink);
  transition: background .2s var(--ease);
}
.morebtn:hover {
  background: var(--accent-wash);
}
.rating .meta small {
  margin-top: 1px;
}
.figs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.fig {
  min-width: 0;
  padding: 9px 10px 8px;
  border-radius: 10px;
  background: var(--fill);
}
.fig small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-3);
}
.fig small .cite {
  height: 16px;
  padding: 0 5px;
  font-size: 10px;
}
.fig b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fig b.none {
  color: var(--ink-4);
  font-weight: 400;
}
.fig span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (max-width: 520px) {
  .figs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rprof {
  container-type: inline-size;
}

/* ---------- pictures of the deck's pages ---------- */
.thumb.real {
  position: relative;
  background-color: var(--surface);
  background-size: cover;
  background-position: top center;
  color: var(--ink-4);
}
.thumb.real.drawn .pn {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 9.5px;
  line-height: 14px;
  background: rgba(16, 21, 31, 0.6);
  color: #fff;
}
.thumb.real.more .over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: #fff;
  background: rgba(16, 21, 31, 0.55);
}
.thumbs .thumb.real {
  aspect-ratio: 4 / 3;
}
.srcbody {
  grid-template-columns: 72px minmax(0, 1fr);
}
.deckstrip .thumb.real {
  aspect-ratio: 4 / 3;
  box-shadow: var(--ring-hair), 0 1px 2px rgba(16, 21, 31, 0.08);
}
.fig small {
  white-space: nowrap;
  overflow: hidden;
}
.fig small > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
#invemails {
  min-height: 60px;
  max-height: 180px;
}

/* ---------- a narrower window: the rail becomes a column of icons ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  :root {
    --rail: 64px;
  }
  .brand {
    justify-content: center;
    padding: 16px 0 12px;
  }
  .brandtext,
  .navsec,
  .nav .lbl,
  .railfoot .who,
  .evpick .mn,
  .evpick > .ico {
    display: none;
  }
  .evpick {
    width: 44px;
    margin: 2px auto 12px;
    padding: 9px 0;
    justify-content: center;
  }
  .nav {
    padding: 0 10px;
    gap: 4px;
  }
  .nav a {
    position: relative;
    justify-content: center;
    padding: 7px 0;
  }
  .nav .ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .nav .ct {
    position: absolute;
    top: -3px;
    right: 0;
    min-width: 17px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 15px;
    background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--surface), var(--ring-hair);
  }
  .railfoot {
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 12px;
  }
}

/* the open profile covers the list below 1180px; the top bar's buttons would show through its
   rounded corner, so they step aside while it is open */
@media (max-width: 1179px) {
  body.reading .topbar .pill {
    visibility: hidden;
  }
}

/* Home's four stage counts: two a row when the card is narrow */
.homegrid .card {
  container-type: inline-size;
}
@container (max-width: 620px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.stat small {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* expanded, the profile covers the whole work area, top bar included */
body.co-wide .topbar .pill {
  visibility: hidden;
}

/* the trace's heading: the file and its facts first; the status and the button wrap below them
   when there is not room for all four on one line */
.tracehead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 13px;
}
.tracehead > div:nth-child(2) {
  flex: 1 1 220px;
  min-width: 0;
}
/* two columns side by side only where both have room */
@media (max-width: 1000px) {
  .twocol {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* a person on a narrow screen: name and roles on the first line, the actions on their own line */
@media (max-width: 900px) {
  .personrow {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .personrow .mn {
    flex: 1 1 calc(100% - 140px);
  }
  .personrow .acts {
    order: 10;
    flex: 1 1 100%;
    padding-left: 44px;
    flex-wrap: wrap;
  }
  .personrow .acts:empty {
    display: none;
  }
}

/* ---------- menus and dropdowns ----------
   One popover for every "⋯" and every dropdown. The browser's own <select> drew a different
   control on each machine and could not match the rest of the app. */
.menu {
  position: fixed;
  z-index: 65;
  max-width: min(320px, calc(100vw - 16px));
  max-height: min(360px, calc(100dvh - 16px));
  overflow-y: auto;
  padding: 5px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--e3);
  animation: menu-in .16s var(--ease);
  transform-origin: top;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.menu .mi {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.menu .mi:hover,
.menu .mi:focus {
  background: var(--fill-2);
  outline: none;
}
.menu .mi:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--ring);
}
.menu .mi[disabled] {
  opacity: 0.45;
  cursor: default;
}
.menu .mi.danger,
.menu .mi.danger .mic {
  color: var(--red);
}
.menu .mi.danger:hover,
.menu .mi.danger:focus {
  background: var(--red-wash);
}
.menu .mic {
  display: grid;
  place-items: center;
  height: 18px;
  flex: none;
  color: var(--ink-3);
}
.menu .ml {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 18px;
}
.menu .ml span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu .ml small {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.menu .mi.on {
  font-weight: var(--fw-med);
}
.menu .mck {
  display: grid;
  place-items: center;
  width: 14px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.menu .msep {
  height: .5px;
  margin: 5px 4px;
  background: var(--hair-2);
}

/* a dropdown: label, current choice, chevron */
.dd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  max-width: 240px;
  padding: 0 10px 0 11px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.dd:hover {
  background: var(--surface-2);
}
.dd:focus-visible,
.dd.open {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--ring);
}
.dd .ddl {
  color: var(--ink-3);
  white-space: nowrap;
}
.dd .ddv {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-med);
}
.dd .ico {
  flex: none;
  color: var(--ink-3);
  transition: transform .2s var(--ease);
}
.dd.open .ico {
  transform: rotate(180deg);
}
/* in a form the dropdown is as wide as the field beside it */
.dd.wide {
  display: flex;
  width: 100%;
  max-width: none;
  height: 38px;
  justify-content: space-between;
}
.dd.wide .ddv {
  flex: 1;
  text-align: left;
}

/* the "⋯" at the end of a row */
.more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.more:hover,
.more.open {
  background: var(--fill-2);
  color: var(--ink);
}
.more:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--ring);
}
.more-sp {
  width: 30px;
  flex: none;
}

/* a status: a dot for the colour, a word for the meaning */
.stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 96px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.stat i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}
.stat.good i {
  background: var(--green);
}
.stat.warn i {
  background: #c98a1b;
}
.stat.bad {
  color: var(--red);
}
.stat.bad i {
  background: var(--red);
}
.stat.off {
  color: var(--ink-3);
}
.stat.off i {
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--ink-4);
}
.personrow .role {
  flex: none;
  width: 72px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.btn.sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.role-m {
  display: none;
}
/* the row keeps one line at every width; the actions live in the "⋯", so nothing wraps */
@media (max-width: 900px) {
  .personrow {
    flex-wrap: nowrap;
  }
  .personrow .mn {
    flex: 1 1 auto;
  }
}
@media (max-width: 640px) {
  .personrow {
    padding: 10px 12px;
    gap: 10px;
  }
  .personrow .role {
    display: none;
  }
  .role-m {
    display: inline;
  }
  /* an undelivered invitation's reason ran to five lines on a phone; two, and the rest on hover */
  .personrow .sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .stat {
    min-width: 0;
  }
}

/* ---------- you, in the corner of the rail ---------- */
.whobtn {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  margin: -5px -6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.whobtn:hover,
.whobtn.open {
  background: var(--fill-2);
}
.whobtn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--ring);
}
.whobtn[disabled] {
  cursor: default;
  background: none;
}
.whobtn .who b,
.whobtn .who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1200px) and (min-width: 901px) {
  .whobtn {
    flex: none;
    margin: 0;
  }
}

/* a menu's own heading: who it is about */
.menu .mhead {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px 6px;
  min-width: 0;
}
.menu .mhead b {
  font-size: 13px;
  font-weight: var(--fw-med);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu .mhead small {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---------- team comments: a pane at the right of the reader ----------
   Full height between the reader's head and foot, like a design tool's comment sidebar. The
   docked reader widens to make room rather than squeezing the profile. */
.rmid {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}
.rmid > .rbody {
  flex: 1;
  min-width: 0;
}
.talk {
  display: none;
}
.reader.talking .talk {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 340px;
  min-height: 0;
  background: var(--surface);
  border-left: .5px solid var(--hair-2);
  animation: talk-in .32s var(--ease);
}
@keyframes talk-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}
.reader.talking:not(.wide) {
  width: min(960px, calc(100% - 24px));
}
.talkhead {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 12px 12px 16px;
  border-bottom: .5px solid var(--hair);
}
.talkhead .mn {
  flex: 1;
  min-width: 0;
}
.talkhead b {
  font-size: 14px;
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
}
.talkhead .tnum {
  margin-left: 7px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.talkhead small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.talklist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
}
.cmt {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 12px;
  transition: background .2s var(--ease);
}
.cmt + .cmt {
  margin-top: 2px;
}
.cmt:hover,
.cmt.editing {
  background: var(--surface-2);
}
.cmt > .tile {
  flex: none;
  margin-top: 1px;
}
.cmt .cb {
  flex: 1;
  min-width: 0;
}
.cmt .ch {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  font-size: 12.5px;
}
.cmt .ch b {
  font-weight: var(--fw-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmt .ch b em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-4);
}
.cmt .ch time {
  flex: 1;
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
}
.cmt .ch .more,
.cmt .ch .more-sp {
  width: 26px;
  height: 24px;
  opacity: 0;
}
.cmt:hover .ch .more,
.cmt .ch .more:focus-visible,
.cmt .ch .more.open {
  opacity: 1;
}
@media (hover: none) {
  .cmt .ch .more {
    opacity: 1;
  }
}
.cmt .ctext {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmt .cact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
.cmt .cact .hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-4);
}
.talkempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 48px auto 0;
  max-width: 250px;
  text-align: center;
  color: var(--ink-3);
}
.talkempty .ico {
  margin-bottom: 4px;
  color: var(--ink-4);
}
.talkempty b {
  font-size: 13.5px;
  font-weight: var(--fw-med);
  color: var(--ink-2);
}
.talkempty span {
  font-size: 12.5px;
  line-height: 1.5;
}

/* the box: a field with its send button inside it, pinned to the foot of the pane */
.compose {
  flex: none;
  padding: 10px 12px 12px;
  border-top: .5px solid var(--hair);
}
.cbox {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 5px 5px 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: box-shadow .2s var(--ease);
}
.cbox:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--ring);
}
textarea.cin {
  flex: 1;
  min-width: 0;
  min-height: 26px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  resize: none;
  outline: none;
  overflow-y: auto;
}
textarea.cin::placeholder {
  color: var(--ink-4);
}
.cmt .cbox {
  margin-top: 4px;
  padding-right: 12px;
}
.send {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--fill-2);
  color: var(--ink-4);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.compose.typed .send {
  background: var(--accent);
  color: var(--on-accent);
}
.send:active {
  transform: scale(0.94);
}
.send:disabled {
  opacity: 0.5;
}
.compose .hint {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-4);
}

/* the comment icon in the reader's head, with its count */
.talkbtn {
  position: relative;
}
.talkbtn.on {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.talkbtn .badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: var(--fw-semi);
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

/* a phone or a narrow window: the discussion takes the reader's whole body */
@media (max-width: 900px) {
  .reader.talking .talk {
    position: absolute;
    inset: 0;
    width: auto;
    border-left: 0;
    z-index: 2;
  }
}

/* the count of team comments beside a name in the list */
.cmtn {
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 4px;
  transition: background .2s var(--ease), color .2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  vertical-align: 1px;
}
.cmtn:hover {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
/* a touch screen has no ⌘↵; the send button is the way to post there */
@media (hover: none) {
  .compose .hint,
  .cmt .cact .hint {
    visibility: hidden;
  }
}

/* ---------- the Amaya mark ----------
   The brand kit's border mark (amaya-brand-logo, the one Amaya Intelligence draws): the light-blue
   "a" tile in its ring of the seven stage colours. Its file carries room for the glow around the
   tile (the tile is 150 of its 202 units), so the image is drawn larger than the tile and pulled
   back by the glow's width; the tile itself keeps the size the layout gave it. */
img.mark {
  --m: 30px;
  width: calc(var(--m) * 202 / 150);
  height: calc(var(--m) * 202 / 150);
  margin: calc(var(--m) * -26 / 150);
  border-radius: 0;
  background: none;
  box-shadow: none;
  flex: none;
  display: block;
}
/* the old letter tile's .mark.xl (two classes) outranks img.mark, so the size is said again */
img.mark.xl {
  --m: 52px;
  width: calc(var(--m) * 202 / 150);
  height: calc(var(--m) * 202 / 150);
  border-radius: 0;
}
.signcard img.mark.xl {
  margin: calc(var(--m) * -26 / 150) auto calc(18px - var(--m) * 26 / 150);
}

/* ---------- sign in · create a workspace ---------- */
.signcard form {
  text-align: left;
}
.signcard form h1,
.signcard form .lede {
  text-align: center;
}
.signcard .field + .field {
  margin-top: 12px;
}
.signcard .input[aria-invalid] {
  box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 4px var(--red-wash);
}
.signswitch {
  margin-top: 18px;
  padding-top: 16px;
  border-top: .5px solid var(--hair);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}
.textbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--fw-med);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.textbtn:hover {
  text-decoration-color: currentColor;
}
.signcard .note {
  text-align: center;
}

/* ---------- the app's own question box ---------- */
.dlg {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: dlg-fade .18s ease both;
}
.dlg.out {
  opacity: 0;
  transition: opacity .15s ease;
}
@keyframes dlg-fade {
  from {
    opacity: 0;
  }
}
.dlgcard {
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--ring-hair), var(--hi), var(--e3);
  animation: dlg-rise .26s var(--ease) both;
}
@keyframes dlg-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.dlgcard h2 {
  font-size: 16px;
  font-weight: var(--fw-semi);
  letter-spacing: -.016em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dlgcard p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dlgcard .field {
  margin-top: 16px;
}
.dlgerr {
  display: block;
  min-height: 0;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--red);
}
.dlgerr:empty {
  display: none;
}
.dlgacts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
/* one deep red in both themes: dark mode's --red is a light tint, and white on it was 2.6:1 */
.pill.danger {
  background: #b03b39;
  color: #fff;
  box-shadow: none;
}
.pill.danger:hover {
  background: #9a3230;
}
.signcard .note:empty {
  display: none;
}

/* ---------- the rubric's levels ---------- */
.check.part .m {
  background: var(--amber-wash);
  color: var(--amber);
}
.check em.lvl {
  margin-left: 4px;
  font-style: normal;
  font-size: 11px;
  color: var(--amber);
}
em.lvl.fact {
  color: var(--ink-4);
}
.check span::first-letter {
  text-transform: uppercase;
}
.rubric .rubhead {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.rubric .rubhead .nm {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rubric .rubhead .ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.rubric .rubrow .nm {
  font-size: 13px;
}
.rubric em.lvl {
  font-style: normal;
  font-size: 11px;
  margin-left: 4px;
}
.levels {
  list-style: none;
  margin: 8px 0 2px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.levels li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.levels li b {
  font-weight: var(--fw-med);
  color: var(--ink-3);
  font-size: 12px;
}

/* a workspace waiting for approval: said once, above every screen */
.callout.waiting {
  margin: 0 0 14px;
  background: var(--amber-wash);
  color: var(--amber);
}
.callout.waiting b {
  font-weight: var(--fw-semi);
}

/* A thousand rows: the browser lays out only the ones on screen. */
.rows .trow,
.rows .row.file {
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}

/* ---------- fixes from the click-through, 15 Nov ---------- */
/* Activity's counters sit in a 380px column: two by two, so "Reading" and "Waiting" are never cut
   to "Readin" and "Waitin". */
.twocol .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The status column wraps a third chip to a second line rather than cutting the first. */
.trow .flags {
  flex-wrap: wrap;
  row-gap: 4px;
}
/* The keyboard hint goes first when the bar is short of room: it was pushing "1 of 6" out. */
@media (max-width: 1440px) {
  .reader.wide .keys {
    display: none;
  }
}
/* With comments open the profile has a column's room, not two. */
.reader.talking .rprof.two {
  grid-template-columns: minmax(0, 1fr);
}
/* On a phone: every place in the menu shown, and the account (sign out, theme) reachable. */
@media (max-width: 900px) {
  .nav {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 4px;
  }
  .railfoot {
    display: flex;
    padding: 0 10px 10px;
  }
}