/* Hallmark · genre: editorial · macrostructure: Ecosystem Index · theme: Atelier · enrichment: none · nav: N6 masthead · footer: Ft4 dense colophon
 * N6 knobs: issue line above wordmark · wordmark 2xl · double rule
 * Ft4 knobs: monospace · single block · includes date + prototype note
 * C1 knobs: rectangular · spacious · arrow
 */

@import url("tokens.css");

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
}

html { scroll-behavior: smooth; }

/* Signature use 2 of 2 — a 4px rail across the top of every page */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-ember);
  z-index: 60;
}

body {
  margin: 0;
  padding-top: 4px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--text-display-s); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); font-weight: 700; }

p { margin: 0 0 var(--space-md); max-width: 65ch; }

a {
  color: inherit;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-wash); }

img { max-width: 100%; }

/* Any author display rule outranks the UA's [hidden] { display: none }, so a
   flex or grid element stays visible when hidden. data-when relies on this
   holding, so state it once and mean it. */
[hidden] { display: none !important; }

.shell {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}

.label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  font-weight: 500;
}

hr.rule { border: 0; border-top: var(--rule-hair); margin: var(--space-xl) 0; }

/* ---------- masthead (N6) ---------- */

.masthead { padding-top: var(--space-sm); }

.masthead__issue {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-xs);
}

/* Transparent bar — the marks carry it, not a container */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  background: transparent;
  padding: var(--space-md) 0;
}

/* Temporary wordmark — swap for the real mark when there is one */
.navbar__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
/* The rule that runs off the mark, as in the reference */
/* The mark carries its own rounded ground, so it needs no frame of ours,
   only a size that sits on the cap height of the wordmark beside it. */
.navbar__mark {
  width: clamp(1.6rem, 4vw, 2rem);
  height: auto;
  border-radius: 7px;
  flex: none;
  display: block;
}

/* Signed in, the mark holds your face.
 *
 * The same red rounded square, the same size, in the same place to the left
 * of the wordmark — with a round photo set inside it and a ring of paper
 * between the two, which is the framing everybody already reads as a person
 * rather than a logo. */
.navbar__face {
  /* Larger than the CC mark it replaces. A face at logo size reads as a logo;
   * at this size it reads as you, which is the point of it being there. */
  width: clamp(2.2rem, 6vw, 2.8rem);
  aspect-ratio: 1;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent-hover);
}
.navbar__face .miniface {
  --miniface: 80%;
  box-shadow: 0 0 0 2px var(--color-paper);
  background: var(--color-paper-3);
}
.navbar__face .miniface__i { color: var(--color-accent-deep); }

.navbar__logo::after {
  content: "";
  width: clamp(1.5rem, 5vw, 4.5rem);
  height: 2px;
  background: var(--color-ink);
}
.navbar__logo:hover { text-decoration: none; color: var(--color-accent-deep); }
.navbar__logo:hover::after { background: var(--color-accent); }

.masthead__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead__links a {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.masthead__links a:hover {
  text-decoration: none;
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}
.masthead__links a[aria-current="page"] { border-bottom-color: currentColor; }

/* The one filled action in the bar — ember, the primary-action value */
.masthead__links a.navbar__cta,
.masthead__links a.navbar__cta[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: 999px;
  border-bottom: 0;
  padding: 0.65rem 1.4rem;
  transition: background var(--dur-fast) var(--ease-out);
}
.masthead__links a.navbar__cta:hover { background: var(--accent-hover); color: var(--color-on-accent); }
.masthead__links a.navbar__cta:active { background: var(--accent-active); }

/* ---------- hero (home) ----------
 * The name carries the page: centred, as large as the frame allows, with
 * everything else stacked beneath it in descending weight. The window is a
 * dark screen on warm ground rather than a panel sitting in it.
 */

.hero {
  background: var(--color-void);
  padding-block: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.browser {
  border-radius: 14px;
  overflow: clip;
  background: var(--color-screen);
  border: 1px solid var(--color-rule);
  box-shadow: 0 24px 56px oklch(48% 0.06 60 / 0.20);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.7rem var(--space-md);
  background: var(--color-paper-3);
  border-bottom: 1px solid var(--color-rule);
}
.browser__dots { display: inline-flex; gap: 6px; flex: none; }
.browser__dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-active);
  opacity: 0.55;
}
.browser__dots i:first-child { background: var(--color-accent); opacity: 1; }

/* The address bar carries the warm note the chrome would otherwise lack */
.browser__url {
  flex: 1;
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-accent-deep);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent-press);
  border-radius: 999px;
  padding: 3px var(--space-md);
}

.browser__page {
  position: relative;
  overflow: clip;
  text-align: center;
  padding: clamp(var(--space-2xl), 8vw, 7rem) clamp(var(--space-md), 4vw, var(--space-2xl));
}

/* --- the lockup --- */

.hero__title { margin: 0; max-width: none; }

.hero__name {
  position: relative;
  display: block;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(3.2rem, 15.5vw, 13rem);
  letter-spacing: -0.05em;
  line-height: 0.84;

  /* Signature use 1 of 2. The fallback colour paints first, so the name is
     never invisible if background-clip is unsupported. */
  color: var(--ink-on-light);
  background: var(--gradient-ember);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.05em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__name { background: none; -webkit-text-fill-color: currentColor; }
}

.hero__dot {
  position: relative;
  bottom: 0.58em;
  display: inline-block;
  vertical-align: baseline;
  width: clamp(0.5rem, 1.7vw, 1.3rem);
  height: clamp(0.5rem, 1.7vw, 1.3rem);
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--color-orchid);
}

/* Same face as the name, a step down, and kept inside the ember family */
.hero__slogan {
  display: block;
  margin-top: clamp(var(--space-sm), 1.6vw, var(--space-lg));
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.9vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.02;

  color: var(--color-accent);
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__slogan { background: none; -webkit-text-fill-color: currentColor; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  margin: clamp(var(--space-xl), 4vw, var(--space-2xl)) 0 0;
  max-width: none;
}

/* ---------- file cards (the two ways in) ----------
 * A folder: a gradient back with sheets showing over the top, and a dark
 * body with a raised tab carrying the label.
 */

.filecard {
  position: relative;
  display: block;
  width: clamp(10.5rem, 24vw, 13.5rem);
  aspect-ratio: 1 / 1;
  padding: 6px;
  border-radius: 24px;
  background: var(--color-screen);
  box-shadow: 0 12px 28px oklch(48% 0.06 60 / 0.20);
  text-decoration: none;
  overflow: clip;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.filecard:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px oklch(48% 0.06 60 / 0.28);
}

/* The gradient back of the folder */
.filecard__lid {
  position: absolute;
  inset: 6px 6px auto 6px;
  height: 50%;
  border-radius: 19px 19px 3px 3px;
  overflow: clip;
  isolation: isolate;
}
.filecard--start .filecard__lid { background: var(--gradient-card-start); }
.filecard--join  .filecard__lid { background: var(--gradient-card-join); }

/* Three sheets, fanned, rising out of the folder */
.filecard__sheet {
  position: absolute;
  bottom: -18%;
  width: 47%;
  height: 86%;
  border-radius: 7px;
  /* Ruled lines are inset so they read as a margin, not a full-bleed stripe */
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 13px,
      oklch(70% 0.012 80 / 0.55) 13px 14px,
      transparent 14px 24px) no-repeat 50% 0 / 74% 100%,
    #FBF7F3;
  /* A hard rim plus a cast shadow, so overlapping sheets stay separate */
  box-shadow:
    0 0 0 1px oklch(72% 0.02 80 / 0.95),
    -3px 3px 9px oklch(45% 0.05 60 / 0.22);
}
.filecard__sheet:nth-child(1) { left: 2%;  transform: rotate(-13deg); }
.filecard__sheet:nth-child(2) { left: 25%; transform: rotate(-1deg); bottom: -10%; z-index: 1; }
.filecard__sheet:nth-child(3) { left: 49%; transform: rotate(11deg); bottom: -16%; }

/* The raised tab — the dark body steps up on the left to hold the label */
.filecard__tab {
  position: absolute;
  z-index: 2;
  left: 6px;
  top: 42%;
  width: 62%;
  height: 13%;
  background: var(--color-paper-2);
  border-radius: 0 16px 0 0;
}

/* The white pocket at the front of the folder.
 *
 * It was pinned to exactly half the card — `inset: 50% …` — which fixes its
 * height to half a square whatever is written in it. A title that wrapped to
 * two lines pushed the footer straight out through the rounded bottom edge.
 * Anchored to the bottom instead, with half the card as a floor: it keeps the
 * same proportions when the text is short and grows upward when it is not. */
.filecard__body {
  position: absolute;
  z-index: 2;
  inset: auto 6px 6px 6px;
  min-height: calc(50% - 6px);
  max-height: calc(100% - 12px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-xs);
  background: var(--color-paper-2);
  border-radius: 3px 3px 19px 19px;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
}
/* The heading takes the slack so the footer stays on the bottom edge. */
.filecard__head { margin-bottom: auto; }

.filecard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.filecard__title {
  display: block;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.filecard__sub {
  display: block;
  margin-top: 1px;
  font-family: var(--font-round);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

/* The overflow dots, as in the reference */
.filecard__dots {
  flex: none;
  margin-top: 6px;
  width: 15px; height: 3px;
  background:
    radial-gradient(circle, var(--color-neutral) 45%, transparent 46%) 0 50% / 6px 4px no-repeat,
    radial-gradient(circle, var(--color-neutral) 45%, transparent 46%) 50% 50% / 6px 4px no-repeat,
    radial-gradient(circle, var(--color-neutral) 45%, transparent 46%) 100% 50% / 6px 4px no-repeat;
}

.filecard__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-round);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-ink);
}
.filecard__foot svg { width: 13px; height: 13px; flex: none; }

.filecard--start:hover .filecard__title { color: var(--color-accent); }
.filecard--join:hover  .filecard__title { color: var(--color-flare-hover); }

/* One line of prose, under the actions, deliberately quiet */
.hero__lede {
  max-width: 42ch;
  margin: var(--space-lg) auto 0;
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* ---------- banner (home, signed in) ----------
 * The hero's job is done once someone has an account, so it shrinks to a
 * strip: the name, one line, and then straight into the work.
 */

/* Signed in, the front door keeps its chrome but loses its height: the same
   browser frame as the hero, sized to a banner rather than a landing page. */
.banner { padding-block: var(--space-lg); }
.browser--banner .browser__page {
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl)) clamp(var(--space-md), 4vw, var(--space-xl));
  text-align: left;
}
.browser--banner .browser__url { max-width: 16rem; }

/* The banner is the signed-in front door, so it carries you too.
 *
 * No red square here — on a red field the square is invisible and only makes
 * the photo smaller. The picture itself, round, with a ring of paper holding
 * it off the ground behind it.
 *
 * Taken out of the flow rather than sat in a row with the wordmark, because
 * the banner must stay exactly the height it is: a face taller than the type
 * beside it would push the whole thing open. Absolute, centred on the line,
 * and the name is indented to clear it — so the photo can be any size that
 * fits and the banner never moves.
 */
/* The banner's own row. The face is out of flow above it, so what sits in
   here is the wordmark and, on the right, the level. */
.browser--banner .browser__page {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.banner__face {
  --face: clamp(3rem, 8vw, 5.5rem);
  position: absolute;
  left: clamp(var(--space-md), 4vw, var(--space-xl));
  top: 50%;
  transform: translateY(-50%);
  width: var(--face);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  display: block;
}
.banner__face .miniface {
  --miniface: 100%;
  box-shadow: 0 0 0 3px var(--color-paper);
  background: var(--color-paper-3);
}
.banner__face .miniface__i { font-size: calc(var(--face) * 0.34); }
/* Only when there is a face to clear. */
.banner__face + .banner__name {
  padding-left: calc(clamp(3rem, 8vw, 5.5rem) + clamp(var(--space-sm), 2vw, var(--space-lg)));
}

.banner__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 0.88;
  max-width: none;

  color: var(--color-ink);
  background: var(--gradient-ember);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.05em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .banner__name { background: none; -webkit-text-fill-color: currentColor; }
}

/* The signed-out page opens on a red field. Signed in, the banner was all
   cream and the scheme went missing from the first screen, so the same red
   sits under the line instead. */
/* The dot rides the cap line, the same mark the hero name carries. */
.banner__dot {
  position: relative;
  bottom: 0.58em;
  display: inline-block;
  vertical-align: baseline;
  width: clamp(0.4rem, 1.1vw, 0.75rem);
  height: clamp(0.4rem, 1.1vw, 0.75rem);
  margin-left: 0.1em;
  border-radius: 50%;
  background: var(--color-orchid);
  -webkit-text-fill-color: initial;
}

.banner__line {
  margin: var(--space-md) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  /* neutral is a dark brown for cream. On the red block it would vanish. */
  color: #FBE9D4;
}

/* Pinterest-style feed — the masonry columns already flow and already carry
   their own bottom margin; the tiles just need more than one height, or the
   columns line up in rows anyway. */
.tile--tall { aspect-ratio: 3 / 4.4; }

/* Larger partnerships — sits under the featured rail */
.partnerships {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
}
.partnerships p { margin: 0; max-width: 60ch; color: var(--color-muted); }

/* ---------- typographic CTA (C3) ---------- */

.cta-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  margin-right: var(--space-lg);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cta-link:hover { color: var(--color-accent-deep); border-bottom-color: var(--color-accent); }
.cta-link .arrow { font-family: var(--font-body); }

/* ---------- rails (Ecosystem Index) ---------- */

.rail { padding-block: var(--space-xl); border-top: var(--rule-hair); }
.rail--flush { border-top: 0; }

.rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.rail__head h2 { margin: 0; }
.rail__head .meta { flex: 1; }

/* The way out of a rail is an action, so it looks like one: the hero's red,
   light type, and enough of a target to be pressed on a phone. It was an
   underlined link losing an argument with everything around it. */
.rail__more {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-lg);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rail__more:hover {
  background: var(--accent-hover);
  border-color: var(--color-accent-deep);
  color: var(--color-on-accent);
  transform: translateY(-1px);
}
.rail__more:active { transform: translateY(0); }

.rail__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--space-lg);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x proximity;
}
.rail__row > * { scroll-snap-align: start; }

/* A fixed width, not a share of the space. With 1fr a row holding one card
   gave that card the whole row, so Indie productions — which has one
   production in it — came up several times the size of everything on every
   other row. A card is a card: the same size wherever it appears. */
.rail__row--feature { grid-auto-columns: 22rem; }

/* ---------- cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-decoration: none;
  min-width: 0;
}

.card h3 { margin: var(--space-2xs) 0 0; }
.card p { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* Abstract placeholder tiles — sample-work stand-ins, never fake photography */
.tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule-hair);
  border-radius: var(--radius-md);
  /* A tile with no picture is empty content, so it recedes. Nothing here can
     be uploaded by whoever is looking — the ember yellow stays reserved for
     the one slot that can. */
  background: linear-gradient(160deg,
    oklch(92% 0.035 var(--tile-h, 80)) 0%,
    oklch(85% 0.050 var(--tile-h, 80)) 100%);
  overflow: clip;
}
.tile--wide { aspect-ratio: 3 / 2; }

/* The ember wash. On ::before so it sits over the photo variant too, and
   above the image, which is positioned. */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--gradient-tile);
  pointer-events: none;
}

.tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  z-index: 1;
  background: oklch(38% 0.06 var(--tile-h, 80) / 0.10);
}
.tile__tag {
  position: absolute;
  z-index: 3;
  top: var(--space-xs);
  left: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink);
  background: oklch(99% 0.012 85 / 0.86);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Launched work is live in the world, so its marker is a green pill rather
 * than the neutral one every other card wears. White on #1E6B4E is 6.43:1. */
.tile__tag--live {
  color: #FFFFFF;
  background: var(--color-ok);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tile--photo { background: var(--color-paper-2); }
.tile--photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* Real work keeps its own values, so the wash lifts off on hover */
.tile--photo::after { content: none; }
.tile--photo::before { transition: opacity var(--dur-med) var(--ease-out); }
.card:hover .tile--photo::before { opacity: 0.35; }

.card:hover .tile { border-color: var(--color-rule-2); }
.card:hover h3 { color: var(--color-accent-deep); }

/* ---------- staffing model cards (home) ---------- */

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.model-card {
  display: flex;
  flex-direction: column;
  border: var(--rule-hair);
  border-top: 3px solid oklch(62% 0.13 var(--tile-h, 80));
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  background: var(--color-paper-2);
}
.model-card h3 { margin: var(--space-2xs) 0 var(--space-sm); }

.model-card__positions {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  flex: 1;
}
.model-card__positions li {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-xs);
  border-top: var(--rule-hair);
  font-size: var(--text-sm);
}
.model-card__positions strong { font-weight: 500; }
.model-card__positions span { color: var(--color-neutral); }

.model-card__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-top: var(--rule-hair);
  padding-top: var(--space-sm);
}
.model-card__cta:hover { color: var(--color-accent-deep); }

/* ---------- chips (selectable — mood board, filters) ---------- */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 var(--space-lg);
}

.chip {
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"] {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
}
.chip:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- buttons (C1 outlined chip, rectangular) ---------- */

.btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); }

.btn--quiet { border-color: var(--color-rule-2); color: var(--color-muted); }
.btn--quiet:hover { border-color: var(--color-ink); color: var(--color-ink); }

.btn[data-state="loading"] { opacity: 0.7; pointer-events: none; }
.btn[data-state="success"] { border-color: var(--color-ok); color: var(--color-ok); background: var(--color-ok-wash); }

/* ---------- forms ---------- */

.field { margin-bottom: var(--space-lg); max-width: 40rem; }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
}

.field .hint { font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-2xs); }

.field input,
.field textarea,
.field select {
  font: inherit;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-3);
  color: var(--color-ink);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }

/* Inputs sit on Raised, where the muted value falls just under AA — the
   placeholder gets its own lifted value rather than the browser default. */
.field ::placeholder { color: var(--color-placeholder); opacity: 1; }

.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-neutral); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}
.field input:disabled, .field textarea:disabled { background: var(--color-paper-2); color: var(--color-disabled); }

.field.is-error input, .field.is-error textarea { border-color: var(--color-danger); }
.field .error-msg {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-2xs);
}
.field.is-error .error-msg { display: block; }

/* ---------- google sign-in ---------- */

.btn--google {
  width: 100%;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  border-color: var(--color-rule-2);
}
.btn--google:hover { background: var(--color-paper-3); border-color: var(--color-neutral); }
.btn__g { width: 18px; height: 18px; flex: none; }

/* labelled divider between Google and the password form */
.or-rule {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-neutral);
  font-size: var(--text-xs);
}
.or-rule::before, .or-rule::after {
  content: '';
  flex: 1;
  border-top: var(--rule-hair);
}

/* ---------- stepper ---------- */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.stepper li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.stepper li[aria-current="step"] { color: var(--color-accent-deep); border-bottom-color: var(--color-accent); }
.stepper li.is-done { color: var(--color-ink); }

.step-panel { display: none; }
.step-panel.is-active { display: block; }

.step-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair);
}

/* ---------- option slabs (contractor vs director) ---------- */

.option-slabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block: var(--space-lg);
}

.option-slab {
  text-align: left;
  font: inherit;
  padding: var(--space-lg);
  background: transparent;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.option-slab:hover { border-color: var(--color-ink); }
.option-slab[aria-pressed="true"] {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-wash);
}
.option-slab h3 { margin-top: 0; }
.option-slab ul { margin: var(--space-xs) 0 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--color-muted); }
.option-slab .meta { display: block; margin-top: var(--space-sm); }

/* ---------- masonry match feed ---------- */

.masonry {
  columns: 3;
  column-gap: var(--space-lg);
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
  max-width: 100%;
}

.match-card {
  border: var(--rule-hair);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* A match card is an opaque cream card sitting inside the red send panel, so
   the panel's white ink and its pale meta land on cream and disappear — the
   co-curator's name has been invisible on this card. The card is a different
   ground, not a hole in the panel, so it states its own colours. */
.match-card { color: var(--color-ink); }
.cform .match-card .meta { color: var(--color-neutral); }
.match-card:hover { border-color: var(--color-rule-2); }
.match-card.is-selected { border-color: var(--color-accent-deep); box-shadow: inset 0 0 0 1px var(--color-accent-deep); }
.match-card h3 { margin: var(--space-sm) 0 var(--space-2xs); }
.match-card .roles { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-xs); }

/* ---------- a person as a circle, on a card ----------
 *
 * The same shape, the same grey ground and the same framing as the portrait
 * on their own profile. One size variable drives the circle, the ring and the
 * initials together, so a caller sets --avatar-size and nothing else. */
.avatar {
  --avatar-size: 3.25rem;
  position: relative;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-3);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 4px var(--color-portrait-halo),
    0 2px 6px rgb(63 44 27 / 0.10);
}
/* Out of flow for the same reason as the profile portrait: in flow the photo
   takes a grid row of its own, and its height: 100% has no definite track to
   resolve against, either of which turns the circle into an ellipse. */
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 28%);
  border-radius: 50%;
}
.avatar__initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--avatar-size) * 0.34);
  line-height: 1;
  color: var(--color-neutral);
}

/* Half on the work tile, half on the card, with a little inset from the edge
   so the ring is not cut by the card's own border. */
.match-card__face {
  margin: calc(var(--avatar-size) / -2) 0 0 var(--space-2xs);
  z-index: 1;
}

.match-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair);
}

/* ---------- development feed (join · growth step) ---------- */

.explore__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-xl) 0 var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair);
}

.dev-card {
  border: var(--rule-hair);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.dev-card:hover { border-color: var(--color-rule-2); }
.dev-card.is-saved { border-color: var(--color-ok); box-shadow: inset 0 0 0 1px var(--color-ok); }
.dev-card h3 { margin: var(--space-2xs) 0 var(--space-xs); }
.dev-card p { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-xs); }
.dev-card .tile { aspect-ratio: 3 / 2; }

.dev-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair);
}
.dev-card__foot .btn { min-height: 36px; padding-block: var(--space-2xs); }

/* ---------- team seats ----------
 * Open roles, drawn deliberately as outlines rather than filled cards, so
 * they never read as a person who is already here.
 */

.seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.seat {
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
}
.seat h3 { margin: var(--space-2xs) 0 var(--space-xs); }
.seat p { font-size: var(--text-sm); color: var(--color-muted); margin: 0; max-width: none; }
.seat .meta { color: var(--color-accent); }

/* ---------- the prompt through to the team ---------- */

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
}
.callout > div { min-width: 0; }
.callout h2 { margin: 0 0 var(--space-2xs); font-size: var(--text-md); }
.callout p { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- detail overlay (converge-tab expand) ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: oklch(30% 0.04 60 / 0.42);
  display: none;
  z-index: 40;
}
.overlay.is-open { display: block; }

.overlay__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(30rem, 100%);
  background: var(--color-paper);
  border-left: var(--rule-hair);
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
  transform: translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .overlay.is-open .overlay__panel { animation: slide-in var(--dur-med) var(--ease-out); }
  @keyframes slide-in { from { transform: translateX(2rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
}

.overlay__close {
  font: inherit;
  background: none;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  float: right;
}
.overlay__close:hover { border-color: var(--color-ink); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

/* Specialty with the work that backs it, in the profile overlay */
.practice {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-sm) var(--space-md);
}
.practice__row {
  border-left: 2px solid var(--color-rule-2);
  padding-left: var(--space-sm);
}
.practice__row h4 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.practice__row p { margin: 0; }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  border-bottom: var(--rule-hair);
  margin-bottom: var(--space-xl);
}
.tabs button {
  font: inherit;
  font-size: var(--text-sm);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) 0;
  min-height: 44px;
  color: var(--color-neutral);
  cursor: pointer;
}
.tabs button:hover { color: var(--color-ink); }
.tabs button[aria-selected="true"] {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}
.tabs .count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  margin-left: var(--space-2xs);
}

/* ---------- dashboard sub-nav (one row per section page) ---------- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  border-bottom: var(--rule-hair);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.subnav__group { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.subnav__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Tabs, not a row of links. They were underlined text that only looked
   pressable once you were already on one; now each has an edge, a ground and
   a lift, so the whole row reads as somewhere you can go. */
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 12px 12px 6px 6px;
  padding: var(--space-2xs) var(--space-md);
  min-height: 34px;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.subnav a:hover {
  color: var(--color-ink);
  background: var(--color-paper-3);
  border-color: var(--color-rule-2);
  transform: translateY(-1px);
}
.subnav a:active { transform: translateY(0); }
.subnav a[aria-current="page"] {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 600;
}
.subnav a[aria-current="page"]:hover {
  background: var(--accent-hover);
  border-color: var(--color-accent-deep);
  color: var(--color-on-accent);
}

/* Notification badges.
 *
 * A red circle on the corner of the tab, the way every phone does it, rather
 * than a number sitting inside the label where it reads as part of the words.
 * Empty means nothing waiting and the badge is not drawn at all — a nav full
 * of zeroes is a nav that has taught you to stop looking.
 *
 * A count you can read gets a number; an unread thing with no meaningful
 * count gets a plain dot. White on #B22F16 is 6.34:1.
 */
.subnav a { position: relative; }
.subnav .count { display: none; }
.subnav .count:not(:empty) {
  display: grid;
  place-items: center;
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  border: 2px solid var(--color-paper);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* On the current tab the ground is already red, so the ring changes rather
   than the badge — otherwise it disappears into the tab it sits on. */
.subnav a[aria-current="page"] .count:not(:empty) {
  background: #FFFFFF;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
/* The same badge on the masthead's Dashboard link, which is not a subnav tab
   and so needs the positioning of its own. */
.masthead__links li { position: relative; }
/* Room for a badge hanging off the right of a nav item. */
.masthead__links li:has(.count--nav:not(:empty)) { margin-right: 10px; }
.count--nav { display: none; }
.count--nav:not(:empty) {
  display: grid;
  place-items: center;
  position: absolute;
  /* Clear of the word, not on top of its last letter. The nav has no
     padding to hide inside, so the badge sits fully outside the link and the
     row gains a little room for it. */
  top: -7px;
  right: -14px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  border: 2px solid var(--color-paper);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Something there, nothing worth counting. */
.subnav .count[data-dot]:not(:empty) {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  font-size: 0;
  border-width: 2px;
}

/* ---------- project rows / pending list ---------- */

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: var(--rule-hair);
}
.project-row h3 { margin: 0 0 var(--space-2xs); }
.project-row p { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

.project-row h3 .member-link {
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-2);
}
.project-row h3 .member-link:hover {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}
.project-row h3 .member-link::after {
  content: " →";
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.status-mark {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.status-mark--pending { border-color: var(--color-accent-deep); color: var(--color-accent-deep); }
.status-mark--active { border-color: var(--color-ok); color: var(--color-ok); }

.advice {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  margin: var(--space-lg) 0;
}
.advice ul { margin: var(--space-xs) 0 0; padding-left: 1.1rem; }
.advice li { margin-bottom: var(--space-xs); font-size: var(--text-sm); }

/* ---------- spec table (F3) ---------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec th {
  text-align: left;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-heavy);
  white-space: nowrap;
}
.spec td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair);
  vertical-align: top;
}
.spec .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-scroll { overflow-x: auto; }

/* ---------- timeline (F4 step sequence, vertical) ---------- */

.timeline { list-style: none; margin: var(--space-xl) 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-xl);
  border-left: 1px solid var(--color-rule-2);
  margin-left: var(--space-xs);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-neutral);
}
.timeline li.is-done::before { background: var(--color-ink); border-color: var(--color-ink); }
.timeline li.is-now::before { border-color: var(--color-accent); background: var(--color-accent); }
.timeline h3 { margin: 0 0 var(--space-2xs); }
.timeline .meta { display: block; margin-bottom: var(--space-xs); }
.timeline p { font-size: var(--text-sm); color: var(--color-muted); }

.prompt-card {
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-sm);
  max-width: 34rem;
  font-size: var(--text-sm);
}
.prompt-card .meta { display: block; margin-bottom: var(--space-2xs); }

/* ---------- assistant panel ---------- */

.assistant {
  border: var(--rule-hair);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--color-paper-2);
}
.assistant__log { margin: var(--space-md) 0; }
.assistant__msg {
  font-size: var(--text-sm);
  border-left: 2px solid var(--color-rule-2);
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: 55ch;
}
.assistant__msg--ai { border-left-color: var(--color-accent); }
.assistant__msg .meta { display: block; margin-bottom: 2px; }

/* Taking commissions, or not: a switch under the card. */
.availability { margin-top: var(--space-md); }
.availability .switchrow { align-items: center; }

/* ---------- the intro film ----------
   Sixteen by nine, the width of the page, on the ink so the poster's own
   black edges do not show as a frame within a frame. */
.intro { margin: var(--space-md) 0 var(--space-lg); }
.intro__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  box-shadow: 0 12px 28px rgb(42 20 16 / 0.18);
}
.intro figcaption { margin-top: var(--space-xs); }

/* ---------- two chairs, in parallel ----------
   One grid, three columns: the step down the left, the commissioner in the
   middle, the co-curator on the right. Rows line up across so a step reads
   as one thing done two ways, and the cells carry the two forms' own
   grounds — the commissioner's red, the maker's yellow — so a glance says
   which side a line belongs to before a word of it is read. */
.chairs {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-sm);
  align-items: stretch;
  margin: var(--space-lg) 0;
}
.chairs__head {
  grid-column: span 1;
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
.chairs__head--c { grid-column: 2; background: var(--color-accent); color: var(--color-on-accent); }
.chairs__head--m { grid-column: 3; background: #FFD34D; color: var(--ink-on-light); }
.chairs__head .label { display: block; margin-bottom: var(--space-2xs); color: inherit; opacity: 0.85; }
.chairs__head h2 { margin: 0; font-size: var(--text-lg); color: inherit; }
.chairs__step {
  grid-column: 1;
  align-self: center;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
}
.chairs__step span {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-neutral);
}
.chairs__cell {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.chairs__cell strong { display: block; margin-bottom: 0.15rem; font-size: var(--text-base); }
.chairs__cell--c { grid-column: 2; background: var(--color-accent); color: var(--color-on-accent); }
.chairs__cell--m { grid-column: 3; background: #FFF1B8; color: var(--ink-on-light); }
.chairs__cell--c strong { color: var(--color-on-accent); }
@media (max-width: 48rem) {
  /* One column: each step's label, then its two sides stacked under it,
     still in their own colours. */
  .chairs { grid-template-columns: minmax(0, 1fr); }
  .chairs__head--c, .chairs__head--m, .chairs__step, .chairs__cell--c, .chairs__cell--m { grid-column: 1; }
  .chairs__head--m { margin-bottom: var(--space-sm); }
  .chairs__step { padding-top: var(--space-md); }
}

/* ---------- two-column split ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}
.split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ---------- notice ---------- */

.notice {
  border: 1px solid var(--color-ok);
  background: var(--color-ok-wash);
  color: var(--color-ok);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  margin: var(--space-md) 0;
  display: none;
}
.notice.is-shown { display: block; }
/* The two the fee rule uses. Drawn on purpose, so they show without the
   is-shown handshake the form notices need. */
.notice--ok, .notice--warn { display: block; }
.notice--ok p, .notice--warn p { margin: 0.35rem 0 0; }
.notice--warn {
  border-color: var(--color-warn);
  background: var(--color-warn-wash);
  color: var(--color-warn);
}

/* ---------- section spacing ---------- */

.band { padding-block: var(--space-xl); border-top: var(--rule-hair); }
.band--deep { padding-block: var(--space-2xl); }
.page-head { padding-block: var(--space-xl) var(--space-lg); }
.page-head p { color: var(--color-muted); }

/* What a dashboard page is, said once, under the nav that got you here.
 *
 * It used to sit above the subnav with the page's name at full size — and
 * the subnav directly beneath it already says that name, in the tab that is
 * lit. So the heading is kept for anything reading the page aloud and taken
 * off the screen when the tab already carries it, and the band moves below
 * the nav, where a sentence explaining where you have landed belongs.
 *
 * The ground is a warm yellow — the band is a place to land, not another
 * red control. Type is the darkest of the Co Curate reds: 10.98:1 on it, so
 * the band can be this pale and the words still land. */
.page-head--banner {
  /* The dismiss button hangs off the left inside it, so the band has to be
     the thing it is positioned against. */
  position: relative;
  background: #F7E9B4;
  border: 1px solid #EBD98F;
  border-radius: 18px;
  padding: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-lg);
}
.page-head--banner h1 { color: #5C1608; margin: 0; }
/* Named by the lit tab already. Kept in the document, off the screen. */
.page-head--banner h1.is-echoed {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-head--banner p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-sm);
  color: #5C1608;
}
.page-head--banner a { color: #4A1206; }

@media (max-width: 40rem) {
  .page-head--banner { padding: var(--space-md) var(--space-lg); border-radius: 14px; }
}

/* ---------- footer (Ft4 dense colophon) ---------- */

.colophon {
  margin-top: var(--space-3xl);
  border-top: 3px double var(--color-ink);
  padding-block: var(--space-xl) var(--space-2xl);
}
.colophon__block {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-neutral);
  max-width: 72ch;
}
.colophon a { color: var(--color-muted); }

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .partnerships { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .browser__url { max-width: none; }
  .masonry { columns: 2; }
  .option-slabs { grid-template-columns: minmax(0, 1fr); }
  .project-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); justify-items: start; }
}

@media (max-width: 40rem) {
  .masonry { columns: 1; }
  /* One size, not a share of what is left.
     minmax(13rem, 80%) gives a row with one card in it the whole 80% and a
     row with thirty the 13rem minimum, because the max can only be met when
     there is free space — so Indie productions, which holds one film, came
     up half again the size of every other row on the page. The same bug the
     desktop rule had, in the rule underneath it. */
  .rail__row { grid-auto-columns: min(80%, 22rem); }
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md);
    border-radius: 20px;
  }
  .masthead__links { flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-md); }
  .step-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- elevation pass (techniques adapted from the Converge system) ---------- */

/* Sticky compact nav — the link row stays reachable with a frosted paper backdrop */
/* Not sticky: a transparent bar has nothing to keep page content from
   scrolling through the links. It sits at the top and leaves with the page. */
.masthead__nav {
  position: relative;
  z-index: 30;
  padding-bottom: var(--space-xs);
}

/* Pulsing status dot on the issue line — one personality moment, not five */
.masthead__issue .meta:last-child::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 6px;
  vertical-align: 1px;
  animation: cc-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes cc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

/* Staggered hero entrance — one orchestrated moment on the home page */
@media (prefers-reduced-motion: no-preference) {
  .browser { animation: cc-rise 700ms var(--ease-out) both; }
  .hero__name { animation: cc-fade-up 600ms var(--ease-out) 120ms both; }
  .hero__dot { animation: cc-pop 480ms var(--ease-out) 640ms both; }
  .hero__slogan { animation: cc-fade-up 600ms var(--ease-out) 260ms both; }
  .hero__actions { animation: cc-fade-up 600ms var(--ease-out) 380ms both; }
  .hero__lede { animation: cc-fade-up 600ms var(--ease-out) 470ms both; }
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes cc-pop {
  0% { opacity: 0; transform: scale(0.2); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal — sections fade up as they enter; JS adds .reveal, observer adds .is-seen */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.reveal.is-seen { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Ghost numerals on staffing models — big translucent counters, editorial-style */
.model-grid { counter-reset: model; }
.model-card { position: relative; overflow: clip; }
.model-card::after {
  counter-increment: model;
  content: counter(model, decimal-leading-zero);
  position: absolute;
  right: 0.4rem;
  bottom: -1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.5rem;
  line-height: 1;
  color: oklch(60% 0.06 var(--tile-h, 80) / 0.14);
  pointer-events: none;
}

/* Hover choreography — cards lift, rows nudge */
.card, .model-card, .match-card { transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.card:hover, .model-card:hover, .match-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px oklch(45% 0.05 60 / 0.16);
}
.project-row { transition: transform var(--dur-fast) var(--ease-out); }
.project-row:hover { transform: translateX(4px); }

/* Stat band — key numbers in display type */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
  overflow: clip;
}
.stat-cell { background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); }
.stat-cell__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-cell__l { display: block; font-size: var(--text-xs); color: var(--color-neutral); margin-top: 2px; }

/* Ledger rows */
#ledger-table .neg { color: var(--color-muted); }
#ledger-table .pos { color: var(--color-ok); font-weight: 500; }

@media (max-width: 40rem) {
  .stat-band { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---- red block: the one place the ground inverts ---- */
 *
 * Everything on this site is dark type on cream except the inside of the hero
 * window, which is a red field. These rules re-point what sits in it — the
 * chrome, the address pill, and the one line of prose — at light values.
 * They are deliberately the last rules in the file so the exception is
 * visible rather than buried among the components it overrides.
 */

.browser { border-color: var(--color-accent-deep); }

.browser__bar {
  background: var(--accent-hover);
  border-bottom-color: #7E1D0C;
}
.browser__dots i { background: #C9553A; }
.browser__dots i:first-child { background: #FFD34D; }

.browser__url {
  background: #8E220D;
  border-color: #D8452A;
  color: #FFD968;
}

/* Cream on the red block: 5.35:1 */
.hero__lede { color: #FBE9D4; }

/* ---------- development feed: kind glyph + search ---------- */
.tile__icon {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}
.tile__icon svg { width: 15px; height: 15px; }

.dev-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  max-width: 34rem;
  padding: 0 var(--space-sm) 0 var(--space-md);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dev-search:focus-within {
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.dev-search__glass { flex: none; width: 17px; height: 17px; color: var(--color-neutral); }
.dev-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 44px;
}
.dev-search input:focus { outline: none; }
.dev-search input::placeholder { color: var(--color-placeholder); }
.dev-search input::-webkit-search-cancel-button { display: none; }
.dev-search__clear {
  flex: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-muted);
  background: transparent;
  border: 0;
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.dev-search__clear:hover { color: var(--color-ink); background: var(--color-paper-3); }

/* ---------- signed-in home: rows that reorder around what is new ---------- */
.rail__new {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.15em 0.6em;
}
.tile__new {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 3;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.15em 0.6em;
}
.card--new h3 { color: var(--color-accent-deep); }

/* ---------- Studio: portrait, and who you are ---------- */
.cover {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  overflow: clip;
  margin-bottom: var(--space-lg);
}

/* The profile card on very pale yellow. It is the one block on that page
   that is about the person rather than a setting, so it gets its own ground.
   Ink on #FBECB4 is 14.73:1. */
[data-page="profile"] .cover {
  background: #FBECB4;
  border-color: #EBD68A;
}

.cover__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.cover__portrait {
  position: relative;
  flex: none;
  /* Both sides stated, not width plus aspect-ratio. A height derived from a
     ratio is not a definite height, and anything inside that asks for a
     percentage of it — or simply runs long, like initials at a large text
     setting — is free to stretch the box into an ellipse instead. Two
     definite sides off one custom property cannot. */
  --portrait-size: clamp(5rem, 14vw, 7rem);
  width: var(--portrait-size);
  height: var(--portrait-size);
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-3);
  display: grid;
  place-items: center;
  /* A light grey silhouette sits behind the circle, so a photo cut out on a
     pale background still has an edge. Drawn with a shadow rather than a
     wrapper: it must not take part in the flex row's measurements, which is
     what dragged this card off a phone screen once already. */
  box-shadow:
    0 0 0 5px var(--color-portrait-halo),
    0 2px 6px rgb(63 44 27 / 0.10);
}
/* The circle is clipped on the image itself, not the wrapper: the add-photo
   button hangs off the edge and a clipping wrapper would eat it.
 *
 * Out of flow, so the photo fills the circle and can never change its shape.
 * In flow it did both: it took a grid row of its own and pushed the initials
 * into a second one, splitting the square's height between them, and its own
 * `height: 100%` had no definite track to resolve against, so a tall file
 * stretched the box instead. Absolute against the padding box has neither
 * problem, covers the initials without help, and leaves them centred for the
 * people who have not uploaded anything. */
.cover__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit in the top third of a portrait, and most of what people upload
     is taller than it is wide, so a centred crop cuts the head off and leaves
     a circle of torso. This is only the starting guess: the owner drags their
     own face into the circle and the two properties carry where they put it,
     everywhere the photo is shown. */
  object-position: var(--portrait-x, 50%) var(--portrait-y, 28%);
  border-radius: 50%;
}
/* The initials are the stand-in for a photo, not something to read through
   one. The photo covers them; this keeps them off the screen reader's path
   as well, for the browsers that get here before the script does. */
.cover__portrait:has(img:not([hidden])) .cover__initials { display: none; }
.cover__initials {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-neutral);
}
/* Dragging is the whole control, so the circle has to look draggable before
   anyone touches it, and has to be reachable without a mouse. */
.cover__portrait--movable { cursor: grab; touch-action: none; }
.cover__portrait--movable:active { cursor: grabbing; }
.cover__portrait--movable img { user-select: none; -webkit-user-drag: none; }
.cover__portrait--movable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
}
/* While a photo is being moved its halo deepens, so the circle reads as the
   thing under the hand rather than one more picture on the page. Grey, not
   red: on this site red means act now, and nothing else is allowed to use
   it. Red stays with the focus ring, where it is the only thing on screen
   saying where the keyboard is. */
.cover__portrait.is-moving {
  cursor: grabbing;
  box-shadow:
    0 0 0 5px var(--color-portrait-halo-strong),
    0 2px 6px rgb(63 44 27 / 0.10);
}

.cover__portrait-edit {
  position: absolute;
  right: -6px;
  bottom: -2px;
  z-index: 2;
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 1;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 2px solid var(--color-paper);
  border-radius: 50%;
  cursor: pointer;
}
.cover__who { flex: 1 1 14rem; min-width: 0; }
.cover__who h2 { margin: 0; }
.cover__headline { margin: 2px 0 2px; font-size: var(--text-sm); color: var(--color-ink); }
.cover__acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.cover__note {
  margin: 0;
  padding: var(--space-xs) var(--space-lg) var(--space-sm);
  border-top: var(--rule-hair);
  font-size: var(--text-xs);
}

/* ---------- one colour code across the desk ----------
 * Red is the only colour that means act now, amber means it is coming, green
 * means this is going well. Nothing else on the page is allowed to use them,
 * so a flash of red always carries the same instruction. */
.key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}
.key__item { display: inline-flex; align-items: center; gap: 0.4em; }
.key__item::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-neutral);
}
.key__item--alert::before { background: var(--color-accent); }
.key__item--warn::before  { background: var(--color-warn); }
.key__item--ok::before    { background: var(--color-ok); }

/* ---------- stat band ----------
 * Lived in the Studio page's own <style>, which meant anywhere else that drew
 * one — the profile card preview — got unstyled text. Shared rules belong in
 * the shared file. */
.studio-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: clip;
  margin-bottom: var(--space-xl);
}
.studio-cell { background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); }
.studio-cell__n {
  display: block;
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.studio-cell__l { display: block; font-size: var(--text-xs); color: var(--color-neutral); margin-top: 2px; }
/* Block, not inline. Inside the progress button these are spans — an anchor
   is not allowed to hold much else — and height does nothing to an inline
   box, so the bar was drawn with no height at all: the percentage read fine
   and the bar it described was invisible. */
.progress {
  display: block;
  height: 6px; max-width: 14rem; margin-top: 0.5rem;
  background: var(--color-paper-3); border-radius: 999px; overflow: clip;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
}

.studio-cell { border-left: 3px solid transparent; }
.studio-cell--alert { background: var(--color-accent-wash); border-left-color: var(--color-accent); }
.studio-cell--alert .studio-cell__n { color: var(--color-accent-deep); }
.studio-cell--alert .studio-cell__l { color: var(--color-accent-deep); }
.studio-cell--warn { background: var(--color-warn-wash); border-left-color: var(--color-warn); }
.studio-cell--warn .studio-cell__n,
.studio-cell--warn .studio-cell__l { color: var(--color-warn); }
.studio-cell--ok { background: var(--color-ok-wash); border-left-color: var(--color-ok); }
.studio-cell--ok .studio-cell__n,
.studio-cell--ok .studio-cell__l { color: var(--color-ok); }

.project-row { border-left: 3px solid transparent; padding-left: var(--space-md); }
.project-row--alert { border-left-color: var(--color-accent); }
.project-row--warn  { border-left-color: var(--color-warn); }
.project-row--ok    { border-left-color: var(--color-ok); }
.project-row--alert .status-mark { color: var(--color-accent-deep); border-color: var(--color-accent); }
.project-row--warn  .status-mark { color: var(--color-warn); border-color: var(--color-warn); }
.project-row--ok    .status-mark { color: var(--color-ok); border-color: var(--color-ok); }
.project-row--alert .progress__bar { background: var(--color-accent); }
.project-row--warn  .progress__bar { background: var(--color-warn); }
.project-row--ok    .progress__bar { background: var(--color-ok); }

/* ---------- the live project timeline ----------
 * The phases sit on red with light type: a block of them reads as one run of
 * work rather than seven loose cards. Measured on #B22F16 — cream titles at
 * 5.82:1, dimmed cream body at 4.87:1, both clear of AA. The state code moves
 * to the left edge and the chips, since the ground can no longer carry it. */
.timeline .tl-step {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-left: 5px solid var(--color-orchid);
  /* Rounded properly: at this size a hairline radius reads as a panel, and
     these are buttons. The left edge follows the curve on its own. */
  border-radius: 18px;
  padding: var(--space-md) var(--space-xl);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.timeline .tl-step:hover { transform: translateY(-1px); background: var(--accent-hover); border-color: var(--accent-hover); }
.timeline .tl-step:hover { border-left-color: var(--color-orchid); }
.timeline .tl-step:active { transform: translateY(0); }
.timeline .tl-step h3 { color: var(--color-on-accent); }

/* Closed work steps back without leaving the run. */
.timeline .tl-step.is-done {
  background: var(--accent-hover);
  border-color: var(--color-accent-deep);
  border-left-color: var(--color-ok-wash);
}
/* Still to come: no bright edge, so the eye lands on the live one. */
.timeline .tl-step:not(.is-now):not(.is-done):not(.is-flagged) { border-left-color: var(--color-accent-press); }
.timeline .tl-step.is-flagged { border-left-color: var(--color-orchid); background: var(--accent-active); border-color: var(--accent-active); }

/* A phase the two of them settled before Co Curate was involved. It is done,
 * so it does not sit in the live run competing for attention — but it is not
 * hidden either, because the record of it is still the record. */
.timeline .tl-step.is-offplatform {
  background: var(--color-paper-3);
  border-color: var(--color-rule-2);
  border-left-color: var(--color-neutral);
  color: var(--color-muted);
}
.timeline .tl-step.is-offplatform h3 { color: var(--color-muted); }
.timeline .tl-step.is-offplatform p,
.timeline .tl-step.is-offplatform .tl-step__go { color: var(--color-neutral); }
.timeline .tl-step.is-offplatform:hover {
  background: var(--color-paper-2);
  border-color: var(--color-rule-2);
}

.tl-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.tl-step__head h3 { margin: 0; }
.tl-step p { font-size: var(--text-sm); color: var(--on-accent-2); margin: var(--space-2xs) 0 var(--space-xs); }
/* Red means act, so a blocked step does not get to wear a brighter edge. */
.tl-step__go { font-size: var(--text-sm); color: var(--on-accent-2); }
.tl-step__go.is-live { color: var(--color-orchid); font-weight: 600; }

/* Chips have to survive on the red, so the two red ones turn yellow. */
.chip-flag, .chip-done, .chip-wait, .chip-you {
  font-size: var(--text-xs); font-weight: 600; border-radius: 999px; padding: 0.15em 0.65em;
}
.chip-flag { color: var(--color-accent-press); background: var(--color-orchid); }
.chip-done { color: var(--color-ok);   background: var(--color-ok-wash); }
.chip-wait { color: var(--color-warn); background: var(--color-warn-wash); }
.chip-you  { color: var(--color-accent-press); background: var(--color-orchid); }

/* Phone.
 *
 * These are the biggest buttons on the site and they were being drawn with
 * desktop padding inside a rail that already gives up 2rem to the dot and its
 * gutter — on a 375px screen the phase titles were wrapping to three lines
 * with a thumbnail of usable text left. The rail tightens, the padding comes
 * in, the chips drop under the title instead of fighting it for the line, and
 * every action button underneath goes full width so it can actually be hit. */
@media (max-width: 40rem) {
  .timeline { margin: var(--space-lg) 0; }
  .timeline li { padding-left: var(--space-md); padding-bottom: var(--space-md); margin-left: 3px; }
  .timeline .tl-step {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-radius: 14px;
    border-left-width: 4px;
  }
  .timeline .tl-step h3 { font-size: var(--text-md); line-height: 1.25; }
  .tl-step__head { display: block; }
  .tl-step__marks { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
  .tl-step p { margin-bottom: var(--space-2xs); }
  /* A hairline arrow is not a tap target. Give the affordance a line of its
     own so the whole button reads as pressable at arm's length. */
  .tl-step__go { display: block; margin-top: var(--space-xs); font-weight: 600; }
  .tl-acts { flex-direction: column; align-items: stretch; }
  .tl-acts .btn { width: 100%; text-align: center; }
  .call-card { padding: var(--space-md); }
  .call-card .btn { width: 100%; text-align: center; }
  .sheet { padding: 0; }
  .sheet__panel {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }
}

/* A project that is listed but not yet walked into. It stays legible — it is
 * work pointed at you — but it does not compete with the live rows above it. */
.project-row--waiting { border-left: 3px solid var(--color-warn); background: var(--color-paper-2); }
.project-row--waiting h3 { color: var(--color-ink); }

/* The i beside a card title. Small, red, circular, and to the right of the
 * words it belongs to — it opens the crew behind a production. */
.card__heading { display: flex; align-items: baseline; gap: 0.45em; }
.card__heading h3 { margin: 0; }
.card__info {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  align-self: center;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.card__info:hover { background: var(--accent-hover); transform: scale(1.12); }
.card__info:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }

/* A pulse number you can walk through. */
.stat-cell--go {
  position: relative;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.stat-cell--go:hover { background: var(--color-paper-3); }
.stat-cell__go {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-accent-deep);
}

/* Co Curate speaking inside someone else's project room.
 *
 * Pinned to the foot of the page rather than dropped into the timeline: it is
 * not a phase, it is the platform interrupting, and it has to still be there
 * after you have scrolled away from whatever it was about. An alert or an
 * action item goes red on cream — 7.77:1 — because those two mean the project
 * is waiting on somebody. A note or a notice stays quiet. */
.adminbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-3);
  border-top: 2px solid var(--color-rule-2);
  box-shadow: 0 -6px 24px rgb(42 20 16 / 0.12);
}
.adminbar--loud {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-top-color: var(--color-accent-press);
}
.adminbar__tag {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.adminbar__list { flex: 1 1 auto; min-width: 0; }
.adminbar__list p { margin: 0 0 0.25rem; }
.adminbar__list p:last-child { margin-bottom: 0; }
.adminbar__by { opacity: 0.75; }
.adminbar__x {
  flex: none;
  border: 0; background: none; cursor: pointer;
  color: inherit; font-size: var(--text-md); line-height: 1;
  padding: 0 0.25rem;
}
@media (max-width: 40rem) {
  .adminbar { flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); }
  .adminbar__x { position: absolute; top: var(--space-2xs); right: var(--space-sm); }
}

/* The explicit Save under a page that already autosaves. */
.savebar {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.tl-rail { list-style: none; margin-top: var(--space-lg); }
.tl-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.call-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  border: 1px solid var(--color-rule-2); border-left: 3px solid var(--color-warn);
  border-radius: var(--radius-sm); background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-sm);
}
.call-card p { margin: 0; font-size: var(--text-sm); }

/* ---------- the sheet a step opens into ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgb(42 20 16 / 0.45);
  padding: var(--space-md);
  overflow-y: auto;
}
@media (min-width: 40rem) { .sheet { align-items: center; } }
.sheet__panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow: 0 18px 50px rgb(42 20 16 / 0.25);
}
.sheet__close {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 34px; height: 34px; font-size: 15px; line-height: 1;
  color: var(--color-muted); background: transparent;
  border: 1px solid var(--color-rule); border-radius: 50%; cursor: pointer;
}
.sheet__close:hover { color: var(--color-ink); border-color: var(--color-ink); }
.sheet__title { margin: 0 0 var(--space-md); }
.sheet__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
  margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair);
}
.sheet__foot .meta { flex: 1 1 12rem; margin: 0; }
/* The agree button stays reachable under a long document. */
.sheet__foot { position: sticky; bottom: 0; background: inherit; z-index: 1; }
/* Sticky means it rides over the end of the document while there is more to
 * scroll; the panel's own padding keeps the last inputs clear of it. */
.sheet__panel { padding-bottom: calc(var(--space-lg) + 3.5rem); }
.sheet__foot .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.jump-messages { display: none; margin: 0 0 0.75rem; }
@media (max-width: 60rem) { .jump-messages { display: block; } }

.doc__lede { font-size: var(--text-sm); color: var(--color-neutral); margin: 0 0 var(--space-md); }
/* The document is selectable prose on purpose — selecting it is how you flag it. */
.doc__text {
  white-space: pre-wrap;
  font-size: var(--text-sm);
  line-height: 1.65;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  user-select: text;
}
.doc__text::selection { background: var(--color-warn-wash); }

.flag {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-wash);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
.flag blockquote {
  margin: var(--space-2xs) 0;
  font-style: italic;
  color: var(--color-accent-deep);
}
.flag p { margin: var(--space-2xs) 0 var(--space-xs); font-size: var(--text-sm); }

/* An action item is written into the document it is about, not filed
 * elsewhere, so the panel opens inline underneath what it responds to. */
.ai-panel {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-accent);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-wash);
}
.ai-panel .meta { margin: var(--space-2xs) 0; }
.ai-panel__acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.flagger__note {
  width: 100%; font: inherit; font-size: var(--text-sm);
  color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm); resize: vertical;
  margin-top: var(--space-2xs);
}
.flagger__note::placeholder { color: var(--color-placeholder); }

.answers {
  display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
  margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair);
}
.answers .label { flex: 1 1 100%; }
.sched__input {
  font: inherit; font-size: var(--text-sm); color: var(--color-ink);
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); min-height: 44px;
}

/* ---------- scheduled-call alert, above every dashboard page ---------- */
.meetings {
  border: 1px solid var(--color-warn);
  border-left: 3px solid var(--color-warn);
  background: var(--color-warn-wash);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.meetings .label { color: var(--color-warn); }
/* A posting about to happen is a different kind of warning from a call you
   have to turn up to: it is something happening to you unless you act. */
.meetings--posting { border-left-color: var(--color-accent); background: var(--color-accent-wash); }
.meetings--posting .label { color: var(--color-accent-deep); }
.meetings__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.meetings__row > div { flex: 1 1 14rem; min-width: 0; }
.meetings__what { display: block; font-weight: 600; color: var(--color-ink); }
.meetings__what:hover { color: var(--color-accent-deep); }
.meetings .meta { display: block; }

/* ---------- cancellation checklist ---------- */
.checks { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.checks__item {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: var(--rule-hair);
}
.checks__item > div { flex: 1 1 12rem; min-width: 0; }
.checks__item h3 { margin: 0; font-size: var(--text-base); }
.checks__item p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.checks__mark {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 2px;
  font-size: 13px; font-weight: 700;
  color: var(--color-on-accent);
  background: var(--color-rule-2);
  border-radius: 50%;
}
.checks__item.is-done .checks__mark { background: var(--color-ok); }
.checks__item.is-done h3 { color: var(--color-ok); }
.checks__item.is-optional h3 { color: var(--color-neutral); font-weight: 500; }

/* ---------- files and links attached to a phase ---------- */
.attach { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair); }
.attach__head { display: flex; align-items: baseline; gap: var(--space-sm); }
.attach__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.attach__list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs);
  padding: var(--space-xs) 0; border-bottom: var(--rule-hair);
  font-size: var(--text-sm);
}
.attach__list li:last-child { border-bottom: 0; }
.attach__list a { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.attach__kind {
  flex: none;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-on-accent); background: var(--color-neutral);
  border-radius: 999px; padding: 0.1em 0.55em;
}
.attach__kind--link { background: var(--color-flare); }
.attach__rm {
  flex: none; width: 24px; height: 24px; line-height: 1; font-size: 12px;
  color: var(--color-muted); background: transparent;
  border: 1px solid var(--color-rule); border-radius: 50%; cursor: pointer;
}
.attach__rm:hover { color: var(--color-accent-deep); border-color: var(--color-accent); }
.attach__add {
  display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
  margin-top: var(--space-md);
}
.attach__url {
  flex: 1 1 11rem; min-width: 0;
  font: inherit; font-size: var(--text-sm); color: var(--color-ink);
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); min-height: 44px;
}
.attach__url::placeholder { color: var(--color-placeholder); }

.form-row2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-md);
}

/* ---------- files, one shelf per stage ---------- */
.shelf {
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.shelf.is-empty { border-left-color: var(--color-rule-2); background: transparent; }
.shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.shelf__head h3 { margin: 0; }
.shelf__prompt {
  margin: var(--space-2xs) 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.shelf__act { margin-top: var(--space-sm); }
.shelf .project-row { padding-left: 0; border-left: 0; }

/* ---------- building the crew (creative-director projects) ---------- */
.crew { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.crew__item {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-neutral);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.crew__item > div { flex: 1 1 10rem; min-width: 0; }
.crew__item h3 { margin: 0; font-size: var(--text-base); }
.crew__item p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
/* Who covers a task is the thing to read fastest, so it is the edge colour. */
.crew__item--self { border-left-color: var(--color-ok); }
.crew__item--outsource { border-left-color: var(--color-flare); }
.crew__item--invite { border-left-color: var(--color-accent); }

.crew__add {
  display: flex; flex-direction: column; gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.crew__add input {
  font: inherit; font-size: var(--text-sm); color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); min-height: 44px;
}
.crew__add input::placeholder { color: var(--color-placeholder); }
.crew__add .chip-group { margin: 0; }
.crew__add .btn { align-self: flex-start; }
.crew__add .meta { margin: 0; }
/* The crew cards are light grounds inside the red sheet.
 *
 * The sheet paints every label, heading and paragraph in it cream, because
 * almost everything in it sits on red. These two do not: they are cream cards,
 * and cream type on a cream card is the panel reading as blank. This is what
 * --ink-on-light is for — type on the handful of grounds that do not follow
 * the sheet around them.
 */
.sheet__panel--form .crew__item,
.sheet__panel--form .crew__add { color: var(--ink-on-light); }
.sheet__panel--form .crew__item h3,
.sheet__panel--form .crew__add .label,
.sheet__panel--form .crew__add label { color: var(--ink-on-light); }
/* Doubled class on purpose. Further down the sheet paints every <p>, .meta
 * and .hint in it cream (--on-accent-2), at the same specificity as these and
 * later in the file, so it was winning: the seat's name read cream on the
 * cream card at 1.09:1. The repeat buys one class of weight and settles it
 * wherever either rule ends up in the file. --color-muted here is 10.82:1. */
.sheet__panel--form.sheet__panel--form .crew__item p,
.sheet__panel--form.sheet__panel--form .crew__add .meta,
.sheet__panel--form.sheet__panel--form .crew__add .hint { color: var(--color-muted); }
.sheet__panel--form .crew__item .btn,
.sheet__panel--form .crew__add .btn {
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
  background: transparent;
}
.sheet__panel--form .crew__add .btn--primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.sheet__panel--form .crew__add .chip {
  color: var(--ink-on-light);
  border-color: var(--color-rule-2);
  background: var(--color-paper);
}
.sheet__panel--form .crew__add .chip[aria-pressed="true"] {
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.sheet__panel--form .crew__add input {
  color: var(--ink-on-light);
  background: #FFFFFF;
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
}

.crew__finish {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: var(--rule-hair);
}
.crew__finish .meta { margin: var(--space-xs) 0 0; }

/* ---------- alerts: a thin row, not a gallery ----------
 * Four things needing you should not look like four things to browse. The
 * stripe carries the colour a tile used to, and the row stays one line deep. */
.rail__row--thin { grid-auto-columns: 11rem; }
.thin {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-left: 4px solid oklch(64% 0.13 var(--tile-h, 80));
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.thin:hover { transform: translateY(-1px); border-color: var(--color-ink); }
.thin__tag {
  display: block;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-neutral);
}
.thin__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2; margin-top: 1px;
}
/* There is no room for it at this size, and of the four lines it is the one
   that repeats what the tag already said. It is taken off the card rather
   than out of it, so it still reaches a screen reader. */
.thin__note {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.thin .meta { display: block; margin-top: 1px; font-size: var(--text-xs); }
.thin--new { border-color: var(--color-accent); }

/* An alert that is actually asking something of you.
 *
 * Every card in this rail used to be the same cream as everything else, with
 * a red outline when it was new — and an outline is the quietest signal on
 * the page. The ones that want something get their own ground instead: the
 * palest red, the same the dashboard band sits on, so it reads as part of
 * the scheme rather than an exception to it. Title 14:1 on it, tag 6.8:1.
 *
 * A card that only reports — a project in production, nothing to do — keeps
 * the cream. Two of these side by side is the whole point.
 */
.thin--urgent {
  background: var(--color-accent-wash);
  border-color: #EFCBB6;
  border-left: 4px solid var(--color-accent);
}
.thin--urgent .thin__tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-deep);
}
.thin--urgent .pulsedot { vertical-align: baseline; margin: 0; }

/* One dot, wherever something is waiting on you.
 *
 * It used to be a ● typed into a label, so it could only ever be the colour
 * and size of the words around it. As an element it can carry its own red
 * and a slow pulse — the one thing on these pages that moves, so the eye
 * finds it without anything having to get louder. The same mark now appears
 * on an alert card, on a live project in the Studio, on a call nobody has
 * answered, and on the phase of a timeline that is yours to move: four
 * places that were each saying it differently or not at all.
 *
 * Colour comes off two variables so the one on the red timeline can be white
 * without a second set of rules — a red dot on a red row is not a dot.
 */
.pulsedot {
  flex: none;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dot, var(--color-accent));
  box-shadow: 0 0 0 0 var(--dot-halo, rgb(178 47 22 / 0.55));
  animation: pulsedot 2.4s var(--ease-out) infinite;
}
/* Beside a title rather than in front of a label. */
.pulsedot--after { margin-left: 0.45em; vertical-align: 0.15em; }
.pulsedot--onred { --dot: #FFFFFF; --dot-halo: rgb(255 255 255 / 0.55); }

@keyframes pulsedot {
  0%   { box-shadow: 0 0 0 0 var(--dot-halo, rgb(178 47 22 / 0.55)); }
  70%  { box-shadow: 0 0 0 0.5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Movement is a signal, not decoration, so it stops for anyone who asked. */
@media (prefers-reduced-motion: reduce) {
  .pulsedot { animation: none; }
}
.thin__new {
  position: absolute; top: var(--space-xs); right: var(--space-xs);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-on-accent); background: var(--color-accent);
  border-radius: 999px; padding: 0.1em 0.5em;
}

/* The option slabs are buttons on the start wizard and links in the Add a
   call sheet; the anchor form needs the type styles the button inherited. */
a.option-slab { display: block; text-decoration: none; color: var(--color-ink); }
a.option-slab h3 { margin: 0; }
a.option-slab p { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 34rem) { .sheet .option-slabs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- money gate inside a phase ---------- */
.paygate {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-warn);
  border-left: 3px solid var(--color-warn);
  border-radius: var(--radius-sm);
  background: var(--color-warn-wash);
}
.paygate .label { color: var(--color-warn); }
.paygate p { margin: 0; font-size: var(--text-sm); }
/* The gate sits on cream inside the red sheet, so its words are ink, not the
 * sheet's pale: they were invisible. */
.sheet .paygate, .sheet .paygate p, .sheet .paygate .meta,
.sheet__panel--form .paygate p, .sheet__panel--form .paygate .meta, .cform .paygate p { color: #2B1A14; }
.sheet .paygate p:not([class]), .sheet__panel--form .paygate p:not([class]), .cform .paygate p:not([class]) { color: #2B1A14; }
.sheet .paygate .label, .sheet__panel--form .paygate .label { color: var(--color-warn); }
.sheet .paygate .meta, .sheet__panel--form .paygate .meta { color: #6B5A50; }

/* ---------- the fanned deck ----------
 * Five cards, dealt. The tilt and the overlap are the whole point: a fan says
 * "these are one hand, in this order" in a way five stacked panels cannot.
 * Every ground is measured against cream (5.29 to 7.77) or ink on the yellow
 * (13.5), so the tilt never costs legibility. */
/* Stacked, the deck is a grid rather than a wrapped flex row, for one
   reason: `grid-auto-rows: 1fr` makes every row as tall as the tallest, so a
   card listing one role is the same length as a card listing four. Wrapped
   flex could only ever match cards within a row, which is how a two-column
   layout ends up with one short card and one long one beside it. */
.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  padding-block: var(--space-lg);
}
.deck__card {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  border-radius: 18px;
  color: var(--color-on-accent);
  box-shadow: 0 14px 30px rgb(42 20 16 / 0.22);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
/* The roles take the slack so the budget line stays pinned to the bottom
   edge of every card, level across the row. */
.deck__card ul { flex: 1 1 auto; }
.deck__card h3 {
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  font-size: var(--text-lg);
  color: inherit;
  border-bottom: 1px solid currentColor;
}
.deck__card ul { list-style: none; margin: 0; padding: 0; }
.deck__card li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.4;
}
/* The diamond bullet from the reference, drawn rather than typed so it
   inherits the card's colour and never falls out of the font. */
.deck__card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}
/* One light yellow for the whole deck.
 *
 * How it works had five colours doing no work: the cards are five steps in
 * one explanation, not five different kinds of thing, and five grounds made
 * that read as a taxonomy. They all take the pale yellow the crew-budget card
 * already had. Ink on #FFE08A is 13.5:1.
 *
 * The signed-out home deck keeps its own override further down — those cards
 * are examples rather than steps, and they sit on a different page. */
.deck__card--1,
.deck__card--2,
.deck__card--3,
.deck__card--4,
.deck__card--5,
.deck__card--6 {
  background: var(--color-orchid);
  color: var(--ink-on-light);
  border: 1px solid #E4C173;
}

/* The fan only exists where there is room to overlap. Stacked on a phone, the
   cards are just cards — a tilted column is harder to read, not livelier. */
@media (min-width: 62rem) {
  /* The fan wants one row it controls, so it goes back to flex — and stretch
     keeps all six the same length there too. */
  .deck { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; }
  .deck__card { flex: 0 1 13.5rem; }
  /* Overlap only at the corners the tilt throws outward. Deeper than this and
     the cards start eating each other's text, which the reference gets away
     with as a picture and a real page does not. Each card sits above the one
     to its left, so the overlap is always empty margin, never words. */
  .deck__card { margin-inline-start: -0.6rem; }
  .deck__card--1 { transform: rotate(-6deg) translateY(0.9rem);   z-index: 1; }
  .deck__card--2 { transform: rotate(-2.5deg) translateY(0.3rem); z-index: 2; }
  .deck__card--3 { transform: rotate(1deg) translateY(-0.6rem);   z-index: 3; }
  .deck__card--4 { transform: rotate(3.5deg) translateY(0.2rem);  z-index: 4; }
  .deck__card--5 { transform: rotate(6.5deg) translateY(1rem);    z-index: 5; }
  .deck__card:hover,
  .deck__card:focus-within {
    transform: rotate(0deg) translateY(-0.6rem);
    box-shadow: 0 22px 44px rgb(42 20 16 / 0.3);
    z-index: 6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck__card { transition: none; }
}

/* ---------- full-size image viewer ----------
 * A flyer or a cover has to be looked at to be judged, so every card with
 * imagery opens. Sized to the viewport, never scaled past its own pixels —
 * enlarging should not make a picture worse. */
.card--opens {
  font: inherit; text-align: left; color: inherit;
  background: none; border: 0; padding: 0; cursor: zoom-in;
}

.lb {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
  background: rgb(20 9 7 / 0.94);
  padding: var(--space-lg);
}
.lb__stage { position: relative; min-height: 0; }
/* One row of slides that scrolls and snaps: a swipe on a phone, arrows and keys elsewhere.
 * Pinching is left to the browser, so a picture can be enlarged past the fit. */
.lb__track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom; scrollbar-width: none; outline: none;
}
.lb__track::-webkit-scrollbar { display: none; }
.lb__slide {
  position: relative; flex: 0 0 100%; height: 100%; min-width: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}
.lb__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.lb__slide.is-loading .lb__img { opacity: 0; }
.lb__slide.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgb(255 255 255 / 0.25); border-top-color: #fff; border-radius: 50%;
  animation: lb-spin 0.8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb__slide.is-loading::after { animation: none; } }
.lb__broken { color: #FBF6D8; text-align: center; display: grid; gap: 0.5rem; }
.lb__broken a { color: #FBF6D8; text-decoration: underline; }
.lb__thumbs {
  display: flex; gap: 0.4rem; overflow-x: auto; padding-top: var(--space-sm);
  scrollbar-width: thin; justify-content: safe center;
}
.lb__thumb {
  flex: none; width: 56px; height: 56px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: rgb(255 255 255 / 0.1); opacity: 0.6;
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb-film { display: grid; place-items: center; width: 100%; height: 100%; color: #FBF6D8; font-size: 18px; }
.lb__thumb.is-here { opacity: 1; border-color: #FBF6D8; }
.lb__close {
  position: absolute; top: var(--space-md); right: var(--space-md); z-index: 2;
  width: 40px; height: 40px; font-size: 16px; line-height: 1;
  color: var(--color-paper); background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; cursor: pointer;
}
.lb__close:hover { background: rgb(255 255 255 / 0.22); }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; font-size: 28px; line-height: 1;
  color: var(--color-paper); background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; cursor: pointer;
}
.lb__nav:hover { background: rgb(255 255 255 / 0.22); }
.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }
.lb__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  color: var(--color-paper);
}
.lb__title { font-weight: 600; }
.lb__count { font-family: var(--font-body); font-size: var(--text-xs); opacity: 0.75; }
@media (max-width: 40rem) {
  .lb { padding: var(--space-sm); }
  .lb__nav { width: 40px; height: 40px; font-size: 22px; }
}

/* Filters belong to the row they act on, so they sit inside the rail between
   its heading and its cards rather than floating above the section. */
.rail__filters {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin: 0 0 var(--space-md);
}
.rail__filters .chip { min-height: 36px; padding: var(--space-2xs) var(--space-md); }

/* ---------- liking a featured production ----------
 * Sits on the image, opposite the tag. The card underneath opens a lightbox,
 * so this has to be an obvious separate target: its own ground, its own hit
 * area, and a stopped click. */
.like {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  padding: 0.25em 0.7em;
  min-height: 30px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.like:hover { transform: scale(1.05); }
.like:active { transform: scale(0.97); }
.like__heart { font-size: 13px; line-height: 1; }
.like.is-on {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-lg);
  z-index: 90;
  transform: translate(-50%, 1.5rem);
  max-width: min(34rem, calc(100vw - 2rem));
  font-size: var(--text-sm);
  color: var(--color-paper);
  background: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  box-shadow: 0 12px 30px rgb(42 20 16 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .like, .toast { transition: none; }
}

/* A card holding a film says so, and the viewer sizes video like it sizes
   stills — contained, never blown past its own resolution. */
.tile__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  font-size: 17px; line-height: 1; padding-left: 3px;
  /* The disc keeps its cream in both themes, so the arrow on it keeps its
     ink. It followed the theme and went cream on cream. */
  color: var(--ink-on-light);
  background: rgb(251 246 216 / 0.92);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(42 20 16 / 0.3);
}
video.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; }

/* Delivered, not yet posted to featured. Visible because it is your work and
   it is finished — dimmed because it is not out yet, and saying which. */
.card.is-pending { position: relative; }
.card.is-pending .tile,
.card.is-pending h3,
.card.is-pending p,
.card.is-pending .meta { opacity: 0.5; filter: saturate(0.55); }
.card__held {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-warn);
  background: var(--color-warn-wash);
  border-radius: 999px;
  padding: 0.15em 0.65em;
}

/* The source's own mark, on a pale disc so a dark logo and a light one both
   read on any tile. Bottom-left, clear of the kind glyph and the tag. */
.tile__logo {
  position: absolute;
  left: var(--space-xs);
  bottom: var(--space-xs);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 5px;
  background: var(--color-paper);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(42 20 16 / 0.22);
}
.tile__logo img { width: 100%; height: 100%; object-fit: contain; }

/* More than one image behind this card. The count badge said it too loudly;
   dots are the language people already read, and cost almost no ink. */
.tile__dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-xs);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 5px 8px;
  background: rgb(20 9 7 / 0.4);
  border-radius: 999px;
}
.tile__dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgb(251 246 216 / 0.55);
}
.tile__dots i.is-first { background: var(--color-paper); }

/* Read by a screen reader, invisible to everyone else. The dots carry the
   "there are more" signal visually; this carries the count in words. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Arrows on a sideways row. Shown only when there is somewhere to go, so they
   double as the signal that the row continues past the edge. */
.rail--scrollable { position: relative; }
.rail__arrow {
  position: absolute;
  top: 55%;
  z-index: 4;
  width: 40px; height: 40px;
  font-size: 22px; line-height: 1;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(42 20 16 / 0.18);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail__arrow:hover { transform: scale(1.08); background: var(--color-paper-3); }
.rail__arrow--prev { left: -6px; }
.rail__arrow--next { right: -6px; }
.rail__arrow[hidden] { display: none; }
/* Room for the arrow to sit half off the row without clipping. */
.rail--scrollable .rail__row { scroll-padding-inline: var(--space-xl); }
@media (max-width: 48rem) { .rail__arrow { display: none; } }

/* The project's cover. Empty it is a stated placeholder, not a blank box —
   an empty frame with no explanation just looks broken. */
.projcover {
  position: relative;
  margin: var(--space-lg) 0 var(--space-xl);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  overflow: clip;
}
/* A strip, always: the picture is cropped to a fixed height rather than sized by
 * its own shape, so a tall cover never fills a phone screen. Dragging it
 * chooses which part shows. */
.projcover img { display: block; width: 100%; height: clamp(6.5rem, 22vw, 11rem); max-height: none; object-fit: cover; }
.projcover__empty {
  display: grid; place-items: center; gap: var(--space-2xs);
  text-align: center;
  min-height: clamp(6.5rem, 22vw, 11rem);
  padding: var(--space-md);
  background: var(--gradient-ember);
}
.projcover__empty p {
  margin: 0; max-width: 32rem;
  font-size: var(--text-sm); color: var(--color-ink);
}
.projcover__set { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--color-paper); }
.projcover__note { margin: 0; padding: var(--space-xs) var(--space-md); }

/* Admin visitor-preview bar. Loud on purpose while previewing: a preview you
   forget you are in is a preview that has you debugging the wrong page. */
.previewbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-paper-3);
  border-bottom: 1px solid var(--color-rule);
}
.previewbar.is-on {
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-weight: 600;
}
.previewbar .btn { min-height: 30px; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }
.previewbar.is-on .btn { color: var(--color-on-accent); border-color: var(--color-on-accent); }

/* ---------- role tags on a production card ----------
 * The shape of the crew a job took, in the site's own font. Each role keeps
 * one colour everywhere so it becomes recognisable at a glance. Every pair is
 * measured: 5.36 to 8.86 on its own ground, all clear of AA. */
.roles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.role {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.2em 0.65em;
  /* a role with no colour of its own still reads */
  color: var(--color-muted);
  background: var(--color-paper-3);
  white-space: nowrap;
}
.role[data-role="Creative director"] { color: #741B0B; background: #F7E3D2; }
.role[data-role="Director"]          { color: #8A3D0E; background: #F7E7D6; }
.role[data-role="Illustrator"]       { color: #7A4A00; background: #FBE9C8; }
.role[data-role="Graphic designer"]  { color: #1E5B3E; background: #E7EFE6; }
.role[data-role="Digital designer"]  { color: #1F4C6B; background: #E4ECF2; }
.role[data-role="Motion designer"]   { color: #5B2A66; background: #F0E6F2; }
.role[data-role="Animator"]          { color: #92240F; background: #FCE2DC; }
.role[data-role="Editor"]            { color: #5A4A22; background: #EDE8DA; }
.role[data-role="Photographer"]      { color: #1E6B5E; background: #E6EEEC; }
.role[data-role="Videographer"]      { color: #6E3B2B; background: #F2E8DE; }

/* A sub-commission's timeline: what it is, at the top; where it ends, at
   the bottom. Both in the timeline's own red so they read as part of it. */
.tl-scoped__in {
  margin-bottom: var(--space-sm);
  padding: var(--space-md);
  border: 1.5px dashed rgb(251 246 216 / 0.55);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.tl-scoped__in h3 { margin: var(--space-2xs) 0; color: var(--color-on-accent); }
.tl-scoped__in p, .tl-scoped__in .label { color: var(--color-on-accent); }
.tl-scoped__in .meta { opacity: 0.85; }
.tl-step--ended { cursor: default; opacity: 0.9; border-style: dashed; }
.tl-step--ended.is-done { opacity: 1; }

/* Growing the room: one quiet row under the people, in either chair. */
.roomgrow { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-rule); }
.roomgrow .btn { margin-top: var(--space-2xs); }
.roomgrow--inline { margin: var(--space-sm) 0 var(--space-md); padding-top: 0; border-top: 0; }

/* The six, inside a sheet. Three across, never more. */
.seatgrid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.seatgrid .match-card.is-selected { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* A software tile with what they can execute in it underneath: the tile
   widens to carry a comma list, and the list reads left-aligned under the
   name like a caption rather than centred like a label. */
.cvtools:has(.cvtool--fx) { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cvtool.cvtool--fx {
  width: auto;
  grid-template-columns: 1fr;
  justify-items: start;
  text-align: left;
}
.cvtool.cvtool--fx b { justify-self: stretch; }
.cvtool.cvtool--fx > span { font-size: 0.7rem; font-weight: 700; }
.cvtool__fx { font-size: 0.66rem; line-height: 1.35; color: var(--color-neutral); }
#join-wizard .cvsheet .cvtool__fx { color: var(--color-neutral); }

/* A row you can open. Same row, plus the affordance that says so. */
.project-row--open { cursor: pointer; }
.project-row--open:hover { border-color: currentColor; }
.project-row--open:focus-visible { outline: 2px solid var(--color-orchid); outline-offset: 2px; }

/* The picture at the top of the brief, and the project's header after it.
   Banner-shaped, because that is the shape it will be living in. */
.briefhead {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  aspect-ratio: 12 / 5;
  width: 100%;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  overflow: clip;
  text-align: center;
  border: 2px dashed var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--gradient-ember);
  color: var(--ink-on-light);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.briefhead:hover { border-color: var(--color-accent); }
.briefhead__plus { font-size: 2rem; line-height: 1; opacity: 0.65; }
.briefhead__ask { font-weight: 700; }
.briefhead__why { font-size: var(--text-sm); opacity: 0.8; max-width: 34ch; margin-inline: auto; }
.briefhead.is-on { border-style: solid; border-color: var(--color-rule); padding: 0; }
.briefhead.is-on img { width: 100%; height: 100%; object-fit: cover; display: block; }
.briefhead__swap {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  background: var(--color-paper);
}
.briefhead.is-loading { opacity: 0.6; cursor: progress; }

/* Staffing on a commission that has no staffing phase: the contractor's one
   specialist, or the commissioner's request for one. Set off from the roster
   above it, because it is a different question about the same people. */
.crewaside {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule);
}
.crewaside .crew__add { margin-top: var(--space-sm); }

/* ---------- project cover beside a row ----------
 * Flush to the left edge of the card, like a profile photo sits against its
 * text. Where a project has no cover yet the square is tinted from its own id,
 * so a row keeps its shape and rhythm either way. */
/* A square, and a small one.
 *
 * These were wide rows with a tall strip of picture down the left, and four
 * of them filled the screen — which is the opposite of what an alert is for.
 * An alert should be glanceable and take almost no room: a small square with
 * the cover on top and the words under it. The card is what is square; the
 * picture takes whatever height the two lines of type leave it. */
.thin {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: clip;
  aspect-ratio: 1;
}
.thin__shot {
  /* The picture is always the same share of the tile (just under half, as in the
   * reference), whatever the words say, so a row of alerts reads as one row. */
  flex: 0 0 48%;
  min-height: 0;
  width: 100%;
  /* A cover can be set from the row it sits in, so it takes the prompt
     colour. Ember means "you can put something here" wherever it appears. */
  background: var(--gradient-ember);
}
.thin__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%); }
.thin__words {
  flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
}
.thin__new { top: var(--space-xs); right: var(--space-xs); }

/* Rows in a list line up down the list.
 *
 * As a flex row every column started wherever the one before it ended, so
 * the status and the way in sat at a different place on every row and the
 * eye had to find them again each time. Fixed tracks: the cover, the words,
 * the status, the action — the same four positions on every row. Centred
 * rather than stretched, so a filled button is a button and not a block as
 * tall as the row it is in. */
.project-row--shot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 10rem) minmax(0, 15rem);
  align-items: center;
  gap: var(--space-md);
  padding-left: 0;
}
.rowshot {
  flex: none;
  width: 96px;
  align-self: stretch;
  min-height: 72px;
  border-radius: var(--radius-md);
  overflow: clip;
  background: var(--gradient-ember);
}
.rowshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 40rem) {
  .rowshot { width: 64px; }
}

/* The logged-out view toggle, sitting with the rest of the navigation. */
.navlink-preview {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-flare);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.navlink-preview:hover { color: var(--color-accent-deep); }
.navlink-preview.is-on { color: var(--color-accent); border-bottom-style: solid; }

/* The deck's footer line, for cards that carry a kind and a budget under
   their list rather than only bullets. */
.deck__foot {
  margin: var(--space-sm) 0 0;
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid currentColor;
  font-size: var(--text-xs);
  opacity: 0.85;
}
/* Six models rather than five, so the fan gets one more seat. */

/* The home deck is one colour, and it is the brand's yellow.
 *
 * How it works keeps its full palette — there each card is a different step
 * in how the money moves, so the colour is carrying that. On the home page
 * they are six examples of the same thing, a team shape, and six colours was
 * six differences that do not exist.
 *
 * Yellow on the cream page is only 1.31:1, so the card would float without an
 * edge — hence the border. Text goes to ink: 12.17:1, and cream on this would
 * be unreadable. */
/* The home deck takes the same pale yellow as How it works — one deck
   treatment across the site, rather than two yellows a page apart. */
@media (min-width: 62rem) {
  .deck__card--6 { transform: rotate(-4deg) translateY(0.6rem); z-index: 6; }
}

/* Your own live work: one button, under the hero, above every rail. */
.rail__lead { margin-bottom: var(--space-xl); }
.rail__more--lead {
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-xl);
  min-height: 48px;
}
@media (max-width: 40rem) {
  .rail__more--lead { font-size: var(--text-sm); min-height: 44px; }
}

/* An editable cover slot: a real button, so it is reachable by keyboard and
   obviously pressable, sitting inside rows that are otherwise links. */
.coverslot {
  position: relative;
  padding: 0;
  border: 1px solid var(--color-rule);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.coverslot:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgb(42 20 16 / 0.2); }
.coverslot:active { transform: scale(0.99); }
.coverslot.is-busy { opacity: 0.6; pointer-events: none; }
.coverslot__hint {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-press);
  opacity: 0.55;
}
.coverslot.is-set .coverslot__hint { display: none; }
/* Set, it stops advertising itself — the hint only returns on hover. */
.coverslot.is-set::after {
  content: "Replace";
  position: absolute;
  inset: auto 0 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-on-accent);
  background: rgb(42 20 16 / 0.55);
  padding: 2px 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.coverslot.is-set:hover::after,
.coverslot.is-set:focus-visible::after { opacity: 1; }

/* ---------- the commission form ----------
 *
 * A long form on a coloured ground with white bubbles to type into. Two
 * grounds, and they mean different things: red is a form going to someone
 * else's client, yellow is one you are filling in about your own project.
 * Getting those two mixed up sends a stranger a page that looks like an
 * internal note, so the colour is load-bearing, not decoration.
 *
 * Measured: white labels on #92240F is 8.46:1; ink on #FFD34D is 12.17:1;
 * ink in a white bubble is 17.41:1 and its placeholder 6.34:1. All AA, most AAA.
 */
.cform {
  border-radius: 26px;
  padding: var(--space-xl);
  margin-top: var(--space-lg);
}
.cform--send { background: var(--color-accent); color: #FFFFFF; }
.cform--own  { background: #FFD34D; color: var(--ink-on-light); }

.cform__step { display: none; }
.cform__step.is-on { display: block; }
.cform__title { margin: 0 0 var(--space-2xs); color: inherit; }
.cform__lede { margin: 0 0 var(--space-lg); font-size: var(--text-sm); opacity: 0.85; }

.cform__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.cform__field--wide { grid-column: 1 / -1; }
.cform__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
}
.cform__req { opacity: 0.75; }
/* What an answer just told you. Sits under its chips, in the panel's own
   colour at reading weight — a note, not a warning. */
.cform__says {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 46ch;
}

/* The bubbles. White, soft, and the same on both grounds — the thing you
   type into should not change character with the theme. */
.cform input[type="text"],
.cform input[type="email"],
.cform input[type="date"],
.cform input[inputmode="decimal"],
.cform textarea {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgb(42 20 16 / 0.08);
}
.cform textarea { min-height: 5.5rem; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: #6B5D52; }
.cform input:focus-visible, .cform textarea:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.65);
  outline-offset: 2px;
}
.cform--own input:focus-visible, .cform--own textarea:focus-visible {
  outline-color: var(--color-accent-press);
}

/* The block above the form is part of the form.
 *
 * It was a cream advice box sitting on top of a red panel, which read as two
 * different things stapled together. Same ground, same bubbles, and the gap
 * between them closed so they are one run. */
.is-send .cform--lead { margin-bottom: 0; border-radius: 26px 26px 0 0; }
.is-send .cform--lead + #nc-form .cform { margin-top: 0; border-radius: 0 0 26px 26px; }

/* A checkbox on the red. The browser's own blue is the one thing on this page
   that belongs to no palette at all. */
.cform__check {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  cursor: pointer;
}
.cform__check input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin: 0;
  border: 0; border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  display: grid; place-content: center;
}
.cform__check input[type="checkbox"]::after {
  content: "";
  width: 0.62rem; height: 0.34rem;
  border-left: 2.5px solid var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cform--own .cform__check input[type="checkbox"]::after {
  border-color: var(--color-accent-press);
}
.cform__check input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.cform__check input[type="checkbox"]:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.65); outline-offset: 2px;
}

/* The way out of a scan: paste the words instead. Hidden until the upload
   comes back with nothing, so it is an answer rather than clutter. */
.cform__paste {
  flex: 1 1 100%;
  margin-top: var(--space-xs);
  border: 0; border-radius: 14px;
  padding: 0.7rem 0.9rem;
  font: inherit; font-size: var(--text-sm);
  background: #FFFFFF; color: var(--color-ink);
  resize: vertical;
}

/* Chip answers, so most of the form is pressed rather than typed. */
.cform__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cform__chip {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  background: rgb(255 255 255 / 0.16);
  color: inherit;
  border: 1px solid rgb(255 255 255 / 0.55);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cform--own .cform__chip { background: rgb(255 255 255 / 0.45); border-color: rgb(42 20 16 / 0.28); }
.cform__chip[aria-pressed="true"] { background: #FFFFFF; color: var(--ink-on-light); font-weight: 600; }

/* Sub-headings and hints inside a panel, in the panel's own colours. */
.cform__sub {
  margin: var(--space-xl) 0 var(--space-2xs);
  color: inherit;
  font-size: var(--text-md);
}
.cform__hint {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--on-accent-2);
}
.cform--own .cform__hint { color: var(--color-accent-press); }
/* The commissioner's wizard reuses parts built for a cream page. On the red
   they need to stop being cream-on-cream. */
.cform .error-msg { color: var(--color-orchid); }
.cform .meta, .cform p:not([class]) { color: var(--on-accent-2); }
.cform--own .meta, .cform--own p:not([class]) { color: var(--color-accent-press); }
.cform .attach__url {
  border: 0; border-radius: 14px; padding: 0.7rem 0.9rem;
  background: #FFFFFF; color: var(--ink-on-light);
}
.cform .attach__list li, .cform .project-row { color: inherit; border-color: rgb(255 255 255 / 0.28); }
.cform .option-slab {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.5);
  color: inherit;
}
.cform .option-slab h3, .cform .option-slab p, .cform .option-slab li { color: inherit; }
.cform .option-slab[aria-pressed="true"] { background: #FFFFFF; color: var(--ink-on-light); }
.cform .chip { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.55); color: inherit; }
.cform .chip[aria-pressed="true"] { background: #FFFFFF; color: var(--ink-on-light); }
.cform input[aria-invalid="true"] { outline: 3px solid var(--color-orchid); outline-offset: 2px; }

/* Progress and the round Next. */
.cform__foot {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  margin-top: var(--space-xl);
}
.cform__dots { display: flex; gap: 6px; margin-right: auto; }
.cform__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(255 255 255 / 0.4);
}
.cform--own .cform__dots i { background: rgb(42 20 16 / 0.25); }
.cform__dots i.is-on { background: #FFFFFF; }
.cform--own .cform__dots i.is-on { background: var(--color-accent); }

.cform__next {
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  background: #FFFFFF;
  color: var(--color-accent);
  box-shadow: 0 4px 16px rgb(42 20 16 / 0.22);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cform--own .cform__next { color: var(--color-accent-press); }
.cform__next:hover { transform: scale(1.06); }
.cform__next:active { transform: scale(0.98); }
.cform__next:disabled { opacity: 0.5; cursor: default; transform: none; }
.cform__back {
  border: 1px solid rgb(255 255 255 / 0.5);
  background: none; color: inherit;
  border-radius: 999px; padding: 0.45rem 1rem;
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.cform--own .cform__back { border-color: rgb(42 20 16 / 0.3); }

.cform__err { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.cform--send .cform__err { color: var(--color-orchid); }
.cform--own .cform__err { color: var(--color-accent-press); }

/* Prefill from a document, at the top of the first step. */
.cform__parse {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: 14px;
  border: 1px dashed rgb(255 255 255 / 0.5);
  font-size: var(--text-sm);
}
.cform--own .cform__parse { border-color: rgb(42 20 16 / 0.3); }
.cform__parse button {
  border-radius: 999px; padding: 0.35rem 0.9rem;
  border: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 600;
  background: #FFFFFF; color: var(--color-accent);
}
.cform--own .cform__parse button { color: var(--color-accent-press); }

@media (max-width: 40rem) {
  .cform { padding: var(--space-lg) var(--space-md); border-radius: 20px; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
  .cform__next { width: 3.6rem; height: 3.6rem; }
}

/* A project's progress, as the way into it.
 *
 * It was a bar you could look at and not press, with the only door hidden in
 * the title. Now the bar is the button and it says where it goes. */
.progbtn {
  display: block;
  margin-top: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm) var(--space-xs);
  border: 1px solid var(--color-rule-2);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  max-width: 18rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.progbtn:hover { border-color: var(--color-accent); background: var(--color-paper-2); }
.progbtn__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-xs);
}
.progbtn__pct { color: var(--color-neutral); }
.progbtn__go { color: var(--color-accent); font-weight: 600; }
.progbtn .progress { margin-top: 0.35rem; max-width: none; }

/* ---------- settings, as a list of doors ----------
 *
 * The profile page had eleven headings on one scroll, each of them a
 * different job. Reading past ten to change one is how a profile stops
 * getting kept true. Each heading is a button now, in the site's own red, and
 * it opens that one thing on its own page.
 *
 * Measured on #B22F16: the label at cream is 5.82:1, the line under it at
 * var(--on-accent-2) is 4.87:1. Both clear of AA.
 */
.setmenu, #p-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-2xl);
}
.setbtn {
  display: block;
  position: relative;
  padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-lg);
  border-radius: 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.setbtn:hover {
  background: var(--accent-hover);
  border-color: var(--color-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(42 20 16 / 0.2);
}
.setbtn:active { transform: translateY(0); }
.setbtn:focus-visible { outline: 3px solid var(--color-accent-press); outline-offset: 2px; }
.setbtn__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
}
.setbtn__blurb {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-sm);
  color: var(--on-accent-2);
}
.setbtn__go {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-lg);
  font-weight: 700;
}
.setbtn:hover .setbtn__go { transform: translateY(-50%) translateX(3px); }

/* An open section wants room to breathe, and a heading that is not competing
   with the button that got you here. */
.setting > h2:first-child,
.setting > h2 { margin-top: 0; }

@media (max-width: 40rem) {
  .setmenu, #p-settings { grid-template-columns: minmax(0, 1fr); }
}

/* Log out and Liked work are not settings, so they sit under them rather than
   among them — and they wear the same red, because a quiet outline beside a
   column of solid buttons reads as disabled. */
.acctacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-2xl);
}

/* ---------- the project room's sheets, on the form's ground ----------
 *
 * Every sheet the room opens is part of the same document as the timeline
 * that opened it, and the timeline is red. A cream dialog over it read as a
 * different product. So the panel takes the commission form's ground and its
 * white bubbles, and the pieces built for cream get told what to do on red.
 *
 * Measured on #B22F16: white 6.34:1, cream 5.82:1, dimmed cream 4.87:1, and
 * the red back out of a white button 6.34:1. All clear of AA.
 */
.sheet__panel--form {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent-press);
}
.sheet__panel--form .sheet__title,
.sheet__panel--form h2,
.sheet__panel--form h3,
.sheet__panel--form .label { color: var(--color-on-accent); }
.sheet__panel--form .sheet__close { color: var(--color-on-accent); }
.sheet__panel--form .doc__lede,
.sheet__panel--form .meta,
.sheet__panel--form p { color: var(--on-accent-2); }
.sheet__panel--form .doc__text {
  color: var(--ink-on-light);
  background: #FFFFFF;
  border: 0;
  border-radius: 14px;
  padding: var(--space-md);
}
.sheet__panel--form .field label,
.sheet__panel--form label { color: var(--color-on-accent); font-weight: 600; }
.sheet__panel--form .hint { color: var(--on-accent-2); }
.sheet__panel--form input:not([type="checkbox"]):not([type="radio"]),
.sheet__panel--form textarea,
.sheet__panel--form select {
  border: 0;
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  background: #FFFFFF;
  color: var(--color-ink);
}
.sheet__panel--form input::placeholder,
.sheet__panel--form textarea::placeholder { color: #6B5D52; }
.sheet__panel--form input:focus-visible,
.sheet__panel--form textarea:focus-visible,
.sheet__panel--form select:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.65); outline-offset: 2px;
}

/* Buttons. A red primary on a red panel is a button you cannot see, so the
   two swap: solid white with red type leads, outlined white follows. */
.sheet__panel--form .btn {
  border-color: rgb(255 255 255 / 0.6);
  color: var(--color-on-accent);
  background: transparent;
}
.sheet__panel--form .btn:hover { background: rgb(255 255 255 / 0.14); }
.sheet__panel--form .btn--primary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-accent);
  font-weight: 700;
}
.sheet__panel--form .btn--primary:hover { background: var(--on-accent-2); color: var(--color-accent-press); }
.sheet__panel--form .btn--quiet { border-color: rgb(255 255 255 / 0.4); }

/* Rows, chips and attachments inside a sheet. */
.sheet__panel--form .project-row,
.sheet__panel--form .attach__list li,
.sheet__panel--form .call-card,
.sheet__panel--form .flag {
  border-color: rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.08);
  color: inherit;
}
.sheet__panel--form .project-row h3 { color: var(--color-on-accent); }
.sheet__panel--form .attach__kind {
  background: rgb(255 255 255 / 0.2);
  color: var(--color-on-accent);
}
.sheet__panel--form .attach__url { background: #FFFFFF; color: var(--ink-on-light); border: 0; }
.sheet__panel--form a:not(.btn) { color: var(--color-orchid); }
.sheet__panel--form blockquote { color: var(--on-accent-2); border-left-color: rgb(255 255 255 / 0.4); }
.sheet__panel--form .notice {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.1);
  color: var(--color-on-accent);
}
.sheet__panel--form .chip {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.55);
  color: inherit;
}
.sheet__panel--form .chip[aria-pressed="true"] { background: #FFFFFF; color: var(--ink-on-light); }

/* ---------- the liked reel ----------
 *
 * What you saved, shown rather than listed. Full screen, one item per screen,
 * snap-scrolled: you flick down and see the work again. A list of titles is a
 * strange way to hold things you liked for how they looked.
 *
 * dvh rather than vh, or a phone's disappearing address bar cuts the last
 * item in half and the snap lands between two panes.
 */
.reel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #16100E;
  color: #FFFFFF;
}
.reel__track {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.reel__item {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-rows: 1fr auto;
}
/* Letterboxing is black, not tinted. `object-fit: contain` leaves bands above
   and below anything that is not the screen's shape, and a coloured band
   reads as part of the picture. The hue only comes out when there is no
   picture at all. */
.reel__stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #16100E;
}
.reel__stage--blank {
  background: linear-gradient(160deg,
    hsl(var(--tile-h, 20) 55% 32%), hsl(calc(var(--tile-h, 20) + 24) 60% 18%));
}
.reel__media {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Nothing to show: the ground carries it rather than an empty grey box. */
.reel__stage--blank::after {
  content: "";
  position: absolute; inset: 20%;
  border: 1px dashed rgb(255 255 255 / 0.25);
  border-radius: 24px;
}
/* The whole picture is the tap target, so opening it full size is one press
   wherever your thumb already is. */
.reel__open {
  position: absolute; inset: 0;
  border: 0; background: none; cursor: zoom-in;
}
.reel__dots {
  position: absolute; bottom: var(--space-sm); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
}
.reel__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(255 255 255 / 0.45);
}
.reel__dots i.is-first { background: #FFFFFF; }

.reel__cap {
  padding: var(--space-lg) var(--space-lg) calc(var(--space-2xl) + env(safe-area-inset-bottom));
  background: #16100E;
  position: relative;
  pointer-events: none;
}
.reel__cap > * { pointer-events: auto; }
.reel__kind {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-orchid);
  margin-bottom: var(--space-2xs);
}
.reel__cap h2 { margin: 0 0 var(--space-2xs); color: #FFFFFF; font-size: var(--text-xl); }
.reel__cap p { margin: 0 0 var(--space-2xs); color: #E6DCD2; font-size: var(--text-sm); max-width: 46ch; }
.reel__sub { color: #B9A99C !important; font-family: var(--font-body); font-size: var(--text-xs) !important; }
.reel__cap .roles { margin-top: var(--space-xs); }
.reel__cap .btn { margin-top: var(--space-sm); }

.reel__close, .reel__count {
  position: absolute;
  top: calc(var(--space-md) + env(safe-area-inset-top));
  z-index: 2;
}
.reel__close {
  right: var(--space-md);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: rgb(0 0 0 / 0.5);
  color: #FFFFFF;
  font-size: var(--text-md);
  cursor: pointer;
}
.reel__close:hover { background: rgb(0 0 0 / 0.72); }
.reel__count {
  left: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #FFFFFF;
  background: rgb(0 0 0 / 0.5);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

/* On a wide screen a full-bleed phone feed is mostly empty ground, so the
   picture takes a column and the caption sits beside it. */
@media (min-width: 60rem) {
  .reel__item { grid-template-rows: none; grid-template-columns: 1fr minmax(20rem, 28rem); }
  .reel__cap {
    margin-top: 0;
    background: none;
    align-self: center;
    padding: var(--space-2xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel__track { scroll-snap-type: none; }
}

/* The callout on its own ground. Red card, yellow button: on a page whose
 * cards have all gone pale yellow, a cream callout with a red button was the
 * quietest thing on the screen while being the only thing asking to be
 * pressed. Inverted, it is the loudest.
 *
 * Cream on #B22F16 is 5.82:1; ink on #FFE08A is 13.5:1. */
.callout--red {
  background: var(--color-accent);
  border-color: var(--color-accent-press);
  color: var(--color-on-accent);
}
.callout--red h2, .callout--red p { color: var(--color-on-accent); }
/* The same yellow the site uses as a background — the page-head banners and
 * the profile cover — rather than the more saturated one the deck cards
 * wear. One yellow for grounds, so the button reads as a piece of the page
 * laid on the red rather than a third shade. Ink on it is 14.73:1, and it
 * carries 5.36:1 against the red it sits on. */
.btn--yellow {
  background: #FBECB4;
  border-color: #FBECB4;
  color: var(--ink-on-light);
  font-weight: 700;
}
.btn--yellow:hover {
  background: #FFE08A;
  border-color: #FFE08A;
  color: var(--ink-on-light);
}

/* A Studio project, stacked.
 *
 * It was a grid of columns, and the columns collapsed the moment the page
 * narrowed — a progress bar, a status pill and a button orphaned on three
 * lines at three different widths. Stacked, it holds at any width, and the
 * order reads the way you would say it: what it is, who for and when, how far
 * along, and the one thing you can do about it.
 */
.stackcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  margin-bottom: var(--space-sm);
}
.stackcard--alert { border-left-color: var(--color-accent); }
.stackcard--warn  { border-left-color: var(--color-warn); }
.stackcard--ok    { border-left-color: var(--color-ok); }
.stackcard__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
}
.stackcard__head h3 { margin: 0; }
.stackcard__sub { margin: 0; font-size: var(--text-sm); color: var(--color-neutral); }
.stackcard .progbtn { max-width: none; margin-top: var(--space-2xs); }
/* The action is full width so it reads as the card's button rather than
   something that happens to be sitting under it. */
.stackcard__act { width: 100%; text-align: center; }

/* The team shapes, small.
 *
 * Signed out these are six fanned cards explaining how a production is put
 * together. Signed in they are a reference you glance at while deciding what
 * to commission — so the same content comes through as a compact card on a
 * rail: roles only, no notes, the price line at the foot. Pale yellow keeps
 * it recognisably the same set as the deck on the other two pages.
 */
.shapecard {
  background: var(--color-orchid);
  border: 1px solid #E4C173;
  color: var(--ink-on-light);
  border-radius: 16px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
}
.shapecard:hover { background: #FFD34D; text-decoration: none; }
.shapecard h3 {
  margin: 0 0 var(--space-2xs);
  padding-bottom: var(--space-2xs);
  font-size: var(--text-base);
  color: var(--ink-on-light);
  border-bottom: 1px solid currentColor;
}
.shapecard ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.shapecard li {
  position: relative;
  padding-left: 0.9em;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-on-light);
}
.shapecard li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px;
  background: currentColor;
  transform: rotate(45deg);
}
.shapecard__foot {
  margin-top: var(--space-xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid currentColor;
  font-size: var(--text-xs);
  opacity: 0.85;
}
/* Spaced out along the rail rather than shoulder to shoulder. */
.rail__row [data-shapes] , .rail[data-rail="shapes"] .rail__row { gap: var(--space-lg); }
.rail[data-rail="shapes"] .rail__row { grid-auto-columns: minmax(12rem, 15rem); }

/* The "+4 more" after a trimmed list. A link in behaviour, so it looks like
   one rather than borrowing a button's weight for something this small. */
.seemore {
  margin-left: var(--space-2xs);
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.seemore:hover { color: var(--color-accent-press); }

/* The same circle on a Studio door. Top-right of the button, over its own
   red, so it inverts: white ground, red figure. Only drawn when there is
   something behind it. */
.setbtn__count {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The arrow shifts down so the two do not sit on top of each other. */
.setbtn:has(.setbtn__count) .setbtn__go { top: auto; bottom: var(--space-md); transform: none; }

/* ---------- the profile cover, on a phone ----------
 *
 * It had no mobile rules at all: a flex row of portrait + text + action, with
 * the text block holding a 14rem basis. At the default font size that fits;
 * at iOS's Larger Text setting the row runs to 404px inside a 375px screen
 * and the card is dragged off both edges of the page.
 *
 * Stacked below the breakpoint, with the action full width, it holds at any
 * text size. The basis goes to auto so the text column stops demanding a
 * width the screen does not have.
 */
@media (max-width: 40rem) {
  .cover__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  .cover__who { flex: 1 1 auto; width: 100%; }
  .cover__acts { width: 100%; }
  .cover__acts .btn { width: 100%; text-align: center; }
  .cover__note { padding: var(--space-xs) var(--space-md); }
}

/* A button is never wider than what holds it. Cheap insurance against a long
   label plus a large text setting pushing a whole page sideways — which is
   exactly how the profile card ended up off-screen. */
.btn { max-width: 100%; }
.cover__who h2, .cover__headline, .cover__note { overflow-wrap: anywhere; }

/* Wrapping grids state their minimum as min(Xrem, 100%).
 *
 * `minmax(15rem, 1fr)` promises a column at least 15rem wide. At the default
 * text size that is 240px and fits a phone; at iOS's Larger Text it is 360px
 * and the grid pushes past the screen with nowhere to wrap to. Wrapping it in
 * min() lets the column give up its minimum when the container is smaller,
 * which is the only sane reading of "at least this wide, if there is room".
 *
 * Rails are left alone: they scroll sideways by design, and a fixed minimum
 * is what makes a rail a rail rather than a wrapping grid.
 */

/* ---------- rows and row-headings, on a phone ----------
 *
 * Two layouts had no mobile rules and both clip at 375px even at the default
 * text size: the rail heading (a flex row of title, note and one or two
 * buttons) and the project row (a three-column grid that sometimes carries a
 * fourth child). Neither can hold three or four things side by side on a
 * phone, so they stack and their actions go full width.
 */
@media (max-width: 40rem) {
  .rail__head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .rail__head h2,
  .rail__head .meta { flex: 1 1 100%; }
  .rail__head .btn,
  .rail__head .rail__more { width: 100%; text-align: center; }
  /* The lead action under the hero keeps its own sizing — it is the one
     button on the page that is meant to be large. */
  .rail__lead .rail__more--lead { width: 100%; }

  .project-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
  }
  .project-row .btn { width: 100%; text-align: center; }
  /* The cover stays beside the text; everything after it wraps beneath. */
  /* Stacked, there are no columns to line up — the cover keeps the first
     row and everything else runs full width under it. */
  .project-row--shot {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .project-row--shot > :nth-child(n+3) { grid-column: 1 / -1; }
  .project-row--shot .btn { width: 100%; justify-content: center; }

  .rail__more { max-width: 100%; }
  .seat { max-width: 100%; }
}

/* A single long word should break rather than push the page.
 *
 * The last two overflows on a 320px screen at maximum text size were one
 * production title and one bare URL — unbreakable tokens wider than the
 * viewport. `anywhere` lets them wrap mid-word, which is ugly exactly once
 * and correct always; the alternative is a sideways page. */
h1, h2, h3, h4, a, .meta, .doc__text, .attach__list li { overflow-wrap: anywhere; }

/* ---------- who you are, on every dashboard page ----------
 *
 * The dashboard is one desk with several sides to it: you can be
 * commissioning on one page and co-curating on the next, and the pages look
 * alike. A standing badge in the corner says which seat you are in, so it is
 * never something you have to infer from which tabs are showing.
 *
 * It sits at the top-left of the page rather than pinned to the viewport —
 * fixed, it would sit on top of the masthead logo, which is already the
 * top-left corner of the screen.
 *
 * Measured on #B22F16: the name at cream 5.82:1, the role at var(--on-accent-2) 4.87:1.
 */
.rolebadge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  align-self: flex-start;
  margin-bottom: var(--space-md);
  padding: 0.55rem var(--space-lg);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  max-width: 100%;
}
/* The badge lost its face, so the words take the room it was using — which
   is also the size this line should have been reading at. */
.rolebadge__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
}
.rolebadge__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--on-accent-2);
  overflow-wrap: anywhere;
}
/* The badge is a block in the page flow, so a flex main would stretch it. */
main > .rolebadge { width: max-content; }

@media (max-width: 40rem) {
  .rolebadge { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  main > .rolebadge { width: auto; }
}

/* The small print under a page-head line — a caveat rather than a second
   sentence, so it sits back from the line above it. */
.rolenote {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #7A3E1E;
}

/* The way into finished work.
 *
 * Your projects is a list of what you have on; delivered work is a record,
 * and left in the same list it crowds out the live jobs the page exists to
 * show. Full width so it reads as the end of the list rather than another
 * row in it, with the count on it so you can see there is something there.
 */
.pastbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-deep);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pastbtn:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.pastbtn__n {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The founder's headcount. One line at the top of her own home page, and
   nobody else's — quiet enough not to be the first thing the page says, but
   there every time she opens it. */
.headcount {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* It closes the page rather than opening it. */
  margin-top: var(--space-2xl);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid #EBD68A;
  border-left: 3px solid var(--color-accent);
  border-radius: 14px;
  background: #FBECB4;
  color: #5C1608;
}
.headcount__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.headcount__row { font-size: var(--text-sm); }
.headcount__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.headcount__row--sub { opacity: 0.8; }

/* ---------- framing a project cover ----------
 *
 * Every project photo is square now and adjustable in it, the same question
 * the profile circle asks: almost nothing uploaded is the shape of the box it
 * goes in, and only the person looking at it knows which part matters. The
 * frame carries --portrait-x/y; the image reads them.
 */
.rowshot {
  aspect-ratio: 1;
  align-self: start;
  height: auto;
  min-height: 0;
}
/* On a card the square takes the card's full height rather than sitting in a
   74px box with the ground showing above and below it — a photo with a strip
   of paper over and under reads as a mistake, and the point of the picture is
   that you can see it. On a card the shot keeps stretching to the card's full
   height, as it always did; only the dashboard rows are square. */

.coverslot { touch-action: none; }
.coverslot img,
.rowshot img,
.thin__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%);
  display: block;
}
/* Grab, because the whole tile is draggable; a plain click still replaces it. */
.coverslot.is-set { cursor: grab; }
.coverslot.is-set:active,
.coverslot.is-framing { cursor: grabbing; }
.coverslot.is-framing { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The banner takes the same treatment at the size where it matters most. */
.projcover { touch-action: none; }
.projcover img { object-position: var(--portrait-x, 50%) var(--portrait-y, 50%); }
.projcover:has(img:not([hidden])) { cursor: grab; }
.projcover.is-framing { cursor: grabbing; outline: 2px solid var(--color-accent); outline-offset: -2px; }
.projcover:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* A small face, wherever the signed-in person is named. Cropped by the same
   two numbers the profile circle saves, so it is framed the way its owner
   framed it rather than centre-cropped into a ring of torso. */
.miniface {
  --miniface: 1.6rem;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--miniface);
  height: var(--miniface);
  border-radius: 50%;
  overflow: clip;
  background: var(--color-paper-3);
}
.miniface img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 28%);
}
.miniface__i {
  font-family: var(--font-display);
  font-size: calc(var(--miniface) * 0.42);
  font-weight: 700;
  color: var(--color-neutral);
  line-height: 1;
}
.rail__lead { display: flex; align-items: center; gap: var(--space-sm); }

/* The crop control on a cover, and the frame it opens.
 *
 * A 64px square on a phone has room for one gesture, not two — so the tile
 * replaces the picture and this opens it big enough to actually frame.
 */
.coverslot__crop {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.coverslot__crop:hover { background: rgb(0 0 0 / 0.8); }
.coverslot:not(.is-set) .coverslot__crop { display: none; }

.cropframe {
  position: relative;
  /* The aspect comes from the element being cropped, set inline — see
     openCrop. The cap keeps a tall thumbnail's preview on the screen. */
  width: min(20rem, 100%);
  max-height: 60vh;
  aspect-ratio: 1;
  margin: var(--space-md) auto 0;
  border-radius: 18px;
  overflow: clip;
  background: #16100E;
  cursor: grab;
  touch-action: none;
}
.cropframe.is-framing { cursor: grabbing; }
.cropframe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%);
}
/* The square the cover will actually be, drawn over the picture. */
.cropframe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 18px;
  pointer-events: none;
}

/* The card is one line again. The facts that identify you lead in bold; the
   sentence about your work follows in the body colour, which is the whole
   separation that was needed. */
#p-meta b { font-weight: 700; color: var(--color-ink); }

/* ---------- an indie studio's own identity ----------
 *
 * A banner across the top with the logo overlapping its lower-left, the way a
 * company page reads. An indie studio is a name someone is building, not a
 * folder of files, so it gets a header rather than a heading.
 *
 * Both pictures frame with the same drag as every other image here, and each
 * asks for itself while it is empty.
 */
.idcard {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  overflow: clip;
  margin-bottom: var(--space-lg);
}
/* The picture is what you drag; the button is not part of it. Keeping the
   button outside the frame is what stops a press on it being taken for the
   start of a drag — a guard in the drag handler works too, but only for as
   long as everyone remembers to keep it. */
.idcard__bannerwrap { position: relative; }
.idcard__banner {
  position: relative;
  height: clamp(7rem, 22vw, 11rem);
  background: var(--gradient-ember);
  display: grid;
  place-items: center;
  touch-action: none;
}
.idcard__banner.is-set { cursor: grab; }
.idcard__banner.is-framing { cursor: grabbing; }
.idcard__banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%);
}
.idcard__prompt {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-press);
  opacity: 0.6;
}
.idcard__set {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  z-index: 2;
  background: var(--color-paper);
}

.idcard__body {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  padding: 0 var(--space-lg) var(--space-lg);
}
/* The logo rides up over the banner's lower edge. The ＋ is its sibling for
   the same reason the banner's button is: it must not compete with the drag. */
.idcard__logowrap {
  --logo-size: clamp(4.5rem, 13vw, 6.5rem);
  position: relative;
  flex: none;
  width: var(--logo-size);
  /* Against the top of the row, then pulled up half its own height so it
     breaks the banner's lower edge — the arrangement this card was asked for.
     The row aligns to its bottom, and under that the negative margin did
     nothing: the name column beside it is a few pixels taller, so the logo
     was pinned to the row's floor and sat just below the banner instead. */
  align-self: flex-start;
  margin-top: calc(var(--logo-size) / -2);
}
.idcard__logo {
  position: relative;
  width: 100%;
  height: var(--logo-size);
  border-radius: 20px;
  border: 4px solid var(--color-paper-2);
  background: var(--color-paper-3);
  display: grid;
  place-items: center;
  overflow: visible;
  touch-action: none;
}
.idcard__logo.is-set { cursor: grab; }
.idcard__logo.is-framing { cursor: grabbing; }
.idcard__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%);
  border-radius: 16px;
}
.idcard__initials {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-neutral);
}
.idcard__logo-edit {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 1;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 2px solid var(--color-paper-2);
  border-radius: 50%;
  cursor: pointer;
}
.idcard__who { flex: 1 1 12rem; min-width: 0; padding-top: var(--space-sm); }
.idcard__namelabel {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral);
  margin-bottom: 2px;
}
.idcard__name {
  width: 100%;
  max-width: 26rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  background: none;
  border: 0;
  border-bottom: 2px dashed var(--color-rule-2);
  border-radius: 0;
  padding: 2px 0;
}
.idcard__name:focus { outline: none; border-bottom-color: var(--color-accent); }
.idcard__who .meta { margin: var(--space-2xs) 0 0; }

@media (max-width: 40rem) {
  .idcard__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
  }
  /* Stacked, the main axis turns vertical — and `flex: 1 1 12rem`, written
     for the side-by-side layout where it means "take the rest of the row",
     then reads as "grow to fill the column". That left a stretch of empty
     card under the note, on a card that ends at the note. */
  .idcard__who { width: 100%; padding-top: 0; flex: 0 0 auto; }
}

/* A grid of production cards. Lived inline on Browse until the Indie Studio
   needed the same shape for past productions. */
.browse-grid {
  display: grid;
  /* min() so the column can give up its minimum on a narrow screen — at a
     large text setting 15rem is wider than a phone. */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-lg) var(--space-lg);
}

/* The picture inside an alert square is laid over its box rather than sizing
   it. As an ordinary flex child with an auto height it took the image's own
   height instead, which pushed the card past the square it is meant to be. */
.thin__shot { position: relative; overflow: hidden; }
.thin__shot img { position: absolute; inset: 0; }

/* ---------- the documents on a phase ----------
   A folder listing with a box beside each line. Every party ticks every one
   before the phase can move, so the count and who else has agreed are on the
   row rather than summarised somewhere else. */
.checklist { margin-top: var(--space-lg); }
.checklist__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.checklist__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.checklist__row:last-child { border-bottom: 0; }
.checklist__row.is-on { background: var(--color-paper-3); }
.checklist__row input[type="checkbox"] {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.checklist__row label {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: var(--space-xs);
  cursor: pointer;
}
.checklist__name { overflow-wrap: anywhere; }
.checklist__row .meta { flex: none; }
@media (max-width: 40rem) {
  .checklist__row { flex-wrap: wrap; }
  .checklist__row .meta { flex: 1 1 100%; padding-left: calc(1.1rem + var(--space-sm)); }
}

/* ---------- a switch that reads as a switch ----------
   A button whose label flips is a button; you have to read it to know where
   you stand. This is a track and a knob, so the state is the shape, and the
   word beside it says the same thing again for anyone who does not read
   shapes. Green and over to the right is on. */
.switchrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.switch {
  flex: none;
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  padding: 0;
  border: 2px solid var(--color-neutral);
  border-radius: 999px;
  background: var(--color-neutral);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-on-accent);
  transform: translate(0, -50%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] {
  background: var(--color-ok);
  border-color: var(--color-ok);
}
.switch[aria-checked="true"]::after { transform: translate(1.5rem, -50%); }
.switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.switch:disabled { opacity: 0.55; cursor: progress; }
.switchrow__state { font-weight: 700; }
.switchrow__state[data-on="true"]  { color: var(--color-ok); }
.switchrow__state[data-on="false"] { color: var(--color-neutral); }
/* Nobody should have to guess from a colour alone. */
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after { transition: none; }
}

/* ---------- finishing your profile ----------
   The one moment on Co Curate worth stopping for. A creator has just put
   themselves on the roster, and the page turns over to say so — the ground
   goes red, which is nowhere else on a signed-in page, so there is no
   mistaking it for another line of small print. Cream on deep red reads at
   8:1, and the yellow on it at 6.8:1. */
body.is-celebrating { overflow: hidden; }
.welldone {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--color-on-accent);
  background:
    radial-gradient(circle at 22% 18%, rgb(245 218 110 / 0.20) 0%, transparent 45%),
    radial-gradient(circle at 78% 82%, rgb(245 218 110 / 0.14) 0%, transparent 40%),
    #8E2411;
  animation: welldone-in var(--dur-slow, 320ms) var(--ease-out) both;
}
.welldone__crow {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.05;
  color: var(--color-orchid);
  margin: 0;
  text-wrap: balance;
}
.welldone__hold {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.welldone__note {
  font-size: var(--text-sm);
  opacity: 0.85;
  margin: var(--space-xs) 0 0;
  max-width: 44ch;
}
.welldone__acts {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-lg);
}
/* Both buttons are on red here rather than on paper. The primary one is
   normally red, which on this ground would be red on red, so it takes the
   yellow — ink on it reads at 13.5:1, and it stands off the ground at 6.8:1.
   The quiet one keeps its shape with an edge of its own. */
.welldone__acts .btn--primary {
  background: var(--color-orchid);
  border-color: var(--color-orchid);
  color: var(--color-ink);
}
.welldone__acts .btn--primary:hover { background: #FFD968; border-color: #FFD968; }
.welldone__acts .btn--quiet {
  color: var(--color-on-accent);
  border-color: rgb(251 246 216 / 0.5);
  background: transparent;
}
@keyframes welldone-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welldone { animation: none; }
}

/* The share-with-your-team box, under a phase's attachments. Set apart from
   the upload controls above it: putting a document up and showing it to
   somebody outside the commission are different acts. */
.attach__showroom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule-2);
}
.attach__showroom .field { margin-bottom: var(--space-sm); max-width: none; }
.attach__showroom input[readonly] {
  font-size: var(--text-sm);
  background: var(--color-paper-3);
}

/* An action item that has been answered. Same shape as the open one so the
   phase reads as one list, but quiet: it is a record, not a demand. */
.flag--settled { opacity: 0.72; border-left-color: var(--color-ok); }
.flag--settled .label { color: var(--color-ok); }

/* The dot on a project that wants something from you. Same red as an action
   item carries everywhere else, and the line under the title says which of
   the two kinds it is — a dot alone tells you there is news but not what. */
/* A row in a list that is waiting on you, on the same ground as the alert
   card it corresponds to. One row wanting something among four that do not
   should say so before the row is read. */
.project-row--urgent {
  background: var(--color-accent-wash);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.needsdot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  margin-left: 0.45em;
  vertical-align: 0.15em;
  border-radius: 50%;
  background: var(--color-accent);
}
.needsline {
  margin-top: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}

/* ---------- the founder ----------
   Her own site introduces her this way: the name at full size, the line of
   work on a bar, then the writing. Here the picture is floated rather than
   set in its own column, so the type sits beside it and then carries on
   underneath it — one column of reading that happens to have a picture in
   the corner, rather than two things standing next to each other. Which
   means it needs no separate arrangement on a phone: a float does the same
   thing at any width. */
/* The founder, in two halves.
 *
 * Her picture on the left with her name laid over it, the writing on the
 * right. The photo is faded rather than covered by a panel, so it reads as
 * the ground the type sits on instead of the two fighting for the same
 * space — at this opacity even the darkest part of the picture keeps ink
 * above 5:1 against it.
 */
.founderintro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-xl);
  align-items: center;
  overflow-wrap: break-word;
}
.founderintro__portrait { position: relative; display: grid; place-items: center; }
/* Full strength at the top, fading out at the foot.
 *
 * A flat 40% everywhere dimmed her face to hold type that was sitting across
 * it. Masked instead: the picture is itself where you look at her, and it
 * gives way toward the bottom, which is where the name goes. The type then
 * lands on the page rather than on the photograph — ink reads 14:1 on paper,
 * and 8.7 against the strongest thing left in the fade.
 */
.founderintro__portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* The fade keeps its shape and sits lower again, so she is whole past the
     waist before it starts giving way and the name is down at the foot of
     the frame rather than across her. Ink reads 7.75:1 against the darkest
     thing left under it, measured on the file rather than guessed at. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0 70%, rgb(0 0 0 / 0.32) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0 70%, rgb(0 0 0 / 0.32) 88%, transparent 100%);
}
.founderintro__over {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  text-align: center;
}
.founderintro__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
.founderintro__what {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.55em 0.9em;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(-0.6deg);
}
.founderintro__lede {
  margin-top: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-muted);
}
.founderintro__links { margin-top: var(--space-lg); }

@media (max-width: 46rem) {
  /* One column. On a phone the name and the red label sit above the picture
     instead of across the foot of it, so they are the heading and the photograph
     is left whole underneath. */
  .founderintro { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .founderintro__portrait { display: flex; flex-direction: column; align-items: center; }
  .founderintro__over { position: static; order: -1; width: 100%; margin-bottom: var(--space-md); }
  .founderintro__name { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .founderintro__lede { font-size: var(--text-base); }
}

/* ---------- one phase, one side's to answer ----------
   The same shape wherever it appears: the document, then the one question
   that moves it. Rounds behind the current one are kept and greyed — what
   was disputed is the record of why a phase took as long as it did. */
.pform__past {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-rule-2);
  opacity: 0.62;
}
.pform__waiting {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-sm);
  color: var(--color-neutral);
}
.pform__upload {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.pform__upload .field { width: 100%; max-width: none; margin-bottom: 0; }
.pform__signoff {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule-2);
}
.pform__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: var(--space-sm) var(--space-md) 0 0;
  cursor: pointer;
  font-weight: 600;
}
.pform__opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-accent); cursor: pointer; }
.pform__acts { margin-top: var(--space-md); }

/* A round that has been answered and replaced. Kept on the timeline as a
   passed item — it is the record of why the phase took as long as it did —
   and plainly not the one to act on. */
.tl-step.is-superseded { opacity: 0.55; }
.tl-step.is-superseded .tl-step__go { text-decoration: none; }

/* Later rounds sit under the phase they belong to, and read as smaller. */
.tl-step--sub {
  margin-left: var(--space-lg);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.tl-step--sub h3 { font-size: var(--text-base); }
.tl-step--sub p { font-size: var(--text-sm); }
@media (max-width: 40rem) {
  .tl-step--sub { margin-left: var(--space-md); }
}

/* A phase that is not the one you are on. It still reads — where the project
   has got to is the point of a timeline — but it is not a door, so it does
   not offer itself as one. */
/* Locked: not yours to open yet, or not yours any more.
 *
 * A paler red, so the one phase that is waiting on you is the one phase that
 * looks live. They were all the same red, and a row you cannot press that
 * looks exactly like the row you can is a row people press. */
.tl-step.is-shut {
  cursor: default;
  background: var(--accent-hover);
  opacity: 0.72;
}
.tl-step.is-shut:hover { transform: none; border-color: var(--color-rule); }
.tl-step.is-shut .tl-step__go { opacity: 0.7; }

/* ---------- the document archive ----------
   Shut until you want it, and a row per document rather than a picture per
   document: a small square of the thing, its name, and whether the phase it
   sits on has been agreed. Pressing the name opens it full size. */
.shelf > summary {
  cursor: pointer;
  list-style: none;
}
.shelf > summary::-webkit-details-marker { display: none; }
.shelf > summary::after {
  content: "▸";
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-neutral);
  transition: transform var(--dur-fast) var(--ease-out);
}
.shelf[open] > summary::after { transform: rotate(90deg); }
.shelf > summary:hover h3 { color: var(--color-accent); }

.filerow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--color-rule);
}
.filerow__icon {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--color-neutral);
}
.filerow__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filerow__icon--link { font-size: var(--text-sm); }
.filerow__name {
  flex: 1 1 auto; min-width: 0;
  text-align: left;
  background: none; border: 0; padding: 0;
  font: inherit;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.filerow__name:hover { color: var(--color-accent); }
/* Ticked or empty, and never half-ticked: what is agreed is the phase, so
   every document on it carries the same answer. */
.filerow__box {
  flex: none;
  width: 1.05rem; height: 1.05rem;
  display: grid; place-items: center;
  border: 2px solid var(--color-neutral);
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-on-accent);
}
.filerow__box.is-on { background: var(--color-ok); border-color: var(--color-ok); }
@media (max-width: 40rem) {
  .filerow .meta { display: none; }
}

/* A red bar that opens.
 *
 * A list that grows on its own cannot live open on a page — it becomes a
 * page of chips nobody scrolls past. So it is a shut bar with the first few
 * of its contents written on it, in the same red as every other thing on
 * Co Curate that means "press me", and what it holds is underneath.
 */
.pilldrop { margin-bottom: var(--space-md); }
.pilldrop__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  background: var(--accent-hover);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pilldrop__bar::-webkit-details-marker { display: none; }
.pilldrop__bar:hover { background: var(--accent-active); }
.pilldrop__bar:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.pilldrop__what {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pilldrop__arrow {
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 120ms ease;
}
.pilldrop[open] .pilldrop__arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.pilldrop__body {
  padding: var(--space-md) 0 0;
}
.pilldrop__body .chip-group { margin-bottom: var(--space-md); }
.navbar__face .miniface__i { font-size: 0.85rem; }

/* A filter row wearing the shape of a search bar.
 *
 * The chips it replaces were two lines of page above every scroll, read once
 * and skipped for ever after. This is one line, shut, in the shape everyone
 * already knows to press.
 */
.findbar { position: relative; margin: var(--space-md) 0; }
.findbar__field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background: var(--color-paper-2);
}
.findbar__field:focus-within {
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 2px var(--color-accent-wash);
}
.findbar__glass { width: 1.05rem; height: 1.05rem; flex: none; color: var(--color-neutral); }
.findbar__field input {
  flex: 1 1 auto;
  min-width: 6rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.findbar__field input:focus { outline: none; }
.findbar__field input::-webkit-search-cancel-button { display: none; }

/* The picked filter, worn in the field rather than typed into it — so the
   text you search and the kind you filter by stay two separate things. */
.findbar__token {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: var(--accent-hover);
  color: #fff;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.findbar__token:hover { background: var(--accent-active); }

.findbar__sug {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  padding: var(--space-2xs);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}
.findbar__opt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}
.findbar__opt:hover { background: var(--color-paper-3); }
.findbar__opt[aria-selected="true"] { background: var(--color-accent-wash); font-weight: 700; }
.findbar__n { color: var(--color-neutral); font-variant-numeric: tabular-nums; }

/* Development, laid out as rows rather than one pile.
 *
 * Workshops on one line, courses on the next — the shape anything with this
 * much in it ends up as. The card is the one everybody already reads: a wide
 * thumbnail, a title, and one line of who made it.
 */
.devrows { display: block; }
/* Rows, not sections. A rail elsewhere is one kind of thing among several on
   a page and keeps its room; here every row is the same kind of thing and the
   list is the whole page, so 5rem between each of them was a scroll between
   Workshops and Courses. */
.devrows .rail { padding-block: var(--space-sm); border-top: 0; }
.devrows .rail__head { margin-bottom: var(--space-xs); }
.devrows .rail__row { padding-bottom: var(--space-2xs); }
.devrows .rail + .rail { border-top: var(--rule-hair); }
.devrow { grid-auto-columns: 15rem; }
.devrow__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: inherit;
  text-decoration: none;
}
.devrow__card .tile { aspect-ratio: 16 / 9; margin-bottom: var(--space-2xs); }
.devrow__card h3 {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.devrow__card p { margin: 0; font-size: var(--text-xs); }
.devrow__why { color: var(--color-neutral); font-size: var(--text-xs); }
.devrow__card:hover h3 { color: var(--color-accent-deep); }

/* The signed-in home, tightened.
 *
 * Rows on this page are meant to be scrolled through, one after another —
 * and 5rem of air between each of them turned a stack of six into a page you
 * scroll for a while between things. Elsewhere a rail is one section among
 * several kinds of content and keeps its room; here it is the whole page.
 */
#home-rails .rail,
#home-rails-foot .rail { padding-block: var(--space-lg); }
#home-rails .rail__head,
#home-rails-foot .rail__head { margin-bottom: var(--space-sm); }
#home-rails .rail__lead { margin-bottom: var(--space-lg); }
#home-rails .rail__row { padding-bottom: var(--space-2xs); }
#home-rails .findbar { margin: var(--space-2xs) 0 var(--space-sm); }

/* Standing instructions, which are not a document.
 *
 * The same words on every commission, describing how the phase works. They
 * used to be drawn in the contract's bordered panel, which made a fixed
 * explanation look like a field somebody had filled in — and could fill in
 * again. No box, no border, nothing that offers itself for editing.
 */
.doc__how {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--color-rule-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.doc__how li + li { margin-top: var(--space-2xs); }

/* The way into a project, carrying how far into it you are.
 *
 * A flat red button said the same thing about a commission that had just
 * opened and one on its last phase. The filled part is Co Curate red — the
 * same red as every other primary button, so a progress button still reads
 * as one of them — and it runs to the fraction of phases both sides have
 * agreed. The track behind it is that red lifted toward the paper.
 *
 * The track cannot go lighter than this. On a commission early enough, the
 * label crosses the join and sits on the track, and #BD4D33 is the lightest
 * tint of the accent that still holds #FBF6D8 at 4.5:1 — 4.51. The fill
 * reads 5.82.
 */
.btn--progress {
  background-image: linear-gradient(to right,
    var(--color-accent) 0 var(--fill, 0%),
    #BD4D33 var(--fill, 0%) 100%);
  background-color: #BD4D33;
  border-color: transparent;
}
.btn--progress:hover {
  background-image: linear-gradient(to right,
    var(--color-accent-deep) 0 var(--fill, 0%),
    #AD4029 var(--fill, 0%) 100%);
  background-color: #AD4029;
}

/* Where you are, per craft.
 *
 * One bar a craft, and a craft has no bar until you finish something in it.
 * They fill slowly on purpose — thirty videos to a level, or five courses,
 * or two qualifications, or three delivered commissions — so the bar is
 * mostly track, and the track has to look like a thing that fills rather
 * than an empty box.
 */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-lg);
  /* Every bar the height of the tallest in its row, so the button at the
     foot of one is level with the button at the foot of the next. A craft
     with a longer name or a second line of numbers was pulling its own
     button out of line with the rest. */
  align-items: stretch;
  margin: 0 0 var(--space-xl);
}
.levels__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.levels__head h2 { margin: 0; }

.levelbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  height: 100%;
}
.levelbar__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.levelbar__row .levelbar__craft { flex: 1 1 auto; }
.levelbar__row .levelbar__lv { margin-left: auto; }
.levelbar__craft {
  font-weight: 700;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.levelbar__lv {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.levelbar__track {
  height: 10px;
  border-radius: 999px;
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  overflow: clip;
}
.levelbar__fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: var(--color-accent);
}
.levelbar__meta {
  font-size: var(--text-xs);
  color: var(--color-neutral);
  /* Two lines' worth whether it needs one or two, so every bar in a row is
     the same height and the tracks sit on the same line across the page. */
  min-height: 2.4em;
}

/* The card links out to the thing; the button that says you finished it is
   its sibling, so pressing it does not also open the course. */
.devrow__cell { display: flex; flex-direction: column; gap: var(--space-xs); }
.devrow__cell .devrow__card { flex: 1 1 auto; }
.donebtn {
  align-self: flex-start;
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}
.donebtn:hover { background: var(--color-paper-3); }
.donebtn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.donebtn:disabled { opacity: 0.5; cursor: wait; }

/* Light or dark, in the masthead.
 *
 * Two halves of one pill, so it says which view you are in rather than only
 * offering the other — the whole reason to spend masthead width on it. Red
 * for the half you are on, because red is what "selected" means everywhere
 * else here, and it keeps the control inside the palette instead of adding
 * a black to a site that has none.
 *
 * Desktop only. A phone masthead already wraps to two lines and this would
 * make it three, for a setting you change once — and once it is set, the
 * account carries it to the phone anyway.
 */
.themeswap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule-2);
}
.themeswap__half {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.themeswap__half svg { width: 0.95rem; height: 0.95rem; }
.themeswap__half:hover { color: var(--color-ink); }
.themeswap__half[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.themeswap__half:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* The word is for anything reading the page aloud; the glyph is for everyone
   else, and two labelled buttons in the masthead would be a third row. */
.themeswap__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The switch travels with the account, so it has to exist wherever the
 * account is opened.
 *
 * It was hidden below this width on purpose — it is a setting you make once,
 * at a desk. But the answer is carried to every device, and a phone that had
 * been handed "dark" had no way to hand it back: the one control that could
 * change it was the one control the phone did not get. Smaller here, not
 * absent. */
@media (max-width: 40rem) {
  .themeswap__seat { margin-left: auto; }
  .themeswap { transform: scale(0.85); transform-origin: right center; }
}

/* The blocks that name their own colour, in the darker view.
 *
 * Most of the site follows the tokens and needs nothing here. These three
 * were written as literal hexes because they are one-off grounds — a yellow
 * band, a yellow profile card, the border on an urgent card — and a literal
 * yellow stays yellow when the lights go out. Same role, dark ground: cream
 * on #33280C is 12.71:1, and the band keeps its own warmth rather than
 * turning into another panel.
 */
:root[data-theme="dark"] .page-head--banner {
  background: #33280C;
  border-color: #4E3D14;
}
:root[data-theme="dark"] .page-head--banner h1,
:root[data-theme="dark"] .page-head--banner p { color: #F7F0DA; }
:root[data-theme="dark"] .page-head--banner a { color: #E0B457; }

:root[data-theme="dark"] [data-page="profile"] .cover {
  background: #33280C;
  border-color: #4E3D14;
}

:root[data-theme="dark"] .thin--urgent { border-color: #5E2C20; }
:root[data-theme="dark"] .project-row--urgent { border-color: #5E2C20; }

/* The way out of a rail is the widest thing in its header on a phone, and it
   was the only place that shape appeared. It is the same button everywhere
   now — a rail is a row you scroll, and the way out of it should not be a
   pill you hunt for at the end of the heading. */
.rail__head .rail__more--wide {
  flex: 1 1 100%;
  justify-content: center;
}

/* The dashboard's note, and the way out of it.
 *
 * It explains the page you are on, which is worth one reading — so it can be
 * closed, and it stays closed on the account rather than in this browser.
 * Hidden before the first paint by the same script that carries the theme:
 * appearing for a frame and then vanishing is a worse answer than having no
 * dismiss button at all.
 */
:root[data-guide="off"] .page-head--banner { display: none; }

.page-head--banner.has-x { padding-left: calc(var(--space-xl) + 2.6rem); }
/* A control, not a hint. It was a bare glyph the size of the body text and
   read as punctuation; it is a ringed target now, at the size a thing you
   are meant to press should be. */
.guide-x {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: #5C1608;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.guide-x:hover { background: #5C1608; color: #F7E9B4; }
.guide-x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:root[data-theme="dark"] .guide-x { color: #F7F0DA; }
:root[data-theme="dark"] .guide-x:hover { background: #F7F0DA; color: #33280C; }

@media (max-width: 40rem) {
  .page-head--banner.has-x { padding-left: calc(var(--space-lg) + 2.4rem); }
  .guide-x { left: var(--space-xs); top: var(--space-xs); }
}

/* The crop control, in the words rather than on the picture.
 *
 * It sat on the cover, which is the one place it cannot: the cover is small,
 * it is already carrying a New pill and a status mark, and a chip on top of
 * a photograph covers the thing you are trying to frame.
 */
.cropchip {
  /* A control you want once and read never. No pill, no border, no width of
     its own — a quiet word under the title, which is all it needs to be. */
  align-self: flex-start;
  display: inline-block;
  width: max-content;
  margin-top: var(--space-2xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-neutral);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 3px;
  opacity: 0.75;
  cursor: pointer;
}
.cropchip:hover { color: var(--color-ink); text-decoration-color: currentColor; opacity: 1; }
.cropchip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.thin__words .cropchip { margin-top: 2px; }

/* Fields that keep their own white, in the darker view.
 *
 * A commission form and a project sheet put white fields on a red panel —
 * that white is the point of them, and it does not follow the theme. So the
 * type in them must not either. Swept as a group rather than named one rule
 * at a time, because the next field added to one of these panels will be
 * white too and should not have to remember this.
 */
:root[data-theme="dark"] .cform input,
:root[data-theme="dark"] .cform textarea,
:root[data-theme="dark"] .cform select,
:root[data-theme="dark"] .cform__paste,
:root[data-theme="dark"] .cform__chip[aria-pressed="true"],
:root[data-theme="dark"] .cform .option-slab[aria-pressed="true"],
:root[data-theme="dark"] .sheet__panel--form input,
:root[data-theme="dark"] .sheet__panel--form textarea,
:root[data-theme="dark"] .sheet__panel--form select,
:root[data-theme="dark"] .sheet__panel--form .doc__text,
:root[data-theme="dark"] .sheet__panel--form .chip[aria-pressed="true"] {
  color: var(--ink-on-light);
}
:root[data-theme="dark"] .cform input::placeholder,
:root[data-theme="dark"] .cform textarea::placeholder,
:root[data-theme="dark"] .sheet__panel--form input::placeholder,
:root[data-theme="dark"] .sheet__panel--form textarea::placeholder {
  color: #7A4433;
}
/* The pressed state on those panels is a white button with red type; in the
   dark that red went light and vanished into the white. */
:root[data-theme="dark"] .sheet__panel--form .btn--primary:hover {
  color: #741B0B;
}

/* Status marks keep their brightness and change their type.
 *
 * Green, amber and red are states rather than surfaces, so they get lighter
 * in the dark view the way every other colour does — which leaves white type
 * on a light green pill at 2:1. The mark stays bright and the writing on it
 * goes dark instead, which is the right way round: the colour is the signal.
 */
:root[data-theme="dark"] .tile__tag--live { color: #10281E; }
:root[data-theme="dark"] .checks__item.is-done .checks__mark,
:root[data-theme="dark"] .filerow__box.is-on { color: #10281E; }

/* The validation line on a red panel.
 *
 * The dot yellow reads 4.92 on the light red and 4.01 on the lighter one the
 * dark view uses — and a message you only ever see when something is wrong
 * is the last place to be a third of a point short. Paler, on that ground
 * only: 4.53.
 */
:root[data-theme="dark"] .error-msg { color: #FFEFC4; }

/* Your level, beside the wordmark, in the wordmark's own letters.
 *
 * The same face, the same weight, the same ember gradient clipped to the
 * type — smaller, so it reads as a note on the name rather than a second
 * name. The crafts underneath swap the way the polaroids on her own site
 * do: half a second, the same easing, a tilt going out and coming in.
 */
.banner__lvl {
  /* A badge, worn the way a status is worn: a ring holding the number and
     the craft on one line. The ring is what gives it an edge on the red so
     it does not float, and one line means the banner is never taller than
     the wordmark in it.

     Centre-right: pushed off the wordmark, then held in from the frame, so
     it sits in the right-hand half rather than against the edge. */
  margin-left: auto;
  margin-right: clamp(0.5rem, 7vw, 5.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border: 1.5px solid rgb(251 246 216 / 0.45);
  border-radius: 999px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.banner__lvl:hover {
  border-color: var(--color-orchid);
  background: rgb(0 0 0 / 0.12);
  text-decoration: none;
}
.banner__lvl:focus-visible { outline: 2px solid var(--color-orchid); outline-offset: 3px; }
.banner__lvl b,
.banner__craft {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ink-on-light);
  background: var(--gradient-ember);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.banner__lvl b { font-size: clamp(0.95rem, 2.1vw, 1.35rem); }
/* The commissioner's: one word, at the number's size so it reads as a badge
   and not as a caption that lost its badge. It says what you are rather than
   offering somewhere to go, so it does not behave like a link. */
.banner__lvl--who { cursor: default; }
.banner__lvl--who:hover { border-color: rgb(251 246 216 / 0.45); background: none; }
.banner__lvl--who .banner__craft { font-size: clamp(0.95rem, 2.1vw, 1.35rem); letter-spacing: -0.03em; }
.banner__craft {
  font-size: clamp(0.66rem, 1.35vw, 0.9rem);
  letter-spacing: 0.01em;
  /* The words are the thing that changes length, so they are what gives way
     when there is not enough room for them. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The polaroid's own move: rotate, lift, and a touch of scale. */
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 0.38s ease;
  transform-origin: 100% 50%;
}
.banner__craft.is-out { opacity: 0; transform: rotate(-7deg) translateY(-0.35em) scale(0.87); }
.banner__craft.is-in  { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .banner__lvl b, .banner__craft { background: none; -webkit-text-fill-color: currentColor; color: #F2C14E; }
}
@media (max-width: 40rem) {
  /* On a phone it comes in closer and tighter, but it stays: it is the one
     thing on the front door that is about you rather than about the site. */
  .banner__lvl {
    margin-right: var(--space-2xs);
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-width: 1px;
  }
  .banner__lvl b { font-size: 0.82rem; }
  .banner__craft { font-size: 0.58rem; }
}

/* The way from a bar to the thing that moves it.
 *
 * A bar that shows how far off you are and does not say what to do about it
 * is a scoreboard. This is a real button — filled, at button size — because
 * it is the action the whole section exists to prompt.
 */
/* The way to move a bar, as a mark.
 *
 * It sits on the craft's own line beside the level, so it costs the card no
 * height — a row of buttons under six bars was more furniture than the bars.
 * A ring rather than a filled pill, so six of them down a page read as marks
 * and not as six things demanding to be pressed.
 */
.levelbar__go {
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent-deep);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.levelbar__go:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.levelbar__go:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Renaming a project, from inside it.
 *
 * The pencil rides the title rather than sitting under it, because the thing
 * it edits is the title. Quiet until the heading is hovered — a name is not
 * something you change often, and a permanent button beside it would suggest
 * otherwise.
 */
.titlepen {
  margin-left: 0.4em;
  vertical-align: 0.12em;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--color-neutral);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
h1:hover > .titlepen, .titlepen:hover, .titlepen:focus-visible { opacity: 1; }
.titlepen:hover { background: var(--color-paper-3); color: var(--color-ink); }
.titlepen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.titlefield {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

/* The rest of the crafts, behind a press.
 *
 * Six bars at the top of Development is a wall to scroll past before
 * reaching the thing that fills them. One shows — the one you moved most
 * recently, which is the one you are working on — and this opens the others.
 */
.levels__more {
  flex: none;
  margin-left: auto;
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-deep);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.levels__more:hover { background: var(--color-paper-3); }
.levels__more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.levels--rest { margin-top: calc(var(--space-lg) * -1); }

/* Asking for a change to work that is already up.
 *
 * The ask sits under the card it is about rather than inside it — the card
 * is the production as everyone else sees it, and a control on it would be
 * the one thing about that card that is not what everyone else sees.
 */
.workcell { display: flex; flex-direction: column; gap: var(--space-xs); }
.workask { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
.workask__btn {
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--color-rule-2);
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.workask__btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.workask__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.workask__open {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-deep);
}

/* A question that knows its own answer.
 *
 * Demo accounts only. The dotted edge says this one fills itself when you
 * press it — enough to see on camera and to aim at, without looking like a
 * control the product actually has.
 */
.demoask {
  position: relative;
  border-radius: var(--radius-sm);
  outline: 1.5px dashed var(--color-rule-2);
  outline-offset: 4px;
  cursor: pointer;
}
.demoask:hover { outline-color: var(--color-accent); }
.is-demofilled {
  animation: demofill 0.9s var(--ease-out);
}
@keyframes demofill {
  0%   { background: var(--color-orchid); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .is-demofilled { animation: none; }
}

/* Coming back, rather than arriving.
 *
 * The two file cards are for somebody who has never been here. The way back
 * in was only in the masthead, which is the one place a returning person
 * does not look — they look at the page.
 */
.hero__signin { margin: var(--space-md) 0 0; font-size: var(--text-sm); }
.hero__signin a { color: var(--color-ink); text-underline-offset: 3px; }
.hero__signin a:hover { color: var(--color-accent-deep); }

/* The standing note above a form that answers itself.
 *
 * The walkthrough is filmed, so the rule of the mode has to be legible in
 * the frame rather than remembered: every answer is set, nothing is typed.
 */
.demoask__note {
  display: block;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.demoask__note strong {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.demoask__note span {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.85rem;
  color: var(--color-ink);
}
/* Nothing on this form is typed into, so it should not look like it is. */
.demoask input[readonly] { cursor: pointer; }

/* ---------- the walkthrough ----------
 *
 * A mode her own session is in, so it announces itself the way the logged-out
 * preview does — same bar, same place — and carries the way out with it.
 */
/* The way in, on the admin desk. It is the first thing on that tab and it
 * should read that way — the accounts underneath it are the older tool. */
.advice--lead { border-left: 4px solid var(--color-accent); }
.advice--lead .step-actions { margin-top: var(--space-md); }

.demobar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-rule);
}
.demobar strong { font-weight: 700; }
.demobar .btn {
  min-height: 30px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-on-accent);
  border-color: var(--color-on-accent);
}

/* A seat's own terms, at the top of their timeline. The one thing they
 * agree, so it is the one thing on the page with a primary button on it. */
.myseat .btn { margin-top: var(--space-xs); }
/* Somebody asked and not yet arrived. Dashed, because the seat is real and
 * the person in it is not there yet. */
.seat--pending { border-style: dashed; border-left-style: solid; border-left-color: var(--color-rule-2); cursor: default; }
.seat--pending:hover { background: var(--color-paper-2); }
.seat--pending .btn { justify-self: start; margin-top: var(--space-2xs); font-size: var(--text-sm); }
.myseat .meta { color: var(--on-accent-2); }

/* ---------- the seats under a commission ----------
 *
 * The timeline above is a list of phases; this is a list of people, and the
 * two do not nest. Paper rather than the timeline's red, on purpose: the
 * commission is the rail above, and these are what feeds it.
 *
 * Each tile is its own column and its panel opens inside that column, so an
 * expanded seat stays attached to the person it is about rather than
 * appearing under the row and belonging to none of them.
 */
.seats { margin: var(--space-xl) 0 var(--space-lg); }
.seats__head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.seats__head h3 { margin: 0; font-size: var(--text-md); }
.seats__head .meta { margin-left: auto; }
.seats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
               gap: var(--space-sm); align-items: start; }
.seatcell { display: grid; gap: var(--space-2xs); min-width: 0; }

.seat {
  text-align: left; font: inherit; color: var(--ink-on-light); cursor: pointer; width: 100%;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--seat-hue, var(--color-accent));
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: grid; gap: 0.35rem;
}
.seat:hover { background: var(--color-paper-3); }
.seat:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seat__who { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.seat__who strong { font-size: var(--text-base); }
.seat__craft { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral); }
.seat__part { display: block; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.seat__state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); font-weight: 600; }
.seat__state::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; flex: none; }
/* Semantic, and separate from the seat's own hue: the hue says which person,
 * these say what is happening. */
.seat__state--sent     { color: var(--color-accent-deep); }
.seat__state--returned { color: #8A5A06; }
.seat__state--taken    { color: var(--color-ok); }
.seat__state--waiting  { color: var(--color-neutral); }

.seatopen {
  border: 1px solid var(--color-rule-2);
  border-left: 3px solid var(--seat-hue, var(--color-accent));
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  color: var(--ink-on-light);
  padding: var(--space-sm) var(--space-md);
  display: grid; gap: var(--space-2xs);
}
.seatopen[hidden] { display: none; }
.seatopen .label { color: var(--color-neutral); margin-top: var(--space-2xs); }
.seatopen .meta { color: var(--color-neutral); }
.seatopen__shut { justify-self: end; background: none; border: 0; font: inherit;
                  font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; text-decoration: underline; }
/* Stacked, not two columns. The rail lives in the page's left column and a
 * tile is about 300px wide — a label beside its value there leaves the value
 * three words a line. */
.seatterms { margin: 0; font-size: var(--text-sm); }
.seatterms dt { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--color-neutral); margin-top: var(--space-2xs); }
.seatterms dd { margin: 0; color: var(--ink-on-light); line-height: 1.4; }

/* The one loud thing in the panel: the round sitting unanswered is what a
 * director opens a seat for, so it is boxed and everything else is quiet. */
.seatneeds { border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
             padding: var(--space-sm) var(--space-md); margin: var(--space-xs) 0; background: var(--color-paper); }
.seatneeds .label { color: var(--color-accent-deep); margin-top: 0; }
.seatdoc { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
           padding: 0.35rem 0; font-size: var(--text-sm); }
.seatdoc a { color: var(--color-accent-deep); }
.seatacts { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-2xs); }
.seatacts .btn { font-size: var(--text-sm); }

.seatthread { display: grid; gap: var(--space-2xs); }
.seatmsg { font-size: var(--text-sm); line-height: 1.45; padding-left: var(--space-sm);
           border-left: 2px solid var(--color-rule-2); }
.seatmsg--mine { border-left-color: var(--color-accent); }
.seatmsg b { font-weight: 600; }
.seatmsg .meta { margin-left: 0.3rem; }
.seatmsg p { margin: 0.1rem 0 0; color: var(--color-muted); }
.seatwrite { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-2xs); }
.seatwrite input { flex: 1 1 10rem; min-width: 0; }
.seatpast { display: grid; gap: 0.1rem; }
.seatpast__note { padding-left: var(--space-sm); border-left: 2px solid var(--color-rule-2); margin: 0 0 var(--space-2xs); }

/* Switching the chair you are recording into one of its other shapes.
 *
 * A set, not a row of separate buttons: they sit in one pill so the group
 * reads as one control with a state, and the one that is on is filled. Cream
 * on the bar's red for the quiet state and red on cream for the live one,
 * which is the same inversion every pressed chip on the site uses. */
/* A commission nobody has taken yet. Not a phase — there are no phases —
 * so it does not wear the timeline row's red; it is a note on the cream
 * saying what is true, with the one press that changes it. */
.tl-pending {
  list-style: none;
  padding: var(--space-md);
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.tl-pending .label { display: block; margin-bottom: var(--space-2xs); color: var(--color-accent-deep); }
.tl-pending h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-md); }
.tl-pending p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.demobar__views {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 3px 3px 3px var(--space-xs);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
}
.demobar__viewlabel {
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85; margin-right: var(--space-2xs);
}
.demobar__view {
  min-height: 24px;
  padding: 2px var(--space-sm);
  font: inherit; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-on-accent);
  background: transparent;
  border: 0; border-radius: 999px;
  cursor: pointer;
}
.demobar__view:hover { background: rgb(255 255 255 / 0.15); }
.demobar__view.is-on { background: var(--color-on-accent); color: var(--color-accent-press); }
.demobar__view:focus-visible { outline: 2px solid var(--color-on-accent); outline-offset: 2px; }

/* The one door that opens on the front page, and what a press on any of the
 * others does instead: point back at it. */
/* On the red hero the dashed rule the rest of the form uses disappears, so
 * this one is drawn in the cream that ground is built for, and it breathes so
 * the eye lands on it without anything having to say so. */
.demoask--way {
  outline: 3px dashed var(--color-on-accent);
  outline-offset: 6px;
  animation: demobreathe 2.4s var(--ease-out) infinite;
}
.demoask--way.is-nudged { animation: demonudge 0.6s var(--ease-out) 2; }
@keyframes demobreathe {
  0%, 100% { outline-offset: 6px; }
  50% { outline-offset: 10px; }
}
@keyframes demonudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

/* The piece behind a craft. A row that says "Illustrator" is a claim; the
 * still next to it is the thing the claim is about. */
/* The row is a three-column grid; adding the still makes it four so the
 * columns keep their proportions instead of the text losing its width. */
.project-row:has(> .demoshot) { grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr) auto; }
.demoshot { margin: 0; width: 6.5rem; flex: 0 0 auto; }
.demoshot img {
  display: block;
  width: 100%; height: 6.5rem;
  object-fit: cover;
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
}
/* Media with no production named against it is a file rather than evidence. */
.demoshot figcaption {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--color-muted);
}

.demoask--done { position: relative; }

/* Nothing under the target roles until one has been picked. The heading and
 * the note would otherwise sit over an empty space, announcing a list that is
 * not there. */
.step-panel.is-waiting .explore__head,
.step-panel.is-waiting #explore-feed { display: none; }
.step-panel.is-waiting #explore-note::before {
  content: 'Pick a role above. The training that gets you there appears here.';
  display: block;
  margin-bottom: var(--space-2xs);
  font-weight: 700;
  color: var(--color-accent-deep);
}

/* ---------- work samples, six slots ----------
 *
 * The size of the job, said by the shape of the thing: six squares, the
 * filled ones and the empty ones the same size, each with a line of its own
 * for what it is. A single Upload button said none of that, and people added
 * one sample and moved on.
 */
/* Superseded below. Kept only for .is-busy, which nothing else declares —
 * the width and the columns live with the rest of the tile styles now, and
 * this rule's max-width was quietly pinning the grid to half its panel long
 * after the rule that set the columns had been replaced. */
#sample-grid.is-busy { opacity: 0.6; pointer-events: none; }
.slot {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.slot--empty {
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px dashed var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  font: inherit;
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-sm);
}
.slot--empty:hover { border-color: var(--color-accent); background: var(--color-paper-3); }
.slot__plus { font-size: 1.75rem; line-height: 1; color: var(--color-accent); }
.slot__say { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.slot__n { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.slot--full img, .slot__file {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.slot__file {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-sm);
  font-size: var(--text-sm);
  text-align: center;
  overflow: hidden;
}
.slot--full figcaption {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-muted);
}
/* Nothing is edited in the walkthrough, so the slots do not offer it. */
#sample-grid.is-demo .slot__x { display: none; }
.slot__x {
  position: absolute;
  top: var(--space-2xs); right: var(--space-2xs);
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.demoshot__card { margin: 0; }
.demoshot__card img {
  width: 100%;
  display: block;
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
}
.demoshot__card figcaption { display: block; margin-top: var(--space-2xs); }

/* The end of it. Over everything, held, then gone on the next press. */
.curtain {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-on-accent);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.curtain.is-on { opacity: 1; }
.curtain__in { max-width: 34rem; }
.curtain h2 {
  margin: var(--space-sm) 0;
  font-size: clamp(2rem, 7vw, 3.75rem);
  line-height: 1.05;
  color: var(--color-on-accent);
}
.curtain p { color: var(--color-on-accent); }
/* The quiet lines take the token built for a red ground rather than a faded
 * cream: an opacity that reads as "softer" on the light theme reads as
 * illegible on the dark one, and these are small and set in capitals. */
.curtain__label, .curtain__hint {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent-2);
}
.curtain__hint { margin-top: var(--space-lg); }

/* The one curtain that asks something rather than announcing it. It has
   buttons, so a press anywhere is not an answer and the whole sheet stops
   behaving like one big button. */
.curtain--ask { cursor: default; }
.curtain__choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}
.curtain__choice .btn--quiet {
  color: var(--color-on-accent);
  border-color: var(--color-on-accent);
}
/* The empty frame, on the red: a ring the size of a face with a plus in it,
   which is the one shape on the page that reads as "put something here". */
.facering {
  display: grid;
  place-items: center;
  width: clamp(8rem, 26vw, 11rem);
  aspect-ratio: 1;
  margin: var(--space-md) auto 0;
  padding: 0;
  overflow: clip;
  border: 2px dashed rgb(251 246 216 / 0.55);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.1);
  color: var(--color-on-accent);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.facering:hover { border-color: var(--color-on-accent); transform: scale(1.02); }
.facering__plus { font-size: 2.5rem; line-height: 1; opacity: 0.8; }
.facering img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facering.is-on { border-style: solid; border-color: var(--color-on-accent); background: none; }
/* Buffering, so an upload that lands instantly still reads as an upload. */
.facering.is-loading { cursor: progress; animation: facespin 1s linear infinite; }
@keyframes facespin {
  to { border-color: rgb(251 246 216 / 0.55) rgb(251 246 216 / 0.15)
                     rgb(251 246 216 / 0.55) rgb(251 246 216 / 0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .facering.is-loading { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { transition: none; }
  .demoask--way, .demoask--way.is-nudged, .demotap { animation: none; }
}

/* ---------- the profile, read back ----------
 *
 * The last step of the sign-up used to be a paragraph about verification.
 * Everybody on this form arrived on an invitation, so the vouching is already
 * done and the thing worth showing at the end is the profile the answers just
 * built — set like a resume, with the work in it, and no portrait: this is
 * the practice rather than the person.
 */
.resume {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border: var(--rule-hair);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.resume__head h3 { margin: 0; font-size: var(--text-lg); }
.resume__what {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.resume__head p { margin: var(--space-xs) 0 0; max-width: 44ch; }
.resume__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair);
}
@media (max-width: 34rem) { .resume__row { grid-template-columns: 1fr; gap: var(--space-2xs); } }
.resume__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.resume__crafts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.resume__crafts li { display: flex; gap: var(--space-sm); align-items: center; }
.resume__crafts img {
  width: 3rem; height: 3rem;
  object-fit: cover;
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.resume__crafts strong { display: block; }
.resume__crafts span { display: block; font-size: 0.75rem; line-height: 1.3; color: var(--color-muted); }
.resume__work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.resume__work figure { margin: 0; }
.resume__work img {
  display: block;
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
}
.resume__work figcaption { margin-top: var(--space-2xs); font-size: 0.7rem; line-height: 1.3; color: var(--color-muted); }

/* ---------- the photo that is not there yet ----------
 *
 * The second half of the walkthrough opens on a profile made a minute ago,
 * and the first thing anybody does with one is put a face on it. The frame
 * waits, visibly: a dashed ring with a plus in it, then a beat of spinning,
 * then the picture. An upload that lands instantly does not read as one.
 */
.miniface--empty {
  cursor: pointer;
  border: 2px dashed var(--color-accent);
  background: var(--color-paper-3);
}
.miniface__add {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}
.miniface--empty:hover { background: var(--color-overlay); }
.miniface.is-loading { border-style: solid; }
.miniface__spin {
  display: block;
  width: 45%; height: 45%;
  margin: 27.5%;
  border-radius: 50%;
  border: 2px solid var(--on-accent-2);
  border-top-color: transparent;
  animation: minispin 0.8s linear infinite;
}
@keyframes minispin { to { transform: rotate(360deg); } }
.miniface.is-arrived { animation: cc-fade-up 420ms var(--ease-out) both; }

/* The level badge, beside the rail it is a reading of as well as on the
 * banner. On the cream ground it takes the ink the rest of the row uses. */
/* The badge beside Development, on the cream. Bigger than the banner's, on
 * the heading's own line, and in the red rather than a hairline outline —
 * a reading of the rail should carry the weight of the rail's own title. */
.banner__lvl--rail {
  position: static;
  margin-left: var(--space-sm);
  align-self: center;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  font-size: 1rem;
}
.banner__lvl--rail b {
  font-size: 1.35rem;
  color: var(--color-on-accent);
  -webkit-text-fill-color: var(--color-on-accent);
  background: none;
}
.banner__lvl--rail .banner__craft {
  font-size: 0.85rem;
  color: var(--color-on-accent);
  -webkit-text-fill-color: var(--color-on-accent);
  background: none;
}
.banner__lvl--rail:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) {
  .miniface__spin { animation: none; }
  .miniface.is-arrived { animation: none; }
}

/* ---------- the join form, on the red ----------
 *
 * The same panel the commissioner's brief is written on. It was cream, which
 * made the two halves of the product look like two products; a co-curator
 * filling this in and a commissioner filling in a brief are doing the same
 * thing from opposite sides, and the form should say so.
 */
#join-wizard.cform { color: #FFFFFF; }
#join-wizard h2, #join-wizard h3, #join-wizard h4, #join-wizard label { color: #FFFFFF; }
#join-wizard p, #join-wizard .hint, #join-wizard .meta, #join-wizard dd { color: var(--on-accent-2); }
#join-wizard .stepper { color: var(--on-accent-2); }
#join-wizard .stepper li[aria-current] { color: #FFFFFF; }
#join-wizard input[type="text"],
#join-wizard input[type="email"],
#join-wizard input[type="url"],
#join-wizard textarea {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-on-light);
  background: #FFFFFF;
}
#join-wizard input::placeholder { color: #6B5D52; }
#join-wizard .chip {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.5);
  color: #FFFFFF;
}
#join-wizard .chip[aria-pressed="true"] {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-accent-deep);
  font-weight: 700;
}
#join-wizard .btn { border-color: #FFFFFF; color: #FFFFFF; }
#join-wizard .btn--primary { background: #FFFFFF; color: var(--color-accent-deep); border-color: #FFFFFF; }
#join-wizard .btn[disabled] { opacity: 0.45; }
#join-wizard .demoask__note { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.4); }
#join-wizard .demoask__note strong, #join-wizard .demoask__note span { color: #FFFFFF; }
#join-wizard .demoask { outline-color: rgb(255 255 255 / 0.7); }

/* Three ways to answer, not two. On the red the slabs take a deeper red and
 * white letters so they read as objects on the panel rather than holes in it. */
.option-slabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .option-slabs--three { grid-template-columns: 1fr; } }
#join-wizard .option-slab {
  background: var(--color-accent-press);
  border: 2px solid rgb(255 255 255 / 0.35);
  color: #FFFFFF;
}
#join-wizard .option-slab h3, #join-wizard .option-slab p, #join-wizard .option-slab li { color: #FFFFFF; }
#join-wizard .option-slab ul { color: rgb(255 255 255 / 0.85); }
#join-wizard .option-slab:hover { border-color: #FFFFFF; }
#join-wizard .option-slab[aria-pressed="true"] {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
#join-wizard .option-slab[aria-pressed="true"] h3,
#join-wizard .option-slab[aria-pressed="true"] p,
#join-wizard .option-slab[aria-pressed="true"] li { color: var(--ink-on-light); }

/* ---------- a piece of work, and the craft it proves ----------
 *
 * One tile carries both. Closed it is a square in a grid of six; pressed it
 * opens out into the questions that belong to that piece, and closes again
 * with the answers on its face.
 */
#sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (max-width: 44rem) { #sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#sample-grid.is-open { grid-template-columns: 1fr; }
.slot {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-align: left;
  font: inherit;
}
.slot--empty, .slot--full {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}
.slot--empty {
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  /* The earlier rule made this a square. A square with a 13rem minimum
   * height is a box with a 13rem minimum width — the ratio transfers the
   * minimum across — and on a phone that is wider than half the grid, so the
   * tiles overlapped. The column sets the width; the height follows below. */
  aspect-ratio: auto;
  min-width: 0;
  border: 2px dashed rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  text-align: center;
}
@media (max-width: 44rem) {
  .slot--empty { min-height: 0; aspect-ratio: 1; }
}
.slot--empty:hover { background: rgb(255 255 255 / 0.18); border-color: #FFFFFF; }
.slot__plus { font-size: 2rem; line-height: 1; }
.slot__say { font-size: var(--text-sm); font-weight: 700; }
.slot__n { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.slot--full {
  border: 2px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.1);
  color: #FFFFFF;
}
.slot--full:hover { border-color: #FFFFFF; }
.slot--full > img, .slot__file {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.15);
}
.slot__file { display: grid; place-items: center; padding: var(--space-sm); font-size: var(--text-sm); }
.slot__role { font-size: var(--text-md); font-weight: 700; line-height: 1.1; }
.slot__title { font-size: var(--text-sm); }
.slot__skills { font-size: 0.75rem; line-height: 1.35; color: var(--on-accent-2); }
.slot__edit {
  align-self: flex-start;
  margin-top: var(--space-2xs);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: #FFFFFF;
}

/* Opened out. */
.slot--open {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 2px solid #FFFFFF;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.1);
}
@media (max-width: 44rem) { .slot--open { grid-template-columns: 1fr; } }
.slotform__shot {
  display: grid;
  place-items: center;
  gap: var(--space-2xs);
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px dashed rgb(255 255 255 / 0.6);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}
.slotform__shot img { width: 100%; height: 100%; object-fit: cover; }
.slotform .field { margin-bottom: var(--space-md); }
.slotform .field--ai {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.bullets { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.bullet {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.4rem 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-accent-deep);
  background: #FFFFFF;
}
.bullet--ai { background: var(--color-signal, #FFD34D); color: var(--ink-on-light); }
.bullet__x {
  border: 0; background: none; cursor: pointer;
  font-size: 0.7rem; line-height: 1; color: inherit; padding: 0.15rem;
}

/* ---------- noted ---------- */
.noted {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink-on-light);
}
.noted strong { display: block; font-size: var(--text-md); color: var(--color-accent-deep); }
.noted span { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); }

/* ---------- software, and what you can do in it ---------- */
.toolset {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.toolset h3 { margin: 0 0 var(--space-2xs); }

/* ---------- the dials ----------
 *
 * Two thumbs on one track where the answer is a range, one where it is a
 * position. The ends of the bar say what the ends mean, so it reads without
 * a legend.
 */
.termset {
  margin-top: var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.termset h3 { margin: 0 0 var(--space-md); }
.dial { margin-bottom: var(--space-lg); }
.dial__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.dial__label { font-size: var(--text-sm); font-weight: 600; }
.dial__read { font-size: var(--text-sm); font-weight: 700; color: #FFFFFF; }
.dial__track { position: relative; display: grid; gap: 0.35rem; margin-top: var(--space-2xs); }
.dial__track input[type="range"] {
  width: 100%;
  appearance: none;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.3);
  cursor: pointer;
}
.dial__track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-deep);
  cursor: grab;
}
.dial__track input[type="range"]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-deep);
  cursor: grab;
}
.dial__ends {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: 0.72rem;
  color: var(--on-accent-2);
}

/* ---------- the arrow on the front door ---------- */
.demoask--way { position: relative; overflow: visible; }
span.demopoint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
  font-size: 2.75rem;
  line-height: 1;
  color: #FFD34D;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
  animation: demodrop 1.1s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes demodrop {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(4px); }
}

/* The arrow is the arrow. A button that carries the same class is the walkthrough's "press this next"
 * button: a normal button at the normal size, in the flow of the page, ringed so it reads as the next
 * press. It used to inherit the arrow's size and float, so on a phone it came up as a giant cropped
 * line of yellow text over the phase. */
button.demopoint {
  white-space: normal;
  max-width: 100%;
  animation: demoring 1.6s ease-out infinite;
}
@keyframes demoring {
  0% { box-shadow: 0 0 0 0 rgb(255 211 77 / 0.85); }
  70%, 100% { box-shadow: 0 0 0 0.6rem rgb(255 211 77 / 0); }
}
@media (prefers-reduced-motion: reduce) { button.demopoint { animation: none; box-shadow: 0 0 0 3px #FFD34D; } }

@media (prefers-reduced-motion: reduce) { span.demopoint { animation: none; } }

/* ---------- the profile as a piece of paper ----------
 *
 * Cut-out headings, an ID card with the portrait on it, and the work itself
 * where a resume would put sentences about the work. Co Curate's own colours,
 * so it reads as this site's document rather than a template.
 */
.cvsheet {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--ink-on-light);
}
.cvsheet h4, .cvsheet p, .cvsheet span, .cvsheet strong, .cvsheet dd, .cvsheet dt { color: var(--ink-on-light); }

.cvcard {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md);
  border: 2px solid var(--ink-on-light);
  border-radius: 6px;
  background: #FFFFFF;
}
@media (max-width: 34rem) { .cvcard { grid-template-columns: 1fr; } }
.cvcard__face {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--color-rule-2);
  border-radius: 4px;
  /* A shade of the page's own cream, deep enough to read as a plate sitting
   * on the card rather than a hole cut in it. The grey it replaced was the
   * one neutral on a page that has no neutrals. Fixed rather than tokenised,
   * because this card is a light document in both themes. */
  background: #F2EBC6;
  display: grid; place-items: center;
}
.cvcard__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cvcard__initials {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #92240F;   /* 7.04 on the plate */
}
.cvcard__add {
  position: absolute; left: 0; right: 0; bottom: 0;
  border: 0; cursor: pointer;
  padding: 0.35rem;
  font: inherit; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.cvcard__name { margin: 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.cvcard__what {
  display: block; margin-top: 0.15rem;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-deep);
}
.cvcard__bio { margin: var(--space-sm) 0 0; font-size: var(--text-sm); max-width: 46ch; }
.cvcard__facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem var(--space-md);
  margin: var(--space-md) 0 0;
  font-size: 0.78rem;
}
.cvcard__facts dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.cvcard__facts dd { margin: 0; }

/* Headings that look cut out and stuck down. */
.cvcut {
  display: inline-block;
  margin: var(--space-xl) 0 var(--space-sm);
  padding: 0.25rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--color-accent);
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--ink-on-light);
}
.cvcut--b { background: #FFD34D; color: var(--ink-on-light); transform: rotate(1deg); }
.cvcut--c { background: var(--ink-on-light); color: var(--color-on-accent); transform: rotate(-0.75deg); }

.cvwork {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 40rem) { .cvwork { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cvwork figure {
  margin: 0;
  padding: 0.5rem 0.5rem 0.7rem;
  background: #FFFFFF;
  border: 1px solid var(--color-rule-2);
  box-shadow: 2px 2px 0 rgb(42 20 16 / 0.12);
}
.cvwork figure:nth-child(odd) { transform: rotate(-0.8deg); }
.cvwork figure:nth-child(even) { transform: rotate(0.7deg); }
.cvwork img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cvwork__none { display: grid; place-items: center; aspect-ratio: 1; font-size: var(--text-sm); color: var(--color-muted); }
.cvwork figcaption { display: block; margin-top: 0.4rem; font-size: 0.72rem; line-height: 1.3; }
.cvwork figcaption strong { display: block; font-size: 0.8rem; }
.cvwork__skills { display: block; margin-top: 0.15rem; color: var(--color-muted); }

.cvnote {
  padding: var(--space-md);
  font-size: var(--text-sm);
  background: #FFF6C9;
  border: 1px solid var(--color-rule-2);
  box-shadow: 2px 2px 0 rgb(42 20 16 / 0.12);
}
.cvnote p { margin: 0 0 var(--space-2xs); }
.cvnote--fx { margin-top: var(--space-sm); background: #FFFFFF; }

.cvtools { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cvtool {
  display: grid; place-items: center; gap: 0.15rem;
  width: 5rem; padding: var(--space-2xs);
  border: 2px solid var(--ink-on-light);
  border-radius: 6px;
  background: #FFFFFF;
  text-align: center;
}
.cvtool b {
  display: grid; place-items: center;
  width: 100%; padding: 0.4rem 0;
  border-radius: 4px;
  font-size: 0.95rem;
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.cvtool span { font-size: 0.62rem; line-height: 1.2; }

/* The sheet is a piece of paper lying on the red panel, so the panel's own
 * white type does not apply inside it. Said with the same specificity the
 * panel uses, or the ID selector wins and the page is white on white. */
#join-wizard .cvsheet h3,
#join-wizard .cvsheet p,
#join-wizard .cvsheet span,
#join-wizard .cvsheet strong,
#join-wizard .cvsheet dd,
#join-wizard .cvsheet b { color: var(--ink-on-light); }
#join-wizard .cvsheet dt { color: var(--color-muted); }
#join-wizard .cvsheet .cvcard__what { color: var(--color-accent-deep); }
#join-wizard .cvsheet .cvwork__skills { color: var(--color-muted); }
#join-wizard .cvsheet .cvcut { color: var(--color-on-accent); }
#join-wizard .cvsheet .cvcut--b { color: var(--ink-on-light); }
#join-wizard .cvsheet .cvcut--c { color: var(--color-on-accent); }
#join-wizard .cvsheet .cvtool b { color: var(--color-on-accent); }
#join-wizard .cvsheet .cvcard__add { color: var(--color-on-accent); }
#join-wizard .cvsheet .cvcard__initials { color: #92240F; }

/* The brief arriving. A line that comes up, says what just happened, and
 * goes — because the thing that happened is on the page behind it now. */
.demoflash {
  position: fixed;
  left: 50%; bottom: var(--space-lg);
  transform: translate(-50%, 1rem);
  z-index: 90;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 6px 20px rgb(42 20 16 / 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  text-align: center;
}
.demoflash.is-on { opacity: 1; transform: translate(-50%, 0); }
.demoflash strong { display: block; font-size: var(--text-sm); }
.demoflash span { display: block; font-size: 0.78rem; color: var(--on-accent-2); }
@media (prefers-reduced-motion: reduce) { .demoflash { transition: none; } }

/* ---------- pick from a list, as many as apply ----------
 *
 * Four questions on the work tile were asking the same thing in three
 * different shapes — a text box, a row of chips, another text box. One
 * control now, and a list to choose from rather than free text, because a
 * brief is matched against these and six spellings of one craft match
 * nothing.
 */
.dropadd {
  border: 2px dashed rgb(255 255 255 / 0.6);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.dropadd:hover { background: rgb(255 255 255 / 0.2); border-color: #FFFFFF; }
.droppanel {
  margin-top: var(--space-2xs);
  max-height: 15rem;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  padding: var(--space-2xs);
}
.droprow {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  color: var(--ink-on-light);
}
.droprow:hover { background: var(--color-paper-3); }
.droprow[aria-pressed="true"] { font-weight: 700; color: var(--color-accent-deep); }
.droprow__tick { width: 1rem; flex: none; color: var(--color-accent); }
.dropnew {
  width: 100%;
  margin-top: var(--space-2xs);
  border: 1px solid var(--color-rule-2) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.6rem !important;
  font-size: var(--text-sm);
}

/* Each package shut until it is opened. Six of them with twenty things each
 * is two hundred chips on one screen, and nobody reads the second one. */
.toolset__head {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: var(--space-2xs) 0;
  font: inherit;
  color: #FFFFFF;
  text-align: left;
}
.toolset__name { font-size: var(--text-md); font-weight: 700; }
.toolset__n { font-size: 0.75rem; color: var(--on-accent-2); margin-left: auto; }
.toolset__caret { transition: transform var(--dur-fast) var(--ease-out); }
.toolset__head.is-open .toolset__caret { transform: rotate(180deg); }
.toolset__body { margin-top: var(--space-2xs); }

/* Each craft's terms shut until asked for. */
.termset__head {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: var(--space-2xs) 0;
  font: inherit; color: #FFFFFF; text-align: left;
}
.termset__head.is-open .toolset__caret { transform: rotate(180deg); }
.termset__body { margin-top: var(--space-md); }

/* The software row, filling the width it is given rather than huddling at the
 * left of it. */
.cvtools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-md);
}
.cvtool { width: auto; padding: var(--space-xs); }
.cvtool b { padding: 0.75rem 0; font-size: 1.2rem; }
.cvtool span { font-size: 0.7rem; }

/* The handover at the end: the words go, the red stays, and the next page is
 * already loaded when it lifts. */
.curtain__in { transition: opacity 0.45s var(--ease-out); }
.curtain__in.is-gone { opacity: 0; }
.curtain__load {
  position: fixed; inset: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0;
}

/* Something landing, and then still asking.
 *
 * The first shake is the arrival — the knock a phone makes on a table. Then
 * it settles into a slow rise and fall and stays there until somebody touches
 * it, because a thing that buzzes once and stops is a thing you can miss. */
.is-nudging {
  /* Visible disruption, then a pulse it keeps. It arrives hard enough to be
   * seen out of the corner of an eye — the row lifts off the page and rings
   * for a moment — and then settles into a slow rise and fall that does not
   * stop until somebody touches it. */
  position: relative;
  z-index: 3;
  animation: demobuzz 0.7s var(--ease-out) 2, demobreathe-up 2.4s var(--ease-out) 1.4s infinite;
  box-shadow: 0 0 0 3px var(--color-accent), 0 12px 28px rgb(42 20 16 / 0.3);
  border-radius: var(--radius-sm);
}
@keyframes demobuzz {
  0%, 100% { transform: translate3d(0, 0, 0); }
  8% { transform: translate3d(-6px, 2px, 0) rotate(-1deg); }
  18% { transform: translate3d(6px, -2px, 0) rotate(1deg); }
  30% { transform: translate3d(-5px, 2px, 0) rotate(-0.8deg); }
  42% { transform: translate3d(5px, -2px, 0) rotate(0.8deg); }
  56% { transform: translate3d(-3px, 1px, 0) rotate(-0.5deg); }
  70% { transform: translate3d(3px, 0, 0) rotate(0.3deg); }
  84% { transform: translate3d(-2px, 0, 0); }
}
@keyframes demobreathe-up {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}
.is-buzzed { animation: demobuzz 0.55s var(--ease-out) 1; }
@keyframes demobuzz {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-3px, 1px, 0) rotate(-0.6deg); }
  20% { transform: translate3d(3px, -1px, 0) rotate(0.6deg); }
  32% { transform: translate3d(-3px, 1px, 0) rotate(-0.5deg); }
  44% { transform: translate3d(3px, -1px, 0) rotate(0.5deg); }
  56% { transform: translate3d(-2px, 1px, 0) rotate(-0.3deg); }
  68% { transform: translate3d(2px, 0, 0) rotate(0.2deg); }
  80% { transform: translate3d(-1px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-buzzed, .is-nudging { animation: none; }
}

/* The walkthrough's portrait, framed on the face.
 *
 * The source is a three-quarter shot, so a circle cut straight out of it is
 * mostly shoulder and the face ends up small and low. Pulling in and lifting
 * the origin puts the head in the frame the way a profile picture is framed. */
.miniface--framed img {
  transform: scale(1.45);
  transform-origin: 50% 22%;
}

/* The other answer to the question, weighted like one.
 *
 * Agree and this sit side by side on the phases where refusing is ordinary,
 * so this reads as a choice rather than as the quiet option beside the real
 * button — outlined in the accent, not filled, because it stops the project
 * and that is not a thing to press by accident. */
.btn--no {
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
  font-weight: 700;
}
.btn--no:hover { background: var(--color-accent-wash, transparent); border-color: var(--color-accent-deep); }

/* A request, said on the card rather than in it.
 *
 * It sits in the same row as everything else waiting on you and it is the only
 * one there that somebody else can take, so it is badged rather than left to a
 * line of grey text naming who sent it. */
.thin--request { border-color: var(--color-accent); }
.thin__request, .thin__badge {
  position: absolute;
  top: var(--space-2xs); right: var(--space-2xs);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--color-accent);
}

/* ---------- references, as things rather than as a list ----------
 *
 * Three across, a new row of three whenever it needs one, every tile the same
 * size whatever is in it. It was one textarea, which is where a list of links
 * goes to be ignored — and a link with a picture on it is the only kind
 * anybody actually opens.
 */
.refgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}
@media (max-width: 34rem) { .refgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.12);
}
.ref img, .ref__none {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.18);
}
.ref__none {
  display: grid; place-items: center;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFFFFF;
}
.ref figcaption { display: grid; gap: var(--space-2xs); font-size: 0.75rem; }
.ref figcaption a { color: #FFFFFF; }
.ref figcaption input { font-size: 0.78rem !important; padding: 0.4rem 0.55rem !important; }
.ref__x {
  position: absolute; top: 0.35rem; right: 0.35rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 0.7rem; line-height: 1;
  color: var(--color-accent-deep); background: #FFFFFF;
}
.ref--add {
  align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.06);
  text-align: center;
  color: #FFFFFF;
}
.ref__n {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-accent-2);
}
.ref__plus { font-size: 1.8rem; line-height: 1; }
.ref__say { font-size: var(--text-sm); font-weight: 700; }
.ref__acts { display: flex; gap: var(--space-2xs); flex-wrap: wrap; justify-content: center; }
.ref--wide { flex-direction: row; align-items: center; gap: var(--space-sm); }
.ref--wide img, .ref--wide .ref__none { width: 6rem; aspect-ratio: 4 / 3; }

/* Brand rules: one document, and the two things people have instead of one. */
.brandrules { display: grid; gap: var(--space-sm); margin-top: var(--space-2xs); }
.brandrules__alt { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

/* The bar that runs while the brief is read back. Determinate would be a
 * lie — there is nothing to measure — so it sweeps. */
.readbar {
  height: 0.5rem;
  margin: var(--space-2xs) 0 var(--space-md);
  border-radius: 999px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.25);
}
.readbar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: #FFFFFF;
  animation: readsweep 1.1s var(--ease-out) infinite;
}
@keyframes readsweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.verdict__what { margin: var(--space-2xs) 0; color: #FFFFFF; }
.verdict__why { margin: var(--space-xs) 0 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.verdict__why li { margin-bottom: var(--space-2xs); }

/* ---------- three campaigns, one you want and one you do not ---------- */
.tastegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.taste {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.1);
}
.taste img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 8px;
}
.taste figcaption { display: grid; gap: 0.1rem; padding: 0 var(--space-2xs); }
.taste figcaption strong { color: #FFFFFF; font-size: var(--text-sm); }
.taste__client { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent-2); }
.taste__blurb { font-size: 0.75rem; line-height: 1.35; color: var(--on-accent-2); }
.taste__acts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); }
.taste__vote, .taste__more {
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: 999px;
  background: none;
  color: #FFFFFF;
  font: inherit; font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.taste__vote[aria-pressed="true"] { background: #FFFFFF; color: var(--color-accent-deep); border-color: #FFFFFF; }
.taste.is-love { border-color: #FFFFFF; }
.taste.is-hate { opacity: 0.55; border-color: rgb(255 255 255 / 0.35); }

/* Your own face, as a door. It is the picture of you on every page and it
 * used to go nowhere — on the masthead it went to the home page, because it
 * sits inside the logo link. */
.navbar__face--live { cursor: pointer; }
.navbar__face--live:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-accent));
  outline-offset: 3px;
  border-radius: 50%;
}

/* Six co-curators, all the same size.
 *
 * It was a masonry column, which stacks cards of different heights and turns
 * a choice into a scroll. Three across, two rows, every card the same shape —
 * the page you shortlist from should be takeable in at once. */
.matchfeed {
  display: grid;
  /* Three and three, so six reads as two tidy rows rather than four and a
   * remainder. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (max-width: 52rem) { .matchfeed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 32rem) { .matchfeed { grid-template-columns: 1fr; } }
.matchfeed .match-card { height: 100%; display: flex; flex-direction: column; }
.matchfeed__more { grid-column: 1 / -1; margin: 0; }

/* ---------- the review, as one page ----------
 *
 * It is the thing being sent, and the thing being sent is a document — so it
 * is shaped like one. A4 proportions, held at a readable width, and it scrolls
 * inside itself rather than running the step down the screen: a brief that
 * does not fit on a page is a brief nobody reads to the end of.
 */
#step-review .cform__title { margin-bottom: var(--space-md); }
#review-box {
  aspect-ratio: 1 / 1.414;
  max-width: 42rem;
  margin: 0 auto;
  overflow-y: auto;
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.1);
}
@media (max-width: 34rem) {
  #review-box { aspect-ratio: auto; max-height: 70vh; }
}

/* A handover rather than a beat: nothing to press, so nothing invites a
 * press — just the words and a line that says it is working. */ }

/* ---------- the brief, as a document ----------
 *
 * Same shape as the page the commissioner reviewed before sending it, because
 * it is that page. A co-curator deciding whether to take a job was reading a
 * title and two lines; this is what was actually written.
 */
.briefdoc {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-lg);
  border: var(--rule-hair);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.briefdoc__head { padding-bottom: var(--space-md); border-bottom: var(--rule-hair); }
.briefdoc__kicker {
  display: block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-deep);
}
.briefdoc__head h3 { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); }
.briefdoc__who { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.briefdoc__body { margin: var(--space-md) 0 0; }
.briefdoc__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair);
}
@media (max-width: 34rem) { .briefdoc__row { grid-template-columns: 1fr; gap: var(--space-2xs); } }
.briefdoc__label {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted);
}
.briefdoc__row ul { margin: 0; padding-left: 1.1rem; }
.briefdoc__row li { margin-bottom: var(--space-2xs); }
.briefdoc__specs { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.2rem var(--space-md); margin: 0; }
.briefdoc__specs dt { font-weight: 700; }
.briefdoc__specs dd { margin: 0; }
.briefdoc__foot { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair); }
.called__acts { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; }

/* ---------- the crew panel ---------- */

/* What the commission asked for, above the seats being named for it. */
.crewhead {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.12);
}
.crewhead__brief { margin: var(--space-2xs) 0 var(--space-sm); font-size: var(--text-sm); }
.crewhead__crafts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.crewhead__craft {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent-deep);
  background: #FFFFFF;
}
.briefpage h4 { margin: var(--space-md) 0 var(--space-2xs); }
.briefpage__who { font-size: var(--text-sm); }

/* Shut until somebody is being added. A form standing open is a form that
 * looks like it is already asking. */
/* A second question asked inside the sheet you are already in.
 *
 * It replaces what the sheet was showing rather than opening over it, so the
 * card underneath keeps everything typed into it. Back is at the top, before
 * the title, because it is the way out and the way out should not be found by
 * scrolling. On red ground, so cream type and a cream hairline. */
.subview { animation: subview-in 140ms ease-out; }
@keyframes subview-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .subview { animation: none; } }
.subview__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: var(--space-sm);
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  font: inherit; font-size: var(--text-sm);
  color: var(--color-on-accent);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  cursor: pointer;
}
.subview__back::before { content: '\2190'; }
.subview__back:hover { background: rgb(255 255 255 / 0.12); }
.subview__back:focus-visible { outline: 2px solid var(--color-on-accent); outline-offset: 2px; }
.subview__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-lg);
  color: var(--color-on-accent);
}

.crewopen {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  cursor: pointer;
  border: 2px dashed rgb(255 255 255 / 0.6);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  font: inherit;
  text-align: left;
}
.crewopen:hover { background: rgb(255 255 255 / 0.18); border-color: #FFFFFF; }
.crewopen__plus { font-size: 1.5rem; line-height: 1; }
.crewopen__say { font-size: var(--text-sm); font-weight: 700; }
.crewopen__n { margin-left: auto; font-size: 0.72rem; color: var(--on-accent-2); }

/* A list you can see, that narrows as you type. A datalist looks like a text
 * box until you are already typing, so nobody found out there was a list. */
.combo { position: relative; }
.combo__list {
  max-height: 12rem;
  overflow-y: auto;
  margin-top: var(--space-2xs);
  padding: var(--space-2xs);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}
.combo__row {
  display: block; width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font: inherit; font-size: var(--text-sm); text-align: left;
  color: var(--ink-on-light);
}
.combo__row:hover { background: var(--color-paper-3); }
.combo__none { margin: 0; padding: 0.4rem 0.5rem; font-size: var(--text-sm); color: var(--color-muted); }

/* Hello, once — for somebody who arrived inside a project. */
.hello {
  position: fixed; inset: auto var(--space-md) var(--space-md);
  z-index: 95;
  max-width: min(32rem, calc(100vw - 2rem));
  margin-left: auto;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 10px 30px rgb(42 20 16 / 0.3);
}
.hello__label {
  display: block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-accent-2);
}
.hello h2 { margin: var(--space-2xs) 0 var(--space-xs); color: var(--color-on-accent); }
.hello p { margin: 0; font-size: var(--text-sm); color: var(--on-accent-2); }
.hello__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hello__acts .btn--primary { background: #FFFFFF; color: var(--color-accent-deep); border-color: #FFFFFF; }
.hello__acts .btn--quiet { color: var(--color-on-accent); border-color: var(--color-on-accent); }

/* ---------- the crew, under the person who built it ----------
 *
 * A creative director's seats are not separate attendees; they are the shape
 * of one person's answer to the brief. Flat, the room read as five equal
 * people and nobody could tell who had brought whom.
 */
.seatlist {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-lg);
  border-left: 2px solid rgb(255 255 255 / 0.3);
  margin-left: var(--space-md);
}
.seatlist__row {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: var(--space-2xs) 0;
  font-size: var(--text-sm);
}
.seatlist__row::before {
  content: '';
  position: absolute;
  left: calc(var(--space-lg) * -1 + 0.35rem);
  top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
}
.seatlist__row.is-in::before { background: #FFFFFF; }
.seatlist__craft { font-weight: 700; color: #FFFFFF; }
.seatlist__who { color: var(--on-accent-2); }
.seatlist__row.is-in .seatlist__who { color: #FFFFFF; }
.seatlist__note { font-size: 0.75rem; color: var(--on-accent-2); opacity: 0.85; }

/* A bar that only grows, slows, and never arrives.
 *
 * Recruitment has no percentage — it finishes when somebody says yes, and
 * nothing before that is a fraction of anything. This answers "is this
 * stuck", not "how far through is it", so it must never reach the end and
 * must never go backwards.
 */
.recruiting {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.12);
}
.recruiting .meta { margin: var(--space-2xs) 0 var(--space-sm); }
.recruiting__bar {
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.25);
}
.recruiting__bar i {
  display: block;
  height: 100%;
  width: 3%;
  border-radius: 999px;
  background: #FFFFFF;
  /* Paced for the thing it is describing.
   *
   * Recruiting somebody takes hours or days, not the minute and a half this
   * was running to — at that speed it crossed most of the bar while the
   * commissioner was still reading the line above it, which reads as almost
   * done and then stuck. An hour of travel, front-loaded enough that a glance
   * two minutes apart shows movement, and it stops well short of the end
   * because the end is somebody saying yes. */
  animation: recruitcreep 3600s cubic-bezier(0.08, 0.82, 0.2, 1) forwards;
}
@keyframes recruitcreep {
  0%   { width: 3%; }
  2%   { width: 18%; }
  8%   { width: 34%; }
  25%  { width: 52%; }
  60%  { width: 68%; }
  100% { width: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .recruiting__bar i { animation: none; width: 40%; }
}
.pform__held { margin-top: var(--space-md); }


/* ---------- phones: the masthead, the stepper, the badge ----------
   Appended last so it wins. */
@media (max-width: 40rem) {
  .masthead__issue { display: none; }
  /* One row that fits, rather than one that scrolls. What a phone needs
     from the bar is the way home, the dashboard, the door for its side, the
     light/dark switch and the account. How it works and Team are on the
     home page and in the colophon; the founder's logged-out preview is a
     desk tool. The two long doors keep their links and lose their sentences. */
  .masthead__links {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.55rem;
    overflow: visible;
    padding-bottom: 0;
  }
  .masthead__links li { flex: 0 0 auto; }
  .masthead__links a { letter-spacing: 0.05em; }
  .masthead__links a[href="/how-it-works"],
  .masthead__links a[href="/team"],
  .masthead__links a.navlink-preview { display: none; }
  .masthead__links li:has(> a[href="/how-it-works"]),
  .masthead__links li:has(> a[href="/team"]),
  .masthead__links li:has(> a.navlink-preview) { display: none; }
  .masthead__links a[href="/start"],
  .masthead__links a[href="/join"] { font-size: 0; letter-spacing: 0; }
  .masthead__links a[href="/start"]::after,
  .masthead__links a[href="/join"]::after {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }
  .masthead__links a[href="/start"]::after { content: 'Start'; }
  .masthead__links a[href="/join"]::after { content: 'Join'; }
  .masthead__links a.navbar__cta { padding-inline: 0.6rem; }

  .stepper { position: relative; display: block; padding-bottom: 0.6rem; }
  .stepper li { display: none; }
  .stepper li[aria-current="step"] { display: inline; border: 0; }
  .stepper[data-at]::before {
    content: 'Step ' attr(data-at) ' \00b7 ';
    font-size: var(--text-xs);
    color: var(--color-neutral);
  }
  .stepper::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    height: 3px; width: var(--wiz, 0%);
    border-radius: 3px;
    background: var(--color-accent);
    transition: width var(--dur-fast) var(--ease-out);
  }

  .banner__lvl:not(.banner__lvl--who) .banner__craft { display: none; }
}


/* ---------- The room, one phase at a time ----------
 *
 * A strip that says where the run is, the open phase as the one card, the
 * phases behind and ahead folded to a line each. Blurbs are gone from the
 * cards: the phase name and the one thing to press are what is left. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.timeline li.tl-strip { padding-bottom: var(--space-md); }
.timeline li.tl-strip::before { display: none; }
.tl-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.25rem; list-style: none; }
.tl-strip__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--color-muted); white-space: nowrap;
}
.tl-strip__dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-rule-2); box-sizing: border-box; }
.tl-strip__pill.is-done { color: var(--color-ok); }
.tl-strip__pill.is-done .tl-strip__dot { background: var(--color-ok); border-color: var(--color-ok); }
.tl-strip__pill.is-now {
  color: var(--color-on-accent); background: var(--color-accent);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-weight: 800; font-size: 0.8rem;
}
.tl-strip__pill.is-now .tl-strip__dot { background: var(--color-on-accent); border-color: var(--color-on-accent); width: 8px; height: 8px; }
.tl-strip__line { display: inline-block; width: 14px; height: 2px; background: var(--color-rule-2); }
.tl-strip__line.is-done { background: var(--color-ok); }

.timeline li.tl-fold { padding-bottom: var(--space-sm); }
.timeline li.tl-fold.is-todo::before { background: transparent; border-color: var(--color-rule-2); }
.tl-fold__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  color: var(--color-ink); background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2); border-radius: 14px;
  padding: 0.7rem var(--space-md);
}
.tl-fold__head:hover { background: var(--color-paper-3); }
.tl-fold__head strong { font-size: var(--text-sm); }
.tl-fold__names { font-size: var(--text-sm); color: var(--color-muted); flex-grow: 1; }
.tl-fold__go { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); white-space: nowrap; }
.tl-fold.is-open .tl-fold__go { color: var(--color-muted); }
.tl-fold__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.tl-fold__list li { border-left: 0; padding-left: 0; padding-bottom: var(--space-sm); }
.tl-fold__list li::before { display: none; }
.tl-fold__list .tl-step { padding: var(--space-sm) var(--space-md); border-radius: 14px; }
.tl-fold__list .tl-step h3 { font-size: var(--text-md); }
.tl-fold__list .tl-step p { display: none; }

/* The one card. Bigger, and only the name, the mark and the press. */
.timeline .tl-step--now { padding: var(--space-lg) var(--space-xl); border-radius: 22px; }
.timeline .tl-step--now h3 { font-size: var(--text-xl); }
.timeline .tl-step--now p { display: none; }
.timeline .tl-step--now .tl-step__go { font-size: var(--text-md); font-weight: 600; margin-top: var(--space-xs); display: inline-block; }
.timeline .tl-step--now.is-shut .tl-step__go { font-weight: 500; }

/* The room. Co Curate's lines are cards; the next step sits above the box. */
.assistant--room .assistant__msg--cc {
  border: 1.5px solid var(--color-accent); border-radius: 12px; padding: 0.6rem 0.75rem;
  background: var(--color-paper);
}
.assistant--room .assistant__msg--cc .meta { color: var(--color-accent-deep); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; }
.quickreplies { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0.75rem; }
.quickreplies__label { flex-basis: 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5b4a42; }
/* The room's own next moves: plain, square-cornered, ink on paper. Cura's are green and
 * sit in a box of their own, so the two are never read as one list. */
.quick {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: #2B1A14;
  background: #fff; border: 1px solid #2B1A14; border-radius: 0.35rem;
  padding: 0.35rem 0.75rem; cursor: pointer;
}
.quick:hover, .quick:focus-visible { background: #2B1A14; color: #fff; outline: none; }

@media (max-width: 40rem) {
  .tl-strip__pill:not(.is-now) { font-size: 0; gap: 0; }
  .tl-strip__pill:not(.is-now) .tl-strip__dot { width: 10px; height: 10px; }
  .tl-strip__line { width: 8px; }
  .tl-fold__names { flex-basis: 100%; }
}

/* ---------- the survey desk's results ----------
   Bars, not a chart library. Every length here is a share of answers to one
   question, and a share of a known whole is a bar — nothing on this desk needs
   an axis, a legend or a tooltip to be read correctly. */
.results { margin: var(--space-lg) 0 var(--space-xl); }
.results__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair);
}
.results__head h2 { margin: 0; }
.results__toggle { display: flex; gap: var(--space-2xs); }
.results__tab {
  border: var(--rule-hair);
  background: var(--color-paper-2);
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.results__tab:hover { background: var(--color-paper-3); }
.results__tab.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.results__sec {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.results__sheets { margin: var(--space-2xl) 0 var(--space-md); }

.rq { padding: var(--space-md) 0; border-top: var(--rule-hair); }
.rq__t { margin: 0 0 var(--space-2xs); font-weight: 600; }
.rq__n { margin: 0 0 var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); }
.rq__none { margin: 0; font-size: var(--text-sm); color: var(--color-neutral); font-style: italic; }
.rq__key {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  margin-bottom: var(--space-xs);
}
.rq__avg { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

/* label | track | value. The value column is fixed so the numbers form a
   column you can read down, instead of drifting with each bar's length. */
.rbar {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr 5.5rem;
  gap: var(--space-sm);
  align-items: center;
  padding: 3px 0;
  font-size: var(--text-sm);
}
.rbar__label { overflow-wrap: anywhere; }
.rbar__track {
  height: 0.6rem;
  background: var(--color-paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.rbar__fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width var(--dur-med) var(--ease-out);
}
.rbar__val { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* An option the form no longer offers still has answers behind it. Shown, but
   never competing with the live ones for attention. */
.rbar--muted .rbar__label,
.rbar--muted .rbar__val { color: var(--color-neutral); font-style: italic; }
.rbar--muted .rbar__fill { background: var(--color-neutral); }

/* One row of the grid question: the five steps as a single stacked bar. One
   hue at five weights, because the steps are one scale getting stronger, and
   five separate colours would imply five unrelated things. */
.grow {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr 3rem;
  gap: var(--space-sm);
  align-items: center;
  padding: 3px 0;
  font-size: var(--text-sm);
}
.grow__label { overflow-wrap: anywhere; }
.grow__stack {
  display: flex;
  height: 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-paper-3);
}
.grow__stack--empty { opacity: 0.5; }
.grow__val { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gseg { display: block; height: 100%; background: var(--color-accent); }
.gseg--1 { opacity: 0.22; }
.gseg--2 { opacity: 0.4; }
.gseg--3 { opacity: 0.58; }
.gseg--4 { opacity: 0.78; }
.gseg--5 { opacity: 1; }

.rq__reads { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.rread {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rread p { margin: 0; white-space: pre-wrap; }
.rread cite {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-neutral);
}

/* On a phone a 14rem label column leaves no bar. The label takes its own line
   and the bar runs the full width under it. */
@media (max-width: 42rem) {
  .rbar, .grow {
    grid-template-columns: 1fr 4.5rem;
    row-gap: var(--space-2xs);
  }
  .rbar__label, .grow__label { grid-column: 1 / -1; }
}

/* One line to add a package or a skill the list lacks. Sits at the end of
 * the chips it belongs to, the same height as one. */
.addown { display: inline-flex; align-items: center; gap: 0.4rem; flex-basis: 100%; margin-top: 0.25rem; }
.addown input {
  flex: 1; min-width: 0; max-width: 18rem; font: inherit; font-size: var(--text-sm);
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px dashed var(--color-rule-2); background: transparent; color: inherit;
}
.addown input::placeholder { color: var(--color-muted); }
.addown input:focus { border-style: solid; outline: 2px solid var(--color-focus); outline-offset: 2px; }
.addown .btn { padding: 0.35rem 0.9rem; }

/* ---------- the Commissions desk ----------
 * Written for somebody who has never seen the roster, so a commission says
 * who sent it and whether they are new, and a creator says who they are. */
.comm-sum { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
.comm-sum > div { display: flex; align-items: baseline; gap: 0.5rem; background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: 14px; padding: 0.6rem 1rem; }
.comm-sum strong { font-size: 1.6rem; line-height: 1; }
.comm-sum span { font-size: var(--text-sm); color: var(--color-muted); }
.comm-h { margin: var(--space-xl) 0 var(--space-2xs); }
.comm-blurb { margin: 0 0 var(--space-md); max-width: 62ch; }
.comm { border: 1px solid var(--color-rule-2); border-radius: 18px; background: var(--color-paper); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); }
.comm--new { border-color: var(--color-accent); border-width: 2px; }
.comm__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.comm__head h3 { margin: 0; }
.comm__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.comm-chip, .comm-state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; background: var(--color-paper-3); color: var(--color-ink); }
.comm-chip--new { background: var(--color-accent); color: var(--color-on-accent); }
.comm-state--act { background: var(--color-warn-wash); color: var(--color-warn); }
.comm-state--wait { background: var(--color-paper-3); color: var(--color-muted); }
.comm-state--done { background: var(--color-ok-wash); color: var(--color-ok); }
.comm__who { margin: var(--space-xs) 0 0; }
.comm__brief { margin: var(--space-sm) 0; max-width: 70ch; }
.comm__full { margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: 12px; }
.comm__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm); }
.comm__panel { margin-top: var(--space-md); border-top: 1px solid var(--color-rule-2); padding-top: var(--space-md); }
.comm__intro { background: var(--color-accent-wash); border-radius: 12px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.comm__intro p { margin: 0 0 0.4rem; }
.cc-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.cc { display: flex; flex-direction: column; gap: 0.55rem; border: 1px solid var(--color-rule-2); border-radius: 16px; background: #fff; padding: var(--space-md); }
.cc.is-off { opacity: 0.6; }
.cc.is-picked { border: 2px solid var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash); }
.cc__top { display: flex; align-items: center; gap: 0.75rem; }
.cc__top h4 { margin: 0; font-size: var(--text-md); }
.cc__top > div { flex: 1; min-width: 0; }
.cc-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--color-paper-3); }
.cc-face--initials { display: grid; place-items: center; font-weight: 800; color: var(--color-accent-deep); }
.cc__avail { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.6rem; background: var(--color-paper-3); color: var(--color-muted); white-space: nowrap; }
.cc__avail.is-on { background: var(--color-ok-wash); color: var(--color-ok); }
.cc__line { margin: 0; font-style: italic; color: var(--color-muted); }
.cc__why { background: var(--color-accent-wash); border-radius: 10px; padding: 0.5rem 0.75rem; }
.cc__why ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.cc__row { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.5rem; font-size: var(--text-sm); }
.cc__row .label { margin: 0; }
.cc__checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.72rem; color: var(--color-muted); }
.cc-check.is-yes { color: var(--color-ok); font-weight: 700; }
.cc__mail { margin: 0; }
.cc__act { margin-top: auto; display: grid; gap: 0.35rem; }
.cc-more summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-accent-deep); }
@media (max-width: 40rem) { .cc-grid { grid-template-columns: 1fr; } .comm { padding: var(--space-md); } }

.cc__picked { margin: 0; align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; padding: 0.25rem 0.7rem; }

/* The brief form says it is keeping itself. */
.start-saved { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-muted, inherit); }
.start-saved:empty { display: none; }
.start-saved[data-restored] { color: var(--color-accent-deep); font-weight: 500; }

/* Unconfirmed email: one line across the top of the page. */
.verifybar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center;
  padding: 0.6rem var(--gutter, 1rem); background: var(--color-accent-deep); color: #fff; font-size: 0.9rem; text-align: center; }
.verifybar--ok { background: #2f6b3f; }
.verifybar__btn { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px;
  padding: 0.25rem 0.8rem; font: inherit; cursor: pointer; }
.verifybar__btn:disabled { opacity: 0.6; cursor: default; }

/* An unfinished brief, on the home page. */
.draftnudge { position: relative; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
  justify-content: space-between; margin: 0 0 var(--space-lg, 1.5rem); padding: 1rem 3rem 1rem 1.25rem;
  background: var(--color-accent-wash, #fbe9e1); border: 1px solid var(--color-accent-deep, #a33a1f); border-radius: 12px; }
.draftnudge__text { flex: 1 1 18rem; line-height: 1.4; }
.draftnudge__text strong { display: block; }
.draftnudge__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.draftnudge__x { position: absolute; top: 0.4rem; right: 0.6rem; background: none; border: 0; font-size: 1.5rem;
  line-height: 1; color: inherit; cursor: pointer; padding: 0.25rem 0.5rem; }

/* Asking before opening a file or a link somebody else shared. */
.openguard { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(30, 15, 10, 0.55); }
.openguard__card { max-width: 30rem; width: 100%; background: var(--color-paper, #fbf5e2); color: var(--color-ink, #2b1a14);
  border-radius: 14px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.openguard__card h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.openguard__card p { margin: 0 0 1rem; line-height: 1.45; }
.openguard__remember { display: block; margin: 0 0 1rem; font-size: 0.9rem; }
.openguard__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.comm-chip--test { background: #2b1a14; color: #fbf6d8; }

/* Test-commission guidance on the brief form. */
.starttip { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-left: 4px solid var(--color-accent-deep, #a33a1f);
  background: rgba(255, 255, 255, 0.35); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: var(--color-on-accent, inherit); }

.cp-preview { margin-top: 0.75rem; }
.cp-preview img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.7); background: #fff; }

/* The structure of a commission, on the admin's assignment panel. */
.comm__structure { margin: 1rem 0; padding: 0.9rem 1.1rem; border-radius: 12px; border: 2px solid var(--color-ink, #2b1a14); background: rgba(255, 255, 255, 0.5); }
.comm__structure h3 { margin: 0.2rem 0 0.4rem; }
.comm__structure p { margin: 0 0 0.3rem; }
.comm__structure--director { border-color: var(--color-accent-deep, #a33a1f); }
.comm__compose { margin: 1rem 0; padding: 0.9rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.4); }
.comm__compose textarea { width: 100%; }
.cc__part { display: block; margin: 0.3rem 0; }
.cc__parts { margin: 0.75rem 0; padding: 0.6rem 0.8rem; border-left: 4px solid var(--color-accent-deep, #a33a1f); background: rgba(255, 255, 255, 0.45); }
.comm-chip--cd { background: var(--color-accent-deep, #a33a1f); color: #fff; }
.comm-chip--solo { background: #2b1a14; color: #fbf6d8; }

/* Outsourcing card and the sub-commission timeline in the project room. */
.outsourcing__note { padding: 0.5rem 0.75rem; border-left: 4px solid currentColor; background: rgba(255, 255, 255, 0.25); }
.subtl { padding: 1rem 1.25rem; border-radius: 14px; background: rgba(255, 255, 255, 0.5); border: 2px solid var(--color-ink, #2b1a14); }
.subtl.is-done { opacity: 0.8; }
.subtl h3 { margin: 0.2rem 0 0.4rem; }
.subtl__steps { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.subtl__step { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  padding: 0.6rem 0; border-top: 1px solid rgba(43, 26, 20, 0.2); }
.subtl__step--done strong::before { content: '\2713  '; }
.subtl__step--todo { opacity: 0.55; }
.subtl__step p { margin: 0.1rem 0 0; }
.subtl__note { width: 100%; margin-top: 0.75rem; }

/* What belongs in a phase for this kind of work, and doing a step again. */
.guide { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.2); border-left: 4px solid currentColor; }
.guide p { margin: 0.25rem 0 0; }
.restart { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 10px; border: 1px dashed currentColor; }
.restart textarea, .restart input { width: 100%; }
.dial__read--unset { opacity: 0.6; font-style: italic; }
.people__pdf { display: inline-flex; gap: 0.4rem; margin-left: 0.6rem; vertical-align: middle; } .people__pdf .btn { padding: 0.15rem 0.7rem; font-size: 0.8rem; }

/* Guidance lines inside the red phase sheet were the muted brown of the cream
 * page, which on red is close to invisible. */
.sheet__panel--form .doc__how { color: var(--on-accent-2, rgba(255, 255, 255, 0.85)); border-left-color: rgb(255 255 255 / 0.4); }

/* A card for somebody with no work added: a plain plate that says so. */
.tile--none { background: var(--color-paper-2, #f1eac8); display: flex; align-items: center; justify-content: center; }
.tile--none .tile__none { font-size: 0.85rem; opacity: 0.7; }
.match-card__cover, .match-card__why { margin: 0.2rem 0 0; font-size: 0.8rem; }

/* Editing a piece of work on the profile. */
.sampleedit li { flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sampleedit__thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 6px; }
.sampleedit__what { flex: 1 1 12rem; }
.sampleedit__form { flex: 1 1 100%; padding: 0.75rem 0 0.25rem; }
.sampleedit__form .field { margin-bottom: 0.75rem; }

/* A commission in sessions, and the showroom a committee reads it in. */
.sessions { margin: 0.5rem 0 1rem; display: grid; gap: 0.35rem; }
.sessions__row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.4rem 0.6rem; border-left: 3px solid currentColor; opacity: 0.7; }
.sessions__row.is-in { opacity: 1; }
.sessions__answers { display: block; flex: 1 1 100%; }
.attach__kind--session { background: var(--color-accent-deep, #a33a1f); color: #fff; }
.reviewers { list-style: none; padding: 0; margin: 0.5rem 0; }
.reviewers li { padding: 0.2rem 0; }
.reviewers .is-ok strong::before { content: '\2713  '; }
.reviewers .is-changes strong::before { content: '\26a0  '; }
.srwho { display: grid; gap: 0.5rem; max-width: 28rem; margin-bottom: var(--space-lg, 1.5rem); }
.sr__session { margin: var(--space-lg, 1.5rem) 0 0.5rem; }
.srdoc { padding: 0.9rem 0; border-top: 1px solid rgba(43, 26, 20, 0.2); display: grid; gap: 0.5rem; }
.srdoc textarea { width: 100%; }


/* ---------- the contract, as a document ----------
 * A page on the red sheet: paper, numbered clauses, a signature block. A file
 * somebody uploaded is shown in the same place, in a frame, instead. Colours are
 * set on every element: the sheet it sits on sets pale text on its own paragraphs
 * and headings, and on paper that reads as nothing. */
.contractview { margin: var(--space-md) 0; }
.contractview .contract {
  background: var(--color-paper, #FBF6D8); border-radius: var(--radius-lg, 1rem);
  padding: clamp(1rem, 4vw, 2rem); max-height: 32rem; overflow-y: auto;
}
.contractview .contract, .contractview .contract p, .contractview .contract li,
.contractview .contract h3, .contractview .contract strong, .contractview .contract em { color: #2B1A14; }
.contractview .contract .meta, .contractview .contract__who span { color: #6B5A50; }
.contractview .contract__kicker, .contractview .contract h4 { color: #A33A1F; }
.contractview .contract__head { border-bottom: 1px solid rgba(43,26,20,0.18); padding-bottom: var(--space-md); margin-bottom: var(--space-md); }
.contractview .contract__kicker { font-size: var(--text-xs, 0.75rem); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.contractview .contract__head h3 { margin: 0.3rem 0 0.1rem; font-size: var(--text-xl, 1.5rem); }
.contractview .contract__subject { margin: 0; font-weight: 600; }
.contractview .contract__clause { margin-bottom: var(--space-md); }
.contractview .contract h4 { margin: 0 0 0.35rem; font-size: var(--text-sm, 0.95rem); }
.contractview .contract__clause p, .contractview .contract__clause li { margin: 0 0 0.45rem; font-size: var(--text-sm, 0.95rem); line-height: 1.55; }
.contractview .contract__clause ul { margin: 0 0 0.45rem 1.1rem; padding: 0; }
.contractview .contract__lead { font-weight: 700; margin-bottom: 0.2rem !important; }
.contractview .contract__sign { border-top: 1px solid rgba(43,26,20,0.18); padding-top: var(--space-md); }
.contractview .contract__who { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-md); padding: 0.35rem 0; font-size: var(--text-sm, 0.95rem); }
.contractview .contract__who span { grid-column: 1; font-size: var(--text-xs, 0.8rem); }
.contractview .contract__who em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: #6B5A50; }
.contractview .contract__who.is-in em { color: #1F6B3A; font-weight: 600; }
.contractview .contract__note { margin-top: var(--space-md); }
.contractview > .btn { margin-top: var(--space-md); }
.fileview { margin: 0 0 var(--space-md); }
.fileview__frame { display: block; width: 100%; height: 34rem; max-height: 70vh; border: 0; border-radius: var(--radius-lg, 1rem); background: #fff; }
.fileview__img { display: block; max-width: 100%; border-radius: var(--radius-lg, 1rem); }
.fileview__cap { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: 0.4rem; font-size: var(--text-sm, 0.9rem); }
.fileview__cap a { color: inherit; }
.fileview__name { font-weight: 600; margin: 0 0 0.4rem; }

/* ---------- what an action item is about ----------
 * Chosen before the box for the words opens, and shown on the item for the
 * person who reads it. */
.catpick { margin-bottom: var(--space-md); }
.catpick__ask { margin: 0 0 var(--space-sm); font-weight: 600; }
.catpick__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.catpick__btn {
  font: inherit; font-size: var(--text-sm, 0.9rem); cursor: pointer;
  padding: 0.55rem 0.95rem; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
}
.catpick__btn:hover, .catpick__btn:focus-visible { background: rgba(255,255,255,0.14); outline: none; }
.catpick__chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.catpick__chosen strong { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.18); }
.ai-detail[hidden] { display: none; }
.flag__cat { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: var(--text-sm, 0.9rem); }
.flag__cat span { opacity: 0.75; }
.flag__cat strong { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.2); }


/* The action item panel is a light card set on the red sheet, and it was
 * inheriting the sheet's pale text: its heading, its hint, its quiet buttons and
 * its category buttons all read as nothing. On the card, text is ink. */
.ai-panel { color: var(--color-ink); }
.ai-panel .label { color: #A33A1F; }
.ai-panel p, .ai-panel .meta, .ai-panel label, .ai-panel .catpick__ask { color: #3b2a22; }
.ai-panel .btn--quiet { color: var(--color-ink); border-color: rgba(43,26,20,0.4); background: transparent; }
.ai-panel .btn--quiet:hover { background: rgba(43,26,20,0.07); }
.ai-panel .btn--primary { background: #A33A1F; border-color: #A33A1F; color: #fff; }
.ai-panel .catpick__btn { background: #fff; color: var(--color-ink); border-color: rgba(43,26,20,0.35); }
.ai-panel .catpick__btn:hover, .ai-panel .catpick__btn:focus-visible { background: #A33A1F; border-color: #A33A1F; color: #fff; }
.ai-panel .catpick__chosen strong { background: rgba(163,58,31,0.12); color: #A33A1F; }
.ai-panel .attach__list, .ai-panel .attach__list a { color: var(--color-ink); }
.ai-panel .field label { color: #3b2a22; }


/* ---------- "a proposal first" ----------
 * Three tiers as cards on the red sheet: paper with ink, so they read at once.
 * The cast sheet and the commissioner's needs sit beside them. Phone first: the
 * cards stack. */
.proposal__tiers { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin: var(--space-md) 0; }
.tiercard { background: var(--color-paper, #FBF6D8); border: 2px solid transparent; border-radius: var(--radius-lg, 1rem); padding: var(--space-md); }
.tiercard, .tiercard p, .tiercard li, .tiercard h4, .tiercard label, .tiercard strong { color: #2B1A14; }
.tiercard.is-rec { border-color: #A33A1F; }
.tiercard.is-chosen { border-color: #1F6B3A; background: #EEF6E6; }
.tiercard h4 { margin: 0 0 0.2rem; font-size: var(--text-lg, 1.15rem); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tiercard__badge { font-size: var(--text-xs, 0.72rem); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; background: #A33A1F; color: #fff !important; }
.tiercard__badge--on { background: #1F6B3A; }
.tiercard__line { margin: 0 0 0.5rem; font-size: var(--text-sm, 0.9rem); color: #6B5A50 !important; }
.tiercard ul { margin: 0 0 0.6rem 1.1rem; padding: 0; font-size: var(--text-sm, 0.92rem); line-height: 1.5; }
.tiercard__price { margin: 0.2rem 0 0; font-size: var(--text-xl, 1.5rem); font-weight: 700; color: #A33A1F !important; }
.tiercard__dep { margin: 0 0 0.6rem; font-size: var(--text-xs, 0.8rem); color: #6B5A50 !important; }
.tiercard .btn--primary { background: #A33A1F; border-color: #A33A1F; color: #fff; width: 100%; }
.tiercard--edit .field { margin-bottom: 0.6rem; }
.tiercard--edit label { font-size: var(--text-xs, 0.8rem); }
.tiercard--edit input[type=text], .tiercard--edit input[type=number] { width: 100%; }
.tiercard__rec { display: flex; gap: 0.4rem; align-items: center; font-size: var(--text-sm, 0.9rem); }
.proposal__terms { margin: var(--space-md) 0; }
.proposal__terms summary { cursor: pointer; font-weight: 600; }
.needsblock { margin: var(--space-md) 0; padding: var(--space-md); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-lg, 1rem); }
.needsblock__list { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.25rem var(--space-md); margin: 0.5rem 0 0; font-size: var(--text-sm, 0.92rem); }
.needsblock__list dt { opacity: 0.75; }
.needsblock__list dd { margin: 0; font-weight: 600; }
@media (max-width: 30rem) { .needsblock__list { grid-template-columns: 1fr; } .needsblock__list dd { margin-bottom: 0.4rem; } }
.cast { margin: var(--space-md) 0; padding: var(--space-md); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-lg, 1rem); }
.cast__rows { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0; }
.cast__row { display: grid; grid-template-columns: 1.3fr 1.3fr 0.9fr 1.4fr auto; gap: 0.5rem; align-items: center; }
.cast__row input, .cast__row select { width: 100%; min-width: 0; }
.cast__row--read { grid-template-columns: 1.3fr 1.3fr auto 1fr; }
.cast__state { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.18); font-size: var(--text-xs, 0.78rem); text-transform: capitalize; justify-self: start; }
.cast__state--confirmed, .cast__state--released { background: #1F6B3A; color: #fff; }
@media (max-width: 40rem) { .cast__row, .cast__row--read { grid-template-columns: 1fr; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.18); } }
.seatsuggest { margin: var(--space-md) 0; padding: var(--space-md); border: 1px dashed rgba(255,255,255,0.45); border-radius: var(--radius-lg, 1rem); }
.seatsuggest__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0; }
.seatsuggest__row p { margin: 0.1rem 0 0; }
@media (max-width: 30rem) { .seatsuggest__row { grid-template-columns: 1fr 1fr; } .seatsuggest__row > div { grid-column: 1 / -1; } }

/* A chosen option on the brief form turns white, and its small print was left
 * the sheet's pale colour, so "typical commission" and "priced by the proposal"
 * read as nothing. On white, the small print is muted ink. */
.cform .option-slab[aria-pressed="true"] .meta,
.cform .option-slab[aria-pressed="true"] ul { color: #6B5A50; }

.tiercard--edit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.6rem; align-content: start; }
.tiercard--edit .field:nth-child(1), .tiercard--edit .field:nth-child(8), .tiercard--edit .field:nth-child(9), .tiercard--edit .tiercard__rec { grid-column: 1 / -1; }
.tiercard--edit .field label, .tiercard--edit .tiercard__rec { color: #2B1A14; }
.tiercard--edit .field input { background: #fff; color: #2B1A14; }

.cast__row { grid-template-columns: 1.2fr 1.2fr 1.35fr 1.2fr auto; }
.cast__row select { min-width: 7.5rem; }
@media (max-width: 40rem) { .cast__row, .cast__row--read { grid-template-columns: 1fr; } }

.taste__from { display: block; font-size: var(--text-xs, 0.75rem); opacity: 0.8; margin-top: 0.15rem; }
.taste__other { margin-top: var(--space-sm); }

.rolecard__steps { margin: 0.5rem 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.rolecard__steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: start; font-size: var(--text-sm, 0.92rem); }
.rolecard__tick { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.rolecard__steps li.is-done .rolecard__tick { background: #1F6B3A; border-color: #1F6B3A; color: #fff; }

.rolecard__steps { display: grid; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.rolecard__step { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; font-size: var(--text-sm, 0.92rem); }
.rolecard__step.is-done .rolecard__tick { background: #1F6B3A; border-color: #1F6B3A; color: #fff; }


/* ---------- an action item, as a tile in the room's messages ---------- */
.actiontile {
  margin: 0.6rem 0; padding: 0.8rem 0.9rem; border-radius: var(--radius-lg, 1rem);
  background: var(--color-paper, #FBF6D8); border: 1px solid #C9C1A0; border-left: 4px solid #A33A1F;
}
.actiontile, .actiontile p, .actiontile strong, .actiontile blockquote { color: #2B1A14; }
.actiontile .meta { color: #6B5A50; }
.actiontile__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.actiontile__tag { font-size: var(--text-xs, 0.72rem); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #A33A1F; }
.actiontile__state { font-size: var(--text-xs, 0.75rem); padding: 0.1rem 0.55rem; border-radius: 999px; background: #A33A1F; color: #fff; }
.actiontile.is-answered { border-left-color: #1F6B3A; opacity: 0.85; }
.actiontile.is-answered .actiontile__state { background: #1F6B3A; }
.actiontile.is-answered .actiontile__tag { color: #1F6B3A; }
.actiontile__about { margin: 0 0 0.35rem; }
.actiontile__quote { margin: 0.25rem 0 0.4rem; padding-left: 0.7rem; border-left: 2px solid #C9C1A0; font-style: italic; font-size: var(--text-sm, 0.9rem); }
.actiontile__note { margin: 0 0 0.4rem; line-height: 1.5; }
.actiontile__go { margin-top: 0.4rem; color: #2B1A14; border-color: rgba(43,26,20,0.4); }


/* ---------- Cura, the assistant in the room's messages ---------- */
.agentbar { margin: 0 0 0.75rem; padding: 0.7rem 0.8rem; border-radius: 0.9rem; background: #EEF4EE; border: 1px solid #B8CDB8; border-left: 4px solid #1F6B3A; }
.agentbar, .agentbar .meta { color: #2B1A14; }
.agentbar .meta { color: #4a5a4a; }
.agentbar__label { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.agentbar__badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; background: #1F6B3A; color: #fff; }
.agentbar__note { font-size: 0.78rem; color: #4a5a4a; }
.agentbar__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.agentbar__tag {
  font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 1rem; border-radius: 999px; border: 0; background: #1F6B3A; color: #fff;
}
.agentbar__tag span { display: inline-flex; width: 1.3rem; height: 1.3rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.22); font-size: 0.85rem; }
.agentbar__tag:hover, .agentbar__tag:focus-visible { background: #17522c; outline: none; }
.agentbar__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.agentbar__chip {
  font: inherit; font-size: var(--text-sm, 0.85rem); cursor: pointer; padding: 0.35rem 0.75rem; border-radius: 999px;
  border: 1px solid #1F6B3A; background: #fff; color: #1F6B3A;
}
.agentbar__chip:hover, .agentbar__chip:focus-visible { background: #1F6B3A; color: #fff; outline: none; }
.agentbar__hint { display: block; margin-top: 0.35rem; font: inherit; cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 0.6rem; border: 1px solid #B8CDB8; background: #EEF4EE; color: #2B1A14; text-align: left; }
.agentbar__hint strong { color: #1F6B3A; }
.mention { color: #1F6B3A; font-weight: 700; background: rgba(31,107,58,0.12); border-radius: 0.3rem; padding: 0 0.2rem; }
.agentmsg { margin: 0.6rem 0; padding: 0.75rem 0.9rem; border-radius: var(--radius-lg, 1rem); background: #EEF4EE; border: 1px solid #B8CDB8; border-left: 4px solid #1F6B3A; }
.agentmsg, .agentmsg p, .agentmsg strong { color: #2B1A14; }
.agentmsg .meta { color: #5d6b5d; }
.agentmsg__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.agentmsg__badge { font-size: var(--text-xs, 0.72rem); padding: 0.1rem 0.55rem; border-radius: 999px; background: #1F6B3A; color: #fff; }
.agentmsg__text { margin: 0 0 0.4rem; white-space: pre-wrap; line-height: 1.5; }
.agentmsg__foot { margin: 0; font-size: var(--text-xs, 0.78rem); }
.agentmsg--typing { opacity: 0.8; }


/* ---------- the desk: a person's sheet, and the notes it sends ---------- */
.personlink { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  border-bottom: 1px dotted currentColor; }
.personlink:hover, .personlink:focus-visible { color: #A33A1F; border-bottom-style: solid; outline: none; }
.personlink--strong { font-weight: 700; }
.personsheet, .personsheet p, .personsheet strong, .personsheet h3 { color: #2B1A14; }
.personsheet .meta { color: #6B5A50; }
.personsheet__row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.personsheet__h { margin: 1.4rem 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B5A50; }
.personsheet__item { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid #E3DBB8; }
.personsheet__msg { padding: 0.6rem 0; border-top: 1px solid #E3DBB8; }
.personsheet__msgbody { white-space: pre-wrap; line-height: 1.5; }
.personsheet textarea, .personsheet input[type=text], .personsheet select { width: 100%; font: inherit; }
.deskmsg { padding: 0.8rem 0; border-top: 1px solid #E3DBB8; }
.deskmsg, .deskmsg h3, .deskmsg p { color: #2B1A14; }
.deskmsg__body { white-space: pre-wrap; line-height: 1.55; }
.deskmsg-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* The money reminder inside the brief and budget sheets. */
.moneyflag, .moneyflag p, .moneyflag .label { color: inherit; }
.moneyflag p { margin: 0.25rem 0 0; }


/* ---------- the casting desk ---------- */
.subnav .count--urgent:not(:empty), .subnav a[aria-current="page"] .count--urgent:not(:empty) { background: #A33A1F; color: #fff; }
.castbar { display: block; width: 100%; margin: 0 0 var(--space-md); padding: 0.6rem 0.9rem; border-radius: 0.6rem; text-align: left;
  font: inherit; font-size: 0.85rem; background: #F1EAC8; color: #2B1A14; border: 1px solid #C9C1A0; }
.castbar--urgent { background: #A33A1F; color: #fff; border-color: #8a2f17; }
.castbar--link { cursor: pointer; font-weight: 700; border-radius: 0; margin: 0; }
.castbar--link:hover, .castbar--link:focus-visible { filter: brightness(0.95); outline: none; }
.castneed { margin: 0 0 var(--space-lg); padding: 1rem 1.1rem; border: 1px solid #C9C1A0; border-left: 5px solid #C9C1A0; border-radius: 0.8rem; background: #FFFDF2; }
.castneed, .castneed h2, .castneed p, .castneed strong, .castneed li { color: #2B1A14; }
.castneed .meta, .castneed .castperson__line { color: #6B5A50; }
.castneed--urgent { border-left-color: #A33A1F; }
.castneed.is-focus { box-shadow: 0 0 0 2px #A33A1F; }
.castneed__top { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.castneed__title { margin: 0 0 0.2rem; font-size: 1.15rem; }
.castneed__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.cast-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #F1EAC8; color: #2B1A14; border: 1px solid #C9C1A0; }
.cast-chip--urgent { background: #A33A1F; color: #fff; border-color: #A33A1F; }
.cast-chip--warn { background: #FBE9D2; border-color: #D9A15C; }
.cast-chip--ok { background: #E3F0E3; border-color: #9CC49C; }
.castspec { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: #F7F1D4; }
.castoffered { margin: 0.4rem 0; font-size: 0.85rem; font-weight: 600; }
.castlist { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.castperson { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: start; padding: 0.7rem; border: 1px solid #E3DBB8; border-radius: 0.6rem; background: #fff; cursor: pointer; }
.castperson:has(input:checked) { border-color: #1F6B3A; background: #EEF4EE; }
.castperson__head { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline; }
.castperson__line { margin: 0.2rem 0; font-size: 0.85rem; }
.castperson__facts { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.3rem 0; }
.castperson__why { margin: 0.2rem 0; padding-left: 1.1rem; font-size: 0.82rem; }
.castperson__work { margin: 0.2rem 0 0; font-size: 0.82rem; }
.castperson .cc-face { width: 2.6rem; height: 2.6rem; }
@media (max-width: 40rem) { .castperson { grid-template-columns: auto minmax(0, 1fr); } .castperson > .btn { grid-column: 2; justify-self: start; } .castperson .cc-face { display: none; } }
.castjump { white-space: nowrap; }

/* The note under a button in the money card sits on cream inside the red sheet, so it
 * is dark, not the sheet's pale. */
.paygate .crew__add, .paygate .crew__add .meta { color: #2B1A14; }
.paygate .crew__add .meta { color: #6B5A50; }

/* The two ways out of a project that is not working. */
.exits { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.exitcard { padding: 0.9rem 1rem; border-radius: 0.8rem; border: 1px solid #C9C1A0; background: #FFFDF2; }
.exitcard, .exitcard h3, .exitcard p { color: #2B1A14; }
.exitcard p { margin: 0.3rem 0 0.7rem; font-size: 0.88rem; line-height: 1.45; }
.exitcard__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.exitcard h3 { margin: 0; font-size: 1.05rem; }
.exitcard__tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.55rem; border-radius: 999px; background: #F1EAC8; border: 1px solid #C9C1A0; }
.exitcard__tag--now { background: #E3F0E3; border-color: #9CC49C; color: #1F6B3A; }
.exitcard--swap { border-left: 4px solid #1F6B3A; }
.exitcard--end { border-left: 4px solid #6B5A50; }

/* A delivered commission is done: greyed back, with the one thing left on it, saying
 * something was wrong, beside the way into the record. */
.project-row--delivered .rowshot, .project-row--delivered .coverslot { filter: grayscale(1); opacity: 0.7; }
.project-row--delivered h3, .project-row--delivered p, .project-row--delivered .meta { color: #8a8174; }
.project-row--delivered .btn--quiet { color: #6B5A50; }
.rowacts { display: grid; gap: 0.5rem; }
.rowacts .btn { width: 100%; }
.btn--report { border-style: dashed; }

/* Delivered work on the profile. */
.delivgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-md); margin-top: var(--space-sm); }
.delivcard { border: 1px solid #C9C1A0; border-radius: 0.8rem; overflow: clip; background: #FFFDF2; }
.delivcard, .delivcard h3, .delivcard p { color: #2B1A14; }
.delivcard .meta { color: #6B5A50; }
.delivcard__shot { aspect-ratio: 2 / 1; background: var(--gradient-ember); }
.delivcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.delivcard__body { padding: 0.7rem 0.8rem; display: grid; gap: 0.35rem; justify-items: start; }
.delivcard__body h3 { margin: 0; font-size: 1rem; }
.delivcard.is-off .delivcard__shot { filter: grayscale(1); opacity: 0.6; }

.castoffer { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; padding: 0.45rem 0.6rem; border-radius: 0.5rem; background: #F7F1D4; }
.castoffer, .castoffer span { color: #2B1A14; }
.castamt { width: 6.5rem; font: inherit; padding: 0.3rem 0.5rem; border: 1px solid #C9C1A0; border-radius: 0.4rem; background: #fff; color: #2B1A14; }
.castreset { font: inherit; font-size: 0.78rem; background: none; border: 0; padding: 0; color: #A33A1F; text-decoration: underline; cursor: pointer; }
.castoffer__why { flex-basis: 100%; margin: 0; font-size: 0.78rem; color: #6B5A50; }

.castback { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed #C9C1A0; display: grid; gap: 0.4rem; justify-items: start; }
.castback .field { width: 100%; margin: 0; }
.seatback { margin-top: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 0.6rem; background: #FBE9D2; border: 1px solid #D9A15C; }
.seatback, .seatback p, .seatback .label { color: #2B1A14; }
.seatback p { margin: 0.2rem 0 0.6rem; }
.seatback__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Finished work is grey everywhere it is listed, the desk's lists included: even the
 * main button is quiet, because there is nothing left to do on it. */
.project-row--delivered .btn--primary { background: #B9B2A0; border-color: #B9B2A0; color: #fff; }
.project-row--delivered .status-mark, .project-row--delivered .status-mark--active { color: #8a8174; border-color: #C9C3B0; background: transparent; }
.brief-interest.project-row--delivered { border: 0; }

/* The people a brief reached, as a dropdown under it. */
details.brief-interest { margin: 0 0 var(--space-md); padding-left: 0.2rem; }
details.brief-interest > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); padding: 0.35rem 0.2rem; }
details.brief-interest > summary::-webkit-details-marker { display: none; }
details.brief-interest > summary::before { content: '\25B8'; display: inline-block; transition: transform 0.15s; }
details.brief-interest[open] > summary::before { transform: rotate(90deg); }
details.brief-interest > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
details.brief-interest.project-row--delivered > summary { color: #8a8174; }

/* A length: a number and seconds or minutes. */
.cform__durrow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.cform__durnum { width: 7.5rem; }
/* A finished Studio project is grey, like every other finished thing. */
.stackcard--done { border-left-color: #C9C3B0; }
.stackcard--done h3, .stackcard--done h3 a, .stackcard--done p, .stackcard--done .meta { color: #8a8174; }
.stackcard--done .progress__bar { background: #B9B2A0; }
.stackcard--done .btn--primary, .stackcard--done .progbtn { filter: grayscale(1); opacity: 0.8; }
.stackcard--done .status-mark { color: #8a8174; border-color: #C9C3B0; background: transparent; }

.cast-chip--ai { background: #E8E4FA; border-color: #A79BDB; color: #2B1A14; }
.castfee { margin: 0.5rem 0; font-size: 0.9rem; line-height: 1.5; }
.castfee strong { font-size: 1.05rem; }
.castsend { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 0.7rem; background: #EEF4EE; border: 1px solid #B8CDB8; border-left: 4px solid #1F6B3A; }
.castsend, .castsend p { color: #2B1A14; }
.castsend__note { margin: 0 0 0.6rem; font-size: 0.85rem; }
.castsend .castneed__acts { margin-top: 0; }
.castsend .btn--big { font-size: 1.05rem; padding: 0.85rem 1.4rem; flex: 1 1 16rem; background: #1F6B3A; border-color: #1F6B3A; color: #fff; }
.castsend .btn--primary:disabled { opacity: 0.55; }

/* The way out of editing a sent brief, at the top of the form on every step. */
.editbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 0 0 var(--space-md); padding: 0.8rem 1rem; border-radius: 0.8rem; background: #FFFDF2; border: 1px solid #C9C1A0; border-left: 5px solid #A33A1F; box-shadow: 0 4px 14px rgb(42 20 16 / 0.12); }
.editbar, .editbar strong, .editbar__sub { color: #2B1A14; }
.editbar strong { display: block; }
.editbar__sub { display: block; font-size: 0.85rem; color: #6B5A50; }
.editbar__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* What is offered and not answered, changeable. */
.castoffered { margin: 0.5rem 0; padding: 0.7rem 0.8rem; border-radius: 0.6rem; background: #FBE9D2; border: 1px solid #D9A15C; }
.castoffered, .castoffered p, .castoffered span { color: #2B1A14; }
.castoffered__t { margin: 0 0 0.5rem; font-size: 0.88rem; font-weight: 600; }
.castoffered__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* A refusal on the casting desk is said where the button is, and loudly. */
.castneed .castout:empty { display: none; }
.castneed .castout:not(:empty) { margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: #FBE9D2; border: 1px solid #D9A15C; color: #2B1A14; font-weight: 600; }

/* A person on the casting desk is a dropdown: name and the few things that decide, profile inside. */
details.castperson { display: block; padding: 0; border: 1px solid #E3DBB8; border-radius: 0.6rem; background: #fff; }
details.castperson:has(input:checked) { border-color: #1F6B3A; background: #EEF4EE; }
.castperson__sum { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; }
.castperson__sum::-webkit-details-marker { display: none; }
.castperson__who { flex: 1 1 auto; min-width: 0; }
.castperson__who .castperson__facts { margin: 0.2rem 0 0; }
.castperson__amt { flex: none; }
.castperson__caret { flex: none; transition: transform 0.15s; color: #6B5A50; }
details.castperson[open] > .castperson__sum .castperson__caret { transform: rotate(90deg); }
.castperson__body { padding: 0 0.9rem 0.8rem 3.6rem; display: grid; gap: 0.3rem; }
@media (max-width: 40rem) { .castperson__body { padding-left: 0.9rem; } .castperson__sum .cc-face { display: none; } }
.castdone { margin: 0 0 var(--space-md); padding: 0.9rem 1.1rem; border: 1px solid #C9C3B0; border-left: 5px solid #9CC49C; border-radius: 0.8rem; background: #FBFAF0; }
.castdone, .castdone h3, .castdone p { color: #2B1A14; }
.castdone .meta { color: #6B5A50; }

/* A casting tile is a dropdown: closed, it is its name, where it stands and what it waits on. */
details.castneed { padding: 0; }
.castneed__sum { display: block; position: relative; padding: 1rem 5.5rem 0.9rem 1.1rem; cursor: pointer; list-style: none; }
.castneed__sum::-webkit-details-marker { display: none; }
.castneed__more { position: absolute; right: 1.1rem; top: 1rem; font-size: 0.82rem; font-weight: 700; color: #A33A1F; }
details.castneed[open] > .castneed__sum .castneed__more { display: none; }
.castneed__state { margin: 0.25rem 0 0; font-size: 0.88rem; font-weight: 600; }
details.castneed > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
details.castneed > :last-child { margin-bottom: 1.1rem; }
/* A seat on the casting desk is a commission card, the same as on the Commissions tab. */
article.comm.castneed { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule-2); border-left-width: 5px; border-radius: 18px; background: var(--color-paper); margin: 0 0 var(--space-md); }
article.comm.castneed, article.comm.castneed h2, article.comm.castneed h3, article.comm.castneed p, article.comm.castneed strong, article.comm.castneed li { color: inherit; }
article.comm.castneed .meta { color: var(--color-muted); }
article.comm.castneed.castneed--urgent { border-left-color: #A33A1F; }
article.comm.castneed.is-focus { box-shadow: 0 0 0 2px #A33A1F; }
article.comm.castneed > .comm__panel > * { margin-left: 0; margin-right: 0; }
.comm__panel[hidden], .comm__full[hidden] { display: none; }
.castsearch { margin: 0.6rem 0; }
.castsearch__in { width: 100%; font: inherit; padding: 0.6rem 0.8rem; border: 1px solid #C9C1A0; border-radius: 0.5rem; background: #fff; color: #2B1A14; }
.castsearch__out { margin-top: 0.5rem; }
.castdone--back { border-left-color: #D9A15C; }
.castperson__body { cursor: auto; }

/* The director's share of the fee, in the crew room. */
.takecard { margin: 0 0 var(--space-md); padding: 0.9rem 1rem; border-radius: 0.8rem; background: #FFFDF2; border: 1px solid #C9C1A0; border-left: 5px solid #A33A1F; }
.takecard, .takecard p, .takecard span, .takecard strong, .takecard .label { color: #2B1A14; }
.takecard .meta { color: #6B5A50; }
.takecard__lines { margin: 0.3rem 0 0.6rem; line-height: 1.6; }
.takecard__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0; }
.takecard .chip { background: #F1EAC8; color: #2B1A14; border: 1px solid #C9C1A0; }

/* A seat offered to somebody: the part, and the amount, before they answer. */
.seatoffer { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: 0.5rem; background: rgba(255,255,255,0.55); border: 1px solid #D9A15C; }
.seatoffer, .seatoffer p, .seatoffer strong, .seatoffer .label { color: #2B1A14; }
.seatoffer p { margin: 0.15rem 0; }
.seatoffer strong { font-size: 1.1rem; }
.seatoffer .meta { color: #6B5A50; }

/* ---------- a press is answered ----------
 * Every button dips while it is held and springs back, with a ring, when it is let go. Done with the
 * individual `scale` property, so it never fights a transform a button already uses to sit where it does. */
:is(button, .btn, [role="button"], .chip, .cform__chip):not(:disabled):not([aria-disabled="true"]):active { scale: 0.95; }
:is(.card--opens, .coverslot, summary, .castperson__sum, .castneed__sum):active { scale: 0.99; }
.click-pop { animation: click-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes click-pop {
  0%   { scale: 0.94; box-shadow: 0 0 0 0 rgb(163 58 31 / 0.45); }
  45%  { scale: 1.04; }
  100% { scale: 1;    box-shadow: 0 0 0 12px rgb(163 58 31 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  :is(button, .btn, [role="button"], .chip, .cform__chip):active { scale: none; }
  .click-pop { animation: none; }
}
/* The step names on Start a production are doors. */
.stepper li.is-jumpable { cursor: pointer; }
.stepper li.is-jumpable:hover { color: var(--color-accent-deep); }
.stepper li.is-jumpable:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- what the commissioner supplied: assets and the design guide ---------- */
.material { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: 14px; background: var(--color-paper-2); }
.material__h { margin: 0 0 var(--space-xs); font-size: 1.05rem; }
.material .label { display: block; margin: var(--space-sm) 0 var(--space-2xs); }
.material__list { list-style: none; margin: 0; padding: 0; }
.material__item { display: flex; gap: 0.7rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--color-rule-2); }
.material__item:last-child { border-bottom: 0; }
.material__item a { font-weight: 600; overflow-wrap: anywhere; }
.material__thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--color-paper-3); font-size: 1.1rem; }
.material__meta { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.material__note { margin: var(--space-xs) 0 0; white-space: pre-wrap; }

/* ---------- the admin's Files sheet: a card for each stage ---------- */
.filesheet__stages { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.filesheet__card { border: 1px solid var(--color-rule-2); border-radius: 16px; padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.filesheet__card.is-quiet { background: var(--color-paper-2); }
.filesheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.filesheet__head h3 { margin: 0; font-size: 1.05rem; }
.filesheet__count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 0.2rem 0.65rem; background: var(--color-accent); color: var(--color-on-accent); }
.filesheet__count.is-empty { background: var(--color-paper-3); color: var(--color-muted); }
.filesheet__blurb { margin: var(--space-2xs) 0 0; }
.filesheet__list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.filesheet__item { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--color-rule-2); }
.filesheet__item:last-child { border-bottom: 0; }
.filesheet__thumb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; background: var(--color-paper-3); font-size: 1.2rem; }
.filesheet__thumb--link { background: var(--color-flare); color: #fff; }
.filesheet__what { min-width: 0; display: grid; gap: 0.1rem; }
.filesheet__name { font-weight: 600; overflow-wrap: anywhere; }
.filesheet__meta { font-size: var(--text-sm); color: var(--color-muted); }
.filesheet__kind { color: var(--color-ink); }
.filesheet__add { margin-top: var(--space-xs); }
.filesheet__add > summary { cursor: pointer; font-weight: 600; color: var(--color-accent); }
.filesheet__addrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-xs); align-items: center; }
.filesheet__addrow .input { flex: 1 1 14rem; min-width: 0; }
.filesheet__say:empty { display: none; }

/* A short film plays on its card, and goes back to the cover when it scrolls away. */
.tile__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1; }
.tile__loop.is-live { opacity: 1; }
.tile.is-looping .tile__play { display: none; }
.lb__slide { position: relative; }
.lb__paused { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 1.4rem; pointer-events: none; }
.lb__paused[hidden] { display: none; }

/* ---------- the admin's Release stage ---------- */
.relsheet__h { margin: var(--space-md) 0 var(--space-2xs); }
.relsheet__check { display: flex; gap: 0.7rem; align-items: flex-start; margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper-2); cursor: pointer; }
.relsheet__check input { margin-top: 0.25rem; }
.relsheet__list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.relsheet__item { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; border: 1px solid var(--color-rule-2); border-radius: 12px; }
.relsheet__item label { display: flex; gap: 0.7rem; align-items: center; flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.relsheet__thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; background: var(--color-paper-3); font-size: 1.2rem; }

/* ---------- a managed production ---------- */
.prod { padding-block: var(--space-xl); max-width: 62rem; }
.prod h1 { margin: var(--space-2xs) 0 var(--space-sm); }
.prod h2 { margin: var(--space-lg) 0 var(--space-xs); font-size: 1.25rem; }
.prod h3 { margin: var(--space-md) 0 var(--space-2xs); font-size: 1.02rem; }
.prod h4 { margin: var(--space-sm) 0 var(--space-2xs); font-size: 0.95rem; }
.prod__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: var(--space-sm) 0; }
.prod__facts dt, .prod__card dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.prod__facts dd, .prod__card dd { margin: 0; }
.prod__nda { border: 1px solid var(--color-rule-2); border-radius: 16px; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); margin: var(--space-md) 0; }
.prod__nda ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; margin: 0; }
.prod__agree { display: flex; gap: 0.7rem; align-items: flex-start; margin: var(--space-sm) 0; cursor: pointer; }
.prod__strip { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--space-xs); margin: var(--space-sm) 0; }
.prod__tile { display: grid; gap: 0.15rem; align-content: start; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 14px; }
.prod__tile--before, .prod__tile--after { opacity: 0.6; background: var(--color-paper-2); }
.prod__tile--yours { border: 2px solid var(--color-accent); background: var(--color-paper); }
@media (max-width: 40rem) { .prod__strip { grid-template-columns: 1fr; } }
.prod__card { display: grid; gap: 0.15rem; margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-md); border-radius: 14px; background: var(--color-paper-2); }
.prod__card dd { margin-bottom: 0.5rem; }
.prod__stage { margin: var(--space-lg) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule-2); }
.prod__slot { margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 12px; }
.prod__slothead { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.prod__note { margin: var(--space-2xs) 0; color: var(--color-warn); font-weight: 600; }
.prod__files { list-style: none; padding: 0; margin: var(--space-2xs) 0; display: grid; gap: 0.25rem; }
.prod__up, .prod__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: var(--space-2xs); }
.prod__row .input { flex: 1 1 12rem; min-width: 0; }
.prod__chip { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 0.15rem 0.6rem; background: var(--color-paper-3); color: var(--color-ink); }
.prod__chip--uploaded { background: var(--color-accent-wash); }
.prod__chip--changes-asked { background: var(--color-warn-wash); color: var(--color-warn); }
.prod__chip--approved { background: var(--color-ok-wash); color: var(--color-ok); }
.prod__panel { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: 16px; }
.prod__panel > h2 { margin-top: 0; }
.prod__guest { margin: var(--space-2xs) 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.prod__guest .input { flex: 1 1 100%; }
.prod__tile-editor { margin: var(--space-xs) 0; border: 1px solid var(--color-rule-2); border-radius: 14px; padding: var(--space-xs) var(--space-sm); }
.prod__tile-editor > summary { cursor: pointer; padding: var(--space-2xs) 0; }
.prod__tile-editor--new > summary { color: var(--color-accent); font-weight: 700; }
.prod__form { margin-top: var(--space-xs); }
.prod__form .field textarea, .prod__form .field input, .prod__form .field select { width: 100%; }
.prod__thread .prod__msg { margin: var(--space-2xs) 0; }
.prod__overview { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.tl-managed { list-style: none; margin: var(--space-xs) 0; }
.prod__tile .prod__chip { justify-self: start; }

/* ---------- the consultation ---------- */
.consult__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-sm); }
.consult__tier { display: grid; gap: 0.4rem; align-content: start; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: 16px; background: var(--color-paper); }
.consult__price { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.consult__decisions { list-style: none; padding: 0; margin: 0 0 var(--space-xs); display: grid; gap: 0.35rem; }
.consult__decisions li { display: flex; gap: 0.6rem; align-items: baseline; }
.consult__body { white-space: pre-wrap; }

/* ---------- Start a production: the doors ---------- */
.doors { margin: var(--space-lg) 0; }
.doors[hidden] { display: none; }
.doors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-md); margin-top: var(--space-sm); }
.doors__card { display: grid; gap: 0.6rem; align-content: start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule-2); border-radius: 18px; background: var(--color-paper); }
.doors__card h3 { margin: 0; }
.doors__card p { margin: 0; }
body.doors-open main > :not(.page-head):not(#doors) { display: none; }

/* The buttons on a project row on the admin desk are one size, whatever their words. */
.project-row__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.5rem; width: 100%; min-width: 0; align-self: center; }
.project-row__acts > .btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap; }
@media (min-width: 60rem) { .project-row__acts { grid-template-columns: repeat(2, 11rem); width: auto; } }

/* ---------- the people on a commission: one line, scrolling sideways ---------- */
.people { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.people__strip { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; flex: 1 1 auto; min-width: 0; padding: 0.15rem 0.1rem 0.45rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.people__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; font: inherit; font-size: 0.88rem; color: var(--color-ink); border: 1px solid var(--color-rule-2); border-radius: 999px; padding: 0.3rem 0.75rem; background: var(--color-paper); scroll-snap-align: start; }
button.people__chip { cursor: pointer; }
button.people__chip:hover { border-color: var(--color-accent); }
.people__chip.is-pending { border-style: dashed; opacity: 0.85; }
.people__tag { font-size: 0.72rem; font-weight: 700; border-radius: 6px; padding: 0.1rem 0.5rem; background: var(--color-paper-3); color: var(--color-ink); }
.people__tag.is-cd { background: var(--color-accent-wash); }
.people__tag.is-editor { background: var(--color-accent); color: var(--color-on-accent); }
.people__tag.is-approver { background: var(--color-warn-wash); color: var(--color-warn); }
.people__tag.is-contributor { background: var(--color-ok-wash); color: var(--color-ok); }
.people__tag.is-pending { background: transparent; border: 1px dashed var(--color-rule-2); color: var(--color-muted); }
.people__invite { flex: 0 0 auto; white-space: nowrap; }
.collab__form { display: grid; gap: var(--space-xs); }
.collab__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
@media (max-width: 40rem) { .collab__row { grid-template-columns: 1fr; } }
.collab__roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-xs); }
.collab__role { display: grid; gap: 0.2rem; text-align: left; font: inherit; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper); cursor: pointer; }
.collab__role.is-on { border: 2px solid var(--color-accent); background: var(--color-accent-wash); }
.collab__stageslabel { margin-right: 0.3rem; }

.collab__list { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0; }
.collab__item { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper); }
.collab__item p { margin: 0; }

/* The plain input, the same as a field's: on the consultation, production, collaborator and desk pages. */
input.input, textarea.input, select.input { font: inherit; width: 100%; box-sizing: border-box; padding: var(--space-xs) var(--space-md); background: var(--color-paper-3); color: var(--color-ink); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); min-height: 44px; transition: border-color var(--dur-fast) var(--ease-out); }
textarea.input { min-height: 5rem; resize: vertical; }
input.input::placeholder, textarea.input::placeholder { color: var(--color-placeholder); opacity: 1; }
input.input:hover, textarea.input:hover, select.input:hover { border-color: var(--color-neutral); }
input.input:focus-visible, textarea.input:focus-visible, select.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
input.input[readonly] { background: var(--color-paper-2); }

/* In the red set-up panels the cards are cream, so their words are ink. */
.cform .collab__item, .cform .collab__item *, .cform .collab__role, .cform .collab__role * { color: var(--color-ink); }
.cform .collab__item .meta, .cform .collab__role .meta { color: var(--color-muted); }
.cform .collab__role.is-on { border-color: var(--color-ink); }
.cform .collab__stageslabel { color: #fff; }
.cform .collab__form .label, .cform .collab__form + div .meta { color: #fff; }
.cform #collab-step h3 { color: #fff; }
.cform #collab-step .meta[role="alert"] { color: #fff; }

/* ---------- an NDA is red until it is signed and sent back ---------- */
.nda-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.15rem 0.55rem; border-radius: 6px; background: #B3261E; color: #fff; vertical-align: middle; }
.nda-badge.is-partial { background: #C7791A; }
.nda-badge.is-signed { background: var(--color-ok, #2E7D32); }
.material__item.is-nda { background: #FDECEA; border-radius: 10px; padding-left: 0.5rem; padding-right: 0.5rem; }
.deskdocs__body { min-width: 0; display: grid; gap: 0.2rem; }
.deskdocs__acts { margin-top: 0.3rem; }
.filesheet__nda { display: flex; gap: 0.6rem; align-items: flex-start; margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); border: 1px dashed #B3261E; border-radius: 10px; cursor: pointer; }

/* ---------- a tile says what is needed and no more ---------- */
.is-folded { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fold__more { display: inline-block; margin: 0.1rem 0 0.2rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--color-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.exitcard__tag { display: none; }
.exitcard p { margin: 0.15rem 0 0.5rem; }

/* ---------- Cura's consultation ---------- */
.cura__thread { display: grid; gap: var(--space-xs); margin: var(--space-md) 0; }
.cura__row { display: flex; }
.cura__row--you { justify-content: flex-end; }
.cura__bubble { max-width: 38rem; padding: var(--space-xs) var(--space-md); border-radius: 18px; background: var(--color-paper-2); border: 1px solid var(--color-rule-2); }
.cura__row--you .cura__bubble { background: var(--color-accent-wash); border-color: transparent; }
.cura__bubble--edit { width: min(100%, 38rem); background: var(--color-paper); border-style: dashed; }
.cura__answer { display: grid; gap: var(--space-xs); }
.cura__change { margin-left: 0.5rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem; color: var(--color-accent); cursor: pointer; text-decoration: underline; }
.cura__handoff { border-left: 5px solid var(--color-accent); }
.cura__area h3 { margin: var(--space-sm) 0 var(--space-2xs); }
.cura__cons { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.cura__cons li { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 12px; }
.cura__cons p { margin: 0.15rem 0 0; }
.cura__owner { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 0.1rem 0.55rem; background: var(--color-paper-3); }
.cura__owner--blocked { background: #FDECEA; color: #B3261E; }
.cura__owner--ready { background: var(--color-ok-wash); color: var(--color-ok); }
.consult__tier--rec { border: 2px solid var(--color-accent); }
.team-subs .team-sub .subtl { margin: 0.5rem 0 1.25rem; }
.team-subs .project-row--open[aria-expanded="true"] { border-bottom-color: transparent; }
.people__cost { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--color-ink-soft, var(--color-muted, #6b4a3a)); }
.doc .people__cost { font-size: 0.9rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--color-accent, #b32d15); background: rgba(179,45,21,0.06); margin: 0.2rem 0 0.8rem; }

/* The room, tidied: messages are plain lines with a thin rule, long ones fold, Cura is one slim row. */
.assistant__msg { max-width: none; margin-bottom: 0.7rem; }
.assistant--room .assistant__msg--cc { border: 0; border-left: 3px solid var(--color-accent); border-radius: 0; background: transparent; padding: 0 0 0 0.7rem; }
.assistant__msg .meta { font-size: 0.72rem; }
.msgtxt.is-folded, .agentmsg__text.is-folded { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msgmore { font: inherit; font-size: 0.78rem; font-weight: 600; background: none; border: 0; padding: 0.1rem 0; margin-top: 0.1rem; color: var(--color-accent-deep, #8a2410); cursor: pointer; text-decoration: underline; }
.agentbar { padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
.agentbar__head { margin-bottom: 0.4rem; flex-wrap: nowrap; }
.agentbar__tag { font-size: 0.85rem; padding: 0.35rem 0.8rem; }
.agentbar__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: thin; }
.agentbar__chip { flex: 0 0 auto; white-space: nowrap; font-size: 0.78rem; padding: 0.25rem 0.6rem; }
.agentmsg { padding: 0.55rem 0.7rem; margin: 0.4rem 0; }
.agentmsg__badge { display: none; }
.btn--chosen { background: #E3F0E6; border: 1px solid #1F6B3A; color: #17522c; }
.btn--chosen:hover, .btn--chosen:focus-visible { background: #1F6B3A; color: #fff; }

/* A creator in the assign list: the name with an arrow that drops down what the desk needs to know. */
.crow { align-items: flex-start; }
.crow__main { flex: 1 1 auto; min-width: 0; }
.crow__head { display: flex; align-items: center; gap: 0.6rem; font: inherit; text-align: left; background: none; border: 0; padding: 0.2rem 0; cursor: pointer; color: var(--color-ink); }
.crow__head strong { display: block; font-size: var(--text-lg, 1.2rem); }
.crow__head .meta { display: block; }
.crow__arrow { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-rule-2); border-radius: 50%; font-size: 0.8rem; }
.crow__head:hover .crow__arrow, .crow__head:focus-visible .crow__arrow { border-color: var(--color-accent); }
.crow__detail { margin: 0.4rem 0 0.2rem 2.3rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--color-rule-2); font-size: 0.92rem; }
.crow__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0 0 0.4rem; }
.crow__facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted, #6b4a3a); }
.crow__facts dd { margin: 0; }
.crow__about { margin: 0.3rem 0; }

.pickfor { margin: 0.5rem 0 0.4rem 2.3rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-rule-2); border-radius: 14px; background: var(--color-paper); }
.pickfor__ask { margin: 0 0 0.5rem; font-weight: 700; }
.pickfor__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.pickfor__chip { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-rule-2); background: #fff; color: var(--color-ink); cursor: pointer; }
.pickfor__chip.is-fit { border-color: #1F6B3A; color: #17522c; }
.pickfor__chip.is-on { background: #1F6B3A; border-color: #1F6B3A; color: #fff; }
.pickfor__other { width: 100%; box-sizing: border-box; font: inherit; padding: 0.45rem 0.7rem; border-radius: 10px; border: 1px solid var(--color-rule-2); background: #fff; margin-bottom: 0.5rem; }
.pickfor__go { display: flex; gap: 0.5rem; }

/* The phase strip is pressable: each phase opens its record. */
button.tl-strip__pill { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-align: left; }
button.tl-strip__pill:not(.is-now):hover { text-decoration: underline; }
.record__list { list-style: none; padding: 0; margin: 0 0 var(--space-sm); }
.record__list li { padding: 0.3rem 0; border-top: 1px solid var(--color-rule-2); }

/* All the project's files in one dropdown: a colour per section, a badge for the kind of file. */
.allfiles { border: 1px solid var(--color-rule-2); border-radius: 14px; background: var(--color-paper); padding: 0.2rem 0.9rem 0.6rem; }
.allfiles__head { list-style: none; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; padding: 0.6rem 0; }
.allfiles__head::-webkit-details-marker { display: none; }
.allfiles__head::before { content: '\25B8'; font-size: 0.8rem; transition: transform 0.15s; }
.allfiles[open] > .allfiles__head::before { transform: rotate(90deg); }
.allfiles__title { font-size: var(--text-lg, 1.25rem); font-weight: 700; }
.allfiles__add { margin-left: auto; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.allfiles__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.allfiles__chip { font: inherit; font-size: 0.78rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; color: var(--color-ink); background: var(--sec-bg, #eee); }
.allfiles__chip[aria-pressed="true"] { border-color: var(--sec-ink, #333); font-weight: 700; }
.allfiles__row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; align-items: center; padding: 0.55rem 0.6rem 0.55rem 0.8rem; margin-bottom: 0.35rem; border-radius: 10px; border-left: 5px solid var(--sec-ink, #999); background: var(--sec-bg, #f2f2f2); color: var(--color-ink); text-decoration: none; }
.allfiles__row:hover { filter: brightness(0.97); }
.allfiles__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allfiles__sec { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sec-ink, #555); }
.allfiles__by { grid-column: 2 / 4; font-size: 0.78rem; }
.ftype { display: inline-flex; justify-content: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0; border-radius: 6px; background: var(--color-ink); color: #fff; }
.ftype--pdf { background: #A32D2D; } .ftype--img { background: #0F6E56; } .ftype--video { background: #534AB7; } .ftype--link { background: #185FA5; }
.ftype--audio { background: #993556; } .ftype--sheet { background: #3B6D11; } .ftype--doc { background: #5F5E5A; } .ftype--zip { background: #854F0B; } .ftype--slides { background: #993C1D; }
.sec--team { --sec-bg: #E4EFE6; --sec-ink: #2F6B3F; }
.sec--brief { --sec-bg: #FBE9DA; --sec-ink: #B5541A; }
.sec--budget { --sec-bg: #FBF1CC; --sec-ink: #8A6A0A; }
.sec--contract { --sec-bg: #E9E4F7; --sec-ink: #5B46B0; }
.sec--treatment { --sec-bg: #DDF0F2; --sec-ink: #1D7480; }
.sec--production { --sec-bg: #FADDE6; --sec-ink: #A8335C; }
.sec--review { --sec-bg: #DCE8FA; --sec-ink: #2A5FA8; }
.sec--delivery { --sec-bg: #E1F0D3; --sec-ink: #4A7A1C; }
.sec--none { --sec-bg: #ECEAE4; --sec-ink: #6a655c; }

/* The payment method tile: its own card on the timeline, not a phase. */
.tl-pay { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.6rem 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--color-rule-2); border-left: 5px solid #B5541A; border-radius: 14px; background: var(--color-paper); }
.tl-pay--method, .tl-pay--funded, .tl-pay--funding { border-left-color: #2F6B3F; }
.tl-pay--failed { border-left-color: #A32D2D; }
.tl-pay__body { min-width: 0; } .tl-pay__body .meta { margin: 0.15rem 0 0; }
.tl-pay__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tl-pay__chip { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.6rem; border-radius: 999px; background: #ECEAE4; color: #5a5750; }
.tl-pay__chip.is-ok { background: #E4EFE6; color: #2F6B3F; } .tl-pay__chip.is-bad { background: #FCEBEB; color: #A32D2D; } .tl-pay__chip.is-wait { background: #FBF1CC; color: #8A6A0A; }
.paysheet__sum { border: 1px solid var(--color-rule-2); border-radius: 14px; padding: 0.9rem 1.1rem; background: var(--color-paper); margin-bottom: 1rem; }
.paysheet__for { margin: 0 0 0.6rem; font-weight: 700; }
.paysheet__rows { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0; }
.paysheet__rows dt { color: var(--color-ink-soft, #6b4a3a); } .paysheet__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.paysheet__rows dt:nth-of-type(2), .paysheet__rows dd.is-big { padding-top: 0.5rem; border-top: 1px solid var(--color-rule-2); font-weight: 700; }
.paysheet__rows dd.is-big { font-size: 1.4rem; }
.paysheet__why { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.paysheet__act { display: flex; } .paysheet__go { width: 100%; justify-content: center; padding: 0.9rem 1.2rem; font-size: 1.05rem; }

.paysheet__rows { display: block; }
.paysheet__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; font-variant-numeric: tabular-nums; }
.paysheet__row--due { margin: 0.2rem 0; border-top: 1px solid var(--color-rule-2); border-bottom: 1px solid var(--color-rule-2); font-weight: 700; padding: 0.6rem 0; }
.paysheet__row .is-big { font-size: 1.5rem; }
.timeline > .tl-pay { padding: 0.8rem 1rem; min-height: 0; align-items: center; }

/* The brief as a document: the facts, then the clauses. */
.brief__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1rem; margin: 0.8rem 0 1.2rem; padding: 0.8rem 1rem; border: 1px solid var(--color-rule-2); border-radius: 12px; }
.brief__facts dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.brief__facts dd { margin: 0.1rem 0 0; font-weight: 700; }
.brief__facts .is-missing dd, .brief .is-missing { font-weight: 400; font-style: italic; opacity: 0.7; }
/* One bar for what goes on a phase. */
.submitbar__bar { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; width: fit-content; max-width: 100%; margin-bottom: 0.8rem; }
.submitbar__opt { font: inherit; font-size: 0.9rem; font-weight: 600; background: transparent; color: inherit; border: 0; padding: 0.5rem 1rem; cursor: pointer; }
.submitbar__opt + .submitbar__opt { border-left: 1px solid currentColor; }
.submitbar__opt[aria-checked="true"] { background: var(--color-paper, #fff); color: var(--color-accent-deep, #8a2410); }
.submitbar__pane { margin-bottom: 0.7rem; } .submitbar__pane .attach__url { width: 100%; box-sizing: border-box; }
.submitbar__file { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.submitbar__go { margin: 0.6rem 0 0.2rem; }

.contractview__acts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.submitbar__pane input[type=url] { width: 100%; box-sizing: border-box; }
.submitbar__pane:empty { margin: 0; }
#ledger-panel .tl-pay { margin: 0.6rem 0 1rem; }

/* ---- Cura as an icon: a pill with the spark until it is pressed ---- */
.agentbar--icon { display: flex; flex-direction: column; gap: var(--space-xs, 0.4rem); margin-bottom: var(--space-xs, 0.4rem); }
.agentbar__toggle { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--color-accent-deep, #8a2410); background: var(--color-paper, #fff); border: 1px solid var(--color-rule-2, #c9c1a0); border-radius: 999px; padding: 0.3rem 0.7rem 0.3rem 0.5rem; }
.agentbar__toggle:hover, .agentbar--icon.is-open .agentbar__toggle { border-color: var(--color-accent, #b32d15); }
.agentbar__glyph { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--color-accent, #b32d15); color: var(--color-on-accent, #fff); font-size: 0.8rem; }
.agentbar__body[hidden] { display: none; }

/* The top of the timeline: one card. */
.timeline li.tl-head { list-style: none; padding: 1.1rem 1.4rem; margin-bottom: var(--space-md, 1rem); border: 1px solid var(--color-rule-2); border-radius: 22px; background: var(--color-paper); }
.timeline li.tl-head::before { display: none; }
.tl-head .tl-strip { margin-bottom: 0.7rem; }
.tl-head__line { margin: 0 0 0.7rem; font-size: 1.45rem; line-height: 1.35; font-weight: 700; }
.tl-head__status { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; font-size: 0.95rem; color: var(--color-ink-soft, #5a4a42); }
.linkbtn { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-accent-deep, #8a2410); text-decoration: underline; text-underline-offset: 3px; }
.tagchip { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.78em; font-weight: 700; padding: 0.05em 0.6em; border-radius: 999px; vertical-align: 0.1em; border: 1px solid var(--color-rule-2); background: var(--sec-bg, #f2efe2); color: var(--sec-ink, var(--color-ink)); }
button.tagchip { cursor: pointer; } button.tagchip:hover { filter: brightness(0.96); }
.tagchip--person i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--color-accent, #b32d15); display: inline-block; }
/* Stickers in the room. */
.stickertoggle { margin-left: 0.4rem; font-size: 1.1rem; }
.stickertray { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.7rem; }
.sticker { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.4rem 0.8rem 0.4rem 0.45rem; border-radius: 14px; border: 2px solid var(--st-ink, #333); background: var(--st-bg, #eee); color: var(--st-ink, #333); cursor: pointer; transform: rotate(-1.5deg); }
.sticker:nth-child(even) { transform: rotate(1.5deg); }
.sticker:hover { transform: rotate(0) scale(1.04); }
.sticker__glyph { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--st-ink, #333); color: var(--st-bg, #fff); font-size: 0.95em; }
.sticker--big { cursor: default; font-size: 1.15rem; padding: 0.55rem 1.1rem 0.55rem 0.6rem; border-radius: 18px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--st-ink, #333); }
.assistant__msg--sticker { border-left: 0; }
.sticker--approved { --st-bg: #E4EFE6; --st-ink: #2F6B3F; } .sticker--love { --st-bg: #FADDE6; --st-ink: #A8335C; }
.sticker--onit { --st-bg: #DCE8FA; --st-ink: #2A5FA8; } .sticker--changes { --st-bg: #FBF1CC; --st-ink: #8A6A0A; }
.sticker--question { --st-bg: #E9E4F7; --st-ink: #5B46B0; } .sticker--thanks { --st-bg: #FBE9DA; --st-ink: #B5541A; }
.sticker--late { --st-bg: #ECEAE4; --st-ink: #5a5750; } .sticker--done { --st-bg: #DDF0F2; --st-ink: #1D7480; }

/* Who is talking in the room: the co-curators making the work stand out most; the desk and the commissioner are quieter. */
.assistant__msg--creator { border-left: 4px solid #1D7480; background: #E6F3F4; padding: 0.5rem 0.8rem; border-radius: 0 12px 12px 0; }
.assistant__msg--commissioner { border-left: 3px solid #B8A24A; padding-left: var(--space-md); }
.assistant__msg--desk { border-left: 3px solid var(--color-accent, #b32d15); }
.roletag { display: inline-block; margin-left: 0.5rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.05rem 0.5rem; border-radius: 999px; vertical-align: 0.05em; }
.roletag--creator { background: #1D7480; color: #fff; }
.roletag--commissioner { background: #F3EBC2; color: #6f5d12; }
.roletag--desk { background: #FBE3D9; color: #8a2410; }

/* Swap and End, as icons in the room beside Cura. */
.roomtools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.roomtool { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--color-ink); background: var(--color-paper, #fff); border: 1px solid var(--color-rule-2, #c9c1a0); border-radius: 999px; padding: 0.25rem 0.7rem 0.25rem 0.45rem; }
.roomtool:hover { border-color: var(--color-ink); }
.roomtool__glyph { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-ink, #2b1a14); color: var(--color-paper, #fff); font-size: 0.75rem; }

/* Swap and End: plain red buttons under the timeline. */
.exitbtns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-md, 1rem) 0; }
.exitbtn { background: var(--color-accent, #b32d15); color: var(--color-on-accent, #fff); border: 0; }
.exitbtn--end { background: #8f1f0e; }

/* The two chat rooms: two buttons at the bottom of the page, each opening its room. */
.split--solo { grid-template-columns: minmax(0, 1fr); }
.chatdock { position: sticky; bottom: 0; z-index: 55; margin-top: var(--space-xl, 2rem); }
.chatdock__bar { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.7rem 0; background: linear-gradient(to top, var(--color-paper, #fbf6d8) 70%, transparent); }
.chatdock__btn { display: inline-flex; align-items: center; gap: 0.55rem; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; color: var(--color-ink, #2b1a14); background: var(--color-paper, #fff); border: 1.5px solid var(--color-ink, #2b1a14); border-radius: 999px; padding: 0.55rem 1.1rem 0.55rem 0.6rem; }
.chatdock__btn:hover, .chatdock__btn[aria-expanded="true"] { background: var(--color-ink, #2b1a14); color: var(--color-paper, #fff); }
.chatdock__glyph { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-accent, #b32d15); color: var(--color-on-accent, #fff); font-size: 0.95rem; }
.chatdock__panel[hidden] { display: none; }
.chatdock__panel { position: fixed; right: var(--space-md, 1rem); bottom: 4.8rem; width: min(32rem, calc(100vw - 2rem)); max-height: 74vh; overflow-y: auto; z-index: 60; margin: 0; box-shadow: 0 18px 50px rgb(42 20 16 / 0.28); background: var(--color-paper, #fffdf0); }
.chatdock__close { position: absolute; top: 0.6rem; right: 0.7rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--color-rule-2, #c9c1a0); background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-ink, #2b1a14); }
.chatdock__panel { padding-top: 2.6rem; }
.chatdock__panel .assistant__log { max-height: min(16rem, 34vh) !important; }

/* The name, inside the banner, on a fade. */
.projcover { position: relative; }
.page-head:empty { display: none; }
.page-head > .projcover__title { position: static; background: none; color: inherit; padding: 0; }
.projcover > .projcover__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem 1.4rem 1.1rem; color: #fff; text-align: left;
  background: linear-gradient(to top, rgb(24 12 9 / 0.82) 0%, rgb(24 12 9 / 0.55) 45%, rgb(24 12 9 / 0) 100%); pointer-events: none; }
.projcover > .projcover__title * { pointer-events: auto; }
.projcover > .projcover__title h1 { margin: 0.2rem 0 0.15rem; color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; }
.projcover > .projcover__title .label, .projcover > .projcover__title .meta { color: rgb(255 255 255 / 0.88); margin: 0; }
.projcover > .projcover__title .titlepen { color: #fff; border-color: rgb(255 255 255 / 0.6); background: transparent; }
.projcover:has(> .projcover__title) { min-height: 11rem; }
.projcover img, .projcover__empty { height: clamp(10rem, 26vw, 15rem); min-height: clamp(10rem, 26vw, 15rem); }
.projcover:has(> .projcover__title) .projcover__empty p { display: none; }
.projcover:has(> .projcover__title) .projcover__empty { place-items: start center; padding-top: var(--space-md, 1rem); }
.projcover__note:empty { display: none; }
/* Small: an icon and three words, nothing more, until pressed. */
.chatdock__btn { font-size: 0.85rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; border-width: 1px; gap: 0.4rem; }
.chatdock__glyph { width: 1.35rem; height: 1.35rem; font-size: 0.8rem; }
.chatdock__bar { padding: 0.5rem 0; }
.chatdock__panel { bottom: 3.6rem; }

/* Every tag in the header bar is a tinted chip: phases in their phase colour, people in their role colour. */
.tagchip--creator { --sec-bg: #E6F3F4; --sec-ink: #1D7480; border-color: #1D7480; }
.tagchip--commissioner { --sec-bg: #F3EBC2; --sec-ink: #6f5d12; border-color: #B8A24A; }
.tagchip--person i { background: var(--sec-ink); }
.tl-head .tagchip { border-color: var(--sec-ink, var(--color-rule-2)); }

/* The phase strip is one line: swipe it sideways, the open phase is centred. */
.tl-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 0.2rem; }
.tl-strip::-webkit-scrollbar { display: none; }
.tl-strip::before, .tl-strip::after { content: ''; flex: 0 0 30%; }
.tl-strip > * { flex: 0 0 auto; white-space: nowrap; }
.tl-strip__pill { scroll-snap-align: center; }
@media (max-width: 40rem) {
  .tl-strip__pill:not(.is-now) { font-size: inherit; gap: 0.35rem; }
  .tl-strip__pill:not(.is-now) .tl-strip__dot { width: 9px; height: 9px; }
  .tl-strip__line { width: 14px; }
}

/* The name in the banner: dark text on Co Curate's beige fading up from the bottom. */
.projcover > .projcover__title { color: var(--color-ink, #2b1a14);
  background: linear-gradient(to top, rgb(251 246 216 / 0.97) 0%, rgb(251 246 216 / 0.86) 45%, rgb(251 246 216 / 0) 100%); }
.projcover > .projcover__title h1 { color: var(--color-ink, #2b1a14); }
.projcover > .projcover__title .label, .projcover > .projcover__title .meta { color: var(--color-ink-soft, #5a4a42); }
.projcover > .projcover__title .titlepen { color: var(--color-ink, #2b1a14); border-color: rgb(43 26 20 / 0.35); }

/* The other side's turn: waiting, said plainly, with what they have and what might help. */
.waitview__lead { margin-bottom: 1rem; } .waitview__lead strong { font-size: 1.15rem; display: block; } .waitview__lead .meta { margin: 0.25rem 0 0; }
.waitview__h { margin: 1.1rem 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.atiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.8rem; }
.atile { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; color: inherit; border: 1px solid var(--color-rule-2); border-radius: 12px; background: var(--color-paper, #fffdf0); padding: 0.4rem 0.4rem 0.55rem; }
.atile:hover { border-color: var(--color-ink); }
.atile__cover { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #ECEAE4; display: grid; place-items: center; }
.atile__cover img, .atile__cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atile__glyph { font-weight: 800; font-size: 1.6rem; opacity: 0.55; }
.atile__cover--link { background: #DCE8FA; color: #2A5FA8; } .atile__cover--pdf { background: #FADDE6; color: #A8335C; } .atile__cover--video { background: #E9E4F7; color: #5B46B0; }
.atile__cover--img { background: #DDF0F2; } .atile__name { font-weight: 700; font-size: 0.88rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 0.2rem; }
.atile__meta { font-size: 0.74rem; opacity: 0.75; padding: 0 0.2rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.7rem; }
.slot { display: flex; gap: 0.7rem; align-items: center; text-align: left; font: inherit; cursor: pointer; color: inherit; background: transparent; border: 2px dashed var(--color-rule-2); border-radius: 12px; padding: 0.7rem 0.8rem; }
.slot:hover { border-color: var(--color-ink); }
.slot.is-filled { border-style: solid; border-color: #2F6B3F; background: #E4EFE6; }
.slot__mark { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 700; }
.slot__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .slot__text .meta { font-size: 0.78rem; }
.atile { color: var(--color-ink, #2b1a14); }
.slot.is-filled { color: #1f4a2c; }
.slot.is-filled .meta { color: #2F6B3F; }

/* The creative's treatment builder. */
.tbuilder__lede { margin: 0 0 0.6rem; }
.tbuilder__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.7rem; }
.tchip { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.tchip.is-on { background: var(--color-paper, #fff); color: var(--color-accent-deep, #8a2410); border-color: var(--color-paper, #fff); }
.tchip.is-locked { cursor: default; }
.tbuilder__slots { display: grid; gap: 0.7rem; margin-bottom: 0.8rem; }
.tslot { border: 2px dashed currentColor; border-radius: 12px; padding: 0.7rem 0.8rem; }
.tslot__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.tslot__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.tslot .atile { background: var(--color-paper, #fffdf0); }
.tbuilder .field textarea { width: 100%; box-sizing: border-box; }
.tbuilder__own { margin-top: 1rem; } .tbuilder__own summary { cursor: pointer; font-weight: 600; margin-bottom: 0.6rem; }
.atile .atile__name, .atile .atile__meta { color: var(--color-ink, #2b1a14) !important; }
/* Every tag in the header sentence is the same green. */
.tl-head .tagchip { --sec-bg: #E4EFE6; --sec-ink: #2F6B3F; border-color: #2F6B3F; text-decoration: none; }
.tl-head .tagchip--person i { background: #2F6B3F; }

/* A dot on the rail for each phase behind and ahead. */
.timeline li.tl-dotrow { margin-top: 0; padding: 0.35rem 0 0.35rem 1.4rem; position: relative; }
.timeline li.tl-dotrow::before { top: 0.9rem; }
.timeline li.tl-dotrow.is-done::before { background: var(--color-ok, #2F6B3F); border-color: var(--color-ok, #2F6B3F); }
.timeline li.tl-dotrow.is-todo::before { background: var(--color-paper); border-color: var(--color-neutral); }
.tl-dotrow__btn { display: flex; align-items: baseline; gap: 0.7rem; font: inherit; background: none; border: 0; padding: 0.2rem 0; cursor: pointer; color: var(--color-ink); text-align: left; }
.tl-dotrow.is-todo .tl-dotrow__btn { color: var(--color-ink-soft, #6b5a50); }
.tl-dotrow__btn:hover strong { text-decoration: underline; }
/* Bigger chat buttons. */
.chatdock__btn { font-size: 1.05rem; padding: 0.6rem 1.3rem 0.6rem 0.6rem; border-width: 1.5px; gap: 0.6rem; }
.chatdock__glyph { width: 2rem; height: 2rem; font-size: 1.05rem; }
.chatdock__bar { padding: 0.7rem 0; }
.chatdock__panel { bottom: 4.9rem; }
.timeline li.tl-rail:has(> .roomgrow.outsourcing) { display: none; }

/* The people sit on the very bottom edge of the banner, under the name; less empty space around it. */
.projcover { margin: var(--space-md, 1rem) 0 var(--space-md, 1rem); }
.projcover > #room-people { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.4rem 1.2rem 0.55rem; pointer-events: none; }
.projcover > #room-people > * { pointer-events: auto; }
.projcover > #room-people:empty { display: none; }
.projcover > #room-people .people { margin: 0; }
.projcover > #room-people .people__strip { padding-bottom: 0.1rem; }
.projcover > #room-people .people__invite { padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.projcover:has(> #room-people:not(:empty)) > .projcover__title { padding-bottom: 3.6rem; }
.projcover img, .projcover__empty { height: clamp(11rem, 28vw, 16rem); min-height: clamp(11rem, 28vw, 16rem); }
.split--solo { margin-top: var(--space-sm, 0.6rem); }
.page-head:empty { display: none; }
.projcover { margin-bottom: 0.5rem; }
.split--solo { margin-top: 0; }
.split--solo .timeline, .split--solo ol#timeline { margin-top: 0.3rem; padding-top: 0; }
.split--solo > div > .timeline { margin-top: 0.3rem; }

/* Bigger chat buttons. */
.chatdock__btn { font-size: 1.25rem; padding: 0.85rem 1.7rem 0.85rem 0.85rem; gap: 0.8rem; border-width: 2px; }
.chatdock__glyph { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.chatdock__bar { padding: 0.8rem 0; gap: 0.8rem; }
.chatdock__panel { bottom: 6rem; }

/* Proposed deliverables: a tile each, with notes. */
.ditems__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.ditem { border: 1.5px dashed currentColor; border-radius: 12px; padding: 0.7rem 0.8rem; }
.ditem.is-made { border-style: solid; border-color: #2F6B3F; background: #E4EFE6; color: #1f4a2c; }
.ditem__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.ditem__state { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; }
.ditem__note { margin: 0.35rem 0 0; font-size: 0.88rem; padding: 0.35rem 0.55rem; border-radius: 8px; background: rgba(255,255,255,0.18); }
.ditem__note--commissioner { background: #F3EBC2; color: #5b4a10; } .ditem__note--creative { background: #E6F3F4; color: #14545e; }
.ditem.is-made .ditem__note { color: inherit; }
.ditem__add { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .ditem__in { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; padding: 0.4rem 0.6rem; border-radius: 10px; border: 1px solid var(--color-rule-2); background: #fff; color: var(--color-ink); }
.proposed { margin-top: 1rem; border-top: 1px dashed currentColor; padding-top: 0.8rem; }
/* Bigger chat buttons. */
.chatdock__btn { font-size: 1.25rem; padding: 0.85rem 1.7rem 0.85rem 0.85rem; gap: 0.8rem; border-width: 2px; }
.chatdock__glyph { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.chatdock__bar { padding: 0.8rem 0; gap: 0.8rem; }
.chatdock__panel { bottom: 6rem; }

/* A big team: the first few, and a drop-down for the rest. */
.people__wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.people__more { cursor: pointer; font-weight: 700; background: var(--color-ink, #2b1a14); color: var(--color-paper, #fff); border-color: var(--color-ink, #2b1a14); }
.people__panel { position: absolute; left: 0; bottom: calc(100% + 0.4rem); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.6rem; max-height: 14rem; overflow-y: auto; background: var(--color-paper, #fffdf0); border: 1px solid var(--color-rule-2, #c9c1a0); border-radius: 14px; box-shadow: 0 10px 30px rgb(42 20 16 / 0.2); }
.people__panel[hidden] { display: none; }

/* The photo runs to the bottom edge of the banner. */
.projcover { min-height: clamp(11rem, 28vw, 16rem); }
.projcover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.projcover__empty { position: absolute; inset: 0; height: 100%; min-height: 0; }
/* Back to the dashboard: just an arrow. */
.backbtn { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 4; display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--color-paper, #fffdf0); color: var(--color-ink, #2b1a14); border: 1.5px solid var(--color-ink, #2b1a14); font-size: 1.5rem; line-height: 1; text-decoration: none; box-shadow: 0 4px 14px rgb(42 20 16 / 0.2); }
.backbtn:hover { background: var(--color-ink, #2b1a14); color: var(--color-paper, #fff); }
.page-head > .backbtn { position: static; margin-bottom: 0.6rem; }
/* The invite button is red. */
.people__invite { background: var(--color-accent, #b32d15) !important; color: var(--color-on-accent, #fff) !important; border-color: var(--color-accent, #b32d15) !important; font-weight: 700; }
/* Each creator, how much, and why. */
.paylines { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.payline { border: 1px solid currentColor; border-radius: 10px; padding: 0.4rem 0.7rem; }
.payline summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; }
.payline summary::-webkit-details-marker { display: none; }
.payline summary::after { content: '\25BE'; margin-left: 0.5rem; }
.payline__who { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; } .payline__amt { font-weight: 700; margin-left: auto; }
.payline__why { margin: 0.4rem 0 0.2rem; } .payline textarea { width: 100%; box-sizing: border-box; margin-top: 0.4rem; }

/* Waiting, in a small circle before the words. */
.tl-waitdot { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 0.7rem; padding: 0.15rem 0.7rem 0.15rem 0.45rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: 0.8em; font-weight: 700; vertical-align: 0.1em; }
.tl-waitdot i { width: 0.7em; height: 0.7em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: tlspin 1.4s linear infinite; }
@keyframes tlspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-waitdot i { animation: none; } }
.projcover { min-height: clamp(13rem, 30vw, 17rem); }

/* ---------- the inbox ----------
   A tray beside Dashboard in the masthead, and the sheet it opens. The tray
   carries the number the Dashboard link used to. Colours are all tokens, so
   the dark view follows without a rule of its own. */
.inboxbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  position: relative;
  min-height: 34px;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: 12px 12px 6px 6px;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.inboxbtn:hover { background: var(--color-paper-3); border-color: var(--color-rule-2); }
.inboxbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.inboxbtn__icon { display: inline-grid; place-items: center; }

.sheet__panel--inbox { width: min(38rem, 100%); }
.inbox { display: grid; gap: var(--space-md); }
.inbox__summary { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.inbox__empty { padding: var(--space-lg) 0; color: var(--color-muted); }
.inbox__empty strong { display: block; color: var(--color-ink); font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.inbox__empty p { margin: 0; }
.inbox__group {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  background: var(--color-paper);
}
.inbox__group.has-needs { border-left: 3px solid var(--color-accent); }
.inbox__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-2xs); }
.inbox__cover { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-paper-3); }
.inbox__title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.inbox__title:hover { color: var(--color-accent-deep); text-decoration: underline; }
.inbox__tag { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ok); background: var(--color-ok-wash); padding: 2px 8px; border-radius: 999px; }
.inbox__label { margin: var(--space-xs) 0 2px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); }
.inbox__list { list-style: none; margin: 0; padding: 0; }
.inbox__item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 7px var(--space-2xs);
  margin: 0 calc(-1 * var(--space-2xs));
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
}
a.inbox__item:hover, details.inbox__item > summary:hover { background: var(--color-paper-2); text-decoration: none; }
details.inbox__item { display: block; padding: 0; }
details.inbox__item > summary { display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; gap: var(--space-xs); padding: 7px var(--space-2xs); border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
details.inbox__item > summary::-webkit-details-marker { display: none; }
.inbox__body { margin: 0 0 var(--space-xs) calc(10px + var(--space-xs) + var(--space-2xs)); white-space: pre-line; color: var(--color-ink); font-size: var(--text-sm); }
.inbox__dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; background: transparent; }
.inbox__item--need .inbox__dot { background: var(--color-accent); }
.inbox__item--need .inbox__text { font-weight: 600; }
.inbox__item--news .inbox__text { color: var(--color-muted); }
.inbox__item.is-unread .inbox__dot { background: var(--color-info); }
.inbox__item.is-unread .inbox__text { color: var(--color-ink); font-weight: 500; }
.inbox__when { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }


.payline .meta { color: inherit; opacity: 0.8; }
.people__tag.is-contractor { background: #E6F3F4; color: #14545e; }

/* @ suggestions in the room, and private messages. */
.mentionbox { position: absolute; left: 0; bottom: calc(100% + 0.3rem); z-index: 70; display: flex; flex-direction: column; min-width: 12rem; background: var(--color-paper, #fffdf0); border: 1px solid var(--color-rule-2, #c9c1a0); border-radius: 12px; box-shadow: 0 10px 26px rgb(42 20 16 / 0.22); overflow: hidden; }
.mentionbox[hidden] { display: none; }
.mentionbox__opt { display: flex; align-items: center; gap: 0.5rem; font: inherit; text-align: left; padding: 0.5rem 0.8rem; background: none; border: 0; cursor: pointer; color: var(--color-ink, #2b1a14); }
.mentionbox__opt:hover { background: var(--color-paper-2, #f3ecc8); }
.mentionbox__at { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-accent, #b32d15); color: #fff; font-size: 0.75rem; font-weight: 700; }
.mention { background: #E4EFE6; color: #2F6B3F; padding: 0 0.3em; border-radius: 6px; font-weight: 600; }
.dm__log { max-height: 18rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.7rem 0; }
.dm__msg { max-width: 85%; padding: 0.5rem 0.8rem; border-radius: 14px; background: #ECEAE4; color: var(--color-ink, #2b1a14); display: flex; flex-direction: column; align-self: flex-start; }
.dm__msg b { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }
.dm__msg.is-mine { align-self: flex-end; background: #E6F3F4; color: #14545e; }
.dm__send { display: flex; gap: 0.5rem; } .dm__send input { flex: 1; min-width: 0; }

.invitehere { margin-bottom: 0.9rem; } .invitehere__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.invitehere .people__chip { cursor: default; }
/* Phone: the photo carries only the title; the team tags move into the invite sheet, and the controls shrink to round icons. */
@media (max-width: 40rem) {
  .projcover > .projcover__title .label { display: none; }
  .projcover > #room-people .people__wrap { display: none; }
  .projcover > #room-people { padding: 0 0.7rem 0.6rem; display: flex; justify-content: flex-end; }
  .projcover > #room-people .people { justify-content: flex-end; }
  .projcover > #room-people .people__invite { font-size: 0; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .projcover > #room-people .people__invite::before { content: '+'; font-size: 1.6rem; line-height: 1; }
  .projcover > .projcover__title { padding: 3rem 1rem 0.9rem; }
  .projcover:has(> #room-people:not(:empty)) > .projcover__title { padding-bottom: 0.9rem; padding-right: 4rem; }
  .projcover > .projcover__title h1 { font-size: 1.5rem; }
  .projcover > .projcover__title .meta { font-size: 0.78rem; }
  .projcover__set { font-size: 0; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .projcover__set::before { content: '\270E'; font-size: 1.1rem; }
}
.actiontile__resolved { margin: 0.5rem 0 0; padding: 0.45rem 0.7rem; border-radius: 10px; background: #E4EFE6; color: #1f4a2c; font-size: 0.9rem; }
.actiontile.is-answered { opacity: 0.92; }
.btn.is-off, .btn.is-off:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Past projects: one button under the live list; the delivered work opens beneath it. */
.pastprojects { margin-top: 1rem; }
.pastprojects > summary { display: inline-block; cursor: pointer; list-style: none; }
.pastprojects > summary::-webkit-details-marker { display: none; }
.pastprojects[open] > summary { margin-bottom: 0.8rem; }


/* ---------- the dashboard's welcome: who is here, what is out, what to look at, what is left to set up ---------- */
.welcome { margin-bottom: var(--space-xl); }
.welcome__title { font-size: var(--text-xl, 1.75rem); margin: 0; }
.welcome__sub { margin: var(--space-2xs) 0 var(--space-md); color: var(--color-muted); }
.welcome__start {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  background: var(--color-accent-deep); color: var(--on-accent-1, #FBF6D8);
  border-radius: 18px; padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-lg);
}
.welcome__start h3 { margin: 0 0 var(--space-2xs); color: inherit; }
.welcome__start p { margin: 0; max-width: 28rem; color: inherit; opacity: 0.9; }
.welcome__startbtns { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.welcome__btn { background: var(--color-paper-1, #FBF6D8); color: var(--color-ink); border-color: transparent; }
.welcome__btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.welcome__grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-lg); align-items: start; }
.welcome__h { font-size: var(--text-md, 1.05rem); margin: 0 0 var(--space-xs); }
.welcome__headrow { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--space-lg); }
.welcome__all { font-size: var(--text-sm); font-weight: 500; }
.welcome__brief {
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 16px;
  padding: var(--space-md); margin-bottom: var(--space-sm);
}
.welcome__briefhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.welcome__briefhead h4 { margin: 0; }
.welcome__reached { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.welcome__person {
  display: flex; align-items: center; gap: var(--space-xs);
  background: var(--color-paper-1, #FBF6D8); border-radius: 12px; padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
}
.welcome__person span:last-child { display: grid; line-height: 1.2; }
.welcome__person em { font-style: normal; color: var(--color-muted); font-size: var(--text-xs); }
.welcome__avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #E9B949; color: var(--color-ink); font-size: 0.7rem; font-weight: 600;
}
.welcome__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.welcome__pick {
  display: grid; gap: 2px; text-decoration: none; color: inherit;
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 14px; overflow: hidden;
  padding-bottom: var(--space-sm);
}
.welcome__pick img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: var(--space-2xs); }
.welcome__pick .meta, .welcome__pickt { padding: 0 var(--space-sm); }
.welcome__pickt { font-weight: 600; }
.welcome__setup {
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 16px; padding: var(--space-md);
}
.welcome__setup h3 { margin: 0 0 var(--space-2xs); }
.welcome__setup .meta { margin: 0 0 var(--space-sm); }
.welcome__todo {
  display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--color-ink);
  background: var(--color-paper-1, #FBF6D8); border-radius: 10px; padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500;
}
.welcome__todo:hover { background: var(--color-paper-3); }
.welcome__todo.is-done { color: var(--color-muted); }
@media (max-width: 860px) {
  .welcome__grid { grid-template-columns: minmax(0, 1fr); }
  .welcome__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome__start { padding: var(--space-md); }
}
@media (max-width: 480px) {
  .welcome__picks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-sm); padding-bottom: var(--space-2xs); }
  .welcome__pick { flex: 0 0 72%; scroll-snap-align: start; }
}


/* ---------- commissioner sign-up: one small question at a time ---------- */
.onb { background: var(--color-paper-1, #FBF6D8); min-height: 100vh; }
.onb__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); }
.onb__logo { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.onb__signin { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.onb__main { max-width: 27rem; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-lg); }
.onb__step { display: grid; gap: var(--space-sm); }
.onb__step h1 { margin: 0; text-align: center; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.onb__lede { margin: 0 0 var(--space-xs); text-align: center; color: var(--color-muted); }
.onb__google { width: 100%; justify-content: center; text-align: center; }
.onb__or { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.onb__or::before, .onb__or::after { content: ''; flex: 1; border-top: 1px solid var(--color-rule); }
.onb__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.onb__field { display: grid; gap: 4px; font-size: var(--text-sm); font-weight: 500; border: 0; padding: 0; margin: 0 0 var(--space-xs); min-width: 0; }
.onb__field legend { padding: 0; margin-bottom: 4px; font-size: var(--text-sm); font-weight: 500; }
.onb__field em { font-style: normal; font-weight: 400; color: var(--color-muted); }
.onb__field input, .onb__field select {
  font: inherit; font-weight: 400; color: var(--color-ink); background: #FFFDF2; width: 100%;
  border: 1px solid var(--color-rule); border-radius: 12px; padding: 0.7rem 0.85rem; min-height: 44px;
}
.onb__field input:focus, .onb__field select:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.onb__hint { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); margin: 0; }
.onb__error { margin: 0; min-height: 1.2em; color: var(--color-accent-deep); font-size: var(--text-sm); }
.onb__go { width: 100%; justify-content: center; min-height: 48px; }
.onb__fine { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.onb__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.onb__card {
  display: grid; align-content: start; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: var(--color-ink);
  background: #FFFDF2; border: 1px solid var(--color-rule); border-radius: 14px; padding: var(--space-sm);
}
.onb__card span { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.onb__card[aria-pressed="true"], .onb__chip[aria-pressed="true"] { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #FBF6D8; }
.onb__card[aria-pressed="true"] span { color: inherit; opacity: 0.85; }
.onb__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.onb__chip {
  font: inherit; font-size: var(--text-sm); cursor: pointer; color: var(--color-ink); background: #FFFDF2;
  border: 1px solid var(--color-rule); border-radius: 999px; padding: 0.4rem 0.9rem; min-height: 38px;
}
.onb__code { display: flex; justify-content: center; gap: var(--space-xs); margin: var(--space-xs) 0; }
.onb__code input {
  width: 3rem; height: 3.4rem; text-align: center; font: inherit; font-size: 1.4rem; font-weight: 600; color: var(--color-ink);
  background: #FFFDF2; border: 1px solid var(--color-rule); border-radius: 12px;
}
.onb__code input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.onb__dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 var(--space-xl); }
.onb__dots i { width: 18px; height: 4px; border-radius: 2px; background: var(--color-rule); }
.onb__dots i.is-on { background: var(--color-ink); }
@media (max-width: 480px) {
  .onb__top { padding: var(--space-sm) var(--space-md); }
  .onb__signin { font-size: 0; }
  .onb__signin .btn { font-size: var(--text-sm); }
  .onb__cards { grid-template-columns: minmax(0, 1fr); }
  .onb__code input { width: 2.6rem; }
}

.today__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-lg); }
.today__tile {
  display: grid; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: var(--color-ink);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 14px; padding: var(--space-sm) var(--space-md);
}
.today__tile b { font-size: 1.6rem; font-weight: 600; }
.today__tile span { font-size: var(--text-xs); color: var(--color-muted); }
.today__tile:hover { background: var(--color-paper-3); }
.today__tile.is-warn { border-left: 3px solid #BA7517; }
.today__tile.is-alert { border-left: 3px solid var(--color-accent-deep); }
.welcome__grid--solo { grid-template-columns: minmax(0, 26rem); }