/* ============================================================================
   RoboWorx, Vertical-rail design system
   V1 · Page stylesheet: the public funnel pages (home, browse, profile) and
   their right-rail content variants. The shell, rails, nav strip and mega
   menu live in shell.css; this file only adds page content.
   ============================================================================ */

/* ============================================================================
   HOME
   ============================================================================ */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 124px;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--rust);
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.hero .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.hero .kicker::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rust);
}
.hero .subline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 32px;
  max-width: 680px;
  color: var(--ink);
}

/* Wordmark hero, the landing-page brand statement. The double-class
   selector keeps specificity above the responsive .hero h1 overrides;
   clamp() handles every viewport, so no extra media query is needed. */
.hero.hero-wordmark {
  padding-top: 8px;
}
.hero.hero-wordmark h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--ink);
}
.hero.hero-wordmark h1 .x {
  color: var(--rust);
}
.hero.hero-wordmark .subline {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin-top: 20px;
  max-width: 620px;
  color: var(--ink-mute);
}
/* The natural-language search bar (USP), front and centre under the hero. */
.hero-search {
  margin-top: 32px;
  max-width: 620px;
}
.hero-search .search-box {
  max-width: 540px;
}

/* S49-DESIGN3 (founder ruling): the Google-clean landing. The hero owns the
   first viewport of the middle column, wordmark, subline, one long search
   bar, nothing after it. Centred both ways; the rails and nav carry the rest. */
.hero-solo {
  min-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero.hero-wordmark.hero-solo .subline { max-width: none; color: var(--rust); }
/* The branded lockup: the Rx mark sits beside the wordmark, sized off the
   h1's own em so the pair scales together at every viewport. */
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
}
.hero-mark {
  width: 1.12em;
  height: 1.12em;
  flex: none;
}
.hero-solo .hero-search {
  width: 100%;
  max-width: 760px;
  margin-top: 40px;
}
.hero-solo .hero-search .search-box { max-width: none; padding: 4px; }
.hero-solo .search-box input { padding: 14px 18px; font-size: 13px; }
.hero-solo .search-box button[data-search-submit] { padding: 13px 20px; font-size: 11px; }
@media (max-width: 880px) {
  .hero-solo { min-height: 0; padding: 48px 0 64px; }
}

/* ============================================================================
   HOME RIGHT RAIL, daily UK-manufacturing updates
   ============================================================================ */
.rail-news {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.news-card {
  margin-bottom: 28px;
  cursor: default;
}
.news-card .src {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.news-card .ttl {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #fff;
}
.news-card .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
.news-card .meta strong { color: var(--rust); font-weight: 700; }
.rail-news-foot {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* The rust block button used in dark rails. */
.rail-btn {
  padding: 14px 18px;
  font-family: var(--font-mono);
  /* 11px, NEVER 10. claude/DESIGN-TYPOGRAPHY.md states the Button role
     explicitly and this shared component had been breaking its own rule across
     all 81 census entries since it was written. Corrected S57b, when the
     founder said the buttons looked wrong. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: var(--rust);
  color: #fff;
  border: none;
  transition: background 0.15s;
}
.rail-btn:hover { background: var(--rust-dk); }

/* ============================================================================
   BROWSE
   ============================================================================ */
.browse-head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.browse-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 300;
  text-transform: lowercase;
}
.browse-head p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 32px;
  max-width: 560px;
}

/* Filters row: search bar + discipline chips + result count. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.search-box {
  flex: 1;
  min-width: 0;   /* S53 mobile HIGH-1: 280px forced the box wider than a
                     360px phone's content column. */
  display: flex;
  align-items: center;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 3px;
  max-width: 460px;
}
.search-box input {
  /* S53 mobile HIGH-1: `flex: 1` leaves min-width:auto, so the input refused
     to shrink below its ~205px intrinsic width. With .sb-tools (112px, flex:
     none) and the submit button (89px) beside it, the row needed 406px inside
     a 322px content box at 360px, the submit button's right edge pinned at
     x=427 and elementFromPoint said "off-screen". The platform's primary
     control was untappable on a small phone. */
  flex: 1 1 0;
  min-width: 0;
  border: none;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: transparent;
  outline: none;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.search-box input::placeholder { color: var(--ink-mute); }
/* The search box carries its own visible frame, so the global rust focus
   ring (a11y.css) is suppressed on its input to avoid a doubled-up red bar.
   Focus instead reads as a slightly firmer frame on the box itself, which
   keeps the state visible without the jarring outline. */
/* S53 (signed-out red-team): the home page's ONLY control had no perceptible
   focus state. The box already carries `border: 1px solid var(--ink)`, so a
   1px inset shadow of the same colour was indistinguishable from the resting
   state, WCAG 2.4.7 on the platform's core interaction. The ring is now a
   real 2px ink outline set OFF the box so it reads at a glance. */
.search-box input:focus-visible { outline: none; }
.search-box:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.search-box button[data-search-submit] {
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
/* S49-BETA: voice + photo tools, sitting inside the box before Search. */
.sb-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 2px;
  flex: none;
}
.sb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-mute);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sb-icon-btn:hover { color: var(--rust); background: rgba(0, 0, 0, 0.04); }
/* The robot shortcut to /cycle-time is an anchor sharing the icon-button look. */
a.sb-icon-btn { text-decoration: none; }
.sb-icon-btn.is-listening { color: var(--rust); animation: sb-pulse 1.1s ease-in-out infinite; }
.search-box.is-reading { opacity: 0.85; }
@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-icon-btn.is-listening { animation: none; } }
.chip {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.chip.active, .chip:hover { background: var(--ink); color: #fff; font-weight: 700; }
.chip-soon {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}
.chip-soon:hover { background: transparent; color: var(--ink); font-weight: 500; }
.chip-soon em {
  font-style: normal;
  margin-left: 5px;
  color: var(--rust);
}
.filters .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.filters .count strong { color: var(--ink); font-weight: 700; }

/* USP A, related-discipline recommendation strip. */
.related-strip {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.related-strip .rs-label { color: var(--rust); font-weight: 700; }
.related-strip a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.related-strip a:hover { color: var(--rust); border-color: var(--rust); }

/* Multi-dimensional directory filter: a breadcrumb plus one chip row per
   taxonomy level reached. */
.disc-filter {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.df-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.df-crumb { color: var(--ink-mute); text-decoration: none; cursor: pointer; }
.df-crumb:hover { color: var(--rust); }
.df-crumb.current { color: var(--ink); font-weight: 700; }
.df-sep { color: var(--line); }
.df-level { margin-top: 2px; }
.df-level + .df-level { margin-top: 22px; }
.df-level-head {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 13px;
}
.df-engagement .df-level-head { color: var(--ink-mute); }
.df-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Skills refinement: a faceted AND filter on the drilled results. Reuses the
   .chip language so it reads as part of the same drill, with a count badge on
   available skills and a removable treatment on selected ones. */
.skills-refine {
  margin: 26px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.sr-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sr-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}
.sr-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sr-hint strong { color: var(--ink); }
.skill-clear {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.skill-clear:hover { color: var(--rust); border-bottom-color: var(--rust); }
.skill-count {
  font-size: 0.82em;
  color: var(--ink-mute);
  font-weight: 400;
}
.skill-chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 700;
}
.skill-chip.active .skill-count { color: rgba(255, 255, 255, 0.6); }
.skill-x { font-weight: 700; margin-left: 2px; }

/* Result count above the list. */
.browse-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  margin-bottom: 16px;
}
.browse-count strong { color: var(--ink); font-weight: 700; }

/* The specialist list. */
.list { display: flex; flex-direction: column; }
.row {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 60px 56px 1fr auto;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  transition: padding-left 0.15s, background 0.15s;
  color: var(--ink);
}
.row-avatar {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--ink);
  overflow: hidden;
  border-radius: 50%;
}
.row-avatar-photo { background: var(--ink); }
.row-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.row:hover { padding-left: 12px; background: rgba(255,255,255,0.5); }
.row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rust);
  font-weight: 700;
}
.row-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.row-body h3 em { font-style: italic; }
.row-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  align-items: center;
}
.row-meta strong { color: var(--ink); }
.row-meta .pill {
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.row-skills { font-size: 13px; color: var(--ink); line-height: 1.55; }
.row-skills strong { color: var(--rust); font-weight: 600; }
.row-rate {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.row-rate strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}
.row-rate strong small {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
}
.row-rate span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}

/* Empty state when filters match nothing. */
.list-empty {
  padding: 48px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-mute);
}
/* P2.0 H5: the outage variant, visibly NOT the ordinary empty state. */
.list-outage {
  border-left: 3px solid var(--rust, #b7410e);
  padding-left: 16px;
  font-style: normal;
  font-size: 16px;
  color: var(--ink, #1a1a1a);
}
.list-outage a { color: var(--rust, #b7410e); text-decoration: underline; }
/* P2.0 H5: the dashboard outage note (dark workspace surface). */
.dash-outage {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--rust, #b7410e);
  background: rgba(183, 65, 14, 0.12);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  line-height: 1.55;
}

/* ============================================================================
   BROWSE RIGHT RAIL, postcode-aware ranking context
   ============================================================================ */
.rail-context { display: flex; flex-direction: column; gap: 32px; }
.context-block .h {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 12px;
}
.context-block .h em { color: var(--rust-on-dark); }   /* S53: on ink */
.context-block .body {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.context-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.context-stat { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.context-stat strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: #fff;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.context-stat strong span { color: var(--rust); }
.context-stat .lab {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.context-cta {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--rust);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.context-cta:hover { background: var(--rust-dk); }

/* ============================================================================
   PROFILE
   ============================================================================ */
.who-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.who-lbl::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rust);
}
.profile-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.role-strap {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 28px;
}
.role-strap em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.badge {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.badge.rust { background: var(--rust); color: #fff; border-color: var(--rust); }
.badge.solid { background: var(--ink); color: #fff; }
.badge.placed { background: var(--rust); color: #fff; border-color: var(--rust); }
/* Verification trust pills (RTW, PI, PL, certifications) and the work-situation
   badge: quieter than the default ink-bordered badge so they read as standing
   credentials rather than calls to action. */
.badge.trust { background: var(--cream); border-color: var(--line); color: var(--ink); }
.badge.avail { background: var(--sand); border-color: var(--line); color: var(--ink-mute); }

/* Profile header: the photo (or an initial fallback) beside the name block. */
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 24px;
}
.profile-head-text { flex: 1; min-width: 0; }
.profile-avatar {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  color: var(--ink);
  overflow: hidden;
  border-radius: 50%;
}
.profile-avatar-photo { background: var(--ink); }
.profile-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Profile top stats: work status and rating, as neat indicators. */
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}
.pstat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 600;
}
.pstat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
}
/* Work-status traffic light: green available, amber in a contract, red
   permanent, grey when the specialist has not stated their availability. */
.pstat-green .pstat-dot { background: #3E8E41; }
.pstat-amber .pstat-dot { background: #E0A52E; }
.pstat-red   .pstat-dot { background: #B5302A; }
.pstat-grey  .pstat-dot { background: var(--line); }
.pstat-grey  { color: var(--ink-mute); font-weight: 500; }
.pstat-star { color: var(--rust); }

/* The clear-status action inside a dashboard-style alert (profile editor). */
.dash-alert .alert-action {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  border: 1px solid var(--rust);
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
}
.dash-alert .alert-action:hover { background: var(--rust); color: #fff; }
.bio {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 680px;
  margin-bottom: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.profile-section { margin-bottom: 40px; }
.profile-section h2,
.profile-section h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.skill {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
}
.skill strong { font-weight: 500; }
.skill span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.work { display: flex; flex-direction: column; }
.work-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
}
.work-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 500;
  padding-top: 2px;
}
.work-where {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.work-what { font-size: 13px; color: var(--ink-mute); line-height: 1.55; }

/* ============================================================================
   PROFILE RIGHT RAIL, make-an-offer panel
   ============================================================================ */
.offer-rate {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 80px;
  line-height: 0.85;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 6px;
}
.offer-rate span {
  color: var(--rust);
  font-size: 32px;
  vertical-align: top;
  margin-left: -2px;
}
.offer-rate-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
}
.avail {
  padding: 16px 18px;
  background: rgba(212,90,44,0.1);
  border-left: 3px solid var(--rust);
  margin-bottom: 32px;
}
.avail strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 6px;
}
.avail p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}
.fee-block {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 24px;
}
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
}
.fee-row strong { color: #fff; font-weight: 700; }
.fee-row.total {
  font-weight: 700;
  color: var(--rust);
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 6px;
}
.offer-btn {
  display: block;
  width: 100%;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-align: center;
  margin-bottom: 8px;
  transition: all 0.15s;
}
.offer-btn-p { background: var(--rust); color: #fff; }
.offer-btn-p:hover { background: var(--rust-dk); }
.offer-btn-s {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.offer-btn-s:hover { border-color: #fff; }
.offer-btn-s.saved { border-color: var(--rust); color: var(--rust); }
.assurance {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.assurance strong { color: #fff; font-weight: 700; }

/* A "not found" state for an unknown profile id. */
.profile-missing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 560px;
}

/* ============================================================================
   V1 SUPPORTING SURFACES, FAQ, contact, resources, legal
   ============================================================================ */

/* --- Shared support-page header ------------------------------------------- */
.support-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.support-kicker::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rust);
}
.support-head { margin-bottom: 40px; }
.support-head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.support-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 300;
  text-transform: lowercase;
}
.support-head .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  max-width: 620px;
  color: var(--ink);
}

/* --- Shared right-rail block ---------------------------------------------- */
.rail-block { display: flex; flex-direction: column; }
.rail-block .rb-h {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 14px;
}
/* S53: --rust measures 2.87:1 on the ink rail. Every rail heading's italic
   word failed AA. --rust-on-dark is the same accent at 5.43:1. */
.rail-block .rb-h em { color: var(--rust-on-dark); }
.rail-block .rb-body {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 24px;
}
.rail-block + .rail-block { margin-top: 36px; }
/* Stacked rail buttons had ZERO gap: three of them in a row read as one
   striped orange slab. A button needs air around it to look like a button. */
.rail-block .rail-btn + .rail-btn { margin-top: 10px; }
.rail-block .rb-body + .rail-btn,
.rail-block .rb-h + .rail-btn { margin-top: 4px; }

/* --- FAQ ------------------------------------------------------------------- */
.faq-search { margin-bottom: 36px; max-width: 460px; }
.faq-search input {
  width: 100%;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 13px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  outline: none;
}
.faq-search input::placeholder { color: var(--ink-mute); }

.faq-section { margin-bottom: 36px; }
.faq-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  padding: 18px 32px 18px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: color 0.15s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--rust); }
.faq-q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--rust);
  font-weight: 700;
}
.faq-item[open] .faq-q::after { content: '\2212'; }
.faq-a {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
  padding: 0 48px 22px 0;
  max-width: 680px;
}
.faq-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  padding: 24px 0;
}

/* --- Contact --------------------------------------------------------------- */
.contact-list { display: flex; flex-direction: column; gap: 0; }
.contact-card {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.contact-card:first-child { border-top: 1px solid var(--line); }
.cc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 12px;
}
.cc-email {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-block;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.cc-email:hover { color: var(--rust); }
.cc-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 560px;
}

/* --- Resources ------------------------------------------------------------- */
.r-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.r-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.r-tab:hover { color: var(--rust); }
.r-tab.active { color: var(--rust); font-weight: 700; border-bottom-color: var(--rust); }

.r-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.r-card {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 24px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.r-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.r-card-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.r-card-source { color: var(--rust); font-weight: 700; text-transform: uppercase; }
.r-card-date { color: var(--ink-mute); }
.r-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.r-card-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 16px;
  flex: 1;
}
.r-card-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}

/* --- Legal ----------------------------------------------------------------- */
.legal-doc { max-width: 720px; }
.legal-loading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  padding: 24px 0;
}
.legal-body h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 24px 0 8px;
}
.legal-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 14px;
}
.legal-body ul { margin: 0 0 16px 0; padding-left: 22px; }
.legal-body li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 6px;
}
.legal-body strong { font-weight: 700; }
.legal-body em { font-style: italic; }
.legal-body a { color: var(--rust); text-decoration: underline; }
.legal-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 1px 5px;
}
.legal-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}
.legal-body .md-table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0 22px;
  font-size: 13px;
}
.legal-body .md-table th,
.legal-body .md-table td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.legal-body .md-table th {
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal-index { display: flex; flex-direction: column; }
.legal-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: color 0.15s;
}
.legal-link:hover { color: #fff; }
.legal-link.active { color: var(--rust); font-weight: 700; }

/* ============================================================================
   KNOWLEDGE BASE (reference pages). Body type mirrors the legal doc; adds the
   grouped article index and the glyph-style hover-over term treatment.
   ============================================================================ */
.reference-doc { max-width: 760px; }
/* Knowledge-base figures (vetted diagrams + interactives embedded in articles) */
.kb-fig { margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--sand); overflow: hidden; }
.kb-fig-art { padding: 18px 20px; }
.kb-fig-art svg { width: 100%; height: auto; display: block; }
.kb-fig-art .kb-fig-img { width: 100%; height: auto; display: block; border-radius: 4px; }
.kb-fig-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 16px; border-top: 1px solid var(--line); background: #fff; }
.kb-fig-missing { background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 8px, #fff 8px, #fff 16px); }
.kb-fig-missing p { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); padding: 14px 16px; margin: 0; }
/* Embedded interactive check */
.kb-ix { padding: 4px 2px; }
.kb-ix-q { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.kb-ix-opts { display: flex; flex-direction: column; gap: 8px; }
.kb-ix-opt { text-align: left; font-size: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.kb-ix-opt:hover:not(:disabled) { border-color: var(--rust); }
.kb-ix-opt:disabled { cursor: default; }
.kb-ix-opt.is-right { border-color: #3C7A4E; background: rgba(60,122,78,.08); font-weight: 600; }
.kb-ix-opt.is-wrong { border-color: var(--rust); background: rgba(212,90,44,.06); }
.kb-ix-fb { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* Knowledge-base landing page */
.kb-land-h1 { font-family: var(--font-display); font-weight: 900; font-size: 46px; line-height: 1.04; letter-spacing: -0.03em; margin: 6px 0 18px; max-width: 16ch; }
.kb-land-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rust); }
.kb-land-lede { font-size: 17px; line-height: 1.6; color: var(--ink-mute); max-width: 60ch; margin: 0 0 22px; }
.kb-land-scope { display: flex; flex-wrap: wrap; gap: 22px; padding: 16px 0; margin-bottom: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.kb-land-scope strong { color: var(--rust); font-size: 15px; }
.kb-land-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
.kb-land-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--rust); border-radius: 0 0 6px 6px; padding: 20px 22px; text-decoration: none; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.kb-land-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,26,26,.08); }
.kb-land-card.is-soon { border-top-color: var(--line); opacity: .7; }
.kb-land-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kb-land-card-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.kb-land-card-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.kb-land-card-blurb { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); margin: 0; flex: 1 1 auto; }
.kb-land-card-cta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--rust-dk); }
.kb-land-card.is-soon .kb-land-card-cta { color: var(--ink-mute); }
.kb-land-foot { margin-top: 8px; }
@media (max-width: 720px) { .kb-land-grid { grid-template-columns: 1fr; } .kb-land-h1 { font-size: 34px; } }
.reference-body h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 0 0 18px; }
.reference-body h2 { font-family: var(--font-display); font-size: 20px; margin: 30px 0 12px; }
.reference-body h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.reference-body p { font-size: 15px; line-height: 1.65; margin: 0 0 16px; color: var(--ink); }
.reference-body ul { margin: 0 0 16px 0; padding-left: 22px; }
.reference-body li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; }
.reference-body strong { font-weight: 700; }
.reference-body em { font-style: italic; }
.reference-body a { color: var(--rust); text-decoration: underline; }
.reference-body hr { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
.reference-body .md-table { border-collapse: collapse; width: 100%; margin: 16px 0 22px; font-size: 13px; }
.reference-body .md-table th, .reference-body .md-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.55; }
.reference-body .md-table th { background: var(--sand); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.reference-loading { color: var(--ink-mute); font-family: var(--font-mono); font-size: 13px; }

/* Article load states: a skeleton placeholder on first fetch, fading to the
   real content. Cached re-views render straight into .is-ready (no skeleton). */
.reference-body.is-loading { opacity: 1; }
.reference-body.is-ready {
  opacity: 1;
  animation: reference-fade-in 260ms ease-out;
}
@keyframes reference-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reference-body.is-ready { animation: none; }
  .reference-skeleton .sk-line { animation: none; }
}

.reference-skeleton { padding-top: 4px; }
.reference-skeleton .sk-line {
  height: 14px;
  margin: 0 0 14px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--sand) 0%, var(--line) 40%, var(--sand) 80%);
  background-size: 200% 100%;
  animation: reference-shimmer 1.3s ease-in-out infinite;
  opacity: 0.7;
}
.reference-skeleton .sk-title { height: 30px; width: 62%; margin-bottom: 22px; }
.reference-skeleton .sk-h { height: 18px; width: 38%; margin-top: 26px; margin-bottom: 16px; }
.reference-skeleton .sk-short { width: 72%; }
@keyframes reference-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* The grouped article index in the right rail. */
.reference-index { display: flex; flex-direction: column; gap: 14px; }
.reference-group { display: flex; flex-direction: column; }
.reference-group-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 4px;
}
.reference-group-h::before { content: '// '; opacity: 0.7; }
.reference-link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72); padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;
  transition: color 0.15s; text-decoration: none; display: block;
}
.reference-link:hover { color: #fff; }
.reference-link.active { color: var(--rust); font-weight: 700; }
.reference-link.is-upcoming { color: rgba(255,255,255,0.32); cursor: default; }
.reference-link.is-upcoming em {
  font-style: normal; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-left: 6px; opacity: 0.8;
}
.reference-aside {
  margin-top: 16px; font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.55);
}

/* Glyph-style hover-over: a defined term in body text. Dotted underline +
   the signature mono treatment; reveals a short definition card on hover/focus.
   Definition is plain prose, kept brief. */
.kb-term {
  position: relative;
  border-bottom: 1px dotted var(--rust);
  cursor: help;
  font-weight: 500;
}
.kb-term::before {
  content: '//';
  font-family: var(--font-mono); font-size: 0.7em; color: var(--rust);
  opacity: 0; margin-right: 2px; transition: opacity 0.12s;
}
.kb-term:hover::before, .kb-term:focus::before { opacity: 0.8; }
.kb-tip {
  position: absolute; left: 0; bottom: 100%; z-index: 30;
  width: max-content; max-width: 280px; margin-bottom: 8px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-body); font-weight: 400; font-size: 12.5px;
  line-height: 1.45; letter-spacing: 0; padding: 9px 11px;
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
  pointer-events: none;
}
.kb-tip::after {
  content: ''; position: absolute; top: 100%; left: 16px;
  border: 6px solid transparent; border-top-color: var(--ink);
}
.kb-term:hover .kb-tip, .kb-term:focus .kb-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .kb-tip { transition: none; transform: none; }
}

/* --- Knowledge base: article metadata strip + related block --------------- */
.reference-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.reference-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rust-dk);
  border: 1px solid var(--line); padding: 3px 8px; border-radius: 3px;
}
.reference-reviewed {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}
.reference-holding {
  margin-top: 14px; padding: 12px 14px; background: var(--sand);
  border-left: 3px solid var(--line); font-size: 13px; color: var(--ink-mute);
}
.kb-related {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  max-width: 760px;
}
.kb-related-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 10px;
}
.kb-related-list { display: flex; flex-direction: column; gap: 8px; }
.kb-rel {
  font-size: 14px; color: var(--rust); text-decoration: none;
  border-bottom: 1px solid transparent; width: fit-content;
}
.kb-rel:hover { border-bottom-color: var(--rust); }
.kb-rel.is-planned, .kb-rel.is-review {
  color: var(--ink-mute); pointer-events: none;
}
.kb-rel.is-planned em, .kb-rel.is-review em {
  font-style: normal; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px; opacity: 0.7;
}

/* --- Knowledge base: the scalable right-rail directory --------------------- */
.kb-directory { display: block; }
.kb-dir-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.kb-dir-scope {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--rust);
}
.kb-dir-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45); text-transform: uppercase; margin-top: 2px;
}
.kb-disc { display: block; border-bottom: 1px solid rgba(255,255,255,0.12); }
.kb-disc-sum {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 0; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.kb-disc-sum::-webkit-details-marker { display: none; }
.kb-disc-sum::before {
  content: '+'; font-family: var(--font-mono); color: var(--rust);
  width: 14px; display: inline-block; flex: 0 0 14px; text-align: center;
  font-size: 13px;
}
.kb-disc[open] > .kb-disc-sum::before { content: '\2212'; } /* minus */
.kb-disc[open] > .kb-disc-sum { color: #fff; }
.kb-disc-sum:hover { color: #fff; }
.kb-disc-name { flex: 1 1 auto; }
.kb-disc-count {
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4);
  flex: 0 0 auto;
}
/* the article list within an open discipline */
.kb-disc-body {
  list-style: none; margin: 0 0 8px; padding: 0 0 4px 14px;
  border-left: 1px solid rgba(255,255,255,0.12); margin-left: 6px;
}
.kb-cluster-h {
  display: block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rust);
  margin: 14px 0 6px; opacity: 0.85;
}
.kb-cluster-h:first-child { margin-top: 6px; }
.kb-row { display: block; }
.kb-row + .kb-row { border-top: 1px solid rgba(255,255,255,0.06); }
.kb-link {
  display: block; padding: 8px 0; font-size: 12.5px; line-height: 1.4;
  color: rgba(255,255,255,0.74); text-decoration: none; cursor: pointer;
}
.kb-link:hover { color: #fff; }
.kb-link.active { color: var(--rust); font-weight: 600; }
.kb-link.is-planned, .kb-link.is-review { color: rgba(255,255,255,0.34); cursor: default; }
.kb-link-title { display: inline; }
.kb-flag {
  display: inline-block; font-style: normal; font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
  white-space: nowrap;
}
.kb-link.is-review .kb-flag { color: var(--rust); border-color: var(--rust); }



/* ============================================================================
   V2 AUTH SURFACES, sign in, sign up
   ============================================================================ */

/* --- The auth panel (form container) -------------------------------------- */
.auth-panel { max-width: 460px; }
.auth-fields { margin-bottom: 8px; }

/* --- Form field ------------------------------------------------------------ */
.field-row { margin-bottom: 20px; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 8px;
}
.field-req { color: var(--rust); margin-left: 3px; }
.field-control {
  width: 100%;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.field-control:focus { border-color: var(--rust); }
.field-control::placeholder { color: var(--ink-mute); }
select.field-control { cursor: pointer; }
.field-hint {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 6px;
  line-height: 1.4;
}
.field-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--rust);
  margin-top: 6px;
  font-weight: 500;
}
.field-row.has-error .field-control { border-color: var(--rust); }

/* The Turnstile widget mount, keeps height so the form does not jump when
   the widget loads (and shows a tidy empty box if the script is blocked). */
.cf-turnstile {
  min-height: 65px;
  display: flex;
  align-items: center;
}

/* --- Status line ----------------------------------------------------------- */
.auth-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--line);
  background: var(--sand);
  color: var(--ink);
}
.auth-status.error {
  border-left-color: var(--rust);
  color: var(--rust-dk);
}
/* PF-092: the engagement action layer (egrSay, requestDeletion) writes
   is-error / is-ok onto .auth-status, but only .error/.ok had rules, so
   failures on the money surfaces rendered in the neutral info treatment,
   indistinguishable from success. Both vocabularies now render. */
.auth-status.is-error {
  border-left-color: var(--rust);
  color: var(--rust-dk);
  background: #F7E8E1;
}
.auth-status.is-ok {
  border-left-color: #3E6B44;
  color: var(--ink);
}

/* --- Buttons + links ------------------------------------------------------- */
.auth-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: var(--rust);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.auth-btn:hover { background: var(--rust-dk); }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-next {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 18px;
}
.auth-alt {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 14px;
  line-height: 1.6;
}
.auth-alt a { color: var(--rust); border-bottom: 1px solid var(--line); }
.auth-alt a:hover { border-color: var(--rust); }

/* --- Role chooser ---------------------------------------------------------- */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
}
.role-card {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.role-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.rc-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.rc-blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 20px;
  flex: 1;
}
.rc-go {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}

/* --- Sign-up success ------------------------------------------------------- */
.auth-success { max-width: 520px; }
.auth-success-h {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 12px 0 18px;
}
.auth-success-h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 300;
  text-transform: lowercase;
}
.auth-success-p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 20px;
}
.auth-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  padding: 14px 16px;
  background: var(--sand);
  border-left: 3px solid var(--line);
  margin-bottom: 24px;
}
.auth-success .auth-btn { max-width: 280px; }

/* ============================================================================
   V3 SIGNED-IN SURFACES, dashboard, engagement, profile editor, settings
   ============================================================================ */

/* --- Shared headings ------------------------------------------------------- */
.dash-head, .eng-head { margin-bottom: 36px; }
.dash-head h1, .eng-head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 60px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.dash-head h1 em, .eng-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 300;
  text-transform: lowercase;
}
.dash-head .lead, .eng-head .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  max-width: 600px;
  color: var(--ink);
}
.dash-section { margin-bottom: 40px; }
.dash-section-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* --- Auth gate / generic page actions ------------------------------------- */
.gate-actions { max-width: 320px; }
.gate-actions .auth-btn { margin-bottom: 8px; }

/* --- Dashboard: engagements list ------------------------------------------ */
.dash-eng-list { display: flex; flex-direction: column; }
.dash-eng {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding-left 0.12s;
}
.dash-eng:hover { padding-left: 8px; }
.de-parties {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 5px;
}
.de-parties span { color: var(--rust); margin: 0 4px; }
.de-disc {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.de-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.de-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* Status badges (shared dashboard + engagement). */
.de-status, .eng-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
}
.de-active, .eng-active       { background: var(--rust); color: #fff; }
.de-pending, .eng-pending     { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.de-completed, .eng-completed { background: var(--line); color: var(--ink-mute); }

/* --- Dashboard: cards ------------------------------------------------------ */
.dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-card {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.dash-card-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.dash-card-p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 18px;
  flex: 1;
}
.dash-card-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}
.dash-card-btn:hover { color: var(--rust-dk); }

/* --- Dashboard: notifications --------------------------------------------- */
.dash-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.dash-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  flex-shrink: 0;
}
.dash-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--rust);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Cancelled / declined status pill (dashboard + engagement + messages). */
.de-cancelled, .eng-cancelled {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line);
}

/* --- Messages: conversation list ----------------------------------------- */
.msg-conv-list { display: flex; flex-direction: column; }
.msg-conv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding-left 0.12s;
}
.msg-conv:hover { padding-left: 8px; }
.msg-conv.is-unread { background: var(--cream); }
.mc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mc-party {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.mc-new {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--rust);
  color: #fff;
  padding: 3px 7px;
}
.mc-disc { font-size: 13px; color: var(--ink-mute); margin-bottom: 4px; }
.mc-last { font-size: 13px; color: var(--ink); line-height: 1.5; }
.mc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.mc-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* --- Right-rail account links --------------------------------------------- */
.rail-links {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.rail-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: color 0.15s;
}
.rail-link:hover { color: var(--rust); }
/* The current page's own entry in the account menu. */
.rail-link.is-current { color: var(--rust); cursor: default; }
/* Small rust dot marking new activity (messages or offers) on the Messages
   entry of the account menu. */
.rail-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  margin-left: 7px;
  vertical-align: middle;
}
/* The account email sits just above the menu links, so it needs less of a
   gap beneath it than a normal rail-body paragraph. */
.rb-account-email {
  margin-bottom: 4px;
  font-size: 12px;
  word-break: break-all;
}

/* --- Engagement: tags + parties ------------------------------------------- */
.eng-tags { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.eng-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  padding: 4px 9px;
}
/* C-3: a direct engagement (no listing, no application) is flagged so the
   introducer positioning stays honest. Rust accent, cursor hint for the title. */
.eng-tag-direct {
  color: var(--rust);
  border-color: var(--rust);
  cursor: help;
}
.eng-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.party {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 18px 20px;
}
.party-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 8px;
}
.party-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.eng-section { margin-bottom: 36px; }

/* --- Engagement: messages -------------------------------------------------- */
.msg-thread { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.msg {
  padding: 12px 16px;
  background: var(--sand);
  border-left: 2px solid var(--line);
}
.msg-own { border-left-color: var(--rust); background: #F3E9DE; }
.msg-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.msg-from {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.msg-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}
.msg-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.msg-compose { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.msg-compose .field-textarea { width: 100%; }

/* --- Engagement: fee summary (right rail) --------------------------------- */
.fee-rows { margin-bottom: 18px; }
.fee-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.fee-total { color: #fff; font-weight: 700; }
.fee-fee   { color: var(--rust-on-dark); font-weight: 700; }  /* S53: the FEE
              AMOUNT itself, 12px on the ink rail, was 2.87:1 */
.eng-done {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.8);
  padding: 12px 0;
}
/* C-5: a contest status note, sits under the rebate line, lightly separated. */
.eng-note {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 10px;
  color: rgba(255,255,255,0.65);
}
/* P2.0 H3: the specialist-side rebate notice, something happened AGAINST
   this party's placement, so it carries the house rust accent, not a quiet
   grey. */
.eng-rebate-notice {
  border-left: 2px solid var(--rust, #b7410e);
  padding-left: 10px;
  color: rgba(255,255,255,0.9);
}
.eng-startdate { margin: 6px 0 14px; }
.eng-startdate .field-control { margin: 8px 0 10px; }
.eng-startdate .auth-status { margin-top: 8px; }
.eng-whack { margin-bottom: 28px; }
.eng-whack-note {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; color: var(--ink-mute);
  font-size: 13px; line-height: 1.5;
}
.eng-whack-note .ps-prefix {
  font-family: var(--font-mono); color: var(--rust-dk); margin-right: 6px;
}
.eng-rebate { margin: 10px 0 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.eng-rebate .field-control { margin: 6px 0 8px; }
.eng-rebate .auth-status { margin-top: 8px; }
.review-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.review-form .field-label { color: rgba(255,255,255,0.8); }

/* --- Buttons --------------------------------------------------------------- */
/* S58 uniformity: brought to the DESIGN-TYPOGRAPHY §3.1 Button role (11px,
   never 10; 44px tap target). Look unchanged otherwise. */
.btn-rust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  background: var(--rust);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-rust:hover { background: var(--rust-dk); }
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* --- Profile editor / settings -------------------------------------------- */
.auth-panel-wide { max-width: 560px; }
.field-textarea {
  resize: vertical;
  line-height: 1.55;
  font-family: var(--font-mono);
}
.set-section { margin-bottom: 36px; }

/* Account pages (settings, verification): a desktop-only card layout that fills
   the width. Sections become cards at 881px and up; from 1200px they flow as
   two MASONRY columns (CSS multi-column), so a short card no longer forces a
   tall empty gap beside the card next to it. Cards carrying .dash-full span
   both columns. At 880px and below none of this applies and the sections fall
   back to their plain stacked blocks, leaving the mobile design untouched. The
   card colour, border and radius match .vf-section and .pe-section so the three
   account pages look identical. */
@media (min-width: 881px) {
  .dash-grid > .set-section,
  .dash-grid > .vf-section {
    margin: 0 0 18px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 22px 24px 24px;
    break-inside: avoid;
  }
}
@media (min-width: 1200px) {
  .dash-grid { column-count: 2; column-gap: 18px; }
  .dash-grid > .dash-full { column-span: all; }
}

/* The Delete account explanation. It previously used .rb-body, which is only
   styled inside the rail, so on the card it rendered unstyled with no bottom
   margin and the button sat hard against it. */
.set-delete-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 18px;
}

/* Desktop only: bring the profile editor and verification card colour and
   padding into line with the settings cards, without altering the mobile cards
   (their base rules above are unchanged, so the phone layout is untouched). */
@media (min-width: 881px) {
  .pe-section { background: var(--sand); padding: 22px 24px; }
  .vf-section { padding: 22px 24px; }
}
.set-readonly {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 12px 14px;
  max-width: 460px;
}
.toggle-list { margin-bottom: 18px; }
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.toggle-row input { margin-top: 2px; accent-color: var(--rust); width: 16px; height: 16px; }
/* P2.0 H1: the per-toggle explainer line. */
.toggle-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-mute); }

/* Success variant of the auth status line. */
.auth-status.ok {
  border-left-color: var(--rust);
  color: var(--ink);
}

/* --- Offer form (profile right rail) · V8 --------------------------------- */
.offer-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* The hidden attribute must win over the display rule above, so the offer
   form stays collapsed until "Make an offer" is pressed. */
.offer-form[hidden] { display: none; }
.offer-form .field-label {
  margin-top: 0.35rem;
}

/* Read-only display fields inside the offer form: the locked day rate and
   the computed total. Visually distinct from editable inputs but matched in
   typography so the form reads as a single coherent block. The background
   is sand so the ink-coloured amount stays legible against the dark right
   rail. */
.field-readonly {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.field-readonly-unit {
  margin-left: 4px;
  font-weight: 600;
  font-size: 12px;
  color: var(--rust);
}
.field-readonly.field-total {
  font-size: 18px;
  background: var(--cream);
  border-color: var(--rust);
  color: var(--ink);
}

/* Inline invalid state on the duration input. The persistent helper text
   below the input turns rust briefly, the input gains a rust border and
   ring. No popup, no extra error text. Cleared as soon as the user edits. */
.field-control.is-invalid {
  border-color: var(--rust);
  box-shadow: 0 0 0 2px rgba(212, 90, 44, 0.18);
}
.field-help.is-invalid {
  color: var(--rust);
  font-weight: 600;
}

/* Rate-proposal note above the form, shown when the buyer is acting on a
   specialist-sent counter-rate (Phase 2, M11 of the pivot). Kept rendered
   here as the marker styling for that flow; harmless when no proposal is
   active. */
.offer-rate-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rust);
  background: rgba(212, 90, 44, 0.06);
  border-left: 3px solid var(--rust);
  padding: 8px 10px;
  margin-bottom: 6px;
}

/* M11: proposal card in the messages thread. Renders in place of a normal
   message bubble when proposed_day_rate_pence is set. Status drives the
   border colour: pending = rust (action needed), accepted = sand+rust
   border (settled in favour), rejected/expired = quieter grey. */
.proposal-card {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 14px 16px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proposal-card-pending {
  border-color: var(--rust);
  border-left-width: 4px;
}
.proposal-card-accepted {
  border-color: var(--rust);
  background: var(--cream);
}
.proposal-card-rejected,
.proposal-card-expired {
  border-color: var(--line);
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.85;
}
.proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.proposal-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rust);
  font-weight: 700;
}
.proposal-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
}
.proposal-status-pending  { border-color: var(--rust); color: var(--rust); }
.proposal-status-accepted { background: var(--rust); border-color: var(--rust); color: var(--cream); }
.proposal-status-rejected { color: var(--ink-mute); }
.proposal-status-expired  { color: var(--ink-mute); font-style: italic; }
.proposal-body {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.proposal-rate {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.proposal-rate-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--rust);
}
.proposal-note {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.proposal-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  border: 1px solid var(--line);
  cursor: pointer;
}
/* S58 uniformity: .btn-quiet had no base of its own, so used standalone
   (cycle-time, admin) it rendered in the browser's default font. It is now
   the §3.1 QUIET variant in full. */
.btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--rust);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  cursor: pointer;
}
.btn-quiet:hover {
  color: var(--rust-dk);
  text-decoration: underline;
}

/* M11: specialist-side rate-proposal compose panel in the thread, below
   the normal message composer. */
.rate-proposal-compose {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--rust);
  background: rgba(212, 90, 44, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* C-1: separates the day-rate proposal control from the salary one. */
.rate-proposal-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 0 2px;
}
.rate-proposal-compose .field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rust);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.rate-proposal-compose .field-help {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
/* Offer panel helper lines: brand orange, sized to match the "// Availability"
   label on the same rail (10px). */
/* Offer panel helper lines: muted light on the dark rail for legibility, with
   rust reserved for the invalid state below rather than used for every caption. */
.rail-offer .field-help { color: rgba(255,255,255,0.5); font-size: 11px; line-height: 1.45; }
.rail-offer .field-help.is-invalid { color: var(--rust); font-weight: 600; }

/* 046: buyer-pays breakdown (value + expenses + VAT = total). A cream block on
   the dark rail so the ink figures stay legible; one row per line. */
.offer-breakdown {
  background: var(--cream);
  border: 1px solid var(--rust);
  padding: 10px 12px;
  font-family: var(--font-mono);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.ob-label { color: var(--ink-mute); }
.ob-sub { color: var(--rust); font-size: 11px; }
.ob-val { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ob-total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 7px; }
.ob-total .ob-label { color: var(--ink); font-weight: 700; }
.ob-total .ob-val { font-size: 16px; }

/* 046: the transparency note under the fee, muted light on the dark rail. */
.offer-trust-note {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  line-height: 1.5;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* 046: VAT validation state line on the verification page (light background). */
.vf-vat-state { font-size: 12px; line-height: 1.4; margin: 6px 0 0; }
.vf-vat-ok { color: #2e7d32; }
.vf-vat-warn { color: var(--rust-dk); }
.rate-proposal-scope {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-transform: none;
  color: var(--ink-mute);
}
.rate-proposal-perm-note {
  border-top: 1px solid rgba(212, 90, 44, 0.25);
  padding-top: 10px;
  margin-top: 2px;
}
.rate-proposal-perm-note strong { color: var(--ink); }

/* The "no rate published" refusal panel inside the offer form. The buyer
   sees a short explanation and a Discuss-the-rate button instead of the
   form fields. */
.offer-no-rate {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
/* S53 (signed-in red-team): --ink-mute (#555) is a LIGHT-surface token and
   this button sits on the ink rail, measured 2.33:1. It styles every
   secondary rail action, including "Cancel · 48-hour full refund", "Report a
   problem" and "Close without completing". Quiet must still be legible: a
   soft bone at 11.6:1, with the rust accent switching to its on-dark value. */
.rail-btn-quiet {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.4rem;
}
.rail-btn-quiet:hover {
  border-color: var(--rust-on-dark);
  color: var(--rust-on-dark);
}

/* ============================================================================
   Skill picker, the taxonomy drill-down in the profile editor
   ============================================================================ */
.skill-picker {
  margin: 22px 0;
  padding: 20px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.skill-picker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 6px;
}
.skill-picker-hint {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* --- Chosen-skill list ----------------------------------------------------- */
.skill-list { list-style: none; margin: 0 0 10px; }
.skill-list-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
  padding: 8px 0 14px;
}
.skill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 6px;
}
.skill-row-flash { border-color: var(--rust); }
.skill-row-text { flex: 1; min-width: 0; }
.skill-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.skill-row-trail {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.skill-row-prof {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
}
.skill-row-remove {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 4px;
}
.skill-row-remove:hover { color: var(--rust); }

/* --- Drill-down browser ---------------------------------------------------- */
.skill-browser {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.skill-browser-head { margin-bottom: 12px; }
.skill-browser-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.skill-browser-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.skill-crumb {
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--rust);
  cursor: pointer;
  padding: 2px 0;
}
.skill-crumb.is-here { color: var(--ink-mute); cursor: default; }
.skill-crumb-sep { color: var(--ink-mute); font-size: 11px; }

.skill-node-list { list-style: none; }
.skill-node {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 4px;
}
.skill-node-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.skill-node-main:hover { border-color: var(--rust); }
.skill-node-label { font-size: 14px; color: var(--ink); flex: 1; }
.skill-node-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.skill-node-arrow { color: var(--rust); }
.skill-node-add {
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding: 0 12px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.skill-node-add:hover { border-color: var(--rust); color: var(--rust); }
.skill-node-leaf {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
  padding: 8px 0;
}
.skill-browser-foot { margin-top: 12px; }
.skill-add-current {
  border: 1px solid var(--rust);
  background: var(--rust);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.skill-add-current:hover { background: var(--rust-dk); border-color: var(--rust-dk); }

/* ============================================================================
   File upload widget (profile photo, CV, certification evidence)
   ============================================================================ */
.file-upload {
  margin: 18px 0;
  padding: 16px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.file-upload-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 6px;
}
.file-upload-hint {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 12px;
}
.file-upload-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.file-upload-zone:hover { border-color: var(--rust); }
.file-upload-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-weight: 700;
}
.file-upload-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.file-upload-status {
  font-size: 12px;
  margin-top: 8px;
  min-height: 1em;
}
.file-upload-status.is-busy  { color: var(--ink-mute); }
.file-upload-status.is-ok    { color: var(--ink); }
.file-upload-status.is-error { color: var(--rust-dk); }

/* --- The uploaded-file result --------------------------------------------- */
.file-upload-result:empty { display: none; }
.file-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 12px;
}
.file-result-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.file-result-doc {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  border-radius: 3px;
}
.file-result-text { flex: 1; min-width: 0; }
.file-result-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  word-break: break-all;
}
.file-result-name:hover { color: var(--rust); }
.file-result-size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}
.file-result-remove {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 4px;
}
.file-result-remove:hover { color: var(--rust); }

/* ============================================================================
   Verification / credentials page
   ============================================================================ */
.vf-form { max-width: 640px; }
.vf-load-error {
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  color: var(--rust-dk);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 18px;
}
.vf-section {
  padding: 20px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 16px;
}
.vf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.vf-h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.vf-hint {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 14px;
}
.vf-hint a { color: var(--rust); }
.vf-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 12px 0 4px;
}
.vf-req {
  color: var(--rust);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.vf-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.vf-input:focus { outline: 2px solid var(--rust); outline-offset: -1px; }
.vf-group {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* --- Status badges --------------------------------------------------------- */
.vf-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.vf-badge-ok      { background: var(--rust); color: var(--cream); }
.vf-badge-pending { background: var(--cream); color: var(--ink-mute);
                    border: 1px solid var(--line); }

/* --- Certifications -------------------------------------------------------- */
.vf-cert-list { margin-bottom: 12px; }
.vf-cert {
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 10px;
}
.vf-cert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vf-cert-head-right { display: flex; align-items: center; gap: 8px; }
.vf-cert-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}
.vf-cert-remove {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 4px;
}
.vf-cert-remove:hover { color: var(--rust); }
.vf-cert-move {
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 2px;
}
.vf-cert-move:hover { color: var(--rust); }
.vf-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.vf-cert-evidence {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.vf-add-cert {
  border: 1px dashed var(--line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
}
.vf-add-cert:hover { border-color: var(--rust); color: var(--rust); }

/* --- Company verification: the added-company list + the add form ---------- */
.vf-opt {
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.vf-company-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.vf-company-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.vf-company-main { flex: 1; min-width: 0; }
.vf-company-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.vf-company-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.vf-company-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.vf-company-status-verified { background: var(--ink); color: #fff; }
.vf-company-status-self { background: var(--sand); color: var(--ink-mute); border: 1px solid var(--line); }
.vf-company-del {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.vf-company-del:hover { color: var(--rust); }
.vf-company-form { margin-top: 4px; }

@media (max-width: 560px) {
  .vf-cert-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Reviews, profile reviews surface + multi-dimensional review form
   ============================================================================ */
.rev-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.rev-summary-avg {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.rev-summary-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.rev-empty {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.6;
  max-width: 52ch;
}
.rev-stars {
  color: var(--rust);
  letter-spacing: 1px;
  font-size: 14px;
}
.rev-stars-off { color: var(--line); }

.rev-list { margin-top: 4px; }
.rev-card {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.rev-card:first-child { border-top: none; }
.rev-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rev-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.rev-title {
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}
.rev-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  margin-top: 6px;
}
.rev-dims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.rev-dim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rev-dim-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rev-dim-val .rev-stars { font-size: 11px; }

/* --- Reviewee response ----------------------------------------------------- */
.rev-respond-slot:empty { display: none; }
.rev-reply {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border-left: 3px solid var(--rust);
  border-radius: 0 3px 3px 0;
}
.rev-reply-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 4px;
}
.rev-reply-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.rev-respond-btn {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
}
.rev-respond-btn:hover { border-color: var(--rust); color: var(--rust); }
.rev-reply-form { margin-top: 10px; }
.rev-reply-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.rev-reply-btn {
  margin-top: 8px;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.rev-reply-btn:hover { background: var(--rust-dk); border-color: var(--rust-dk); }

/* --- Multi-dimensional review form (engagement page) ---------------------- */
.review-dims-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.review-dim-row { display: flex; flex-direction: column; gap: 3px; }
.review-dim-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.review-dim-opt {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: none;
}

@media (max-width: 560px) {
  .rev-dims, .review-dims-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   IR35 status questionnaire (public tool)
   ============================================================================ */
.ir35-form { max-width: 640px; }
.ir35-q {
  border: 1px solid var(--line);
  background: var(--sand);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.ir35-q-text {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  padding: 0;
}
.ir35-q-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--rust);
  margin-right: 6px;
}
.ir35-q-options {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ir35-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
}

/* --- Result ---------------------------------------------------------------- */
.ir35-result-slot:empty { display: none; }
.ir35-result {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  background: #fff;
}
.ir35-result-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
}
.ir35-res-out  .ir35-result-badge { background: var(--rust); color: var(--cream); }
.ir35-res-in   .ir35-result-badge { background: var(--ink); color: var(--cream); }
.ir35-res-bord .ir35-result-badge { background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); }
.ir35-result-confidence {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 8px;
}
.ir35-result-headline {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 10px 0 16px;
}
.ir35-result-factors-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.ir35-result-factors { list-style: none; margin: 0 0 16px; }
.ir35-factor {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.ir35-factor:first-child { border-top: none; }
.ir35-factor-text { color: var(--ink); flex: 1; }
.ir35-factor-dir {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ir35-dir-outside .ir35-factor-dir { color: var(--rust); }
.ir35-dir-inside  .ir35-factor-dir { color: var(--ink); }
.ir35-dir-unanswered .ir35-factor-dir { color: var(--ink-mute); }
.ir35-dir-unanswered .ir35-factor-text { color: var(--ink-mute); }
.ir35-result-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-mute);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
}
.ir35-result-disclaimer strong { color: var(--ink); }

/* ============================================================================
   Onboarding hub
   ============================================================================ */
.ob-progress { margin: 20px 0 24px; max-width: 640px; }
.ob-progress-track {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.ob-progress-fill {
  height: 100%;
  background: var(--rust);
  transition: width 0.3s ease;
}
.ob-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.ob-steps { max-width: 640px; }
.ob-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 10px;
}
.ob-step.is-done { background: var(--cream); }
.ob-step-mark {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.ob-step.is-done .ob-step-mark {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}
.ob-step-body { flex: 1; min-width: 0; }
.ob-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ob-step-why {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 4px 0 8px;
}
.ob-step-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--rust);
  font-weight: 700;
}
.ob-step-status {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}
.ob-step.is-done .ob-step-status { color: var(--rust); }
.ob-complete {
  max-width: 640px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink);
}
.ob-foot {
  max-width: 640px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.ob-skip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.ob-skip:hover { color: var(--rust); }

/* ============================================================================
   HOW IT WORKS, the four-role connection diagram
   A hub-and-spoke: four role cards in the corners of a 3x3 grid, the RoboWorx
   core in the centre cell, rust connector lines stretched behind via an SVG
   with preserveAspectRatio="none". Below 880px the grid stacks to one column
   and the connector lines are dropped.
   ============================================================================ */
/* ============================================================================
   How it works (M9 of the Specialist-Centric Pivot): a feature card for
   the Specialists protagonist, with three supporting cards below. The old
   four-corner connection diagram was retired because its symmetry
   contradicted the new positioning.
   ============================================================================ */

/* (Old how-it-works role-card styles retired at the comprehensive rebuild;
   the live styles are the .hiw-page block at the end of this file.) */

/* ============================================================================
   Search page (USP A), the natural-language proximity search.
   ============================================================================ */
.search-head { margin-bottom: 28px; }
.search-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 14px;
}
.search-head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.search-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
  color: var(--rust);
}

/* Signed-out gate / no-postcode prompt */
.search-gate {
  max-width: 560px;
  padding: 28px 0 8px;
  border-top: 1px solid var(--line);
}
.search-gate-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 16px;
}
.search-gate-note {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.search-gate-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.search-cta {
  display: inline-block;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}
.search-cta:hover { background: var(--rust); }
.search-gate-alt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
}
.search-gate-alt:hover { color: var(--rust); }

/* Search form: the bar plus the radius selector */
.search-form {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.search-form .search-box { max-width: 100%; }
.radius-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.radius-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.radius-chip {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.radius-chip:hover { border-color: var(--rust); color: var(--rust); }
.radius-chip.active {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}

/* Results */
.search-intro,
.sr-count {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 16px;
}
.sr-count { color: var(--ink); font-weight: 600; }
.sr-list { display: flex; flex-direction: column; }
.sr-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
}
.sr-row:hover .sr-name { color: var(--rust); }
.sr-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  transition: color 0.15s;
}
.sr-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.sr-meta { text-align: right; white-space: nowrap; }
.sr-dist {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rust);
  font-weight: 700;
}
.sr-pc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 4px;
}
.sr-meta { flex-shrink: 0; }

/* USP A, verification badges, bio line and skills on result rows. */
.sr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sr-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 2px 7px;
}
.sr-bio {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 7px;
  max-width: 52ch;
}
.sr-row-listing { cursor: default; }
.sr-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sr-skill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  background: #fff;
}

/* USP A, the complementary "you may also need" recommendation block. */
.sr-comp { margin-top: 44px; }
.sr-comp .search-eyebrow { margin-bottom: 8px; }
.sr-comp-lead {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 60ch;
  margin: 0 0 22px;
}
.sr-comp-list { display: flex; flex-direction: column; gap: 16px; }
.sr-comp-card {
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 18px 20px;
}
.sr-comp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sr-comp-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.sr-comp-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.sr-comp-specs { display: flex; flex-direction: column; gap: 8px; }
.sr-comp-spec {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sr-comp-spec:hover { border-color: var(--rust); }
.sr-comp-spec:hover .sr-name { color: var(--rust); }
.sr-comp-spec-main { min-width: 0; }

/* ============================================================================
   RESOURCES HUB, section nav, tools, co-operative enterprise.
   ============================================================================ */
.res-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.res-nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding-bottom: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.res-nav-link:hover { color: var(--ink); }
.res-nav-link.active { color: var(--rust); border-bottom-color: var(--rust); }

/* Tools, featured interactive tool */
.tool-feature {
  display: block;
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 28px;
  text-decoration: none;
  margin-bottom: 40px;
  transition: border-color 0.15s;
}
.tool-feature:hover { border-color: var(--rust); }
.tool-feature-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 10px;
}
.tool-feature h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.tool-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 14px;
  max-width: 62ch;
}
.tool-feature-go {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
}

/* Tools, written guides */
.tool-guides { display: flex; flex-direction: column; }
.tool-guide {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
}
.tool-guide:first-child { margin-top: 0; }
.tool-guide h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}
.tool-guide p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 68ch;
}
.tool-coming {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* Co-operative enterprise */
.coop-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 72ch;
}
.coop-section h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.coop-section p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* ============================================================================
   ROLE LANDING PAGES, For specialists / SMEs / integrators / innovators
   ============================================================================ */
.role-section-h {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.role-section-h em { font-style: italic; color: var(--rust); }

.role-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding-top: 36px;
  margin-top: 24px;
}
.role-point-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 8px;
}
.role-point h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.role-point p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
}

.role-fees {
  margin-top: 56px;
  padding: 30px 32px;
  background: var(--sand);
  border: 1px solid var(--line);
}
.role-fees-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 18px;
}
.role-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.role-fee-row:first-of-type { border-top: none; padding-top: 0; }
.role-fee-label { font-size: 14px; line-height: 1.55; color: var(--ink); }
.role-fee-val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
  color: var(--rust);
}
.role-fee-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.role-faq { margin-top: 56px; }
.role-faq-h {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.role-faq-item { margin-bottom: 22px; }
.role-faq-item h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.role-faq-item p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
}
.role-faq-item a { color: var(--rust); text-decoration: underline; }

/* === Worked examples block (role pages) ================================== */
.role-examples { margin-top: 56px; }
.role-examples-h {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.role-examples-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 22px;
}
.role-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.role-example {
  background: var(--sand);
  border-left: 3px solid var(--rust);
  padding: 18px 20px;
}
.role-example-case {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.role-example-calc {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0 0 10px;
  white-space: pre-line;
  background: transparent;
  border: none;
  padding: 0;
}
.role-example-result {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--rust);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.role-example-note {
  margin-top: 6px;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* === Comparison strip (role pages) ======================================= */
.role-comparison { margin-top: 56px; }
.role-comparison-h {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.role-comparison-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.role-comparison-table {
  border: 1px solid var(--line);
  background: var(--cream);
}
.role-comparison-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  gap: 10px;
}
.role-comparison-row:first-of-type { border-top: none; }
.role-comparison-head {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 10px 16px;
}
.role-comparison-head span { color: var(--cream); }
.role-comparison-eng { color: var(--ink); font-weight: 500; }
.role-comparison-rwx {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--rust);
  font-size: 14px;
}
.role-comparison-alt {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--ink-mute);
  font-size: 14px;
}
.role-comparison-save {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.role-comparison-head .role-comparison-rwx,
.role-comparison-head .role-comparison-alt,
.role-comparison-head .role-comparison-save,
.role-comparison-head .role-comparison-eng {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  font-size: 10.5px;
}
.role-comparison-note {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 12px;
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .role-points { grid-template-columns: 1fr; }
  .role-examples-grid { grid-template-columns: 1fr; }
  .role-comparison-table { border: none; background: transparent; }
  /* S54 (found independently by A1 and A2; A1 measured it at 1:1 on a
     390px phone). The head row carries BOTH .role-comparison-head and
     .role-comparison-row, and the .role-comparison-row rule below sets
     display:block at equal specificity, so the later rule won and the
     'hidden' header rendered as a 105px block of invisible cream-on-cream
     text on /for-smes and /for-integrators. Raising the specificity is the
     whole fix; do not reorder the two rules instead, because source order
     is not a guarantee anyone reading this file will preserve. */
  .role-comparison-row.role-comparison-head { display: none; }
  .role-comparison-row {
    display: block;
    background: var(--cream);
    border: 1px solid var(--line);
    margin-top: 10px;
    padding: 14px 16px;
  }
  .role-comparison-row span {
    display: block;
    padding: 3px 0;
    font-size: 13px;
  }
  .role-comparison-row span[data-l]::before {
    content: attr(data-l) ":\00a0";
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-decoration: none;
  }
  .role-comparison-eng { font-weight: 600; margin-bottom: 4px; }
  .role-comparison-alt { text-decoration: none; }
}

/* ============================================================================
   BUYER SHORTLIST
   The floating tray + trigger, the slide-in drawer, and the add-to-shortlist
   toggles on the directory rows and the profile offer panel.
   ============================================================================ */

/* --- Floating trigger button ---------------------------------------------- */
.sl-trigger {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--rust);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(26, 26, 26, 0.28);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sl-trigger:hover { background: var(--rust-dk); transform: translateY(-2px); }
.sl-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--cream);
  color: var(--rust-dk);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

/* --- Slide-in drawer ------------------------------------------------------ */
.sl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px rgba(26, 26, 26, 0.2);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.sl-drawer.is-open { transform: translateX(0); }

.sl-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.sl-drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rust);
}
.sl-drawer-title {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
}
.sl-drawer-close {
  flex: none;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sl-drawer-close:hover { border-color: var(--rust); color: var(--rust); }

.sl-drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.sl-empty {
  padding: 28px 0;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.55;
}

.sl-list { list-style: none; margin: 0; padding: 0; }
.sl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sl-item:last-child { border-bottom: none; }
.sl-item-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--rust-dk);
  overflow: hidden;
}
.sl-item-avatar-photo { background: none; }
.sl-item-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.sl-item-text { flex: 1; min-width: 0; }
.sl-item-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-item-title {
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-item-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.sl-item-engage {
  padding: 7px 12px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-item-engage:hover { background: var(--rust); }
.sl-item-remove {
  flex: none;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.sl-item-remove:hover { border-color: var(--rust); color: var(--rust); }

.sl-drawer-foot {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--line);
}
.sl-foot-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.sl-foot-clear {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-foot-clear:hover { border-color: var(--rust); color: var(--rust); }

/* --- Directory-row toggle ------------------------------------------------- */
.row-shortlist {
  margin-top: 6px;
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.row-shortlist:hover { border-color: var(--rust); color: var(--rust); }
.row-shortlist.is-on {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}

/* --- Profile offer-panel toggle ------------------------------------------- */
.offer-btn-s.is-on {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}

/* --- Dashboard secondary link --------------------------------------------- */
.dash-card-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rust);
  text-decoration: none;
}
.dash-card-link:hover { text-decoration: underline; }

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 560px) {
  .sl-drawer { width: 100%; }
  .sl-trigger { right: 16px; bottom: 16px; padding: 11px 15px; }
}

/* ============================================================================
   MESSAGING: conversation thread view + shortlist broadcast compose
   ============================================================================ */

/* --- Conversation thread view (Messages page) ----------------------------- */
.conv-back {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rust);
  text-decoration: none;
}
.conv-back:hover { text-decoration: underline; }
.conv-engage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
}
.conv-engage-btn {
  flex: none;
  padding: 9px 16px;
  background: var(--rust);
  color: var(--cream);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.conv-engage-btn:hover { background: var(--rust-dk); }

/* --- Shortlist: message-all compose + per-item Message -------------------- */
.sl-msgall {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.sl-msgall .field-control { margin-bottom: 8px; }
.sl-foot-send {
  width: 100%;
  padding: 10px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-foot-send:hover { background: var(--rust); }
.sl-foot-actions { display: flex; gap: 8px; }
/* S6b: the whole-shortlist engage button. Renders only when the batch
   surface's capability probe answers (see components/shortlistTray.js). */
.sl-foot-engage {
  width: 100%;
  margin-bottom: 8px;
  padding: 11px;
  background: var(--rust);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.sl-foot-engage:hover { background: var(--rust-dk); }
.sl-foot-msg {
  flex: 1;
  padding: 10px;
  background: var(--rust);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-foot-msg:hover { background: var(--rust-dk); }
.sl-foot-actions .sl-foot-clear { flex: none; width: auto; padding: 10px 14px; }
.sl-item-msg {
  padding: 6px 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-item-msg:hover { border-color: var(--rust); color: var(--rust); }

/* --- One-tap re-engage ---------------------------------------------------- */
.eng-reengage {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.offer-reengage-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--sand);
  border-left: 3px solid var(--rust);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* --- Search: widened-to-UK-wide notice ------------------------------------ */
.sr-count-widened {
  border-left: 3px solid var(--rust);
  padding-left: 12px;
  color: var(--ink);
}

/* (S49 WP-4.3: the dead buyer-directory / opt-in-listing / interests-inbox
   blocks, .buyer-*, .bl-check*, .interest-*, were deleted with the EOI
   product's CSS. The live continuity classes are the .ri-* family in the
   dashboard sections.) */

/* ============================================================================
   The needs picker. (Was "Buyer directory, batch 1 part 3"; the structured
   masked card, directory filter panel and inline verification block were
   deleted S49 WP-4.3 with the EOI product. The needs-* rules below are kept
   outside that sweep: components/needsPicker.js is itself withdrawn, but the
   buyer-directory-check gate owns that surface.)
   ============================================================================ */

/* --- Needs picker (buyer listing), mirrors the skill picker ---------------- */
.needs-picker {
  margin: 6px 0 0;
}
.needs-picker-hint {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 14px;
}
.needs-list { list-style: none; margin: 0 0 10px; padding: 0; }
.needs-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
  padding: 8px 0 14px;
}
.needs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 6px;
}
.needs-row-flash { border-color: var(--rust); }
.needs-row-text { flex: 1; min-width: 0; }
.needs-row-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.needs-row-trail {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.needs-row-primary {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  cursor: pointer;
}
.needs-row-primary input { accent-color: var(--rust); }
.needs-row-remove {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
}
.needs-row-remove:hover { color: var(--rust); }

.needs-browser {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  background: var(--sand);
  margin-top: 4px;
}
.needs-browser-head { margin-bottom: 12px; }
.needs-browser-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.needs-browser-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.needs-crumb {
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rust);
  cursor: pointer;
  padding: 0;
}
.needs-crumb.is-here { color: var(--ink-mute); cursor: default; }
.needs-crumb-sep { color: var(--ink-mute); font-size: 11px; }

.needs-node-list { list-style: none; margin: 0; padding: 0; }
.needs-node {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 4px;
}
.needs-node-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.needs-node-main:hover { border-color: var(--rust); }
.needs-node-label { font-size: 14px; color: var(--ink); flex: 1; }
.needs-node-arrow { color: var(--rust); }
.needs-node-add {
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding: 0 12px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.needs-node-add:hover { border-color: var(--rust); color: var(--rust); }
.needs-node-leaf {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mute);
  padding: 8px 0;
}
.needs-browser-foot { margin-top: 10px; }
.needs-add-current {
  border: 1px solid var(--rust);
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust);
  padding: 8px 14px;
  border-radius: 3px;
  cursor: pointer;
}
.needs-add-current:hover { background: var(--rust); color: #fff; }

/* (S49 WP-4.3: the buyer-listing notice, structured-masked-card and
   directory-filter-panel blocks, .bl-*, .buyer-*, .bf-*, deleted; zero
   references in the tree.) */

/* --- Proximity badge on the specialist card ------------------------------- */
.pill-dist {
  color: var(--rust);
  border-color: var(--rust);
  font-weight: 600;
}

/* --- Specialist preference badges on the card ----------------------------- */
.pill-reach {
  color: var(--ink-mute);
  border-color: var(--line);
  font-weight: 500;
}
.pill-avail {
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

/* --- Checkbox group in the profile editor --------------------------------- */
.field-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
  background: transparent;
  border: none;
}
.field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
}
.field-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--rust);
  cursor: pointer;
}

/* --- Coming-up section on the specialist dashboard ----------------------- */
.dash-section-hint {
  color: var(--ink-mute);
  font-weight: 400;
  font-size: 0.9em;
}
.dash-section-lead {
  color: var(--ink-mute);
  margin: 0 0 0.8rem 0;
  font-size: 0.95rem;
}

/* --- Preference pills inside a search-result row ------------------------- */
.sr-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0;
}
.sr-prefs .pill {
  font-size: 0.82rem;
  padding: 0.15rem 0.55rem;
}

/* ============================================================================
   Specialist directory pagination (browse page).
   Prev / page-numbers / Next. Sits beneath the list. Hidden when the filtered
   result set fits in a single page.
   ============================================================================ */
.pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 32px 0 16px;
  flex-wrap: wrap;
}
.pgn-link {
  display: inline-block;
  padding: 8px 12px;
  min-width: 38px;
  text-align: center;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pgn-link:hover {
  background: var(--sand);
  border-color: var(--ink-mute);
}
.pgn-link:active {
  background: var(--cream);
}
.pgn-link.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.pgn-link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.pgn-gap {
  padding: 8px 4px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 14px;
}
@media (max-width: 520px) {
  .pgn-link { padding: 6px 10px; min-width: 32px; font-size: 13px; }
}

/* ============================================================================
   M6 Phase 1 (May 2026)
   New profile IA: header with the buyer-decision facts grid, six clearly-
   divided sections with consistent treatment, Pause-aware offer-panel
   variants. The legacy .profile-section etc. styles above remain in place
   so any consumer (the dashboard, the directory cards) that still uses
   the old structure keeps rendering correctly.
   ============================================================================ */

.profile-head-m6 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: start;
  padding: 32px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 28px;
}
.profile-head-m6 .profile-avatar {
  width: 96px; height: 96px; font-size: 40px;
}
.profile-head-m6 .profile-stats {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px;
}
.profile-head-m6 .pstat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line);
  background: var(--sand); border-radius: 3px;
  font-family: var(--font-mono); font-size: 12px;
}
.profile-head-m6 .pstat strong { font-weight: 700; }
.profile-head-m6 .pstat-rate strong { color: var(--ink); }
/* S53: the unit takes the smaller rust accent, matching the offer panel's
   rate block so the two figures read as the same statement. */
.pstat-rate .pstat-unit { color: var(--rust); font-size: 0.85em; margin-left: 1px; }

/* The buyer-decision facts grid on the right of the header. */
.profile-facts-col {
  padding-left: 28px; border-left: 1px solid var(--line);
  min-width: 280px; max-width: 360px;
}
.profile-facts {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 16px; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
}
.profile-facts dt { font-weight: 400; }
.profile-facts dd {
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink); margin: 0;
}

/* New M6 sections. Slightly tighter than the legacy .profile-section and
   sit on a white card so each section reads as a distinct block on the
   cream page background. */
.profile-section-m6 {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 36px;
  margin-bottom: 18px;
}
.profile-section-m6 h2,
.profile-section-m6 h3 {
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; letter-spacing: 0.08em; color: var(--ink);
  margin: 0 0 18px 0; text-transform: uppercase;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.profile-section-m6 h2 .ps-prefix,
.profile-section-m6 h3 .ps-prefix {
  color: var(--rust); margin-right: 8px;
}

/* About section body */
.profile-bio {
  font-family: var(--font-display); font-size: 16px;
  line-height: 1.6; color: var(--ink); max-width: none;
  margin: 0;
}

/* Capabilities tag clusters */
.profile-tagcluster { margin-bottom: 16px; }
.profile-tagcluster:last-child { margin-bottom: 0; }
.profile-tagcluster-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em; color: var(--ink-mute);
  margin-bottom: 8px;
}
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tag {
  font-family: var(--font-mono); font-size: 12px;
  padding: 5px 10px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink);
}
.profile-tag-rust {
  background: #fff; border-color: var(--rust);
  color: var(--rust);
}

/* Engagement history rows */
.profile-engagement {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--line); align-items: start;
}
.profile-engagement:last-child { border-bottom: none; }
.pe-when {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute);
}
.pe-what strong {
  display: block; font-weight: 600; font-size: 14px;
  margin-bottom: 4px;
}
.pe-what span {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.5; color: var(--ink-mute);
}
.profile-engagement-summary {
  font-family: var(--font-display); font-size: 14px;
  color: var(--ink-mute); line-height: 1.5; max-width: 600px;
}

/* Certifications grid: two columns of name + detail rows. */
.profile-certs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
.profile-cert {
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.profile-cert:last-child,
.profile-cert:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.profile-cert strong {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--ink); margin-bottom: 4px;
}
.profile-cert span {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
}

/* How I work framing line: states the section is preference/context, not a
   binding term. Demoted below the heading, above the field grid. */
.profile-howframe {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0 0 16px;
  max-width: 60ch;
}

/* How I work grid: two columns of structured fact rows. */
.profile-howgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
.profile-howline {
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.profile-howline:last-child,
.profile-howline:nth-last-child(2):nth-child(odd) { border-bottom: none; }
/* restructure: What I don't do spans both prose columns. */
.profile-howline-wide { grid-column: 1 / -1; }
/* restructure: availability facts demoted into a pill strip below the prose,
   introduced by a mono kicker and divided off so they read as terse facts. */
.profile-availstrip {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.profile-availkicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--rust-dk); margin-bottom: 12px;
}
.profile-availkicker .ps-prefix { margin-right: 6px; }
.profile-whpills { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-whpill {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 11px;
}
.profile-whpill-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-mute);
}
.profile-whpill-v { font-size: 13px; font-weight: 600; color: var(--ink); }
.profile-whnote {
  margin-top: 13px; font-size: 13px; font-style: italic;
  color: var(--ink-mute); line-height: 1.5;
}
.pe-howhours {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.pe-subhead {
  margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink);
}
/* 047: projects / track-record editor + the self-declared block on the profile. */
.pe-project-list { margin: 6px 0 14px; }
.pe-project-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pe-project-display {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.pe-project-edit { display: none; margin-top: 8px; }
.pe-project-row.is-editing .pe-project-display { display: none; }
.pe-project-row.is-editing .pe-project-edit { display: block; }
.pe-project-editbtns { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.pe-textbtn {
  background: none; border: none; color: var(--ink-mute); cursor: pointer;
  font-size: 13px; text-decoration: underline; padding: 0;
}
.pe-textbtn:hover { color: var(--rust); }
.pe-project-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-project-main strong { font-size: 14px; color: var(--ink); }
.pe-project-meta { font-size: 13px; color: var(--ink-mute); }
.pe-project-desc { font-size: 13px; color: var(--ink); margin-top: 3px; }
.pe-project-controls { display: flex; gap: 6px; flex-shrink: 0; }
.pe-iconbtn {
  width: 30px; height: 30px; border: 1px solid var(--line); background: var(--sand);
  border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink);
}
.pe-iconbtn:hover { border-color: var(--rust); color: var(--rust-dk); }
.pe-iconbtn:disabled { opacity: 0.35; cursor: default; }
.pe-iconbtn-danger:hover { border-color: var(--rust); color: var(--rust); }
.pe-project-form { margin-top: 6px; }
.pe-empty { font-size: 13px; color: var(--ink-mute); font-style: italic; padding: 6px 0; }
.profile-engagement-label {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute); margin: 16px 0 6px; font-weight: 600;
}
.profile-engagement .pe-desc {
  display: block; font-size: 13px; color: var(--ink-mute); margin-top: 2px;
}
/* 048: working-hours summary + acknowledgement in the offer panel. */
.offer-workinghours { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.owh-grid { margin: 4px 0 8px; }
.owh-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.owh-label { color: var(--ink-mute); }
.owh-val { color: var(--ink); font-weight: 600; text-align: right; }
.owh-note { font-size: 13px; font-style: italic; color: var(--ink-mute); margin: 4px 0 8px; }
.owh-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink); cursor: pointer; }
.owh-ack input { margin-top: 3px; flex-shrink: 0; }
.profile-howline strong {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--ink); margin-bottom: 4px;
}
.profile-howline span {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.5; color: var(--ink-mute);
}

/* Pause-aware offer panel variants. paused_open_ended hides the form
   entirely; paused_returning shows a Register Interest variant. */
.offer-paused {
  padding: 4px 0;
}
.offer-paused p {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.5; color: var(--cream);
  margin-bottom: 10px;
}
.offer-paused p strong { color: var(--cream); }
.offer-paused-sub {
  opacity: 0.7; font-size: 12px !important;
}
.offer-paused-returning .offer-btn {
  margin-top: 8px;
}
.offer-booked-banner {
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 12px; margin: 12px 0;
  background: rgba(212,90,44,0.18);
  border-left: 3px solid var(--rust);
  color: var(--cream); line-height: 1.4;
  border-radius: 0 3px 3px 0;
}

/* Register-interest form inside the (dark) offer panel. */
.register-label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  color: var(--cream); opacity: 0.8; margin: 4px 0 4px;
}
.register-msg {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--font-display); font-size: 13px; line-height: 1.45;
  padding: 8px 10px; border-radius: 4px;
  border: 1px solid rgba(239,233,220,0.35);
  background: rgba(239,233,220,0.06); color: var(--cream);
}
.register-msg::placeholder { color: rgba(239,233,220,0.45); }
.register-msg:focus { outline: none; border-color: var(--rust); }
.register-status {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.4;
  margin: 8px 0 2px; color: var(--cream); opacity: 0.85;
}
.register-status.is-error { color: #FFB4A2; opacity: 1; }
.register-done {
  font-family: var(--font-display); font-size: 13px; line-height: 1.5;
  color: var(--cream);
}

/* Continuity step 2: "Interest in you" cards on the specialist dashboard. */
.ri-list { display: flex; flex-direction: column; gap: 12px; }
.ri-card {
  border: 1px solid var(--line); border-top: 3px solid var(--rust);
  border-radius: 0 0 6px 6px; background: #fff; padding: 14px 16px;
}
.ri-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 15px; color: var(--ink); margin-bottom: 6px;
}
.ri-head strong { font-weight: 600; }
.ri-when {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.ri-msg {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-mute);
  margin: 0 0 10px;
}
.ri-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ri-state {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}
.ri-state-ok { color: #0F6E56; }

/* Continuity step 3: commitment treatment + the buyer's commitment block. */
.ri-card.commit { border-top-width: 4px; }
.ri-flag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--rust-dk);
  margin-bottom: 6px;
}
.ri-flag-ok { color: #0F6E56; }
.ri-lead { font-size: 14px; margin: 0 0 4px; }
.ri-lead strong { font-weight: 600; }
.ri-terms { display: flex; gap: 7px; flex-wrap: wrap; margin: 6px 0 9px; }
.ri-term {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--sand); border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 8px; color: var(--ink-mute);
}
.ri-foot {
  font-size: 12px; color: var(--ink-mute); line-height: 1.45;
  margin: 9px 0 0;
}
.btn-ghost {
  background: transparent; color: var(--ink-mute); border: none;
  font-size: 12px; cursor: pointer; text-decoration: underline; padding: 8px 4px;
}
.btn-ghost:hover { color: var(--ink); }

/* The "make this a commitment" block inside the (dark) register form. */
.commit-toggle {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 6px;
  padding: 10px; border: 1px solid rgba(239,233,220,0.25); border-radius: 6px;
  background: rgba(212,90,44,0.10); cursor: pointer;
}
.commit-toggle input { margin-top: 3px; accent-color: var(--rust); flex: 0 0 auto; }
.commit-toggle .ct-label { font-size: 12.5px; color: var(--cream); }
.commit-toggle .ct-label strong { color: var(--cream); }
.commit-toggle .ct-sub {
  display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; line-height: 1.4;
}
.commit-fields {
  margin: 8px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.commit-fields[hidden] { display: none; }
.commit-fields label {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--cream);
  opacity: 0.8; display: block; margin-bottom: 3px;
}
.commit-fields input, .commit-fields select {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px;
  border-radius: 4px; border: 1px solid rgba(239,233,220,0.35);
  background: rgba(239,233,220,0.06); color: var(--cream);
}
.commit-fields-wide { grid-column: 1 / 3; }
.commit-note {
  grid-column: 1 / 3; font-size: 11px; opacity: 0.72; font-style: italic;
  margin: 0; color: var(--cream);
}

/* Mobile: the header collapses to a single column. */
@media (max-width: 720px) {
  .profile-head-m6 {
    grid-template-columns: auto 1fr;
  }
  .profile-facts-col {
    grid-column: 1 / -1; padding-left: 0;
    border-left: none; border-top: 1px solid var(--line);
    padding-top: 16px; margin-top: 8px;
  }
  .profile-section-m6 {
    padding: 22px 24px;
  }
  .profile-certs, .profile-howgrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   M6 Phase 1 Session 3: editor sections, Pause-state cards, dashboard
   completeness tile, Pause-state strip, account-rail pills, and the
   directory card variants for paused specialists.
   ============================================================================ */

/* ---- Profile editor: section blocks --------------------------------------- */
.pe-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.pe-section h3 {
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; letter-spacing: 0.08em; color: var(--ink);
  margin: 0 0 16px 0; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.pe-section h3 .ps-prefix { color: var(--rust); margin-right: 8px; }
.pe-section-sub {
  font-family: var(--font-display); font-size: 13px;
  color: var(--ink-mute); line-height: 1.5;
  margin: -8px 0 16px 0; max-width: 640px;
}
.pe-section-pause { background: var(--sand); }

/* ---- Shared continuity status pill (used by editor preview + surfaces) ---- */
.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--line); white-space: nowrap;
}
.stat-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.stat-pill-available { color: var(--green-dk, #0F6E56); border-color: #1D9E75; background: rgba(29,158,117,0.08); }
.stat-pill-available .stat-pill-dot { background: #1D9E75; }
.stat-pill-from { color: var(--rust-dk); border-color: var(--rust); background: rgba(212,90,44,0.07); }
.stat-pill-from .stat-pill-dot { background: var(--rust); }
.stat-pill-break { color: var(--ink-mute); border-color: var(--line); background: var(--cream); }
.stat-pill-break .stat-pill-dot { background: var(--ink-mute); }

/* ---- Continuity four-card selector --------------------------------------- */
.pause-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.pause-card {
  display: block;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pause-card:hover { border-color: var(--rust); }
.pause-card input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--rust);
  margin: 0; cursor: pointer; flex: 0 0 auto;
}
.pause-card-top { display: flex; align-items: center; gap: 10px; }
.pause-card-top strong {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.pause-card-detail {
  display: block;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-mute);
  margin: 6px 0 0 26px;
}
.pause-card-see {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 0 26px;
}
.pause-card-see-note {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
}
.ps-see-hidden {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}
.ps-see-hidden::before {
  content: "\25CF"; margin-right: 6px; color: var(--line);
}
.pause-card-active {
  border-color: var(--rust); border-width: 2px;
  background: rgba(212,90,44,0.04);
  padding: 12px 13px;            /* compensate for the thicker border */
}
.pe-field-row { margin-top: 4px; }
.pe-field-row[hidden] { display: none; }

/* Continuity preference, tied in beneath the status cards: a hairline rule and
   a mono kicker mark it as "and here is how this keeps itself up to date". */
.pe-continuity {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pe-continuity-lead {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 8px;
}
.pe-continuity-lead .ps-prefix { color: var(--rust); margin-right: 4px; }

@media (max-width: 640px) {
  .pause-grid { grid-template-columns: 1fr; }
}

/* ---- Register-interest line on a search result row ----------------------- */
.sr-register {
  font-size: 0.9rem; font-weight: 600; color: var(--rust-dk);
  margin: 0.3rem 0 0.1rem;
}


/* ---- How-I-work six-field grid ------------------------------------------- */
.pe-howgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 24px;
}
@media (max-width: 720px) {
  .pe-howgrid { grid-template-columns: 1fr; }
}

/* ---- Legacy availability collapsed block --------------------------------- */
.pe-legacy {
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 0 16px;
  margin-top: 8px;
}
.pe-legacy summary {
  cursor: pointer; padding: 12px 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.05em;
}
.pe-legacy[open] summary { border-bottom: 1px solid var(--line); }
.pe-legacy-body { padding: 16px 0; }

/* ---- Dashboard: Pause-state strip ---------------------------------------- */
.pe-strip {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.pe-strip-green { border-left-color: #3E8E41; }
.pe-strip-amber { border-left-color: #E0A52E; }
.pe-strip-grey  { border-left-color: var(--ink-mute); }
.pe-strip-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(62,142,65,0.15); color: #3E8E41;
  font-size: 16px;
}
.pe-strip-amber .pe-strip-icon { background: rgba(224,165,46,0.15); color: #8a6618; }
.pe-strip-grey  .pe-strip-icon { background: var(--sand); color: var(--ink-mute); }
.pe-strip-kicker {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-mute);
}
.pe-strip-headline {
  font-family: var(--font-display); font-size: 16px;
  font-weight: 700; color: var(--ink); margin-top: 2px;
}
.pe-strip-detail {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); margin-top: 2px;
}
.pe-strip-btn {
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 14px; background: #fff;
  border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; border-radius: 3px;
  letter-spacing: 0.05em;
}
.pe-strip-btn:hover { background: var(--sand); }

/* ---- Dashboard: completeness tile ---------------------------------------- */
.pe-complete {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.pe-complete-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.pe-complete-h {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--ink-mute);
}
.pe-complete-score {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; color: var(--ink);
}
.pe-complete-score em {
  font-family: var(--font-mono); font-style: normal; font-size: 11px;
  color: var(--ink-mute); font-weight: 400; margin-left: 6px;
}
.pe-bar {
  height: 6px; background: var(--sand); border-radius: 3px;
  overflow: hidden; margin-bottom: 14px;
}
.pe-bar-fill {
  height: 100%; background: var(--rust);
  transition: width 0.3s ease;
}
.pe-complete-rationale {
  font-family: var(--font-display); font-size: 13px;
  color: var(--ink-mute); line-height: 1.5;
  margin: 0 0 14px 0; max-width: 640px;
}
.pe-suggestions { display: flex; flex-direction: column; gap: 8px; }
.pe-suggestion {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--sand);
  border-radius: 3px;
}
.pe-suggestion-weight {
  display: inline-block; text-align: center;
  background: var(--rust); color: #fff;
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 0; border-radius: 10px; font-weight: 700;
  letter-spacing: 0.05em;
}
.pe-suggestion-text {
  font-family: var(--font-display); font-size: 13px;
  color: var(--ink); line-height: 1.4;
}
.pe-suggestion-text em {
  font-family: var(--font-mono); font-size: 11px;
  font-style: normal; color: var(--ink-mute);
  display: block; margin-top: 2px;
}
.pe-suggestion-cta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--rust); text-decoration: none;
  letter-spacing: 0.05em;
}
.pe-suggestion-cta:hover { color: var(--rust-dk); text-decoration: underline; }
.pe-complete-full .pe-bar-fill { background: #3E8E41; }

/* ---- Account rail: pills + signout divider ------------------------------- */
.rail-pill {
  background: var(--rust); color: #fff;
  padding: 2px 8px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.05em; font-weight: 700;
  margin-left: 4px;
}
.rail-link-signout {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

/* ---- Directory card: paused-returning + paused-open-ended variants ------ */
.row-paused-banner {
  grid-column: 1 / -1;
  background: rgba(212,90,44,0.1);
  border-left: 3px solid var(--rust);
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--rust);
  margin-bottom: 12px; border-radius: 0 3px 3px 0;
  letter-spacing: 0.05em;
}
.row-paused-returning { background: var(--sand); }
.row-paused-open { opacity: 0.65; }
.row-paused-open .row-avatar { opacity: 0.5; }

/* ---- Directory card: sector/vendor tag row ------------------------------- */
.row-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.row-tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 7px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink);
}
.row-tag-more {
  background: transparent; border: none;
  color: var(--ink-mute);
}

/* ============================================================================
   M6 Phase 1 polish: dashboard engagement filter tabs + archive controls,
   account-rail messages widget.
   ============================================================================ */

.dash-section-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.dash-section-head .dash-section-h {
  border: none; padding: 0; margin: 0;
}

.dash-eng-tabs {
  display: flex; gap: 4px;
}
.dash-eng-tab {
  font-family: var(--font-mono); font-size: 11px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.dash-eng-tab:hover { color: var(--ink); background: var(--sand); }
.dash-eng-tab.is-current {
  background: var(--ink); color: var(--cream);
  border-color: var(--ink);
}
.dash-eng-tab-count {
  display: inline-block;
  background: rgba(0,0,0,0.1);
  padding: 1px 6px; border-radius: 8px;
  margin-left: 4px; font-size: 10px;
}
.dash-eng-tab.is-current .dash-eng-tab-count {
  background: rgba(239,233,220,0.2);
}

.dash-eng-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.dash-eng-wrap .dash-eng { margin: 0; }
.dash-eng-controls {
  display: flex; gap: 6px;
  padding-right: 4px;
}
.dash-eng-icon {
  width: 32px; height: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-mute);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.dash-eng-icon:hover {
  background: var(--sand);
  color: var(--ink);
}
.dash-eng-icon-del:hover {
  border-color: #B5302A;
  color: #B5302A;
}
.dash-eng-empty {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
  padding: 24px 0; text-align: center;
}

/* Recent messages widget (sits below the dark account rail block) */
.m6-rail-light {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  margin-top: 14px;
}
.m6-rail-light-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.m6-rail-kicker-dark {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--rust); letter-spacing: 0.08em;
}
.m6-link {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--rust); text-decoration: none;
}
.m6-link:hover { color: var(--rust-dk); }

.m6-msg {
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.m6-msg:last-child { border-bottom: none; }
.m6-msg-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 4px;
}
.m6-msg-head strong {
  font-family: var(--font-display); font-size: 13px;
  font-weight: 600; color: var(--ink);
}
.m6-dot-rust {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rust); display: inline-block;
}
.m6-msg p {
  font-family: var(--font-display); font-size: 12px;
  color: var(--ink-mute); margin: 0 0 6px 0;
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.m6-msg-actions {
  display: flex; gap: 12px;
}
/* S53: these are <button>s now, not href="#" anchors. The rail is dark, so
   the accent is the on-dark token. */
.m6-msg-actions a,
.m6-msg-actions button {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--rust-on-dark); text-decoration: none;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: none; border: none; padding: 6px 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 32px;
}
.m6-msg-actions a:hover,
.m6-msg-actions button:hover { color: #fff; }

@media (max-width: 720px) {
  .dash-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dash-eng-tabs { flex-wrap: wrap; }
}

/* ============================================================================
   M6 mockup closure: editor section-head row + badges, tag-pill input,
   Profile Preview rail, dashboard "How buyers see you" block.
   ============================================================================ */

.pe-section-head-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pe-section-head-row h3 {
  margin: 0; padding: 0; border: none;
}
.pe-section-hint {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}

/* Section status badges */
.pe-badge {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 10px; border-radius: 10px;
  letter-spacing: 0.04em; font-weight: 600;
}
.pe-badge-complete {
  background: rgba(62,142,65,0.12); color: #2c6b30;
}
.pe-badge-draft {
  background: rgba(224,165,46,0.18); color: #8a6618;
}
.pe-badge-rust {
  background: rgba(212,90,44,0.14); color: var(--rust);
}
.pe-badge-empty {
  background: rgba(212,90,44,0.14); color: var(--rust);
}
.pe-badge-neutral {
  background: var(--sand); color: var(--ink-mute);
}

/* Cross-reference paragraphs (Certifications / Engagement history) */
.pe-crossref {
  font-family: var(--font-display); font-size: 13px;
  color: var(--ink-mute); line-height: 1.5;
  margin: 0; max-width: 720px;
}
.pe-link { color: var(--rust); text-decoration: none; }
.pe-link:hover { text-decoration: underline; }

/* Two-column inline field row used inside the About section */
.pe-twocol {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
@media (max-width: 720px) {
  .pe-twocol { grid-template-columns: 1fr; }
}

/* Editor head: aligned to the mockup */
.pe-head { margin-bottom: 24px; }
.pe-head h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; margin: 0 0 6px 0;
}
.pe-lead-italic {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--ink-mute);
  max-width: 720px;
}

/* Clean panel: drop the box around the form because each section is now a
   card; the outer panel was the old single-form chrome. */
.pe-panel-clean {
  background: transparent; border: none; padding: 0;
}

/* ---- Tag-pill input -------------------------------------------------------- */
.tag-pill-row { margin-bottom: 16px; }
.tag-pill-input {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff;
  align-items: center;
}
.tag-pill-list {
  display: contents;
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 4px 5px 10px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 3px; font-family: var(--font-mono);
  font-size: 12px; color: var(--ink);
}
.tag-pill-variant-rust {
  background: #fff; border-color: var(--rust); color: var(--rust);
}
.tag-pill-x {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-mute); font-size: 14px;
  padding: 0 6px; line-height: 1;
}
.tag-pill-x:hover { color: var(--ink); }
.tag-pill-variant-rust .tag-pill-x { color: var(--rust); opacity: 0.7; }
.tag-pill-add {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute); padding: 5px 8px;
}
.tag-pill-add:hover { color: var(--ink); }
.tag-pill-add-input {
  border: none; outline: none;
  font-family: var(--font-mono); font-size: 12px;
  padding: 5px 8px; min-width: 160px;
  background: transparent; color: var(--ink);
}
.tag-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; align-items: center;
}
.tag-suggest-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); margin-right: 4px;
}
.tag-suggest-chip {
  padding: 4px 9px; font-family: var(--font-mono);
  font-size: 11px; border: 1px dashed var(--line);
  background: transparent; color: var(--rust);
  border-radius: 3px; cursor: pointer;
}
.tag-suggest-chip:hover {
  border-style: solid; background: rgba(212,90,44,0.06);
}

/* ---- Profile Preview rail ------------------------------------------------- */
.m6-preview-rail {
  background: var(--ink); color: var(--cream);
  padding: 22px 22px; border-radius: 4px;
  margin-bottom: 16px;
}
.m6-preview-kicker {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--rust); letter-spacing: 0.1em; margin-bottom: 8px;
}
.m6-preview-h {
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; margin: 0 0 14px 0; line-height: 1.2;
  color: var(--cream);
}
.m6-preview-body {
  font-family: var(--font-display); font-size: 13px;
  line-height: 1.5; color: rgba(239,233,220,0.85);
  margin-bottom: 16px;
}
.m6-preview-stat {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-family: var(--font-mono); font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.m6-preview-stat:last-of-type { border-bottom: none; margin-bottom: 8px; }
.m6-preview-stat span:first-child { color: rgba(239,233,220,0.6); }
.m6-preview-stat span:last-child { color: var(--cream); font-weight: 600; }
.m6-preview-stat strong { color: var(--rust); }
.m6-preview-btn {
  display: block; width: 100%; margin-top: 8px;
  padding: 12px; border: none;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 12px; cursor: pointer; text-align: center;
  border-radius: 3px; letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.m6-preview-btn-primary {
  background: var(--rust); color: #fff;
}
.m6-preview-btn-primary:hover { background: var(--rust-dk); }
.m6-preview-btn-secondary {
  background: transparent; border: 1px solid rgba(239,233,220,0.3);
  color: var(--cream);
}
.m6-preview-btn-secondary:hover { background: rgba(255,255,255,0.06); }

/* ---- Dashboard: How buyers see you block ---------------------------------- */
.m6-hbsy {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 26px;
}
.m6-hbsy-head {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.08em; color: var(--ink);
  font-weight: 700; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.m6-hbsy-head .label-prefix { color: var(--rust); margin-right: 8px; }
.m6-hbsy-body {
  font-family: var(--font-display); font-size: 14px;
  color: var(--ink); line-height: 1.5;
  margin: 0 0 16px 0; max-width: 720px;
}
.m6-hbsy-body code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--sand); padding: 2px 6px;
  border-radius: 3px; color: var(--ink);
}
.m6-hbsy-actions {
  display: flex; gap: 10px;
}
.m6-hbsy-btn {
  padding: 10px 18px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em; text-decoration: none;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  cursor: pointer;
}
.m6-hbsy-btn:hover { background: var(--sand); }
.m6-hbsy-btn-primary {
  background: var(--ink); color: var(--cream);
  border-color: var(--ink);
}
.m6-hbsy-btn-primary:hover { background: #000; }

/* M6 mockup: messages inbox conversation card with consistent action row */
.msg-conv-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}
.msg-conv-card.is-unread { border-left: 3px solid var(--rust); }
.msg-conv-card .msg-conv {
  display: flex; padding: 16px 20px; gap: 16px;
  text-decoration: none; color: inherit;
}
.msg-conv-card .msg-conv:hover { background: var(--sand); }
.msg-conv-actions {
  display: flex; gap: 16px; padding: 8px 20px 12px;
  border-top: 1px solid var(--line);
  background: var(--sand);
}
/* S53: these are <button>s now, not href="#" anchors. */
.msg-conv-actions a,
.msg-conv-actions button {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--rust); text-decoration: none;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: none; border: none; padding: 8px 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 34px;
}
.msg-conv-actions .msg-conv-quiet { color: var(--ink-mute); }
.msg-conv-actions a:hover,
.msg-conv-actions button:hover { color: var(--rust-dk); }

/* Stage 1: Delete Account section */
.set-delete { padding: 12px 0; }
.btn-danger {
  border-color: var(--rust);
  color: var(--rust);
}
.btn-danger:hover {
  background: var(--rust);
  color: #fff;
}
.btn-danger:disabled {
  border-color: var(--line);
  color: var(--ink-mute);
  background: var(--sand);
  cursor: not-allowed;
}

/* Stage 2: platform fee preview in the offer form */
.field-fee {
  background: var(--sand);
  font-family: var(--font-display);
  font-size: 14px;
  padding: 8px 10px;
}
.field-fee [data-offer-fee-amount] {
  font-weight: 600;
  color: var(--ink);
}
.field-fee-break {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.4;
}

/* Stage 3: Buyer dashboard sections */
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dash-section-link { font-family: var(--font-mono); font-size: 11px; color: var(--rust); text-decoration: none; }
.dash-section-link:hover { text-decoration: underline; }
.dash-section-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--rust);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}
.dash-eng-empty {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-mute);
  font-style: italic;
  padding: 16px;
  background: var(--sand);
  border-left: 3px solid var(--line);
}
.dash-int-row { flex-direction: column; align-items: stretch; }
.dash-int-msg {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--sand);
  border-left: 2px solid var(--rust);
}
.dash-int-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* --- Pending interest CARD (a moment, not a list item) --------------------- */
.dash-int-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 3px solid var(--rust);
  padding: 22px 24px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(26,26,26,0.04), 0 8px 24px -16px rgba(26,26,26,0.35);
}
.dash-int-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.dash-int-flag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.dash-int-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.dash-int-lead {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.dash-int-lead strong { font-weight: 800; }
.dash-int-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.dash-int-tags > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  padding: 3px 9px;
}
.dash-int-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 16px 0 18px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--rust);
}
.dash-int-card .dash-int-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.dash-int-view {
  padding: 14px 22px;
  font-size: 11px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.dash-int-accept { padding: 14px 24px; font-size: 11px; }
.dash-int-open { padding: 14px 24px; font-size: 11px; text-decoration: none; display: inline-flex; align-items: center; }
.dash-int-decline {
  padding: 14px 22px;
  font-size: 11px;
  margin-left: auto;
  border-color: var(--line);
  color: var(--ink-mute);
}
.dash-int-decline:hover { border-color: var(--ink); color: var(--ink); }
.dash-int-foot {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 14px 0 0;
}
/* State variants share the card shell; only the accent + tone change. */
.dash-int-card.is-accepted { border-top-color: #1D9E75; }
.dash-int-card.is-accepted .dash-int-flag { color: #0F6E56; }
/* Active engagement + live listing keep the rust accent (positive, current). */
.dash-int-card.is-active { border-top-color: var(--rust); }
.dash-int-card.is-listing { border-top-color: var(--rust); }
/* The card list wrapper: cards carry their own margin, so this is a plain
   block. Defined so every dashboard section uses one consistent container. */
.dash-int-list { display: block; }

/* --- Dashboard card viewer: one card at a time, no animation ---------------
   Compact (keeps long sections short) and sober (cards swap instantly, no
   flip/spin/conveyor). A header with index tabs + Show-all, a single visible
   card, and a Prev/Next + counter row. */
.rolodex { display: block; outline: none; }
.rolodex:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.rolo-single { display: block; }

.rolo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.rolo-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.rolo-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 11px 9px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-bottom: none;
  background: rgba(200, 192, 174, 0.25);
  color: var(--ink-mute);
  position: relative;
  top: 1px;
  border-radius: 5px 5px 0 0;
  transition: color 0.12s, background 0.12s;
}
.rolo-tab:hover { color: var(--rust); }
.rolo-tab.is-current { background: var(--cream); color: var(--rust); top: 0; padding-bottom: 10px; }
.rolo-showall {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.rolo-showall:hover { color: var(--rust); border-color: var(--rust); }

/* Single visible card. No shadows, no motion. */
.rolo-slides { display: block; }
.rolo-slide[hidden] { display: none; }

.rolo-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.rolo-arrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.rolo-arrow:hover { border-color: var(--rust); color: var(--rust); }
.rolo-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.rolo-letterctx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--line);
  margin-left: -6px;
}

.rolo-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.rolo-filters-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}
.rolo-filter {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rolo-filter:hover { border-color: var(--rust); color: var(--rust); }
.rolo-filter.is-current {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.rolo-flat { display: flex; flex-direction: column; gap: 12px; }
.rolo-flat-card[hidden] { display: none; }
.dash-int-card.is-closed {
  border-top-color: var(--line);
  background: var(--sand);
}
.dash-int-card.is-closed .dash-int-flag { color: var(--ink-mute); }
.dash-int-card.is-closed .dash-int-quote {
  border-left-color: var(--line);
  color: var(--ink-mute);
}
/* Head-right groups the date and the archive control. */
.dash-int-head-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.dash-int-archive {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.dash-int-archive:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
@media (max-width: 640px) {
  .dash-int-card { padding: 18px 16px 16px; }
  .dash-int-lead { font-size: 18px; }
  .dash-int-card .dash-int-actions { gap: 8px; }
  .dash-int-view, .dash-int-accept, .dash-int-decline, .dash-int-open {
    flex: 1 1 auto; text-align: center; justify-content: center; margin-left: 0;
  }
}

/* Stage 3: Engagement full-reveal note */
.eng-reveal-note {
  background: var(--cream);
  border-left: 4px solid var(--rust);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.eng-reveal-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rust);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.eng-reveal-note .rb-body {
  margin: 0;
}

/* Stage 4 polish: profile editor action row */
.pe-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.auth-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.auth-btn-secondary:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Polish: orange activity dot on the top-nav Dashboard link */
.nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  margin-left: 6px;
  vertical-align: middle;
}

/* Buyer dashboard engagement, listing and interest rows ---------------------
   Used by renderBuyerDashboard. Adjacent spans inside dash-eng-meta need
   separator dots so the status, counterparty, duration and value read as
   four discrete facts, not a single run-on string. */
.dash-eng-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--cream);
  border-left: 3px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 2px;
  transition: border-left-color 120ms ease, background 120ms ease;
}
.dash-eng-row:hover {
  background: var(--sand);
  border-left-color: var(--rust);
}
.dash-eng-main {
  flex: 1;
  min-width: 0;
}
.dash-eng-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-eng-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.dash-eng-meta > span + span::before {
  content: '\00B7';
  margin: 0 8px;
  color: var(--line);
}
.dash-eng-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.dash-eng-row:hover .dash-eng-arrow {
  color: var(--rust);
}

/* Stage 5: buyer-directory results in the search page */
.sr-row-buyer {
  border-left: 3px solid var(--rust);
}
.sr-row-buyer .sr-name {
  color: var(--ink);
}

/* Stage 5c: buyer cards inside the complementary-discipline strip */
.sr-comp-buyer {
  border-left: 3px solid var(--rust);
}

/* Stage 5d: tabs on the specialist search surface */
.search-tabs {
  display: flex;
  gap: 0;
  margin-top: 16px;
  border-bottom: 1px solid var(--line);
}
.search-tab {
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.search-tab:hover {
  color: var(--ink);
}
.search-tab.active {
  color: var(--ink);
  border-bottom-color: var(--rust);
}

.hero {
  margin-bottom: 56px;
}

/* Stage 5e: client-side sort toolbar above the result list. Sits just
   above .sr-count so the choices and the count line read together. */
.sr-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.sr-sort-label {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sr-sort-opt {
  text-decoration: none;
  color: var(--ink-mute);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sr-sort-opt:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.sr-sort-opt.active {
  color: var(--cream);
  background: var(--rust);
  border-color: var(--rust);
}

/* Stage 5e: bridge between search results and the structured-browse
   directory. Footer link beneath search results points to /buyers; the
   directory itself carries an inverse hint pointing back to /search. */
.sr-browse-all {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-browse-all-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--rust);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sr-browse-all-link:hover {
  color: var(--rust-dk);
  text-decoration: underline;
}
.sr-browse-all-hint {
  font-size: 13px;
  color: var(--ink-mute);
}
/* Stage 5e: shortlist toggle in the profile head, beside the kicker line.
   Mirrors the row-shortlist look used in the browse rows and search rows. */
.profile-head-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-shortlist {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.profile-shortlist:hover {
  border-color: var(--rust);
  color: var(--rust);
}
.profile-shortlist.is-on {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}

/* Stage 5e: peer panel in the right rail when a specialist views another
   specialist's profile. Echoes the offer-panel visual rhythm but without
   the commercial fields, since RoboWorx doesn't broker peer-to-peer work. */
.peer-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.peer-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0;
}
.peer-panel-lead {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.peer-panel-message {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 18px;
  background: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 4px;
  color: var(--cream);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.peer-panel-message:hover {
  background: var(--rust-dk);
  border-color: var(--rust-dk);
}
.peer-panel-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Stage 5e: footer note under the Collaborators tab list reinforcing the
   off-platform framing. Quiet by design; not a CTA, just a positioning note. */
.sr-collab-note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ============================================================================
   Community Feed (Step 3). The live social timeline. Built from the approved
   prototype, using the locked design tokens. The four role colours (rust /
   blue / green / purple) are set as literals here since only rust is a base
   token; they match the locked palette.
   ============================================================================ */
/* --- Community now uses the STANDARD shell (left rail + main + dark right
   rail), for continuity with every other page. The feed's own internal layout
   is just [profile/filter | feed]; the "Who to follow / Trending / About"
   content lives in the shell's dark right rail (rightHTML), not a separate
   light column. No grid/aside override is needed, and because the grid is no
   longer collapsed the Community -> Browse mega-menu sizing is correct too. */
body.page-community .main { padding: 40px 40px 64px; }

/* --- The feed's own three-column layout (prototype: 230 | 1fr | 290) ------- */
.cf-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 880px;
  margin: 8px auto 0;
}
.cf-left { position: sticky; top: 24px; }
.cf-center { min-width: 0; }
@media (max-width: 1080px) {
  .cf-layout { grid-template-columns: minmax(0, 1fr); }
  /* Stack the left rail (your mini profile + the filter links) above the feed
     rather than hiding it, so it stays reachable on mobile. */
  .cf-left { position: static; margin-bottom: 20px; }
}

.cf-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cf-feed-head h1 {
  font-family: var(--font-display); font-size: 32px; font-weight: 900;
  letter-spacing: -.02em; margin: 0;
}

/* --- Left sub-rail: your-profile card + filter nav ------------------------- */
.cf-lr-card { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.cf-lr-navcard { padding: 8px; }
.cf-lr-me { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cf-lr-av {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-family: var(--font-display);
}
.cf-lr-nm { font-weight: 700; font-size: 14px; }
.cf-lr-rl { font-family: var(--font-mono); font-size: 10px; color: var(--rust-dk); text-transform: uppercase; letter-spacing: .05em; }
.cf-lr-stats { display: flex; gap: 8px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.cf-lr-stat { flex: 1; text-align: left; text-decoration: none; color: inherit; }
.cf-lr-stat .cf-lr-n { display: block; font-weight: 800; font-size: 16px; }
.cf-lr-stat .cf-lr-l { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
a.cf-lr-stat:hover .cf-lr-n { color: var(--rust-dk); }
.cf-lr-nav { list-style: none; margin: 0; padding: 0; }
.cf-lr-nav li {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; display: flex; align-items: center;
  gap: 10px; cursor: pointer;
}
.cf-lr-nav li:hover { background: var(--sand); }
.cf-lr-nav li.active { background: var(--rust); color: #fff; font-weight: 600; }
.cf-lr-ic { width: 18px; text-align: center; }


/* composer */
.cf-composer { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.cf-composer-signedout { text-align: center; }
.cf-composer-signedout p { margin: 0 0 12px; color: var(--ink-mute); font-size: 14px; }
.cf-composer-top { display: flex; gap: 12px; align-items: center; }
.cf-c-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-family: var(--font-display); font-size: 14px; text-decoration: none;
}
.cf-composer-fake {
  flex: 1; text-align: left; border: 1px solid var(--line); border-radius: 24px;
  padding: 11px 16px; color: var(--ink-mute); font-size: 14px; cursor: text;
  background: #fff; font-family: var(--font-body);
}
.cf-composer-fake:hover { border-color: var(--rust); }
.cf-composer-types { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.cf-ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink-mute); background: transparent; border: none;
  padding: 10px 12px; border-radius: 0; min-height: 44px; cursor: pointer;
}
.cf-ct-btn:hover { background: var(--sand); color: var(--ink); }

/* filter bar */
.cf-filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cf-chip {
  font-family: var(--font-mono); font-size: 11px; border: 1.5px solid var(--line);
  background: var(--cream); border-radius: 20px; padding: 6px 13px; color: var(--ink-mute);
}
.cf-chip:hover { border-color: var(--rust); color: var(--rust-dk); }
.cf-chip.active { background: var(--ink); color: var(--sand); border-color: var(--ink); }

/* feed + states */
.cf-feed { display: flex; flex-direction: column; gap: 16px; }
.cf-loading, .cf-empty {
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 30px 22px; text-align: center; color: var(--ink-mute); font-size: 14px;
}
.cf-retry p, .ac-retry p { margin: 0 0 16px; max-width: 42ch; margin-left: auto; margin-right: auto; }
.cf-retry-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #fff; background: var(--rust); border: none; border-radius: 6px;
  padding: 11px 22px; cursor: pointer; transition: background 120ms ease;
}
.cf-retry-btn:hover { background: var(--rust-dk); }

/* post card */
.cf-post { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.cf-post-head { display: flex; gap: 12px; align-items: flex-start; }
.cf-post-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  text-decoration: none; font-family: var(--font-display);
}
.cf-post-meta { flex: 1; min-width: 0; }
.cf-post-nm { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cf-post-nm a { color: var(--ink); text-decoration: none; }
.cf-post-nm a:hover { color: var(--rust-dk); }
.cf-verified { color: var(--rust); font-size: 13px; }
.cf-role-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px; color: #fff; font-weight: 700;
}
.cf-post-sub { font-size: 12.5px; color: var(--ink-mute); }
.cf-post-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.cf-follow {
  font-family: var(--font-mono); font-size: 11px; border: 1.5px solid var(--rust); color: var(--rust-dk);
  background: transparent; border-radius: 20px; padding: 5px 13px; font-weight: 700; white-space: nowrap;
}
.cf-follow.following { border-color: var(--line); color: var(--ink-mute); }
.cf-post-more { background: none; border: none; color: var(--ink-mute); font-size: 20px; line-height: 1; padding: 0 4px; align-self: flex-start; }
.cf-post-more:hover { color: var(--rust-dk); }
.cf-post-cat {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rust-dk); margin: 12px 0 6px;
}
.cf-post-body { font-size: 14.5px; margin: 0; }
.cf-htag { color: var(--rust-dk); font-weight: 600; }

/* role colour map (literals match the locked palette) */
.cf-role-specialist { background: var(--rust); }
.cf-role-sme        { background: #3a6ea5; }
.cf-role-integrator { background: #3C7A4E; }
.cf-role-innovator  { background: #6a4c93; }
.cf-role-tag.cf-role-specialist { background: var(--rust); }
.cf-role-tag.cf-role-sme        { background: #3a6ea5; }
.cf-role-tag.cf-role-integrator { background: #3C7A4E; }
.cf-role-tag.cf-role-innovator  { background: #6a4c93; }

/* media */
.cf-media { margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); position: relative; height: 260px; }
.cf-media-video { background: #15140f; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cf-media-img { background: linear-gradient(135deg, #2a2820, #3a3628); }
.cf-play { width: 60px; height: 60px; border-radius: 50%; background: rgba(212,90,44,.92); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; }
.cf-media-label { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.9); background: rgba(0,0,0,.45); padding: 4px 9px; border-radius: 5px; }
.cf-media-dur { position: absolute; right: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(0,0,0,.6); padding: 3px 7px; border-radius: 4px; }

/* --- real media (canonical {kind,url} entries) ----------------------------- */
.cf-media-real { height: auto; }
.cf-media-video-real { background: #15140f; }
.cf-media-video-real video { display: block; width: 100%; max-height: 420px; background: #000; }
.cf-media-cap { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); padding: 7px 12px; background: var(--sand); border-top: 1px solid var(--line); }
.cf-media-grid { display: grid; gap: 4px; background: var(--line); }
.cf-mg-1 { grid-template-columns: 1fr; }
.cf-mg-2 { grid-template-columns: 1fr 1fr; }
.cf-mg-3 { grid-template-columns: 1fr 1fr; }
.cf-mg-3 .cf-mg-cell:first-child { grid-column: 1 / -1; }
.cf-mg-4 { grid-template-columns: 1fr 1fr; }
.cf-mg-cell { position: relative; margin: 0; background: #15140f; overflow: hidden; }
.cf-mg-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-mg-1 .cf-mg-cell img { max-height: 440px; height: auto; object-fit: contain; background: #15140f; }
.cf-mg-2 .cf-mg-cell, .cf-mg-4 .cf-mg-cell { aspect-ratio: 4 / 3; }
.cf-mg-3 .cf-mg-cell { aspect-ratio: 16 / 7; }
.cf-mg-3 .cf-mg-cell:not(:first-child) { aspect-ratio: 4 / 3; }
.cf-mg-cell .cf-media-label { pointer-events: none; }

/* --- composer attachments --------------------------------------------------- */
.cf-att-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cf-att-row:empty { display: none; }
.cf-att { position: relative; width: 96px; height: 72px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #2a2820; }
.cf-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-att.failed { opacity: .65; outline: 2px solid #b3261e; }
.cf-att-vid { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; color: #EBE6DC; font-size: 18px; padding: 4px; }
.cf-att-nm { font-family: var(--font-mono); font-size: 9px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-att-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.cf-att-prog { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; background: rgba(255,255,255,.85); border-radius: 3px; overflow: hidden; }
.cf-att-bar { display: block; height: 100%; width: 0; background: var(--rust); transition: width .15s; }
.cf-att-pct { position: absolute; top: 6px; left: 6px; font-family: var(--font-mono); font-size: 10px; color: #fff; background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 3px; }
.cf-att-failed { position: absolute; left: 6px; bottom: 6px; font-family: var(--font-mono); font-size: 10px; color: #fff; background: #b3261e; padding: 2px 6px; border-radius: 3px; }
.cf-att-hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-left: 6px; align-self: center; }

/* --- pagination + permalink + lazy comments --------------------------------- */
.cf-loadmore-row { text-align: center; padding: 6px 0 18px; }
.cf-loadmore { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--sand); color: var(--ink); cursor: pointer; }
.cf-loadmore:hover { border-color: var(--rust); color: var(--rust); }
.cf-loadmore:disabled { opacity: .55; cursor: default; }
.cf-permalink { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.cf-permalink:hover { color: var(--rust); border-bottom-color: var(--line); }
.cf-layout-single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.cf-back { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: 14px; text-decoration: none; }
.cf-back:hover { color: var(--rust); }
.cf-loading-sm { padding: 10px 0; font-size: 12px; }

/* embeds */
.cf-embed { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; gap: 14px; align-items: center; background: #fff; }
.cf-ebadge { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #3C7A4E; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #3C7A4E; flex-shrink: 0; font-family: var(--font-display); }
.cf-embed-article .cf-ebadge { border-color: var(--rust); color: var(--rust); border-radius: 10px; }
.cf-et { font-size: 13.5px; font-weight: 700; }
.cf-ed { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* poll */
.cf-poll { margin-top: 14px; }
.cf-poll-q { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.cf-poll-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px; position: relative; overflow: hidden; cursor: pointer; background: #fff; }
.cf-poll-opt.voted { cursor: default; }
.cf-poll-fill { position: absolute; inset: 0; background: rgba(212,90,44,.14); width: 0; transition: width .5s; }
.cf-poll-lbl { position: relative; display: flex; justify-content: space-between; }
.cf-poll-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* engagement bar */
.cf-eng { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.cf-eng-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--ink-mute); font-size: 13px; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.cf-eng-btn:hover { background: var(--sand); color: var(--ink); }
.cf-eng-btn.liked { color: var(--rust-dk); }
.cf-ic { font-size: 15px; }
.cf-eng-sp { flex: 1; }
.cf-report { font-size: 15px; }

/* comments */
.cf-comments { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.cf-comment { display: flex; gap: 10px; margin-bottom: 12px; }
.cf-c-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 12px; flex-shrink: 0; }
.cf-c-bub { background: var(--sand); border-radius: 10px; padding: 9px 13px; font-size: 13px; flex: 1; }
.cf-c-name { font-weight: 700; font-size: 12.5px; }
.cf-comment-list { display: flex; flex-direction: column; }
.cf-comment-box { display: flex; gap: 10px; margin-top: 6px; }
.cf-comment-box input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 9px 15px; font-family: var(--font-body); font-size: 13px; background: #fff; }
.cf-comment-box input:focus { outline: none; border-color: var(--rust); }
.cf-signin-hint { font-size: 12.5px; color: var(--ink-mute); }

/* right rail */
/* Community right-rail sections, on the dark shell rail. The brand's right-rail
   idiom (cf. the profile offer-panel/.avail) is content set DIRECTLY on the dark
   ink rail, white/translucent-white text, rust mono eyebrow headings, and a
   subtle rust-tinted block with a rust left-stripe, NOT white/cream boxes.
   These sections follow that idiom so the rail reads as one system. */
.cf-rr-card {
  padding: 0 0 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cf-rr-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cf-rr-card h4 {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); font-weight: 700;
}
.cf-rr-about { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0; }
.cf-rr-list { margin: 0; padding-left: 18px; font-size: 13px; color: rgba(255,255,255,0.7); }
.cf-rr-list li { margin: 6px 0; }
.cf-rr-muted { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); }

/* Who to follow: rows directly on the dark rail */
.cf-suggest .cf-wtf { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cf-suggest .cf-wtf:first-child { padding-top: 0; }
.cf-suggest .cf-wtf:last-child { padding-bottom: 0; border-bottom: none; }
.cf-wtf-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 13px; flex-shrink: 0; font-family: var(--font-display); }
.cf-wtf-nm { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.cf-wtf-nm a { color: #fff; text-decoration: none; }
.cf-wtf-nm a:hover { color: var(--rust); }
.cf-wtf-rl { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.cf-wtf-fbtn { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rust); color: var(--rust); background: transparent; border-radius: 3px; padding: 6px 12px; font-weight: 700; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.cf-wtf-fbtn:hover { background: var(--rust); color: #fff; }
.cf-wtf-fbtn.following { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.5); }

/* Trending: rust-stripe rows. The hashtag is the hero in rust; the caption is
   a quiet mono line beneath it (stacked, so nothing clips). */
.cf-trend { padding: 11px 0 11px 14px; border-left: 3px solid transparent; border-bottom: 1px solid rgba(255,255,255,0.08); transition: border-color 120ms ease; }
.cf-trend:first-of-type { padding-top: 0; }
.cf-trend:last-child { border-bottom: none; padding-bottom: 0; }
.cf-trend:hover { border-left-color: var(--rust); }
.cf-trend-tag { font-weight: 700; font-size: 15px; color: var(--rust); line-height: 1.2; overflow-wrap: anywhere; }
.cf-trend-ct { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 3px; }

.cf-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); background: #fff; border: 1px dashed var(--line); border-radius: 7px; padding: 11px 14px; }

/* composer modal */
.cf-modal-bg { position: fixed; inset: 0; background: rgba(10,9,6,.55); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; }
.cf-modal-bg.show { display: flex; }
.cf-modal { background: var(--sand); border-radius: 14px; max-width: 560px; width: 100%; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cf-modal-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cf-modal-head h3 { margin: 0; font-size: 16px; }
.cf-modal-close { margin-left: auto; background: none; border: none; font-size: 22px; color: var(--ink-mute); }
.cf-modal-body { padding: 18px 20px; }
.cf-modal-body textarea { width: 100%; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; resize: none; min-height: 120px; }
.cf-modal-body textarea:focus { outline: none; }
.cf-type-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.cf-type-pill { font-family: var(--font-mono); font-size: 11px; border: 1.5px solid var(--line); background: var(--cream); border-radius: 20px; padding: 6px 12px; color: var(--ink-mute); }
.cf-type-pill.sel { background: var(--rust); color: #fff; border-color: var(--rust); }
.cf-modal-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.cf-attach { display: flex; gap: 6px; }
.cf-ab { background: none; border: none; font-size: 18px; color: var(--ink-mute); padding: 6px; border-radius: 7px; }
.cf-ab:hover { background: var(--cream); color: var(--rust-dk); }
.cf-modal-sp { flex: 1; }
.cf-btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 7px; padding: 10px 20px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cf-btn-rust { background: var(--rust); color: #fff; }
.cf-btn-rust:hover { background: var(--rust-dk); }

/* toast */
.cf-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--ink); color: var(--sand); padding: 12px 20px; border-radius: 9px; font-size: 13.5px; z-index: 1100; transition: transform .3s; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 90vw; }
.cf-toast.show { transform: translateX(-50%) translateY(0); }

/* ============================================================================
   Community on the profile (Step 4): Follow button + "Community posts" section.
   ============================================================================ */
.profile-follow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--rust); color: var(--rust-dk); background: transparent;
  border-radius: 20px; padding: 6px 15px; white-space: nowrap; cursor: pointer;
}
.profile-follow:hover { background: var(--rust); color: #fff; }
.profile-follow.is-following { border-color: var(--line); color: var(--ink-mute); }
.profile-follow.is-following:hover { background: transparent; border-color: var(--rust); color: var(--rust-dk); }
.profile-follow-note { font-family: var(--font-mono); font-size: 11px; color: var(--rust-dk); margin-left: 8px; }

.profile-posts { display: flex; flex-direction: column; gap: 14px; }
.profile-post { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.profile-post-cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rust-dk); margin-bottom: 6px;
}
.profile-post-body { font-size: 14px; }
.profile-post-body .cf-htag { color: var(--rust-dk); font-weight: 600; }
.profile-post-embed {
  margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--cream);
}
.profile-post-embed .pp-badge {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #3C7A4E; color: #3C7A4E;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display); flex-shrink: 0;
}
.profile-post-media { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.profile-post-meta {
  display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}
.profile-post-meta a { margin-left: auto; color: var(--rust-dk); text-decoration: none; }
.profile-post-meta a:hover { text-decoration: underline; }

/* ============================================================================
   RoboWorx Academy (Step 6): pathway + level detail + interactive practice.
   Built from the approved prototype, using locked tokens; green/ink-panel/amber
   as literals (matching the prototype) since they are not base tokens.
   ============================================================================ */
.ac-wrap { max-width: 980px; }
/* Academy dark hero, restored from the approved prototype: ink-panel card,
   rust kicker, serif-italic emphasis, decorative concentric circles, stats row. */
.ac-hero { position: relative; overflow: hidden; background: #23211d; color: #fff; border-radius: 14px; padding: 38px 40px; margin-bottom: 34px; }
.ac-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.ac-hero::before { content: ''; position: absolute; right: 10px; bottom: -90px; width: 200px; height: 200px; border: 1px solid rgba(212,90,44,.25); border-radius: 50%; pointer-events: none; }
.ac-hero-kick { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.ac-hero h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 14px; }
.ac-hero-it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--cream); }
.ac-hero p { color: rgba(255,255,255,.75); max-width: 620px; font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
.ac-hero-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--rust); color: #fff; border: none; border-radius: 8px; padding: 14px 22px; font-family: var(--font-display); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 120ms ease; }
.ac-hero-cta:hover { background: var(--rust-dk); }
.ac-hero-stats { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.ac-hero-stat .n { font-size: 28px; font-weight: 800; font-family: var(--font-display); }
.ac-hero-stat .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 2px; }
.ac-head h1 { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.ac-lede { color: var(--ink-mute); font-size: 15px; max-width: 680px; margin: 0 0 28px; }
.ac-loading, .ac-empty { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 30px 22px; text-align: center; color: var(--ink-mute); }

/* discipline + pathway */
.ac-discipline { margin-bottom: 40px; }
.ac-disc-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.ac-disc-head p { color: var(--ink-mute); font-size: 14px; margin: 0 0 18px; max-width: 620px; }
.ac-pathway { position: relative; }

.ac-level-card {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: center;
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; margin-bottom: 16px; transition: transform .12s, box-shadow .12s;
}
.ac-level-card[role="button"] { cursor: pointer; }
.ac-level-card[role="button"]:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,26,26,.08); }
.ac-level-card[role="button"]:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.ac-level-card.is-locked { opacity: .7; }

.ac-badge {
  width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 2.5px solid var(--rust); background: #fff; position: relative; flex-shrink: 0;
}
.ac-badge .lv { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--rust-dk); }
.ac-badge .num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); }
.ac-badge.locked { border-color: var(--line); opacity: .65; }
.ac-badge.done { border-color: #3C7A4E; background: #3C7A4E; }
.ac-badge.done .tick { font-size: 32px; color: #fff; }

.ac-level-info h3 { margin: 0 0 5px; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ac-level-sub { font-family: var(--font-serif); font-style: italic; color: var(--rust-dk); font-size: 15px; }
.ac-level-info p { margin: 7px 0 0; color: var(--ink-mute); font-size: 14px; max-width: 520px; }
.ac-app-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; background: var(--rust); color: #fff; border-radius: 20px; padding: 3px 9px; font-weight: 700; }

.ac-level-meta { text-align: right; min-width: 140px; }
.ac-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; display: inline-block; margin-bottom: 8px; }
.ac-status.done { background: #3C7A4E; color: #fff; }
.ac-status.open { background: var(--rust); color: #fff; }
.ac-status.active { background: #C08A2C; color: #fff; }
.ac-status.locked { background: var(--line); color: var(--ink-mute); }
.ac-detail { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

.ac-special-head { margin: 26px 0 14px; padding-top: 22px; border-top: 1px dashed var(--line); }
.ac-special-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-dk); font-weight: 700; }
.ac-special-head p { margin: 5px 0 0; color: var(--ink-mute); font-size: 13.5px; }

/* right rail */
/* Academy right-rail sections, on the dark shell rail, same on-dark idiom as the
   Community rail (content directly on ink, rust mono eyebrows), not cream boxes. */
.ac-rr-card { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ac-rr-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ac-rr-card h4 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.ac-rr-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: acrr; font-size: 13px; color: rgba(255,255,255,0.7); }
.ac-rr-steps li { position: relative; margin: 0; padding: 9px 0 9px 30px; border-bottom: 1px solid rgba(255,255,255,0.08); line-height: 1.45; counter-increment: acrr; }
.ac-rr-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.ac-rr-steps li:first-child { padding-top: 0; }
.ac-rr-steps li::before { content: counter(acrr); position: absolute; left: 0; top: 8px; width: 19px; height: 19px; border: 1px solid var(--rust); border-radius: 50%; color: var(--rust); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ac-rr-steps li:first-child::before { top: 0; }
.ac-rr-note { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 0; }

/* level detail */
.ac-crumbback { margin-bottom: 16px; }
.ac-crumbback a { font-family: var(--font-mono); font-size: 12px; color: var(--rust-dk); text-decoration: none; }
.ac-crumbback a:hover { text-decoration: underline; }
.ac-detail-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 28px; }
.ac-detail-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; }
.ac-detail-blurb { color: var(--ink-mute); font-size: 14.5px; margin: 8px 0 0; max-width: 560px; }
.ac-grid2 { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .ac-grid2 { grid-template-columns: 1fr; } }
.ac-section-h { font-size: 15px; font-weight: 700; margin: 0 0 14px; }

/* modules */
.ac-module { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 4px 20px; margin-bottom: 14px; }
.ac-module summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; }
.ac-module summary::-webkit-details-marker { display: none; }
.ac-mod-n { width: 30px; height: 30px; border-radius: 7px; background: #23211d; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; flex-shrink: 0; }
.ac-module[open] .ac-mod-n { background: var(--rust); }
.ac-mod-title { flex: 1; }
.ac-mod-check { font-family: var(--font-mono); font-size: 10px; color: #3C7A4E; letter-spacing: .06em; }
.ac-mod-body { padding: 2px 0 18px 44px; color: var(--ink-mute); font-size: 14px; }
.ac-mod-summary { font-weight: 600; color: var(--ink); }
.ac-wiki-links { margin: 12px 0; }
.ac-wiki-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--rust-dk); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; margin: 4px 6px 4px 0; }
.ac-wiki-link:hover { border-color: var(--rust); background: #fff; }

/* practice */
.ac-practice-block { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; margin: 14px 0; }
.ac-practice-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--rust-dk); margin-bottom: 10px; }
.ac-practice { margin-bottom: 16px; }
.ac-practice:last-child { margin-bottom: 0; }
.ac-practice-prompt { font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.ac-options { display: flex; flex-direction: column; gap: 8px; }
.ac-opt { text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--sand); font-size: 13.5px; cursor: pointer; font-family: var(--font-body); }
.ac-opt:hover { border-color: var(--rust); }
.ac-opt.sel { border-color: var(--rust); background: rgba(212,90,44,.08); }
.ac-practice-feedback { margin-top: 10px; font-size: 13px; padding: 9px 12px; border-radius: 7px; }
.ac-practice-feedback.ok { background: rgba(60,122,78,.1); color: #2c5c3a; }
.ac-practice-feedback.partial { background: rgba(192,138,44,.12); color: #8a6018; }
.ac-practice-feedback.no { background: rgba(178,58,46,.1); color: #8f2b22; }
.ac-practice-note { font-style: italic; color: var(--ink-mute); font-size: 13px; }

/* order challenge */
.ac-order-row { display: flex; align-items: center; gap: 10px; background: var(--sand); border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; margin-bottom: 6px; font-size: 13.5px; }
.ac-order-grip { color: var(--ink-mute); }
.ac-order-btns { margin-left: auto; display: flex; gap: 4px; }
.ac-order-btns button { border: 1px solid var(--line); background: #fff; border-radius: 5px; width: 26px; height: 26px; cursor: pointer; }
.ac-order-btns button:hover { border-color: var(--rust); }

/* tcp challenge */
.ac-tcp-row { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; margin-bottom: 8px; }
.ac-tcp-row input[type="range"] { flex: 1; }
.ac-tcp-row output { width: 52px; text-align: right; }

/* map-io challenge */
.ac-mapio-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ac-mapio-sig { font-size: 13px; min-width: 170px; }
.ac-mapio-row select { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-family: var(--font-body); font-size: 13px; background: #fff; }

/* code challenge */
.ac-code-pre { background: #1a1a1a; color: #e6e1d6; border-radius: 8px; padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; overflow-x: auto; margin: 0 0 12px; line-height: 1.6; }

/* side card */
.ac-side-card { background: #23211d; color: #fff; border-radius: 12px; padding: 24px; position: sticky; top: 24px; }
.ac-side-card h4 { margin: 0 0 12px; font-size: 12px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ac-progress-track { height: 8px; background: rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; margin: 6px 0 6px; }
.ac-progress-fill { height: 100%; background: var(--rust); border-radius: 6px; transition: width .4s; }
.ac-progress-label { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.ac-side-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.ac-side-facts li { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.08); }
.ac-side-facts li .ic { color: var(--rust); }
.ac-passed-note { color: #8fd6a2; font-size: 13px; margin-bottom: 12px; }
.ac-exam-hint, .ac-exam-launch-note { font-size: 12px; color: rgba(255,255,255,.6); margin: 10px 0 0; }
.ac-exam-launch-note { color: #e7c98a; }

/* buttons */
.ac-btn { display: inline-block; border: none; border-radius: 8px; padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: var(--font-body); }
.ac-btn-rust { background: var(--rust); color: #fff; width: 100%; }
.ac-btn-rust:hover { background: var(--rust-dk); }
.ac-btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.ac-side-card .ac-btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; width: 100%; }
.ac-mod-complete { margin-top: 8px; font-size: 13px; padding: 8px 14px; }

/* ============================================================================
   Academy Step 7 + UX improvements: discipline roadmap, Level-6 specialism
   family, secure exam overlay, and the reference back-to-Academy link.
   ============================================================================ */

/* discipline / spine labels */
.ac-disc-kicker, .ac-special-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-dk); font-weight: 700; }
.ac-spine-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin: 4px 0 12px; }

/* Level-6 specialism "coming" grid */
.ac-coming-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.ac-coming-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cream); border: 1px dashed var(--line); border-radius: 22px; padding: 8px 14px; font-size: 13px; color: var(--ink-mute); }
.ac-coming-num { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.ac-coming-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--rust-dk); background: rgba(212,90,44,.1); border-radius: 10px; padding: 2px 7px; }
.ac-coming-note { font-size: 12.5px; color: var(--ink-mute); margin: 8px 0 0; }

/* disciplines roadmap */
.ac-roadmap { margin-top: 44px; padding-top: 32px; border-top: 2px solid var(--line); }
.ac-disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.ac-disc-tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.ac-disc-tile-name { font-size: 14px; font-weight: 600; }
.ac-disc-tile-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); background: var(--sand); border-radius: 10px; padding: 3px 8px; }

/* reference back-to-Academy banner */
.reference-backctx { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--rust-dk); text-decoration: none; border: 1px solid var(--line); border-radius: 7px; padding: 7px 13px; margin-bottom: 18px; background: var(--cream); }
.reference-backctx:hover { border-color: var(--rust); background: #fff; }

/* ---- Secure exam overlay ---- */
body.ac-exam-lock { overflow: hidden; }
.ac-exam-overlay { position: fixed; inset: 0; background: #15140f; color: #eee; z-index: 1200; display: none; flex-direction: column; }
.ac-exam-overlay.show { display: flex; }
.ac-exam-bar { display: flex; align-items: center; gap: 18px; padding: 14px 28px; background: #1f1d17; border-bottom: 1px solid rgba(255,255,255,.1); }
.ac-exam-ttl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.ac-exam-secure { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: #3C7A4E; }
.ac-exam-secure .dot { width: 8px; height: 8px; border-radius: 50%; background: #3C7A4E; animation: acpulse 1.6s infinite; }
@keyframes acpulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ac-exam-spacer { flex: 1; }
.ac-exam-progress { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55); }
.ac-exam-timer { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: .04em; padding: 6px 14px; border-radius: 7px; background: rgba(255,255,255,.06); }
.ac-exam-timer.warn { color: #C08A2C; }
.ac-exam-timer.crit { color: #ff6b5b; animation: acpulse 1s infinite; }
.ac-exam-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 40px 24px; }
.ac-exam-q { width: 100%; max-width: 720px; }
.ac-exam-qnum { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
/* exam-mode practice: light card on the dark overlay */
.ac-exam-practice { background: #fff; color: var(--ink); border-radius: 12px; padding: 24px; }
.ac-exam-practice .ac-practice-prompt { font-size: 17px; }
.ac-exam-foot { display: flex; align-items: center; gap: 14px; padding: 16px 28px; background: #1f1d17; border-top: 1px solid rgba(255,255,255,.1); }
.ac-exam-foot .ac-btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.ac-exam-foot .ac-btn-rust { margin-left: auto; }
.ac-exam-dots { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: center; }
.ac-exam-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; padding: 0; }
.ac-exam-dot.done { background: rgba(255,255,255,.5); }
.ac-exam-dot.cur { border-color: var(--rust); background: var(--rust); }
.ac-exam-marking { text-align: center; color: rgba(255,255,255,.7); padding: 60px 0; font-size: 16px; }

/* exam result */
.ac-exam-result { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; gap: 24px; }
.ac-result-card { width: 100%; max-width: 560px; text-align: center; border-radius: 14px; padding: 36px; }
.ac-result-card.pass { background: rgba(60,122,78,.16); border: 1px solid #3C7A4E; }
.ac-result-card.fail { background: rgba(178,58,46,.14); border: 1px solid #B23A2E; }
.ac-result-badge { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 12px; }
.ac-result-card.pass .ac-result-badge { background: #3C7A4E; color: #fff; }
.ac-result-card.fail .ac-result-badge { background: #B23A2E; color: #fff; }
.ac-result-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; }
.ac-result-score { font-size: 34px; font-weight: 800; }
.ac-result-passmark { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: rgba(255,255,255,.55); margin-top: 4px; }
.ac-result-cred { margin-top: 16px; font-size: 14px; color: #8fd6a2; }
.ac-result-retry { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.ac-result-review { width: 100%; max-width: 720px; }
.ac-result-review h3 { font-size: 15px; color: rgba(255,255,255,.8); margin: 0 0 12px; }
.ac-review-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 8px; }
.ac-review-i { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); min-width: 18px; }
.ac-review-mark { font-size: 15px; }
.ac-review-row.ok .ac-review-mark { color: #8fd6a2; }
.ac-review-row.partial .ac-review-mark { color: #e7c98a; }
.ac-review-row.no .ac-review-mark { color: #ff8a7d; }
.ac-review-prompt { font-size: 13.5px; color: rgba(255,255,255,.85); }
.ac-review-explain { display: block; font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 4px; }
.ac-result-actions { padding-bottom: 20px; }

/* ============================================================================
   Academy credentials on the profile (Step 8).
   ============================================================================ */
.profile-creds { display: flex; flex-direction: column; gap: 12px; }
.profile-cred { display: flex; align-items: center; gap: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.profile-cred-badge {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: 2.5px solid #3C7A4E;
  color: #3C7A4E; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; background: #fff;
}
.profile-cred-body { flex: 1; min-width: 0; }
.profile-cred-title { font-weight: 700; font-size: 14.5px; }
.profile-cred-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.profile-cred-verified { font-family: var(--font-mono); font-size: 11px; color: #3C7A4E; font-weight: 700; white-space: nowrap; }

/* ============================================================================
   Pro-social discourse: safety-critical topic tag + credential labelling on
   comments (provenance, not removal). Part 1.
   ============================================================================ */
.cf-topic-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; background: #C08A2C; color: #fff; border-radius: 20px; padding: 2px 8px; font-weight: 700; margin-left: 6px; }
.cf-safety-note { background: rgba(192,138,44,.1); border: 1px solid rgba(192,138,44,.4); border-left: 4px solid #C08A2C; border-radius: 8px; padding: 11px 14px; font-size: 12.5px; color: #6b4e16; margin-bottom: 14px; line-height: 1.5; }
.cf-expertise { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; border-radius: 12px; padding: 1px 7px; margin-left: 6px; font-weight: 700; vertical-align: middle; }
.cf-expertise-cred { background: rgba(60,122,78,.14); color: #2c5c3a; }
.cf-expertise-ver { background: rgba(58,110,165,.14); color: #2c5478; }
.cf-expertise-unver { background: rgba(107,105,97,.14); color: var(--ink-mute); }
.cf-topic-toggle { display: block; margin-top: 12px; font-size: 13px; color: var(--ink); cursor: pointer; }
.cf-topic-toggle input { vertical-align: middle; margin-right: 6px; }
.cf-topic-help { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; margin-left: 22px; }

/* ============================================================================
   Industrial reactions (pro-social discourse part 2a). The question-react is
   the dispute trigger; at threshold an "open to dispute" marker appears.
   ============================================================================ */
.cf-rx-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
.cf-rx { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--sand); border-radius: 20px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; line-height: 1.4; }
.cf-rx:hover { border-color: var(--rust); }
.cf-rx.on { border-color: var(--rust); background: rgba(212,90,44,.1); }
.cf-rx-em { font-size: 13px; }
.cf-rx-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.cf-rx.on .cf-rx-n { color: var(--rust-dk); }
.cf-rx-q.on { border-color: #C08A2C; background: rgba(192,138,44,.12); }
.cf-rx-disputed { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8a6018; background: rgba(192,138,44,.14); border: 1px solid rgba(192,138,44,.4); border-radius: 20px; padding: 3px 9px; font-weight: 700; margin-left: 4px; }
/* comment layout now stacks the bubble + its reaction bar */
.cf-c-main { flex: 1; min-width: 0; }
.cf-comment .cf-rx-bar { margin: 4px 0 0 2px; }

/* ============================================================================
   Dispute vote (pro-social discourse part 2b). Resolves to "Contested", never
   "wrong"; two separate tallies (community vs credentialed peers).
   ============================================================================ */
.cf-dispute { margin: 8px 0 2px; }
.cf-dispute-empty { margin: 0; }
.cf-disp-open { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #C08A2C; background: rgba(192,138,44,.1); color: #8a6018; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cf-disp-open:hover { background: rgba(192,138,44,.18); }
.cf-disp-hint { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }

.cf-dispute-active { background: #fff; border: 1px solid var(--line); border-left: 4px solid #C08A2C; border-radius: 10px; padding: 14px 16px; }
.cf-disp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cf-disp-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; border-radius: 20px; padding: 3px 10px; }
.cf-disp-badge.open { background: rgba(192,138,44,.14); color: #8a6018; }
.cf-disp-badge.contested { background: #23211d; color: #fff; }
.cf-disp-badge.withdrawn { background: var(--line); color: var(--ink-mute); }
.cf-disp-appealed { font-family: var(--font-mono); font-size: 10px; color: var(--rust-dk); }
.cf-disp-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.cf-disp-rationale { font-size: 13.5px; color: var(--ink); margin-bottom: 12px; }
.cf-disp-tallies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-tally { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cf-tally-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust-dk); font-weight: 700; margin-bottom: 8px; }
.cf-tally-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.cf-tally-row b { font-variant-numeric: tabular-nums; }
.cf-tally-tot { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); margin-top: 6px; }
.cf-disp-note { font-size: 11.5px; color: var(--ink-mute); font-style: italic; margin: 10px 0; }
.cf-disp-vote { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cf-disp-vlabel { font-size: 12.5px; color: var(--ink-mute); }
.cf-disp-vbtn { border: 1px solid var(--line); background: var(--sand); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.cf-disp-vbtn:hover { border-color: var(--rust); }
.cf-disp-vbtn.on { border-color: var(--rust); background: rgba(212,90,44,.1); color: var(--rust-dk); font-weight: 600; }
.cf-disp-reply { background: var(--sand); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.cf-disp-replybox { margin-top: 10px; }
.cf-disp-replybox input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-size: 13px; }
.cf-disp-withdraw, .cf-disp-close, .cf-disp-appeal { border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; margin: 10px 8px 0 0; }
.cf-disp-close { border-color: #C08A2C; color: #8a6018; }
.cf-disp-withdraw:hover, .cf-disp-close:hover, .cf-disp-appeal:hover { border-color: var(--rust); }
.cf-comment .cf-dispute { margin-left: 2px; }
@media (max-width: 560px) { .cf-disp-tallies { grid-template-columns: 1fr; } }

/* ============================================================================
   COMMUNITY PHASE 1 (10 Jun 2026): real avatars, live hashtags + tag follows,
   tag-filter bar, NDA media nudge, Verified-help-nearby card.
   ============================================================================ */

/* --- Real avatars with an initials fallback --------------------------------
   .cf-av wraps every avatar circle. Initials render underneath; when a
   photoFileId exists the <img> covers them; on image error JS adds .noimg and
   the initials show through. The role colour stays on the wrapper either way,
   surviving as a 2px ring around a real photo. */
.cf-av { position: relative; overflow: hidden; }
.cf-av .cf-av-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: block;
}
.cf-av.noimg .cf-av-img { display: none; }
.cf-post-av.cf-av .cf-av-img, .cf-lr-av.cf-av .cf-av-img { border: 2px solid currentColor; }
.cf-av .cf-av-ini { position: relative; z-index: 0; }

/* --- Live hashtags: in-body tags are real actions --------------------------- */
button.cf-htag {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--rust-dk); font-weight: 600;
}
button.cf-htag:hover { text-decoration: underline; }

/* --- Tag-filter bar above the composer -------------------------------------- */
.cf-tagbar:empty { display: none; }
.cf-tagbar { margin: 0 0 12px; }
.cf-tagchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sand); border: 1px solid var(--line); border-left: 3px solid var(--rust);
  padding: 7px 10px 7px 12px; font-size: 13px; color: var(--ink);
}
.cf-tagchip b { color: var(--rust-dk); }
.cf-tagchip-x {
  border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--ink-mute); padding: 0 2px;
}
.cf-tagchip-x:hover { color: var(--rust); }

/* --- Trending rows: actionable tag + follow star ----------------------------
   The row keeps the established dark-rail idiom (rust hero tag, mono caption,
   left-stripe hover); the tag becomes a button and a star joins the right. */
.cf-trend { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 8px; }
.cf-trend .cf-trend-ct { grid-column: 1; }
button.cf-trend-tag {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-weight: 700; font-size: 15px; color: var(--rust); line-height: 1.2;
  overflow-wrap: anywhere; font-family: inherit;
}
button.cf-trend-tag:hover { text-decoration: underline; }
.cf-tag-fbtn {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1;
  color: rgba(255,255,255,0.45); padding: 2px 4px;
}
.cf-tag-fbtn:hover { color: var(--rust); }
.cf-tag-fbtn.on { color: var(--rust); }
.cf-mytags .cf-trend { border-bottom: 1px solid rgba(255,255,255,0.08); }
.cf-mytags .cf-trend:last-child { border-bottom: none; }

/* --- NDA media nudge in the composer ----------------------------------------
   Calm, factual, dismissible. Never blocks. */
.cf-nda {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--sand); border: 1px solid var(--line); border-left: 3px solid #F5C518;
  padding: 10px 12px; margin: 10px 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
.cf-nda-ic { flex-shrink: 0; font-size: 15px; }
.cf-nda-tx { flex: 1; }
.cf-nda-tx a { color: var(--rust-dk); }
.cf-nda-ok {
  flex-shrink: 0; align-self: center; border: 1px solid var(--line); background: #fff;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cf-nda-ok:hover { border-color: var(--rust); color: var(--rust-dk); }

/* --- Verified-help-nearby card on question posts ----------------------------
   A slim routing strip, deliberately quieter than the post content above it. */
.cf-helpcard {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sand); border: 1px solid var(--line); border-left: 3px solid var(--rust);
  padding: 10px 12px; margin: 12px 0 2px; font-size: 12.5px; color: var(--ink);
}
.cf-helpcard-ic { flex-shrink: 0; }
.cf-helpcard-tx { flex: 1; min-width: 180px; }
.cf-helpcard-cta {
  flex-shrink: 0; font-weight: 700; color: var(--rust-dk); text-decoration: none;
  font-size: 12.5px; white-space: nowrap;
}
.cf-helpcard-cta:hover { text-decoration: underline; }

/* --- 10 Jun live-bug batch ---------------------------------------------------
   Me-card is now a real profile link; Save shows its state. */
a.cf-lr-me { color: inherit; text-decoration: none; cursor: pointer; }
a.cf-lr-me:hover .cf-lr-nm { text-decoration: underline; }
.cf-eng-btn.saved { color: var(--rust-dk); font-weight: 700; }

/* --- 10 Jun Resources hub rebuild --------------------------------------------
   News kinds, calculators, co-op hub, funding directory, KB provenance strip
   and the generated robotics index. */
.r-kind { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust-dk); border: 1px solid var(--line);
  background: var(--sand); padding: 1px 6px; white-space: nowrap; }
.r-empty { font-size: 14px; color: var(--ink-mute); border: 1px dashed var(--line);
  padding: 18px; background: var(--sand); }

.tool-calcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin: 22px 0 28px; }
.tool-calc { border: 1px solid var(--line); background: var(--sand); padding: 16px; }
.tool-calc-tag { font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rust-dk); }
.tool-calc h3 { margin: 6px 0 6px; font-size: 16px; }
.tool-calc > p { font-size: 13px; color: var(--ink-mute); line-height: 1.5; margin: 0 0 10px; }
.tool-calc-f { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px; font-size: 13px; }
.tool-calc-f span { color: var(--ink); }
.tool-calc-f input { width: 110px; padding: 6px 8px; border: 1px solid var(--line);
  background: #fff; font: inherit; font-size: 13px; }
.tool-calc-f input:focus { outline: 2px solid var(--rust); outline-offset: 0; }
.tool-calc-out { border-left: 3px solid var(--rust); background: #fff; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.5; margin: 12px 0 8px; min-height: 2.4em; }
.tool-calc-note { font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; margin: 0; }

.coop-why, .coop-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.coop-why li, .coop-steps li { font-size: 14px; line-height: 1.55; margin-bottom: 10px;
  padding-left: 14px; border-left: 3px solid var(--rust); }
.coop-links { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.coop-links th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; text-align: left; color: var(--ink-mute);
  border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; }
.coop-links td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0;
  vertical-align: top; line-height: 1.5; }
.coop-links td:first-child { font-weight: 700; white-space: nowrap; }
.coop-checked { font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); margin-top: 8px; }

.fund-h { margin: 26px 0 6px; font-size: 16px; }
.fund-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fund-table th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; text-align: left; color: var(--ink-mute);
  border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; }
.fund-table td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0;
  vertical-align: top; line-height: 1.5; }
.fund-nm { font-weight: 700; white-space: nowrap; }
.fund-chk { font-family: var(--font-mono); font-size: 10px; color: #2c5c3a;
  white-space: nowrap; }
.fund-note { font-size: 13px; color: var(--ink-mute); margin-top: 18px; line-height: 1.55; }

.kb-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kb-prov-rev { font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: .03em; }
.kb-prov-rev b { color: var(--ink); }
.kb-prov-report { font: inherit; font-size: 12px; font-weight: 700; color: var(--rust-dk);
  background: none; border: 1px solid var(--line); padding: 3px 10px; cursor: pointer; }
.kb-prov-report:hover { border-color: var(--rust); }
.kb-prov-report:disabled { color: var(--ink-mute); cursor: default; border-color: var(--line); }

.kb-dir-full { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--rust-dk); text-decoration: none; }
.kb-dir-full:hover { text-decoration: underline; }

.kbx-cl { margin: 26px 0 6px; font-size: 15px; }
.kbx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kbx-table th { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; text-align: left; color: var(--ink-mute);
  border-bottom: 1px solid var(--line); padding: 5px 10px 5px 0; }
.kbx-table td { border-bottom: 1px solid var(--line); padding: 7px 10px 7px 0;
  vertical-align: top; line-height: 1.45; }
.kbx-a { color: var(--ink); font-weight: 600; text-decoration: none; }
a.kbx-a:hover { color: var(--rust-dk); text-decoration: underline; }
.kbx-a.is-review, .kbx-a.is-planned { color: var(--ink-mute); font-weight: 400; }
.kbx-st { font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.kbx-st.is-published { color: #2c5c3a; }
.kbx-st.is-review, .kbx-st.is-planned { color: var(--ink-mute); }
.kbx-rev { font-size: 12px; color: var(--ink-mute); }
.kbx-how { color: var(--rust-dk); font-weight: 700; }

/* --- 10 Jun all-in-one search: the knowledge group on browse results -------- */
.srch-kb { border: 1px solid var(--line); background: var(--sand); padding: 14px 16px;
  margin: 0 0 14px; }
.srch-kb-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rust-dk); margin-bottom: 10px; }
.srch-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; }
.srch-kb-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line);
  background: #fff; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.srch-kb-card:hover { border-color: var(--rust); }
.srch-kb-title { font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.srch-kb-sum { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; }
.srch-kb-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust-dk); margin-top: auto; }
.srch-kb-all { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700;
  color: var(--rust-dk); text-decoration: none; }
.srch-kb-all:hover { text-decoration: underline; }
.srch-mode { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 10px;
  border-left: 3px solid var(--rust); padding-left: 10px; line-height: 1.5; }

/* --- 10 Jun KB edit proposals: the suggest-an-edit inline form ---------------- */
.kb-suggest { border: 1px solid var(--line); border-left: 3px solid var(--rust);
  background: var(--sand); padding: 12px 14px; margin: 10px 0 14px; }
.kb-suggest-h { font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rust-dk); margin-bottom: 8px; }
.kb-suggest label { display: block; font-size: 12px; color: var(--ink-mute); margin-bottom: 8px; }
.kb-suggest textarea, .kb-suggest input { display: block; width: 100%; margin-top: 3px;
  padding: 7px 9px; border: 1px solid var(--line); background: #fff; font: inherit;
  font-size: 13px; box-sizing: border-box; }
.kb-suggest textarea:focus, .kb-suggest input:focus { outline: 2px solid var(--rust); outline-offset: 0; }
.kb-suggest-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.kb-suggest-send { font: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--rust); border: 1px solid var(--rust-dk); padding: 6px 14px; cursor: pointer; }
.kb-suggest-send:hover { background: var(--rust-dk); }
.kb-suggest-send:disabled { opacity: .6; cursor: default; }
.kb-suggest-cancel { font: inherit; font-size: 12px; color: var(--ink-mute); background: none;
  border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; }
.kb-suggest-note { font-size: 12px; color: var(--rust-dk); }
.kb-suggest-done { font-size: 13px; margin: 0; line-height: 1.5; }

/* --- 10 Jun Stripe Identity flow ---------------------------------------------- */
.vf-id-status { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 10px; }
.vf-id-status.is-ok { color: #2c5c3a; font-weight: 700; }
.vf-id-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: #fff;
  background: var(--rust); border: 1px solid var(--rust); border-radius: 0;
  min-height: 44px; padding: 12px 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.vf-id-btn:hover { background: var(--rust-dk); }
.vf-id-btn:disabled { opacity: .6; cursor: default; }
.vf-id-note { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--rust-dk); }
.idc-card { border: 1px solid var(--line); border-left: 3px solid var(--rust);
  background: var(--sand); padding: 16px 18px; max-width: 560px; }
.idc-card p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.idc-wait { font-weight: 700; }
.idc-ok { color: #2c5c3a; font-weight: 700; }
@keyframes idcPulse { 0%,100% { opacity:.25 } 50% { opacity:1 } }
.idc-dots { animation: idcPulse 1.4s infinite; }

/* (Old how-it-works fee-explorer styles retired; the live fee styles are
   .hiw-fee-card / .hiw-fees-panel in the .hiw-page block.) */

/* --- 13 Jun: identity-verified badge in the profile header (Option A) -------- */
.profile-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-id-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  text-transform: none;
}
.profile-id-badge-ico { flex: 0 0 auto; display: block; }

/* --- 13 Jun: self-declared note under the verification facts ----------------- */
.profile-facts-note { font-size: 12px; color: var(--ink-mute); margin: 8px 0 0; line-height: 1.5; font-style: italic; }
/* F-3: inline marker on a self-declared fact, deliberately understated (mono,
   small, muted, bordered) so it reads as "stated, not checked" and never
   carries the authority of a verified item. */
.fact-declared {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ============================================================================
   S53: the Assurance block on a specialist profile. Four fixed rows that are
   ALWAYS present, so a buyer can tell "declared nothing" apart from "not
   tracked". The mark column carries the whole state at a glance: a rust tick
   for something RoboWorx verified, a hollow ring for a self-declaration, a
   muted dash for an absence. Colour is never the only signal, the glyph
   differs, and the row states its own condition in words.
   ============================================================================ */
.assurance-list { margin: 0; }
.assurance-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 8px 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.assurance-row:last-child { border-bottom: none; }
.assurance-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.assurance-row dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.assurance-mark {
  display: inline-block;
  width: 16px;
  margin-right: 6px;
  font-weight: 700;
}
.assurance-verified .assurance-mark { color: var(--rust); }
.assurance-declared .assurance-mark { color: var(--ink-mute); }
.assurance-absent  .assurance-mark { color: var(--ink-mute); }
.assurance-absent  .assurance-value { color: var(--ink-mute); }

@media (max-width: 720px) {
  .assurance-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   S53: the grand total on /engagement-review. The rail was called "What you
   pay" and left the buyer to add two separate boxes. It sits on the dark rail,
   so every colour here is an on-dark value.
   ============================================================================ */
.egr-grand {
  margin: 14px 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.egr-grand-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: var(--rust-on-dark);
}
.egr-grand-amt {
  font-family: var(--font-display); font-size: 30px; font-weight: 900;
  color: #fff; line-height: 1.1; margin: 6px 0 8px;
}
.egr-grand-break {
  font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, 0.78);
}

/* ============================================================================
   S53: the project stage spine (components/projectSpine.js).
   Sits at the top of the light main column on every project tool page. It is
   the answer to "which stage am I on, and which do I go to next", a question
   the platform could answer all along but only whispered, inside the dark
   right rail. State is carried by a glyph AND a weight AND a colour, never by
   colour alone. The strip scrolls horizontally on a phone; eleven stages will
   not fit on a 360px screen and squeezing them would make all eleven useless
   rather than the last few off-screen.
   ============================================================================ */
.psp {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px 18px 14px;
  margin: 0 0 24px;
}
.psp-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.psp-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rust); font-weight: 700;
}
.psp-stage {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); font-weight: 700;
  margin-left: auto;
}
.psp-strip {
  display: flex; align-items: stretch; gap: 4px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.psp-step {
  /* 11 steps have to fit the main column at 1440 without a scrollbar; below
     880 they become a scroller instead (see the breakpoint below). */
  flex: 1 1 0; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 7px;
  border-top: 3px solid var(--hairline);
  text-decoration: none;
  text-align: center;
}
.psp-mark {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  line-height: 1; color: var(--ink-mute);
}
.psp-name {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.3;
}
.psp-step:hover .psp-name { color: var(--ink); }
.psp-done { border-top-color: var(--rust-dk); }
.psp-done .psp-mark { color: var(--rust-dk); }
.psp-now  { border-top-color: var(--rust); background: #FBF2EC; }
.psp-now .psp-mark { color: var(--rust); font-size: 13px; }
.psp-now .psp-name { color: var(--ink); font-weight: 700; }
.psp-next { }
.psp-step.psp-next { border-top-style: dashed; border-top-color: var(--rust); }
.psp-obj {
  font-size: 14px; line-height: 1.55; color: var(--ink);
  margin: 14px 0 10px; max-width: 68ch;
}
p.psp-next {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-mute);
  margin: 0; padding-top: 11px; border-top: 1px solid var(--card-2);
}
.psp-next-lab {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; color: #fff;
  background: var(--rust); border-radius: 4px; padding: 3px 7px;
}
.psp-next-here { background: var(--ink); }
.psp-next-go, p.psp-next a {
  color: var(--rust); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(173, 61, 26, 0.4);
  display: inline-flex; align-items: center; min-height: 32px;
}
.psp-next-go:hover, p.psp-next a:hover { color: var(--rust-dk); border-bottom-color: var(--rust-dk); }

@media (max-width: 880px) {
  .psp { padding: 14px 14px 12px; margin-bottom: 18px; }
  .psp-stage { margin-left: 0; width: 100%; }
  .psp-step { min-width: 80px; flex: 0 0 auto; }
  /* the tapped step is a real target even in the scroller */
  .psp-step { min-height: 44px; }
}

/* ============================================================================
   S53: coming-soon landing (/academy, /community, gated /projects).
   Moved out of a per-page injected <style> block, those re-render on every
   navigation (DESIGN-TYPOGRAPHY §5 step 2) and the two colours in them read
   var(--conc) and var(--rust,#B8431D): --conc is defined in no stylesheet and
   #B8431D is not the canonical rust, so both rendered off-brand fallbacks.
   ============================================================================ */
.cs-block { max-width: 640px; padding: 8px 0 24px; }
.cs-block .lead { margin: 12px 0 10px; }
.cs-fact { color: var(--rust); margin: 0 0 8px; }
.cs-note { color: var(--ink-mute); font-size: 14px; margin: 0 0 18px; }

/* ============================================================================
   Admin review surface (/admin)
   ============================================================================ */
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 8px; }
.admin-stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.admin-stat-n { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1; }
.admin-stat-l { margin-top: 6px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.admin-section { margin: 28px 0; }
.admin-sec-head { margin-bottom: 12px; }
.admin-sec-kicker { font-family: var(--font-mono); font-size: 12px; color: var(--rust); letter-spacing: 0.04em; }
.admin-sec-head h2 { margin: 2px 0 0; font-size: 22px; color: var(--ink); }
.admin-list { display: flex; flex-direction: column; gap: 14px; }
.admin-row { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.admin-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin-row-title { font-weight: 700; color: var(--ink); }
.admin-row-meta { font-size: 13px; color: var(--ink-mute); }
.admin-mono { font-family: var(--font-mono); font-size: 12px; }
.admin-diff { margin-top: 10px; }
.admin-diff-l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 3px; }
.admin-quote { background: var(--sand); border-left: 3px solid var(--line); padding: 8px 12px; border-radius: 4px; color: var(--ink); font-size: 14px; }
.admin-quote-empty { color: var(--ink-mute); font-style: italic; }
.admin-proposed { background: var(--sand); border-left: 3px solid var(--rust); padding: 8px 12px; border-radius: 4px; color: var(--ink); font-size: 14px; white-space: pre-wrap; }
.admin-why { margin-top: 8px; font-size: 14px; color: var(--ink-mute); }
.admin-row-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.admin-status { font-size: 13px; color: var(--rust-dk); }
.admin-status:empty { display: none; }
.admin-empty { background: var(--sand); border: 1px dashed var(--line); border-radius: 10px; padding: 18px; color: var(--ink-mute); text-align: center; }
.admin-conduct { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.admin-dial { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.admin-mode { appearance: none; border: none; background: #fff; color: var(--ink-mute); padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; border-right: 1px solid var(--line); }
.admin-mode:last-child { border-right: none; }
.admin-mode:hover { background: var(--sand); }
.admin-mode.is-on { background: var(--rust); color: #fff; font-weight: 600; }
.admin-mode-blurb { margin: 10px 0 0; font-size: 13px; color: var(--ink-mute); }
.admin-flag-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin: 16px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.admin-flag-list { display: flex; flex-direction: column; gap: 8px; }
.admin-flag { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--sand); }
.admin-flag-who { font-weight: 600; color: var(--ink); }
.admin-flag-counts { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 720px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   Spec builder (components/specBuilder.js), the browse surface.
   Drill the full taxonomy as engineering cards, commit requirements to the
   Specification panel, the directory AND-narrows. Mirrors the approved preview.
   ============================================================================ */
.spec-builder { margin: 0 0 26px; }

/* sector selector: pure-HTML <details> dropdown */
.sb-bar { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sb-sector { display: inline-block; position: relative; }
.sb-sector > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 10px; border: 1px solid var(--line); background: #fff; padding: 9px 13px;
}
.sb-sector > summary::-webkit-details-marker { display: none; }
.sb-sector-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.sb-sector-v { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.sb-chev { color: var(--rust); }
.sb-sector-menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.16);
  max-height: 320px; overflow-y: auto; min-width: 230px; padding: 5px;
}
.sb-sector-opt { display: block; padding: 7px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.sb-sector-opt:hover { background: var(--sand); color: var(--rust); }
.sb-sector-opt.is-active { color: var(--rust); font-weight: 700; }

/* stage: drill surface beside the spec panel */
.sb-stage { display: flex; border: 1px solid var(--line); background: var(--sand); min-height: 420px; }
.sb-drill { flex: 1; min-width: 0; padding: 20px 22px; }
.sb-drill-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.sb-crumbs { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.sb-crumb { color: var(--ink); text-decoration: none; }
.sb-crumb:hover { color: var(--rust); }
.sb-crumb.current { color: var(--rust); }
.sb-csep { color: var(--line); margin: 0 6px; }
.sb-add-level { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--rust); padding: 8px 12px; text-decoration: none; white-space: nowrap; }
.sb-add-level:hover { background: var(--rust-dk); }
.sb-level-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); font-weight: 700; margin-bottom: 12px; }

/* engineering cards */
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sb-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--rust); padding: 13px 14px; position: relative; display: flex; flex-direction: column; min-height: 110px; text-decoration: none; color: var(--ink); }
.sb-card:hover { border-color: var(--rust); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sb-card-code { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; color: var(--ink-mute); font-weight: 700; }
.sb-card-name { font-weight: 900; font-size: 16px; line-height: 1.05; letter-spacing: -.01em; margin: 7px 0 8px; }
.sb-card-subs { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .03em; color: var(--ink-mute); line-height: 1.6; margin-bottom: auto; }
.sb-card-cap { color: var(--rust); }
.sb-card-go { position: absolute; bottom: 10px; right: 13px; color: var(--rust); font-weight: 900; font-size: 16px; }
.sb-card.leaf { border-top-color: var(--ink); }
.sb-card.added { border-top-color: var(--ink); opacity: .72; }

/* spec panel (the brief) */
.sb-spec { width: 286px; flex: 0 0 auto; background: var(--ink); color: #fff; padding: 20px 18px; display: flex; flex-direction: column; }
.sb-spec-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); font-weight: 700; margin-bottom: 4px; }
.sb-spec-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; margin-bottom: 12px; }
.sb-spec-body { overflow-y: auto; }
.sb-item { border-top: 1px solid rgba(255,255,255,.12); padding: 11px 0; display: flex; gap: 10px; align-items: flex-start; }
.sb-no { font-family: var(--font-mono); font-size: 10px; color: var(--rust); font-weight: 700; padding-top: 2px; }
.sb-item-body { min-width: 0; }
.sb-item-path { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: #fff; }
.sb-sep { color: #9a937f; }
.sb-item-meta { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: #9a937f; margin-top: 3px; }
.sb-item-rm { margin-left: auto; color: var(--rust); font-weight: 900; font-size: 15px; text-decoration: none; padding-left: 8px; }
.sb-empty { font-size: 12px; color: #9a937f; font-style: italic; padding: 12px 0; }
.sb-spec-foot { margin-top: auto; border-top: 2px solid var(--rust); padding-top: 14px; }
.sb-match { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #9a937f; font-weight: 700; }
.sb-num { font-weight: 900; font-size: 30px; letter-spacing: -.02em; line-height: 1; margin: 2px 0 12px; }
.sb-num b { color: var(--rust); }
.sb-cta { display: block; width: 100%; text-align: center; background: var(--rust); color: #fff; padding: 11px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.sb-cta:hover { background: var(--rust-dk); }

/* Active pool filters, listed in the brief beneath the requirements */
.sb-filters { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.sb-fhead { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #9a937f; font-weight: 700; margin-bottom: 8px; }
.sb-fchip { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; }
.sb-fchip-k { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; }
.sb-fchip-v { font-size: 12px; font-weight: 700; color: #fff; }
.sb-fchip-rm { margin-left: auto; color: var(--rust); font-weight: 900; font-size: 14px; text-decoration: none; padding-left: 6px; }

/* ============================================================================
   Profile editor: publish control (private-until-publish) + curated sector
   picker. Mirrors the approved §2.5 preview.
   ============================================================================ */
.pe-publish { background: var(--ink); color: #fff; padding: 18px 18px 16px; margin-bottom: 22px; }
.pe-pub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pe-pub-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); font-weight: 700; }
.pe-vis { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 2px; }
.pe-vis-private { background: rgba(201,138,27,.16); color: #E7B864; border: 1px solid rgba(201,138,27,.5); }
.pe-vis-live { background: rgba(62,125,82,.18); color: #7FC795; border: 1px solid rgba(62,125,82,.5); }
.pe-pub-sub { font-size: 12.5px; color: #c9c2b4; margin: 9px 0 13px; line-height: 1.45; }
.pe-pub-meter-row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #9a937f; font-weight: 700; margin-bottom: 5px; }
.pe-pub-meter-row b { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; color: #fff; }
.pe-pub-meter-row b small { font-size: 10px; color: #9a937f; }
.pe-pub-bar { height: 7px; background: rgba(255,255,255,.13); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.pe-pub-bar > i { display: block; height: 100%; background: var(--rust); border-radius: 4px; }
.pe-pub-chk-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #9a937f; font-weight: 700; margin-bottom: 8px; }
.pe-pub-chk { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.pe-pub-chk-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cdb7b0; }
.pe-pub-chk-item.done { color: #fff; }
.pe-pub-box { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid #6f6a5d; font-size: 11px; line-height: 13px; text-align: center; color: transparent; }
.pe-pub-chk-item.done .pe-pub-box { background: #3E7D52; border-color: #3E7D52; color: #fff; }
.pe-pub-chk-item.miss .pe-pub-box { border-color: var(--rust); }
.pe-pub-action { border-top: 1px solid rgba(255,255,255,.12); padding-top: 13px; }
.pe-pub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; line-height: 1.2; border: 0; border-radius: 0; cursor: pointer; }
.pe-pub-on { background: var(--rust); color: #fff; }
.pe-pub-on:hover { background: var(--rust-dk); }
.pe-pub-off { background: #3a3631; color: #86807390; cursor: not-allowed; }
.pe-pub-live { background: transparent; color: #7FC795; border: 1px solid rgba(62,125,82,.5); }
.pe-pub-lock { font-size: 11.5px; color: #9a937f; margin-top: 9px; }
.pe-pub-idlink { color: var(--rust); text-decoration: none; font-weight: 700; }
.pe-pub-idlink:hover { text-decoration: underline; }

/* Curated sector picker */
.sector-picker { border: 0; padding: 0; }
.sector-chip-row { margin-bottom: 10px; }
.sector-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border-radius: 14px; padding: 5px 7px 5px 11px; font-size: 12px; font-weight: 600; margin: 0 6px 7px 0; }
.sector-chip-x { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 11px; line-height: 15px; text-align: center; border: 0; cursor: pointer; padding: 0; }
.sector-empty { font-size: 12.5px; color: var(--ink-mute); font-style: italic; }
.sector-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.sector-opt { display: flex; align-items: center; gap: 8px; text-align: left; background: #fff; border: 1px solid var(--line); padding: 8px 10px; font-size: 12.5px; color: var(--ink); cursor: pointer; border-radius: 2px; }
.sector-opt:hover { border-color: var(--rust); }
.sector-opt .sopt-tick { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid var(--line); font-size: 11px; line-height: 13px; text-align: center; color: transparent; }
.sector-opt.sel { background: var(--sand); color: var(--ink); border-color: var(--rust); }
.sector-opt.sel .sopt-tick { background: var(--rust); border-color: var(--rust); color: #fff; }

/* ============================================================================
   Documents & certifications: per-cert evidence uploader, buyer-facing
   certificate viewer, and the certificate lightbox.
   ============================================================================ */

/* Cert row: self-declared pill (replaces the old verified/awaiting-review badge) */
.vf-cert-self{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:2px;background:#efe7d6;color:#7a5a12;border:1px solid #d8c08a;}

/* Per-certificate evidence uploader */
.cert-evidence{margin-top:14px;border:1px dashed var(--line);border-radius:3px;background:var(--sand);padding:13px;}
.cert-ev-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.cert-ev-self{font-size:9px;letter-spacing:.08em;padding:2px 7px;border-radius:2px;background:#efe7d6;color:#7a5a12;border:1px solid #d8c08a;}
.cert-ev-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.cert-ev-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;border-radius:2px;padding:10px 14px;cursor:pointer;}
.cert-ev-btn svg{width:15px;height:15px;}
.cert-ev-btn-rust{background:var(--rust);color:#fff;border:1px solid var(--rust);}
.cert-ev-btn-rust:hover{background:var(--rust-dk);}
.cert-ev-btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
.cert-ev-btn-ghost:hover{border-color:var(--rust);}
.cert-ev-or{font-size:12px;color:var(--ink-mute);}
.cert-ev-note{font-size:11.5px;color:var(--ink-mute);margin:10px 0 0;}

/* Documents divider on the verification page */
.vf-doc-divider{height:1px;background:var(--line);margin:22px 0 18px;}

/* Buyer-facing certificate viewer */
.profile-cert-note{font-size:12.5px;color:var(--ink-mute);margin:0 0 13px;}
.profile-certs-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
@media(max-width:560px){.profile-certs-grid{grid-template-columns:1fr;}}
.profile-cert-card{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:11px;cursor:pointer;
  text-decoration:none;color:var(--ink);font:inherit;transition:border-color .12s;}
.profile-cert-card:hover{border-color:var(--rust);}
.profile-cert-card.pcert-static{cursor:default;}
.profile-cert-card.pcert-static:hover{border-color:var(--line);}
.pcert-thumb{width:58px;height:74px;border-radius:2px;border:1px solid var(--line);flex:0 0 auto;position:relative;overflow:hidden;background:var(--sand);}
.pcert-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pcert-thumb.pcert-pdf,.pcert-thumb.pcert-none{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:#9a937f;letter-spacing:.05em;}
.pcert-thumb.pcert-none{background:repeating-linear-gradient(135deg,#f1ece0,#f1ece0 6px,#ece6d8 6px,#ece6d8 12px);}
.pcert-mag{position:absolute;right:4px;bottom:4px;width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;}
.pcert-mag svg{width:11px;height:11px;}
.pcert-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pcert-body b{font-size:13.5px;line-height:1.25;}
.pcert-iss{font-size:12px;color:var(--ink-mute);}
.pcert-pill{align-self:flex-start;margin-top:4px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:2px;}
.pcert-valid{background:rgba(62,125,82,.14);color:#2f6340;border:1px solid rgba(62,125,82,.45);}
.pcert-exp{background:rgba(180,67,29,.12);color:#a23a18;border:1px solid rgba(180,67,29,.4);}
.pcert-self{background:#efe7d6;color:#7a5a12;border:1px solid #d8c08a;}

/* Certificate lightbox */
.cert-lb-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.cert-lb-backdrop{position:absolute;inset:0;background:rgba(10,8,5,.78);cursor:zoom-out;}
.cert-lb-panel{position:relative;z-index:1;display:flex;gap:18px;align-items:flex-start;max-width:880px;width:100%;
  background:#15110c;border-radius:5px;padding:20px;max-height:86vh;}
@media(max-width:680px){.cert-lb-panel{flex-direction:column;align-items:stretch;overflow:auto;}}
.cert-lb-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:2;}
.cert-lb-x:hover{background:rgba(255,255,255,.26);}
.cert-lb-img{max-width:560px;width:100%;max-height:78vh;object-fit:contain;border-radius:3px;background:#fff;border:1px solid #3a3026;}
.cert-lb-meta{color:#e8e2d4;font-size:13.5px;min-width:170px;}
.cert-lb-meta b{display:block;font-size:17px;color:#fff;line-height:1.3;}
.cert-lb-meta>span{display:block;color:#c2bba9;margin-top:8px;}
.cert-lb-self{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9a937f !important;margin-top:14px !important;}

/* Buyer certificate: report control sits beside each card */
.profile-cert-item{display:flex;flex-direction:column;gap:4px;}
.pcert-report{align-self:flex-end;background:none;border:0;padding:2px 4px;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-mute);transition:color .12s;}
.pcert-report:hover{color:var(--rust-dk);}
.pcert-report.is-reported{color:var(--green);cursor:default;}

/* --- Accessibility controls (Settings) ------------------------------------- */
.ax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ax-row:last-of-type { border-bottom: none; }
.ax-lab-t { font-weight: 600; font-size: 15px; color: var(--ink); }
.ax-lab-h { font-size: 13px; color: var(--ink-mute); margin-top: 3px; max-width: 46ch; }
.ax-seg {
  display: inline-flex;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  flex: none;
}
.ax-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 10px 14px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.ax-seg-btn.on { background: var(--rust); color: #fff; }
.ax-switch {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  flex: none;
  transition: background 0.15s;
}
.ax-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: left 0.15s;
}
.ax-switch[aria-checked="true"] { background: var(--rust); }
.ax-switch[aria-checked="true"]::after { left: 25px; }
.ax-actions { display: flex; justify-content: flex-end; padding-top: 16px; }

/* === Offer rail: contract / permanent fork === */
.offer-fork { display: flex; flex-direction: column; gap: 6px; }
.offer-fork .offer-btn { margin-top: 6px; }
.offer-fork .offer-btn:first-child { margin-top: 0; }
.offer-fork-cap { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.62); }
.offer-fork-note { margin: 8px 0 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: #fff;
  background: rgba(212,90,44,0.18); border-left: 2px solid var(--rust-bright, #D45A2C); }

/* (S49 WP-4.3: the Permanent-pipeline page styles, .rwp-*, .pv-*,
   .page-permanent, the bare .crumb-sep, were deleted with the removed
   Permanent product. The .offer-fork rules above stay: offerPanel.js still
   uses them.) */

/* ============================================================================
   PROJECTS: open-seat strip on RFQ cards + public Browse teaser gate
   ============================================================================ */
.row-seats { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.seat { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-mute); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.seat.filled::before { content: '\2713'; color: #3c7a3c; font-weight: 700; }
.seat.open { color: var(--rust); border-color: var(--rust); }
.seat.open.mine { background: var(--rust); color: #fff; border-color: var(--rust); }
.seat-lead { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-right: 2px; }
.seat-match { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); font-weight: 700; }

.teaser-gate { border: 1px solid var(--line); background: var(--ink); color: #fff; padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 8px 0 24px; }
.teaser-gate .g-h { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.3; max-width: 560px; }
.teaser-gate .g-h em { color: var(--rust); font-style: italic; }
.teaser-gate .g-btn { background: var(--rust); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 13px 22px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.teaser-gate .g-btn:hover { background: var(--rust-dk); }


/* ============================================================================
   PUBLIC BROWSE TEASER: the real specialist directory, blurred, under a join
   prompt. No counts. The blur is the tease.
   ============================================================================ */
.teaser-wrap { position: relative; max-height: 880px; overflow: hidden; }
.teaser-blur { filter: blur(6px); pointer-events: none; user-select: none; }
.teaser-join { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(239,233,220,.5), rgba(239,233,220,.72) 50%, rgba(239,233,220,.94)); }
.tj-card { background: var(--ink); color: #fff; max-width: 480px; padding: 34px 32px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.tj-h { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 27px; line-height: 1.25; margin-bottom: 12px; }
.tj-h em { color: var(--rust-on-dark); font-style: italic; }  /* S53: on the
           ink join-card; 27px, but --rust is 2.87:1, under even the 3:1 bar */
.tj-sub { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.6; margin-bottom: 22px; }
.tj-btn { display: inline-block; background: var(--rust); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 14px 28px; text-decoration: none; }
.tj-btn:hover { background: var(--rust-dk); }
.tj-alt { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; }
.tj-alt:hover { color: #fff; }

/* Teaser refinement: a tidy, framed, blurred block with the join card as the
   centred focal point, and a scrim that hides the crop edge. */
.teaser-wrap { max-height: 620px; overflow: hidden; border: 1px solid var(--line); }
.teaser-blur { filter: blur(7px); }
.teaser-join { align-items: center; padding-top: 0; background: linear-gradient(to bottom, rgba(239,233,220,.32), rgba(239,233,220,.80) 46%, rgba(239,233,220,.97) 100%); }
.tj-card { box-shadow: 0 28px 70px rgba(0,0,0,.32); }

/* ============================================================================
   Projects marketplace, buyer side: the RFQ composer (.pcx-*) and the
   buyer Projects hub (.pjh-*). Tokens: --ink/--rust/--rust-bright/--cream/
   --sand/--line; display Inter 900, editorial Fraunces italic, mono JetBrains.
   ============================================================================ */

/* --- Composer shell -------------------------------------------------------- */
.pcx-shell { display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; }
.pcx-rail { position: sticky; top: 88px; background: var(--ink); color: var(--cream);
  border-radius: 4px; padding: 20px 16px; }
.pcx-rail-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rust-bright); margin-bottom: 14px; }
.pcx-railstep { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; color: rgba(239,233,220,.55); padding: 9px 8px; border-radius: 3px;
  cursor: pointer; font: inherit; }
.pcx-railstep:hover { background: rgba(255,255,255,.06); color: var(--cream); }
.pcx-railstep-n { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
.pcx-railstep-l { font-size: 14px; }
.pcx-railstep.is-current { background: rgba(212,90,44,.16); color: #fff; }
.pcx-railstep.is-current .pcx-railstep-n { color: var(--rust-bright); opacity: 1; }
.pcx-railstep.is-done { color: rgba(239,233,220,.82); }
.pcx-railstep.is-done .pcx-railstep-n::after { content: ' \2713'; color: var(--rust-bright); }
.pcx-rail-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.pcx-rail-exit { display: inline-block; margin-top: 10px; color: rgba(239,233,220,.7);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.pcx-rail-exit:hover { color: var(--cream); }

.pcx-main { min-width: 0; }
.pcx-body { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px 30px; }

/* --- Step chrome ----------------------------------------------------------- */
/* An h1 since S58 (it was a div, leaving the composer the one page with no
   h1 at all); margin reset because a heading brings its own. */
.pcx-step-h { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -.01em;
  color: var(--ink); display: flex; align-items: baseline; gap: 12px; margin: 0; }
.pcx-step-n { font-family: var(--font-mono); font-size: 13px; color: var(--rust); }
.pcx-step-lede { color: var(--ink-mute); font-size: 14.5px; line-height: 1.55; margin: 10px 0 22px; max-width: 60ch; }

/* --- Fields ---------------------------------------------------------------- */
.pcx-field { margin-bottom: 18px; }
.pcx-field > label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 7px; }
.pcx-opt { color: var(--ink-mute); text-transform: none; letter-spacing: 0; font-size: 11px; }
.pcx-hint { color: var(--ink-mute); font-size: 13px; margin: -2px 0 8px; }
.pcx-field input[type=text], .pcx-field input[type=date], .pcx-field textarea, .pcx-field select,
.pcx-tag-add input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--sand);
  border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; }
.pcx-field textarea { resize: vertical; line-height: 1.5; }
.pcx-field input:focus, .pcx-field textarea:focus, .pcx-field select:focus, .pcx-tag-add input:focus {
  outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(184,67,29,.12); background: #fff; }
.pcx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pcx-field-missing input, .pcx-field-missing textarea, .pcx-field-missing select,
.pcx-drill.pcx-field-missing, .pcx-disc-list.pcx-field-missing {
  border-color: var(--rust); box-shadow: 0 0 0 3px rgba(184,67,29,.10); border-radius: 4px; }

/* --- Classify drill -------------------------------------------------------- */
.pcx-drill { display: flex; flex-direction: column; gap: 6px; }
.pcx-drill-row { display: flex; align-items: center; justify-content: space-between; width: 100%;
  text-align: left; background: var(--sand); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink); }
.pcx-drill-row:hover { border-color: var(--rust); background: #fff; }
.pcx-drill-row.is-leaf { background: #fff; }
.pcx-chev { color: var(--ink-mute); font-size: 20px; line-height: 1; }
.pcx-pick { font-family: var(--font-mono); font-size: 11px; color: var(--rust); letter-spacing: .04em; }
.pcx-drill-trail, .pcx-committed-trail { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); }
.pcx-drill-trail { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pcx-sep { color: var(--line); margin: 0 2px; }
.pcx-committed { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pcx-committed-trail { font-size: 14px; color: var(--ink); }
.pcx-link { background: none; border: 0; color: var(--rust); cursor: pointer; font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.pcx-link:hover { color: var(--rust-dk); }

/* --- Disciplines + seats --------------------------------------------------- */
.pcx-disc-list { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.pcx-disc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--sand); padding: 4px 12px 4px 4px; }
.pcx-disc-row.is-on { background: #fff; border-color: var(--rust); }
.pcx-disc-toggle { display: flex; align-items: center; gap: 12px; flex: 1; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; padding: 10px; color: var(--ink); }
.pcx-disc-box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line); border-radius: 3px;
  display: grid; place-items: center; color: #fff; font-size: 13px; }
.pcx-disc-row.is-on .pcx-disc-box { background: var(--rust); border-color: var(--rust); }
.pcx-disc-main { display: flex; flex-direction: column; gap: 2px; }
.pcx-disc-main strong { font-size: 15px; }
.pcx-disc-sum { font-size: 12.5px; color: var(--ink-mute); }
.pcx-seats { display: flex; align-items: center; gap: 8px; flex: none; }
.pcx-seat-btn { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); }
.pcx-seat-btn:hover { border-color: var(--rust); color: var(--rust); }
.pcx-seat-n { font-family: var(--font-mono); font-size: 15px; min-width: 16px; text-align: center; }
.pcx-seat-lbl { font-size: 12px; color: var(--ink-mute); }
.pcx-tally { margin-top: 14px; font-size: 13.5px; color: var(--ink-mute); }

/* --- Tag inputs ------------------------------------------------------------ */
.pcx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pcx-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 8px; font-size: 13px; }
.pcx-tag-x { background: none; border: 0; cursor: pointer; color: var(--ink-mute); font-size: 15px; line-height: 1; padding: 0; }
.pcx-tag-x:hover { color: var(--rust); }
.pcx-tag-add { display: flex; gap: 8px; }
.pcx-tag-addbtn { flex: none; background: var(--ink); color: #fff; border: 0; border-radius: 3px; padding: 0 16px;
  cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.pcx-tag-addbtn:hover { background: var(--rust); }
.pcx-muted { color: var(--ink-mute); font-size: 13px; }

/* --- Fee note -------------------------------------------------------------- */
.pcx-fee-note { margin-top: 8px; background: var(--cream); border-left: 3px solid var(--rust);
  border-radius: 0 4px 4px 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.pcx-fee-note strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }

/* --- Review + preview ------------------------------------------------------ */
.pcx-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pcx-role-note { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--rust); background: #FBF8F1; border-radius: 3px; color: var(--ink-mute); font-size: 13px; line-height: 1.55; max-width: 78ch; }
.pcx-role-note strong { color: var(--ink); }
.pcx-role-note-ir35 { margin-top: 12px; }
.pcx-review-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 12px; }
.pcx-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pcx-check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pcx-check-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; color: #fff; }
.pcx-check.ok .pcx-check-mark { background: var(--green, #2f7d4f); }
.pcx-check.todo .pcx-check-mark { background: #fff; border: 1.5px solid var(--rust); }
.pcx-check.todo { color: var(--ink); }
.pcx-ready { color: var(--green, #2f7d4f); font-size: 13.5px; margin-top: 12px; }
.pcx-notready { color: var(--ink-mute); font-size: 13.5px; margin-top: 12px; }
.pcx-card { border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 18px; }
.pcx-card-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust); }
.pcx-card-title { font-family: var(--font-display); font-weight: 900; font-size: 17px; margin: 6px 0 8px; color: var(--ink); }
.pcx-card-brief { font-size: 13px; color: var(--ink-mute); line-height: 1.5; margin: 0 0 12px; }
.pcx-card-seats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pcx-seat-chip { font-family: var(--font-mono); font-size: 11px; background: var(--sand); border: 1px solid var(--line);
  border-radius: 3px; padding: 3px 7px; color: var(--ink); }
.pcx-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink); }
.pcx-card-budget { font-weight: 600; }
.pcx-card-where { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.pcx-card-pills { display: flex; gap: 6px; margin-top: 10px; }
.pcx-pill { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--cream); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; color: var(--ink-mute); }

/* --- Actions + banners ----------------------------------------------------- */
.pcx-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
/* S58 uniformity: the composer's buttons were the only 13px weight-400
   rounded lowercase buttons on the platform. Brought to the §3.1 Button
   role. -dark keeps its name but takes the platform primary (rust): an
   ink-solid button is not one of the three canonical variants. -ghost is
   the secondary; inside the dark step rail it takes the on-dark colours
   (bone border, light label) per DESIGN-RAILS §6. */
.pcx-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; border-radius: 0; line-height: 1.2; min-height: 44px;
  padding: 12px 20px; cursor: pointer; border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pcx-btn-dark { background: var(--rust); border-color: var(--rust); color: #fff; }
.pcx-btn-dark:hover { background: var(--rust-dk); border-color: var(--rust-dk); }
.pcx-btn-rust { background: var(--rust); border-color: var(--rust); color: #fff; }
.pcx-btn-rust:hover { background: var(--rust-dk); border-color: var(--rust-dk); }
.pcx-btn-ghost { background: transparent; color: var(--rust); border-color: var(--rust); }
.pcx-btn-ghost:hover { background: var(--rust); color: #fff; }
.pcx-rail .pcx-btn-ghost { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .82); }
.pcx-rail .pcx-btn-ghost:hover { background: transparent; border-color: #fff; color: #fff; }
.pcx-btn-block { display: flex; width: 100%; text-align: center; }
.pcx-btn[disabled] { opacity: .55; cursor: default; }
.pcx-banner { border-radius: 4px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.pcx-banner-err { background: #fbeae5; border: 1px solid var(--rust); color: var(--rust-dk); }
.pcx-banner-ok { background: #e7f3ec; border: 1px solid var(--green, #2f7d4f); color: #1f5f3b; }
.pcx-gate { max-width: 520px; padding: 30px 0; }
.pcx-gate h1 { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
.pcx-gate p { color: var(--ink-mute); margin: 10px 0 18px; }

/* --- Buyer Projects hub ---------------------------------------------------- */
.pjh-head { margin-bottom: 18px; }
.pjh-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pjh-head h1 { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
.pjh-head h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rust); }
.pjh-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.pjh-tab { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em; color: var(--ink-mute);
  padding: 9px 14px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pjh-tab:hover { color: var(--ink); }
.pjh-tab.is-active { color: var(--ink); border-bottom-color: var(--rust); }
.pjh-tab-n { color: var(--ink-mute); }
.pjh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pjh-card { border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 18px; display: flex; flex-direction: column; }
.pjh-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pjh-card-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust); }
.pjh-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; flex: none; }
.pjh-badge-live { background: #e7f3ec; color: #1f5f3b; }
.pjh-badge-draft { background: var(--sand); color: var(--ink-mute); border: 1px solid var(--line); }
.pjh-badge-closed { background: var(--cream); color: var(--ink-mute); }
.pjh-card-title { font-family: var(--font-display); font-weight: 900; font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.pjh-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.pjh-dot { color: var(--line); }
.pjh-card-note { font-size: 12.5px; color: var(--ink-mute); margin-top: 8px; }
.pjh-card-progress { color: #2f7d4f; font-weight: 600; }
.pjh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pjh-card-upd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.pjh-bids { font-family: var(--font-mono); font-size: 11.5px; color: var(--rust); }
.pjh-btn { font-family: var(--font-mono); font-size: 12px; border-radius: 8px; padding: 9px 18px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; display: inline-block; }
.pjh-btn-rust { background: var(--rust); color: #fff; }
.pjh-btn-rust:hover { background: var(--rust-dk); }
.pjh-btn-dark { background: var(--ink); color: #fff; }
.pjh-btn-dark:hover { background: #000; }
.pjh-btn-lg { padding: 13px 26px; font-size: 13px; }
.pjh-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: 6px; background: var(--sand); }
.pjh-empty h2 { font-family: var(--font-display); font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.pjh-empty p { color: var(--ink-mute); max-width: 52ch; margin: 0 auto 18px; line-height: 1.55; }
.pjh-empty-sm { padding: 30px 20px; }
.pjh-empty-sm p { margin: 0; }
.pjh-banner { border-radius: 4px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.pjh-banner-ok { background: #e7f3ec; border: 1px solid var(--green, #2f7d4f); color: #1f5f3b; }
.pjh-banner-err { background: #fbeae5; border: 1px solid var(--rust); color: var(--rust-dk); }
.pjh-gate { max-width: 520px; padding: 30px 0; }
.pjh-gate h1 { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
.pjh-gate p { color: var(--ink-mute); margin: 10px 0 18px; }
.pjh-muted { color: var(--ink-mute); font-size: 12.5px; }

/* --- Composer / hub responsive --------------------------------------------- */
@media (max-width: 880px) {
  .pcx-shell { grid-template-columns: 1fr; }
  .pcx-rail { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .pcx-rail-h { width: 100%; }
  .pcx-railstep { width: auto; }
  .pcx-rail-foot { width: 100%; }
  .pcx-grid2, .pcx-review-grid { grid-template-columns: 1fr; }
  .pcx-body { padding: 20px 18px; }
}

/* ============================================================================
   Projects: the specialist project detail + build-team panel (.pdt-*) and the
   specialist dashboard involvement rows (.pinv-*). Locked tokens; Inter 900
   display, Fraunces italic editorial, JetBrains mono labels.
   ============================================================================ */

.pdt-wrap { max-width: 1040px; }
.pdt-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }

/* The project detail content is a single wide flow down the shell main column;
   the RFQ then the team / bids / milestone workspace. This replaced the
   1fr + 380px split, which collapsed to a narrow strip on laptop widths once the
   shell's own rails were accounted for. The explainer moved to the shell right
   rail (the .pdt-ex block below). */
.pdt-flow { max-width: 860px; margin-left: auto; margin-right: auto; }
.pdt-flow-wide { max-width: 1440px; }
.pdt-flow > .pdt-rfq { margin-bottom: 48px; }
.pdt-flow .pdt-panel { margin-top: 0; }

/* Right-rail explainer (dark), matching the projects mockup aside. Sits inside
   the shell .aside; the rail eyebrow supplies the leading label. */
.pdt-ex { padding: 2px 0 0; }
.pdt-ex-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rust-bright); font-weight: 700; margin-bottom: 18px; }
.pdt-ex-step { display: flex; gap: 12px; margin-bottom: 15px; }
.pdt-ex-step .n { font-family: var(--font-mono); font-weight: 700; color: var(--rust-bright); font-size: 12px; flex: 0 0 auto; line-height: 1.5; }
.pdt-ex-step .t { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.pdt-ex-divide { height: 1px; background: rgba(255,255,255,.16); margin: 20px 0; }
.pdt-ex-fig { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -.02em; color: #fff; }
.pdt-ex-fig em { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--rust-bright); font-size: 17px; }
.pdt-ex-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.7); margin-top: 8px; }
.pdt-left { min-width: 0; }
.pdt-right { min-width: 0; }

/* --- RFQ summary ----------------------------------------------------------- */
.pdt-rfq { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 34px 38px; }
.pdt-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); }
.pdt-title { font-family: var(--font-display); font-weight: 900; font-size: 25px; letter-spacing: -.01em; color: var(--ink); margin: 6px 0 12px; line-height: 1.12; }
.pdt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; color: var(--ink); }
.pdt-budget { font-weight: 600; }
.pdt-where { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); }
.pdt-closes { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.pdt-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.pdt-pill { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; background: var(--cream); border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; color: var(--ink-mute); }
.pdt-brief { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 22px 0; white-space: pre-wrap; }
.pdt-seats-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0 22px; }
.pdt-seats-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); margin-right: 4px; }
.pdt-seat { font-family: var(--font-mono); font-size: 12px; background: var(--sand); border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; color: var(--ink); }
.pdt-dls { margin: 0; }
.pdt-dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #ece6d8; font-size: 13.5px; }
.pdt-dl dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); }
.pdt-dl dd { margin: 0; color: var(--ink); }

/* --- Team panel ------------------------------------------------------------ */
.pdt-panel { background: var(--ink); color: var(--cream); border-radius: 6px; padding: 36px 38px; }
.pdt-panel-h { font-family: var(--font-display); font-weight: 900; font-size: 19px; color: #fff; margin: 0 0 24px; }
.pdt-lede { font-size: 13.5px; line-height: 1.55; color: rgba(239,233,220,.86); margin: 0 0 16px; }
.pdt-muted { color: rgba(239,233,220,.6); font-size: 13px; }
.pdt-status-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

.pdt-roster { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.pdt-member { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border-radius: 5px; padding: 13px 15px; }
.pdt-member-name { font-size: 14px; color: #fff; font-weight: 600; }
.pdt-member-disc { font-family: var(--font-mono); font-size: 11px; color: rgba(239,233,220,.65); }
.pdt-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: auto; }
.pdt-tag-lead { background: var(--rust); color: #fff; }
.pdt-tag-on { background: rgba(47,125,79,.9); color: #fff; }
.pdt-tag-inv { background: rgba(255,255,255,.16); color: var(--cream); }

.pdt-seats-h2 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(239,233,220,.6); margin: 16px 0 8px; }
.pdt-seatlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pdt-seatrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px; background: rgba(255,255,255,.04); font-size: 13.5px; }
.pdt-seatrow.open { background: rgba(212,90,44,.14); }
.pdt-seatrow-d { color: #fff; }
.pdt-seatrow-c { font-family: var(--font-mono); font-size: 11px; color: rgba(239,233,220,.7); margin-left: auto; }
.pdt-seatrow-ok { color: #5fbf86; }
.pdt-link { background: none; border: 0; color: var(--rust-bright); cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.pdt-link:hover { color: #fff; }

.pdt-cand-panel { background: rgba(0,0,0,.22); border-radius: 5px; padding: 14px; margin: 14px 0; }
.pdt-cand-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(239,233,220,.85); margin-bottom: 10px; }
.pdt-cand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pdt-cand { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-radius: 4px; padding: 9px 10px; }
.pdt-cand-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pdt-cand-name { font-size: 13.5px; color: #fff; font-weight: 600; }
.pdt-verified { color: #5fbf86; }
.pdt-cand-title { font-size: 12px; color: rgba(239,233,220,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdt-cand-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(239,233,220,.55); }
.pdt-cand-fit { font-size: 11.5px; color: rgba(239,233,220,.85); margin: 1px 0; }
.pdt-cand-fit-k { color: var(--rust-bright); font-weight: 700; }
.pdt-cand-also { color: rgba(239,233,220,.5); }

.pdt-bidnote { font-size: 12.5px; line-height: 1.5; color: rgba(239,233,220,.72); background: rgba(255,255,255,.05); border-left: 2px solid var(--rust); border-radius: 0 4px 4px 0; padding: 10px 12px; margin-top: 14px; }

.pdt-field { margin-bottom: 14px; }
.pdt-field > label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); margin-bottom: 6px; }
.pdt-opt { color: rgba(239,233,220,.55); text-transform: none; letter-spacing: 0; }
.pdt-hint { font-size: 12px; color: rgba(239,233,220,.6); margin: -2px 0 6px; }
.pdt-field input, .pdt-field textarea, .pdt-field select {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--cream);
  border: 1px solid transparent; border-radius: 3px; padding: 9px 11px; }
.pdt-field textarea { resize: vertical; line-height: 1.45; }
.pdt-field input:focus, .pdt-field textarea:focus, .pdt-field select:focus { outline: none; box-shadow: 0 0 0 3px rgba(212,90,44,.4); }

.pdt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pdt-btn { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em; border-radius: 3px; padding: 10px 16px; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-block; }
.pdt-btn-rust { background: var(--rust); color: #fff; }
.pdt-btn-rust:hover { background: var(--rust-bright); }
.pdt-btn-dark { background: #000; color: #fff; }
.pdt-btn-dark:hover { background: #1f1f1f; }
.pdt-btn-ghost { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.28); }
.pdt-btn-ghost:hover { border-color: var(--cream); }
.pdt-btn-sm { padding: 7px 12px; font-size: 11.5px; flex: none; }
.pdt-btn[disabled] { opacity: .55; cursor: default; }
.pdt-banner { border-radius: 4px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px; }
.pdt-banner-err { background: #fbeae5; border: 1px solid var(--rust); color: var(--rust-dk); }
.pdt-banner-ok { background: #e7f3ec; border: 1px solid var(--green, #2f7d4f); color: #1f5f3b; }

.pdt-otems { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.pdt-otem { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-radius: 4px; padding: 10px 12px; }
.pdt-otem-main { display: flex; flex-direction: column; gap: 2px; }
.pdt-otem-name { font-size: 14px; color: #fff; font-weight: 600; }
.pdt-otem-meta { font-family: var(--font-mono); font-size: 11px; color: rgba(239,233,220,.65); }

.pdt-gate { max-width: 520px; padding: 30px 0; }
.pdt-gate h1 { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
.pdt-gate p { color: var(--ink-mute); margin: 10px 0 18px; }

/* --- Dashboard involvement rows -------------------------------------------- */
.pinv-list { display: flex; flex-direction: column; gap: 8px; }
.pinv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 14px 16px; text-decoration: none; }
.pinv-row:hover { border-color: var(--rust); }
.pinv-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pinv-title { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--ink); }
.pinv-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }
.pinv-cta { font-family: var(--font-mono); font-size: 12px; color: var(--rust); flex: none; }
.pinv-cta.is-invite { color: #fff; background: var(--rust); border-radius: 3px; padding: 6px 12px; }
.pinv-row.is-needs { border-left: 3px solid var(--rust); }
.pinv-row.is-needs .pinv-sub { color: var(--rust-dk); }

/* --- Buyer teams + bid review ---------------------------------------------- */
.pdt-otem { flex-direction: column; align-items: stretch; gap: 8px; }
.pdt-otem.is-live { outline: 1px solid rgba(245,197,24,.45); }
.pdt-otem-head { display: flex; align-items: center; gap: 10px; }
.pdt-otem-actions { justify-content: flex-end; margin-top: 4px; }
.pdt-tag-off { background: rgba(255,255,255,.12); color: rgba(239,233,220,.7); }

.pdt-bd { border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.pdt-bd-summary { font-size: 12.5px; line-height: 1.5; color: rgba(239,233,220,.82); margin: 0; }
.pdt-bd-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.5); margin-bottom: 4px; }
.pdt-bd-split, .pdt-bd-ms, .pdt-bd-bom { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pdt-bd-split li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--cream); }
.pdt-bd-name { color: #fff; }
.pdt-bd-disc { font-family: var(--font-mono); font-size: 10px; color: rgba(239,233,220,.55); margin-left: 6px; }
.pdt-bd-share { font-variant-numeric: tabular-nums; }
.pdt-bd-fee { font-family: var(--font-mono); font-size: 10.5px; color: var(--safety-yellow, #F5C518); white-space: nowrap; }
.pdt-bd-ms li, .pdt-bd-bom li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--cream); }
.pdt-bd-feeline { font-size: 12px; color: rgba(239,233,220,.85); background: rgba(245,197,24,.1); border-radius: 4px; padding: 8px 10px; }
.pdt-bd-feeline strong { color: #fff; }

/* --- Lead bid recap (submitted, read-only) --------------------------------- */
.pdt-recap { border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pdt-recap-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.5); }
.pdt-recap-split, .pdt-recap-ms { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.pdt-recap-split li, .pdt-recap-ms li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--cream); }
.pdt-recap-bom { font-size: 12px; color: rgba(239,233,220,.7); }

/* --- Bid composer (lead) --------------------------------------------------- */
.pdt-bid-field { margin-top: 14px; }
.pdt-bid-field > label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(239,233,220,.7); margin-bottom: 6px; }
.pdt-bid-opt { font-family: var(--font-mono); font-size: 9.5px; text-transform: none; letter-spacing: 0; color: rgba(239,233,220,.45); margin-left: 6px; }
.pdt-bid-field textarea, .pdt-bid-bomitem, .pdt-bid-bomqty, .pdt-bid-mstitle,
.pdt-bid-money input, .pdt-bid-msdue {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px; color: #fff; font-family: var(--font-sans, inherit); font-size: 13px; padding: 9px 10px;
}
.pdt-bid-field textarea { resize: vertical; min-height: 60px; }
.pdt-bid-field textarea:focus, .pdt-bid-bomitem:focus, .pdt-bid-bomqty:focus, .pdt-bid-mstitle:focus,
.pdt-bid-money input:focus, .pdt-bid-msdue:focus { outline: none; border-color: var(--rust); background: rgba(255,255,255,.1); }
.pdt-bid-money { display: flex; align-items: stretch; }
.pdt-bid-money > span { display: flex; align-items: center; padding: 0 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-right: none; border-radius: 4px 0 0 4px; color: rgba(239,233,220,.8); font-size: 13px; }
.pdt-bid-money input { border-radius: 0 4px 4px 0; }
.pdt-bid-money.sm { max-width: 150px; }
.pdt-bid-sec { margin-top: 16px; }
.pdt-bid-sec-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(239,233,220,.7); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pdt-bid-sec-h .pdt-link { margin-left: auto; }
.pdt-bid-shares { display: flex; flex-direction: column; gap: 7px; }
.pdt-bid-share { display: grid; grid-template-columns: 1fr 150px; gap: 8px 10px; align-items: center; }
.pdt-bid-share-who { display: flex; flex-direction: column; }
.pdt-bid-share-name { font-size: 13px; color: #fff; }
.pdt-bid-share-disc { font-family: var(--font-mono); font-size: 10px; color: rgba(239,233,220,.55); }
.pdt-bid-fee { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; color: rgba(245,197,24,.85); text-align: right; margin-top: -3px; }
.pdt-bid-splitsum { font-family: var(--font-mono); font-size: 11.5px; color: rgba(239,233,220,.7); margin-top: 8px; text-align: right; }
.pdt-bid-splitsum strong { color: #fff; }
.pdt-bid-splitwarn { color: var(--safety-yellow, #F5C518); }

/* --- The self-set bid split (fairness rail) --------------------------------- */
.pdt-tag-xs { font-size: 9px; padding: 1px 5px; margin-left: 4px; }
.pdt-split { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 12px 13px; margin: 14px 0; }
.pdt-split-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.55); margin-bottom: 8px; }
.pdt-split-total { color: var(--safety-yellow, #F5C518); }
.pdt-split-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pdt-split-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.pdt-split-name { font-size: 13px; color: #fff; grid-row: 1; }
.pdt-split-disc { font-family: var(--font-mono); font-size: 10px; color: rgba(239,233,220,.5); grid-column: 1; grid-row: 2; }
.pdt-split-amt { font-size: 13px; color: #fff; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pdt-split-pct { font-family: var(--font-mono); font-size: 10.5px; color: rgba(239,233,220,.6); }
.pdt-split-await { font-family: var(--font-mono); font-size: 10.5px; color: var(--safety-yellow, #F5C518); grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pdt-split-note { font-size: 11.5px; line-height: 1.5; color: rgba(239,233,220,.65); margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.pdt-split-warn { color: var(--safety-yellow, #F5C518); }

.pdt-myshare { background: rgba(184,67,29,.1); border: 1px solid rgba(184,67,29,.35); border-radius: 6px; padding: 12px 13px; margin: 14px 0; }
.pdt-myshare-h { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); margin-bottom: 8px; }
.pdt-myshare-row { display: flex; align-items: center; gap: 10px; }
.pdt-myshare-now { font-size: 11.5px; line-height: 1.5; color: rgba(239,233,220,.75); margin-top: 8px; }

/* --- Accountability allocation (conformity + safety case) ------------------- */
.pdt-resp { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 12px 13px; margin: 14px 0; }
.pdt-resp-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.55); margin-bottom: 9px; }
.pdt-resp-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.07); }
.pdt-resp-row:first-of-type { border-top: 0; padding-top: 0; }
.pdt-resp-k { font-size: 11px; color: rgba(239,233,220,.6); font-family: var(--font-mono); letter-spacing: .03em; }
.pdt-resp-v { font-size: 13px; line-height: 1.4; }
.pdt-resp-ok { color: var(--green-br, #7bd88f); }
.pdt-resp-await { color: var(--safety-yellow, #F5C518); }
.pdt-resp-buyer { color: var(--rust-bright, #D45A2C); }
.pdt-resp-warn { color: #ff8f6b; }
.pdt-resp-note { font-size: 11.5px; line-height: 1.5; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.pdt-resp-lede { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.7); margin: 0 0 12px; }
.pdt-resp-field { margin-bottom: 12px; }
.pdt-resp-field label { display: block; font-size: 12px; color: var(--cream); margin-bottom: 5px; }
.pdt-resp-field select { width: 100%; background: rgba(0,0,0,.25); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 9px 10px; font-size: 13px; font-family: var(--font-display); }
.pdt-resp-stat { font-size: 11px; line-height: 1.4; margin: 6px 0 0; font-family: var(--font-mono); letter-spacing: .02em; }
.pdt-resp-accept { background: rgba(184,67,29,.12); border: 1px solid rgba(184,67,29,.4); border-radius: 6px; padding: 12px 13px; margin: 12px 0; }
.pdt-resp-accept-h { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.pdt-resp-accept p { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.78); margin: 0 0 10px; }
.pdt-resp-ack { background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.4); border-radius: 6px; padding: 11px 13px; margin: 10px 0; }
.pdt-resp-ack-row { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.85); cursor: pointer; }
.pdt-resp-ack-row input { margin-top: 2px; flex: 0 0 auto; }
.pdt-resp-ack-row strong { color: #fff; }
.pdt-bid-bom, .pdt-bid-ms { display: flex; flex-direction: column; gap: 7px; }
.pdt-bid-ms { gap: 14px; }
.pdt-bid-bomrow { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; }
.pdt-bid-msrow { display: flex; flex-direction: column; gap: 7px; }
.pdt-bid-msr1 { display: flex; gap: 8px; }
.pdt-bid-msr1 .pdt-bid-mstitle { flex: 1; min-width: 0; }
.pdt-bid-msr1 .pdt-bid-mskind { flex: 0 0 84px; }
.pdt-bid-msr2 { display: flex; gap: 8px; align-items: stretch; }
.pdt-bid-msr2 .pdt-bid-money { flex: 1; min-width: 0; max-width: none; }
.pdt-bid-msr2 .pdt-bid-msdue { flex: 0 0 132px; }
.pdt-bid-msr2 .pdt-bid-rm { flex: 0 0 auto; }
.pdt-bid-mskind { background: rgba(0,0,0,.25); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 9px 6px; font-size: 12px; font-family: var(--font-mono); }
.pdt-bid-mscrit { width: 100%; box-sizing: border-box; resize: vertical; background: rgba(0,0,0,.2); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 8px 9px; font-size: 12px; font-family: var(--font-display); }
.pdt-bid-mscrit::placeholder { color: rgba(239,233,220,.4); }
.pdt-bid-msrow.is-test { padding: 9px; border: 1px solid rgba(245,197,24,.3); border-radius: 6px; background: rgba(245,197,24,.05); }
.pdt-bid-note2 { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.72); margin: 0 0 10px; }

/* Milestone type tag + acceptance criteria (composer, workspace, buyer review) */
.pdt-ms-kind { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; color: var(--safety-yellow, #F5C518); border: 1px solid rgba(245,197,24,.5); border-radius: 2px; padding: 1px 5px; vertical-align: middle; }
.pdt-bd-msmain { display: flex; flex-direction: column; gap: 1px; }
.pdt-ms-crit { display: block; font-size: 11px; line-height: 1.45; color: rgba(239,233,220,.6); margin-top: 3px; }
.pdt-ms-crit2 { font-size: 11.5px; line-height: 1.5; color: rgba(239,233,220,.72); margin-top: 6px; padding: 8px 10px; background: rgba(255,255,255,.04); border-left: 2px solid rgba(245,197,24,.5); border-radius: 0 4px 4px 0; }
.pdt-ms-crit-h { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(239,233,220,.5); margin-bottom: 3px; }
.pdt-ms-approvehint { font-size: 11px; line-height: 1.5; color: var(--safety-yellow, #F5C518); margin: 6px 0 0; }
.pdt-ms-review { font-size: 11px; line-height: 1.5; color: rgba(239,233,220,.6); margin: 6px 0 0; }
.pdt-ms-dispute { margin-top: 8px; padding: 9px 11px; border-radius: 6px; background: rgba(192,67,42,.12); border: 1px solid rgba(192,67,42,.45); }
.pdt-ms-dispute.is-esc { background: rgba(245,197,24,.08); border-color: rgba(245,197,24,.45); }
.pdt-ms-dispute-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #e88a72; margin-bottom: 4px; }
.pdt-ms-dispute.is-esc .pdt-ms-dispute-h { color: var(--safety-yellow, #F5C518); }
.pdt-ms-dispute-reason { font-size: 12px; line-height: 1.5; color: #fff; margin: 0 0 4px; }
.pdt-ms-dispute-held { font-size: 11px; line-height: 1.45; color: rgba(239,233,220,.66); margin: 0; }
.pdt-ms-dispute-esc { font-size: 11px; line-height: 1.5; color: rgba(239,233,220,.8); margin: 6px 0 0; }

/* Engagement cancellation, cooling-off and settlement (buyer) */
.pdt-cancel-bar { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.pdt-cancel-cooling { font-size: 11.5px; line-height: 1.5; color: var(--safety-yellow, #F5C518); margin: 0 0 6px; }
.pdt-cancel-link { font-size: 12px; color: rgba(239,233,220,.6); }
.pdt-cancel-link:hover { color: #e88a72; }
.pdt-cancel-box { margin-top: 12px; padding: 12px 13px; border-radius: 7px; background: rgba(192,67,42,.1); border: 1px solid rgba(192,67,42,.42); }
.pdt-cancel-h { font-family: var(--font-display, inherit); font-size: 14px; color: #fff; margin-bottom: 6px; }
.pdt-cancel-lede { font-size: 12px; line-height: 1.55; color: rgba(239,233,220,.82); margin: 0 0 10px; }
.pdt-cancel-lines { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.pdt-cancel-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: rgba(239,233,220,.9); }
.pdt-cancel-lines li span:last-child { font-family: var(--font-mono); color: #fff; }
.pdt-cancel-note2 { font-size: 11px; line-height: 1.5; color: rgba(239,233,220,.6); margin: 0 0 8px; }
.pdt-cancel-repl { font-size: 11.5px; line-height: 1.5; color: var(--safety-yellow, #F5C518); margin: 0 0 11px; }
.pdt-settle { margin-bottom: 12px; padding: 12px 13px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.pdt-settle-h { font-family: var(--font-display, inherit); font-size: 14px; color: #fff; margin-bottom: 5px; }
.pdt-settle-lede { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.78); margin: 0 0 9px; }
.pdt-bid-msrow .pdt-bid-rm { grid-area: rm; }
.pdt-bid-rm { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(239,233,220,.7); border-radius: 4px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1; flex: none; }
.pdt-bid-rm:hover { border-color: var(--rust); color: #fff; }
.pdt-bid-err { font-size: 12.5px; color: #ffd9cf; background: rgba(184,67,29,.25); border: 1px solid rgba(212,90,44,.5); border-radius: 4px; padding: 9px 11px; margin-top: 14px; }
.pdt-bid-actions { flex-wrap: wrap; }

/* --- Milestone delivery workspace (accepted engagement) -------------------- */
.pdt-tag-amber { background: var(--safety-yellow, #F5C518); color: #1A1A1A; }
.pdt-tag-warn { background: #C0432A; color: #fff; }
.pdt-ws-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,233,220,.5); margin: 32px 0 14px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.pdt-ws-team { font-size: 12.5px; color: rgba(239,233,220,.8); margin-top: 8px; }
.pdt-conformity-line { font-size: 13px; color: rgba(239,233,220,.85); background: rgba(184,67,29,.14); border-left: 3px solid var(--rust); border-radius: 0 4px 4px 0; padding: 9px 12px; margin: 14px 0; }
.pdt-doc-list { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.pdt-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.pdt-doc:last-child { border-bottom: none; }
.pdt-doc-k { font-family: var(--font-mono); font-weight: 700; color: var(--rust-bright); width: 14px; flex: none; }
.pdt-doc-name { color: rgba(239,233,220,.92); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.pdt-doc-who { color: rgba(239,233,220,.5); font-size: 12px; flex: none; white-space: nowrap; }
.pdt-doc-download { display: inline-block; margin: 0; padding: 9px 16px; background: var(--rust); color: #FBF8F1; font-weight: 700; font-size: 13px; border-radius: 3px; text-decoration: none; }
.pdt-doc-download:hover { background: var(--rust-bright); }
.pdt-doc-dl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--rust-bright); text-decoration: none; flex: none; white-space: nowrap; padding: 3px 9px; border: 1px solid rgba(212,90,44,.42); border-radius: 3px; background: transparent; cursor: pointer; }
.pdt-doc-dl:hover { background: rgba(212,90,44,.16); border-color: var(--rust-bright); }
.pdt-doc-dl:disabled { opacity: .5; cursor: default; }
.pdt-cform-h.pdt-docs-h { margin-top: 6px; }
.pdt-doc-note { color: rgba(239,233,220,.5); font-size: 12px; margin: 8px 0 0; }
@media (max-width: 560px) { .pdt-doc { gap: 8px; } }

/* Project thread (buyer-to-team channel) */
.pdt-thread { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.pdt-thread-empty { font-size: 13px; line-height: 1.55; color: rgba(239,233,220,.7); margin: 4px 0 14px; }
.pdt-msg { border: 1px solid rgba(239,233,220,.12); border-radius: 6px; padding: 9px 12px; background: rgba(255,255,255,.03); }
.pdt-msg.is-mine { border-color: rgba(212,90,44,.4); background: rgba(212,90,44,.08); }
.pdt-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pdt-msg-who { font-size: 13px; font-weight: 700; color: #fff; }
.pdt-msg-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust-bright); }
.pdt-msg-time { font-family: var(--font-mono); font-size: 10.5px; color: rgba(239,233,220,.45); margin-left: auto; }
.pdt-msg-body { font-size: 13.5px; line-height: 1.5; color: rgba(239,233,220,.92); white-space: pre-wrap; word-break: break-word; }
.pdt-msg-redacted { font-family: var(--font-mono); font-size: 10.5px; color: var(--safety-yellow,#F5C518); margin-top: 5px; }
.pdt-thread-compose { display: flex; gap: 8px; align-items: flex-end; }
.pdt-thread-compose textarea { flex: 1; min-width: 0; resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.4; color: #fff; background: rgba(0,0,0,.25); border: 1px solid rgba(239,233,220,.18); border-radius: 6px; padding: 8px 10px; }
.pdt-thread-compose textarea:focus { outline: none; border-color: var(--rust-bright); }
.pdt-thread-compose textarea::placeholder { color: rgba(239,233,220,.4); }
.pdt-cform-h.pdt-cparties-h { margin-top: 18px; }
.pdt-cparties { list-style: none; margin: 6px 0 0; padding: 0; }
.pdt-cparty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.pdt-cparty:last-child { border-bottom: none; }
.pdt-cparty-name { color: rgba(239,233,220,.92); }
.pdt-cparty-role { color: rgba(239,233,220,.45); font-size: 11px; margin-left: 4px; }
.pdt-cform { margin-top: 16px; }
.pdt-csign { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.pdt-cform-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.55); margin: 0 0 6px; }
.pdt-cform label { display: block; font-size: 12px; color: rgba(239,233,220,.7); margin: 10px 0 4px; }
.pdt-cform input, .pdt-csign input[type="text"] { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--cream); border: 1px solid transparent; border-radius: 3px; padding: 9px 11px; }
.pdt-cform input:focus, .pdt-csign input[type="text"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(212,90,44,.4); }
.pdt-cform .pdt-btn, .pdt-csign .pdt-btn { margin-top: 12px; }
.pdt-cintent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(239,233,220,.85); margin: 12px 0 0; cursor: pointer; }
.pdt-cintent input { margin-top: 2px; flex: 0 0 auto; }
.pdt-csigned { margin-top: 14px; padding: 11px 13px; background: rgba(47,125,79,.16); border-left: 3px solid rgba(47,125,79,.9); border-radius: 0 4px 4px 0; font-size: 13px; color: rgba(239,233,220,.9); }
.pdt-cexecuted { margin: 4px 0 14px; padding: 12px 14px; background: rgba(47,125,79,.18); border-left: 3px solid rgba(47,125,79,.95); border-radius: 0 4px 4px 0; font-size: 13.5px; font-weight: 600; color: rgba(239,233,220,.95); }
.pdt-ms-progress { font-family: var(--font-mono); font-size: 11.5px; color: var(--safety-yellow, #F5C518); margin-bottom: 8px; }
.pdt-ms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pdt-ms { background: rgba(255,255,255,.05); border-left: 3px solid rgba(255,255,255,.18); border-radius: 5px; padding: 15px 17px; }
.pdt-ms.is-delivered { border-left-color: var(--safety-yellow, #F5C518); }
.pdt-ms.is-approved { border-left-color: var(--green, #2f7d4f); }
.pdt-ms.is-disputed { border-left-color: #C0432A; }
.pdt-ms.is-in_progress { border-left-color: rgba(239,233,220,.45); }
.pdt-ms-top { display: flex; align-items: center; gap: 10px; }
.pdt-ms-title { font-size: 13.5px; color: #fff; font-weight: 600; }
.pdt-ms-top .pdt-tag { margin-left: auto; }
.pdt-ms-meta { font-family: var(--font-mono); font-size: 11px; color: rgba(239,233,220,.6); margin-top: 4px; }
.pdt-ms-ok { color: var(--green, #6bbf8f); }
.pdt-ms-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.pdt-ms-issue { font-family: var(--font-mono); font-size: 11.5px; color: rgba(239,233,220,.6); }
.pdt-ms-issue:hover { color: var(--cream); }
.pdt-ms-disputebox { margin-top: 10px; background: rgba(192,67,42,.12); border: 1px solid rgba(192,67,42,.4); border-radius: 4px; padding: 10px 11px; }
.pdt-ms-disputebox p { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.85); margin: 0 0 8px; }
.pdt-ms-disputebox textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: #fff; font-family: var(--font-sans, inherit); font-size: 12.5px; padding: 8px 9px; resize: vertical; }
.pdt-ms-disputebox textarea:focus { outline: none; border-color: #C0432A; }
.pdt-ms-disputebox .pdt-actions { margin-top: 9px; }

@media (max-width: 880px) {
  .pdt-grid { grid-template-columns: 1fr; }
  .pdt-panel { position: static; }
  .pdt-dl { grid-template-columns: 1fr; gap: 2px; }
  .pdt-bid-share { grid-template-columns: 1fr 120px; }
}

/* ============================================================================
   Buyer workspace (dashboard): product rail, overview launcher and product
   views. The product rail sits on the dark shell right rail above the account
   menu; the tiles, cards and attention strip sit on the light main column.
   ============================================================================ */
.bw-railnav { }
.bw-rl-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 8px; }
.bw-rl-k2 { margin-top: 20px; }
.bw-rl { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin: 0 -11px; border-radius: 8px; text-decoration: none; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; border-left: 3px solid transparent; }
.bw-rl:hover { color: #fff; background: rgba(255,255,255,.05); }
.bw-rl-ic { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); flex: none; }
.bw-rl-t { flex: 1; }
.bw-rl-ct { font-family: var(--font-mono); font-size: 10.5px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-radius: 20px; padding: 1px 8px; }
.bw-rl.is-on { color: #fff; background: rgba(255,255,255,.06); border-left-color: var(--rust); }
.bw-rl.is-on .bw-rl-ic { color: var(--rust-bright); }
.bw-rl:hover .bw-rl-ic { color: rgba(255,255,255,.9); }
.bw-rl.is-on .bw-rl-ct { background: var(--rust); color: #fff; }

.bw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 4px; }
.bw-tile { background: #FBF8F1; border: 1px solid #E1D9C8; border-radius: 15px; padding: 20px 19px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; min-height: 200px; transition: border-color .14s, transform .14s; position: relative; }
.bw-tile:hover { border-color: var(--rust); transform: translateY(-3px); }
.bw-tile.is-flag { opacity: .82; }
.bw-tile-badge { position: absolute; top: 15px; right: 15px; }
.bw-tile-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.bw-tile-h { font-weight: 800; font-size: 20px; letter-spacing: -.01em; margin: 9px 0 3px; }
.bw-tile-d { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.bw-tile-stat { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; padding-top: 16px; }
.bw-tile-n { font-weight: 800; font-size: 32px; letter-spacing: -.03em; line-height: 1; }
.bw-tile-n small { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7a756b; margin-top: 5px; }
.bw-tile-go { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--rust); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }

.bw-view { margin-top: 4px; }
.bw-block { margin-top: 28px; margin-bottom: 28px; }
.bw-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 13px; }
.bw-sec-head2 { margin-top: 26px; }
.bw-sec-h { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0; }
.bw-sec-h .sl { color: var(--rust); margin-right: 7px; }
.bw-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); text-decoration: none; }
.bw-btn { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; border-radius: 8px; padding: 9px 14px; text-decoration: none; font-weight: 600; display: inline-block; }
.bw-btn-rust { background: var(--rust); color: #fff; } .bw-btn-rust:hover { background: var(--rust-dk); }
.bw-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; color: var(--ink-mute); font-size: 13px; background: rgba(255,255,255,.4); }
.bw-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.6; border-left: 3px solid var(--line); padding-left: 13px; }

.bw-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; font-weight: 600; }
.bw-t-live { background: rgba(47,125,79,.14); color: #2f7d4f; border: 1px solid rgba(47,125,79,.34); }
.bw-t-deliver { background: rgba(184,67,29,.12); color: var(--rust); border: 1px solid rgba(184,67,29,.34); }
.bw-t-draft { background: rgba(122,117,107,.14); color: #7a756b; border: 1px solid rgba(122,117,107,.3); }
.bw-t-amber { background: rgba(245,197,24,.18); color: #8a6a00; border: 1px solid rgba(245,197,24,.5); }

.bw-roll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.bw-pcard { flex: 0 0 264px; background: #FBF8F1; border: 1px solid #E1D9C8; border-radius: 13px; padding: 15px 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; transition: border-color .14s, transform .14s; }
.bw-pcard:hover { border-color: var(--rust); transform: translateY(-2px); }
.bw-pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bw-pc-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7a756b; }
.bw-pc-title { font-weight: 700; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; }
.bw-pc-meta { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.bw-pc-foot { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust); margin-top: 2px; }

.bw-attn { display: flex; flex-direction: column; gap: 8px; }
.bw-attn-row { display: flex; align-items: baseline; gap: 12px; background: #FBF8F1; border: 1px solid #E1D9C8; border-left: 3px solid var(--rust); border-radius: 9px; padding: 11px 14px; }
.bw-attn-dot { font-family: var(--font-mono); font-size: 10px; color: var(--rust); letter-spacing: .1em; text-transform: uppercase; flex: none; }
.bw-attn-main { font-size: 13.5px; flex: 1; }
.bw-attn-go { margin-left: auto; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--rust); text-decoration: none; white-space: nowrap; }

@media (max-width: 900px) { .bw-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Workspace product pages (the Projects / Contract / Permanent hubs). Grouped
   rows that surface each product's tooling on its own page, plus the permanent
   five-stage recruitment tracker. Tags reuse the bw-t-* family above. On the
   light main column.
   ============================================================================ */
.wk-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.wk-ph-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.wk-ph h1{font-family:var(--font-display,'Inter',sans-serif);font-weight:900;font-size:32px;letter-spacing:-.02em;margin:6px 0 4px;color:var(--ink)}
.wk-ph p{font-size:13.5px;color:var(--ink-mute);margin:0;max-width:48ch;line-height:1.5}
.wk-badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(245,197,24,.2);color:#8a6a00;border:1px solid rgba(245,197,24,.5);border-radius:5px;padding:3px 8px;margin-left:10px;vertical-align:middle}
.wk-pa{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;text-decoration:none;border-radius:9px;padding:11px 15px;white-space:nowrap}
.wk-pa-rust{background:var(--rust);color:#fff}.wk-pa-rust:hover{background:var(--rust-dk)}
.wk-pa-ghost{border:1px solid var(--line);color:var(--rust);background:#FBF8F1}

.wk-grp{margin-bottom:24px}
.wk-grp-h{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 11px}
.wk-grp-h .sl{color:var(--rust);margin-right:7px}.wk-grp-h .ct{color:#7a756b;font-weight:400;margin-left:6px}

.wk-row{display:flex;align-items:center;gap:16px;background:#FBF8F1;border:1px solid #E1D9C8;border-radius:11px;padding:14px 17px;margin-bottom:9px;text-decoration:none;color:var(--ink)}
.wk-row.attn{border-left:3px solid var(--rust)}
.wk-row.click:hover{border-color:var(--rust)}
.wk-row-l{flex:none;width:104px}
.wk-row-m{flex:1;min-width:0}
.wk-row-title{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.wk-row-sub{font-size:12.5px;color:var(--ink-mute);margin-top:3px;line-height:1.45}.wk-row-sub b{color:var(--ink);font-weight:600}
.wk-cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#7a756b;display:block;margin-bottom:5px}
.wk-row-meta{flex:none;text-align:right;font-size:12px;color:#7a756b;max-width:170px}
.wk-row-meta .big{display:block;font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.wk-row-act{flex:none}
.wk-act{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-radius:8px;padding:9px 13px;white-space:nowrap;display:inline-block}
.wk-act-rust{background:var(--rust);color:#fff}.wk-act-ghost{border:1px solid var(--line);color:var(--rust)}
.wk-subacts{margin-top:7px;display:flex;gap:13px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:#7a756b}
.wk-subacts .ok{color:#2f7d4f}.wk-subacts .ok::before{content:"\2713 "}
.wk-subacts .todo{color:var(--rust)}.wk-subacts .todo::before{content:"\2192 "}
.wk-note{margin-top:14px;font-size:12.5px;color:var(--ink-mute);line-height:1.55;border-left:3px solid var(--line);padding-left:13px}
.wk-empty{border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:#7a756b;font-size:13px;background:rgba(255,255,255,.4)}

/* permanent five-stage tracker */
.wk-pcard{background:#FBF8F1;border:1px solid #E1D9C8;border-radius:12px;padding:16px 18px;margin-bottom:11px}
.wk-pcard.attn{border-left:3px solid var(--rust)}
.wk-pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wk-pc-name{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.wk-pc-role{font-size:12.5px;color:var(--ink-mute);margin-top:2px}
.wk-pipe{display:flex;align-items:flex-start;gap:0;margin:14px 0 13px}
.wk-st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}
.wk-st .dot{width:13px;height:13px;border-radius:50%;background:var(--line);border:2px solid var(--line);z-index:1}
.wk-st.done .dot{background:#2f7d4f;border-color:#2f7d4f}
.wk-st.now .dot{background:var(--rust);border-color:var(--rust);box-shadow:0 0 0 4px rgba(184,67,29,.16)}
.wk-st .lab{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.03em;text-transform:uppercase;color:#7a756b;text-align:center}
.wk-st.now .lab{color:var(--rust);font-weight:700}.wk-st.done .lab{color:#2f7d4f}
.wk-st::after{content:"";position:absolute;top:6px;left:50%;width:100%;height:2px;background:var(--line);z-index:0}
.wk-st.done::after{background:#2f7d4f}.wk-st:last-child::after{display:none}
.wk-pc-state{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(184,67,29,.05);border:1px solid #E1D9C8;border-radius:8px;padding:11px 14px}
.wk-pc-state-txt{font-size:13px;color:var(--ink);line-height:1.45}.wk-pc-state-txt b{font-weight:700}
.wk-pc-acts{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.wk-prefbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:13px 16px;border:1px dashed var(--line);border-radius:10px;font-size:12.5px;color:var(--ink-mute)}
.wk-prefbar b{color:var(--ink);font-weight:600}.wk-prefbar a{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--rust);text-decoration:none;white-space:nowrap}
@media(max-width:760px){
  .wk-row{flex-wrap:wrap;gap:7px 12px;align-items:center}
  .wk-row-l{flex:none;width:auto;order:1}
  .wk-row-meta{flex:none;order:2;margin-left:auto;text-align:right;max-width:none}
  .wk-row-m{flex:1 1 100%;order:3;min-width:0}
  .wk-row-act{flex:1 1 100%;order:4}
  .wk-row-act .wk-act{display:block;text-align:center}
  .wk-st .lab{font-size:7.5px}
}

/* ============================================================================
   Search reframe: the product-aware results page. A routing banner names the
   best-fit product, then results are grouped into product streams. Reuses the
   sr-row family for specialist and listing rows.
   ============================================================================ */
.sr-route{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(180deg,#fff,#FBF6EC);border:1.5px solid var(--rust);border-radius:13px;padding:18px 20px;margin:0 0 26px}
.sr-route-ic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--rust);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;font-family:var(--font-display,'Inter',sans-serif)}
.sr-route-b{flex:1;min-width:0}
.sr-route-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.sr-route-h{font-weight:800;font-size:17px;letter-spacing:-.01em;margin:3px 0 4px;color:var(--ink)}
.sr-route-p{font-size:13px;color:var(--ink-mute);line-height:1.5;max-width:64ch}
.sr-route-acts{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.sr-route-btn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-radius:8px;padding:10px 14px;font-weight:600;display:inline-block}
.sr-route-btn-rust{background:var(--rust);color:#fff}.sr-route-btn-rust:hover{background:var(--rust-dk)}
.sr-route-btn-ghost{border:1px solid var(--line);color:var(--rust);background:#fff}

.sr-stream{margin-bottom:24px}
.sr-stream-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.sr-stream-l{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sr-stream-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}.sr-stream-k .sl{color:var(--rust);margin-right:6px}
.sr-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 7px;font-weight:600}
.sr-pill-con{background:rgba(184,67,29,.1);color:var(--rust);border:1px solid rgba(184,67,29,.3)}
.sr-pill-prj{background:rgba(47,125,79,.12);color:#2f7d4f;border:1px solid rgba(47,125,79,.32)}
.sr-pill-perm{background:rgba(245,197,24,.18);color:#8a6a00;border:1px solid rgba(245,197,24,.5)}
.sr-pill-kb{background:rgba(122,117,107,.14);color:#7a756b;border:1px solid rgba(122,117,107,.3)}
.sr-see{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--rust);text-decoration:none;white-space:nowrap}

/* Project RFQ cards (the browse card, reused in the search projects-to-join
   stream) reflow at phone width: drop the index, shrink the avatar, move the
   value below the body, and hide the duplicate budget pill. Scoped to
   .project-row so the specialist directory rows are untouched. */
@media(max-width:640px){
  .project-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:18px 0}
  .project-row .row-num{order:1;font-size:10px}
  .project-row .row-avatar{order:2;width:40px;height:40px;font-size:15px}
  .project-row .row-rate{order:3;margin-left:auto;text-align:right;flex-direction:column;align-items:flex-end;gap:0}
  .project-row .row-rate strong{font-size:19px}
  .project-row .row-rate strong small{font-size:9px}
  .project-row .row-rate>span{display:none}
  .project-row .row-rate .seat-match{display:none}
  .project-row .row-body{order:4;flex:1 1 100%;min-width:0;margin-top:2px}
  .project-row .row-body h3{font-size:18px}
  .project-row .row-meta{gap:8px 10px}
  .project-row .row-meta .pill-budget{display:none}
}

/* --- Dispute resolution workspace (Stage 4) -------------------------------- */
/* The workspace stacks several panels full width, so the sticky/2-column
   behaviour of the right-rail pdt-panel is reset inside .pdt-dispute. */
.pdt-dispute .pdt-panel { position: static; top: auto; margin: 0 0 16px; }
.pdt-dispute .pdt-panel:last-child { margin-bottom: 0; }

.pdw-ms { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(239,233,220,.14); border-radius: 6px; padding: 14px 16px; margin: 0 0 16px; }
.pdw-ms-who { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rust-bright, #D45A2C); }
.pdw-ms-t { font-size: 15px; font-weight: 700; color: #fff; margin: 3px 0 6px; }
.pdw-ms-reason { font-size: 13px; line-height: 1.5; color: rgba(239,233,220,.85); }
.pdw-ms-amt { font-family: var(--font-mono); font-size: 15px; color: #fff; text-align: right; white-space: nowrap; }
.pdw-ms-amt small { display: block; margin-top: 6px; }

.pdw-neutral { border-left: 3px solid var(--safety-yellow, #F5C518); background: rgba(245,197,24,.07); border-radius: 4px; padding: 12px 15px; font-size: 12.5px; line-height: 1.55; color: rgba(239,233,220,.9); margin: 0 0 16px; }
.pdw-neutral b { color: #fff; }

.pdw-ladder { list-style: none; margin: 4px 0 0; padding: 0; }
.pdw-rung { display: flex; gap: 13px; }
.pdw-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.pdw-dot { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; flex: none; border: 2px solid rgba(239,233,220,.25); color: rgba(239,233,220,.6); }
.pdw-line { width: 2px; flex: 1; background: rgba(239,233,220,.18); margin: 3px 0; min-height: 14px; }
.pdw-body { padding: 1px 0 18px; }
.pdw-rt { font-size: 14px; font-weight: 700; color: rgba(239,233,220,.92); }
.pdw-rd { font-size: 12px; line-height: 1.45; color: rgba(239,233,220,.6); margin-top: 2px; }
.pdw-rung.is-done .pdw-dot { background: var(--green, #2f7d4f); border-color: var(--green, #2f7d4f); color: #eafff2; }
.pdw-rung.is-now .pdw-dot { background: var(--rust, #B8431D); border-color: var(--rust-bright, #D45A2C); color: #fff; }
.pdw-rung.is-now .pdw-rt { color: #fff; }
.pdw-rung.is-now .pdw-body { background: rgba(212,90,44,.08); border: 1px solid rgba(212,90,44,.3); border-radius: 6px; padding: 9px 13px; margin: -4px 0 14px; }

.pdw-wp { font-family: var(--font-mono); font-size: 11px; color: var(--safety-yellow, #F5C518); margin: 0 0 12px; letter-spacing: .02em; line-height: 1.5; }

.pdw-muted { font-size: 12.5px; line-height: 1.5; color: rgba(239,233,220,.62); margin: 0 0 12px; }

.pdw-prop { border: 1px solid rgba(239,233,220,.16); border-radius: 6px; padding: 13px 15px; margin: 0 0 14px; background: rgba(255,255,255,.03); }
.pdw-prop.is-mine { border-color: rgba(212,90,44,.4); background: rgba(212,90,44,.08); }
.pdw-prop-h { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--rust-bright, #D45A2C); margin-bottom: 6px; }
.pdw-prop.is-mine .pdw-prop-h { color: var(--safety-yellow, #F5C518); }
.pdw-prop-b { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.45; }
.pdw-prop-note { font-size: 12.5px; line-height: 1.5; color: rgba(239,233,220,.82); margin-top: 6px; }
.pdw-prop-foot { font-size: 11.5px; color: rgba(239,233,220,.5); margin-top: 8px; }

.pdw-opts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.pdw-opt { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(239,233,220,.16); border-radius: 6px; padding: 11px 13px; font-size: 13.5px; color: rgba(239,233,220,.9); background: transparent; cursor: pointer; text-align: left; width: 100%; font-family: inherit; }
.pdw-opt .pdw-rad { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(239,233,220,.4); flex: none; }
.pdw-opt.sel { border-color: var(--rust-bright, #D45A2C); background: rgba(212,90,44,.08); color: #fff; }
.pdw-opt.sel .pdw-rad { border-color: var(--rust-bright, #D45A2C); box-shadow: inset 0 0 0 3px var(--rust-bright, #D45A2C); }

.pdw-partial { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px 13px; border: 1px solid rgba(239,233,220,.16); border-radius: 6px; background: rgba(0,0,0,.18); }
.pdw-partial label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: rgba(239,233,220,.7); }
.pdw-partial input { background: rgba(0,0,0,.3); border: 1px solid rgba(239,233,220,.22); border-radius: 5px; color: #fff; font-size: 14px; padding: 8px 11px; width: 130px; font-family: var(--font-mono); }
.pdw-partial-note { font-size: 12px; color: rgba(239,233,220,.6); flex-basis: 100%; }
.pdt-dispute [data-disp-note] { display: block; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.4; color: #fff; background: rgba(0,0,0,.25); border: 1px solid rgba(239,233,220,.18); border-radius: 6px; padding: 8px 10px; margin: 0 0 4px; }
.pdt-dispute [data-disp-note]:focus { outline: none; border-color: var(--rust-bright, #D45A2C); }
.pdt-dispute [data-disp-note]::placeholder { color: rgba(239,233,220,.4); }

.pdw-sector { border: 1px solid rgba(245,197,24,.4); background: rgba(245,197,24,.08); border-radius: 6px; padding: 13px 16px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: rgba(239,233,220,.92); }
.pdw-sector b { color: var(--safety-yellow, #F5C518); }
.pdw-sector-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--safety-yellow, #F5C518); display: block; margin-bottom: 5px; }

.pdw-routes { display: flex; flex-direction: column; gap: 12px; margin: 0 0 4px; }
.pdw-route { border: 1px solid rgba(239,233,220,.16); border-radius: 7px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.pdw-route.rec { border-color: rgba(212,90,44,.5); background: rgba(212,90,44,.07); }
.pdw-route.chosen { border-color: rgba(245,197,24,.5); background: rgba(245,197,24,.06); }
.pdw-route-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.pdw-route-name { font-size: 15px; font-weight: 800; color: #fff; }
.pdw-route-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(239,233,220,.55); margin-left: auto; white-space: nowrap; }
.pdw-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.pdw-tag.bind { background: rgba(212,90,44,.16); color: var(--rust-bright, #D45A2C); }
.pdw-tag.non { background: rgba(255,255,255,.08); color: rgba(239,233,220,.7); }
.pdw-tag.rec { background: var(--green, #2f7d4f); color: #eafff2; }
.pdw-tag.chosen { background: var(--safety-yellow, #F5C518); color: #1A1A1A; }
.pdw-route-d { font-size: 12.5px; line-height: 1.55; color: rgba(239,233,220,.85); }
.pdw-route-by { font-size: 11.5px; line-height: 1.5; color: rgba(239,233,220,.6); margin-top: 7px; }
.pdw-route-by b { color: var(--rust-bright, #D45A2C); font-weight: 600; }
.pdw-foot { font-size: 11.5px; line-height: 1.55; color: rgba(239,233,220,.55); margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(239,233,220,.14); }

.pdw-resolved { font-size: 14px; line-height: 1.55; color: rgba(239,233,220,.92); background: rgba(47,125,79,.12); border: 1px solid rgba(47,125,79,.35); border-radius: 6px; padding: 13px 15px; margin-top: 4px; }

/* Dispute workspace textareas inherit the dark-panel treatment (the standalone
   proposal-note box as well as the channel compose box). */
.pdt-dispute textarea { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.25); border: 1px solid rgba(239,233,220,.18); border-radius: 6px; color: #fff; font-size: 13px; padding: 9px 11px; font-family: var(--font-sans, inherit); resize: vertical; }
.pdt-dispute textarea::placeholder { color: rgba(239,233,220,.45); }
.pdt-dispute .pdt-thread-compose { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.pdt-dispute .pdt-thread-compose textarea { margin: 0; }

/* ============================================================================
   Projects enrichment: hub rows, involvement cards, phone browse card.
   Reads the list response's existing fields; no markup-only colour drift.
   ============================================================================ */
.xp-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px}
.xp-prog{display:flex;align-items:center;gap:9px}
.xp-prog-card{margin-top:13px}
.xp-bar{width:128px;height:7px;background:#E6DECB;border-radius:4px;overflow:hidden;flex:0 0 128px}
.xp-bar>i{display:block;height:100%;background:#2f7d4f;border-radius:4px}
.xp-bar.part>i{background:var(--rust)}
.xp-pl{font-size:12px;color:var(--ink)}.xp-pl b{font-weight:700}
.xp-seats{font-size:12px;color:var(--ink-mute)}.xp-seats b{color:var(--ink);font-weight:600}
.xp-disc{font-family:var(--font-mono);font-size:10.5px;color:#6B6961}
.xp-dot{width:3px;height:3px;border-radius:50%;background:#bdb6a6;display:inline-block;flex:none}

.xpi{background:#FBF8F1;border:1px solid #E1D9C8;border-radius:11px;padding:15px 17px;margin-bottom:9px;color:var(--ink)}
.xpi.attn{border-left:3px solid var(--rust)}
.xpi:hover{border-color:var(--rust)}
.xpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.xpi-head{min-width:0}
.xpi-ttl{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.xpi-part{font-size:12.5px;color:var(--ink-mute);margin-top:3px}.xpi-part b{color:var(--ink);font-weight:600}
.xpi-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.xpi-share{font-size:12.5px;color:var(--ink)}.xpi-share b{font-weight:700}.xpi-share .rel{color:#2f7d4f;font-weight:600}
.xpi .wk-act{flex:none}

.pjc-m,.pjc-m-cat{display:none}
@media(max-width:520px){
  .project-row .row-num,.project-row .row-avatar,.project-row .row-rate,.project-row .row-meta,.project-row .row-seats{display:none}
  .project-row .pjc-m-cat{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#6B6961;margin-bottom:3px}
  .project-row .pjc-m{display:block;margin-top:7px}
  .pjc-m-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);line-height:1.55}
  .pjc-m-meta b{color:var(--ink);font-weight:600}
  .pjc-m-prox{color:#8F3416;font-weight:600}
  .pjc-m-bar{display:block;width:100%;height:6px;background:#E6DECB;border-radius:4px;overflow:hidden;margin-top:9px}
  .pjc-m-bar>i{display:block;height:100%;background:#2f7d4f;border-radius:4px}
  .pjc-m-leg{font-size:11px;color:var(--ink-mute);margin-top:5px}
  .pjc-m-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
  .pjc-m-where{font-size:11.5px;color:var(--ink-mute)}
  .pjc-m-cta{font-size:12px;font-weight:600;color:var(--rust)}
}

/* ============================================================================
   PROJECT WORKSPACE (board + issues), pws-*. The post-acceptance instrument:
   dark header, stage rail, tabs, and a sand work surface. Locked palette inlined
   (paper #F4F0E6, bone #EBE6DC, steel #2A2E33, concrete #6B6961, green #2f7d4f,
   amber #B26B00, safety #F5C518, red #A12B1E); brand tokens via var().
   ============================================================================ */
.pws{border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 8px 30px rgba(26,22,15,.10),0 2px 6px rgba(26,22,15,.06)}
.pws-head{background:var(--ink);color:var(--cream);padding:20px 26px 18px;position:relative}
.pws-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-bright);font-weight:600}
.pws-title{font-size:23px;font-weight:700;margin:5px 0 2px;color:#fff;letter-spacing:-.012em;line-height:1.15}
.pws-sub{font-size:13px;color:#cabfae}
.pws-sub b{color:#e4d9c6}
.pws-meta{display:flex;gap:30px;margin-top:15px;flex-wrap:wrap}
.pws-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#948c7f}
.pws-v{font-size:14.5px;font-weight:600;color:#fff;margin-top:1px}
.pws-v.rust{color:var(--rust-bright)}
.pws-v.safety{color:#F5C518}
.pws-id{position:absolute;top:20px;right:24px;text-align:right}
.pws-id-lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7d756a}
.pws-id-val{font-size:13px;font-weight:600;color:#fff;margin-top:2px;display:flex;align-items:center;gap:7px;justify-content:flex-end}
.pws-ava{width:24px;height:24px;border-radius:50%;background:#2A2E33;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pws-ava.you{background:var(--rust)}
.pws-ava.sm{width:21px;height:21px;font-size:9.5px}

.pws-rail{display:flex;background:#23272c}
.pws-st{flex:1;padding:10px 8px;text-align:center;font-size:11px;font-weight:600;color:#8a8378;letter-spacing:.02em;border-right:1px solid #191c20;transition:background .2s cubic-bezier(.2,.7,.2,1)}
.pws-st:last-child{border-right:0}
.pws-st.done{color:#cdbfa9;background:#2b2f34}
.pws-st.now{color:#101113;background:#F5C518}
.pws-tick{font-size:9.5px;display:block;color:#6f6a60;margin-bottom:1px}
.pws-st.done .pws-tick{color:#2f7d4f}
.pws-st.now .pws-tick{color:#7a5c00}

.pws-tabs{display:flex;gap:2px;background:#EBE6DC;border-bottom:2px solid var(--line);padding:0 12px}
.pws-tab{padding:12px 17px;font-size:13px;font-weight:600;color:#6B6961;cursor:pointer;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;font-family:inherit;transition:color .15s cubic-bezier(.2,.7,.2,1),border-color .15s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center}
.pws-tab:hover{color:var(--rust-dk)}
.pws-tab.on{color:var(--rust-dk);border-bottom-color:var(--rust)}
.pws-tab[disabled]{color:#a59d8f;cursor:default}
.pws-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:var(--rust);color:#fff;border-radius:9px;font-size:11px;margin-left:7px;padding:0 5px;font-weight:700}
.pws-badge.warn{background:#B26B00}

.pws-surface{background:var(--sand);border:1px solid var(--line);border-top:0;padding:22px 26px;border-radius:0 0 14px 14px;margin-bottom:18px}
.pws-seg{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust-dk);font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pws-num{background:var(--rust);color:#fff;width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.pws-seg-desc{font-size:13px;color:#4a463e;margin:0 0 16px;max-width:680px}
.pws-watch{font-size:12px;color:#6B6961;font-style:italic;margin:0 0 14px;background:#efe6d2;border-radius:7px;padding:9px 12px;border:1px solid var(--line)}
.pws-empty{font-size:13px;color:#6B6961;background:#fff;border:1px dashed var(--line);border-radius:9px;padding:18px;text-align:center}

/* board */
.pws-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pws-col{background:#F4F0E6;border:1px solid var(--line);border-radius:9px;padding:9px 9px 11px;min-height:140px;transition:background .15s cubic-bezier(.2,.7,.2,1),box-shadow .15s cubic-bezier(.2,.7,.2,1)}
.pws-col.drop{background:#efe6d2;box-shadow:inset 0 0 0 2px var(--rust)}
.pws-col-h{display:flex;align-items:center;justify-content:space-between;margin:2px 3px 10px}
.pws-col-nm{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2A2E33}
.pws-col.review .pws-col-nm{color:#B26B00}
.pws-col.signed .pws-col-nm{color:#2f7d4f}
.pws-col-ct{font-size:11px;color:#6B6961;background:#EBE6DC;border-radius:10px;padding:1px 8px;font-weight:600;min-width:22px;text-align:center}
.pws-card{background:#fff;border:1px solid #d9d2c2;border-radius:8px;padding:10px 11px;margin-bottom:9px;box-shadow:0 1px 0 rgba(0,0,0,.03);position:relative;transition:box-shadow .15s cubic-bezier(.2,.7,.2,1),border-color .15s cubic-bezier(.2,.7,.2,1)}
.pws-card:last-child{margin-bottom:0}
.pws-card.mine{cursor:grab}
.pws-card.mine:hover{box-shadow:0 2px 8px rgba(26,22,15,.10);border-color:#c9bfa8}
.pws-card.mine::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--rust);opacity:.55}
.pws-card.pws-dragging{opacity:.4}
.pws-ghost{position:fixed;z-index:1200;pointer-events:none;box-shadow:0 12px 30px rgba(26,22,15,.28);transform:rotate(-1.5deg);background:#fff;border:1px solid #d9d2c2;border-radius:8px;padding:10px 11px}
.pws-card-ttl{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.34}
.pws-disc{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rust-dk);background:#f3e3d9;border-radius:4px;padding:2px 7px;margin-top:8px}
.pws-who{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;color:#6B6961}
.pws-card.mine .pws-who .pws-ava{background:var(--rust)}
.pws-foot{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.pws-chip{font-size:10.5px;font-weight:600;border-radius:5px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px}
.pws-chip.issue{background:#fbeec9;color:#7a4d00;border:1px solid #e6c878}
.pws-chip.signed{background:#e2efe6;color:#2f7d4f;border:1px solid #b6d6c1}
.pws-chip.dot{background:#EBE6DC;color:#6B6961}
.pws-mini{font-size:10.5px;font-weight:600;border-radius:6px;padding:4px 9px;border:1px solid var(--rust);background:var(--rust);color:#fff;cursor:pointer;font-family:inherit;transition:filter .12s cubic-bezier(.2,.7,.2,1),transform .08s cubic-bezier(.2,.7,.2,1)}
.pws-mini:hover{filter:brightness(1.06)}
.pws-mini:active{transform:translateY(1px)}
.pws-mini.ghost{background:transparent;color:var(--rust-dk);border-color:#d9b9a8}
.pws-mini.ghost:hover{background:#f3e3d9;filter:none}
.pws-mini[disabled]{opacity:.5;cursor:default;filter:none;transform:none}
.pws-addcard{font-size:12px;color:#6B6961;text-align:center;padding:8px;border:1px dashed var(--line);border-radius:7px;margin-top:9px;cursor:pointer;background:none;width:100%;font-family:inherit;transition:background .15s cubic-bezier(.2,.7,.2,1),color .15s cubic-bezier(.2,.7,.2,1),border-color .15s cubic-bezier(.2,.7,.2,1)}
.pws-addcard:hover{background:#efe6d2;color:var(--rust-dk);border-color:var(--rust-dk)}

/* issues */
.pws-iss-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.pws-iss-count{font-family:var(--font-mono);font-size:12px;color:#6B6961}
.pws-iss{background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:10px;display:flex;gap:13px;align-items:flex-start;transition:box-shadow .15s cubic-bezier(.2,.7,.2,1)}
.pws-iss:hover{box-shadow:0 2px 8px rgba(26,22,15,.07)}
.pws-iss.res{opacity:.62}
.pws-sev{width:7px;align-self:stretch;border-radius:4px;flex:0 0 7px}
.pws-sev.hi{background:#A12B1E}
.pws-sev.md{background:#B26B00}
.pws-sev.lo{background:#6B6961}
.pws-iss-body{flex:1;min-width:0}
.pws-iss-t{font-size:13px;font-weight:600;color:var(--ink)}
.pws-auto{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7a4d00;background:#fbeec9;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.pws-iss-mt{font-size:11.5px;color:#6B6961;margin-top:4px}
.pws-iss-mt b{color:#5a564d}
.pws-iss-ag{display:inline-block;font-size:10.5px;color:var(--rust-dk);background:#f3e3d9;border-radius:4px;padding:1px 7px;font-weight:600;margin-top:6px}
.pws-iss-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.pws-st2{font-size:10.5px;font-weight:700;border-radius:5px;padding:3px 9px;white-space:nowrap;cursor:pointer;border:0;font-family:inherit}
.pws-st2.open{background:#fbeec9;color:#7a4d00}
.pws-st2.res{background:#e2efe6;color:#2f7d4f}

/* raise-issue modal */
.pws-modal{position:fixed;inset:0;background:rgba(20,17,12,.5);display:flex;align-items:center;justify-content:center;z-index:1300;padding:20px}
.pws-modal-card{position:relative;background:#F4F0E6;border-radius:13px;width:min(440px,94vw);padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid var(--line)}
.pws-modal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:8px;font-size:22px;line-height:1;color:#6B6961;cursor:pointer;transition:background .15s,color .15s}
.pws-modal-x:hover{background:#E6E0D2;color:var(--ink)}
.pws-modal-h{margin:0 30px 4px 0;font-size:16px;font-weight:700;color:var(--ink)}
.pws-modal-s{font-size:12.5px;color:#6B6961;margin:0 0 16px}
.pws-field{margin-bottom:13px}
.pws-field label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#6B6961;font-weight:600;margin-bottom:5px}
.pws-field input,.pws-field textarea{width:100%;font-family:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.pws-field textarea{min-height:66px;resize:vertical}
.pws-sevrow{display:flex;gap:8px}
.pws-sevpick{flex:1;font-family:inherit;font-size:12px;font-weight:600;padding:8px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;color:#6B6961}
.pws-sevpick.on.hi{background:#f6dcd8;color:#A12B1E;border-color:#A12B1E}
.pws-sevpick.on.md{background:#fbeec9;color:#B26B00;border-color:#B26B00}
.pws-sevpick.on.lo{background:#EBE6DC;color:#2A2E33;border-color:#6B6961}
.pws-modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

@media (max-width:720px){
  .pws-board{grid-template-columns:1fr;gap:10px}
  .pws-meta{gap:18px}
  .pws-id{position:static;text-align:left;margin-bottom:10px}
  .pws-id-val{justify-content:flex-start}
}

/* ============================================================================
   ACCEPTANCE PANE, pac-*. The FAT/SAT/FIT test card: a dark instrument head
   with the kind badge, the URS reference and release amount, a criteria-met
   meter, the itemised criteria table, and the anti-deemed-acceptance footer.
   Locked palette inlined; brand tokens via var().
   ============================================================================ */
.pac-switch{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pac-sw{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:#2A2E33;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s cubic-bezier(.2,.7,.2,1),border-color .15s cubic-bezier(.2,.7,.2,1),color .15s cubic-bezier(.2,.7,.2,1)}
.pac-sw:hover{border-color:var(--rust-dk)}
.pac-sw.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pac-sw-n{font-size:11.5px;color:var(--rust-bright);font-weight:700}
.pac-sw.on .pac-sw-n{color:#F5C518}
.pac-lock{font-size:11px;color:#9a9183;font-weight:600;font-style:italic}

.pac-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(26,22,15,.06)}
.pac-card-head{background:var(--ink);color:var(--cream);padding:18px 22px 16px;position:relative}
.pac-badge{display:inline-block;background:#F5C518;color:#1a1500;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:5px;padding:3px 9px}
.pac-title{font-size:19px;font-weight:700;color:#fff;margin:9px 0 3px;letter-spacing:-.01em}
.pac-sub{font-size:12.5px;color:#cabfae}
.pac-urs{color:var(--rust-bright);font-weight:600}
.pac-sub b{color:#fff}
.pac-meter-wrap{position:absolute;top:18px;right:22px;width:190px;text-align:right}
.pac-metric{font-size:25px;font-weight:800;color:#fff;line-height:1}
.pac-metric span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#948c7f;font-weight:600;margin-top:3px}
.pac-meter{height:6px;background:#3a3f45;border-radius:3px;margin-top:9px;overflow:hidden}
.pac-meter-fill{height:100%;background:#2f9d57;border-radius:3px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.pac-strail{display:flex;align-items:center;gap:9px;margin-top:14px}
.pac-strail-st{font-size:11px;font-weight:600;color:#7d756a;letter-spacing:.02em}
.pac-strail-st.on{color:#F5C518}
.pac-strail-st.warn{color:#e09a3e}
.pac-strail-sep{color:#54504a;font-size:12px}

.pac-tbl{width:100%;border-collapse:collapse;background:#F4F0E6}
.pac-tbl thead th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6B6961;font-weight:700;padding:10px 22px;border-bottom:1px solid var(--line);background:#EBE6DC}
.pac-tbl thead th:last-child{text-align:right}
.pac-row{border-bottom:1px solid #e3dccc}
.pac-row.pass{background:rgba(47,125,79,.05)}
.pac-row.fail{background:rgba(161,43,30,.05)}
.pac-crit{padding:12px 22px;vertical-align:top}
.pac-crit-code{font-family:var(--font-mono);font-size:10.5px;color:#8a8276;letter-spacing:.04em;margin-bottom:2px}
.pac-yours{color:var(--rust-dk);font-weight:700}
.pac-crit-ttl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.34}
.pac-crit-req{font-size:11.5px;color:#6B6961;margin-top:3px}
.pac-evcell{padding:12px 16px;vertical-align:top;min-width:170px}
.pac-ev{display:inline-block;font-family:var(--font-mono);font-size:11px;color:var(--rust-dk);background:#f3e3d9;border-radius:5px;padding:3px 9px}
.pac-evby{display:block;font-size:11px;color:#8a8276;margin-top:4px}
.pac-ev-none{font-size:11.5px;color:#a59d8f;font-style:italic}
.pac-evin{width:100%;font-family:inherit;font-size:12px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.pac-stcell{padding:12px 22px;vertical-align:top;text-align:right;white-space:nowrap}
.pac-status{font-size:11.5px;font-weight:700;border-radius:6px;padding:4px 11px;display:inline-block}
.pac-status.pass{background:#e2efe6;color:#2f7d4f}
.pac-status.fail{background:#f6dcd8;color:#A12B1E}
.pac-status.pending{background:#EBE6DC;color:#6B6961}
.pac-setrow{display:inline-flex;gap:5px}
.pac-set{font-family:inherit;font-size:10.5px;font-weight:700;border-radius:6px;padding:4px 9px;border:1px solid var(--line);background:#fff;color:#6B6961;cursor:pointer;transition:filter .12s cubic-bezier(.2,.7,.2,1)}
.pac-set:hover{filter:brightness(.98)}
.pac-set.pass.on{background:#2f7d4f;color:#fff;border-color:#2f7d4f}
.pac-set.fail.on{background:#A12B1E;color:#fff;border-color:#A12B1E}
.pac-set.pending.on{background:#6B6961;color:#fff;border-color:#6B6961}
.pac-set[disabled]{opacity:.5;cursor:default}
.pac-empty-row{padding:18px 22px;font-size:12.5px;color:#6B6961;text-align:center;background:#fff}
.pac-addrow td{padding:10px 22px;background:#fff}

.pac-foot{padding:15px 22px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line)}
.pac-anti{font-size:11.5px;color:#7a4d00;background:#fbeec9;border:1px solid #e6c878;border-radius:8px;padding:9px 12px;flex:1;min-width:240px;line-height:1.45}
.pac-foot-act{display:flex;align-items:center;gap:9px;flex:none}
.pac-state{font-size:12px;font-weight:700;border-radius:7px;padding:7px 13px;background:#EBE6DC;color:#6B6961}
.pac-state.ok{background:#e2efe6;color:#2f7d4f}
.pac-state.warn{background:#fbeec9;color:#B26B00}
.pac-retest{font-size:11.5px;color:#8a8276;font-style:italic;margin:14px 2px 0}

@media (max-width:720px){
  .pac-meter-wrap{position:static;width:auto;text-align:left;margin-top:12px}
  .pac-metric{font-size:21px}
  .pac-meter{max-width:200px}
  .pac-tbl,.pac-tbl thead,.pac-tbl tbody,.pac-tbl tr,.pac-tbl td,.pac-tbl th{display:block}
  .pac-tbl thead{display:none}
  .pac-row{padding:6px 0}
  .pac-crit,.pac-evcell,.pac-stcell{padding:6px 16px;text-align:left}
  .pac-stcell{text-align:left}
}

/* Milestone row link directing to the Acceptance tab for FAT/SAT tests. */
.pdt-ms-acceptlink{font-size:12px;font-weight:600;color:var(--rust-dk);background:#f3e3d9;border:1px solid #e3c9bb;border-radius:7px;padding:5px 11px;cursor:pointer;font-family:inherit;transition:background .15s cubic-bezier(.2,.7,.2,1)}
.pdt-ms-acceptlink:hover{background:#ecd8cb}

/* ============================================================================
   HOW IT WORKS (comprehensive marketplace explainer), pages/how-it-works.js
   Ported from the approved hiw-D mockup and fitted to the middle column. All
   rules are scoped under .hiw-page; the four warm/dark tokens the design uses
   are declared on the wrapper so nothing leaks into the rest of the site.
   Headings use --font-serif (Fraunces) as in the mockup; the shell chrome
   (rails, nav strip) is untouched.
   ============================================================================ */
.hiw-page{
  --paper:#F4F0E6; --bone:#EBE6DC; --steel:#23272C; --amber:#B26B00;
  --hiw-mute:#6B6961;
  color:var(--ink);
}
.hiw-page .hiw-ey{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.hiw-page b{font-weight:600}

/* hero */
.hiw-hero{padding:4px 0 8px}
/* S58 uniformity: this was the only all-serif h1 on the platform.
   DESIGN-TYPOGRAPHY §1: serif is for emphasis INSIDE a heading, so the
   heading is display type and the em keeps the serif italic accent, the
   same construction as every other h1. */
.hiw-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,4vw,50px);line-height:1.03;letter-spacing:-.02em;margin:16px 0 0;max-width:15ch}
.hiw-hero h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--rust)}
.hiw-sub{font-size:17px;line-height:1.6;color:var(--hiw-mute);max-width:62ch;margin:22px 0 0}
.hiw-sub b{color:var(--ink)}
.hiw-act{display:flex;gap:13px;align-items:center;margin-top:28px;flex-wrap:wrap}
.hiw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;background:var(--rust);color:#fff;padding:12px 20px;min-height:44px;border-radius:0;cursor:pointer;text-decoration:none}
.hiw-btn:hover{background:var(--rust-dk)}
/* hero product cards: what each product is, and why it pays for each side */
.hiw-hprods{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.hiw-hcard{display:block;border:1px solid var(--line);border-left:3px solid var(--rust);border-radius:14px;background:var(--sand);padding:22px 24px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
a.hiw-hcard:hover{border-color:var(--rust);transform:translateY(-2px)}
.hiw-hcard .hk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:700}
.hiw-hcard h3{font-family:var(--font-serif);font-weight:580;font-size:22px;line-height:1.14;letter-spacing:-.01em;margin:10px 0 14px}
.hiw-hcard h3 em{font-style:italic;color:var(--rust)}
.hiw-hcard .hben{display:flex;gap:10px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--hiw-mute);margin-top:7px}
.hiw-hcard .hben .who{flex:none;width:76px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
.hiw-hcard .hgo{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:12px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .15s,border-color .15s}
a.hiw-hcard:hover .hgo{color:var(--rust);border-color:var(--rust)}
.hiw-hcard.is-next{border-left-color:var(--line);background:var(--bone)}

/* generic section */
.hiw-sec{padding:48px 0}
.hiw-sech{font-family:var(--font-serif);font-weight:560;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;line-height:1.08;margin:12px 0 0}
.hiw-sech em{font-style:italic;color:var(--rust)}
.hiw-sintro{font-size:16px;color:var(--hiw-mute);max-width:64ch;margin:14px 0 0}

/* model */
.hiw-model-row{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:center;margin-top:26px}
.hiw-model-copy p{font-size:15.5px;line-height:1.64;color:var(--hiw-mute);margin:0 0 12px}
.hiw-model-copy p b{color:var(--ink)}
.hiw-diagram{border:1px solid var(--line);border-radius:14px;background:var(--sand);padding:24px 22px}
.hiw-dgnode{border:1px solid var(--line);border-radius:9px;background:#fff;padding:12px 14px;text-align:center}
.hiw-dgnode.mid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.hiw-dgnode .t{font-family:var(--font-serif);font-weight:600;font-size:15.5px}
.hiw-dgnode .s{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;color:var(--hiw-mute);margin-top:3px;text-transform:uppercase}
.hiw-dgnode.mid .s{color:rgba(239,233,220,.6)}
.hiw-dglink{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;color:var(--rust)}
.hiw-dglink .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.hiw-dglink .arr{font-size:16px;line-height:1}
.hiw-dgfoot{font-family:var(--font-mono);font-size:10.5px;color:var(--hiw-mute);text-align:center;margin-top:13px;border-top:1px dashed var(--line);padding-top:11px;line-height:1.6}
.hiw-dgfoot b{color:var(--rust)}

/* product block */
.hiw-prod{padding:46px 0;border-top:1px solid var(--line)}
.hiw-ptag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);display:flex;align-items:center;gap:9px}
.hiw-pill{background:var(--amber);color:#fff;border-radius:3px;font-size:9px;padding:2px 7px;letter-spacing:.05em}
.hiw-ph{font-family:var(--font-serif);font-weight:560;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;line-height:1.07;margin:11px 0 0}
.hiw-ph em{font-style:italic;color:var(--rust)}
.hiw-plead{font-size:15.5px;line-height:1.6;color:var(--hiw-mute);max-width:68ch;margin:13px 0 0}
.hiw-pfee{display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--ink);background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:8px 13px;margin-top:18px}
.hiw-pfee b{color:var(--rust)}

/* contract two-col */
.hiw-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.hiw-side{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 22px}
.hiw-sk{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hiw-mute);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hiw-sk b{color:var(--rust);font-weight:700}
.hiw-feat{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:flex-start}
.hiw-feat:last-child{border-bottom:0}
.hiw-feat .fi{color:var(--rust);flex:none;font-family:var(--font-mono);font-size:13px;line-height:1.5}
.hiw-feat .ft{font-weight:600;font-size:14px}
.hiw-feat .fp{font-size:12.5px;color:var(--hiw-mute);line-height:1.5}

/* permanent tracker */
.hiw-trk{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:28px 0 0}
.hiw-stg{position:relative;text-align:center;padding:0 6px}
.hiw-stg .bar{height:4px;background:var(--line);border-radius:3px;position:relative;margin-bottom:16px}
.hiw-stg .bar::before{content:'';position:absolute;inset:0;border-radius:3px;background:var(--rust);width:0}
.hiw-stg.done .bar::before{width:100%}
.hiw-stg.now .bar::before{width:55%}
.hiw-stg .dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--hiw-mute);margin:-31px auto 12px;position:relative;z-index:2}
.hiw-stg.done .dot,.hiw-stg.now .dot{border-color:var(--rust);background:var(--rust);color:#fff}
.hiw-stg h4{font-family:var(--font-serif);font-weight:620;font-size:15px;margin:0 0 4px}
.hiw-stg p{font-size:12px;line-height:1.42;color:var(--hiw-mute);margin:0}
.hiw-permfoot{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:30px}
.hiw-permnote{background:var(--sand);border:1px solid var(--line);border-radius:11px;padding:18px 20px}
.hiw-permnote .nk{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);margin-bottom:7px}
.hiw-permnote h4{font-family:var(--font-serif);font-weight:620;font-size:16.5px;margin:0 0 5px}
.hiw-permnote p{font-size:13px;line-height:1.55;color:var(--hiw-mute);margin:0}

/* projects flow + protections */
.hiw-flow{display:flex;align-items:stretch;gap:0;margin:26px 0 0;flex-wrap:nowrap}
.hiw-fstep{flex:1;min-width:0;border:1px solid var(--line);background:#fff;border-radius:10px;padding:14px 11px;text-align:center}
.hiw-fstep .fn{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--rust);text-transform:uppercase}
.hiw-fstep .fh{font-family:var(--font-serif);font-weight:620;font-size:14.5px;margin-top:5px;line-height:1.15}
.hiw-fstep .fd{font-size:11px;color:var(--hiw-mute);line-height:1.38;margin-top:4px}
.hiw-farrow{display:flex;align-items:center;color:var(--rust);font-size:15px;padding:0 4px;flex:none}
.hiw-protect{background:var(--steel);color:#EDE7DA;border-radius:16px;padding:30px 28px;margin-top:28px}
.hiw-protect .hiw-pk{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#E0A88F}
.hiw-protect h3{font-family:var(--font-serif);font-weight:560;font-size:24px;color:#fff;letter-spacing:-.01em;margin:10px 0 0}
.hiw-protect h3 em{font-style:italic;color:#E0A88F}
.hiw-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:22px}
.hiw-pr{display:flex;gap:12px;align-items:flex-start}
.hiw-pr .pn{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#E0A88F;flex:none;border:1px solid rgba(224,168,143,.4);border-radius:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.hiw-pr h4{font-family:var(--font-serif);font-weight:620;font-size:15.5px;color:#fff;margin:0 0 3px}
.hiw-pr p{font-size:12.5px;line-height:1.5;color:rgba(237,231,218,.82);margin:0}

/* proximity */
.hiw-prox{background:var(--paper);border-radius:16px;padding:36px 30px;margin:48px 0}
.hiw-prox-row{display:grid;grid-template-columns:1fr 240px;gap:34px;align-items:center;margin-top:6px}
.hiw-prox-copy p{font-size:15.5px;line-height:1.64;color:var(--hiw-mute);margin:12px 0 0}
.hiw-prox-copy p:first-child{margin-top:0}
.hiw-prox-copy p b{color:var(--ink)}
.hiw-radar{display:flex;justify-content:center}
.hiw-radar-svg{width:100%;max-width:240px;height:auto}

/* knowledge layer */
.hiw-know-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.hiw-know{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 21px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.hiw-know:hover{border-color:var(--rust);transform:translateY(-2px)}
.hiw-know .kk{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--rust)}
.hiw-know h3{font-family:var(--font-serif);font-weight:640;font-size:21px;margin:9px 0 0}
.hiw-know p{font-size:13.5px;line-height:1.54;color:var(--hiw-mute);margin:8px 0 0}
.hiw-know .kstat{font-family:var(--font-mono);font-size:11px;color:var(--ink);margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.hiw-know .kstat b{color:var(--rust)}

/* audiences */
.hiw-aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:26px}
.hiw-aud{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:19px 21px;background:var(--sand);transition:border-color .15s,transform .15s}
.hiw-aud:hover{border-color:var(--rust);transform:translateY(-2px)}
.hiw-aud .tag{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--rust);border:1px solid var(--line);border-radius:6px;padding:6px 9px;flex:none}
.hiw-aud h3{font-family:var(--font-serif);font-weight:620;font-size:17.5px;margin:0 0 4px}
.hiw-aud p{font-size:13px;line-height:1.54;color:var(--hiw-mute);margin:0}
.hiw-aud .go{font-family:var(--font-mono);font-size:11.5px;color:var(--rust);margin-top:9px;display:inline-block}

/* fees panel */
.hiw-fees-panel{background:var(--steel);color:#EDE7DA;border-radius:16px;padding:38px 32px;margin:48px 0}
.hiw-fees-panel .hiw-ey{color:#E0A88F}
.hiw-fees-panel .hiw-sech{color:#fff}
.hiw-fees-panel .hiw-sintro{color:rgba(237,231,218,.72)}
.hiw-fee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px}
.hiw-fee-card{border:1px solid rgba(237,231,218,.18);border-radius:11px;padding:20px 20px;background:rgba(255,255,255,.03)}
.hiw-fee-card .ft{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#E0A88F}
.hiw-fee-card .fv{font-family:var(--font-serif);font-weight:620;font-size:28px;color:#fff;margin:8px 0 2px}
.hiw-fee-card .fv small{font-size:14px;font-weight:500;color:rgba(237,231,218,.7)}
.hiw-fee-card .fd{font-size:12.5px;line-height:1.52;color:rgba(237,231,218,.78);margin-top:6px}
.hiw-fee-note{font-family:var(--font-mono);font-size:11.5px;color:rgba(237,231,218,.62);margin-top:20px;line-height:1.7}
.hiw-fee-note b{color:#fff}

/* close */
.hiw-close{text-align:center;padding:56px 0 8px}
.hiw-close h2{font-family:var(--font-serif);font-weight:560;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.012em;line-height:1.06;margin:12px auto 0;max-width:18ch}
.hiw-close h2 em{font-style:italic;color:var(--rust)}
.hiw-close p{font-size:16px;color:var(--hiw-mute);max-width:54ch;margin:18px auto 26px}

/* S49-DESIGN: the how-it-works refresh, the three-moves strip, chapter
   treatment on the product sections, and the fee strap as a foot bar. */
.hiw-moves{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bone)}
.hiw-move{display:flex;gap:14px;align-items:flex-start}
.hiw-move .mv-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--font-serif);font-weight:620;font-size:16px;display:flex;align-items:center;justify-content:center}
.hiw-move .mv-h{font-family:var(--font-serif);font-weight:600;font-size:16.5px;letter-spacing:-.005em}
.hiw-move .mv-d{font-size:13px;line-height:1.55;color:var(--hiw-mute);margin-top:4px}
.hiw-ch{position:relative;border:1px solid var(--line);border-left:3px solid var(--rust);border-radius:16px;background:var(--sand);padding:34px 34px 26px;margin:26px 0;overflow:hidden}
.hiw-ch::after{content:attr(data-ch);position:absolute;top:-22px;right:8px;font-family:var(--font-serif);font-weight:640;font-size:150px;line-height:1;color:var(--ink);opacity:.05;pointer-events:none}
.hiw-ch .hiw-pfee{display:block;margin:26px -34px -26px;padding:15px 34px;border-top:1px solid var(--line);background:var(--bone);font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--ink)}
.hiw-ch .hiw-pfee b{color:var(--rust)}
.hiw-aud-sec{padding-top:56px}
@media (max-width:860px){
  .hiw-moves{grid-template-columns:1fr;gap:20px;padding:22px 18px}
  .hiw-ch{padding:26px 20px 20px}
  .hiw-ch .hiw-pfee{margin:22px -20px -20px;padding:13px 20px}
  .hiw-ch::after{font-size:96px;top:-12px}
}

/* stack everything once the middle column gets tight (rails present down to 880px) */
@media (max-width:1180px){
  .hiw-model-row,.hiw-two,.hiw-permfoot,.hiw-pgrid,.hiw-prox-row,.hiw-know-grid,.hiw-aud-grid,.hiw-fee-grid,.hiw-hprods{grid-template-columns:1fr}
  .hiw-model-row{gap:22px}
  .hiw-radar-svg{max-width:260px}
  .hiw-trk{grid-template-columns:1fr;gap:14px}
  .hiw-trk .bar{display:none}
  .hiw-stg .dot{margin:0 auto 10px}
  .hiw-flow{flex-direction:column}
  .hiw-farrow{transform:rotate(90deg);justify-content:center;padding:4px 0}
}


/* ----------------------------------------------------------------------------
   Projects: per-activity scope declaration + functional-safety role matrix
   (de-risking, Pass 1 + Pass 2). These render INSIDE the dark forming panel
   (.pdt-panel, --ink), beside the share setter (.pdt-myshare) and the gate
   (.pdt-resp), so they are styled translucent-on-dark with cream text and rust
   accents, matching those neighbours. The activity warranty reveals on
   selection via CSS :has() so no re-render is needed. Tokens: --cream, --rust,
   --rust-bright, --safety-yellow.
   ---------------------------------------------------------------------------- */
.pdt-scope { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 13px 14px; margin: 14px 0; }
.pdt-scope-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(239,233,220,.7); margin-bottom: 6px; }
.pdt-scope-lede { font-size: 12px; line-height: 1.5; color: rgba(239,233,220,.7); margin: 0 0 13px; }
.pdt-scope-opt { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; margin-bottom: 7px; cursor: pointer; background: rgba(0,0,0,.18); transition: border-color .14s cubic-bezier(.2,.7,.2,1), background .14s cubic-bezier(.2,.7,.2,1); }
.pdt-scope-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdt-scope-opt:has(input:checked) { border-color: rgba(212,90,44,.7); background: rgba(184,67,29,.16); }
.pdt-scope-box { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.35); flex: none; margin-top: 2px; position: relative; transition: background .14s, border-color .14s; }
.pdt-scope-opt:has(input:checked) .pdt-scope-box { border-color: var(--rust-bright, #D45A2C); background: var(--rust-bright, #D45A2C); }
.pdt-scope-opt:has(input:checked) .pdt-scope-box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pdt-scope-opt-b { flex: 1; min-width: 0; }
.pdt-scope-opt-t { display: block; font-size: 13px; font-weight: 600; color: var(--cream); line-height: 1.3; }
.pdt-scope-warr { display: none; font-family: var(--font-mono); font-size: 11px; color: rgba(239,233,220,.82); margin-top: 8px; line-height: 1.45; padding: 7px 9px; background: rgba(184,67,29,.18); border: 1px solid rgba(184,67,29,.4); border-radius: 4px; }
.pdt-scope-opt:has(input:checked) .pdt-scope-warr { display: block; }
.pdt-scope-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(239,233,220,.55); margin: 15px 0 8px; }
.pdt-scope-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.pdt-scope-chip { display: inline-flex; align-items: center; cursor: pointer; }
.pdt-scope-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdt-scope-chip span { font-family: var(--font-mono); font-size: 11px; padding: 5px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; color: rgba(239,233,220,.8); background: rgba(0,0,0,.18); transition: background .14s, border-color .14s, color .14s; }
.pdt-scope-chip:has(input:checked) span { border-color: var(--rust-bright, #D45A2C); background: var(--rust-bright, #D45A2C); color: #fff; }
.pdt-scope-other { width: 100%; font-family: var(--font-display); font-size: 13px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; margin-bottom: 4px; color: #fff; background: rgba(0,0,0,.25); }
.pdt-scope-other::placeholder { color: rgba(239,233,220,.4); }
.pdt-scope-excl { border: 1px solid rgba(184,67,29,.4); background: rgba(184,67,29,.12); border-radius: 6px; padding: 11px 13px; margin: 13px 0; }
.pdt-scope-excl-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--rust-bright, #D45A2C); margin-bottom: 5px; }
.pdt-scope-excl p { font-size: 12px; color: rgba(239,233,220,.8); line-height: 1.5; margin: 0; }
/* Pass 2: the functional-safety role group inside the dark gate (.pdt-resp). */
.pdt-resp-grp { border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 2px 11px 7px; margin-top: 7px; background: rgba(0,0,0,.12); }
.pdt-resp-grp-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(239,233,220,.5); margin: 9px 0 2px; }
.pdt-resp-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: var(--cream); background: rgba(0,0,0,.22); white-space: nowrap; justify-self: start; }

/* ============================================================================
   Pass 3a: snag attribution + diagnosis holding-state, and the aftercare panel.
   On the light workspace surface (--sand); snag rows are white cards.
   ============================================================================ */
/* attribution chips on a snag row */
.pws-iss-tline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pws-iss.diag { border-color: #e6c98a; background: #fffdf6; }
.pws-iss.disp { border-color: #e0a59c; }
.pws-iss.vend { border-color: #bcc6d0; }
.pws-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pws-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pws-cat.spec { background: #f3e3d9; color: #8F3416; } .pws-cat.spec::before { background: #B8431D; }
.pws-cat.vendor { background: #e3e6ea; color: #2A2E33; } .pws-cat.vendor::before { background: #54606b; }
.pws-cat.buyer { background: #e9e9e1; color: #55524a; } .pws-cat.buyer::before { background: #8a8678; }
.pws-cat.legacy { background: #ece6d6; color: #6e5a36; } .pws-cat.legacy::before { background: #b08a3e; }
.pws-cat.obs { background: #EBE6DC; color: #6B6961; } .pws-cat.obs::before { background: #b8b2a4; }
.pws-diag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #fbeec9; color: #7a4d00; display: inline-flex; align-items: center; gap: 5px; }
.pws-diag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d99a00; }
.pws-disp { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #f6dcd8; color: #A12B1E; }
.pws-esc { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #ece3f8; color: #5b3ca0; display: inline-flex; align-items: center; gap: 5px; }
.pws-esc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7a5bc0; }
.pws-own { font-size: 11px; color: #6B6961; margin-top: 5px; line-height: 1.5; }
.pws-own b { color: #5a564d; }
.pws-rowacts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.pws-mini { font-family: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: #5a564d; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.pws-mini:disabled { opacity: .55; cursor: default; }
.pws-mini.rust { border-color: #e0bda9; color: #8F3416; background: #fdf6f1; }
.pws-mini.disp { border-color: #e0a59c; color: #A12B1E; background: #fdf4f2; }
.pws-mini.viol { border-color: #cdbce6; color: #5b3ca0; background: #f7f3ff; }
.pws-mini.steel { border-color: #bcc6d0; color: #2A2E33; background: #f4f6f8; cursor: default; }
.pws-clear { font-family: inherit; font-size: 11px; font-weight: 600; color: #8a8678; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.pws-link { font-size: 11px; font-weight: 600; color: #8F3416; text-decoration: none; border-bottom: 1px solid #e0bda9; cursor: pointer; }
/* category legend */
.pws-legend { display: flex; gap: 7px 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 13px; background: #efe9da; border: 1px solid #e3dccb; border-radius: 8px; }
.pws-legend .lg { font-family: var(--font-mono); font-size: 10px; color: #6B6961; display: inline-flex; align-items: center; gap: 5px; }
.pws-legend .lg b { color: #4a463e; font-weight: 600; }
.pws-legend .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pws-legend-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8a8678; width: 100%; margin-bottom: 3px; }
/* diagnose modal extras (reuses .pws-modal) */
.pws-diag-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.pws-diag-opt { font-family: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: #5a564d; border-radius: 8px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pws-diag-opt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c8c0ae; }
.pws-diag-opt.on { border-color: var(--rust); color: var(--ink); background: #fdf6f1; }
.pws-diag-opt.spec.on::before { background: #B8431D; } .pws-diag-opt.vendor.on::before { background: #54606b; }
.pws-diag-opt.buyer.on::before { background: #8a8678; } .pws-diag-opt.legacy.on::before { background: #b08a3e; }
.pws-diag-opt.obs.on::before { background: #b8b2a4; }
.pws-diag-hint { font-size: 11.5px; color: #6B6961; margin: 8px 0 0; line-height: 1.5; }
/* aftercare panel on the Overview */
.pws-ac { background: #fff; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 18px; }
.pws-ac-h { background: #22272c; color: var(--cream); padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; }
.pws-ac-h .t { font-size: 14px; font-weight: 700; }
.pws-ac-h .e { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--safety-yellow); }
.pws-ac-body { padding: 15px 17px; }
.pws-ac-cl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.pws-ac-cl-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8a8678; }
.pws-ac-cl-rem { font-family: var(--font-mono); font-size: 12px; color: #2f7d4f; font-weight: 600; }
.pws-ac-cl-rem.exp { color: #8a8678; }
.pws-ac-bar { height: 7px; background: #ece6d6; border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.pws-ac-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #B8431D, #D45A2C); border-radius: 5px; }
.pws-ac-dates { display: flex; justify-content: space-between; font-size: 11.5px; color: #5a564d; margin-bottom: 14px; }
.pws-ac-dates b { color: var(--ink); }
.pws-ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 560px) { .pws-ac-grid { grid-template-columns: 1fr; } }
.pws-ac-cell { background: #f7f3ea; border: 1px solid #e8e2d2; border-radius: 8px; padding: 11px 13px; }
.pws-ac-cell .ch { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8a8678; margin-bottom: 5px; }
.pws-ac-cell .cv { font-size: 13px; color: var(--ink); line-height: 1.5; }
.pws-ac-cell .cv b { font-weight: 700; }
.pws-ac-cell .cmuted { font-size: 11.5px; color: #6B6961; margin-top: 4px; line-height: 1.5; }
.pws-ac-snaglink { font-size: 12px; font-weight: 600; color: #8F3416; text-decoration: none; cursor: pointer; }
.pws-ac-note { margin-top: 11px; font-size: 12px; color: #5a564d; line-height: 1.55; border-left: 3px solid var(--safety-yellow); background: #fdf8e8; padding: 10px 13px; border-radius: 0 6px 6px 0; }
.pws-ac-note.dmg { border-left-color: #A12B1E; background: #fdf3f1; }
.pws-ac-note b { color: var(--ink); }

/* ============================================================================
   Pass 3b: Teams and bids broken into per-team cards (the workspace shape:
   dark facts-header + light body of demarcated sub-cards), plus the insurance
   and value-at-risk card. Replaces the single dark .pdt-panel list.
   ============================================================================ */
.pto-sec { margin: 0; }
.pto-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 16px; }
.pto-sec-h .t { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--ink); }
.pto-sec-h .c { font-family: var(--font-mono); font-size: 11px; color: #8a8678; }
.pto-empty { color: #6B6961; font-size: 13px; line-height: 1.55; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }

.pto-card { border-radius: 13px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(42,46,51,.12); border: 1px solid var(--line); }
.pto-card.live { border-color: rgba(245,197,24,.5); }
.pto-hd { background: var(--ink); padding: 16px 19px; display: flex; align-items: center; gap: 14px; }
.pto-card.live .pto-hd { box-shadow: inset 4px 0 0 var(--safety-yellow); padding-left: 22px; }
.pto-hd-main { flex: 1; min-width: 0; }
.pto-hd-name { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.pto-hd-meta { font-family: var(--font-mono); font-size: 11.5px; color: rgba(239,233,220,.6); margin-top: 3px; }
.pto-hd-meta b { color: var(--safety-yellow); font-weight: 600; }
.pto-hd-disc { font-family: var(--font-mono); font-size: 10px; color: rgba(239,233,220,.42); margin-top: 5px; letter-spacing: .02em; }
.pto-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; white-space: nowrap; font-weight: 600; }
.pto-tag.sub { background: rgba(123,216,143,.18); color: #9fe3b3; border: 1px solid rgba(123,216,143,.4); }
.pto-tag.form { background: rgba(255,255,255,.08); color: rgba(239,233,220,.6); }
.pto-tag.no { background: rgba(255,255,255,.06); color: rgba(239,233,220,.42); }

.pto-body { background: var(--sand); padding: 17px 18px; display: flex; flex-direction: column; gap: 12px; }
.pto-summary { font-size: 13px; line-height: 1.55; color: #3f3b33; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--rust); border-radius: 0 8px 8px 0; padding: 11px 14px; margin: 0; }
.pto-sub { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; }
.pto-sub-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #8a8678; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.pto-sub-h .hr { color: #b08a3e; font-weight: 600; }
.pto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .pto-row { grid-template-columns: 1fr; } }

.pto-split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pto-split li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink); padding-bottom: 7px; border-bottom: 1px solid #ece6d6; }
.pto-split li:last-child { border-bottom: 0; padding-bottom: 0; }
.pto-sp-name { font-weight: 600; }
.pto-sp-disc { font-family: var(--font-mono); font-size: 10px; color: #8a8678; margin-left: 7px; font-weight: 400; }
.pto-sp-share { font-variant-numeric: tabular-nums; font-weight: 600; }
.pto-sp-fee { font-family: var(--font-mono); font-size: 10.5px; color: #8F3416; white-space: nowrap; }

.pto-resp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #4a463e; }
.pto-resp li { display: flex; justify-content: space-between; gap: 10px; }
.pto-resp .k { color: #8a8678; }
.pto-resp .v { font-weight: 600; color: var(--ink); text-align: right; }
.pto-resp .v.warn { color: #8F3416; }

.pto-var { font-size: 12px; color: #4a463e; }
.pto-var-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid #ece6d6; }
.pto-var-top .lab { font-size: 11.5px; color: #8a8678; }
.pto-var-top .fig { font-size: 15px; font-weight: 800; color: var(--ink); }
.pto-ins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pto-ins li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; font-size: 12px; }
.pto-ins .n { color: var(--ink); font-weight: 600; }
.pto-ins .lim { font-family: var(--font-mono); font-size: 11px; color: #5a564d; }
.pto-ins .ok { color: #2f7d4f; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pto-ins .bad { color: #A12B1E; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pto-ins .na { color: #8a8678; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pto-ins-foot { margin-top: 9px; padding-top: 9px; border-top: 1px solid #ece6d6; font-size: 11.5px; color: #2f7d4f; line-height: 1.5; }
.pto-ins-foot.warn { color: #8F3416; }
.pto-ins-foot.muted { color: #6B6961; }

.pto-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pto-ms li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink); }
.pto-ms-main { display: flex; flex-direction: column; gap: 3px; }
.pto-ms-t { font-weight: 600; }
.pto-kind { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; background: #EBE6DC; color: #6e5a36; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.pto-ms-crit { font-size: 11px; color: #6B6961; line-height: 1.45; }
.pto-ms-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.pto-bom { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pto-bom li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #4a463e; }
.pto-procure { font-size: 12px; color: #6B6961; line-height: 1.55; }

.pto-fee { background: #fdf6e3; border: 1px solid #ecd99a; border-radius: 9px; padding: 12px 15px; font-size: 13px; color: #5a4a1e; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pto-fee b { color: var(--ink); font-weight: 800; }
.pto-fee .tot { font-size: 16px; }
.pto-acts { display: flex; gap: 10px; justify-content: flex-end; padding-top: 2px; }
.pto-emptybody { background: var(--sand); padding: 13px 18px; font-size: 12.5px; color: #6B6961; font-style: italic; }
.pto-foot-note { font-size: 12.5px; line-height: 1.55; color: #5a564d; background: #f7f3ea; border: 1px solid #e8e2d2; border-left: 3px solid var(--rust); border-radius: 0 6px 6px 0; padding: 11px 14px; margin-top: 4px; }
.pto-foot-note b { color: var(--ink); }
.pto-acceptack { background: #fff; border: 1px solid #ecd99a; border-radius: 9px; padding: 12px 14px; }
.pto-acceptack label { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #4a463e; cursor: pointer; }
.pto-acceptack input { margin-top: 2px; flex: 0 0 auto; }
.pto-acceptack strong { color: var(--ink); }

/* ============================================================================
   Pass 4 (Gap 6): the substantial-modification re-screen checkpoint panel,
   shown on the Overview when the project is a substantial modification.
   ============================================================================ */
.pws-rs { background: #fff; border: 1px solid #e0a59c; border-radius: 11px; overflow: hidden; margin-bottom: 18px; }
.pws-rs.ok { border-color: var(--line); }
.pws-rs-h { background: #6e1f12; color: #fbe7e2; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; }
.pws-rs.ok .pws-rs-h { background: #22272c; color: var(--cream); }
.pws-rs-h .t { font-size: 14px; font-weight: 700; }
.pws-rs-h .e { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #f0b3a8; }
.pws-rs.ok .pws-rs-h .e { color: var(--safety-yellow); }
.pws-rs-body { padding: 15px 17px; }
.pws-rs-lede { font-size: 12.5px; line-height: 1.6; color: #4a463e; margin: 0 0 13px; }
.pws-rs-out { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #8F3416; font-weight: 600; margin-bottom: 12px; }
.pws-rs-out .dot { width: 9px; height: 9px; border-radius: 50%; background: #d6873f; flex: none; }
.pws-rs-done { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #2f7d4f; margin-bottom: 12px; line-height: 1.5; }
.pws-rs-done .tick { color: #2f7d4f; font-weight: 700; }
.pws-rs-done b { color: var(--ink); }
.pws-rs-ack { font-family: inherit; font-size: 13px; font-weight: 700; background: var(--rust); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.pws-rs-ack:disabled { opacity: .6; cursor: default; }
.pws-rs-reopen { font-family: inherit; font-size: 12px; font-weight: 600; background: #fff; color: #8F3416; border: 1px solid #e0bda9; border-radius: 7px; padding: 7px 13px; cursor: pointer; }
.pws-rs-reopen:disabled { opacity: .6; cursor: default; }
.pws-rs-wait { font-size: 12px; color: #8a8678; font-style: italic; }
/* the substantial-mod line in the bid responsibilities card */
.pto-resp .sm { color: #8F3416; font-weight: 600; }

/* ============================================================================
   Pass 4 (Gap 7): the technical-file / engagement record. A consolidated,
   print-friendly view, mounted in the .pws-surface (sand). Print CSS isolates it.
   ============================================================================ */
.ptf { max-width: 820px; margin: 0 auto; color: var(--ink); }
.ptf-top { background: var(--ink); color: var(--cream); border-radius: 11px; padding: 20px 24px; margin-bottom: 16px; position: relative; }
.ptf-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--safety-yellow); }
.ptf-h1 { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -.01em; margin: 5px 0 6px; line-height: 1.1; }
.ptf-meta { font-family: var(--font-mono); font-size: 11.5px; color: rgba(239,233,220,.62); }
.ptf-print-btn { position: absolute; top: 20px; right: 22px; font-family: inherit; font-size: 12px; font-weight: 700; background: var(--rust); color: #fff; border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer; }
.ptf-print-btn:hover { background: var(--rust-bright); }
.ptf-intro { font-size: 12.5px; line-height: 1.6; color: #4a463e; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; margin: 0 0 18px; }
.ptf-sec { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.ptf-h2 { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); margin: 0 0 13px; display: flex; align-items: center; gap: 9px; }
.ptf-n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff; background: var(--steel, #2A2E33); width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.ptf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
@media (max-width: 560px) { .ptf-grid { grid-template-columns: 1fr; } }
.ptf-f { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0ebdd; font-size: 13px; }
.ptf-k { color: #8a8678; }
.ptf-v { color: var(--ink); font-weight: 600; text-align: right; }
.ptf-prose { margin-top: 11px; }
.ptf-prose .ptf-k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.ptf-prose p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #4a463e; }
.ptf-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ptf-tbl th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #8a8678; font-weight: 600; padding: 0 10px 6px 0; border-bottom: 1px solid var(--line); }
.ptf-tbl td { padding: 7px 10px 7px 0; border-bottom: 1px solid #f0ebdd; color: var(--ink); vertical-align: top; }
.ptf-tbl tr:last-child td { border-bottom: 0; }
.ptf-sub { font-size: 11px; color: #6B6961; margin-top: 3px; line-height: 1.45; }
.ptf-note { font-size: 11.5px; color: #6B6961; line-height: 1.55; margin: 10px 0 0; }
.ptf-empty { font-size: 12.5px; color: #8a8678; font-style: italic; margin: 0; }
.ptf-test { border: 1px solid #ece6d6; border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.ptf-test:last-child { margin-bottom: 0; }
.ptf-test-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ptf-test-st { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: #8a8678; }

@media print {
  body * { visibility: hidden !important; }
  .ptf, .ptf * { visibility: visible !important; }
  .ptf { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
  .ptf-print-btn { display: none !important; }
  .ptf-top { background: #fff !important; color: #000 !important; border: 1px solid #999; border-radius: 0; padding: 0 0 12px; margin-bottom: 14px; }
  .ptf-eyebrow { color: #000 !important; }
  .ptf-meta { color: #333 !important; }
  .ptf-sec, .ptf-intro, .ptf-test { border-color: #bbb !important; border-radius: 0; box-shadow: none !important; break-inside: avoid; }
  .ptf-n { background: #000 !important; }
  .ptf-sec { page-break-inside: avoid; }
}

/* ── Buyer's matching-specialists panel (open project) ─────────────────────
   Separate light cards on the page cream, each carrying the reasons a verified
   specialist matched the brief. Discovery only; no fee until the buyer engages. */
.pdt-match-sec { margin: 0 0 30px; }
.pdt-match-lede { margin: -6px 2px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-mute); max-width: 64ch; }
.pdt-match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pdt-match-card {
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 15px 16px 14px; box-shadow: 0 4px 14px rgba(42,46,51,.07);
  display: flex; flex-direction: column; gap: 10px;
}
.pdt-match-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdt-match-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdt-match-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pdt-match-title { font-size: 12.5px; color: var(--ink-mute); }
.pdt-match-fit {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--rust);
  background: rgba(184,67,29,.07); border: 1px solid rgba(184,67,29,.22);
  border-radius: 20px; padding: 3px 11px; white-space: nowrap; align-self: flex-start;
}
.pdt-match-fit b { font-size: 13.5px; font-weight: 700; }
.pdt-match-fit .u { opacity: .82; }
.pdt-match-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pdt-mc {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .01em;
  padding: 2.5px 8px; border-radius: 16px; background: var(--cream);
  color: #54514a; border: 1px solid var(--line); white-space: nowrap;
}
.pdt-mc.disc { background: rgba(184,67,29,.07); color: var(--rust-dk); border-color: rgba(184,67,29,.22); font-weight: 600; }
.pdt-mc.ok { background: rgba(47,125,79,.09); color: #2f7d4f; border-color: rgba(47,125,79,.26); }
.pdt-mc.muted { opacity: .6; }
.pdt-match-meta { font-size: 12px; color: var(--ink-mute); }
.pdt-match-foot { margin-top: 1px; }
.pdt-match-view {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em;
  padding: 7px 13px; border-radius: 3px; text-decoration: none; display: inline-block;
  background: transparent; color: var(--ink); border: 1px solid var(--line); cursor: pointer;
}
.pdt-match-view:hover { border-color: var(--rust); color: var(--rust); }
@media (max-width: 720px) { .pdt-match-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   SUPPORT CENTRE (pages/support.js). Namespaced .sup-*; inherits the shell
   tokens. The hub, articles and walkthrough stepper share this block.
   ============================================================================ */
.sup-search { max-width: 680px; margin: 18px 0 12px; }
.sup-search input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 16px; background: #fff; color: var(--ink);
  font-family: var(--font-display); }
.sup-search input:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.sup-chips { display: flex; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.sup-chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; color: var(--ink-mute); background: #fff; cursor: pointer;
  font-family: var(--font-display); }
.sup-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sup-chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.sup-sect { margin: 30px 0 12px; }
.sup-sect h2 { font-family: var(--font-display); font-weight: 900; font-size: 21px; color: var(--ink); }
.sup-sect h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--rust); }

.sup-jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sup-jcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.sup-jcard:hover { border-color: var(--rust); }
.sup-jthumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  display: block; background: var(--sand); border-bottom: 1px solid var(--line); }
.sup-jbody { padding: 12px 14px 14px; }
.sup-jsteps { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--rust); font-weight: 600; }
.sup-jtitle { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin: 4px 0 3px; }
.sup-jmeta { font-size: 12.5px; color: var(--ink-mute); }

.sup-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sup-ccard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sup-ctag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--rust); font-weight: 600; }
.sup-ctitle { font-family: var(--font-display); font-weight: 900; font-size: 17px; margin: 5px 0 8px; }
.sup-clinks { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.sup-clinks li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.sup-clinks li:last-child { border-bottom: 0; }
.sup-alink { color: var(--ink); text-decoration: none; }
.sup-alink:hover { color: var(--rust); }
.sup-ccount { margin-top: 9px; font-size: 12.5px; color: var(--rust); font-weight: 700; }

.sup-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 36px; }
.sup-pitem { display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sup-ptag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  min-width: 96px; letter-spacing: .06em; }

.sup-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin: 34px 0 8px; }
.sup-bcard { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sup-bcard h3 { font-family: var(--font-display); font-weight: 900; font-size: 16px; margin: 0 0 5px; }
.sup-bcard p { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.sup-go { display: inline-block; margin-top: 9px; font-size: 13px; color: var(--rust);
  font-weight: 700; text-decoration: none; }

.sup-strap { margin: 26px 0 10px; padding: 12px 16px; background: var(--sand);
  border-radius: 10px; font-size: 12.5px; color: var(--ink-mute); }
.sup-strap a { color: var(--rust); }

.sup-results { margin: 0 0 22px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 14px; }
.sup-rrow { display: flex; gap: 12px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.sup-rrow:last-child { border-bottom: 0; }
.sup-rkind { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-mute); min-width: 92px; }
.sup-rnone { padding: 12px 0; font-size: 14px; color: var(--ink-mute); }
.sup-searching .sup-sections { display: none; }

/* Role filtering: hide entries whose data-roles do not include the selection. */
#sup-root[data-role="buyer"] .sup-clinks .sup-alink:not([data-roles~="buyer"]):not([data-roles~="all"]),
#sup-root[data-role="specialist"] .sup-clinks .sup-alink:not([data-roles~="specialist"]):not([data-roles~="all"]),
#sup-root[data-role="integrator"] .sup-clinks .sup-alink:not([data-roles~="integrator"]):not([data-roles~="all"]) { display: none; }
#sup-root[data-role="buyer"] .sup-jcard:not([data-roles~="buyer"]),
#sup-root[data-role="specialist"] .sup-jcard:not([data-roles~="specialist"]),
#sup-root[data-role="integrator"] .sup-jcard:not([data-roles~="integrator"]) { display: none; }

/* Articles */
.sup-crumb { font-size: 12.5px; color: var(--ink-mute); margin: 4px 0 8px; }
.sup-crumb a { color: var(--ink-mute); text-decoration: none; }
.sup-crumb a:hover { color: var(--rust); }
.sup-crumb b { color: var(--rust); }
.sup-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--ink-mute); margin: 6px 0 16px; align-items: center; }
.sup-role { background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; color: var(--ink); font-weight: 700; }
.sup-art { max-width: 740px; }
.sup-art h1 { font-family: var(--font-display); font-weight: 900; font-size: 30px; margin: 0 0 12px; }
.sup-art h2 { font-family: var(--font-display); font-weight: 900; font-size: 19px; margin: 22px 0 8px; }
.sup-art p, .sup-art li { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.sup-art p { margin: 0 0 13px; }
.sup-art ul, .sup-art ol { margin: 0 0 13px; padding-left: 22px; }
.sup-art li { margin-bottom: 6px; }
.sup-callout { background: #FBF4EE; border-left: 4px solid var(--rust);
  border-radius: 0 12px 12px 0; padding: 12px 16px !important; }
.sup-loading p { color: var(--ink-mute); }
.sup-relgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; max-width: 740px; }
.sup-rcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; color: var(--ink-mute); text-decoration: none; }
.sup-rcard:hover { border-color: var(--rust); }
.sup-rcard b { font-family: var(--font-display); display: block; margin-bottom: 3px; color: var(--ink); }

/* Walkthrough stepper */
.sup-jh1 { font-family: var(--font-display); font-weight: 900; font-size: 30px; margin: 2px 0 4px; }
.sup-stepper { display: flex; align-items: center; gap: 6px; margin: 12px 0 22px; flex-wrap: wrap; }
.sup-sdot { width: 30px; height: 30px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--line); color: var(--ink-mute); display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 700; text-decoration: none;
  font-family: var(--font-display); }
.sup-sdot.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.sup-sdot.is-now { background: var(--rust); border-color: var(--rust); color: #fff;
  width: 34px; height: 34px; box-shadow: 0 0 0 4px rgba(184, 67, 29, .16); }
.sup-sline { flex: 1; height: 2px; background: var(--line); min-width: 8px; }
.sup-jgridstep { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 26px; align-items: start; }
.sup-jtext h2 { font-family: var(--font-display); font-weight: 900; font-size: 23px; margin: 6px 0 10px; }
.sup-jtext h2 em { font-family: var(--font-serif); font-style: italic; color: var(--rust); }
.sup-jtext p { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }
.sup-jnav { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* S58 uniformity: was a rounded display-type button, the only one of its
   kind. Brought to the §3.1 Button role, secondary + primary variants. */
.sup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border: 1px solid var(--rust); border-radius: 0;
  padding: 12px 20px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: var(--rust); background: transparent; text-decoration: none; }
.sup-btn:hover { background: var(--rust); color: #fff; }
.sup-btn-rust { background: var(--rust); border-color: var(--rust); color: #fff; }
.sup-btn-rust:hover { background: var(--rust-dk); border-color: var(--rust-dk); }
.sup-shot { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sup-shot img { display: block; width: 100%; height: auto; }
.sup-shot figcaption { font-size: 11.5px; color: var(--ink-mute); padding: 8px 12px;
  border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .sup-jgridstep { grid-template-columns: 1fr; }
  .sup-pop { grid-template-columns: 1fr; }
}

/* ============================================================================
   The Contract Workspace, /work (P1 S2, design 06v2). Workspace-card tokens
   from shell.css :root (--card / --card-2 / --hairline / --radius-card);
   status-tag tones follow the shipped stat-pill family. Static throughout
   per the design-aesthetic rule: no motion, no theatre.
   ============================================================================ */
.wrk-wrap { padding: 34px 44px 0; max-width: 860px; }
.wrk-lead { font-size: 14px; color: var(--ink-mute); max-width: 62ch; line-height: 1.6; }
.wrk-sec-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); font-weight: 700; margin: 26px 0 10px; }
.wrk-sec-h small { color: var(--ink-mute); letter-spacing: .06em; text-transform: none; }

/* Andon rows */
.wrk-andon { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wrk-an { display: flex; align-items: flex-start; gap: 14px; background: var(--card);
  border: 1px solid var(--hairline); border-left: 4px solid #E8A23D;
  border-radius: 12px; padding: 13px 16px; }
.wrk-an-soft { border-left-color: var(--rust); }
.wrk-an-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: #8a6210; background: #fdf3e4;
  border: 1px solid #ecd9b4; border-radius: 999px; padding: 4px 9px; flex: none; margin-top: 2px; }
.wrk-an-soft .wrk-an-tag { color: var(--rust); background: #f9ece6; border-color: #eccdbf; }
.wrk-an-t { font-size: 13.5px; line-height: 1.5; min-width: 0; }
.wrk-an-t b { font-weight: 800; }
.wrk-an-fit { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.wrk-an-fit b { color: #1c6b3a; font-weight: 800; }
.wrk-an-clash b { color: var(--rust); }
.wrk-an-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  margin-left: auto; flex: none; margin-top: 4px; }
.wrk-an-go { flex: none; font-weight: 800; font-size: 12.5px; color: var(--rust); margin-top: 3px; }

/* The runway */
.wrk-runway { background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 16px 18px 14px; margin-top: 8px; }
.wrk-rw-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.wrk-rw-title { font-weight: 800; font-size: 14.5px; }
.wrk-rw-sum { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.wrk-rw-sum b { color: var(--ink); }
.wrk-rw-empty { font-size: 12.5px; color: var(--ink-mute); line-height: 1.6; }
.wrk-rw-months { display: flex; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .12em; color: var(--ink-mute); margin-bottom: 5px; }
.wrk-rw-months span { flex: 1; }
.wrk-rw-track { position: relative; height: 58px; background: var(--card-2);
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.wrk-rw-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.wrk-rw-blk { position: absolute; top: 7px; bottom: 7px; border-radius: 8px;
  padding: 7px 10px; font-size: 10.5px; font-weight: 700; line-height: 1.25; overflow: hidden; }
.wrk-rw-in { position: relative; }
.wrk-rw-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; opacity: .8; display: block; }
.wrk-rw-live { background: var(--rust); color: #fff; }
.wrk-rw-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,0,0,.18); }
.wrk-rw-ghost { background: var(--card); border: 2px dashed var(--rust); color: var(--rust); }
.wrk-rw-gap { background: repeating-linear-gradient(135deg, #efe7d4 0 6px, #f7f3ea 6px 12px);
  border: 1px dashed var(--line); color: var(--ink-mute); }
.wrk-rw-prot { background: repeating-linear-gradient(135deg, #e2e0da 0 6px, #eceae4 6px 12px);
  border: 1px solid var(--line); color: var(--ink-mute); }
.wrk-rw-ext { position: absolute; top: 7px; bottom: 7px;
  border: 2px dashed rgba(184, 67, 29, .55); border-left: 0; border-radius: 0 8px 8px 0; }
.wrk-rw-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.wrk-rw-del { background: none; border: 0; color: inherit; font-size: 12px;
  font-weight: 900; cursor: pointer; padding: 0 2px; }
.wrk-rw-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-mute); }
.wrk-rw-legend i { display: inline-block; width: 14px; height: 9px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; }
.wrk-lg-live { background: var(--rust); }
.wrk-lg-ghost { background: var(--card); border: 1.5px dashed var(--rust); }
.wrk-lg-gap { background: repeating-linear-gradient(135deg, #efe7d4 0 4px, #f7f3ea 4px 8px);
  border: 1px dashed var(--line); }
.wrk-lg-prot { background: repeating-linear-gradient(135deg, #e2e0da 0 4px, #eceae4 4px 8px);
  border: 1px solid var(--line); }
.wrk-rw-note { font-size: 11.5px; color: var(--ink-mute); border-top: 1px solid var(--card-2);
  margin-top: 12px; padding-top: 10px; line-height: 1.55; }
.wrk-rw-note b { color: var(--rust); }

/* Lanes */
.wrk-rowlist { display: flex; flex-direction: column; gap: 9px; }
.wrk-wk { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 12px; padding: 13px 16px; }
.wrk-wk-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 4px 9px;
  flex: none; border: 1px solid var(--hairline); }
.wrk-tg-live { color: #1c6b3a; background: #e9f4ec; border-color: #cfe6d7; }
.wrk-tg-ghost { color: var(--rust); background: #f9ece6; border-color: #eccdbf; }
.wrk-wk-t { min-width: 0; flex: 1; }   /* S11: the text block owns the slack; money and action stay pinned right */
.wrk-wk-t b { display: block; font-size: 13.5px; font-weight: 800; }
.wrk-wk-t span { font-size: 11.5px; color: var(--ink-mute); }
.wrk-wk-big { margin-left: auto; text-align: right; flex: none; }
.wrk-wk-big b { display: block; font-family: var(--font-mono); font-size: 13px; }
.wrk-wk-big span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); }
.wrk-wk-go { flex: none; font-weight: 800; font-size: 12.5px; color: var(--rust); }

/* The levers rail (on the dark right rail) */
.wrk-r-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--rust-bright); font-weight: 700; text-transform: uppercase; }
.wrk-rb-h { font-family: var(--font-serif); font-style: italic; font-size: 24px;
  line-height: 1.2; color: #fff; margin: 10px 0 14px; }
.wrk-rb-h em { color: var(--rust-bright); font-style: italic; }
.wrk-lever { border-top: 1px solid rgba(255,255,255,.14); padding: 13px 0; }
.wrk-lever:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
.wrk-lv-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5); }
.wrk-lv-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.wrk-lv-v { font-size: 15px; font-weight: 800; color: #fff; }
.wrk-lv-v small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
.wrk-lv-editbtn { background: none; border: 0; cursor: pointer; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust-on-dark); font-weight: 700; padding: 6px; }
.wrk-lv-editrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.wrk-lv-editrow input, .wrk-lv-editrow select, .wrk-lv-daterow input {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  background: rgba(255,255,255,.08); color: #fff; padding: 9px 11px; }
.wrk-lv-daterow { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.wrk-lv-sub { font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.5; margin-top: 8px; }
.wrk-lv-sub b { color: rgba(255,255,255,.85); }
.wrk-lv-link { color: var(--rust-bright); font-weight: 700; }
.wrk-seg { display: flex; border: 1px solid rgba(255,255,255,.25); border-radius: 9px;
  overflow: hidden; margin-top: 8px; }
.wrk-seg-opt { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .05em; font-weight: 700; padding: 10px 4px; color: rgba(255,255,255,.6);
  background: none; border: 0; cursor: pointer; }
.wrk-seg-opt.on { background: var(--rust); color: #fff; }
.wrk-seg-opt:focus-visible { outline: 2px solid var(--rust-bright); outline-offset: -2px; }
.wrk-rail-btn { display: block; width: 100%; text-align: center; background: transparent;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  border-radius: 0; padding: 12px; min-height: 44px; margin-top: 16px; cursor: pointer; }
.wrk-rail-btn-solid { background: var(--rust); border-color: var(--rust); }
.wrk-protect { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.wrk-r-status { font-family: var(--font-mono); font-size: 10px; color: var(--rust-bright);
  margin-top: 12px; }
.wrk-r-note { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.6; margin-top: 16px; }
.wrk-r-note b { color: rgba(255,255,255,.78); }

/* Mobile: single column, runway scrolls, per 07v2 (dock/sheet land with S3) */
@media (max-width: 880px) {
  .wrk-wrap { padding: 18px 16px 0; }
  .wrk-an { flex-wrap: wrap; }
  .wrk-an-meta { margin-left: 0; }
}

/* /work S3: the runway scroll holder and the mobile dock (design 07v2). */
.wrk-rw-holder { position: relative; }
.wrk-rw-hint, .wrk-rw-fade { display: none; }
.wrk-dock { display: none; }
@media (max-width: 880px) {
  .wrk-rw-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px;
    -webkit-overflow-scrolling: touch; }
  .wrk-rw-inner { min-width: 720px; }
  .wrk-rw-hint { display: block; position: absolute; top: -14px; right: 0;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
    color: var(--ink-mute); }
  .wrk-rw-fade { display: block; position: absolute; top: 12px; right: -16px;
    bottom: 4px; width: 44px; pointer-events: none;
    background: linear-gradient(90deg, rgba(239,233,220,0), var(--cream)); }
  /* The dock sits above the 56px bottom bar; the STATUS pill opens the
     right-rail slide-over (the capacity sheet). page-work only. */
  body.page-work .wrk-dock { display: flex; position: fixed; left: 0; right: 0;
    bottom: 56px; z-index: 46; align-items: center; gap: 12px;
    background: var(--ink); color: #fff; padding: 11px 16px;
    border-top: 2px solid var(--rust); }
  body.page-work .main { padding-bottom: 140px; }  /* dock + bar clearance */
  .wrk-dock-t { min-width: 0; font-size: 12px; line-height: 1.3; }
  .wrk-dock-t b { display: block; font-weight: 800; }
  .wrk-dock-t span { font-family: var(--font-mono); font-size: 9px;
    color: rgba(255,255,255,.55); }
  .wrk-dock-pill { margin-left: auto; flex: none; font-family: var(--font-mono);
    font-size: 9px; letter-spacing: .06em; font-weight: 700; color: #fff;
    background: var(--rust); border: 0; border-radius: 999px; padding: 9px 13px;
    cursor: pointer; }
  body.rail-open .wrk-dock { display: none; }  /* the sheet replaces it while open */
}

/* /work S4: stacked edit rows, checks (the moved levers). */
.wrk-lv-editcol { flex-direction: column; align-items: stretch; }
.wrk-lv-editcol input, .wrk-lv-editcol select { width: 100%; }
.wrk-lv-checks { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.wrk-lv-check { display: flex; gap: 7px; align-items: center; font-size: 12.5px;
  font-weight: 700; color: #fff; }

/* Editor S4: the moved signpost and derived identity rows (design 08v2). */
.pe-moved { display: flex; gap: 14px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--hairline); border-left: 4px solid var(--rust);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
.pe-moved-ic { width: 36px; height: 36px; flex: none; border-radius: 9px;
  background: #f9ece6; border: 1px solid #eccdbf; display: flex; align-items: center;
  justify-content: center; color: var(--rust); font-weight: 900; }
.pe-moved-t { font-size: 13px; line-height: 1.6; }
.pe-moved-t b { font-weight: 800; }
.pe-moved-go { margin-left: auto; flex: none; font-weight: 800; font-size: 12.5px;
  color: var(--rust); white-space: nowrap; padding-top: 8px; }
.pe-derived-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px;
  padding: 12px 0; border-top: 1px solid var(--card-2); align-items: baseline; }
.pe-derived-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); }
.pe-derived-v { font-size: 13.5px; font-weight: 700; }
.pe-derived-note { grid-column: 2; font-size: 10.5px; color: var(--ink-mute); line-height: 1.5; }

/* S9: the /work rail grouped (Today / Your terms / Products) and compacted;
   the lanes go two-up on wide screens so the main column earns its width. */
body.page-work .wrk-r-sec { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
body.page-work .wrk-lever { padding: 9px 0; }
/* S11: the S9 two-up lane grid is withdrawn, half-width cards wrapped chaotically ('in flight all over the place'). Lanes are rows. */

/* S10: the presence truth, a private profile is told so, first, in Today. */
body.page-work .wrk-presence { border: 1px solid rgba(212, 90, 44, .55); background: rgba(212, 90, 44, .1); border-radius: 11px; padding: 11px 13px; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .85); margin: 8px 0 12px; }
body.page-work .wrk-presence b { color: #fff; }
body.page-work .wrk-presence a { display: inline-block; margin-top: 6px; color: var(--rust-bright, #d45a2c); font-weight: 800; }

/* S11: labelled fields for the rail's column editors (the permanent section
   was six naked placeholder boxes, 'makes no sense' was fair). */
body.page-work .wrk-pp-l { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* S12: the dashboard's Contract-workspace tile (design 10) was emitted since
   S4 but never styled, it rendered as bare text inside a link on the LIVE
   dashboard. Found by the platform-wide class-gap sweep. */
.wrk-tile { display: block; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: 14px; padding: 18px 20px; margin: 0 0 14px; }
.wrk-tile:hover { border-color: var(--rust); }
.wrk-tile-k { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust-bright); font-weight: 700; }
.wrk-tile-h { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.01em; margin: 6px 0 12px; color: #fff; }
.wrk-tile-h em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--rust-bright); }
.wrk-tile-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; }
.wrk-tf { display: flex; flex-direction: column; gap: 2px; }
.wrk-tf b { font-size: 15px; font-weight: 900; color: #fff; }
.wrk-tf b.amber { color: var(--rust-bright); }
.wrk-tf span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.wrk-tile-go { display: inline-block; font-weight: 800; font-size: 12.5px; color: var(--rust-bright); }
/* S12: the grey tag variant used by Draft/Closed/Expired rows was undefined. */
.bw-t-grey { color: var(--ink-faint); background: var(--card-2); border-color: var(--hairline); }

/* P2.1 (mock 11): track-record-lite on the public profile. */
.ptr-row { display: flex; flex-wrap: wrap; gap: 22px; margin: 10px 0 6px; }
.ptr-stat { min-width: 120px; }
.ptr-n { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.ptr-n-sm { font-size: 18px; padding-top: 8px; }
.ptr-l { font-size: 12px; color: var(--ink-mute, #6b6459); margin-top: 2px; }
.ptr-method { margin-top: 8px; font-size: 13px; }
.ptr-method summary { cursor: pointer; color: var(--rust, #b7410e); }
.ptr-method p { color: var(--ink-mute, #6b6459); margin: 8px 0 0; max-width: 68ch; }
/* P2.1 (mock 13): the first-run getting-started panel (dark workspace). */
/* S53 (signed-in red-team B2, CRITICAL): this panel lives in the CREAM main
   column, not the dark rail, but every colour in it was white-on-white, the
   three next-action links, the intro line, the border and Dismiss all measured
   ~1.05:1, i.e. invisible. A brand-new member's ONLY set of next actions was
   an empty box. Rewritten onto light-ground tokens. This is the third
   recurrence of the light-token-on-dark-ground class of bug (notifications,
   admin, first-run); tests/contrast-check.mjs now gates it. */
.frn { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--hairline);
       background: var(--card); border-radius: 10px; }
.frn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.frn-dismiss { background: none; border: none; color: var(--ink-mute); font-size: 12px; cursor: pointer; text-decoration: underline; }
.frn-dismiss:hover { color: var(--ink); }
.frn-sub { font-size: 13px; color: var(--ink-mute); margin: 6px 0 12px; }
.frn-steps { display: flex; flex-direction: column; gap: 8px; }
.frn-step { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.frn-mark { width: 16px; color: var(--rust); font-weight: 700; }
.frn-step a.frn-lab { color: var(--rust); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(173,61,26,0.4); }
.frn-step a.frn-lab:hover { color: var(--rust-dk); text-decoration-color: var(--rust-dk); }
.frn-done .frn-lab { color: var(--ink-mute); }
/* P2.1 (mock 12): the completion-moment notes under the done line.
   (Restored S19, the inbox-style excision took this neighbouring block.) */
.eng-complete-note { margin: 8px 0; color: rgba(255,255,255,0.75); }
.eng-complete-note a { color: var(--rust, #b7410e); }

/* ============================================================================
   S49-CYCLE: the cycle-time analyser (/cycle-time). Tokens only, per
   claude/DESIGN-TYPOGRAPHY.md, light-surface text is --ink/--ink-mute,
   mono is labels/metadata only, stat numbers are numbers.
   ============================================================================ */
.ct-capture { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 4px; }
.ct-mode { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ct-mode-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); }
.ct-mode h3 { margin: 0; font-size: 19px; color: var(--ink); }
.ct-mode p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); }
.ct-file-btn { display: inline-block; cursor: pointer; }
.ct-stage { margin-top: 16px; }
.ct-video { width: 100%; max-height: 340px; background: var(--ink); border-radius: 10px; display: block; }
.ct-progress { margin-top: 10px; }
.ct-progress-bar { height: 6px; border-radius: 3px; background: var(--card-2); border: 1px solid var(--hairline); overflow: hidden; }
.ct-progress-fill { height: 100%; width: 0; background: var(--rust); transition: width 0.2s linear; }
@media (prefers-reduced-motion: reduce) { .ct-progress-fill { transition: none; } }
.ct-progress-label { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.ct-live-strip { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ct-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rust); animation: ct-pulse 1.2s ease-in-out infinite; }
@keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ct-live-dot { animation: none; } }
.ct-live-read { flex: 1; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.ct-live-stop { flex-shrink: 0; }
.ct-results { margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.ct-results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ct-results-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); }
.ct-confidence { font-size: 13px; color: var(--ink-mute); }
.ct-confidence.is-high { color: var(--ink); }
.ct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ct-stat { background: var(--card-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 14px; }
.ct-stat-n { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.ct-stat-l { margin-top: 5px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.ct-strip { width: 100%; height: 120px; margin-top: 14px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card-2); }
.ct-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-mute); max-width: 66ch; }
.ct-cta { margin-top: 14px; }
.ct-status { margin-top: 14px; font-size: 14px; color: var(--ink); max-width: 62ch; }
.ct-status:empty { display: none; }
.ct-limits { margin-top: 24px; }
.ct-limits-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); margin-bottom: 6px; }
.ct-limits ul { margin: 0; padding-left: 18px; }
.ct-limits li { font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); }
@media (max-width: 860px) {
  .ct-capture { grid-template-columns: 1fr; }
  .ct-stats { grid-template-columns: repeat(2, 1fr); }
}

/* LEC-02: the Reg 32 hirer notice shown to the buyer on the engagement view.
   Tokens only (DESIGN-TYPOGRAPHY.md); a calm rust-edged note, not an alarm. */
.eng-conduct-notice { margin: 14px 0; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--hairline); border-left: 3px solid var(--rust); border-radius: 8px; }
.eng-conduct-notice .ecn-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust); margin-bottom: 4px; }
.eng-conduct-notice p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); max-width: 66ch; }

/* S49-NEXT: the "document-checked" note on a machine-verified insurance row.
   A quiet positive signal (mono, rust), never an alarm; only the consistent
   state is ever shown to a buyer. */
.v-doccheck { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--rust); }

/* ============================================================================
   S50 NAVIGATION + FIELD NOTES
   ============================================================================ */

/* The shared in-body way-up link (components/backLink.js). One class for
   what were five hand-rolled one-offs (.cf-back, .conv-back, .ac-crumbback,
   .reference-backctx, .disp-back stay for their pages; new work uses this). */
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-bottom: 14px;
  text-decoration: none;
}
.back-link:hover { color: var(--rust); }

/* Field notes: the education rail block (components/rightRail/tipsRail.js).
   Dark rail ground, so text is white/cream by rule (DESIGN-TYPOGRAPHY.md §2);
   glyphs and links take rust. */
.tips-rail .tips-intro {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0 0 6px;
}
.tip-card {
  padding: 14px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.tip-head { display: flex; align-items: center; gap: 8px; }
.tip-glyph { display: inline-flex; color: var(--rust); }
.tip-glyph svg { display: block; }
.tip-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.tip-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 7px 0 4px;
}
.tip-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin: 0 0 8px;
}
.tip-more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--rust-on-dark);   /* S53: 11px --rust on ink was 2.87:1 */
  text-decoration: none;
}
.tip-more:hover { color: #fff; }
.tips-foot {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.tips-foot:hover { color: var(--rust); }

/* S51: a certification row flagged at save time for a missing name (the row
   would otherwise be silently dropped). Tokens only. */
.cert-row-invalid { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 8px; }

/* ============================================================================
   S54, THE 25 MATURITY IDEAS. Everything below this line was written as a
   per-agent partial (styles/_s54-*.css) and folded in here at integration,
   in dependency order: the Button role first, because later blocks use it.
   ============================================================================ */

/* ############################################################################
   S54 · A1, the Button role (.btn-p / .btn-s / .btn-q), DESIGN-TYPOGRAPHY §3.1
   Folded in from styles/_s54-buttons.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W1 (idea 23), THE BUTTON ROLE, three canonical variants.

   Why this exists: the platform carries 80-odd distinct button class names and
   DESIGN-TYPOGRAPHY.md documented no Button role at all, so every new surface
   invented one. Worse, the most-used component (.rail-btn, 43 uses) is mono
   10px uppercase while §1 of that document says buttons are display type and
   mono is "labels and metadata only", the canonical doc and the canonical
   component disagreed.

   The ruling (S54, written into DESIGN-TYPOGRAPHY.md §3 as the Button role):
   KEEP the mono button. It is distinctive, it is what the platform already
   looks like, and it reads as instrumentation rather than as a web form. But
   take it to 11px, because 10px uppercase for "CREATE A FREE ACCOUNT" is small
   for a shop-floor audience reading a phone in a plant. §3 is amended so the
   doc matches the platform instead of contradicting it.

   Three variants, no more:
     .btn-p  PRIMARY    rust ground, white text. One per view.
     .btn-s  SECONDARY  transparent, bordered. The alternative path.
     .btn-q  QUIET      text only. Cancel, dismiss, "not now".

   These are NEW canonical classes for new surfaces and for later waves to
   collapse the existing sprawl into. S54 deliberately does NOT rewrite the
   existing classes to use them, that is a separate, gated wave, and doing it
   inside this batch would put ~80 selectors' worth of visual risk into a batch
   whose whole point is to make risk measurable.

   Every colour below is MEASURED, not assumed:
     #fff on --rust ................ 6.07:1   (primary label, light or dark ground)
     #fff on --rust-dk (hover) ..... 7.86:1
     --rust on --cream ............. 5.02:1   (secondary/quiet label on light)
     --rust on --card (#fff) ....... 6.07:1
     --rust-on-dark on --ink ....... 5.43:1   (secondary/quiet label on dark)
     rgba(255,255,255,.35) on --ink   3.22:1  (the bone border, clears the 3:1
                                               non-text bar of WCAG 1.4.11)
     --ink-mute on --ink ........... 2.33:1   FAILS, this is the exact bug the
                                              on-dark rule below prevents. It
                                              shipped on .rail-btn-quiet and
                                              styled "Cancel · 48-hour full
                                              refund" on the ink rail.
   ============================================================================ */

/* --- The shared base ------------------------------------------------------- */
/* min-height/min-width 44px is not decoration: it is the mobile tap target the
   design gate asserts. Padding alone does not guarantee it once a button holds
   a single short word. Width is the caller's business, a rail button sets
   width:100%, an inline button does not, so nothing here sets it. */
.btn-p,
.btn-s,
.btn-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-p:disabled,
.btn-s:disabled,
.btn-q:disabled,
.btn-p[aria-disabled='true'],
.btn-s[aria-disabled='true'],
.btn-q[aria-disabled='true'] {
  opacity: 0.55;
  cursor: default;
}

/* --- PRIMARY --------------------------------------------------------------- */
/* Rust ground, white text. Identical on light and dark grounds, because white
   on --rust is 6.07:1 either way; only the outline changes (below). */
.btn-p {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.btn-p:hover {
  background: var(--rust-dk);
  border-color: var(--rust-dk);
}

/* --- SECONDARY ------------------------------------------------------------- */
/* Transparent ground, bordered, rust label. The border is --rust rather than
   --line because --line is 1.50:1 on cream: as the only visual boundary of a
   control that fails WCAG 1.4.11, and a secondary button is nothing but its
   boundary. */
.btn-s {
  background: transparent;
  border-color: var(--rust);
  color: var(--rust);
}
.btn-s:hover {
  background: var(--rust);
  color: #fff;
}

/* --- QUIET ----------------------------------------------------------------- */
/* Text only. No border, no ground, still 44px tall so it is still a tap
   target. Underline on hover so the affordance does not rest on colour alone. */
.btn-q {
  background: none;
  border-color: transparent;
  color: var(--rust);
  padding-left: 8px;
  padding-right: 8px;
}
.btn-q:hover {
  color: var(--rust-dk);
  text-decoration: underline;
}

/* --- THE ON-DARK RULE ------------------------------------------------------ */
/* On a dark ground the accent is --rust-on-dark (5.43:1 on --ink) and the
   border is bone, NEVER --ink-mute (2.33:1) and never plain --rust (2.87:1 as
   a boundary, and its small-text ratio on ink is the same 2.87:1). This is the
   single recurring bug on this platform, notifications, admin, the first-run
   panel and .rail-btn-quiet all hit it independently, so it is a rule, not a
   preference.

   The dark grounds are the two shell rails and the global footer. Any other
   dark panel opts in with data-ground="dark" on the panel, which is an
   attribute rather than a fourth button class on purpose: the census gate
   counts button classes, and the vocabulary must not grow to express this. */
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-s {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--rust-on-dark);
}
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-s:hover {
  background: transparent;
  border-color: var(--rust-on-dark);
  color: var(--rust-on-dark);
}
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-q {
  color: var(--rust-on-dark);
}
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-q:hover {
  color: #fff;
}
/* The primary keeps its rust ground on dark, white-on-rust is still 6.07:1 ,
   but --rust against --ink is only a 2.87:1 boundary, so the button edge is
   drawn in the on-dark accent to keep the control's shape visible. */
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-p {
  border-color: var(--rust-on-dark);
}

/* --- Focus ----------------------------------------------------------------- */
/* Matches the a11y.css ring idiom: a 2px rust ring, offset so it reads against
   both a rust ground and a bone one. */
.btn-p:focus-visible,
.btn-s:focus-visible,
.btn-q:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-p:focus-visible,
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-s:focus-visible,
:where(.rail, .aside, .site-footer, [data-ground='dark']) .btn-q:focus-visible {
  outline-color: var(--rust-on-dark);
}

/* ############################################################################
   S54 · A2, the front door: proof strip, search chips, pricing, changelog, footer
   Folded in from styles/_s54-frontdoor.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W2, THE SIGNED-OUT FRONT DOOR
   (ideas 1, 2, 3, 5, 13, 22, 24 of claude/S53-MATURITY-IDEAS.md)

   Everything here styles the layer a visitor meets BEFORE they have an
   account, and nothing here is a new visual language: each block either
   re-uses an existing component's tokens and sizes, or overrides an existing
   rule that the new markup has outgrown.

   What is in here, and why each block exists:

     1. .hero-proof  , the home-page proof strip (idea 2). One quiet mono
                          line in the // kicker role, so the Google-clean
                          landing ruling survives: it is metadata about the
                          platform, not marketing copy about it.
     2. .search-examples, the three example queries under the search box
                          (idea 3). The SEARCH-PREFILL ruling put the example
                          in an aria-label, which left a sighted visitor
                          looking at a blank white rectangle. These put the
                          affordance back beneath the box instead of inside it.
     3. .role-card   , the sign-up chooser cards became containers with two
                          links each (sign up as this role / read this role's
                          page, idea 1), so the whole-card anchor's hover and
                          cursor behaviour has to be retired. This block also
                          takes over .rc-clarifier / .rc-consequence from the
                          per-page <style> element they used to be injected in;
                          an injected block re-parses on every navigation and
                          is how off-brand fallbacks got into the tree before.
     4. .ft-inner    , the footer grew a fifth column, "Who it's for"
                          (idea 1). The template columns are redeclared at
                          every breakpoint, because shell.css sets them inside
                          media queries and this file loads after it: a single
                          unconditional rule here would beat those queries and
                          un-stack the footer on a phone.
     5. .pricing-page, the pricing page (idea 13) is built almost entirely
                          out of the existing .role-fees / .role-examples /
                          .role-comparison components. This is the small
                          remainder: an effective-rate column the role pages
                          never had, and an 11px legibility floor on the table
                          head, which is 10.5px everywhere else.
     6. .hiw-fee-more, the link from the how-it-works fee summary to the
                          full pricing page. It sits on .hiw-fees-panel, which
                          is a DARK panel (--steel), so the accent is
                          --rust-on-dark and not --rust: measured 4.69:1 on
                          --steel, where --rust would be 2.6:1.
     7. .cl-*        , the changelog (idea 22).

   Tokens only. No literal hex, no literal font family, no var(--x, #fallback).
   Nothing below 11px. Every interactive element reaches 44px on a phone.
   ============================================================================ */

/* --- 1. Home proof strip (idea 2) ------------------------------------------ */
/* Five facts under the search box, each a link to the surface that proves it.
   Kicker role: mono, 11px, uppercase, letter-spaced, --rust on the --cream
   middle column. No middot separators: the strip wraps below about 1300px and
   a separator then strands itself at the end of a line. Spacing plus a
   hairline under each fragment separates them and says "link" at rest. */
.hero-proof {
  width: 100%;
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hero-proof .hp-frag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--rust);
  border-bottom: 1px solid var(--line);
}
.hero-proof .hp-frag:hover,
.hero-proof .hp-frag:focus-visible {
  color: var(--rust-dk);
  border-bottom-color: var(--rust-dk);
}

/* --- 2. Example search chips (idea 3) -------------------------------------- */
.search-examples {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
}
.search-examples .se-lead {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.search-examples .se-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 18px;
}
/* A real <button>: filling the input is an action, not a destination. Buttons
   do not inherit the page font, so the family is restated rather than assumed. */
.search-examples .se-chip {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--rust);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 1px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.search-examples .se-chip:hover,
.search-examples .se-chip:focus-visible {
  color: var(--rust-dk);
  border-bottom-color: var(--rust-dk);
}

/* --- 3. Sign-up role chooser (ideas 1 and 24) ------------------------------ */
/* The card is a container now, not a link, so the lift-on-hover and the
   pointer cursor would both be promising something the card no longer does.
   The focus ring moves to whichever link inside it has focus. */
.role-card {
  cursor: default;
}
.role-card:hover {
  border-color: var(--line);
  transform: none;
}
.role-card:focus-within {
  border-color: var(--ink);
}
/* Moved out of the per-page <style> block in pages/signup.js (S53 B7 fixed the
   colour; S54 moves it somewhere it is parsed once). */
.rc-clarifier {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  margin: 2px 0 6px;
}
.rc-consequence {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 6px 0 8px;
}
.rc-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 4px;
}
.role-card .rc-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.role-card .rc-go:hover {
  color: var(--rust-dk);
}
/* The persona-page link. Deliberately quieter than the primary action: this
   card's job is still to take a role, and reading first is the alternative. */
.role-card .rc-read {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.role-card .rc-read:hover,
.role-card .rc-read:focus-visible {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* --- 4. Footer "Who it's for" column (idea 1) ------------------------------ */
/* shell.css declares .ft-inner's columns once unconditionally and again inside
   two media queries. This file loads after shell.css, so the unconditional
   rule below would otherwise beat both queries at every width, hence all
   three are restated. Deleting any one of them re-breaks the phone footer. */
.ft-inner {
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 1180px) {
  .ft-inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 36px 40px; }
}
@media (max-width: 860px) {
  .ft-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .ft-inner { grid-template-columns: 1fr; }
}

/* --- 5. Pricing page (idea 13) --------------------------------------------- */
/* The effective-rate column. The role-page comparison table has no equivalent
   (it compares against an agency instead), and naming it .role-comparison-save
   to borrow that column's styling would have left a lie in the markup. */
.pricing-page .pr-rate {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
/* The shared table head is 10.5px. Nothing a reader has to read goes below
   11px, and a column head is exactly that. Scoped so the role pages are
   untouched, they are another agent's surface this wave. */
.pricing-page .role-comparison-head,
.pricing-page .role-comparison-head span {
  font-size: 11px;
}
.pricing-page .pr-int-examples {
  margin-top: 20px;
}
@media (max-width: 720px) {
  /* The stacked-table row labels are generated from data-l at 10px. Same
     floor, same reasoning. */
  .pricing-page .role-comparison-row span[data-l]::before {
    font-size: 11px;
  }
  /* The comparison table's column head is meant to vanish once the rows
     stack and start carrying their own data-l labels, but pages.css sets
     `.role-comparison-head { display: none }` BEFORE
     `.role-comparison-row { display: block }`, and the head row carries both
     classes at equal specificity, so the later rule wins and the head renders
     as a dark block of four orphaned column names above the cards. Scoped to
     this page because the same defect on the role pages belongs to a file
     nobody owns this wave; the general fix is reported with the batch. */
  .pricing-page .role-comparison-row.role-comparison-head {
    display: none;
  }
}

/* --- 6. How-it-works -> pricing (idea 13) ---------------------------------- */
/* On .hiw-fees-panel, which is --steel. --rust-on-dark measures 4.69:1 there;
   --rust would be 2.6:1 and fail even the large-text bar. */
.hiw-fee-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-on-dark);
  border-bottom: 1px solid transparent;
}
.hiw-fee-more:hover,
.hiw-fee-more:focus-visible {
  border-bottom-color: var(--rust-on-dark);
}

/* --- 7. Changelog (idea 22) ------------------------------------------------ */
.cl-list {
  margin-top: 10px;
  max-width: 70ch;
}
.cl-entry {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.cl-entry:first-child {
  border-top: none;
  padding-top: 10px;
}
.cl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}
.cl-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* The change type is a WORD, never a colour on its own: "Fixed" reads as
   "Fixed" in monochrome, to a screen reader, and to anyone who cannot tell
   the rust border from the neutral one. */
.cl-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 3px 9px;
}
.cl-kind-fixed {
  color: var(--rust);
  border-color: var(--rust);
}
.cl-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.cl-p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0 0 10px;
  max-width: 66ch;
}
.cl-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 2px;
}
.cl-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.cl-link:hover,
.cl-link:focus-visible {
  color: var(--rust-dk);
  border-bottom-color: var(--rust-dk);
}
.cl-foot {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 66ch;
}
.cl-foot a {
  color: var(--rust);
  border-bottom: 1px solid var(--line);
}
.cl-foot a:hover {
  border-bottom-color: var(--rust);
}

@media (max-width: 880px) {
  /* Phone: the proof-strip fragments become full tap targets. They are the
     only interactive elements on the landing page besides the search bar, and
     an 11px line of links is not a target at arm's length on a shop floor. */
  .hero-proof .hp-frag { min-height: 44px; }
  .hero-proof { gap: 0 18px; }
}

/* ############################################################################
   S54 · A3, the one money summary and the one deadline clock
   Folded in from styles/_s54-money.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54, components/moneySummary.js: the ONE money summary and the ONE clock.

   Idea 11. Five surfaces used to build their own money block, in five shapes,
   from five sets of fields, which is how the same platform fee came to render
   as £399.60, £400 and £400 across three faces of one engagement. There is now
   one component, so there is one set of classes, in two variants:

     .rw-money-dark   the ink right rail (/engagement, /engagement-review,
                      /batch-engage). Every colour here is an on-dark value:
                      white and rgba(255,255,255,…) text, --rust-on-dark for
                      the accent (--rust is 2.87:1 on --ink and fails AA).
     .rw-money-light  the light main column (/batch-result, /offer-sent).
                      --ink / --ink-mute text, --rust for the accent.

   Idea 12 owns the second half: .rw-ring and .rw-deadline, the countdown and
   the deadline-in-words that go beside any control which expires. The ring is
   drawn from a --rw-ring-pct custom property so the 30-second ticker in
   moneySummary.js can move it without touching a colour.

   No literal hex, no literal font family, and no hard-coded fallback
   inside a var(), a fallback hex is how off-brand colour shipped before.
   ============================================================================ */

.rw-money-rows { margin-bottom: 16px; }

.rw-money-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 0;
}
.rw-money-k { min-width: 0; }
.rw-money-v { flex: none; font-weight: 700; text-align: right; }
.rw-money-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-top: 3px;
}

.rw-money-grand { padding-top: 12px; }
.rw-money-grand-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.rw-money-grand-amt {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  margin: 6px 0 8px;
}
.rw-money-split {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.55;
}
.rw-money-fee-note,
.rw-money-note {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.55;
  margin-top: 10px;
}

/* --- the dark rail variant ------------------------------------------------ */
.rw-money-dark .rw-money-row {
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rw-money-dark .rw-money-v { color: #fff; }
.rw-money-dark .rw-money-sub { color: rgba(255, 255, 255, 0.55); }
/* The fee is the figure the buyer is actually being charged; it is the one
   row that carries the accent, and on --ink the accent is --rust-on-dark. */
.rw-money-dark .rw-money-row-fee,
.rw-money-dark .rw-money-row-fee .rw-money-v { color: var(--rust-on-dark); font-weight: 700; }
.rw-money-dark .rw-money-grand { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.rw-money-dark .rw-money-grand-h { color: var(--rust-on-dark); }
.rw-money-dark .rw-money-grand-amt { color: #fff; }
.rw-money-dark .rw-money-split { color: rgba(255, 255, 255, 0.78); }
.rw-money-dark .rw-money-fee-note { color: var(--rust-on-dark); }
.rw-money-dark .rw-money-note { color: rgba(255, 255, 255, 0.7); }

/* --- the light ground variant --------------------------------------------- */
.rw-money-light {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin: 14px 0;
}
.rw-money-light .rw-money-row {
  color: var(--ink-mute);
  border-bottom: 1px solid var(--card-2);
}
.rw-money-light .rw-money-v { color: var(--ink); }
.rw-money-light .rw-money-sub { color: var(--ink-faint); }
.rw-money-light .rw-money-row-fee,
.rw-money-light .rw-money-row-fee .rw-money-v { color: var(--rust); font-weight: 700; }
.rw-money-light .rw-money-grand { border-top: 1px solid var(--hairline); }
.rw-money-light .rw-money-grand-h { color: var(--rust); }
.rw-money-light .rw-money-grand-amt { color: var(--ink); }
.rw-money-light .rw-money-split { color: var(--ink-soft); }
.rw-money-light .rw-money-fee-note { color: var(--rust); }
.rw-money-light .rw-money-note { color: var(--ink-mute); }

/* ============================================================================
   Idea 12, a control that expires states its deadline.

   The ring shows the proportion of the window that has run; the words beside
   it are the actual right. Both re-state themselves on the moneySummary.js
   ticker, because the previous ring computed its remaining time ONCE at render
   and a tab left open overnight showed a stale "2d 23h".
   ============================================================================ */

.rw-ring {
  --rw-ring-pct: 0%;
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--rust) var(--rw-ring-pct), var(--hairline) 0);
}
.rw-ring-in {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.rw-ring-n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
}
/* 11px is the floor for anything a reader must read; the previous ring label
   was 7.5px, which was a bug and not a style. "left" rather than "remaining"
   is what makes 11px fit inside a 70px disc. */
.rw-ring-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.rw-deadline {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 8px;
}
.rw-deadline time { font-weight: 700; color: var(--ink); }
.rw-deadline-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
}
.rw-deadline-rem { color: var(--ink-faint); }

/* On the ink rail the same line flips to its on-dark palette. */
.rw-deadline-dark { color: rgba(255, 255, 255, 0.7); }
.rw-deadline-dark time { color: #fff; }
.rw-deadline-dark .rw-deadline-k { color: var(--rust-on-dark); }
.rw-deadline-dark .rw-deadline-rem { color: rgba(255, 255, 255, 0.6); }

/* /batch-engage: the "Held today, in total" kicker above the stat number. The
   big-number style used to carry the sentence "3 separate holds, one per
   offer", a label in a number's role. The number is the money now, and this
   is its label. On the ink rail, so it is the on-dark accent. */
.beg-holds-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust-on-dark);
  margin-bottom: 4px;
}

/* ============================================================================
   Four one-off inline styles the money pages carried, lifted into the
   stylesheet. One of them, the runway-clash warning on the specialist's
   decision page, hard-coded #B8431D, the PRE-PF-101 rust, which measures
   4.38:1 on the bone ground, a hair under AA, on the line telling a
   specialist their dates clash. It is the token now, and the warning also
   carries a weight, so the state is never colour alone.
   ============================================================================ */
.rw-alert { color: var(--rust); }
.rw-alert b { font-weight: 800; }
.rw-aside { font-weight: 500; color: var(--ink-faint); }
.rw-card-alert { border-color: var(--rust); }
.rw-note-body { font-size: 12.5px; color: var(--ink-soft); }

@media (max-width: 720px) {
  .rw-money-grand-amt { font-size: 26px; }
}

/* ############################################################################
   S54 · A4, the contract spine, and stage-needs on the project spine
   Folded in from styles/_s54-spine.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W3 (agent A4), the stage spines.

   Two additions to the S53 project-spine block above:

   1. IDEA 15, `.psp-needs`: the one line under the strip that says what the
      current stage still NEEDS, not only what it is ("Build, 3 of 7
      milestones approved, 2 delivered milestones to approve"). One line, at
      body size, because it is the most consequential sentence on the page and
      was previously nowhere on it.

   2. IDEA 14, `.csp-*`: the CONTRACTS stage spine
      (components/contractSpine.js). It deliberately reuses the whole `.psp-*`
      visual language, same card, same strip, same marks, same next line, so
      a member who has read the strip on a project reads it unchanged on a
      contract and the two products look like one platform. Only three things
      genuinely differ and only those get new rules:

        - the strip is an <ol> of list items, not links (a contract has one
          page, so a link per stage would be five lies about what a click
          does), which needs the list reset;
        - five steps fit a phone where eleven cannot, so the contract strip
          stays flexible below the rail breakpoint and only scrolls if it has
          to, the S53 shellInit centring is a no-op when nothing scrolls;
        - a contract can END somewhere (declined, withdrawn, expired,
          abandoned, no-show, closed by agreement). A stopped stage is neither
          done nor current and must not be styled as either, and the stages
          after it were never reached rather than "upcoming".

   Type sizes: `.psp-name` and `.psp-next-lab` shipped at 9.5px in S53, under
   the 11px floor the brand rules set for anything a user must read. Both
   spines are one component family and both are raised to 11px here; measured
   at 1440 the eleven-step project strip still fits the main column, and below
   880 it was already a scroller.
   ============================================================================ */

/* --- idea 15: what the stage still needs ---------------------------------- */
.psp-needs {
  font-size: 14px; line-height: 1.55; color: var(--ink);
  margin: 12px 0 0; max-width: 68ch;
}
.psp-needs strong { font-weight: 800; }

/* The 11px floor, applied to the spine family (see the header note). */
.psp-name { font-size: 11px; }
.psp-next-lab { font-size: 11px; }

/* --- idea 14: the contracts spine ----------------------------------------- */
.csp-strip { list-style: none; margin: 0; padding: 0 0 4px; }
/* The steps are status, not controls: nothing here is clickable, and the
   cursor must not promise otherwise. */
.csp-step { cursor: default; }

/* A stage the engagement STOPPED at. Ink rather than rust: rust is the colour
   of live progress on this platform, and a dead end is not progress. The cross
   carries the same meaning without colour. */
.psp-stopped {
  border-top-color: var(--ink);
  background: var(--card-2);
}
.psp-stopped .psp-mark { color: var(--ink); font-size: 13px; }
.psp-stopped .psp-name { color: var(--ink); font-weight: 700; }

/* Stages after a stop: never reached, never will be. Quieter than "upcoming"
   and explicitly not dashed-rust like the "next" step, which would imply the
   engagement is still on its way there. */
.psp-never { border-top-color: var(--hairline); }
.psp-never .psp-mark,
.psp-never .psp-name { color: var(--ink-faint); }

/* The ended card as a whole reads quiet, but every line in it stays at full
   contrast, a closed engagement is still a record people have to read. */
.csp-dead { background: var(--card-2); }
.csp-dead .psp-kicker { color: var(--ink-mute); }

/* The "Ended" / "Closed" pill on the next line. White on --ink, the same
   treatment as "You are here", because neither is an invitation to act. */
.csp-lab-end { background: var(--ink); }

@media (max-width: 880px) {
  /* Five steps fit a 390px phone; the project spine's eleven do not, which is
     why that one becomes a fixed-width scroller and this one does not. */
  .csp .psp-step { flex: 1 1 0; min-width: 60px; }
}

/* ############################################################################
   S54 · A5, the right-rail rule (claude/DESIGN-RAILS.md)
   Folded in from styles/_s54-rail.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 / idea 17, the right rail, made to obey one rule.

   Three jobs, all of them consequences of claude/DESIGN-RAILS.md:

   1. THE DARK-GROUND COLOUR RULE (DESIGN-RAILS §6). The rail is --ink, so the
      only correct rust in it is --rust-on-dark (#E0703C, 5.43:1). Ten rail
      selectors were painting text and glyphs in --rust (2.87:1, under AA for
      text AND under the 3:1 non-text bar) or --ink-mute (2.33:1, which is the
      correct secondary on a light card and very nearly invisible here). The
      worst two were .rail-link.is-current, the marker showing which account
      page you are ON, a permanent state rather than a hover, and
      .peer-panel-note, the paragraph that exists to say RoboWorx charges no
      fee on specialist-to-specialist work.

      These are overrides of declarations earlier in pages.css and in
      responsive.css, not new components, because pages.css is owned by nobody
      and this partial is appended to it at integration. The pages.css ones
      simply come later and win at equal specificity; the two in
      responsive.css load AFTER pages.css, so those two are written at higher
      specificity and win on that instead of on order. Both are deliberate ,
      tests/rail-composition-check.mjs resolves the cascade the same way, so a
      new offending declaration still fails the gate.

   2. THE TWO-COLUMN PAGE (R4). renderRightRail now returns nothing when the
      page supplied no rail content, instead of painting a rust "// ACCOUNT"
      eyebrow over 320px of black. Without this rule the .page grid would keep
      its third 320px track and leave a dead gutter.

   3. THE PROFILE'S ACTION BAND (R3). The main column's mirror of the rail's
      primary action, on the light ground at the foot of the profile.
   ============================================================================ */

/* --- 1. Dark-ground colour: the rail is --ink ------------------------------ */

/* The account menu. is-current marks the page you are on; it must be the most
   legible item in the list, not the least. */
.rail-link:hover        { color: var(--rust-on-dark); }
.rail-link.is-current   { color: var(--rust-on-dark); cursor: default; }

/* Field notes. The glyph is a 16px icon carrying meaning next to the kicker,
   so it is held to the 3:1 non-text bar, which --rust misses. */
.tip-glyph              { color: var(--rust-on-dark); }
.tips-foot:hover        { color: var(--rust-on-dark); }

/* The peer panel (a specialist viewing a specialist). The eyebrow is an 11px
   mono kicker; the note is the panel's whole point. */
.peer-panel-eyebrow     { color: var(--rust-on-dark); }
.peer-panel-note        { color: rgba(255, 255, 255, 0.7); }

/* The knowledge-base directory header and the browse context stats. */
.kb-dir-scope           { color: var(--rust-on-dark); }
.context-stat strong span { color: var(--rust-on-dark); }

/* The fee summary in the engagement rail: the total line is the number the
   whole panel exists to show. */
.fee-row.total          { color: var(--rust-on-dark); }

/* The offer panel's invalid-state helper. An error message a buyer has to read
   in order to fix their own input, 11px, at 2.87:1, the least readable text
   on the platform was the text telling someone what they had got wrong. */
.rail-offer .field-help.is-invalid { color: var(--rust-on-dark); }

/* The home page's news rail: the source tag inside the meta line. */
.news-card .meta strong { color: var(--rust-on-dark); }

/* The knowledge-base directory. Four of these, including the marker for the
   article you are CURRENTLY reading, the one item in a 169-article index that
   has to be findable at a glance. */
.kb-disc-sum::before    { color: var(--rust-on-dark); }
.kb-cluster-h           { color: var(--rust-on-dark); }
.kb-link.active         { color: var(--rust-on-dark); }
.kb-link.is-review .kb-flag {
  color: var(--rust-on-dark);
  border-color: var(--rust-on-dark);
}

/* The two in responsive.css, which loads after pages.css, raised specificity
   rather than order. .aside-sheet-title is the label on the mobile slide-over
   header, i.e. the rail's title on every phone render; .aside-toggle-chev is
   the disclosure glyph on a primary-navigation rail. */
.aside .aside-sheet-head .aside-sheet-title { color: var(--rust-on-dark); }
.aside.aside-nav .aside-toggle .aside-toggle-chev { color: var(--rust-on-dark); }

/* --- 2. A page with no rail is two columns, not three --------------------- */

/* :has() is already the idiom here (the project-scope options use it).

   The media query is not decoration. responsive.css collapses .page to a
   single column with a bare `.page { grid-template-columns: minmax(0,1fr) }`,
   specificity 0,1,0, and `.page:not(:has(> .aside))` is 0,2,0, so without the
   guard this rule OUTRANKS the mobile collapse and a rail-less page renders at
   390 as a 140px dead column beside a 250px main. Measured, not guessed: the
   render showed exactly that before the query went in. */
@media (min-width: 881px) {
  .page:not(:has(> .aside)) {
    grid-template-columns: var(--rail-left-w) minmax(0, 1fr);
  }
}

/* --- 3. The profile's main-column action band (R3) ------------------------ */

/* Light ground, so --ink / --ink-mute / --rust are the correct tokens here ,
   the opposite of everything above, which is exactly the distinction
   DESIGN-TYPOGRAPHY §2 asks you to make consciously. */
.prof-act {
  margin: 40px 0 8px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.prof-act-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 12px;
}
.prof-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  background: var(--rust);
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;   /* the own-profile variant is an <a>, not a button */
}
.prof-act-btn:hover { background: var(--rust-dk); }
.prof-act-note {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}

@media (max-width: 880px) {
  /* Full width on a phone: the band is the only route to the offer that does
     not require finding the rail trigger. */
  .prof-act { padding: 22px 20px; }
  .prof-act-btn { width: 100%; }
}

/* ############################################################################
   S54 · A6, supply signal: directory counts, availability decay, saved searches
   Folded in from styles/_s54-supply.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 WAVE W4, THE SUPPLY SIGNAL  (ideas 4, 19, 20)

   Three small surfaces, one theme: say out loud how much supply exists, how
   fresh it is, and what to do when today's answer is "none yet".

     .s54-supply*        idea 4.  The public counts strip. It renders ABOVE the
                                  blur on signed-out /browse and above the
                                  members wall on /search, on the cream page
                                  ground, so every text colour here is an
                                  --ink family token, never white.
     .pill-avail-stale,
     .row-stale-note,
     .stat-pill-stale    idea 19. A declared availability that has gone more
                                  than thirty days unconfirmed. The state is
                                  carried by the WORDS ("Was available 28 May",
                                  "not confirmed since"), never by the colour
                                  alone, so it survives greyscale and colour
                                  blindness.
     .s54-avail-nudge*   idea 19, specialist side. The quiet ask to re-confirm.
     .s54-saved*         idea 20. Saved searches and their standing list.

   Every control here is a link the delegated router already handles, so the
   only interactive rules needed are the 44x44 tap-target floors below.
   Nothing in this file defines a token or repeats one that shell.css owns.
   ============================================================================ */

/* --- Idea 4: the supply strip ---------------------------------------------- */

.s54-supply {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0 20px;
  margin: 0 0 28px;
}
.s54-supply-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.s54-supply-h {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.s54-supply-h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--rust);
}

/* The facts line. The NUMBER is the stat, in the big display weight; the words
   around it are body copy. Never the other way round (the admin surface once
   rendered a text label in the big-number style, and it read as a headline
   that meant nothing). */
.s54-supply-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0 0 14px;
}
.s54-supply-fact {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-mute);
}
.s54-supply-fact strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-right: 3px;
}
.s54-supply-sep {
  color: var(--line);
  font-size: 15px;
}

/* The discipline histogram, as labelled counts. Not a chart: fourteen bars of
   two-to-six specialists each would dramatise how thin the cold start is,
   which is the opposite of the job. */
.s54-supply-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.s54-supply-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--card);
  padding: 6px 10px;
}
.s54-supply-chip-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.s54-supply-chip-n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.s54-supply-note {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0;
}

/* --- Idea 19: availability that decays ------------------------------------- */

/* The softened badge. Measured on the rendered DOM: --rust-dk is 6.50:1 on the
   cream page ground and 7.87:1 on the white pill fill. The WORDS already say
   "Was available", so the colour is reinforcement and never the signal.
   `.row-meta .pill` and `.sr-prefs .pill` both set colour at
   two-class specificity, so the softened tone has to match them or it silently
   loses and the pill renders as a confident --ink. */
.pill.pill-avail-stale,
.row-meta .pill-avail-stale,
.sr-prefs .pill-avail-stale {
  color: var(--rust-dk);
  border-color: var(--rust);
  font-weight: 600;
}
/* The qualifier beside it. 11px is the floor for anything a user must read;
   .row-meta sets 10px for its own metadata, so this states its size. */
.row-stale-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: none;
}
/* The shared status pill, stale tone. Matches the -from tone's weight so the
   pill family stays one family. */
.stat-pill-stale {
  color: var(--rust-dk);
  border-color: var(--rust);
  background: var(--card-2);
}
.stat-pill-stale .stat-pill-dot { background: var(--rust); }

/* The specialist-side nudge on /search. A card, not a banner: it is an ask,
   and it should not read as an error the specialist has caused. */
.s54-avail-nudge {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  background: var(--card-2);
  padding: 16px 18px;
  margin: 0 0 22px;
}
.s54-avail-nudge-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 6px;
}
.s54-avail-nudge-b {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 12px;
}
/* The confirm control is a canonical .btn-s (see _s54-buttons.css): the page's
   primary action is the search itself, so the nudge takes the secondary role
   and mints no button class of its own. */

/* --- Idea 20: saved searches ----------------------------------------------- */

.s54-saved {
  border-top: 1px solid var(--line);
  margin: 28px 0 0;
  padding: 22px 0 4px;
}
.s54-saved-h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.s54-saved-lead {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0 0 14px;
}
/* The save control is a canonical .btn-p and the delete a canonical .btn-q
   (see _s54-buttons.css), so this wave adds no button class of its own; the
   rules below only place them. */
.s54-saved .btn-p { margin-bottom: 4px; }

.s54-saved-msg {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--rust);
}
/* A failure states itself in words as well as in the rule colour. */
.s54-saved-msg-warn {
  color: var(--ink);
  border-left-color: var(--ink);
}

.s54-saved-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.s54-saved-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--hairline);
}
.s54-saved-q {
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.s54-saved-q:hover { color: var(--rust); text-decoration: underline; }
.s54-saved-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* .btn-q supplies the role (quiet, 44x44, mono 11px); this only narrows the
   padding so the delete sits tight at the end of its row. */
.s54-saved-del { padding-left: 10px; padding-right: 10px; }

/* --- Rehoused from a per-render <style> block (pages/search.js) ------------- */
/* PF-080's cold-start honesty notes and the show-more link used to inject their
   own <style> on every render, carrying `var(--ink-soft, #5F5B52)`,
   `var(--hairline, #e4ddcd)` and `var(--card-2, #faf7f0)`. Those fallbacks are
   how --concrete rendered off-brand at 183 sites for months, and a per-page
   style block re-runs on every navigation. Same rules, tokens only, one place.
   --ink-soft on --card-2 measures 6.4:1, comfortably AA at 12px. */
.sr-widened {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px dashed var(--hairline);
  background: var(--card-2);
  padding: 8px 12px;
  margin: 0 0 10px;
}
.sr-more {
  display: block;
  text-align: center;
  padding: 11px 0 4px;
  font-weight: 700;
}

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 640px) {
  .s54-supply { padding: 18px 0 16px; margin-bottom: 22px; }
  .s54-supply-h { font-size: 22px; }
  .s54-supply-line { gap: 4px 8px; }
  .s54-supply-fact { font-size: 14px; }
  .s54-supply-fact strong { font-size: 22px; }
  /* Each fact on its own line at 390px: three baseline-aligned facts with a
     26px number in each wrap into an unreadable stagger otherwise. */
  .s54-supply-line { flex-direction: column; align-items: flex-start; }
  .s54-supply-sep { display: none; }
  .s54-saved-item { padding: 2px 0; }
  /* Full width on its own line, and the 44px floor holds: a saved search is a
     one-tap way back into a brief, and it is the whole point of the list. */
  .s54-saved-q { flex-basis: 100%; min-height: 44px; }
}

/* ############################################################################
   S54 · A7/A8, the assurance filter group
   Folded in from styles/_s54-assurance.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W5 (maturity idea 7), the assurance filter group.

   Styles components/assuranceFilter.js: the control that lets a buyer narrow
   the directory by identity, PI cover, PL cover, right to work and whether a
   certification actually carries its document. It sits in the LIGHT main
   column of /browse and /search, so every text colour here is --ink /
   --ink-mute / --rust; nothing in this partial is ever rendered on a dark
   ground.

   Three things the geometry has to do, none of them decorative:

   - Every option is a 44px tap target (WCAG 2.5.5). The existing .chip is 26px
     tall, which is fine for a mouse and wrong for a shop floor, so this group
     uses its own chip rather than inheriting one it would have to fight.

   - An option that matches nobody must be visibly, non-tappably different
     WITHOUT relying on colour: .is-empty is a span (not a link), dashed, and
     its count reads "0, none yet". The active state likewise carries a tick
     glyph and the word "on", not just a fill.

   - The self-declared / verified distinction is a VISIBLE tag on every group,
     never a hover. .asf-tag-verified is rust; .asf-tag-declared is muted ink,
     deliberately quieter, because the platform's claim about it is quieter.
     Both are legible at 11px, which is the floor for anything a buyer reads.
   ============================================================================ */

.asf {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

/* ---- Head: the kicker and the one honest sentence ------------------------- */
.asf-head { margin-bottom: 20px; }
.asf-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 9px;
}
.asf-lede {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 64ch;
  margin: 0;
}

/* A filter the URL carried but nobody can name. Stated, never silently used. */
.asf-invalid {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--card-2);
  border-left: 3px solid var(--rust);
  padding: 10px 14px;
  margin: 0 0 18px;
  max-width: 64ch;
}

/* ---- Groups ---------------------------------------------------------------- */
.asf-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.asf-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}
.asf-group-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
/* The claim tag. Present on EVERY group, so the buyer never has to remember
   which of the five the platform actually checks. */
.asf-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  border: 1px solid var(--line);
}
.asf-tag-verified {
  color: var(--rust);
  border-color: var(--rust);
}
.asf-tag-declared {
  color: var(--ink-mute);
  border-style: dashed;
}
.asf-group-sub {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0 0 11px;
}

/* ---- Options --------------------------------------------------------------- */
.asf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.asf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px minimum: this is a filter a maintenance engineer taps on a phone in
     a plant, not a desktop-only refinement. */
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.asf-chip-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
}
/* The count. Always a NUMBER (or the "0, none yet" absence), never a label
   dressed as one. */
.asf-chip-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 700;
  white-space: nowrap;
}
.asf-tick {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

.asf-chip:hover,
.asf-chip:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.asf-chip:hover .asf-chip-n,
.asf-chip:focus-visible .asf-chip-n { color: var(--cream); }
.asf-chip:hover .asf-chip-l,
.asf-chip:focus-visible .asf-chip-l { font-weight: 700; }

/* Active: filled, ticked, and its count reads "N on". Three signals, only one
   of which is colour. Tapping it removes the filter. */
.asf-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.asf-chip.is-active .asf-chip-l { font-weight: 700; }
.asf-chip.is-active .asf-chip-n { color: var(--cream); }
.asf-chip.is-active:hover,
.asf-chip.is-active:focus-visible {
  background: var(--rust-dk);
  border-color: var(--rust-dk);
}

/* The group's "Any" while it IS the current state. Ticked and bolder, but
   deliberately NOT filled: the ink fill is reserved for a narrowing that is
   actually applied, and a filled "Any" would tell a buyer a filter is on when
   the footer, correctly, says none is. Not a link, it is where they already
   are. */
.asf-chip.is-default {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--card-2);
  cursor: default;
}
.asf-chip.is-default .asf-chip-l { font-weight: 700; }

/* Zero matches: NOT a link, so it cannot be tapped into an empty page. Dashed
   and dimmed, and its own text says "none yet" so the state survives without
   colour. Kept at 44px so it does not reflow the row when it changes state. */
.asf-chip.is-empty {
  min-height: 44px;
  border-style: dashed;
  border-color: var(--line);
  color: var(--ink-mute);
  cursor: default;
}
.asf-chip.is-empty .asf-chip-n { color: var(--ink-mute); }

/* ---- Applied / empty states ------------------------------------------------ */
.asf-none,
.asf-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.asf-none-t {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}
.asf-foot-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* The one-tap clear. A 44px target in both axes, on both faces. */
.asf-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--rust);
  background: transparent;
  color: var(--rust);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.asf-clear:hover,
.asf-clear:focus-visible {
  background: var(--rust);
  color: #fff;
}

/* ---- Narrow screens -------------------------------------------------------- */
@media (max-width: 560px) {
  /* Chips go full width rather than shrinking below the tap target: a 390px
     viewport fits two per row at this label length only by squeezing them,
     and a squeezed 44px control is a 44px control you miss. */
  .asf-chips { gap: 8px; }
  .asf-chip {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  /* The label takes the slack so the count sits hard right and the tick stays
     beside the words it qualifies, rather than the label drifting to centre. */
  .asf-chip .asf-chip-l { flex: 1 1 auto; }
  .asf-none,
  .asf-foot { align-items: flex-start; flex-direction: column; }
  .asf-clear { width: 100%; justify-content: center; }
}

/* ############################################################################
   S54 · A7, readiness check, starter briefs, job-shape panels
   Folded in from styles/_s54-education.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W5, EDUCATION-FIRST SURFACES (ideas 8, 9, 10)

   Three related surfaces, one visual family, because they are one idea: show a
   first-time buyer what good looks like before anyone asks them for money.

     .rdy-*   /readiness, the six-question readiness check (pages/readiness.js)
     .sbp-*   the starter-brief picker (components/starterBriefPicker.js), used
              inside the readiness page and inside the RFQ composer
     .jsh-*   "the typical shape of this job", the per-discipline panel on every
              knowledge-base page (pages/reference.js + data/jobShapes.js)

   SURFACE MAP, the rule that catches the recurring white-on-light bug:
     everything here sits in the MIDDLE COLUMN, which is --cream. Every text
     colour below is therefore --ink / --ink-mute / --ink-soft / --rust. The
     ONLY exception is the .rdy-rail-* block, which renders inside <aside
     class="aside">, which is --ink; those rules use white and
     rgba(255,255,255,.78), and --rust-on-dark for the accent. Nothing crosses
     over.

   Also here: two corrections to the knowledge-base landing page. Its closing
   caveat paragraph carried `.reference-aside`, a class written for the DARK
   right rail (rgba(255,255,255,.55)), on the cream main column it rendered
   white on cream at roughly 1.1:1, i.e. an invisible paragraph, the same class
   of bug as the S53 first-run panel. pages/reference.js now uses .kb-land-foot
   on its own, defined below on the correct half of the palette.
   ============================================================================ */

/* ============================================================================
   1. /readiness, the six-question check
   ============================================================================ */

.rdy-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 6px 0 18px;
  max-width: 18ch;
}
.rdy-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}
.rdy-lede {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0 0 18px;
}

/* The privacy line is a promise, so it is given the weight of one rather than
   being buried as a footnote after the questions. */
.rdy-privacy {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 62ch;
  margin: 0 0 34px;
  padding: 10px 14px;
  background: var(--card-2);
  border-left: 3px solid var(--line);
  border-radius: 0 4px 4px 0;
}
.rdy-privacy-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin-right: 8px;
}

/* Questions left, the live reading right. The reading is sticky on a wide
   screen so the verdict is always in view as answers change, the change IS
   the feedback, and a verdict you have to scroll to find teaches nothing. */
.rdy-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}
.rdy-questions { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.rdy-q {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--line);
  border-radius: 0 6px 6px 0;
  padding: 20px 22px 22px;
}
.rdy-q.is-answered { border-left-color: var(--rust); }

.rdy-q-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rdy-q-n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}
.rdy-q-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
}
.rdy-q-ask {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 34ch;
}
.rdy-q-why {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 16px;
  max-width: 62ch;
}

/* The three answers. State is never carried by colour alone: the chosen one
   gains a tick glyph, a weight change and a solid left bar, and the option's
   plain-word state ("Ready" / "Partly" / "Not yet") is always on screen. */
.rdy-opts { display: flex; flex-direction: column; gap: 8px; }
.rdy-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  text-align: left;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline);
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.rdy-opt:hover { border-color: var(--line); background: var(--card); }
.rdy-opt.is-on {
  background: var(--card);
  border-color: var(--line);
  border-left-color: var(--rust);
  font-weight: 700;
}
.rdy-opt-mark {
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--rust);
}
.rdy-opt-label { flex: 1 1 auto; min-width: 0; }
.rdy-opt-state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.rdy-opt.is-on .rdy-opt-state { color: var(--rust); }

/* The teaching half. Shown for every answer, including "ready", a buyer who
   said yes still benefits from reading the standard they just claimed. */
.rdy-guide {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.rdy-guide-lab {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 4px;
}
.rdy-guide-good, .rdy-guide-gap {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 66ch;
}
.rdy-guide-gap { color: var(--ink-mute); }
.rdy-guide-kb { margin: 0; }
.rdy-kb {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rdy-kb:hover { color: var(--rust-dk); }
.rdy-kb-sep { color: var(--ink-faint); margin: 0 8px; }

/* --- The reading (the verdict panel) --------------------------------------- */
/* Sticky so the reading stays under the reader's eye while they answer, the
   change IS the feedback. With six gaps listed the panel can exceed the
   viewport, so it scrolls internally rather than pinning a head the reader can
   never scroll past to reach the CTA. */
.rdy-result {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
  border-radius: 0 0 6px 6px;
  padding: 20px 22px 24px;
}
.rdy-result.is-ready { border-top-color: var(--rust); }
.rdy-result.is-work  { border-top-color: var(--ink); }
.rdy-result-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 10px;
}
.rdy-result-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
.rdy-result-body {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 16px;
}

.rdy-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 0;
  margin-bottom: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rdy-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rdy-count strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-right: 5px;
}
.rdy-count.is-ready strong { color: var(--rust); }

.rdy-gaps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rdy-gap { display: flex; flex-direction: column; gap: 6px; }
.rdy-gap-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 3px;
  padding: 2px 7px;
}
.rdy-gap.is-partly .rdy-gap-tag { color: var(--ink-mute); }
.rdy-gap-body { display: flex; flex-direction: column; gap: 5px; }
.rdy-gap-h {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.rdy-gap-good {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.rdy-gap-kb { font-size: 13px; }

/* The way out is always open, at every tone. This block is the difference
   between a mirror and a bouncer, so it is styled as the primary action of the
   panel regardless of how the verdict reads. */
.rdy-onward { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rdy-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}
.rdy-cta:hover { background: var(--rust-dk); color: #fff; }
.rdy-cta-2 {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
  min-height: 24px;
}
.rdy-cta-2:hover { color: var(--rust-dk); }

.rdy-copyrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rdy-copy {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.rdy-copy:hover { border-color: var(--rust); color: var(--rust-dk); }
.rdy-copy-say {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  min-height: 18px;
}
.rdy-reset {
  min-height: 44px;
  padding: 10px 4px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rdy-reset:hover { color: var(--ink); }

/* --- The readiness right rail. DARK GROUND (.aside is --ink) --------------- */
.rdy-rail-p {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 16px;
}
.rdy-rail-links { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.rdy-rail-link {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rust-on-dark);
  text-decoration: none;
  min-height: 24px;
  border-bottom: 1px solid transparent;
  width: fit-content;
}
.rdy-rail-link:hover { border-bottom-color: var(--rust-on-dark); }

/* ============================================================================
   2. The starter-brief picker (.sbp-*)
   Rendered on /readiness and, at integration, inside the RFQ composer.
   ============================================================================ */

.sbp { margin-top: 12px; }
.sbp-head { margin-bottom: 18px; }
.sbp-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 30ch;
}
.sbp-lede {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
  max-width: 66ch;
}
.sbp-cards { display: flex; flex-direction: column; gap: 12px; }

.sbp-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--line);
  border-radius: 0 0 6px 6px;
}
.sbp-card[open] { border-top-color: var(--rust); }

.sbp-sum {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
}
.sbp-sum::-webkit-details-marker { display: none; }
.sbp-sum-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sbp-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
}
.sbp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.sbp-summary {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 64ch;
}
.sbp-bestfor {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 64ch;
}
/* The compact variant, used inside the RFQ composer's scope step: the panel is
   an aid to a form, not the point of the page, so it gives back the vertical
   space the form needs. */
.sbp.is-compact { margin-top: 4px; margin-bottom: 20px; }
.sbp-head.is-compact { margin-bottom: 12px; }
.sbp.is-compact .sbp-h { font-size: 19px; max-width: none; }
.sbp.is-compact .sbp-lede { font-size: 13.5px; }
.sbp.is-compact .sbp-sum { padding: 13px 18px; }
.sbp.is-compact .sbp-name { font-size: 17px; }
.sbp.is-compact .sbp-summary { font-size: 13px; }

/* The confirmation, once a brief has been taken into the draft. Not colour
   alone: a tick glyph and a word. */
.sbp-chip {
  align-self: flex-start;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 3px;
  padding: 2px 8px;
}
.sbp-card.is-used { border-top-color: var(--rust); }

.sbp-open {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust-dk);
  align-self: center;
}
.sbp-card[open] .sbp-open { color: var(--ink-mute); }

.sbp-body { padding: 4px 20px 22px; border-top: 1px solid var(--hairline); }
.sbp-caution {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  background: var(--card-2);
  border-left: 3px solid var(--rust);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  margin: 16px 0 20px;
  max-width: 66ch;
}
.sbp-title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.sbp-title-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
}
.sbp-title-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.sbp-section { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.sbp-section:last-of-type { border-bottom: none; }
.sbp-sec-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 3px;
}
.sbp-sec-why {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 10px;
  max-width: 68ch;
}
.sbp-para {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 66ch;
  white-space: pre-line;
}
.sbp-para:last-child { margin-bottom: 0; }
.sbp-list { margin: 0; padding-left: 20px; max-width: 66ch; }
.sbp-list li {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 6px;
}

.sbp-act { padding-top: 18px; }
.sbp-use {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.sbp-use:hover { background: var(--rust-dk); color: #fff; }
.sbp-used {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--card-2);
  border-left: 3px solid var(--rust);
  border-radius: 0 4px 4px 0;
  padding: 12px 14px;
  margin: 0;
  max-width: 66ch;
}

/* ============================================================================
   3. "The typical shape of this job" (.jsh-*), on every /reference page
   ============================================================================ */

.jsh {
  margin-top: 40px;
  padding: 24px 26px 26px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 4px solid var(--rust);
  border-radius: 0 0 6px 6px;
  max-width: 860px;
}
.jsh-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 8px;
}
.jsh-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
/* The provenance line sits ABOVE the numbers, not below them in small print.
   A reader must meet the caveat before they meet the figure it qualifies. */
.jsh-prov {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  margin: 0 0 20px;
  max-width: 70ch;
}

.jsh-bands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.jsh-band {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 16px 18px;
}
.jsh-band-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
/* Stat-number role: a NUMBER only. The words that qualify it live in
   .jsh-band-unit and .jsh-band-note, never in this style. */
.jsh-band-fig {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.jsh-band-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 5px;
}
.jsh-band-note {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 12px 0 0;
}
.jsh-band-dur { margin-top: 0; color: var(--ink); font-size: 14.5px; }

.jsh-sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
}
.jsh-forgots { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jsh-forgot { display: flex; gap: 12px; align-items: flex-start; }
.jsh-forgot-n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.jsh-forgot-t {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;
}

.jsh-acc {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
  border-left: 4px solid var(--rust);
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 0 0 12px;
  max-width: 68ch;
}
.jsh-acc-why {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 22px;
  max-width: 68ch;
}

.jsh-caveats {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jsh-caveats li {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  padding-left: 14px;
  position: relative;
  max-width: 70ch;
}
.jsh-caveats li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

.jsh-onward { margin: 0; }
.jsh-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--rust);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rust-dk);
  text-decoration: none;
}
.jsh-cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ============================================================================
   4. Knowledge-base landing corrections (see the header note)
   ============================================================================ */
.kb-land-buyer {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  margin: 0 0 16px;
  max-width: 70ch;
}
.kb-land-buyer-a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-land-buyer-a:hover { color: var(--rust-dk); }
/* The fourteen discipline-card CTAs were set at 10px, under the 11px floor for
   anything a user has to read. Contrast was never the problem (7.86:1); size
   was. Bumped to 11px, which is the documented minimum for a mono label. */
.kb-land-card-cta { font-size: 11px; }

/* Was rendering white-on-cream at ~1.1:1 via .reference-aside. */
.kb-land-foot {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 70ch;
  margin-top: 8px;
}

/* ============================================================================
   5. Narrow screens (measured at 390)
   ============================================================================ */
/* Below 1280 the middle column is 692px at most: two columns would leave the
   questions at ~340px, which is roughly 38 characters a line. Stack instead. */
@media (max-width: 1279px) {
  .rdy-cols { grid-template-columns: minmax(0, 1fr); }
  /* Sticky loses its meaning once the panel is stacked under the questions,
     and a sticky block in a single column can cover the content behind it. */
  .rdy-result { position: static; max-height: none; overflow-y: visible; }
}

@media (max-width: 720px) {
  .rdy-h1 { font-size: 32px; max-width: none; }
  .rdy-lede { font-size: 15.5px; }
  .rdy-q { padding: 16px 16px 18px; }
  .rdy-q-ask { font-size: 19px; max-width: none; }
  /* At 390 the option label, the tick and the state word cannot share a row
     without the label wrapping to four lines. The tick stays beside the label;
     only the state word drops to a second row, indented to the label's edge.
     (An earlier arrangement gave the tick a row of its own, which left an
     empty line above every unanswered option.) */
  .rdy-opt { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; }
  .rdy-opt-mark { order: 1; flex: 0 0 18px; }
  .rdy-opt-label { order: 2; flex: 1 1 0; }
  .rdy-opt-state { order: 3; flex: 1 1 100%; margin-left: 30px; margin-top: 4px; }
  .rdy-result { padding: 18px 16px 20px; }
  .rdy-result-h { font-size: 20px; }

  .sbp-h { font-size: 20px; max-width: none; }
  .sbp-sum { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .sbp-open { align-self: flex-start; }
  .sbp-name { font-size: 17px; }
  .sbp-body { padding: 4px 16px 20px; }

  .jsh { padding: 18px 16px 20px; }
  .jsh-h { font-size: 22px; }
  .jsh-bands { grid-template-columns: minmax(0, 1fr); }
  .jsh-band-fig { font-size: 26px; }
  .jsh-cta { font-size: 13px; }
}

/* ############################################################################
   S54 · A10, the cost-and-duration estimator
   Folded in from styles/_s54-estimator.css at integration. The partial existed
   only so ten parallel agents could not overwrite each other in this file.
   ############################################################################ */

/* ============================================================================
   S54 W7 (idea 6): the cost-and-duration estimator (/estimator).

   Styles pages/estimator.js: the archetype chooser, the question set, the
   cost and duration bands, the driver and unknown lists, the cost-line
   breakdown, and the not-a-quote footer.

   Every surface here is LIGHT (#fff, --card-2, --sand on the cream page
   ground), so every text colour is --ink / --ink-mute / --ink-soft and every
   accent is --rust. Nothing on this page sits on a dark ground except the
   shell's own right rail, which pages.css already owns, so there is no
   white-on-light text anywhere in this file, which is the mistake this
   project has shipped three times.

   Tokens only, per claude/DESIGN-TYPOGRAPHY.md: no literal hex, no literal
   font family, and never a hex fallback inside a var(). Mono is labels,
   kickers, units and
   money bands only, never a sentence. The band figures are the stat-number
   role and are always a NUMBER (a range of two), never a word.

   Written as if it were already inside pages.css: no @import, no :root.
   ============================================================================ */

/* --- provenance: said once, prominently, before anything else -------------- */
.est-provenance {
  margin: 0 0 36px;
  padding: 16px 18px;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  border-radius: 8px;
  max-width: 66ch;
}
.est-provenance-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.est-provenance p {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.est-provenance p:last-child { margin-bottom: 0; color: var(--ink-mute); font-size: 13.5px; }

/* --- section rhythm --------------------------------------------------------- */
.est-section { margin: 0 0 44px; }
.est-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.est-h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--rust);
}
.est-note {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 66ch;
  margin: 0 0 18px;
}
.est-duration-why { margin-top: 14px; }

/* Knowledge-base links: the estimator's whole claim is that its assumptions
   are checkable, so the link is a visible affordance, not a subtle one. */
.est-kb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.est-kb:hover { color: var(--rust-dk); }
/* A standalone "read the article" link is not inline in a sentence, so the
   WCAG 2.5.8 inline exception does not cover it: on a phone it becomes a
   full-height row you can actually hit. */
.est-kb-line {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 6px;
}

/* --- archetype chooser ------------------------------------------------------ */
.est-archs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.est-arch {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'radio name' 'radio sum';
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 16px 18px;
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.est-arch input {
  grid-area: radio;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--rust);
}
.est-arch-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.est-arch-sum {
  grid-area: sum;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.est-arch:hover { border-color: var(--rust); }
/* Selection carries a border, a ground AND a bolder name, so it never rests
   on colour alone. */
.est-arch.is-on {
  border-color: var(--rust);
  border-width: 2px;
  padding: 15px 17px;
  background: var(--sand);
}
.est-arch.is-on .est-arch-name { font-weight: 800; }

/* --- questions -------------------------------------------------------------- */
.est-form { display: flex; flex-direction: column; gap: 22px; }
.est-q {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 20px;
  background: var(--card);
}
/* An unanswered question is marked with an edge as well as a word, because
   "still open" is state and state is never carried by colour alone. */
.est-q.is-unknown { border-left: 3px solid var(--rust); }
.est-q-label {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  padding: 0;
}
.est-q-help {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 62ch;
}
.est-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.est-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
}
.est-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rust); }
.est-opt-text { display: flex; flex-direction: column; gap: 2px; }
.est-opt-label {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.est-opt-note {
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.est-opt:hover { border-color: var(--rust); }
.est-opt.is-on {
  border-color: var(--rust);
  background: var(--sand);
}
.est-opt.is-on .est-opt-label { font-weight: 700; }
.est-opt-unsure { border-style: dashed; }
.est-q-why {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 66ch;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}
.est-select {
  margin-top: 12px;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* --- the headline bands ----------------------------------------------------- */
.est-headline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.est-band {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.est-band-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
/* The stat-number role: always a range of NUMBERS, never a word. */
.est-band-n {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.est-band-l {
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
/* The vaguer the input, the plainer the presentation: a wide band should not
   look like a confident answer. */
.est-headline.is-vague .est-band { background: var(--card-2); border-style: dashed; }
.est-headline.is-vague .est-band-n { color: var(--ink-mute); }

.est-precision {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 66ch;
}
.est-precision-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rust);
  margin-right: 6px;
}
.est-edge {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 66ch;
}

/* --- drivers ---------------------------------------------------------------- */
.est-drivers, .est-unknowns, .est-lines, .est-excls, .est-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.est-driver {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.est-driver-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}
.est-driver-q {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
/* Direction is carried by the WORD ("adds"/"takes off"), not by the colour;
   the colour only reinforces it. */
.est-driver-effect {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.est-driver.is-up .est-driver-effect { color: var(--rust); }
.est-driver-answer {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.est-driver-why {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 66ch;
}

/* --- unknowns: the useful half of the page ---------------------------------- */
.est-unknown {
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  border-radius: 10px;
}
.est-unknown-q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.est-findout {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 66ch;
}
.est-findout-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 3px;
}
.est-outcomes-k {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.est-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.est-outcome-l {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.est-outcome-b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* --- the cost-line breakdown ------------------------------------------------ */
.est-group {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.est-group-h {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.est-group-band {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.est-group-days {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.est-line { padding: 12px 0; border-top: 1px solid var(--hairline); }
.est-line-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  justify-content: space-between;
}
.est-line-label {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.est-line-band {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.est-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 6px;
}
.est-line-days {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
/* Provenance, on every single line. A figure whose source is not stated is a
   figure this page is not allowed to show. */
.est-basis {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 9px;
}
.est-basis.is-platform { color: var(--rust); border-color: var(--rust); }
.est-line-why {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 66ch;
}
.est-group-cont { background: var(--card-2); }
/* The subtotal and total rows exist so a reader can add the breakdown up and
   land on the headline. A breakdown that does not reconcile is a reason to
   distrust everything else on the page. */
.est-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 18px;
  margin-bottom: 18px;
  border-top: 2px solid var(--line);
}
.est-sum-l {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.est-sum-b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.est-sum-total { border-top-color: var(--rust); }
.est-sum-total .est-sum-b { font-size: 17px; }

/* --- the repeat-unit insight ------------------------------------------------ */
.est-repeat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.est-repeat-cell {
  padding: 16px 18px;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.est-repeat-n {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

/* --- exclusions ------------------------------------------------------------- */
.est-excl {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.est-excl-l {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.est-excl-n {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 66ch;
}

/* --- the two closing panels ------------------------------------------------- */
.est-firststep, .est-next {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.est-firststep p, .est-next p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 66ch;
}
.est-next-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* --- the right rail's reading list ------------------------------------------ */
/* On the dark rail, so the accent must be --rust-on-dark (5.43:1), never
   --rust (2.87:1), the exact bug S53 found at 183 sites. */
.est-rail-reading { list-style: none; margin: 0 0 16px; padding: 0; }
.est-rail-reading li { margin-bottom: 8px; }
.est-rail-reading .est-kb { color: var(--rust-on-dark); }
.est-rail-reading .est-kb:hover { color: #fff; }

/* --- narrow ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .est-archs, .est-headline, .est-repeat { grid-template-columns: 1fr; }
  .est-h2 { font-size: 24px; }
  .est-band-n { font-size: 26px; }
  .est-group-h, .est-line-head, .est-outcome, .est-driver-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .est-next-cta > * { flex: 1 1 100%; text-align: center; }
  /* On a phone the standalone article links become their own tappable row
     rather than a 13px-tall line of text. */
  .est-kb-line { display: flex; min-height: 44px; }
}

/* =============================================================================
   S55 · W8a, Cell Sketch (/cell-sketch)

   Styles pages/cellSketch.js and components/cellSchematic.js: the archetype
   chooser, the question grid, the verdict headline, the two drawings, the
   rule table and the generated brief.

   Written against the estimator's vocabulary on purpose (.est-* is the nearest
   relative, same posture, same banded numbers, same public education
   surface), so the two read as one family rather than two tools that happened
   to land in the same codebase. Sizes and weights come from
   claude/DESIGN-TYPOGRAPHY.md; the Button role is .rail-btn, unchanged.
   ============================================================================= */

.ss-head { margin: 0 0 34px; }
.ss-kick {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 10px;
}
.ss-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
}
.ss-h1 em, .ss-h2 em, .ss-h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--rust);
}
.ss-lede {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 68ch;
  margin: 0;
}

/* --- section rhythm --------------------------------------------------------- */
.ss-section { margin: 0 0 44px; }

/* ============================================================================
   S57d, the pre-fill banner. Tokens only, no literals.

   It sits ABOVE the chooser and it is deliberately quiet: a bordered well
   rather than a coloured card. The founder's standing objection to this whole
   class of feature is that a form arriving fully filled invites a buyer to
   accept guesses as facts, so the block's job is to be READ, not to look
   clever. The two source badges are the point of it: "you said this" and
   "follows from your words" are different claims and must not look alike.
   ========================================================================= */
.ss-pf {
  border: 1px solid var(--line);
  border-left: 3px solid var(--rust);
  background: var(--sand);
  padding: 22px 24px;
  border-radius: var(--radius-card);
}
.ss-pf-q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
}
.ss-pf-list { list-style: none; margin: 16px 0 0; padding: 0; }
.ss-pf-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px 12px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.ss-pf-v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ss-pf-s {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
/* Solid for a figure the buyer typed, dashed for one we concluded. Same
   distinction the rule table draws between a standard and a judgement, and
   for the same reason. */
.ss-pf-stated  { color: var(--rust); border-color: var(--rust); }
.ss-pf-implied { color: var(--ink-mute); border-color: var(--ink-mute); border-style: dashed; }
.ss-pf-w {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ss-pf-never {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 720px) {
  .ss-pf-row { grid-template-columns: 1fr; gap: 4px; }
  .ss-pf-s { justify-self: start; }
}
.ss-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ss-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 26px 0 8px;
}
.ss-note {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 66ch;
  margin: 0 0 18px;
}
.ss-kb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ss-kb:hover { color: var(--rust-dk); }

/* --- archetype chooser ------------------------------------------------------ */
.ss-archs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ss-arch {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'radio kick' 'radio name' 'radio sum';
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  padding: 16px 18px;
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.ss-arch input {
  grid-area: radio;
  width: 18px; height: 18px;
  margin-top: 4px;
  accent-color: var(--rust);
}
.ss-arch-kick {
  grid-area: kick;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--rust);
}
.ss-arch-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.ss-arch-sum {
  grid-area: sum;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.ss-arch:hover { border-color: var(--rust); }
/* Selection carries a border, a ground AND a bolder name, never colour alone. */
.ss-arch.is-on {
  border-color: var(--rust);
  border-width: 2px;
  padding: 15px 17px;
  background: var(--sand);
}
.ss-arch.is-on .ss-arch-name { font-weight: 800; }

/* --- questions -------------------------------------------------------------- */
/* The space block: the drawing and the three fields side by side, so a figure
   and the thing it measures are never more than a glance apart. Below 900px
   the drawing goes above the fields rather than shrinking to nothing, because
   a diagram you cannot read is worse than no diagram. */
.ss-bay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ss-bay-figs {
  /* start, NOT stretch: the panel is as tall as its two drawings and no
     taller. Left to stretch it matched the three-card column and left a
     hand's depth of empty cream under the elevation, which reads as a
     missing thing rather than as space. */
  align-self: start;
  position: sticky;
  top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--card);
}
.ss-bay-svg { width: 100%; height: auto; display: block; }
.ss-bay-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ss-bay-extra { margin-top: 14px; }
@media (max-width: 900px) {
  .ss-bay { grid-template-columns: 1fr; }
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* CARDS IN A ROW ARE THE SAME HEIGHT AND THEIR INPUTS LINE UP. Measured at
   S57f, the four cards in a row came out 132, 151, 190 and 222 px tall,
   because each one is only as tall as its own help text, and the inputs
   therefore sat at four different heights across one row. Nobody reads that
   as four equal questions; they read it as a page assembled without looking
   at it, which is precisely what the founder said.

   The card is a column and the row is `align-items: stretch` by default, so
   every card in a row matches the tallest. NUMBER inputs are pinned to the
   bottom (`margin-top: auto`) so every input in a row sits on one line.
   Option stacks are NOT pinned: their heights vary, so pinning aligns
   nothing and opens a dead gap between a question and its answers, which is
   the S57h screenshot. */
.ss-q {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--card);
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ss-q .ss-num { margin-top: auto; }
.ss-q .ss-num,
.ss-q .ss-opts { padding-top: 12px; }
.ss-q-l {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 4px;
  padding: 0;
}
.ss-q-h {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.ss-num { display: flex; align-items: center; gap: 8px; }
.ss-input {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
  max-width: 160px;
}
.ss-input:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
.ss-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
}
.ss-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.ss-opt input { width: 16px; height: 16px; accent-color: var(--rust); }
.ss-opt:hover { border-color: var(--rust); }
.ss-opt.is-on {
  border-color: var(--rust);
  border-width: 2px;
  padding: 7px 13px;
  background: var(--sand);
  font-weight: 700;
}

/* --- the verdict ------------------------------------------------------------ */
.ss-verdict {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 24px 26px;
  background: var(--card);
}
.ss-verdict.is-ok    { border-left-color: var(--rust); }
.ss-verdict.is-tight { border-left-color: var(--concrete); }
.ss-verdict.is-no    { border-left-color: var(--ink); }

.ss-headline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.ss-hl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  min-width: 0;
}
.ss-hl-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--rust);
}
.ss-hl-v {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ss-hl-s {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.ss-classnote {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 66ch;
  margin: 0 0 20px;
}

.ss-checks { display: flex; flex-direction: column; gap: 10px; }
.ss-check {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'label verdict' 'num verdict' 'advice advice';
  gap: 3px 14px;
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.ss-check-l {
  grid-area: label;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ss-check-n {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
/* The verdict word carries its own border and weight, so it never rests on
   colour alone, the same rule the fit states in the checks list follow. */
.ss-check-v {
  grid-area: verdict;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.ss-v-fits    .ss-check-v { color: var(--rust);   border-color: var(--rust); }
.ss-v-tight   .ss-check-v { color: var(--ink);    border-color: var(--ink); font-weight: 700; }
.ss-v-depends .ss-check-v { color: var(--ink);    border-color: var(--ink); font-weight: 700; }
.ss-v-no      .ss-check-v { color: var(--cream);  background: var(--ink); border-color: var(--ink); font-weight: 700; }
/* The three ADVISORY verdicts (S57b). A check that is not about a measurement
   fitting inside another one, "do you hold the PLC program", "how many
   megapixels", was previously scored on the fit scale and came out saying
   "Does not fit", which is not a sentence about a PLC program. They are
   deliberately quieter than the fit states: 'settled' is a resolved question
   and reads calm, 'risk' is the only one that shouts, and it shouts the same
   way 'no' does so a reader learns one visual language, not two. */
.ss-v-settled .ss-check-v { color: var(--rust);   border-color: var(--rust); }
.ss-v-watch   .ss-check-v { color: var(--ink);    border-color: var(--ink); font-weight: 700; }
.ss-v-risk    .ss-check-v { color: var(--cream);  background: var(--ink); border-color: var(--ink); font-weight: 700; }
.ss-check-a {
  grid-area: advice;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 6px 0 0;
  max-width: 72ch;
}

.ss-rate {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--concrete);
  border-radius: 10px;
  background: var(--card-2);
}
.ss-rate.is-ok    { border-left-color: var(--rust); }
.ss-rate.is-no    { border-left-color: var(--ink); }
.ss-rate-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--rust);
  margin-bottom: 4px;
}
.ss-rate-v {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.ss-rate-n {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 6px 0 0;
  max-width: 72ch;
}

/* --- the drawings ----------------------------------------------------------- */
.ss-plan, .ss-elevwrap {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
  padding: 18px;
}
/* Wide drawings scroll inside their own container rather than pushing the
   page sideways, the geometric-overflow rule from the S54 design gate. */
.ss-plan { overflow-x: auto; }
.ss-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ss-elevwrap {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 20px;
  align-items: center;
}
.ss-elev-t .ss-h3 { margin-top: 0; }
.ss-elev-t .ss-note { margin-bottom: 0; }

/* --- flags ------------------------------------------------------------------ */
.ss-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ss-flag {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--concrete);
  border-radius: 10px;
}
.ss-f-stop       { border-left-color: var(--ink); }
.ss-f-assumption { border-left-color: var(--line); }
.ss-flag-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--rust);
  margin-bottom: 4px;
}
.ss-flag-t {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 74ch;
}
.ss-flag-kb { display: inline-flex; align-items: center; min-height: 44px; }

/* --- the rule table --------------------------------------------------------- */
.ss-rt-group { margin: 0 0 22px; }
.ss-rt-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.ss-rt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'label value basis' 'workings workings workings' 'why why why';
  gap: 2px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.ss-rt-row:last-child { border-bottom: 0; }
.ss-rt-l {
  grid-area: label;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ss-rt-v {
  grid-area: value;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ss-rt-b {
  grid-area: basis;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mute);
  white-space: nowrap;
  align-self: start;
}
/* A standard is not a judgement and the two must never look alike. Four bases
   now, and each one has to be distinguishable from the others without reading
   the word: solid rust for a published standard, solid ink for manufacturer
   data, dashed ink for our own field practice (the rows to argue with), and
   dotted for the reader's own answer, which is the only class of row where a
   wrong figure is not ours to fix. 'market' had no rule at all and fell
   through to the muted default, so it looked less certain than practice, the
   exact inversion of the truth. */
.ss-b-standard { color: var(--rust); border-color: var(--rust); }
.ss-b-market   { color: var(--ink); border-color: var(--ink); }
.ss-b-practice { color: var(--ink); border-color: var(--ink); border-style: dashed; }
.ss-b-stated   { color: var(--ink-mute); border-color: var(--ink-mute); border-style: dotted; }
.ss-rt-w {
  grid-area: workings;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 4px 0 0;
  max-width: 78ch;
}
.ss-rt-y {
  grid-area: why;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 4px 0 0;
  max-width: 74ch;
}
.ss-srcs { list-style: none; margin: 0 0 20px; padding: 0; }
.ss-src {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.ss-src-l {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--rust);
}
.ss-src-t { font-family: var(--font-display); font-size: 14px; color: var(--ink); line-height: 1.45; }
.ss-src-n { font-family: var(--font-display); font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
.ss-warn {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0 0;
  max-width: 74ch;
}

/* --- the brief -------------------------------------------------------------- */
.ss-open {
  border: 1px solid var(--rust);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--sand);
  margin: 0 0 18px;
}
.ss-open .ss-h3 { margin-top: 0; }
.ss-bl {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 74ch;
}
.ss-bl li { margin-bottom: 6px; }
.ss-bp {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 74ch;
}
.ss-bfull {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
  padding: 0 20px;
  margin: 0 0 18px;
}
.ss-bfull-s {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
  padding: 16px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ss-bsecs, .ss-rt-body { padding-bottom: 8px; }
.ss-bsec { padding: 14px 0; border-top: 1px solid var(--hairline); }
.ss-bsec-h {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 3px;
}
.ss-bsec-w {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0 0 8px;
  max-width: 70ch;
}
.ss-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.ss-acts-n { margin-bottom: 0; }
.ss-fail {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: var(--card);
  font-family: var(--font-display);
  color: var(--ink);
}

/* --- narrow ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .ss-h1 { font-size: 34px; }
  .ss-h2 { font-size: 24px; }
  .ss-archs, .ss-grid, .ss-headline { grid-template-columns: 1fr; }
  .ss-elevwrap { grid-template-columns: 1fr; }
  .ss-verdict { padding: 18px; }
  .ss-check {
    grid-template-columns: 1fr;
    grid-template-areas: 'label' 'num' 'verdict' 'advice';
  }
  .ss-check-v { justify-self: start; }
  .ss-rt-row {
    grid-template-columns: 1fr;
    grid-template-areas: 'label' 'value' 'basis' 'workings' 'why';
  }
  .ss-rt-b { justify-self: start; margin-top: 4px; }
  .ss-acts > * { flex: 1 1 100%; text-align: center; }
  .ss-input { max-width: none; }
  /* WCAG 2.5.8: on a phone the radios themselves become 24px, not just the
     label around them. The design gate caught these at 18x18 with a neighbour
     centre inside 24px, the label is a 44px row, but the control inside it
     was not, and the gate is right that the control is what a thumb aims at. */
  .ss-arch input, .ss-opt input { width: 24px; height: 24px; margin-top: 1px; }
}

/* =============================================================================
   S56, /tools, the free-tools hub

   A signpost, so the type does almost all the work and there is very little
   chrome. Sizes are the documented roles only (H1 46/34, H2 28, H3 20, body
   16/14, metadata 13, mono kicker 11 at .13em), the S55c lesson was that
   inventing half-steps is what made a page stop looking like RoboWorx.
   ============================================================================= */

.th-head { margin: 0 0 32px; max-width: 68ch; }
.th-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 10px;
}
.th-h1 {
  font-family: var(--font-display); font-weight: 900; font-size: 46px;
  line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px;
}
.th-h1 em, .th-h2 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--rust);
}
.th-lede {
  font-family: var(--font-display); font-size: 16px; line-height: 1.6;
  color: var(--ink-mute); margin: 0;
}

.th-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.th-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 24px; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none;
}
.th-card:hover { border-color: var(--rust); }
.th-card:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
/* The lead tool spans the row: it is the one most people arrive wanting. */
.th-card.is-lead { grid-column: 1 / -1; background: var(--sand); border-color: var(--rust); }

.th-kick {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  color: var(--rust);
}
/* The QUESTION is the headline, because it is what the reader is holding in
   their head. The product name is secondary and set as metadata. */
.th-q {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
}
.th-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.th-body {
  font-family: var(--font-display); font-size: 14px; line-height: 1.6;
  color: var(--ink-mute);
}
.th-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 8px;
}
.th-cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--rust); margin-top: 10px;
  display: inline-flex; align-items: center; min-height: 24px;
}
.th-card:hover .th-cta { color: var(--rust-dk); }

.th-after { margin: 40px 0 0; }
.th-h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px;
}
.th-note {
  font-family: var(--font-display); font-size: 14px; line-height: 1.6;
  color: var(--ink-mute); max-width: 66ch; margin: 0 0 18px;
}
.th-acts { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .th-h1 { font-size: 34px; }
  .th-h2 { font-size: 24px; }
  .th-grid { grid-template-columns: 1fr; }
  .th-acts > * { flex: 1 1 100%; text-align: center; }
}

/* S56, the four-questions flow on /scope-sketch. The step numeral is a
   wayfinding device, not decoration: the page is a sequence now and it has to
   read as one. Mono, because every other label on the platform is. */
.ss-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 10px; vertical-align: 3px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--cream); background: var(--rust); border-radius: 999px;
}
.ss-refine {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--card); padding: 0 20px; margin: 0 0 44px;
}
.ss-refine-s {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--rust); cursor: pointer;
  padding: 16px 0; min-height: 44px; display: flex; align-items: center;
}
.ss-refine-body { padding-bottom: 16px; }
@media (max-width: 860px) {
  .ss-step { width: 24px; height: 24px; font-size: 12px; margin-right: 8px; }
}

/* S57b, the footer. EXPLORE had grown to eleven links and the footer had
   become the tallest thing on several pages. Help now sits as a second group
   under "Who it's for", which balances the five columns instead of leaving one
   of them twice the height of the rest. */
.ft-col-h2 { margin-top: 22px; }

.th-lede2 { margin-top: 12px; color: var(--ink-soft); }