/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Design tokens — see DESIGN.md. "Fieldwork" (dark) and "Plat Room" (light). The
   theme is the viewer's preference (Light, Dark or System), resolved to
   data-theme on <html> by the head script and theme.js; light is the no-JS default.
   --primary is the interactive colour (buttons, links, the active tab, focus);
   --accent is data only (selection, score shading, map layers). */

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0E1419;
  --panel: #151C23;
  --panel-2: #1B242C;
  --rule: #25303A;
  --rule-strong: #35424E;
  --ink: #E6EBF0;
  --muted: #8896A3;
  --primary: #4FA3BF;
  --primary-hover: #6DB6CE;
  --on-primary: #0E1419;
  --accent: #FF6A2B;
  /* The accent where it must be read as small text (AA on every panel). */
  --accent-text: #FF6A2B;
  /* Reserved for live/active states only (GPS cursor, import pulse) — never buttons or selection. */
  --live: #C9E63C;
  --success: #6C9C57;
  --warning: #D9A441;
  --error: #E25B5B;
  --info: #6FA8B8;
  --map-land: #111920;
  --map-road: #35424E;
  --map-water: #0A1218;
  /* Power grid layer: reported transmission lines by voltage class, cool slate
     steps that never approach the data orange. */
  --grid-low: #566B7A;
  --grid-mid: #7A9AAE;
  --grid-high: #A8C8DB;
  --grid-xhigh: #E6EBF0;
  --grid-unknown: #4A5A66;
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* The dimmed page behind a modal dialog. */
  --scrim: rgba(5, 9, 12, 0.62);
}

:root,
:root[data-theme="light"],
/* A report slide is a sheet of paper: Plat Room in either theme, on screen and
   in print (DESIGN.md § Reports). */
.report-slide {
  color-scheme: light;
  --canvas: #FFFFFF;
  --panel: #F6F8FA;
  --panel-2: #EEF2F5;
  --rule: #E1E6EB;
  --rule-strong: #C3CBD3;
  --ink: #14202B;
  --muted: #5B6875;
  --primary: #0B4A5E;
  --primary-hover: #083A4A;
  --on-primary: #FFFFFF;
  --accent: #D95000;
  /* #D95000 is 4.1:1 on white; as small text the accent takes this deeper step. */
  --accent-text: #B84600;
  /* Hi-vis needs darkness; in light mode live states fall back to the accent. */
  --live: #B84600;
  --success: #4A7239;
  --warning: #8B5F0C;
  --error: #C43333;
  --info: #336B7B;
  --map-land: #F1F4F7;
  --map-road: #C3CBD3;
  --map-water: #DDE6EC;
  --grid-low: #8798A6;
  --grid-mid: #5C788C;
  --grid-high: #2F566B;
  --grid-xhigh: #14202B;
  --grid-unknown: #B2BCC5;
  --shadow-pop: 0 4px 12px rgba(20, 32, 43, 0.08);
  --scrim: rgba(20, 32, 43, 0.45);
}

:root {
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radius scale: controls 4, containers 6, chips and tags 3; data cells,
     score cells, register hairline boxes and provenance stamps stay 2. */
  --r-ctl: 4px;
  --r-box: 6px;
  --r-chip: 3px;
  --r-data: 2px;

  /* Hover and focus transitions: functional, never decorative. */
  --t-ui: 150ms ease-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Auth plate (sign-in) — drafted per DESIGN.md: hairlines, 2px radius --- */

.auth {
  /* Below the site header. */
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.auth-plate {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
  padding: var(--space-xl);
}

.auth-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.auth-wordmark {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.auth-baseline {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.auth-alert {
  border: 1px solid var(--error);
  border-left-width: 3px;
  border-radius: var(--r-box);
  background: var(--canvas);
  padding: var(--space-sm) 12px;
  font-size: 13px;
  margin-bottom: var(--space-md);
}

.field-label {
  display: block;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 13px;
  padding: 9px 10px;
  margin-bottom: var(--space-md);
}

.field-input:focus {
  outline: none;
  border-color: var(--primary);
}

.btn-primary {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
}

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

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-sm);
}

.account-row .field-label {
  margin-bottom: 0;
}

.account-value {
  font-family: var(--font-data);
  font-size: 12.5px;
}

#current-account .account-value {
  text-align: right;
}

.account-terms {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-md);
}

.account-terms .field-label {
  margin-bottom: var(--space-xs);
}

.account-terms__text {
  font-size: 13px;
  color: var(--ink);
}

.account-terms__text a {
  color: var(--primary);
}

.account-rename,
.account-new {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-md);
}

.account-rename .field-input,
.account-new .field-input {
  margin-bottom: var(--space-sm);
}

.account-rename__button {
  margin-top: 0;
}

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.account-list li[aria-current] {
  font-weight: 600;
}

.btn-secondary {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  background: none;
  color: var(--ink);
  cursor: pointer;
  margin-top: var(--space-md);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The Settings page carries a list of people: wider than the sign-in plate. */
.auth-plate--wide {
  max-width: 640px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Members and invitations (DESIGN.md: Members and invitations). Ruled rows on
   hairlines; roles are stamps, never colours. */
.members {
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-md);
}

.members .field-label {
  margin-bottom: var(--space-xs);
}

.members__subhead {
  margin-top: var(--space-lg);
}

.members__note {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.member-list,
.activity {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}

.member {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.member--muted {
  color: var(--muted);
}

.member__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}

.member__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.member__name--mono {
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 500;
}

.member__you {
  font-size: 12.5px;
  color: var(--muted);
}

.member__email {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 2px;
}

.role-stamp {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  padding: 1px 5px;
}

.member__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.member__actions form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.member__actions .field-input {
  width: auto;
  margin-bottom: 0;
  padding: 5px 8px;
  font-size: 12.5px;
}

.btn-inline {
  width: auto;
  margin-top: 0;
  padding: 5px 12px;
  font-size: 12.5px;
}

.btn-secondary.btn-inline {
  display: inline-block;
}

/* A confirmation in the row, without a script: <details> opens it. */
.confirm > summary {
  list-style: none;
  cursor: pointer;
}

.confirm > summary::-webkit-details-marker {
  display: none;
}

.confirm__body {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  font-size: 12.5px;
  max-width: 420px;
}

.confirm__body p {
  margin-bottom: var(--space-sm);
}

.confirm--leave {
  margin-top: var(--space-md);
}

.invite-form {
  margin-top: var(--space-md);
}

.invite-form .field-input {
  max-width: 420px;
}

.invite-form .btn-primary {
  width: auto;
}

/* Passkeys (DESIGN.md: Passkeys): the Members rows and the page's own buttons;
   only the add form's spacing is new. Shown by passkeys.js where WebAuthn exists. */
.passkeys__add {
  margin-top: var(--space-md);
}

.passkeys__add .field-input,
.passkeys__rename .field-input {
  max-width: 420px;
}

.passkeys__add .btn-primary {
  width: auto;
}

.passkeys__add .members__note {
  margin: var(--space-sm) 0 0;
}

/* The rename form sits in a confirm box inside .member__actions, whose own form
   and field rules are for a row: stack it, and give an open box the whole row. */
.member__actions .passkeys__rename {
  display: block;
}

.member__actions .passkeys__rename .field-input {
  width: 100%;
  margin-bottom: var(--space-sm);
  padding: 9px 10px;
  font-size: 13px;
}

.passkeys .member__actions:has(details[open]) {
  flex-direction: column;
}

.passkey-signin [data-passkey-error] {
  margin: var(--space-md) 0 0;
}

.invite-link {
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}

.invite-link__field {
  font-size: 12px;
  margin-bottom: var(--space-sm);
}

.invite-link .btn-primary {
  width: auto;
  padding: 7px 16px;
}

.activity li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}

.activity__time {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
}

.activity__text {
  overflow-wrap: anywhere;
}

.account-back {
  font-size: 12.5px;
  color: var(--muted);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}

.site-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.site-wordmark {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --- User menu (DESIGN.md § The user menu): the header chip as a menu
   button. Drawn by UserMenu.elm on the Elm pages and by layouts/_user_menu on
   the Rails pages; one set of rules. --- */

.usermenu {
  position: relative;
}

.usermenu__button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--ink);
  font: 500 15px/1.55 var(--font-ui);
  cursor: pointer;
}

.usermenu__button:hover,
.usermenu__button[aria-expanded="true"] {
  background: var(--panel);
  border-color: var(--rule-strong);
}

.usermenu__button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.usermenu__ini {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  font: 600 11px var(--font-data);
  color: var(--ink);
}

.usermenu__name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__chevron {
  flex: none;
  color: var(--muted);
}

.usermenu__button[aria-expanded="true"] .usermenu__chevron {
  transform: rotate(180deg);
}

.usermenu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-pop);
}

.usermenu__panel[hidden] {
  display: none;
}

.usermenu__who {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}

.usermenu__who-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__who-email {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__who-account {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__menu {
  padding: 4px;
}

.usermenu__form {
  margin: 0;
}

.usermenu__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  color: var(--ink);
  font: 400 13px var(--font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.usermenu__item:hover,
.usermenu__item:focus-visible {
  background: var(--panel-2);
}

.usermenu__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.usermenu__item[aria-current="page"] {
  font-weight: 600;
}

.usermenu__rule {
  height: 1px;
  margin: 4px 0;
  background: var(--rule);
}

/* The Theme group: three radio items (Light, Dark, System) inside the menu.
   The chosen one is tinted --panel-2 and carries a check in --primary; the
   check's slot is always reserved so the labels stay aligned. */
.usermenu__group-label {
  padding: 6px 12px 2px;
  font: 500 11px var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.usermenu__item[role="menuitemradio"] {
  gap: 8px;
}

.usermenu__item[aria-checked="true"] {
  background: var(--panel-2);
}

.usermenu__check {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.usermenu__item[aria-checked="false"] .usermenu__check {
  visibility: hidden;
}

.auth-alt {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.auth-alt a {
  color: var(--primary);
}

.auth-notice {
  border: 1px solid var(--success);
  border-left-width: 3px;
  border-radius: var(--r-box);
  background: var(--canvas);
  padding: var(--space-sm) 12px;
  font-size: 13px;
  margin-bottom: var(--space-md);
}

.auth-copy {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.auth-copy a {
  color: var(--primary);
}

/* What changed in a version of the terms (acceptance page). */
.auth-changes {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  font-size: 13px;
}

.auth-changes__title {
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.auth-changes ul {
  padding-left: var(--space-md);
}

/* --- Admin panel shell: left nav column + content --- */

.admin {
  display: flex;
  min-height: calc(100vh - 56px);
}

.admin-nav {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--rule);
  padding: 12px 0 24px;
}

/* The panel title: a centered recorder's stamp over the tree, full-strength
   ink so it reads as the drawer's name rather than a field label. */
.admin-nav-kicker {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  margin-bottom: 12px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--rule);
}

/* Full-bleed rows; the active row highlights edge to edge with the accent
   bar on the right, tight against the column's divider. */
.admin-nav-link {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 16px;
  border-right: 2px solid transparent;
}

.admin-nav-link:hover {
  color: var(--primary);
}

.admin-nav-link.active {
  border-right-color: var(--primary);
  background: var(--panel);
}

/* Section header ("Data"): same register as the kicker. */
.admin-nav-group {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
  padding: 0 16px;
}

/* A section's contents indent one level beneath its header. */
.admin-nav-children > .admin-nav-link,
.admin-nav-children > .admin-nav-branch {
  padding-left: 24px;
}

/* A non-link branch ("Geography"): a peer of the links, not a destination —
   same size and column, no hover affordance beyond the caret. */
.admin-nav-branch {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 16px 4px;
}

/* A branch's subtree: drafted hairline guide, children inset beneath the
   branch label. */
.admin-nav-tree {
  margin-left: 24px;
  border-left: 1px solid var(--rule);
  margin-bottom: 2px;
}

.admin-nav-tree .admin-nav-link {
  padding: 4px 16px 4px 12px;
  font-weight: 500;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

/* Parcel map (/map): full-bleed map plate + fixed right ledger (DESIGN.md). */
parcel-map {
  position: relative;
  flex: 1;
  display: block;
  min-width: 0;
}

.map-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  font: 500 13px var(--font-data);
}

.map-hint[hidden] {
  display: none;
}

/* Projects index — full-bleed plat-book register (post-login landing). */
.projects-page .stamp {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-page .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 32px;
  border-bottom: 1px solid var(--rule-strong);
}

.projects-page .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.projects-page .brand__mark {
  display: block;
}

.projects-page .wordmark {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.projects-page .brand__stamp {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}

.projects-page .page {
  padding: 28px 0 64px;
}

.projects-page .page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 32px 18px;
}

.projects-page .page__title {
  margin: 0;
  font: 600 28px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.projects-page .head__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.projects-page .search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
}

.projects-page .search:focus-within {
  border-color: var(--primary);
  color: var(--ink);
}

.projects-page .search input {
  border: none;
  background: transparent;
  color: var(--ink);
  font: 400 13px var(--font-ui);
  width: 100%;
  outline: none;
}

.projects-page .search input::placeholder {
  color: var(--muted);
}

.projects-page .btn-new {
  height: 38px;
  padding: 0 16px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-ctl);
  color: var(--on-primary);
  font: 600 13px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.projects-page .btn-new:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.projects-page .register {
  border-top: 1px solid var(--rule-strong);
}

.projects-page .register__head,
.projects-page .row {
  display: grid;
  grid-template-columns:
    minmax(230px, 2.4fr) minmax(170px, 1.9fr) minmax(210px, 2.2fr) minmax(190px, 1.9fr) 116px 30px;
  gap: 24px;
  align-items: center;
}

.projects-page .register__head--markets,
.projects-page .row--markets {
  grid-template-columns: minmax(230px, 2.4fr) minmax(170px, 1.9fr) 116px 30px;
}

.projects-page .register__head {
  padding: 9px 32px;
  border-bottom: 1px solid var(--rule);
}

.projects-page .register__head span {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-page .register__empty {
  padding: 40px 32px;
  color: var(--muted);
  font: 400 14px var(--font-ui);
}

.projects-page .row {
  position: relative;
  padding: 16px 32px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease-out;
}

.projects-page .row:hover {
  background: var(--panel);
}

.projects-page .row:hover::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: var(--primary);
}

.projects-page .p-name {
  margin-bottom: 5px;
  font: 600 16px var(--font-ui);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

.projects-page .p-client {
  margin: -2px 0 5px;
  font: 400 12.5px var(--font-ui);
  color: var(--muted);
}

.projects-page .p-by {
  margin: -2px 0 5px;
  font: 400 12.5px var(--font-ui);
  color: var(--muted);
}

.projects-page .p-open {
  color: var(--muted);
}

.projects-page .mkts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.projects-page .mkt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-chip);
  background: var(--canvas);
  font: 400 11.5px var(--font-ui);
  color: var(--ink);
  white-space: nowrap;
}

.projects-page .mkt__type {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-page .mkt--more {
  color: var(--muted);
  border-style: dashed;
}

.projects-page .scr {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projects-page .scr__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.projects-page .tag {
  padding: 2px 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--panel-2);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-page .tag--ind {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
}

.projects-page .scr__range {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--ink);
}

.projects-page .pipe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projects-page .pipe__top {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.projects-page .pipe__n {
  font: 600 17px var(--font-data);
  line-height: 1;
  color: var(--ink);
}

.projects-page .pipe__lbl {
  font: 400 11px var(--font-ui);
  color: var(--muted);
}

.projects-page .pipe__bar {
  display: flex;
  height: 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  overflow: hidden;
  background: var(--panel-2);
}

.projects-page .seg {
  height: 100%;
}
.projects-page .seg--saved {
  background: var(--rule-strong);
}
.projects-page .seg--reviewing {
  background: var(--muted);
}
.projects-page .seg--shortlisted {
  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
}
.projects-page .seg--contacted {
  background: var(--accent);
}
.projects-page .seg--passed {
  background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px);
}

.projects-page .upd {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.projects-page .chev {
  font-size: 16px;
  text-align: right;
  color: var(--rule-strong);
}

.projects-page .row:hover .chev {
  color: var(--primary);
}

.result__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.result__save {
  flex: none;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  font: 500 10px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.result__saved {
  flex: none;
  color: var(--success);
  font: 500 10px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* Filter section — top of the right-hand ledger. */
.chip {
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  font: 500 11px var(--font-data);
  text-transform: capitalize;
  cursor: pointer;
}

.chip--on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Project hub (/projects/:id) — plat-book MSA Selection → Sites → Shortlist. */
.project-page .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 32px;
  border-bottom: 1px solid var(--rule-strong);
}
.project-page .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.project-page .wordmark {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.project-page .phead {
  padding: 22px 32px 0;
}
.project-page .phead__title {
  margin: 0 0 8px;
  font: 600 30px var(--font-ui);
  letter-spacing: -0.02em;
}
.project-page .phead__client {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 8px;
}
.project-page .phead__for {
  font: 400 14px var(--font-ui);
  color: var(--muted);
}
.project-page .phead__input {
  width: 260px;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 12.5px var(--font-ui);
}
.project-page .phead__hint {
  font: 400 12px var(--font-ui);
  color: var(--muted);
}
.project-page .phead__stats {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.project-page .phead__stats span {
  padding-right: 14px;
  margin-right: 14px;
  border-right: 1px solid var(--rule);
}
.project-page .phead__stats span:last-child {
  border: none;
}

.project-page .steps {
  display: flex;
  gap: 2px;
  padding: 20px 32px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.project-page .step {
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 13px var(--font-ui);
  cursor: pointer;
}
.project-page .step--on {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

/* Loading — the one signature motion (DESIGN.md § Motion): the monument dot
   traverses corner to corner around a plat like an instrument slewing between
   points. Each leg accelerates off the corner and brakes hard onto the next,
   then settles there before the following leg. */
.traverse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 11px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.traverse__plat {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule-strong);
}
.traverse__plat::after {
  content: "";
  position: absolute;
  top: -0.5px;
  left: -0.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  animation: traverse 2.4s infinite, traverse-dot 2.4s infinite;
}
/* Position. Each leg: settle on the corner for the first 10% of the quarter,
   then move for the rest. The bezier is the slew: slow start, fast middle,
   sharp stop. Corners are the hairline's centre, so the dot sits on the line. */
@keyframes traverse {
  0%, 10% { top: -0.5px; left: -0.5px; animation-timing-function: cubic-bezier(0.7, 0, 0.1, 1); }
  25%, 35% { top: -0.5px; left: 12.5px; animation-timing-function: cubic-bezier(0.7, 0, 0.1, 1); }
  50%, 60% { top: 12.5px; left: 12.5px; animation-timing-function: cubic-bezier(0.7, 0, 0.1, 1); }
  75%, 85% { top: 12.5px; left: -0.5px; animation-timing-function: cubic-bezier(0.7, 0, 0.1, 1); }
  100% { top: -0.5px; left: -0.5px; }
}
/* Size follows speed: full size while settled, smallest at the leg's fastest
   point (about 18% into each quarter for the slew bezier above). */
@keyframes traverse-dot {
  0%, 10% { transform: translate(-50%, -50%) scale(1); animation-timing-function: ease-in; }
  18% { transform: translate(-50%, -50%) scale(0.45); animation-timing-function: ease-out; }
  25%, 35% { transform: translate(-50%, -50%) scale(1); animation-timing-function: ease-in; }
  43% { transform: translate(-50%, -50%) scale(0.45); animation-timing-function: ease-out; }
  50%, 60% { transform: translate(-50%, -50%) scale(1); animation-timing-function: ease-in; }
  68% { transform: translate(-50%, -50%) scale(0.45); animation-timing-function: ease-out; }
  75%, 85% { transform: translate(-50%, -50%) scale(1); animation-timing-function: ease-in; }
  93% { transform: translate(-50%, -50%) scale(0.45); animation-timing-function: ease-out; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .traverse__plat::after {
    animation: none;
  }
}

/* Register states that stand in for rows: loading, failed. */
.project-page .mreg__note {
  display: flex;
  justify-content: center;
  padding: 40px 32px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 400 13px var(--font-ui);
}
.project-page .mreg__note--err {
  color: var(--error);
}

/* Step navigation — the forward action at the foot of every step. Pinned to
   the viewport's bottom edge so "Next" is in the same place on a 393-row
   register and on the full-height plate; it settles into the flow once the
   page is scrolled to its end. Opaque and hairline-ruled: a frame, not a
   floating card. */
.project-page .stepnav {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px;
  background: var(--canvas);
  border-top: 1px solid var(--rule-strong);
}
.project-page .stepnav__fwd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.project-page .stepnav__note {
  font: 400 11px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .stepnav__prev {
  padding: 0 14px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
}
.project-page .stepnav__prev:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .stepnav__next {
  padding: 0 14px;
  height: 32px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-ctl);
  color: var(--on-primary);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
}
.project-page .stepnav__next:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Scope — spec sheet */
.project-page .specrow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: start;
  padding: 20px 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .specrow__label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 6px;
}
.project-page .specrow__hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: normal;
  text-transform: none;
}
.project-page .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-page .chip {
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-chip);
  color: var(--muted);
  font: 500 11px var(--font-data);
  text-transform: capitalize;
  cursor: pointer;
}
.project-page .chip--on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* MSA Selection — grouped config sections */
/* MSA Selection (DESIGN.md § Layout): the inputs (scope, requirements,
   criteria, register) are a column on the left; the map plate fills the main
   area on the right and stays in view while the column scrolls. The right side
   is where parcel results will go once they ship. Below 900px the plate sits
   above the inputs at a fixed height. */
.project-page {
  --stepnav-h: 0px;
}
.project-page--stepped {
  --stepnav-h: 57px;
}
.project-page .markets {
  display: grid;
  grid-template-columns: var(--markets-left, clamp(460px, 42%, 700px)) minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--rule-strong);
}
.project-page .markets__inputs {
  container: step / inline-size;
  min-width: 0;
}
/* A narrower column: the section gutters tighten from 32px to 24px. */
.project-page .markets__inputs .msection,
.project-page .markets__inputs .mtools,
.project-page .markets__inputs .mreg__head,
.project-page .markets__inputs .mrow {
  padding-left: 24px;
  padding-right: 24px;
}
.project-page .markets__inputs .mfunnel {
  padding-left: 24px;
  padding-right: 24px;
}
.project-page .markets__inputs .mtools {
  flex-wrap: wrap;
  gap: 8px 16px;
}
.project-page .markets__inputs .msearch {
  width: 100%;
  max-width: 260px;
}
.project-page .markets__plate {
  position: sticky;
  top: 0;
  display: flex;
  height: calc(100vh - var(--stepnav-h));
  min-height: 480px;
}
@media (max-width: 899px) {
  .project-page .markets {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .project-page .markets__plate {
    order: -1;
    position: static;
    width: 100%;
    height: min(70vh, 560px);
    min-height: 0;
    border-bottom: 1px solid var(--rule-strong);
  }
}
/* The plate: a neatline frame around the map, corner coordinates in the
   margin, then a ruled strip with the legend and the metro under the pointer.
   Nothing sits on the map. */
.project-page .mplate {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--canvas);
}
.project-page .mplate__map {
  position: relative;
  flex: 1;
  min-height: 0;
}
.project-page .mplate__map market-map {
  position: absolute;
  inset: 0;
  display: block;
}
.project-page .mplate__coords {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.project-page .mplate__corner {
  white-space: nowrap;
  font: 400 9px var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The divider between the inputs and the plate (pane_splitter.js): the one
   2px rule in the layout, which is how it reads as movable. Everything else
   on the plate is a 1px hairline. An 11px hit target on the plate's edge. */
.project-page pane-splitter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  z-index: 5;
  width: 11px;
  cursor: col-resize;
  touch-action: none;
}
.project-page pane-splitter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: var(--rule-strong);
}
.project-page pane-splitter:hover::before,
.project-page pane-splitter.is-dragging::before {
  background: var(--primary);
}
.project-page pane-splitter:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
@media (max-width: 899px) {
  .project-page pane-splitter {
    display: none;
  }
}
.project-page .mlegend,
.project-page .mplate__readout {
  padding: 10px 24px;
  border-bottom: 1px solid var(--rule-strong);
  font: 400 9.5px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .mlegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.project-page .mlegend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-page .mlegend__n {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.project-page .mlegend__steps {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
}
.project-page .mlegend__step {
  width: 14px;
  height: 10px;
  background: color-mix(in srgb, var(--accent) var(--step), transparent);
}
.project-page .mlegend__swatch {
  box-sizing: border-box;
  width: 16px;
  height: 10px;
}
.project-page .mlegend__swatch--none {
  border: 1.25px solid var(--ink);
}
/* The register's struck mark, in the plate's muted ink. */
.project-page .mlegend__swatch--qualifying {
  border: 1.25px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.project-page .mlegend__swatch--out {
  border: 1px solid var(--muted);
  background: repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 4px);
}
.project-page .mlegend__swatch--target {
  border: 2.5px solid var(--accent);
}
.project-page .mlegend__swatch--scope {
  border: 1px solid var(--rule-strong);
}
/* Power grid: the toggle, then (while on) a line swatch per voltage step. */
.project-page .mlegend__toggle {
  cursor: pointer;
  color: var(--ink);
}
.project-page .mlegend__toggle input {
  margin: 0;
  accent-color: var(--primary);
}
.project-page .mlegend__line {
  width: 16px;
  height: 2px;
}
.project-page .mlegend__line--low {
  background: var(--grid-low);
}
.project-page .mlegend__line--mid {
  background: var(--grid-mid);
}
.project-page .mlegend__line--high {
  background: var(--grid-high);
}
.project-page .mlegend__line--xhigh {
  background: var(--grid-xhigh);
}
.project-page .mlegend__line--unknown {
  background: var(--grid-unknown);
}
.project-page .mplate__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 36px;
  line-height: 1.5;
  text-transform: none;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.project-page .mplate__name {
  color: var(--ink);
  font-weight: 500;
}
.project-page .mplate__hint {
  color: var(--muted);
}
.project-page .msection {
  position: relative;
  padding: 16px 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .msection__head {
  margin-bottom: 12px;
}
.project-page .msection__title {
  font-weight: 400;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.project-page .msection__hint {
  margin-top: 3px;
  font: 400 11.5px var(--font-ui);
  color: var(--muted);
}
.project-page .msection__count {
  margin-top: 8px;
  white-space: nowrap;
  font: 400 11px var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Multi-select dropdown (geographic scope) */
.project-page .msel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.project-page .msel__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 340px;
  height: 34px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 13px var(--font-ui);
  cursor: pointer;
  text-align: left;
}
.project-page .msel__trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-page .msel__trigger--open {
  border-color: var(--primary);
}
.project-page .msel__placeholder {
  color: var(--muted);
}
.project-page .msel__caret {
  color: var(--muted);
  font-size: 10px;
}
.project-page .scope__n {
  color: var(--accent-text);
  font-weight: 600;
}
.project-page .msel__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.project-page .msel__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: 340px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-pop);
}
.project-page .msel__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.project-page .msel__search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font: 400 13px var(--font-ui);
  outline: none;
}
.project-page .msel__body {
  overflow-y: auto;
  padding: 4px 0;
}
.project-page .msel__group {
  padding: 3px 0;
}
.project-page .msel__grouphd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.project-page .msel__grouphd--on {
  color: var(--primary);
}
.project-page .msel__opts {
  display: flex;
  flex-wrap: wrap;
}
.project-page .msel__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 50%;
  padding: 4px 12px 4px 22px;
  background: none;
  border: none;
  color: var(--ink);
  font: 400 12.5px var(--font-ui);
  cursor: pointer;
  text-align: left;
}
.project-page .msel__opt:hover {
  background: var(--panel-2);
}
.project-page .msel__optcode {
  min-width: 20px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--muted);
}
.project-page .msel__opt--on .msel__optcode {
  color: var(--primary);
}
.project-page .msel__optname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-page .cbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-chip);
  color: var(--canvas);
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}
.project-page .cbox--on {
  background: var(--primary);
  border-color: var(--primary);
}
.project-page .msel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--rule);
}
.project-page .msel__footmuted {
  font: 400 11px var(--font-ui);
  color: var(--muted);
}
.project-page .msel__clear {
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  font: 500 11px var(--font-ui);
  cursor: pointer;
}
.project-page .msel__clear:hover {
  color: var(--primary);
}
.project-page .msel__done {
  padding: 5px 14px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-ctl);
  color: var(--on-primary);
  font: 500 12px var(--font-ui);
  cursor: pointer;
}
.project-page .msel__empty {
  padding: 16px 12px;
  color: var(--muted);
  font: 400 12.5px var(--font-ui);
}
.project-page .critadd {
  display: flex;
  gap: 8px;
  max-width: 620px;
}
.project-page .critadd__in {
  flex: 1;
  height: 34px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 13px var(--font-ui);
  outline: none;
}
.project-page .critadd__in:focus {
  border-color: var(--primary);
}
.project-page .critadd__btn {
  padding: 0 14px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-ctl);
  color: var(--on-primary);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
}
.project-page .critadd__btn:disabled {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--muted);
  cursor: default;
}
.project-page .critadd__count {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font: 400 12px var(--font-ui);
}
.project-page .critlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-width: 720px;
}
.project-page .critcard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
}
.project-page .critcard--approved {
  border-left-color: var(--primary);
}
.project-page .critcard--failed {
  border-left-color: var(--error);
}
.project-page .critcard__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.project-page .critcard__label {
  font: 500 13.5px var(--font-ui);
  color: var(--ink);
}
.project-page .critcard__status {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .critcard__sum {
  margin-top: 4px;
  font: 400 12px var(--font-ui);
  color: var(--muted);
}
.project-page .critcard__err {
  margin-top: 4px;
  font: 400 12px var(--font-data);
  color: var(--error);
}
/* The executable plan, ruled off from the model's prose above it. Mono because
   it is data — datum names, weights, and the threshold. */
.project-page .critcard__plan {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.project-page .critcard__formula {
  font-family: var(--font-data);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.project-page .critcard__cut {
  margin-top: 3px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.project-page .critcard__pass {
  margin-top: 5px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The screening control: threshold on the left, the gate switch on the right.
   Hairline rule above it because it is a different act from reading the plan —
   above the rule the AI proposes, below it the user decides. */
.project-page .critscreen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.project-page .critscreen__cut {
  display: flex;
  align-items: center;
  gap: 4px;
}
.project-page .critscreen__cmp,
.project-page .critscreen__val {
  font-family: var(--font-data);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  padding: 3px 5px;
}
.project-page .critscreen__cmp {
  padding-right: 2px;
}
.project-page .critscreen__val {
  width: 92px;
}
.project-page .critscreen__cmp:disabled,
.project-page .critscreen__val:disabled {
  color: var(--muted);
}
.project-page .critscreen__val:focus,
.project-page .critscreen__cmp:focus {
  outline: none;
  border-color: var(--primary);
}
.project-page .critscreen__wt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.project-page .critscreen__wtl {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .critscreen__wtv {
  width: 44px;
  text-align: right;
}
.project-page .critscreen__tog {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.project-page .critscreen__tog input {
  accent-color: var(--primary);
  cursor: pointer;
}
/* Unarmed: the switch is present so the affordance is discoverable, but muted
   so it does not read as an available action. */
.project-page .critscreen__tog--off {
  color: var(--muted);
  cursor: default;
}
.project-page .critscreen__tog--off input {
  cursor: default;
}

/* Non-metro targets carried over from the earlier region picker. Amber rule:
   needs attention, but it is not an error. */
.project-page .mlegacy {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warning);
  border-radius: var(--r-box);
  background: var(--panel);
}
.project-page .mlegacy__head {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warning);
}
.project-page .mlegacy__hint {
  margin-top: 3px;
  font: 400 12px var(--font-ui);
  color: var(--muted);
}
.project-page .mlegacy__list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-page .mlegacy__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-page .mlegacy__type {
  min-width: 46px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.project-page .mlegacy__name {
  flex: 1;
  font: 400 12.5px var(--font-ui);
  color: var(--ink);
}
.project-page .critcard__acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.project-page .critbtn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 500 11px var(--font-data);
  cursor: pointer;
}
.project-page .critbtn--ok {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--rule));
  color: var(--primary);
}
.project-page .critbtn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .gates {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
}
.project-page .gate {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-page .gate__label {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .gate__select,
.project-page .gate__num {
  height: 32px;
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  background: var(--panel);
}
.project-page .gate__select {
  padding: 0 8px;
  color: var(--ink);
  font: 500 12.5px var(--font-data);
  cursor: pointer;
}
.project-page .gate__num {
  width: 112px;
  padding: 0 10px;
  gap: 6px;
}
.project-page .gate__num input {
  border: none;
  background: transparent;
  color: var(--ink);
  font: 500 12.5px var(--font-data);
  font-variant-numeric: tabular-nums;
  width: 100%;
  outline: none;
}
.project-page .gate__u {
  color: var(--muted);
  font: 400 12px var(--font-data);
}
.project-page .gate__select:focus,
.project-page .gate__num:focus-within {
  outline: none;
  border-color: var(--primary);
}

/* MSA Selection — screening register */
.project-page .mtools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
}
.project-page .msearch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  width: 260px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
}
.project-page .msearch:focus-within {
  border-color: var(--primary);
}
.project-page .msearch input {
  border: none;
  background: transparent;
  color: var(--ink);
  font: 400 13px var(--font-ui);
  width: 100%;
  outline: none;
}
.project-page .mtools__count {
  font: 400 11px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .mtools__sel {
  color: var(--accent-text);
}

/* Funnel statistics sit on the trailing edge when the step's column has room
   (a container query: the Markets inputs are a column beside the plate, so the
   viewport width says nothing). Otherwise they stay in flow beneath their
   controls/cards. */
@container step (min-width: 640px) {
  .project-page .msection--counted .msection__head {
    padding-right: 160px;
  }
  .project-page .msection--counted > .msection__count {
    position: absolute;
    top: 16px;
    right: 32px;
    margin-top: 0;
    text-align: right;
  }
  .project-page .critcard__main {
    flex: 1;
    min-width: 0;
  }
  .project-page .critcard__pass {
    text-align: right;
  }
}
.project-page .mreg {
  border-top: 1px solid var(--rule-strong);
  overflow-x: auto;
}
/* --mreg-crit holds one track per criterion column, set on .mreg by the Elm
   view; unset, the empty fallback leaves the fixed columns alone. Rows grow to
   their min-content width so, once criteria outrun the page, every row scrolls
   together and keeps its rule and hover across the full width. */
.project-page .mreg__head,
.project-page .mrow {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) var(--mreg-rank,) 96px 62px 84px 70px 80px 84px 66px 66px 50px var(--mreg-crit,) 84px;
  gap: 14px;
  align-items: center;
  min-width: min-content;
}
.project-page .mreg__head {
  padding: 0 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .mh {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .mh--r {
  justify-content: flex-end;
}
.project-page .mh--static {
  cursor: default;
}
.project-page .mh--on {
  color: var(--ink);
}
.project-page .mh__ar {
  font-size: 9px;
  color: var(--primary);
}
.project-page .mrow {
  padding: 11px 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .mrow:hover {
  background: var(--panel);
}
.project-page .mrow--sel {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.project-page .mname {
  font: 500 13px var(--font-ui);
  color: var(--ink);
}
.project-page .mrow .num {
  text-align: right;
  font-size: 12.5px;
}
.project-page .mrow .rtw {
  text-align: right;
  font-family: var(--font-data);
  font-size: 12.5px;
  color: var(--ink);
}
.project-page .mact {
  text-align: right;
}
.project-page .madd {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 500 11px var(--font-data);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.project-page .madd:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .madd--on {
  background: var(--accent-text);
  border-color: var(--accent-text);
  color: var(--canvas);
}
.project-page .madd:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* Screening register: eliminated rows and criterion columns (DESIGN.md
   "Register"). Eliminated = muted text + a 45° gutter hatch (the struck mark),
   never opacity or a fill. Selection outranks elimination, so .madd--on and
   .mrow--sel are deliberately left alone on eliminated rows. Longhands, not
   the shorthand, so the hover/selected background-color still applies
   underneath the hatch. */
.project-page .mrow.mrow--out {
  background-image: repeating-linear-gradient(45deg, var(--rule-strong) 0 2px, transparent 2px 5px);
  background-size: 8px 100%;
  background-position: 20px 0;
  background-repeat: no-repeat;
}
.project-page .mrow--out .mname,
.project-page .mrow--out .num,
.project-page .mrow--out .rtw {
  color: var(--muted);
}
.project-page .mname__out {
  display: block;
  margin-top: 2px;
  font: 400 10px/1.4 var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* Ranking (DESIGN.md "Register"): rank and score sit beside the name, in the
   same mono as every other value. Rank is the strong figure; an eliminated
   metro shows a dash for rank (it was scored, never placed) and keeps its
   composite, muted like the rest of its row. --mreg-rank carries the two
   tracks only while a criterion scores. */
.project-page .mrow .mrank {
  font-weight: 500;
  color: var(--ink);
}
.project-page .mrow--out .mrank {
  color: var(--muted);
}
/* The funnel: ruled stamps, left to right, in the provenance-stamp voice. */
.project-page .mfunnel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  padding: 0 32px 12px;
}
.project-page .mfunnel__stage {
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  margin-left: -1px;
  font: 400 9.5px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .mfunnel__n {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Snapshots: a saved ranking and the list of them. Same stamps and hairlines as
   the register; the open snapshot replaces the live register wholesale. */
.project-page .snaps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.project-page .snaps__save:disabled,
.project-page .snaps__select:disabled {
  border-color: var(--rule-strong);
  color: var(--muted);
  cursor: default;
}
/* Save snapshot: an optional label, the button, why it is unavailable and how
   the last attempt went. A failure uses the criterion card's error style. */
.project-page .snapsave {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.project-page .snapsave__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-page .snapsave__label {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 12.5px var(--font-ui);
}
.project-page .snapsave__why {
  margin: 0;
  font: 400 12px/1.45 var(--font-ui);
  color: var(--muted);
}
.project-page .snapsave__note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font: 400 12px/1.45 var(--font-data);
}
.project-page .snapsave__note--ok {
  color: var(--ink);
}
.project-page .snapsave__note--err {
  color: var(--error);
}
.project-page .snapsave__x {
  flex: none;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--muted);
  font: 400 14px/1.2 var(--font-ui);
  cursor: pointer;
}
.project-page .snapsave__x:hover {
  color: var(--primary);
}
.project-page .snaps__item--new {
  background: var(--panel);
}
.project-page .snaps__new {
  padding: 0 5px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  font: 400 9px var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.project-page .snaps__list {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.project-page .snaps__empty {
  margin: 0;
  font: 400 12px/1.45 var(--font-ui);
  color: var(--muted);
}
.project-page .snaps__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
  font: 400 11px var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .snaps__item--on {
  background: var(--panel-2);
  color: var(--ink);
}
.project-page .snaps__when {
  color: var(--ink);
}
.project-page .snaps__what {
  flex: 1 1 120px;
  min-width: 0;
}
.project-page .snaps__counts {
  white-space: nowrap;
}
.project-page .snaps__select {
  flex: none;
  margin-left: auto;
}
.project-page .msnap__head,
.project-page .msnap__rules,
.project-page .msnap__stamps {
  padding: 12px 32px 0;
}
.project-page .msnap__stamp {
  font: 400 10px var(--font-data);
  letter-spacing: 0.14em;
  color: var(--ink);
}
.project-page .msnap__rule {
  padding: 3px 0;
  font: 400 11px var(--font-data);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.project-page .msnap__rulename {
  margin-right: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
}
.project-page .msnap__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 12px;
}
.project-page .msnap__stamps .stamp {
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
}
.project-page .msnap__row {
  grid-template-columns: 44px 56px minmax(170px, 1fr);
}
.project-page .msnap__row.msnap__row--plain {
  grid-template-columns: minmax(170px, 1fr);
}
.project-page .msnap .mreg__head .mh:last-child {
  justify-content: flex-start;
}
/* Criterion columns: the user's label, truncated; full label + unit in title. */
.project-page .mh--crit {
  min-width: 0;
}
.project-page .mh__lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-page .mh--crit .mh__ar {
  flex-shrink: 0;
}
/* Proposed, not yet screening: dashed, like a proposed line on a plat. Drawn
   as a background so it neither shifts the head's baseline nor is clipped by
   the ellipsis overflow. */
.project-page .mh--prop .mh__lbl {
  background: linear-gradient(to right, var(--muted) 50%, transparent 50%) left bottom / 4px 1px repeat-x;
}
/* Show/Hide eliminated: a hairline-boxed stamp; the hatch swatch is the
   legend key for the gutter hatch on eliminated rows. */
.project-page .mtools__out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 4px 8px;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 400 10px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.project-page .mtools__out::before {
  content: "";
  width: 8px;
  height: 8px;
  background: repeating-linear-gradient(45deg, var(--rule-strong) 0 2px, transparent 2px 5px);
}
.project-page .mtools__out--on {
  background: var(--panel);
  color: var(--ink);
}
.project-page .mtools__out:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .mtools__out:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.project-page .range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-page .range__num {
  width: 110px;
  height: 34px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 500 13px var(--font-data);
}
.project-page .range__num:focus {
  outline: none;
  border-color: var(--primary);
}
.project-page .range__dash,
.project-page .range__u {
  color: var(--muted);
  font: 400 12px var(--font-data);
}

/* Sites — gates, then the plate: the map framed on the left, the ledger of
   eligible parcels fixed on the right (DESIGN.md § Layout). */
.project-page .sites {
  container: step / inline-size;
  border-top: 1px solid var(--rule-strong);
}
.project-page .gates--site {
  align-items: flex-start;
}
/* Transmission-line criteria: a second row of gates under the parcel ones. */
.project-page .gates--power {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.project-page .gate__note {
  align-self: center;
  font: 400 10px var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .plate {
  display: flex;
  height: calc(100vh - 176px);
  min-height: 520px;
  border-bottom: 1px solid var(--rule-strong);
}
.project-page .plate__map {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}
/* Veil over the map while a fresh search runs: opaque, so the plate and the
   ledger appear together instead of the map re-framing in front of a loader. */
.project-page .plate__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
}
.project-page .plate__veil[hidden] {
  display: none;
}
.project-page .plate__fit {
  position: absolute;
  top: 96px;
  left: 10px;
  z-index: 2;
  height: 28px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 500 10px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.project-page .plate__fit:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .srow__dev {
  white-space: nowrap;
  font: 400 11px var(--font-data);
  color: var(--muted);
}
.project-page .sledger {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 340px;
  background: var(--panel);
  border-left: 1px solid var(--rule-strong);
  overflow-y: auto;
}
/* The next page in flight: keep the rows, just dim them. */
.project-page .sledger--busy .sledger__list,
.project-page .sledger--busy .sledger__head {
  opacity: 0.55;
  transition: opacity 150ms ease-out;
}
.project-page .sledger__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-strong);
  font: 400 11px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .sledger__count {
  color: var(--ink);
}
.project-page .sledger__warn {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  font: 400 11.5px var(--font-ui);
  color: var(--warning);
}
.project-page .sledger__more {
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font: 400 11.5px var(--font-ui);
  color: var(--muted);
}
.project-page .sledger__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 16px;
  text-align: center;
  font: 400 13px var(--font-ui);
  color: var(--muted);
}
.project-page .sledger__note--err {
  color: var(--error);
}
.project-page .sledger__list {
  flex: 1;
}
.project-page .srow {
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.project-page .srow:hover {
  background: var(--panel-2);
}
.project-page .srow--on {
  background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--accent);
}
.project-page .srow__top,
.project-page .srow__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.project-page .srow__meta {
  margin-top: 3px;
}
.project-page .srow__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 13px var(--font-ui);
  color: var(--ink);
}
/* DESIGN.md § Layout: the recorder's stamp on every sourced datum. */
.project-page .stamp {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 9px var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .srow .stamp {
  margin-top: 4px;
}
.project-page .srow__meta .num {
  flex: none;
  white-space: nowrap;
}
.project-page .srow__facts {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.project-page .srow__add,
.project-page .sledger__page {
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--muted);
  font: 500 11px var(--font-data);
  cursor: pointer;
}
.project-page .srow__add:hover,
.project-page .sledger__page:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.project-page .sledger__page:disabled {
  color: var(--rule-strong);
  cursor: default;
}
.project-page .srow__saved {
  flex: none;
  white-space: nowrap;
  font: 500 11px var(--font-data);
  color: var(--accent-text);
}
.project-page .srow__top .apn {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.project-page .sledger__pager {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--rule-strong);
}

/* Shortlist — candidate register */
.project-page .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}
.project-page .toolbar__find {
  padding: 0;
  background: none;
  border: none;
  color: var(--primary);
  text-decoration: none;
  font: 500 13px var(--font-ui);
  cursor: pointer;
}
.project-page .toolbar__count {
  font: 400 11px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .shortlist-empty {
  padding: 24px 32px;
  color: var(--muted);
  font: 400 14px var(--font-ui);
}
.project-page .creg {
  border-top: 1px solid var(--rule-strong);
}
.project-page .creg__head,
.project-page .crow {
  display: grid;
  grid-template-columns: 1fr 130px 90px 110px 150px 30px;
  gap: 20px;
  align-items: center;
}
.project-page .creg__head {
  padding: 9px 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .creg__head span {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .crow {
  position: relative;
  padding: 14px 32px;
  border-bottom: 1px solid var(--rule);
}
.project-page .crow:hover {
  background: var(--panel);
}
.project-page .crow:hover::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: var(--primary);
}
.project-page .apn {
  font: 500 13px var(--font-data);
  color: var(--ink);
}
.project-page .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.project-page .tag {
  padding: 2px 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--panel-2);
  font: 400 9px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* A ledger row's nearest reported line: ink facts, muted note, never orange. */
.project-page .srow__power {
  margin-top: 3px;
  font: 400 11px var(--font-ui);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.project-page .srow__power--none {
  color: var(--muted);
}
.project-page .srow__power .stamp {
  margin-top: 2px;
}
.project-page .tag--inferred {
  margin-left: 6px;
  color: var(--muted);
  border-style: dashed;
}
.project-page .tag--ind {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
}
.project-page .situs {
  min-width: 0;
}
.project-page .situs div:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 13px var(--font-ui);
  color: var(--ink);
}
.project-page .situs .stamp {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .stage {
  font: 500 11px var(--font-data);
  text-transform: capitalize;
  padding: 4px 8px;
  border-radius: var(--r-chip);
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.project-page .stage--shortlisted {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
  color: var(--accent-text);
}
.project-page .stage--contacted {
  background: var(--accent-text);
  border-color: var(--accent-text);
  color: var(--canvas);
}
.project-page .stage--passed {
  color: var(--muted);
}
.project-page .crow__x {
  justify-self: end;
  padding: 2px 4px;
  background: none;
  border: none;
  border-radius: var(--r-ctl);
  color: var(--rule-strong);
  font: 400 16px var(--font-data);
  line-height: 1;
  cursor: pointer;
}
.project-page .crow:hover .crow__x {
  color: var(--primary);
}
.project-page .crow__x:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  color: var(--primary);
}

/* Coverage map: the legend isolate and the state ledger are real buttons, so
   they carry hover and focus states that Elm's inline styles can't express. */
.coverage-legend {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-2xs, 2px) var(--space-xs, 4px);
  border: 1px solid transparent;
  border-radius: var(--r-box);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.coverage-legend:hover {
  border-color: var(--rule);
}

.coverage-ledger-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  width: 100%;
  padding: var(--space-xs, 4px) var(--space-md, 16px);
  border: none;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  text-align: left;
  font-family: var(--font-data);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.coverage-ledger-row:hover:not(:disabled) {
  background: var(--panel);
}

/* A state whose TIGER polygon never landed has no extent to frame. */
.coverage-ledger-row:disabled {
  cursor: default;
  opacity: 0.55;
}

.coverage-legend:focus-visible,
.coverage-ledger-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Reports (DESIGN.md § Reports). The report is a run of 1280x720 (16:9) slides
   generated from one stored snapshot. Each slide is always Plat Room (the
   `.report-slide` token set above), so the printed PDF is light whatever the
   viewer's theme, and what is on screen is what prints. */
.project-page .reports {
  border-top: 1px solid var(--rule-strong);
  padding: 0;
}
/* The Reports step runs edge to edge, like MSA Selection: the sidebar is flush
   with the page edge and the panel carries the page gutters itself. States with
   no sidebar (loading, no snapshot) keep the gutters on their own content. */
.project-page .reports > :not(.reports__layout) {
  margin: 0 32px 48px;
}
.project-page .reports__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 0;
}
.project-page .reports__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.project-page .reports__lbl,
.project-page .reports__hint {
  font: 400 10px var(--font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .reports__select {
  height: 32px;
  min-width: 0;
  max-width: 100%;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 11px var(--font-data);
}
.project-page .reports__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  padding: 32px 0;
}
.project-page .reports__why {
  color: var(--muted);
  font: 400 13px/1.55 var(--font-ui);
}
/* The Reports step's deliverables: a quiet ruled list on the left (the format
   as a stamp, one line of what it is), the chosen one tinted --panel-2 and
   aria-current, and its panel beside it. Below 900px the list stacks above. */
.project-page .reports__layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: stretch;
}
/* The sidebar's cell runs the full height of the step, closed by the same 2px
   rule that divides MSA Selection; the list inside stays in view on scroll. */
.project-page .reports__side {
  border-right: 2px solid var(--rule-strong);
}
.project-page .reports__side .deliv {
  position: sticky;
  top: 0;
}
.project-page .reports__main {
  min-width: 0;
  padding: 0 32px 48px;
}
.project-page .deliv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-page .deliv__item {
  border-bottom: 1px solid var(--rule);
}
.project-page .deliv__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: baseline;
  padding: 12px 16px;
  color: var(--ink);
  text-decoration: none;
}
.project-page .deliv__link:hover {
  background: var(--panel);
}
.project-page .deliv__item--on .deliv__link {
  background: var(--panel-2);
}
.project-page .deliv__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.project-page .deliv__name {
  font: 500 13px/1.3 var(--font-ui);
}
.project-page .deliv__badge {
  padding: 1px 5px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  font: 400 9px var(--font-data);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.project-page .deliv__item--on .deliv__badge {
  color: var(--ink);
}
.project-page .deliv__what {
  grid-column: 1 / -1;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--muted);
}
.project-page .dlv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 16px;
  max-width: 100%;
}
.project-page .dlv__title {
  font: 400 10px var(--font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.project-page .dlv__title--sub {
  margin-top: 12px;
}
.project-page .dlv__lead,
.project-page .dlv__note {
  max-width: 72ch;
  margin: 0;
  font: 400 12.5px/1.55 var(--font-ui);
  color: var(--muted);
}
.project-page .dlv__sub {
  font: 400 10px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .csvt__wrap {
  align-self: stretch;
  overflow: auto;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
}
.project-page .csvt__wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.project-page .csvt {
  min-width: 100%;
  border-collapse: collapse;
  font: 400 11px var(--font-data);
  font-variant-numeric: tabular-nums;
}
.project-page .csvt__head {
  min-width: 96px;
  max-width: 180px;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
  font: 400 9.5px/1.35 var(--font-data);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: bottom;
}
.project-page .csvt__head--num,
.project-page .csvt__cell--num {
  text-align: right;
}
.project-page .csvt__cell {
  padding: 6px 10px;
  border-top: 1px solid var(--rule);
  white-space: nowrap;
  color: var(--ink);
}
.project-page .csvt tbody tr:first-child .csvt__cell {
  border-top: 0;
}
.project-page .csvt__cell--name {
  font: 500 12.5px var(--font-ui);
}
.project-page .csvc {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.project-page .csvc__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 140px minmax(0, 1.4fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.project-page .csvc__name {
  font: 400 12.5px/1.4 var(--font-ui);
  color: var(--ink);
}
.project-page .csvc__group,
.project-page .csvc__unit {
  font: 400 10px/1.4 var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .csvc__unit {
  text-transform: none;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 899px) {
  .project-page .reports__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-page .reports__side {
    border-right: 0;
    border-bottom: 2px solid var(--rule-strong);
  }
  .project-page .reports__side .deliv {
    position: static;
  }
  .project-page .reports__main {
    padding: 0 16px 48px;
  }
  .project-page .csvc__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .project-page .csvc__unit {
    grid-column: 1 / -1;
  }
}
.project-page .report {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* With the deliverables sidebar (248px and its 2px rule, beside the panel's
   32px gutters) the slides get the width that is left, so they scale in bands that
   fit it; below 900px the sidebar stacks above and they use the full width. */
@media screen and (min-width: 900px) and (max-width: 1623px) {
  .project-page .report { zoom: 0.8; }
}
@media screen and (min-width: 900px) and (max-width: 1367px) {
  .project-page .report { zoom: 0.6; }
}
@media screen and (min-width: 900px) and (max-width: 1111px) {
  .project-page .report { zoom: 0.4; }
}
@media screen and (max-width: 899px) {
  .project-page .report { zoom: 0.5; }
}
@media screen and (max-width: 699px) {
  .project-page .report { zoom: 0.25; }
}
.project-page .rslide {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 1280px;
  height: 720px;
  padding: 40px 64px 0;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  font: 400 13px/1.45 var(--font-ui);
}
.project-page .rslide__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}
.project-page .rslide__eyebrow {
  font: 400 10px var(--font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .rslide__title {
  font: 600 28px/1.15 var(--font-ui);
  letter-spacing: -0.02em;
}
.project-page .rslide__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px 0 16px;
  overflow: hidden;
}
.project-page .rslide__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--rule);
  font: 400 9px var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .rslide__foot > span {
  flex: none;
}
.project-page .rslide__foot > .rslide__stamp--id {
  text-transform: none;
}
.project-page .rslide__foot > .rslide__stamp {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-page .rslide .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.project-page .rslide .stamp {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
}
/* Cover */
.project-page .rslide--cover {
  justify-content: space-between;
  padding-bottom: 48px;
}
.project-page .rcover__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-page .rcover__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 24px;
  border-left: 2px solid var(--rule-strong);
}
.project-page .rcover__title {
  max-width: 900px;
  font: 600 44px/1.1 var(--font-ui);
  letter-spacing: -0.03em;
}
.project-page .rcover__for {
  font: 400 22px var(--font-ui);
  color: var(--muted);
}
.project-page .rcover__stamp {
  padding-top: 14px;
  border-top: 1px solid var(--rule-strong);
}
/* Summary */
.project-page .rsummary {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bullet;
}
.project-page .rsummary li {
  position: relative;
  padding: 10px 0 10px 40px;
  border-bottom: 1px solid var(--rule);
  font: 400 16px/1.45 var(--font-ui);
  counter-increment: bullet;
}
.project-page .rsummary li::before {
  content: counter(bullet, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 13px;
  font: 400 10px var(--font-data);
  letter-spacing: 0.1em;
  color: var(--muted);
}
/* Elimination process */
.project-page .relim {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px;
}
.project-page .rfunnel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-page .rfunnel__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}
.project-page .rfunnel__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 13.5px var(--font-ui);
}
.project-page .rfunnel__track {
  height: 22px;
}
.project-page .rfunnel__bar {
  height: 100%;
  background: var(--rule-strong);
}
.project-page .rfunnel__row:last-child .rfunnel__bar {
  background: var(--ink);
}
.project-page .rfunnel__n {
  text-align: right;
  font-size: 13px;
}
/* Ruled tables: the register's vocabulary on a slide. */
.project-page .rtable__head {
  display: grid;
  align-items: end;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule-strong);
  font: 400 9.5px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-page .rtable__row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}
.project-page .rtable__n {
  text-align: right;
}
.project-page .rtable__kind {
  font: 400 9.5px var(--font-data);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.project-page .rtable__note {
  padding: 16px 0;
  color: var(--muted);
  font-size: 13px;
}
.project-page .relim__row {
  grid-template-columns: 100px minmax(0, 1fr) 76px 76px;
}
.project-page .relim__row.rtable__row {
  padding: 13px 0;
  font-size: 14px;
}
/* Criteria and weights */
.project-page .rcrit__row {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) 100px 50px 90px 100px minmax(0, 1.3fr);
}
.project-page .rcrit__row.rtable__row {
  align-items: start;
  padding: 9px 0;
}
.project-page .rcrit__name {
  display: block;
  font-weight: 500;
}
.project-page .rcrit__words {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.project-page .rcrit__data {
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.project-page .rcrit__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.project-page .rcrit__stamps .stamp {
  font: 400 9px var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Ranking table */
.project-page .rrank__row {
  grid-template-columns: 52px minmax(190px, 1.6fr) repeat(var(--criteria, 1), minmax(0, 1fr)) 96px;
  gap: 0;
}
.project-page .rrank__row > .rrank__crit {
  padding: 0 8px;
}
.project-page .rrank__row.rtable__row {
  position: relative;
  padding: 0 0 0 0;
  min-height: 34px;
}
.project-page .rtable__head.rrank__row > span:nth-child(2) {
  padding-left: 12px;
}
.project-page .rrank__rank {
  font-weight: 500;
}
.project-page .rrank__name {
  padding: 5px 12px 5px 12px;
  font-weight: 500;
}
.project-page .rrank__composite {
  font-weight: 500;
}
.project-page .rrank__crit {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: right;
}
.project-page .rrank__critname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-page .rrank__critw {
  font-size: 9px;
  color: var(--muted);
}
/* A criterion's percentile score: five fifths of 0-100, in the accent at the
   map's five opacities. Never red or green. */
.project-page .rcell {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  font-size: 12px;
}
.project-page .rcell--0 { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.project-page .rcell--1 { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.project-page .rcell--2 { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.project-page .rcell--3 { background: color-mix(in srgb, var(--accent) 54%, transparent); }
.project-page .rcell--4 { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.project-page .rcell--none {
  color: var(--muted);
}
/* An eliminated market: muted, with the register's 45 degree hatch in the
   gutter and its reason on a mono line. No opacity, no fill. */
.project-page .rrank__row--out {
  color: var(--muted);
  padding-left: 12px;
}
.project-page .rrank__row--out::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 4px);
}
.project-page .rrank__row--out .rrank__name {
  color: var(--muted);
}
.project-page .rrank__reason {
  display: block;
  font: 400 9.5px var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Requirements (an unscored report): the scope and each gate with its data. */
.project-page .rreq__row {
  grid-template-columns: 110px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
}
.project-page .rreq__row.rtable__row {
  align-items: start;
  padding: 13px 0;
}
.project-page .rreq__rule {
  font-size: 14px;
  font-weight: 500;
}
.project-page .rreq .rcrit__stamps {
  align-items: flex-start;
}
/* Qualifying and eliminated markets (an unscored report): a list in three
   columns, not a ranking. Eliminated rows take the register's muted text,
   gutter hatch and mono reason line. */
.project-page .rqual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.project-page .rqual__note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.project-page .rqual__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  align-items: start;
}
.project-page .rqual__col {
  min-width: 0;
  border-top: 1px solid var(--rule-strong);
}
.project-page .rqual__row.rtable__row {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 6px 0;
}
.project-page .rqual__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.project-page .rqual__pop {
  font-size: 12px;
}
.project-page .rqual__reason {
  grid-column: 1 / -1;
}
.project-page .rqual__row.rtable__row.rqual__row--out {
  padding-left: 12px;
  color: var(--muted);
}
.project-page .rqual__row--out::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 4px);
}
.project-page .rqual__row--out .rqual__name {
  color: var(--muted);
}
/* Map slide */
.project-page .rmap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--rule-strong);
}
.project-page .rmap .mlegend {
  padding: 10px 16px;
}
.project-page .rmap__plate {
  position: relative;
  flex: 1;
  min-height: 0;
}
.project-page .rmap__plate market-map {
  position: absolute;
  inset: 0;
  display: block;
}
/* Methodology */
.project-page .rmethod {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 0 48px;
}
/* Steps and the basis note share the wide column; the narrow one stays empty,
   as in the PDF and the deck. */
.project-page .rmethod > * {
  grid-column: 1;
}
.project-page .rmethod__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.project-page .rmethod__n {
  font-size: 11px;
  color: var(--muted);
}
.project-page .rmethod__title {
  font: 400 10px var(--font-data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.project-page .rmethod p {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
}
.project-page .rmethod__notes {
  padding-top: 16px;
}
.project-page .rmethod__notes p {
  font-size: 11px;
  color: var(--muted);
}
.project-page .rsources__note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.project-page .rsources__row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px 90px;
}
.project-page .rsources__row.rtable__row {
  padding: 5px 0;
}
/* The raw measure key under its label: small mono, muted, a line of its own. */
.project-page .rsources__key {
  display: block;
  overflow-wrap: anywhere;
  font: 400 9px/1.3 var(--font-data);
  color: var(--muted);
}

/* Modal dialog (DESIGN.md § Alerts): the shell under the alert and the
   new-project form. The page behind is inert and cannot scroll while the
   dialog is in it; the :has() rules release both the moment it goes. */
html:has(.modal-backdrop),
body:has(.modal-backdrop) {
  overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--scrim);
  overscroll-behavior: contain;
  animation: modal-fade 150ms ease-out;
}
.modal {
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  outline: none;
  animation: modal-rise 200ms ease-out;
}
.modal__mark {
  flex: none;
  color: var(--error);
}
.modal__title {
  font: 600 18px/1.3 var(--font-ui);
  color: var(--ink);
}
.alert__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.alert__body {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font: 400 15px/1.5 var(--font-ui);
  overflow-wrap: anywhere;
}
.alert__guidance {
  color: var(--muted);
  font-size: 12.5px;
}
.alert__acts,
.modal__acts {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.alert__btn,
.modal__btn {
  min-width: 72px;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
}
.alert__btn:hover,
.modal__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.alert__btn--primary,
.alert__btn--primary:hover,
.modal__btn--primary,
.modal__btn--primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.alert__btn--primary:hover,
.modal__btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.modal__btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}
.alert__btn:focus-visible,
.modal__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The notice of updated terms (TermsNotice.elm): a blocking dialog on the
   shared shell, with the sign-up consent box inside it. */
.terms-notice__consent {
  margin: var(--space-md) 0 0;
}
.terms-notice__changes-title {
  font: 600 13px/1.4 var(--font-ui);
}
.terms-notice__changes {
  padding-left: var(--space-md);
  font: 400 13px/1.45 var(--font-ui);
}
.terms-notice .alert__body a {
  color: var(--primary);
}

/* Form fields in a dialog (the new-project form). */
.nform .field {
  margin-top: var(--space-md);
}
.field__label {
  display: block;
  margin-bottom: var(--space-xs);
  font: 500 12.5px var(--font-ui);
  color: var(--ink);
}
.field__input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 14px var(--font-ui);
}
.field__input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.field__input[aria-invalid="true"] {
  border-color: var(--error);
}
.field__error {
  margin-top: var(--space-xs);
  font: 400 12.5px var(--font-ui);
  color: var(--error);
}
.modal__problem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font: 400 13px/1.45 var(--font-ui);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.modal__problem .modal__mark {
  margin-top: 1px;
}
@keyframes modal-fade {
  from { opacity: 0; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal {
    animation: none;
  }
}

/* Interactive states: one short, functional transition (DESIGN.md § Motion).
   The only floating surfaces are menus and popovers, which carry --shadow-pop. */
a, button, input, select, textarea, .chip, .madd, .critbtn, .stage {
  transition: background-color var(--t-ui), border-color var(--t-ui), color var(--t-ui);
}

.project-page .msel__done:hover,
.project-page .critadd__btn:hover,
.project-page .chip--on:hover,
.chip--on:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

@media (prefers-reduced-motion: reduce) {
  a, button, input, select, textarea, .chip, .madd, .critbtn, .stage {
    transition: none;
  }
}

/* --- Home page: the Corner Monument at page scale (DESIGN.md, Logo, "Page
   lockup"). One rule under the header strip and one right of the side strip,
   crossing at the top left under the orange monument, in the same grey as the
   app's other rules so they blend in. The page bleeds to the edges: no exterior
   frame. Two rules separate the header, side and page. --- */

.home {
  --home-side: clamp(20px, 8vw, 120px);
  --home-rule: 2px;
  --home-dot: clamp(14px, 1.4vw, 20px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}

.home__frame {
  flex: 1;
  display: grid;
  grid-template-columns: var(--home-side) minmax(0, 1fr);
  /* The hero row takes what the first screen has left after the margin, the
     frame's two rules and the header strip; the values row follows. */
  grid-template-rows: minmax(56px, auto) auto;
}

.home__corner {
  position: relative;
  border-right: var(--home-rule) solid var(--rule-strong);
  border-bottom: var(--home-rule) solid var(--rule-strong);
}

/* The monument: a true circle centred on the crossing of the two rules. */
.home__corner::after {
  content: "";
  position: absolute;
  right: calc(-1 * (var(--home-rule) + var(--home-dot)) / 2);
  bottom: calc(-1 * (var(--home-rule) + var(--home-dot)) / 2);
  z-index: 3;
  width: var(--home-dot);
  height: var(--home-dot);
  border-radius: 50%;
  background: var(--accent);
}

.home__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-xs) clamp(12px, 2.5vw, 32px);
  border-bottom: var(--home-rule) solid var(--rule-strong);
}

.home .usermenu {
  min-width: 0;
}

.home__brand {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}

.home__auth {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: var(--space-md);
}

.home__plate {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  padding: 6px 12px;
}

.home__side {
  grid-column: 1;
  grid-row: 2;
  border-right: var(--home-rule) solid var(--rule-strong);
}

.home__main {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  /* The first screen holds the hero and the three boxes: the hero takes the
     room above the boxes (centred in it, so it sits higher than the screen's
     middle) and the boxes sit at the foot of the first screen. A short window
     scrolls rather than squeezing the hero. */
  grid-template-rows: minmax(min-content, 1fr) auto auto;
  min-height: calc(100svh - 56px - var(--home-rule));
}

.home__page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 5vh, 72px) clamp(24px, 6vw, 96px);
}

.home__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.home__tagline {
  margin-top: var(--space-md);
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.3;
  color: var(--muted);
}

.home__cta {
  margin-top: var(--space-xl);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.home__cta:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.home__brand:focus-visible,
.home__plate:focus-visible,
.home__cta:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .home__plate,
  .home__cta {
    transition: background-color var(--t-ui), border-color var(--t-ui);
  }
}

/* Under the hero: three boxes, in the page parcel. The side rule runs on down
   beside them; nothing else is ruled but the boxes themselves. */

.home__values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding: 0 clamp(24px, 6vw, 96px) clamp(24px, 4vh, 56px);
}

@media (min-width: 960px) {
  .home__values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home__value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
}

.home__value-heading {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.home__value-body {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

/* The provenance stamp (DESIGN.md): a drafted label, 2px, pinned to the foot. */
.home__value-stamp {
  margin-top: auto;
  padding: 5px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Legal pages (DESIGN.md § Legal pages): the Terms of Service and the
   Privacy Policy as a reading page, the quiet Terms · Privacy line, the
   draft notice, the placeholder mark and the sign-up consent box. --- */

.home__legal,
.legal-links,
.legal__foot {
  font-size: 12.5px;
  color: var(--muted);
}

.home__legal {
  padding: 0 clamp(24px, 6vw, 96px) clamp(16px, 3vh, 32px);
}

.legal-links {
  margin-top: var(--space-md);
  text-align: center;
}

.home__legal a,
.legal-links a,
.legal__foot a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home__legal a:hover,
.legal-links a:hover,
.legal__foot a:hover {
  color: var(--primary);
}

.legal {
  max-width: calc(72ch + 2 * var(--space-lg));
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}

.legal__title {
  font-size: clamp(34px, 6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.legal__stamp {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-lg);
}

.legal__intro {
  margin-bottom: var(--space-lg);
}

.legal-draft {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm) 12px;
  flex-wrap: wrap;
  padding: var(--space-sm) 12px;
  margin-bottom: var(--space-xl);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
  font-size: 13px;
}

.legal-draft__stamp {
  padding: 2px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-toc {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
}

.legal-toc__title {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.legal-toc ol {
  padding-left: var(--space-lg);
  columns: 2 280px;
  column-gap: var(--space-xl);
  font-size: 13.5px;
}

.legal-toc li {
  padding: 2px 0;
  break-inside: avoid;
}

.legal a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__body {
  counter-reset: legal-section;
}

.legal__body section {
  scroll-margin-top: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

.legal__body h2 {
  counter-increment: legal-section;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.legal__body h2::before {
  content: counter(legal-section) ". ";
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--muted);
}

.legal__body h3 {
  font-size: 15px;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-xs);
}

.legal__body p,
.legal__body ul {
  margin-bottom: var(--space-sm);
}

.legal__body ul {
  padding-left: var(--space-lg);
}

.legal__body li {
  margin-bottom: var(--space-xs);
}

.legal__body code {
  font-family: var(--font-data);
  font-size: 0.9em;
}

.legal__foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

/* A fact still to be filled in: visible, never hidden, so a draft cannot pass
   for finished text. */
.legal-placeholder {
  padding: 0 4px;
  border: 1px dashed var(--warning);
  border-radius: var(--r-data);
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 0.9em;
}

/* The sign-up and acceptance consent box. */
.consent {
  margin-bottom: var(--space-md);
  font-size: 13px;
}

.consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.consent__box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--r-chip);
  accent-color: var(--primary);
}

.consent a {
  color: var(--primary);
}

.consent__box:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.consent__error {
  margin-top: var(--space-xs);
  color: var(--error);
  font-size: 12.5px;
}

@media print {
  .legal-header,
  .legal-toc,
  .legal__foot {
    display: none;
  }

  html,
  body {
    background: white;
    height: auto;
  }

  .legal,
  .legal * {
    color: black !important;
  }

  .legal__body section {
    break-inside: avoid-page;
  }
}

/* --- Shared report viewer (DESIGN.md § Sharing): the read-only page a share
   link opens. A slim bar with the wordmark and nothing else; the report's
   slides (always Plat Room) below a title block with the downloads the link
   allows. The slides use the Reports step's rules (the wrapper carries
   .project-page) and scale in bands that fit the whole width. --- */

.shared-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}
.shared-main {
  padding: 0 32px var(--space-xl);
}
.shared-foot {
  margin-top: var(--space-xl);
  text-align: center;
}
.shared-noscript {
  padding: var(--space-xl) 0;
  color: var(--muted);
  font-size: 13px;
}
.project-page.shared .shared__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding: var(--space-lg) 0 var(--space-md);
}
.project-page.shared .shared__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  min-width: 0;
}
.project-page.shared .shared__title {
  font: 600 28px/1.15 var(--font-ui);
  overflow-wrap: anywhere;
}
.project-page.shared .shared__for {
  color: var(--muted);
  font: 400 15px/1.4 var(--font-ui);
  overflow-wrap: anywhere;
}
.project-page.shared .shared__id .stamp {
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
}
.project-page.shared .shared__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.project-page.shared .shared__downloads .critbtn {
  height: 32px;
  padding: 0 12px;
}
.project-page.shared .shared__downloads .critbtn:disabled {
  opacity: 0.6;
  cursor: progress;
}
/* The slides' bands: the sidebar of the Reports step is not here, so each band
   is the width that fits (the slide is 1280px, the page keeps 32px gutters). */
.project-page.shared .report {
  zoom: 1;
}
@media screen and (max-width: 1343px) {
  .project-page.shared .report { zoom: 0.9; }
}
@media screen and (max-width: 1215px) {
  .project-page.shared .report { zoom: 0.8; }
}
@media screen and (max-width: 1087px) {
  .project-page.shared .report { zoom: 0.7; }
}
@media screen and (max-width: 959px) {
  .project-page.shared .report { zoom: 0.6; }
}
@media screen and (max-width: 831px) {
  .project-page.shared .report { zoom: 0.5; }
}
@media screen and (max-width: 703px) {
  .project-page.shared .report { zoom: 0.4; }
}
@media screen and (max-width: 575px) {
  .project-page.shared .report { zoom: 0.3; }
}
@media screen and (max-width: 447px) {
  .project-page.shared .report { zoom: 0.25; }
}
@media screen and (max-width: 639px) {
  .shared-main { padding: 0 16px var(--space-lg); }
}

/* --- The sharing dialog (DESIGN.md § The sharing dialog): the Reports step's
   Share button opens a modal on the shared shell with two tabs, the form that
   makes a link and the project's links below. Tokens only; wider than the
   other modals (640px) for the list. --- */

.project-page .reports__share {
  margin-left: auto;
}
.modal.share {
  width: min(640px, 100%);
}
.share__lead {
  margin-top: var(--space-xs);
  color: var(--muted);
  font: 400 13px/1.5 var(--font-ui);
}
.share__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-md);
  margin-top: var(--space-md);
  border-bottom: 1px solid var(--rule-strong);
}
.share__tablist {
  display: flex;
  gap: 2px;
}
.share__tab {
  margin-bottom: -1px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 13px var(--font-ui);
  cursor: pointer;
}
.share__tab--on {
  color: var(--ink);
  border-bottom-color: var(--primary);
}
.share__tab[aria-disabled="true"] {
  cursor: not-allowed;
}
.share__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.share__note {
  padding: var(--space-xs) 0;
  color: var(--muted);
  font: 400 11px var(--font-data);
}
.share__panel {
  padding-top: var(--space-xs);
}
.share fieldset.field {
  min-width: 0;
  border: 0;
  padding: 0;
}
.share__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}
.share__check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font: 400 13px var(--font-ui);
  cursor: pointer;
}
.share__box {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--r-chip);
  accent-color: var(--primary);
}
.share__box:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.share__help {
  margin-top: var(--space-xs);
  color: var(--muted);
  font: 400 12px/1.45 var(--font-ui);
}
.share__acts {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-md);
}
.share__h {
  font: 600 13px/1.4 var(--font-ui);
}
.share__warn {
  margin-top: var(--space-xs);
  font: 600 13px/1.45 var(--font-ui);
}
.share__urlrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-sm);
  align-items: end;
  margin-top: var(--space-sm);
}
.share__urllabel {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.share__url {
  font: 400 12px var(--font-data);
}
.share__status {
  min-height: 20px;
  margin-top: var(--space-xs);
  color: var(--muted);
  font: 400 12px/1.5 var(--font-ui);
}
.share__summary {
  margin: var(--space-xs) 0 var(--space-md);
  color: var(--muted);
  font: 400 13px/1.5 var(--font-ui);
}
.share__list {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-strong);
}
.share__failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--error);
  font: 400 13px/1.45 var(--font-ui);
}
.share__rows {
  margin-top: var(--space-xs);
  list-style: none;
}
.share__row {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.share__row:last-child {
  border-bottom: 0;
}
.share__row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.share__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.share__name {
  min-width: 0;
  font: 600 13px/1.4 var(--font-ui);
  overflow-wrap: anywhere;
}
.share__row--off .share__name,
.share__row--off .share__snap {
  color: var(--muted);
}
.share__badge {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-data);
  color: var(--muted);
  font: 400 9px var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.share__badge--on {
  color: var(--ink);
}
.share__snap {
  font: 400 12.5px/1.45 var(--font-ui);
}
.share__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-md);
  margin-top: 2px;
  color: var(--muted);
  font: 400 11px/1.5 var(--font-data);
}
.share__by {
  margin-top: 2px;
  color: var(--muted);
  font: 400 12px/1.45 var(--font-ui);
}
.share__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.share__ask {
  font: 400 12.5px var(--font-ui);
}
.share__rowerr {
  margin-top: var(--space-xs);
}

/* Open data page (DESIGN.md § Open data page): the legal reading layout plus the file's card. */
.opendata__file {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-box);
  background: var(--panel);
}

.opendata__name {
  font-family: var(--font-data);
  font-size: 13px;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-sm);
}

.opendata__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
}

.opendata__facts dt {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.opendata__facts dd {
  margin: 2px 0 0;
  font-size: 15px;
}

.opendata__facts .opendata__hash {
  font-family: var(--font-data);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}

.opendata__facts > div:last-child {
  grid-column: 1 / -1;
}

.opendata__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
}

.opendata .opendata__button {
  display: inline-block;
  width: auto;
  text-decoration: none;
  color: var(--on-primary);
}

.opendata__pending {
  font-weight: 600;
}

@media print {
  .opendata__button {
    display: none;
  }
}

/* The credit and the way link on the MSA plate sit in the legend and readout strips, never over the data. */
.project-page .mlegend__note a,
.project-page .mplate__readout a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}