/* ═══════════════════════════════════════════════════════════════════════
   PlanHub — Simplified Onboarding (magic box flow)
   - Magic box entry replaces persona-picker
   - Results page with locked cards, inline signup, low-density panels
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Reset / base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--typography-font-family-base), sans-serif;
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  font-size: var(--typography-font-size-s);
  line-height: var(--typography-line-height-s);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
button { font-family: inherit; }
a { color: inherit; }
input, textarea, select { font-family: inherit; }

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

.material-icons { font-size: 20px; line-height: 1; user-select: none; }

/* `hidden` attribute must beat any later display rule */
[hidden] { display: none !important; }

/* ─── Button baselines ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--layout-space-xxs);
  border: var(--layout-border-default) solid transparent;
  border-radius: var(--layout-radius-full);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  font-weight: var(--typography-font-weight-medium);
  letter-spacing: var(--typography-letter-spacing-wide);
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
  outline: none;
}
.btn:focus-visible { outline: var(--layout-border-strong) solid var(--focus-ring); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--s { height: var(--layout-size-button-s); padding: 0 var(--layout-space-xs); font-size: var(--typography-font-size-xs); }
.btn--m { height: var(--layout-size-button-m); padding: 0 var(--layout-space-s); font-size: var(--typography-font-size-s); }
.btn--l { height: var(--layout-size-button-l); padding: 0 var(--layout-space-l); font-size: var(--typography-font-size-s); }
.btn--primary {
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  border-color: var(--action-primary-default);
}
.btn--primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
.btn--primary:disabled {
  background: var(--action-primary-disabled);
  border-color: var(--action-primary-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.btn--secondary {
  background: transparent;
  color: var(--action-secondary-default);
  border-color: var(--action-secondary-default);
}
.btn--secondary:hover:not(:disabled) {
  color: var(--action-secondary-hover);
  border-color: var(--action-secondary-hover);
}
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text-primary); }
.btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }

/* ─── Input field ────────────────────────────────────────────────── */
.input-field-wrapper { display: flex; flex-direction: column; gap: var(--layout-space-xxs); width: 100%; }
.input-field__label {
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  color: var(--text-primary);
}
.input-field {
  display: flex; align-items: center;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-s);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input-field:focus-within {
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 2px var(--status-success-surface);
}
.input-field--m { height: var(--layout-size-button-m); padding: 0 var(--layout-space-s); }
.input-field--l { height: var(--layout-size-button-l); padding: 0 var(--layout-space-s); }
.input-field__input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: inherit; color: var(--text-primary);
  font-size: var(--typography-font-size-s);
  padding: 0;
}
.input-field__input::placeholder { color: var(--text-tertiary); }
.input-field__leadingIcon {
  color: var(--icon-subtle); display: inline-flex;
  margin-right: var(--layout-space-xs);
  flex-shrink: 0;
}
.input-field__leadingIcon .material-icons { font-size: 18px; }
.input-field__toggle {
  background: none; border: none; padding: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--layout-radius-full);
  color: var(--icon-subtle); cursor: pointer;
}
.input-field__toggle:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.input-field__toggle .material-icons { font-size: 18px; }

/* ─── Links ──────────────────────────────────────────────────────── */
.link-tertiary {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--action-secondary-default); font-family: inherit;
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-medium);
}
.link-tertiary:hover { color: var(--action-secondary-hover); text-decoration: underline; }
.link-inline {
  color: var(--action-secondary-default); text-decoration: underline;
  text-underline-offset: 2px;
}
.link-inline:hover { color: var(--action-secondary-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   Persistent top bar
   ═══════════════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-app-shell);
  color: var(--text-inverse);
}
.topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--layout-space-s) var(--layout-space-l);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-m);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  text-decoration: none;
  color: var(--text-inverse);
}
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--layout-radius-s);
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  font-weight: var(--typography-font-weight-semi-bold);
  font-size: var(--typography-font-size-m);
  line-height: 1;
}
.brand__name {
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-inverse);
  font-size: var(--typography-font-size-m);
}
.brand__img {
  display: block;
  height: 36px;
  width: auto;
}
.topbar__right { display: inline-flex; align-items: center; gap: var(--layout-space-xs); }
.topbar__right .link-inline { margin-left: var(--layout-space-s); }

/* PDP context — populated into the global topbar when on a project page. */
.topbar__context {
  display: inline-flex; align-items: center; gap: var(--layout-space-s);
  flex: 1;
  min-width: 0;
}
.topbar__context[hidden] { display: none; }
.topbar__back {
  width: 32px; height: 32px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-inverse);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar__back:hover { background: rgba(255,255,255,0.08); }
.topbar__back .material-icons { font-size: 20px; }
.topbar__title {
  margin: 0;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-inverse);
  letter-spacing: -0.2px;
  flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.topbar__badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid rgba(108, 92, 231, 0.5);
  color: #c2b9f5;
  padding: 3px 10px;
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-semi-bold);
  flex-shrink: 0;
}
.topbar__badge[hidden] { display: none; }
.topbar__badge .material-icons { font-size: 14px; color: #c2b9f5; }
.topbar__icon {
  width: 32px; height: 32px;
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.75);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar__icon:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar__icon .material-icons { font-size: 20px; }
.topbar__icon[hidden] { display: none; }
/* On PDP, the screen owns its own dark topbar (Anna parity) — hide the global one. */
body.is-pdp .topbar { display: none; }

/* PDP tab row, integrated as a second row of the same dark global topbar. */
.topbar__tabs {
  background: var(--bg-app-shell);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.topbar__tabs[hidden] { display: none; }
.topbar__tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--layout-space-l);
  display: flex; align-items: center;
  gap: var(--layout-space-m);
  height: 44px;
}
.topbar__tab {
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.6);
  padding: 0 4px;
  height: 100%;
  display: inline-flex; align-items: center;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  position: relative;
}
.topbar__tab:hover { color: rgba(255,255,255,0.85); }
.topbar__tab--active { color: #fff; }
.topbar__tab--active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--action-primary-default);
  border-radius: 2px 2px 0 0;
}
.topbar__tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  font-size: 10px;
  font-weight: var(--typography-font-weight-bold);
  padding: 0 5px;
  margin-left: 4px;
}

.topbar__trust {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  padding: 6px var(--layout-space-s);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-xs);
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
}
.topbar__trust strong { color: var(--text-inverse); font-weight: var(--typography-font-weight-semi-bold); }
.topbar__trust-icon {
  font-size: 16px;
  color: var(--color-primitives-green-300);
  flex-shrink: 0;
}
.topbar__right .link-inline,
.topbar__right a {
  color: var(--text-inverse);
  text-decoration-color: rgba(255,255,255,0.4);
}
.topbar__right .link-inline:hover,
.topbar__right a:hover {
  color: var(--text-inverse);
  text-decoration-color: var(--text-inverse);
}

@media (max-width: 720px) {
  .topbar__trust { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Screen routing
   ═══════════════════════════════════════════════════════════════════════ */
.screen { display: none; flex: 1; min-height: 0; }
.screen--active { display: flex; }
.screen--marketing { flex-direction: column; background: var(--bg-canvas); }

/* ═══════════════════════════════════════════════════════════════════════
   LANDING — magic box
   ═══════════════════════════════════════════════════════════════════════ */
.land-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--layout-space-xxl) var(--layout-space-l) var(--layout-space-xl);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  gap: var(--layout-space-l);
  width: 100%;
}
.land-headline {
  margin: 0;
  font-size: 40px;
  line-height: 1.25;
  font-weight: var(--typography-font-weight-semi-bold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  /* allow the inline locpick to anchor a floating popover beneath itself */
  position: relative;
  display: block;
}
.land-headline__space { white-space: pre; }
.locpick__qmark { margin-left: 2px; }

/* ───── Inline location picker (headline) ───── */
.locpick {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.locpick__trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--feedback-success-text);
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  line-height: inherit;
  transition: opacity .14s ease;
}
.locpick__trigger:hover .locpick__label,
.locpick__trigger[aria-expanded="true"] .locpick__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.locpick__trigger:focus-visible {
  outline: 3px solid var(--status-success-border);
  outline-offset: 4px;
  border-radius: 4px;
}
.locpick__label {
  white-space: nowrap;
  color: inherit;
}
.locpick__chev {
  font-size: 34px !important;
  line-height: 1;
  color: inherit;
  opacity: .9;
  transition: transform .2s ease;
  transform: translateY(2px);
}
.locpick__trigger[aria-expanded="true"] .locpick__chev {
  transform: translateY(2px) rotate(180deg);
}

.locpick__popover {
  /* Position is set in JS each time it opens — top/left in viewport coords. */
  position: fixed;
  top: 0; left: 0;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--layout-radius-l);
  box-shadow: var(--elevation-light-high);
  z-index: 100;
  text-align: left;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-m);
  letter-spacing: 0;
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: locpickPop .16s cubic-bezier(.2,.7,.3,1);
}
.locpick__popover::before {
  /* Little caret connecting back to the trigger — JS sets --locpick-caret-x. */
  content: "";
  position: absolute;
  top: -7px;
  left: var(--locpick-caret-x, 50%);
  width: 12px; height: 12px;
  background: var(--bg-canvas);
  border-left: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes locpickPop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.locpick__search {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: var(--layout-space-s) var(--layout-space-m);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-canvas);
  flex-shrink: 0;
}
.locpick__search-icon { color: var(--icon-subtle); font-size: 20px; }
.locpick__search-input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: inherit;
  font-size: var(--typography-font-size-m);
  color: var(--text-primary);
  padding: 6px 0;
}
.locpick__search-input::placeholder { color: var(--text-tertiary); }

.locpick__list {
  list-style: none;
  margin: 0; padding: var(--layout-space-xs) 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.locpick__item {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: var(--layout-space-s) var(--layout-space-m);
  cursor: pointer;
  transition: background-color .12s ease;
}
.locpick__item:hover,
.locpick__item[aria-selected="true"] {
  background: var(--bg-surface-hover);
}
.locpick__item-icon {
  color: var(--icon-subtle);
  font-size: 20px;
  flex-shrink: 0;
}
.locpick__item-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.locpick__item-name {
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  line-height: 1.2;
}
.locpick__item-name mark {
  background: var(--status-success-surface);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.locpick__item-meta {
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: 1.2;
}
.locpick__item-check {
  color: var(--feedback-success-text);
  font-size: 20px;
  flex-shrink: 0;
}
.locpick__empty {
  padding: var(--layout-space-m);
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  text-align: center;
}

@media (max-width: 640px) {
  .locpick__chev { font-size: 28px !important; }
}
.land-sub {
  margin: 0 auto;
  font-size: var(--typography-font-size-m);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
  max-width: 600px;
}

/* Magic box */
.magic { width: 100%; display: flex; flex-direction: column; gap: var(--layout-space-m); }
.magic-box {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg-canvas);
  border: 2px solid var(--border-default);
  border-radius: var(--layout-radius-full);
  padding: var(--layout-space-xs) var(--layout-space-xs) var(--layout-space-xs) var(--layout-space-m);
  transition: border-color .12s ease, box-shadow .12s ease;
  box-shadow: var(--elevation-light-low);
}
.magic-box:focus-within {
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 4px var(--status-success-surface), var(--elevation-light-medium);
}
.magic-box__icon { color: var(--icon-subtle); flex-shrink: 0; }
.magic-box__input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 14px var(--layout-space-s);
  font-family: inherit;
  font-size: var(--typography-font-size-l);
  color: var(--text-primary);
}
.magic-box__input::placeholder { color: var(--text-tertiary); }
.magic-box__submit {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--layout-radius-full);
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  border: none; cursor: pointer;
  transition: background-color .12s ease;
}
.magic-box__submit:hover { background: var(--action-primary-hover); }
.magic-box__submit .material-icons { font-size: 22px; }

.magic-box--inline {
  border-width: var(--layout-border-default);
  box-shadow: none;
}
.magic-box--inline .magic-box__input { font-size: var(--typography-font-size-m); padding: 10px var(--layout-space-s); }
.magic-box--inline .magic-box__submit { width: 36px; height: 36px; }
.magic-box--inline .magic-box__submit .material-icons { font-size: 18px; }

.magic-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--layout-space-xs);
}
.magic-chip {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
  padding: 8px var(--layout-space-m);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-full);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.magic-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}
.magic-chip__icon {
  font-size: 16px;
  color: var(--icon-subtle);
}

/* Drop zone */
.land-drop {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--layout-space-s);
}
.land-drop__or {
  width: 100%;
  display: flex; align-items: center; gap: var(--layout-space-s);
  color: var(--text-tertiary);
  font-size: var(--typography-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
  font-weight: var(--typography-font-weight-medium);
}
.land-drop__or::before,
.land-drop__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.land-drop__zone {
  width: 100%;
  display: flex; align-items: center; gap: var(--layout-space-m);
  padding: var(--layout-space-m) var(--layout-space-l);
  background: var(--bg-canvas);
  border: var(--layout-border-default) dashed var(--border-default);
  border-radius: var(--layout-radius-m);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
  text-align: left;
}
.land-drop__zone:hover,
.land-drop__zone--over {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
.land-drop__icon {
  font-size: 28px;
  color: var(--action-primary-default);
  flex-shrink: 0;
}
.land-drop__copy { display: flex; flex-direction: column; gap: 2px; }
.land-drop__title { font-size: var(--typography-font-size-m); color: var(--text-primary); }
.land-drop__sub { font-size: var(--typography-font-size-s); color: var(--text-secondary); }
.land-drop__demo {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
}
.land-drop__demo-label {
  font-weight: var(--typography-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALYZING screen
   ═══════════════════════════════════════════════════════════════════════ */
.analyzing-main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--layout-space-xl) var(--layout-space-l);
}
.analyzing-card {
  width: 100%; max-width: 520px;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-l);
  padding: var(--layout-space-l);
  box-shadow: var(--elevation-light-low);
  display: flex; flex-direction: column; gap: var(--layout-space-m);
}
.analyzing-card__head {
  display: flex; align-items: center; gap: var(--layout-space-s);
}
.analyzing-card__icon {
  font-size: 32px;
  color: var(--action-primary-default);
  flex-shrink: 0;
}
.analyzing-card__name {
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  font-size: var(--typography-font-size-m);
}
.analyzing-card__sub {
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  margin-top: 2px;
}
.analyzing-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--layout-space-xs);
}
.analyzing-step {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: var(--layout-space-xs) var(--layout-space-s);
  background: var(--bg-surface);
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.analyzing-step__indicator {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--layout-radius-full);
  background: var(--bg-surface-hover);
  border: var(--layout-border-default) solid var(--border-default);
  color: var(--icon-subtle);
}
.analyzing-step--active .analyzing-step__indicator {
  background: var(--status-ai-surface);
  border-color: var(--status-ai-border);
  animation: pulse 1.4s ease-in-out infinite;
}
.analyzing-step--done .analyzing-step__indicator {
  background: var(--action-primary-default);
  border-color: var(--action-primary-default);
  color: var(--action-on-action-primary);
}
.analyzing-step--done .analyzing-step__indicator::after {
  content: "✓";
  font-size: 11px;
  font-weight: var(--typography-font-weight-semi-bold);
}
.analyzing-step__label { flex: 1; }
.analyzing-step--done { color: var(--text-primary); }
.analyzing-step__value {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.analyzing-step--done .analyzing-step__value { color: var(--text-primary); font-weight: var(--typography-font-weight-medium); }

.analyzing-bar {
  width: 100%; height: 6px;
  background: var(--bg-surface);
  border-radius: var(--layout-radius-full);
  overflow: hidden;
}
.analyzing-bar__fill {
  width: 0%; height: 100%;
  background: var(--action-primary-default);
  transition: width .3s ease;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESULTS screen
   ═══════════════════════════════════════════════════════════════════════ */

/* Full-bleed map band with stats overlay at the bottom edge. */
.map-band {
  position: relative;
  width: 100%;
  /* Reserve space below the map so the stats card can overlap downward
     without colliding with following content. */
  padding-bottom: 56px;
  background: var(--bg-canvas);
}
.mini-map {
  width: 100%;
  height: 260px;
  background: var(--bg-surface);
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
  position: relative;
  z-index: 0;
}
.mini-map .leaflet-control-attribution { font-size: 10px; }

/* Stats card — sits over the bottom of the map, centered. A small location
   header sits above the four-column grid so the totals are obviously tied
   to the active search area. */
.map-stats {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - var(--layout-space-xl));
  max-width: 920px;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  box-shadow: var(--elevation-light-medium);
  overflow: hidden;
}
.map-stats__head {
  display: flex; align-items: center; justify-content: center;
  gap: var(--layout-space-xs);
  padding: var(--layout-space-xs) var(--layout-space-m);
  background: var(--bg-app-shell);
  font-size: var(--typography-font-size-s);
  color: var(--text-inverse);
}
.map-stats__head-icon {
  font-size: 16px;
  color: var(--color-primitives-green-300);
  flex-shrink: 0;
}
.map-stats__head-text {
  display: inline-flex; align-items: center;
  flex-wrap: wrap;
  gap: var(--layout-space-xs);
}
.map-stats__head .loc-edit__prefix { color: rgba(255,255,255,0.75); }
.map-stats__head .loc-edit__place { color: rgba(255,255,255,0.85); }

/* Chip-style editable controls — bordered fields that read as real form
   controls, sized to sit comfortably inside the header band. */
.loc-edit {
  position: relative;
  display: inline-flex; align-items: center;
}
.loc-edit__select,
.loc-edit__input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-s);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  height: 26px;
  padding: 0 var(--layout-space-xs);
  cursor: pointer;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.loc-edit__select { padding-right: 24px; }
.loc-edit__input {
  cursor: text;
  padding-right: 24px;
  min-width: 6ch;
}
.loc-edit__zip {
  width: 68px;
  min-width: 0;
  padding-right: var(--layout-space-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.loc-edit__place {
  font-weight: var(--typography-font-weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}
.loc-edit__place::before { content: "("; }
.loc-edit__place::after  { content: ")"; }
.loc-edit__select:hover,
.loc-edit__input:hover {
  border-color: var(--border-strong);
}
.loc-edit__select:focus-visible,
.loc-edit__input:focus-visible {
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 3px var(--status-success-surface);
}
.loc-edit__chev {
  position: absolute;
  right: var(--layout-space-xxs);
  pointer-events: none;
  font-size: 16px;
  color: var(--icon-subtle);
}
.loc-edit:hover .loc-edit__chev,
.loc-edit:focus-within .loc-edit__chev {
  color: var(--action-primary-default);
}
.map-stats__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.map-stats__item {
  padding: var(--layout-space-s) var(--layout-space-m);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  border-left: var(--layout-border-default) solid var(--border-subtle);
}
.map-stats__item:first-child { border-left: 0; }
.map-stats__num {
  font-size: 28px;
  line-height: 1;
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--action-primary-default);
  letter-spacing: -0.01em;
  margin: 0;
}
.map-stats__label {
  margin: 4px 0 0;
  font-size: var(--typography-font-size-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .mini-map { height: 200px; }
  .map-band { padding-bottom: 140px; }
  .map-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .map-stats__item:nth-child(3) { border-left: 0; }
  .map-stats__item:nth-child(n+3) {
    border-top: var(--layout-border-default) solid var(--border-subtle);
  }
  .map-stats__num { font-size: 22px; }
}
/* Landing footer — quiet, neutral, sits at the bottom of the landing screen. */
.land-footer {
  margin-top: auto;
  border-top: var(--layout-border-default) solid var(--border-subtle);
  background: var(--bg-canvas);
}
.land-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--layout-space-l) var(--layout-space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-space-m);
}
.land-footer__copy {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--typography-font-size-s);
}
.land-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-l);
}
.land-footer__link {
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  text-decoration: none;
}
.land-footer__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .land-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .land-footer__nav { gap: var(--layout-space-m); }
}

/* Landing map — pure ambient context, no overlay. */
.screen--marketing .map-band { padding-bottom: 0; }
.screen--marketing .mini-map {
  height: 320px;
  border-bottom: 0;
}

/* Trust line under the search — quiet proof, not interactive. */
.land-trust {
  margin: 0;
  width: max-content;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.land-trust strong {
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-semi-bold);
}
.land-trust__icon {
  color: var(--icon-success, var(--action-primary-default));
  font-size: 18px;
  vertical-align: -4px;
  margin-right: var(--layout-space-xxs);
}

/* Stylized one-liner under the search — supporting proof, not interactive. */
.land-stats {
  margin: 0;
  width: max-content;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.land-stats__num {
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-semi-bold);
  font-variant-numeric: tabular-nums;
}
.land-stats__sep {
  margin: 0 var(--layout-space-xs);
  color: var(--text-tertiary);
}
.land-stats [data-loc-city-display] {
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-medium);
}

@media (max-width: 720px) {
  .screen--marketing .mini-map { height: 220px; }
  .land-stats { font-size: var(--typography-font-size-xs); }
}

.land-map-marker { background: transparent !important; border: none !important; }
.land-map-marker__dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--action-primary-default);
  border: 2px solid var(--bg-canvas);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

.results-bar {
  background: var(--bg-canvas);
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
  padding: var(--layout-space-s) var(--layout-space-l);
}
.results-bar .magic { max-width: 1200px; margin: 0 auto; }

.results-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--layout-space-m) var(--layout-space-l) 0;
  display: flex; flex-direction: column; gap: var(--layout-space-m);
}

/* Two-column split: projects left, signup right */
.results-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--layout-space-l);
  align-items: flex-start;
}
.results-col {
  display: flex; flex-direction: column; gap: var(--layout-space-m);
  min-width: 0;
}
.results-col--gate {
  position: sticky;
  /* Topbar (~60px) + a little breathing room — keeps the headline clear of
     the sticky bar above. */
  top: calc(60px + var(--layout-space-s));
  max-height: calc(100vh - 60px - var(--layout-space-l));
  overflow-y: auto;
}
.results-col--gate::-webkit-scrollbar { width: 6px; }
.results-col--gate::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--layout-radius-full);
}
@media (max-width: 960px) {
  .results-split {
    grid-template-columns: 1fr;
  }
  .results-col--gate {
    position: static;
    order: -1;
  }
}

/* Location banner */
.loc-banner {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  align-self: flex-start;
  padding: 6px var(--layout-space-s);
  background: var(--bg-surface);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.loc-banner__icon {
  font-size: 16px;
  color: var(--icon-subtle);
}
.loc-banner__text strong { color: var(--text-primary); font-weight: var(--typography-font-weight-semi-bold); }
.loc-banner__change {
  background: none; border: none; padding: 0;
  margin-left: var(--layout-space-xs);
  color: var(--action-secondary-default);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
}
.loc-banner__change:hover { color: var(--action-secondary-hover); text-decoration: underline; }

/* ─── Inline signup panel ────────────────────────────────────────── */
.signup-panel {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-l);
  padding: var(--layout-space-l);
  box-shadow: var(--elevation-light-low);
}
.signup-panel--focused {
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 3px var(--status-success-surface), var(--elevation-light-medium);
}
.signup-panel__head {
  display: flex; align-items: flex-start; gap: var(--layout-space-s);
  margin-bottom: var(--layout-space-m);
}
.signup-panel__icon {
  font-size: 24px;
  color: var(--action-primary-default);
  flex-shrink: 0;
  margin-top: 2px;
}
.signup-panel__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--layout-space-xs);
  margin-bottom: 6px;
  background: var(--status-success-surface);
  border: var(--layout-border-default) solid var(--status-success-border);
  border-radius: var(--layout-radius-full);
  color: var(--feedback-success-text);
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-semi-bold);
  letter-spacing: var(--typography-letter-spacing-wide);
}
.signup-panel__badge .material-icons {
  font-size: 14px;
  color: var(--feedback-success-text);
}
.signup-panel__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  line-height: var(--typography-line-height-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.signup-panel__sub {
  margin: 4px 0 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
.signup-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--layout-space-l);
  align-items: stretch;
}

/* Stacked variant — used in the two-column results layout */
.signup-panel--stacked {
  padding: var(--layout-space-m);
}
.signup-panel__body--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-s);
}
/* Higher specificity than the base .signup-panel__or rule below — without
   it the base "flex-direction: column" wins by source order and the
   horizontal dividers render as 1px-wide vertical slivers. */
.signup-panel__or.signup-panel__or--horiz {
  display: flex; align-items: center;
  flex-direction: row;
  gap: var(--layout-space-s);
}
.signup-panel__or.signup-panel__or--horiz::before,
.signup-panel__or.signup-panel__or--horiz::after {
  content: "";
  flex: 1;
  width: auto; height: 1px;
  background: var(--border-subtle);
}
.signup-panel__or.signup-panel__or--horiz span { padding: 0 var(--layout-space-xs); }

.signup-panel--stacked .signup-panel__form {
  gap: var(--layout-space-s);
}
.signup-panel--stacked .signup-panel__submit { width: 100%; }
.signup-panel--stacked .signup-panel__signin {
  margin: 0;
  text-align: center;
  font-size: var(--typography-font-size-s);
}
.signup-panel__social {
  display: flex; flex-direction: column; gap: var(--layout-space-xs);
}
.btn-social {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--layout-space-xs);
  height: var(--layout-size-button-l);
  padding: 0 var(--layout-space-m);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-s);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-social:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}
.btn-social__logo {
  display: inline-flex; align-items: center;
}

.signup-panel__or {
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-tertiary);
  font-size: var(--typography-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
}
.signup-panel__or::before,
.signup-panel__or::after {
  content: "";
  flex: 1;
  width: 1px;
  background: var(--border-subtle);
}
.signup-panel__or span { padding: var(--layout-space-xs) 0; }

.signup-panel__form {
  display: flex; flex-direction: column; gap: var(--layout-space-s);
}
.signup-panel__cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-s);
  margin-top: var(--layout-space-xs);
}
.signup-panel__submit { flex-shrink: 0; }
.signup-panel__signin {
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.signup-panel__legal {
  margin: 0;
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
  line-height: var(--typography-line-height-s);
}

@media (max-width: 820px) {
  .signup-panel__body {
    grid-template-columns: 1fr;
    gap: var(--layout-space-m);
  }
  .signup-panel__or { flex-direction: row; }
  .signup-panel__or::before,
  .signup-panel__or::after {
    width: auto; height: 1px;
  }
  .signup-panel__or span { padding: 0 var(--layout-space-s); }
}

/* ─── Density banner (low-density honest framing) ───────────────── */
.density-banner {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: var(--layout-space-s) var(--layout-space-m);
  background: var(--status-highlight-surface);
  border: var(--layout-border-default) solid var(--status-highlight-border);
  border-radius: var(--layout-radius-m);
  color: var(--status-highlight-text);
}
.density-banner__icon {
  font-size: 20px;
  color: var(--status-highlight-icon);
  flex-shrink: 0;
}
.density-banner__copy {
  margin: 0;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
}

/* ─── Section headers ───────────────────────────────────────────── */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--layout-space-s);
}
.section-head__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.section-head__count {
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}

/* ─── Project grid + cards (mirror SC Project Finder) ───────────── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-space-m);
}
.proj-grid--single {
  grid-template-columns: 1fr;
}
@media (max-width: 720px) {
  .proj-grid { grid-template-columns: 1fr; }
}

.proj-card {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-m);
  display: flex; flex-direction: column;
  gap: var(--layout-space-xs);
  transition: box-shadow 150ms, transform 150ms;
  position: relative;
}
.proj-card:hover { box-shadow: var(--elevation-light-medium); }

.proj-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--layout-space-s);
}
.proj-card__type {
  font-size: var(--typography-font-size-xs);
  color: var(--status-ai-text);
  font-weight: var(--typography-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
}
.proj-card__name {
  margin: 2px 0 0;
  font-size: var(--typography-font-size-l);
  line-height: var(--typography-line-height-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.proj-card__value-block {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
.proj-card__value {
  display: block;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.proj-card__due {
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
}
.proj-card__due--urgent {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--status-warning-text);
  font-weight: var(--typography-font-weight-semi-bold);
}
.proj-card__due--urgent::before {
  content: "";
  display: inline-block; width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--status-warning-text);
}
.proj-card__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--layout-space-xxs) var(--layout-space-xs);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.proj-card__meta-sep { color: var(--text-tertiary); }
.proj-card__summary {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
.proj-card__trades {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.proj-card__trade {
  padding: 3px var(--layout-space-xs);
  background: var(--bg-surface);
  border-radius: var(--layout-radius-xs);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
/* Matched-trade chip: solid action-primary, pulls the user's intent forward
   so they can see at a glance which trade on each card is theirs. */
.proj-card__trade--match {
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  font-weight: var(--typography-font-weight-semi-bold);
}
.proj-card--locked .proj-card__trade { opacity: 0.95; }
.proj-card__gcs {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.proj-card__gcs .material-icons { font-size: 16px; color: var(--icon-subtle); }
/* .proj-card__actions removed — every card requires signup so the panel on
   the right is the single CTA. */

/* ─── Locked card ─────────────────────────────────────────────────
   Coverage banner is intentionally NOT used here — the signup CTA lives
   in the panel on the right of the results split, not on each card. */
.proj-card--locked { background: var(--bg-canvas); }
.proj-card--locked .proj-card__name,
.proj-card--locked .proj-card__value {
  /* Locked titles still read "generic" but with full color so the rest of
     the card can pop. The genericTitle text itself signals the gate. */
}
.proj-card--locked .proj-card__summary { opacity: 0.85; }

.coverage-banner {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: var(--layout-space-xs) var(--layout-space-s);
  background: var(--status-highlight-surface);
  border: var(--layout-border-default) solid var(--status-highlight-border);
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-s);
  color: var(--status-highlight-text);
}
.coverage-banner__ribbon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--color-primitives-yellow-500);
  color: var(--color-primitives-neutral-800);
  border-radius: var(--layout-radius-xs);
  flex-shrink: 0;
}
.coverage-banner__ribbon .material-icons { font-size: 16px; }
.coverage-banner__copy { flex: 1; min-width: 0; }
.coverage-banner__title {
  display: block;
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--status-highlight-text);
}
.coverage-banner__cta {
  border: var(--layout-border-default) solid var(--color-primitives-yellow-600);
  background: var(--color-primitives-yellow-500);
  color: var(--color-primitives-neutral-800);
  padding: 6px var(--layout-space-s);
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.coverage-banner__cta:hover {
  background: var(--color-primitives-yellow-600);
  border-color: var(--color-primitives-yellow-700);
}

.preview-btn {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
  padding: 4px var(--layout-space-s);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-full);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
}
.preview-btn:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.preview-btn .material-icons { font-size: 14px; color: var(--icon-subtle); }

/* ─── Adaptive panels (past + connections) ──────────────────────── */
.adaptive-panels {
  display: flex; flex-direction: column; gap: var(--layout-space-m);
  margin-top: var(--layout-space-s);
}
.adaptive-panel {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-m);
  display: flex; flex-direction: column; gap: var(--layout-space-s);
}
.adaptive-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-s);
}
.adaptive-panel__title {
  margin: 0;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
}
.adaptive-panel__title .material-icons {
  font-size: 18px;
  color: var(--icon-subtle);
}
.adaptive-panel__hint {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.adaptive-panel__rows {
  display: flex; flex-direction: column;
}
.adaptive-row {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: var(--layout-space-s) 0;
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
}
.adaptive-row:last-child { border-bottom: none; }
.adaptive-row__avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--layout-radius-full);
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--typography-font-weight-semi-bold);
  font-size: var(--typography-font-size-s);
}
.adaptive-row__body { flex: 1; min-width: 0; }
.adaptive-row__name {
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.adaptive-row__meta {
  font-size: var(--typography-font-size-xs);
  color: var(--text-secondary);
}
.adaptive-row__action {
  flex-shrink: 0;
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
}

/* Email alerts CTA at bottom */
.alerts-cta {
  display: flex; align-items: center; gap: var(--layout-space-s);
  margin-top: var(--layout-space-m);
  padding: var(--layout-space-m);
  background: var(--status-ai-surface);
  border: var(--layout-border-default) solid var(--status-ai-border);
  border-radius: var(--layout-radius-m);
  color: var(--status-ai-text);
}
.alerts-cta__icon { color: var(--status-ai-icon) !important; }
.alerts-cta__icon {
  font-size: 24px;
  color: var(--action-primary-default);
  flex-shrink: 0;
}
.alerts-cta__copy { flex: 1; display: flex; flex-direction: column; }
.alerts-cta__copy strong { color: var(--text-primary); font-weight: var(--typography-font-weight-semi-bold); }
.alerts-cta__copy span { font-size: var(--typography-font-size-s); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   MATCH (known project) screen
   ═══════════════════════════════════════════════════════════════════════ */
.match-main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--layout-space-xl) var(--layout-space-l);
}
.match-card {
  width: 100%; max-width: 640px;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-l);
  padding: var(--layout-space-l);
  box-shadow: var(--elevation-light-low);
  display: flex; flex-direction: column; gap: var(--layout-space-m);
}
.match-card__head {
  display: flex; gap: var(--layout-space-s);
  align-items: flex-start;
}
.match-card__icon {
  font-size: 32px;
  color: var(--feedback-success-text);
  flex-shrink: 0;
}
.match-card__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
}
.match-card__sub {
  margin: 4px 0 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.match-card__project {
  background: var(--bg-surface);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-m);
  display: flex; flex-direction: column; gap: var(--layout-space-xs);
}
.match-card__eyebrow {
  font-size: var(--typography-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
  color: var(--text-tertiary);
  font-weight: var(--typography-font-weight-semi-bold);
}
.match-card__name {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  opacity: 0.78;
}
.match-card__meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.match-card__meta li {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
}
.match-card__meta .material-icons {
  font-size: 16px;
  color: var(--icon-subtle);
}
.match-card__summary {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  opacity: 0.78;
}
.match-card__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-s);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS screen
   ═══════════════════════════════════════════════════════════════════════ */
.success-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--layout-space-xl) var(--layout-space-l);
  gap: var(--layout-space-m);
  max-width: 520px;
  margin: 0 auto;
}
.success-main__icon {
  font-size: 56px;
  color: var(--feedback-success-text);
}
.success-main__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.success-main__sub {
  margin: 0;
  font-size: var(--typography-font-size-m);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}

/* ═══════════════════════════════════════════════════════════════════════
   DEMO PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.demo-nav {
  position: fixed; bottom: var(--layout-space-m); right: var(--layout-space-m);
  top: auto;
  z-index: 90;
  background: var(--bg-app-shell);
  color: var(--text-inverse);
  border-radius: var(--layout-radius-s);
  padding: var(--layout-space-xs);
  box-shadow: var(--elevation-light-high);
  display: flex; flex-direction: column; gap: 6px;
  width: 220px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.demo-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.demo-nav__label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: var(--typography-font-weight-semi-bold);
}
.demo-nav__hide {
  background: transparent; border: none;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--layout-radius-xs);
  font-family: inherit;
}
.demo-nav__hide:hover { color: var(--text-inverse); background: rgba(255,255,255,0.08); }
.demo-nav__group {
  display: flex; flex-direction: column; gap: 2px;
}
.demo-nav__group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.45);
  font-weight: var(--typography-font-weight-semi-bold);
  padding: 4px 10px 2px;
}
.demo-nav__btn {
  display: flex; align-items: center; justify-content: flex-start;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-medium);
  text-align: left;
  cursor: pointer;
  border-radius: var(--layout-radius-xs);
  font-family: inherit;
}
.demo-nav__btn:hover { background: rgba(255,255,255,0.10); color: var(--text-inverse); }
.demo-nav__btn--active { background: rgba(0,184,148,0.18); color: var(--text-inverse); }
.demo-show {
  position: fixed; bottom: var(--layout-space-m); right: var(--layout-space-m);
  top: auto;
  z-index: 90;
  display: none;
  align-items: center;
  height: 32px; padding: 0 12px;
  background: var(--bg-app-shell);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--layout-radius-s);
  font-family: inherit;
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  box-shadow: var(--elevation-light-medium);
}
.demo-nav[hidden] { display: none; }
.demo-nav[hidden] ~ .demo-show { display: inline-flex; }

/* Reduce demo panel to floating button on smaller screens */
@media (max-width: 1100px) {
  .demo-nav { width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sub card (GC view) — same shell as .proj-card, swap the top region
   for a company-style identity (avatar + meta) since there's no project
   value or due date to anchor the right edge.
   ═══════════════════════════════════════════════════════════════════════ */
.proj-card--sub .proj-card__top { align-items: center; }
.proj-card--sub .proj-card__sub-id {
  display: flex; align-items: center; gap: var(--layout-space-s);
  flex: 1; min-width: 0;
}
.proj-card__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--layout-radius-full);
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-semi-bold);
  font-size: var(--typography-font-size-s);
}
.proj-card__avatar--icon {
  background: var(--bg-surface);
  color: var(--icon-subtle);
}
.proj-card__avatar--icon .material-icons { font-size: 20px; }
.proj-card--sub .proj-card__name { opacity: 0.85; }

/* Icon-style adaptive row avatar — used when we're concealing identity */
.adaptive-row__avatar--icon {
  background: var(--bg-surface);
  color: var(--icon-subtle);
}
.adaptive-row__avatar--icon .material-icons { font-size: 18px; }

/* Invited project — distinct header band so it reads as an outreach,
   not a generic locked card. */
.proj-card--invited {
  border-color: var(--action-primary-default);
  box-shadow: 0 0 0 2px var(--status-success-surface);
}
.proj-card__invite-badge {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  padding: 6px var(--layout-space-s);
  background: var(--status-ai-surface);
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-s);
  color: var(--status-ai-text);
  align-self: flex-start;
}
.proj-card__invite-badge .material-icons {
  font-size: 16px;
  color: var(--status-ai-icon);
}
.proj-card--invited .proj-card__name { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Prefill banner (UITB + Invite)
   ═══════════════════════════════════════════════════════════════════════ */
.prefill-banner {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: var(--layout-space-xs) var(--layout-space-m);
  background: var(--status-ai-surface);
  border: var(--layout-border-default) solid var(--status-ai-border);
  border-radius: var(--layout-radius-m);
  color: var(--status-ai-text);
}
.prefill-banner__icon {
  font-size: 18px;
  color: var(--status-ai-icon);
  flex-shrink: 0;
}
.prefill-banner__text { flex: 1; font-size: var(--typography-font-size-s); }
.prefill-banner__text strong { color: var(--text-primary); }
.prefill-banner__edit {
  background: none; border: none; padding: 0;
  color: var(--action-secondary-default);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
}
.prefill-banner__edit:hover {
  color: var(--action-secondary-hover);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   Supplier section (multi-section results view)
   ═══════════════════════════════════════════════════════════════════════ */
.supplier-section { display: flex; flex-direction: column; gap: var(--layout-space-s); }
.supplier-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.supplier-section__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.supplier-section__count {
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.supplier-section__hint {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
/* Flat variant for the GCs-buying section — removes the inner panel border
   so the section header carries the framing. */
.adaptive-panel--flat { padding: 0; border: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   Micro-question (supplier results)
   ═══════════════════════════════════════════════════════════════════════ */
.micro-question {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-m);
  display: flex; flex-direction: column; gap: var(--layout-space-xs);
}
.micro-question__title {
  margin: 0;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.micro-question__sub {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.micro-question__chips { justify-content: flex-start; margin-top: var(--layout-space-xxs); }
.micro-chip {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
  padding: 8px var(--layout-space-m);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-full);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.micro-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}
.micro-chip__icon { font-size: 16px; color: var(--icon-subtle); }
.micro-chip--active {
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  border-color: var(--action-primary-default);
}
.micro-chip--active .micro-chip__icon { color: var(--action-on-action-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   Empty state (zero results) + enrichment fields
   ═══════════════════════════════════════════════════════════════════════ */
.empty-state {
  background: var(--bg-canvas);
  border: var(--layout-border-default) dashed var(--border-default);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-l);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--layout-space-s);
}
.empty-state__icon {
  font-size: 32px;
  color: var(--icon-subtle);
}
.empty-state__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.empty-state__copy {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
.empty-state__actions {
  display: flex; gap: var(--layout-space-xs);
  flex-wrap: wrap;
}

.enrichment-fields {
  background: var(--bg-surface);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-m);
  display: flex; flex-direction: column; gap: var(--layout-space-s);
}
.enrichment-fields__intro {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-medium);
}
.enrichment-fields__intro .material-icons {
  font-size: 18px;
  color: var(--status-ai-icon);
}
.enrichment-fields__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--layout-space-s);
}
.enrichment-fields__field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
}
.enrichment-fields__field--full { grid-column: 1 / -1; }
.enrichment-fields__field input {
  height: var(--layout-size-button-m);
  padding: 0 var(--layout-space-s);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-s);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
}
.enrichment-fields__field input:focus-visible {
  border-color: var(--action-primary-default);
  outline: none;
  box-shadow: 0 0 0 2px var(--status-success-surface);
}
.enrichment-fields__legal {
  margin: 0;
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
}

/* Signup inline errors */
.input-field__error {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--typography-font-size-xs);
  color: var(--feedback-error-text, var(--status-warning-text));
  margin-top: 2px;
}
.input-field[aria-invalid="true"],
.input-field:has(input[aria-invalid="true"]) {
  border-color: var(--feedback-error-text, var(--status-warning-text));
}

/* ═══════════════════════════════════════════════════════════════════════
   TBD placeholder styling
   ═══════════════════════════════════════════════════════════════════════ */
.tbd-tag {
  display: inline-flex; align-items: center;
  padding: 4px var(--layout-space-xs);
  background: var(--status-highlight-surface);
  border: var(--layout-border-default) solid var(--status-highlight-border);
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-xs);
  color: var(--status-highlight-text);
  font-weight: var(--typography-font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
  align-self: flex-start;
}
.success-main--tbd { gap: var(--layout-space-s); }
.match-card--tbd,
.match-card--returning { gap: var(--layout-space-m); }
.match-card__project--returning {
  display: flex; flex-direction: column; gap: var(--layout-space-xs);
}
.analyzing-card--error { gap: var(--layout-space-m); }
.analyzing-card__icon--warn {
  color: var(--status-warning-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   Demo menu radios + checkboxes
   ═══════════════════════════════════════════════════════════════════════ */
.demo-nav {
  width: 240px;
}
.demo-radio,
.demo-check {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  font-size: var(--typography-font-size-xs);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-weight: var(--typography-font-weight-medium);
  line-height: 1.3;
}
.demo-radio:hover,
.demo-check:hover { background: rgba(255,255,255,0.08); }
.demo-radio input[type="radio"],
.demo-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color .12s ease, background-color .12s ease;
}
.demo-radio input[type="radio"] { border-radius: 50%; }
.demo-check input[type="checkbox"] { border-radius: 3px; }
.demo-radio input[type="radio"]:checked,
.demo-check input[type="checkbox"]:checked {
  border-color: var(--color-primitives-green-300);
  background: var(--color-primitives-green-300);
}
.demo-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 4px; height: 4px;
  background: var(--bg-app-shell);
  border-radius: 50%;
}
.demo-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--bg-app-shell);
  border-bottom: 1.5px solid var(--bg-app-shell);
  transform: rotate(45deg);
}
.demo-radio span,
.demo-check span { flex: 1; min-width: 0; }
.demo-radio em,
.demo-check em {
  font-style: normal;
  color: rgba(255,255,255,0.5);
  font-weight: var(--typography-font-weight-regular);
}
.demo-nav__details {
  padding: var(--layout-space-xxs) var(--layout-space-xs);
  color: rgba(255,255,255,0.85);
  font-size: var(--typography-font-size-xs);
}
.demo-nav__details summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: var(--typography-font-weight-medium);
}
.demo-nav__details p,
.demo-nav__details ul {
  margin: 4px 0;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}
.demo-nav__details ul { padding-left: var(--layout-space-m); }
.demo-nav__details strong { color: var(--text-inverse); }

/* ═══════════════════════════════════════════════════════════════════════
   A11y mode overlay — exaggerated focus rings + landmark callouts.
   Triggered via <html class="a11y-mode">. Adds high-visibility outlines
   to anything keyboard-focusable, and labels semantic landmarks.
   ═══════════════════════════════════════════════════════════════════════ */
html.a11y-mode :focus-visible {
  outline: 4px solid #ff6b00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.25) !important;
}
html.a11y-mode [role="banner"],
html.a11y-mode [role="main"],
html.a11y-mode [role="complementary"],
html.a11y-mode main,
html.a11y-mode aside,
html.a11y-mode header.topbar {
  outline: 2px dashed #1f60ff;
  outline-offset: -2px;
  position: relative;
}
html.a11y-mode main::before,
html.a11y-mode aside::before,
html.a11y-mode header.topbar::before {
  position: absolute;
  top: 0; right: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #1f60ff;
  color: white;
  border-radius: 0 0 0 4px;
  z-index: 100;
  pointer-events: none;
}
html.a11y-mode header.topbar::before { content: 'BANNER'; }
html.a11y-mode main::before { content: 'MAIN'; }
html.a11y-mode aside::before { content: 'COMPLEMENTARY'; }
html.a11y-mode .signup-panel { outline: 2px solid #0aa; outline-offset: 4px; }
html.a11y-mode .signup-panel::after {
  content: 'CONVERSION REGION';
  position: absolute;
  bottom: -22px; left: 0;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  background: #0aa;
  color: white;
  letter-spacing: 1px;
}
html.a11y-mode .signup-panel { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   Simplified Project Finder (results screen + locked PDP)
   Ported from prototypes/SC/SC Project Finder/styles.css and adapted for
   the onboarding shell (global topbar, no app-sidebar). Stripped of
   the bid-board / email / scope-tab / saved-search rules.
   Rules are appended after the legacy results-screen styles so the new
   chrome wins on selectors that collide (.proj-card, .results-*).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Results shell ─────────────────────────────────────────────────── */
#screen-results.screen--results {
  padding: var(--layout-space-m) var(--layout-space-l);
  background: var(--bg-surface);
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#screen-results.screen--results.screen--active { display: flex; }
body:has(#screen-results.screen--active) { height: 100vh; overflow: hidden; }
.results-shell {
  display: flex; flex-direction: column;
  gap: var(--layout-space-s);
  flex: 1;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ── Search + chip row ─────────────────────────────────────────────── */
.results-controls {
  display: flex; align-items: center;
  gap: var(--layout-space-s);
  flex-wrap: wrap;
}
.ai-query {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: var(--layout-space-xs) var(--layout-space-s);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-full);
  box-shadow: var(--elevation-light-low);
}
.ai-query:focus-within {
  border-color: var(--focus-ring);
  box-shadow: var(--elevation-light-medium);
}
.ai-query--inline {
  flex: 1 1 360px;
  min-width: 240px;
  max-width: 480px;
}
.ai-query__icon {
  width: 20px; height: 20px;
  color: var(--icon-subtle);
  flex: 0 0 auto;
}
.ai-query__input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
}
.ai-query__input::placeholder {
  color: var(--text-tertiary);
  opacity: 0.7;
}
.ai-query__clear {
  border: 0; background: transparent;
  width: 28px; height: 28px;
  border-radius: var(--layout-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--icon-subtle);
  cursor: pointer;
}
.ai-query__clear:hover { background: var(--bg-surface); }

.controls__chips {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--layout-space-xxs);
  flex: 1 1 auto; min-width: 0;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: var(--layout-border-default) solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-secondary);
  border-radius: var(--layout-radius-full);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.icon-btn .material-icons { font-size: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  padding: 6px var(--layout-space-s);
  min-height: 38px;
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
}
.chip:hover { background: var(--bg-surface); }
.chip--active {
  background: var(--selection-surface);
  border-color: var(--selection-border);
  color: var(--selection-text);
}
.chip__value { color: var(--text-primary); }
.chip__caret { font-size: 18px; color: var(--icon-subtle); }
.chip__clear {
  border: 0; background: transparent; padding: 0;
  display: inline-flex; align-items: center; color: var(--icon-subtle);
  margin-left: 2px;
  cursor: pointer;
}
.chip__clear:hover { color: var(--text-primary); }

/* Chip popover (filter dropdown) — above Leaflet's panes */
.chip-popover {
  z-index: 1000;
  min-width: 220px;
  max-width: 320px;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-default);
  border-radius: var(--layout-radius-m);
  box-shadow: var(--elevation-light-high);
  padding: var(--layout-space-xxs);
  display: flex; flex-direction: column;
}
.chip-popover__opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-xs);
  border: 0; background: transparent;
  padding: 8px var(--layout-space-s);
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.chip-popover__opt:hover { background: var(--bg-surface-hover); }
.chip-popover__opt--selected {
  color: var(--action-primary-default);
  font-weight: var(--typography-font-weight-semi-bold);
}
.chip-popover__opt .material-icons { font-size: 18px; color: var(--action-primary-default); }
.chip-popover__opt--multi { gap: 0; }
.chip-popover__opt--multi .chip-popover__check {
  color: var(--icon-subtle);
  margin-right: var(--layout-space-xs);
}
.chip-popover__opt--multi.chip-popover__opt--selected .chip-popover__check {
  color: var(--action-primary-default);
}
.chip-popover__opt-label { flex: 1; text-align: left; }
.chip-popover__divider-label {
  padding: var(--layout-space-xxs) var(--layout-space-s);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
  color: var(--text-tertiary);
  font-weight: var(--typography-font-weight-semi-bold);
  margin-top: var(--layout-space-xxs);
  border-top: var(--layout-border-default) solid var(--border-subtle);
  padding-top: var(--layout-space-xs);
}

/* ── Results meta (count + signin prompt) ──────────────────────────── */
.results-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--layout-space-s);
  width: 100%;
  flex-wrap: wrap;
}
.results-meta__count {
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
}
.results-meta__count strong {
  color: var(--text-primary);
  font-size: var(--typography-font-size-m);
}
.results-meta__sort {
  display: inline-flex; align-items: center; gap: var(--layout-space-xs);
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
}
.results-meta__sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 10px;
  border: var(--layout-border-default) solid var(--border-subtle);
  background: var(--bg-canvas);
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
  cursor: pointer;
}
.results-meta__sort-btn:hover { background: var(--bg-surface-hover); }
.results-meta__sort-btn .material-icons { font-size: 18px; color: var(--icon-subtle); }

/* ── Map + cards split ─────────────────────────────────────────────── */
#screen-results .results-body {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--layout-space-s);
  margin: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
}
#screen-results .results-map {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  overflow: hidden;
  align-self: stretch;
  min-height: 0;
}
#screen-results .results-map__inner { width: 100%; height: 100%; }
#screen-results .results-list {
  display: flex; flex-direction: column;
  gap: var(--layout-space-s);
  min-height: 0;
  padding-right: var(--layout-space-xs);
  overflow-y: auto;
}
.results-empty {
  text-align: center;
  padding: var(--layout-space-xxl);
  color: var(--text-tertiary);
  background: var(--bg-canvas);
  border-radius: var(--layout-radius-m);
  border: var(--layout-border-default) dashed var(--border-subtle);
}
.results-empty .material-icons { font-size: 48px; margin-bottom: var(--layout-space-xs); }
.results-empty p { margin: 0; }

/* ── Project card (SC-style, overrides old simplified-flow rules) ──── */
#screen-results .proj-card {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  padding: var(--layout-space-s);
  display: flex; flex-direction: column;
  gap: var(--layout-space-xs);
  transition: box-shadow 150ms, border-color 150ms, transform 150ms;
  position: relative;
  cursor: pointer;
  text-align: left;
  /* reset the old "grid item" sizing from the legacy proj-grid */
  width: auto;
  min-width: 0;
  margin: 0;
}
#screen-results .proj-card:hover,
#screen-results .proj-card--hover {
  box-shadow: var(--elevation-light-medium);
  border-color: var(--border-default);
}
#screen-results .proj-card--selected {
  border-color: var(--selection-border);
  box-shadow: var(--elevation-light-medium);
}
#screen-results .proj-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--layout-space-s);
}
#screen-results .proj-card__title-block { min-width: 0; flex: 1; }
#screen-results .proj-card__type {
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--typography-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--typography-letter-spacing-wide);
}
#screen-results .proj-card__name {
  margin: 2px 0 0;
  font-size: var(--typography-font-size-l);
  line-height: var(--typography-line-height-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
#screen-results .proj-card__value-block {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
#screen-results .proj-card__value-row {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
}
#screen-results .proj-card__value {
  display: block;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
#screen-results .proj-card__due {
  display: block;
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
#screen-results .proj-card__due--urgent {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--status-warning-text);
  font-weight: var(--typography-font-weight-semi-bold);
}
#screen-results .proj-card__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--layout-space-xxs) var(--layout-space-xs);
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
#screen-results .proj-card__summary {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
/* Per-persona summary slot — Sub-angle copy lives here. Visually
   distinct from the generic aiSummary so subs read it as "this is for me". */
#screen-results .proj-card__persona {
  display: flex; gap: var(--layout-space-xxs);
  align-items: flex-start;
  padding: var(--layout-space-xs) var(--layout-space-s);
  background: var(--status-ai-surface);
  border: var(--layout-border-default) solid var(--status-ai-border);
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-s);
  color: var(--status-ai-text);
  line-height: var(--typography-line-height-m);
}
#screen-results .proj-card__persona .material-icons {
  font-size: 16px; color: var(--status-ai-icon); flex-shrink: 0;
  margin-top: 2px;
}
#screen-results .proj-card__gcs {
  display: flex; align-items: center; gap: var(--layout-space-xxs);
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
  line-height: var(--typography-line-height-m);
}
#screen-results .proj-card__gcs .material-icons {
  font-size: 16px; color: var(--icon-secondary); flex-shrink: 0;
}
#screen-results .proj-card__gcs strong {
  color: var(--text-primary);
  font-weight: var(--typography-font-weight-semi-bold);
}

/* Adaptive (low-density) panels — sit below the cards list, right column */
#screen-results .adaptive-panels {
  display: flex; flex-direction: column;
  gap: var(--layout-space-s);
  margin-top: var(--layout-space-l);
}

/* Alerts CTA — bottom of the cards column */
#screen-results .alerts-cta {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: var(--layout-space-s) var(--layout-space-m);
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  margin-top: var(--layout-space-m);
}

/* ── Map markers ───────────────────────────────────────────────────── */
.map-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  border-radius: var(--layout-radius-full);
  border: 2px solid var(--bg-canvas);
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-semi-bold);
  box-shadow: var(--elevation-light-medium);
  transition: transform 120ms;
}
.map-marker--active,
.map-marker--selected {
  transform: scale(1.25);
  z-index: 1000;
  box-shadow: 0 0 0 4px rgba(0, 120, 95, 0.25), var(--elevation-light-medium);
}
.leaflet-tooltip.map-tip {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  border: 0;
  padding: 4px 10px;
  border-radius: var(--layout-radius-s);
  font-size: var(--typography-font-size-xs);
  box-shadow: var(--elevation-dark-medium);
}
.leaflet-tooltip.map-tip::before { border-top-color: var(--bg-inverse) !important; }
.map-tip__title {
  font-weight: var(--typography-font-weight-bold);
  font-size: var(--typography-font-size-s);
  line-height: 1.2;
}
.map-tip__sub {
  margin-top: 2px;
  opacity: 0.8;
  font-size: var(--typography-font-size-xs);
}

/* ── PDP shell ─────────────────────────────────────────────────────── */
#screen-locked-pdp.screen--pdp,
#screen-pdp.screen--pdp {
  padding: 0;
  background: var(--bg-surface);
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#screen-locked-pdp.screen--pdp.screen--active,
#screen-pdp.screen--pdp.screen--active { display: flex; }
.pdp-shell {
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.pdp-localbar {
  display: flex; align-items: center; gap: var(--layout-space-m);
  padding: var(--layout-space-s) var(--layout-space-l);
  background: var(--bg-canvas);
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
}
.pdp-localbar__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-localbar__spacer { flex: 0 0 auto; }
.pdp-back {
  display: inline-flex; align-items: center; gap: var(--layout-space-xxs);
  border: 0; background: transparent;
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  padding: var(--layout-space-xxs) var(--layout-space-xs);
  border-radius: var(--layout-radius-s);
  cursor: pointer;
}
.pdp-back:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.pdp-back .material-icons { font-size: 20px; }

.pdp-tabs {
  display: flex; gap: var(--layout-space-l);
  padding: 0 var(--layout-space-l);
  background: var(--bg-canvas);
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
}
.pdp-tabs__btn {
  border: 0; background: transparent;
  padding: var(--layout-space-s) 0;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
}
.pdp-tabs__btn:hover { color: var(--text-secondary); }
.pdp-tabs__btn[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
.pdp-tabs__btn[aria-disabled="true"]:hover { color: var(--text-disabled); }
.pdp-tabs__btn--active { color: var(--text-primary); font-weight: var(--typography-font-weight-semi-bold); }
.pdp-tabs__btn--active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--action-primary-default);
  border-radius: 2px;
}

.pdp-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--layout-space-l);
  background: var(--bg-surface);
}

.pdp-card {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  margin-bottom: var(--layout-space-m);
  overflow: hidden;
}
.pdp-card__head {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: 14px 20px;
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}
.pdp-card__head--split { justify-content: space-between; }
.pdp-card__head-left { display: inline-flex; align-items: center; gap: var(--layout-space-xs); }
.pdp-card__head .material-icons { font-size: 20px; color: var(--icon-default); }
.pdp-card__head-link {
  color: var(--action-primary-default);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.pdp-card__head-link:hover { text-decoration: underline; }
.pdp-card__head-link .material-icons { font-size: 16px; color: var(--action-primary-default); }
.pdp-card__body { padding: 18px 20px; }

.pdp-prose { margin: 0; line-height: 1.55; color: var(--text-primary); font-size: var(--typography-font-size-s); }
.pdp-prose--addr { font-weight: var(--typography-font-weight-semi-bold); margin-bottom: 12px; }

.pdp-kv { display: flex; flex-direction: column; }
.pdp-kv__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
  font-size: var(--typography-font-size-s);
}
.pdp-kv__row:last-child { border-bottom: 0; }
.pdp-kv__key { color: var(--text-primary); font-weight: var(--typography-font-weight-medium); }
.pdp-kv__val { color: var(--text-secondary); text-align: right; }

.pdp-map {
  width: 100%; height: 280px;
  border-radius: var(--layout-radius-s);
  background: var(--bg-surface);
  overflow: hidden;
}

/* Market Intelligence */
.pdp-intel-controls { display: flex; gap: var(--layout-space-s); margin-bottom: 16px; }
.pdp-intel-select {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: space-between;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-s);
  padding: 8px 12px;
  font-size: var(--typography-font-size-s);
  color: var(--text-primary);
}
.pdp-intel-select .material-icons { font-size: 18px; color: var(--icon-subtle); }
.pdp-intel-stat { margin: 0 0 14px; font-size: var(--typography-font-size-s); color: var(--text-primary); }
.pdp-intel-stat strong { color: var(--text-primary); font-weight: var(--typography-font-weight-semi-bold); }
.pdp-intel-list {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-s);
  padding: 16px;
}
.pdp-intel-row__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--typography-font-size-s);
}
.pdp-intel-row__name,
.pdp-intel-row__count { color: var(--text-primary); font-weight: var(--typography-font-weight-semi-bold); }
.pdp-intel-row__bar {
  width: 100%; height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
}
.pdp-intel-row__bar-fill {
  height: 100%;
  background: var(--status-success-surface);
  border-radius: 4px;
}

/* PDP GCs (unlocked) */
.pdp-gc-list { display: flex; flex-direction: column; gap: var(--layout-space-s); }
.pdp-gc {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: 14px 16px;
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-s);
  background: var(--bg-canvas);
}
.pdp-gc__logo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface);
  color: var(--text-primary); font-weight: 700; font-size: 13px;
}
.pdp-gc__meta { flex: 1; min-width: 0; }
.pdp-gc__name {
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
  font-size: var(--typography-font-size-s);
}
.pdp-gc__known { color: var(--status-warning-text); margin-left: 4px; }
.pdp-gc__contact {
  display: flex; gap: var(--layout-space-s); margin-top: 4px;
  font-size: var(--typography-font-size-xs);
  color: var(--text-secondary);
}
.pdp-gc__contact a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--action-primary-default);
  text-decoration: none;
}
.pdp-gc__contact a:hover { text-decoration: underline; }
.pdp-gc__contact .material-icons { font-size: 14px; }
.pdp-gc__email {
  background: var(--action-primary-default); color: var(--action-on-action-primary);
  border: 0; border-radius: var(--layout-radius-full);
  padding: 8px 16px;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  cursor: pointer;
}
.pdp-gc__email:hover { background: var(--action-primary-hover); }

/* PDP locked GCs — placeholder rows with overlaid CTA text */
.pdp-locked-gc { position: relative; }
.pdp-locked-gc__rows {
  display: flex; flex-direction: column; gap: var(--layout-space-s);
}
.pdp-locked-gc__row {
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: 14px 16px;
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-s);
  background: var(--bg-canvas);
}
.pdp-locked-gc__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-surface);
}
.pdp-locked-gc__lines {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pdp-locked-gc__line {
  height: 10px; border-radius: 999px;
  background: var(--bg-surface);
}
.pdp-locked-gc__line--name    { width: 55%; }
.pdp-locked-gc__line--contact { width: 75%; height: 8px; }
.pdp-locked-gc__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  background: color-mix(in srgb, var(--bg-canvas) 50%, transparent);
  pointer-events: none;
}
.pdp-locked-gc__overlay-text {
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-primary);
}

/* PDP grid layout (used by both locked + unlocked) */
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--layout-space-m);
  margin-bottom: var(--layout-space-m);
  align-items: start;
}
.pdp-grid__col .pdp-card { margin-bottom: var(--layout-space-m); }
.pdp-grid__col .pdp-card:last-child { margin-bottom: 0; }

/* ── PDP dark topbar / tabs / actionbar (matches Anna's SC Project Finder) ── */
.screen--pdp .pdp-topbar {
  flex: 0 0 64px;
  display: flex; align-items: center; gap: var(--layout-space-s);
  padding: 0 var(--layout-space-l);
  background: #25313e;
  color: #fff;
}
.screen--pdp .pdp-topbar__title {
  margin: 0;
  font-size: var(--typography-font-size-l);
  font-weight: var(--typography-font-weight-semi-bold);
  color: #fff;
  letter-spacing: -0.2px;
  flex: 1;
  /* Generous line-height so descenders (g, p, y) clear the box bottom —
     `overflow: hidden` clips at the element's box edge, not at the font
     baseline, so a tight line-height crops descenders. */
  line-height: 1.5;
  white-space: nowrap; overflow-x: hidden; overflow-y: visible; text-overflow: ellipsis;
}
.screen--pdp .pdp-topbar__badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid rgba(108, 92, 231, 0.5);
  color: #c2b9f5;
  padding: 4px 10px;
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-semi-bold);
}
.screen--pdp .pdp-topbar__badge[hidden] { display: none; }
.screen--pdp .pdp-topbar__badge .material-icons { font-size: 14px; color: #c2b9f5; }
.screen--pdp .pdp-topbar__right { display: flex; align-items: center; gap: 4px; }
.screen--pdp .pdp-topbar__icon {
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.75);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.screen--pdp .pdp-topbar__icon:hover { background: rgba(255,255,255,0.08); color: #fff; }
.screen--pdp .pdp-topbar__icon .material-icons { font-size: 20px; }
.screen--pdp .pdp-back {
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  gap: 0;
}
.screen--pdp .pdp-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
.screen--pdp .pdp-back .material-icons { font-size: 22px; }

.screen--pdp .pdp-tabs {
  flex: 0 0 48px;
  display: flex; align-items: center;
  background: #25313e;
  padding: 0 var(--layout-space-l);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: var(--layout-space-m);
}
.screen--pdp .pdp-tabs__btn {
  border: 0; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.6);
  padding: 0 4px;
  height: 100%;
  display: inline-flex; align-items: center;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  position: relative;
}
.screen--pdp .pdp-tabs__btn:hover { color: rgba(255,255,255,0.85); }
.screen--pdp .pdp-tabs__btn[aria-disabled="true"] { color: rgba(255,255,255,0.3); cursor: default; }
.screen--pdp .pdp-tabs__btn[aria-disabled="true"]:hover { color: rgba(255,255,255,0.3); }
.screen--pdp .pdp-tabs__btn--active { color: #fff; }
.screen--pdp .pdp-tabs__btn--active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--action-primary-default);
  border-radius: 2px 2px 0 0;
}
.screen--pdp .pdp-tabs__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
  font-size: 10px;
  font-weight: var(--typography-font-weight-bold);
  padding: 0 5px;
  margin-left: 4px;
}

.screen--pdp .pdp-body { padding: var(--layout-space-l); }

.pdp-actionbar {
  position: sticky; bottom: 0;
  flex: 0 0 auto;
  display: flex; justify-content: flex-end; gap: var(--layout-space-s);
  padding: 14px var(--layout-space-l);
  background: var(--bg-canvas);
  border-top: var(--layout-border-default) solid var(--border-subtle);
}
.pdp-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--layout-radius-full);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  cursor: pointer;
  border: 1px solid;
  background: var(--bg-canvas);
}
.pdp-action .material-icons { font-size: 18px; }
.pdp-action--pass    { color: #c0392b; border-color: #e0a59b; }
.pdp-action--pass:hover { background: #fdf2f0; }
.pdp-action--intend  { color: var(--action-primary-default); border-color: #9ed4c4; }
.pdp-action--intend:hover { background: #f0faf6; }
.pdp-action--submit  { color: var(--action-on-action-primary); background: var(--action-primary-default); border-color: var(--action-primary-default); }
.pdp-action--submit:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.pdp-action[disabled],
.pdp-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--text-subtle);
  background: var(--bg-canvas);
  border-color: var(--border-subtle);
}
.pdp-action[disabled]:hover,
.pdp-action[aria-disabled="true"]:hover {
  background: var(--bg-canvas);
  border-color: var(--border-subtle);
}

/* Locked-PDP signup card — right-rail gate */
.pdp-signup-card {
  background: var(--bg-canvas);
  border: var(--layout-border-default) solid var(--border-subtle);
  border-radius: var(--layout-radius-m);
  margin-bottom: var(--layout-space-m);
  overflow: hidden;
}
.pdp-signup-card__head {
  display: flex; align-items: center; gap: var(--layout-space-xs);
  padding: 14px 20px;
  background: var(--action-primary-default);
  border-bottom: var(--layout-border-default) solid var(--action-primary-default);
}
.pdp-signup-card__head-icon {
  font-size: 20px;
  color: var(--action-on-action-primary);
}
.pdp-signup-card__title {
  margin: 0;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--action-on-action-primary);
}
.pdp-signup-card__sub {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: var(--text-secondary);
}
.pdp-signup-card__body {
  display: flex; flex-direction: column; gap: var(--layout-space-s);
  padding: 18px 20px;
}
.pdp-signup-card__email-toggle {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--action-primary-default);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  padding: var(--layout-space-xs) var(--layout-space-s);
  border-radius: var(--layout-radius-s);
}
.pdp-signup-card__email-toggle:hover { text-decoration: underline; }
.pdp-signup-card__email-toggle[hidden] { display: none; }
.pdp-signup-card__form { display: flex; flex-direction: column; gap: var(--layout-space-s); }
.pdp-signup-card__form[hidden] { display: none; }
.pdp-signup-card__email-cancel {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--typography-font-size-s);
  cursor: pointer;
  padding: var(--layout-space-xs) var(--layout-space-s);
}
.pdp-signup-card__email-cancel:hover { color: var(--text-primary); text-decoration: underline; }
.pdp-signup-card__legal {
  margin: 0;
  font-size: var(--typography-font-size-xs);
  color: var(--text-tertiary);
}
.pdp-signup-card__legal a { color: var(--action-primary-default); text-decoration: none; }
.pdp-signup-card__legal a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   LEFT RAIL — mounts only on PDP screens (locked + unlocked).
   Lifted verbatim from prototypes/SC/SC Project Finder/styles.css so the
   visual treatment matches Anna's signed-in shell exactly. Positioning is
   adapted: in the onboarding flow the rail is a fixed overlay (top:0 →
   bottom:0, left:0) and the topbar + PDP tile content shift right by its
   width when body.is-pdp.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --rail-w: 290px; }
/* Anna's .app-sidebar uses `flex: 0 0 232px` but renders ~290px in her
   prototype because flex items' default `min-width: auto` lets the
   sidebar's intrinsic content push the basis wider. We're using a
   fixed-position rail (no flex parent), so set the width explicitly to
   the value Anna's prototype actually renders. */

.app-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  background: #1f2933;
  color: rgba(255,255,255,0.85);
  flex-direction: column;
  padding: var(--layout-space-s) 0;
  z-index: 100;
  display: none;
}
body.is-pdp .app-sidebar { display: flex; }

.app-sidebar__head {
  display: flex; align-items: center; gap: 4px;
  padding: 4px var(--layout-space-s) var(--layout-space-s);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: var(--layout-space-s);
}
.app-sidebar__company {
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  color: #fff;
  padding: 6px 8px;
  border-radius: var(--layout-radius-s);
  cursor: pointer;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  letter-spacing: -0.1px;
  min-width: 0;
  font-family: inherit;
}
.app-sidebar__company:hover { background: rgba(255,255,255,0.06); }
.app-sidebar__company-mark {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--action-primary-default);
  color: #fff;
  border-radius: var(--layout-radius-s);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: var(--typography-font-weight-bold);
}
.app-sidebar__company-mark .material-icons {
  font-size: 20px;
  color: #fff;
}
.app-sidebar__company-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
.app-sidebar__company-caret { font-size: 18px; color: rgba(255,255,255,0.55); }
.app-sidebar__notif {
  position: relative;
  width: 32px; height: 32px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  flex-shrink: 0;
}
.app-sidebar__notif:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-sidebar__notif .material-icons { font-size: 20px; }
.app-sidebar__notif-dot {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-danger-border);
  border: 2px solid #1f2933;
}

.app-sidebar__nav, .app-sidebar__foot {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}
.app-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; }
.app-sidebar__foot {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--layout-space-s);
  margin-top: var(--layout-space-s);
}
.app-sidebar__nav-btn {
  display: inline-flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.78);
  border-radius: var(--layout-radius-m);
  cursor: pointer;
  text-align: left;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-medium);
  letter-spacing: -0.1px;
  font-family: inherit;
}
.app-sidebar__nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-sidebar__nav-btn--active {
  background: var(--action-primary-default);
  color: var(--action-on-action-primary);
}
.app-sidebar__nav-btn--active:hover {
  background: var(--action-primary-default);
}
.app-sidebar__nav-btn--active .material-icons { color: var(--action-on-action-primary); }
.app-sidebar__nav-btn .material-icons { font-size: 22px; flex-shrink: 0; }
.app-sidebar__nav-label { flex: 1; }

.app-sidebar__account {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: var(--layout-radius-s);
  cursor: pointer;
  text-align: left;
  margin-top: 4px;
  font-family: inherit;
}
.app-sidebar__account:hover { background: rgba(255,255,255,0.06); }
.app-sidebar__avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--status-ai-surface);
  color: var(--status-ai-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: var(--typography-font-weight-bold);
}
.app-sidebar__account-name {
  flex: 1;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-sidebar__account-caret { font-size: 18px; color: rgba(255,255,255,0.55); }

/* ── Signed-out variant: PlanHub wordmark + sign-up CTA flat on navy ── */
.app-sidebar__brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  color: #fff;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: -0.2px;
}
.app-sidebar__brand-mark {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--action-primary-default);
  border-radius: var(--layout-radius-s);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: var(--typography-font-weight-bold);
  color: #fff;
}
.app-sidebar__brand-img {
  display: block;
  height: 36px;
  width: auto;
}

.app-sidebar__signup {
  display: flex; flex-direction: column;
  gap: var(--layout-space-s);
  padding: var(--layout-space-s) var(--layout-space-s) 0;
}
.app-sidebar__signup-title {
  margin: 0;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: #fff;
  letter-spacing: -0.1px;
}
.app-sidebar__signup-sub {
  margin: 0;
  font-size: var(--typography-font-size-s);
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}
.app-sidebar__signup-props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--layout-space-xs);
}
.app-sidebar__signup-props li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--typography-font-size-s);
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
}
.app-sidebar__signup-props li .material-icons {
  font-size: 18px;
  color: var(--status-success-border);
  flex-shrink: 0;
}
.app-sidebar__signup .btn-social {
  width: 100%;
  justify-content: center;
}
.app-sidebar__signup-email-toggle {
  align-self: center;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-medium);
  cursor: pointer;
  padding: var(--layout-space-xs) var(--layout-space-s);
  border-radius: var(--layout-radius-s);
  text-decoration: underline;
}
.app-sidebar__signup-email-toggle:hover { color: rgba(255,255,255,0.85); }
.app-sidebar__signup-form { display: flex; flex-direction: column; gap: var(--layout-space-s); }
.app-sidebar__signup-form[hidden] { display: none; }
.app-sidebar__signup-form .input-field {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.app-sidebar__signup-form .input-field__input {
  color: #fff;
}
.app-sidebar__signup-form .input-field__input::placeholder {
  color: rgba(255,255,255,0.45);
}
.app-sidebar__signup-form .input-field__label {
  color: rgba(255,255,255,0.78);
}
.app-sidebar__signup-form .input-field__leadingIcon .material-icons {
  color: rgba(255,255,255,0.55);
}
.app-sidebar__signup-email-cancel {
  align-self: center;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: var(--typography-font-size-s);
  cursor: pointer;
  padding: var(--layout-space-xs) var(--layout-space-s);
}
.app-sidebar__signup-email-cancel:hover { color: #fff; }
.app-sidebar__signup-legal {
  margin: 0;
  font-size: var(--typography-font-size-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
.app-sidebar__signup-legal a { color: rgba(255,255,255,0.82); text-decoration: underline; }
.app-sidebar__signup-legal a:hover { color: #fff; }

/* ── Shift PDP tile content right of the rail when mounted ──
   (The global .topbar is hidden when body.is-pdp; each PDP screen owns
   its own internal topbar/tabs inside .pdp-shell.) */
body.is-pdp .screen--pdp .pdp-shell { padding-left: var(--rail-w); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #screen-results .results-body { grid-template-columns: 1fr; }
  #screen-results .results-map { position: relative; min-height: 320px; }
  #screen-results .results-map__inner { min-height: 320px; }
  .pdp-grid { grid-template-columns: 1fr; }
  #screen-results.screen--results { padding: var(--layout-space-m); }
}

/* Suppress legacy results-screen rules that were styled for the old
   single-grid layout. The legacy markup is gone; these rules would only
   reactivate if a deviation reintroduces those class names. */
#screen-results .proj-grid,
#screen-results .results-bar,
#screen-results .results-main,
#screen-results .results-split,
#screen-results .results-col,
#screen-results .signup-panel,
#screen-results .loc-banner,
#screen-results .map-band,
#screen-results .map-stats,
#screen-results .density-banner,
#screen-results .prefill-banner,
#screen-results .section-head { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CANVAS — bird's-eye view (Prezi-style parent transform)

   All tiles are sized to the viewport. The canvas plane lays them out in
   two swimlanes; one canvas transform handles BOTH directions — bird's-eye
   (fit-all scale) and zoomed-in (scale 1 translated so the active tile
   sits at viewport origin). Because the animation mechanism is identical
   in both directions, zoom-in and zoom-out mirror each other exactly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --topbar-h: 60px;        /* set precisely by JS once the topbar mounts */
  --tile-w: 100vw;
  --tile-h: calc(100vh - var(--topbar-h));
  --tile-gap-x: 100px;
  --tile-gap-y: 240px;
}

#canvas-viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg-canvas);
  min-height: 0;
}

#canvas {
  position: absolute;
  top: 0; left: 0;
  /* Top row: 3 tiles (Landing, Results, Project page) + 2 gaps.
     Bottom row: 1 tile (Inbound email) under Landing. */
  width:  calc(var(--tile-w) * 3 + var(--tile-gap-x) * 2);
  height: calc(var(--tile-h) * 2 + var(--tile-gap-y));
  transform-origin: top left;
  /* Disabled by default so the first paint does NOT animate. JS adds
     body.is-canvas-ready after the initial transform lands to enable it. */
  transition: none;
  will-change: transform;
}
body.is-canvas-ready #canvas {
  transition: transform 480ms cubic-bezier(.22,.61,.36,1);
}

/* Hide entire canvas region when a non-tile screen is overlaying. */
body.is-screen-mode #canvas-viewport { display: none; }

/* Tile screens — always rendered, absolutely positioned inside #canvas. */
.screen.is-tile {
  display: flex !important;
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  overflow: hidden;
  background: var(--bg-canvas);
  border-radius: var(--layout-radius-l);
  box-shadow: var(--elevation-light-medium);
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color 240ms ease, box-shadow 240ms ease, border-radius 240ms ease;
}
/* Border only in bird's-eye — in zoom-in the tile IS the app, no frame. */
body.is-canvas-out .screen.is-tile { border: 2px solid var(--border-strong); }

.tile--landing  { left: 0;                                              top: 0; }
.tile--results  { left: calc(1 * (var(--tile-w) + var(--tile-gap-x))); top: 0; }
.tile--pdp      { left: calc(2 * (var(--tile-w) + var(--tile-gap-x))); top: 0; }
.tile--gmail    {
  /* Stacked directly under the Landing tile. */
  left: 0;
  top:  calc(var(--tile-h) + var(--tile-gap-y));
}

/* Tile labels — chips that sit ABOVE each tile in bird's-eye view.
   They are siblings of the tiles inside #canvas (not children) so they
   render outside the tile's overflow-hidden box. Each modifier class
   anchors to the corresponding tile's top-left corner, then lifts itself
   by its own height + a small gap. */
.tile-label {
  position: absolute;
  display: inline-flex; align-items: center;
  padding: 16px 36px;
  border-radius: 999px;
  background: rgba(15, 29, 46, 0.92);
  color: #fff;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  /* Lift the chip above its tile-top anchor. translateY(-100%) keeps the
     chip's bottom flush with the tile's top; the extra margin-bottom adds
     breathing room. */
  transform: translateY(calc(-100% - 28px));
  transform-origin: bottom left;
}
.tile-label--landing { left: 0;                                              top: 0; }
.tile-label--results { left: calc(1 * (var(--tile-w) + var(--tile-gap-x))); top: 0; }
.tile-label--pdp     { left: calc(2 * (var(--tile-w) + var(--tile-gap-x))); top: 0; }
.tile-label--gmail   { left: 0;                                              top: calc(var(--tile-h) + var(--tile-gap-y)); }
body.is-canvas-out .tile-label { opacity: 1; }
body.is-canvas-in  .tile-label { display: none; }

/* Legacy in-tile chip — kept disabled in case any prototype consumer
   still toggles it. The new labels above own this responsibility. */
.screen.is-tile::before { content: none; display: none; }

/* Zoom-out mode: every tile is a single click target; inner UI is inert. */
body.is-canvas-out .screen.is-tile { cursor: zoom-in; }
body.is-canvas-out .screen.is-tile > * { pointer-events: none; }
body.is-canvas-out .screen.is-tile:hover { outline-color: var(--action-primary-default); }
body.is-canvas-out .screen.is-tile:focus-visible { outline-color: var(--action-primary-default); }

/* Zoom-in mode: only the active tile is visible. It's already viewport-sized
   via --tile-w/--tile-h, so the canvas just translates it to the origin. */
body.is-canvas-in .screen.is-tile { cursor: default; box-shadow: none; border-radius: 0; }
body.is-canvas-in #canvas .screen.is-tile:not([data-active]) { display: none !important; }
body.is-canvas-in .canvas-arrow { display: none; }
body.is-canvas-in #canvas .screen.is-tile[data-active]::before { display: none; }

/* Topbar is taken out of the flex flow with position: fixed so it doesn't
   reserve any layout space; in bird's-eye it's hidden entirely (no white
   strip at the top). In zoom-in it overlays the top 60px of the viewport.
   The canvas plane is shifted down by --topbar-h via JS in zoom-in mode
   so the active tile sits below the topbar. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
}
body.is-canvas-out .topbar,
body.is-bare-tile  .topbar { display: none; }

/* Bare-tile mode (e.g. Gmail): no PlanHub topbar overlays the tile, so the
   active tile expands to the full viewport height. */
body.is-bare-tile .screen.is-tile[data-active] { height: 100vh; }

/* Curved connector — two stacked SVGs so the arrowhead never gets warped
   by the curve container's non-uniform stretch. SVGs reference
   `currentColor` for stroke/fill so this single rule drives every arrow. */
.canvas-arrow {
  position: absolute;
  color: var(--border-strong);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  overflow: visible;
}
body.is-canvas-out .canvas-arrow { opacity: 1; }
/* Dashed curve box spans Gmail's right-edge midpoint → PDP's bottom center. */
.canvas-arrow__line {
  left:   var(--tile-w);
  top:    var(--tile-h);
  width:  calc(1.5 * var(--tile-w) + 2 * var(--tile-gap-x));
  height: calc(var(--tile-gap-y) + var(--tile-h) / 2);
}
/* Arrowhead: fixed-size triangle centered horizontally on PDP-bottom-center.
   Tip sits at PDP's bottom edge; base extends down into the dark canvas
   so the white fill is legible against the surrounding dark background. */
.canvas-arrow__head {
  width: 56px;
  height: 56px;
  left: calc(2.5 * var(--tile-w) + 2 * var(--tile-gap-x));
  top:  var(--tile-h);
  transform: translateX(-50%);
}

/* Top-row horizontal connectors (Landing → Results, Results → Project page).
   Each connector is a dashed line stretched across the inter-tile gap,
   vertically centered on the top-row tiles, with a fixed-size arrowhead
   whose tip touches the destination tile's left edge. */
.canvas-arrow__h-line {
  top: calc(var(--tile-h) / 2);
  height: 20px;
  width: var(--tile-gap-x);
  transform: translateY(-50%);
}
.canvas-arrow__h1-line { left: var(--tile-w); }
.canvas-arrow__h2-line { left: calc(2 * var(--tile-w) + var(--tile-gap-x)); }

.canvas-arrow__h-head {
  width: 40px;
  height: 40px;
  top: calc(var(--tile-h) / 2);
  transform: translateY(-50%);
}
/* Tip sits at the destination tile's left edge; the 40px-wide SVG extends
   leftward into the gap, so `left` = destination_left − arrow_width. */
.canvas-arrow__h1-head { left: calc(var(--tile-w) + var(--tile-gap-x) - 40px); }
.canvas-arrow__h2-head { left: calc(2 * var(--tile-w) + 2 * var(--tile-gap-x) - 40px); }

/* In screen-mode (non-tile overlay), the non-tile screen takes the area
   below the topbar. The topbar is position:fixed so it doesn't reserve
   space in the flex flow — we pad the body to compensate. */
body:not(.is-screen-mode) .screen:not(.is-tile) { display: none !important; }
body.is-screen-mode .screen:not(.is-tile).screen--active { display: flex; }
body.is-screen-mode { padding-top: var(--topbar-h); }

/* The leaflet map containers need explicit size to render correctly even
   when the canvas wrapper is transformed. The existing rules already set
   sizes; nothing to override here. */

/* ── Demo: "Bird's-eye view" button accent ───────────────────────────── */
.demo-nav__btn--canvas {
  background: var(--action-primary-default) !important;
  color: var(--text-inverse) !important;
  border-color: var(--action-primary-default) !important;
}
.demo-nav__btn--canvas:hover {
  background: var(--action-primary-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GMAIL MOCK (adapted from prototypes/SC/SC Project Finder/styles.css)
   Scoped under #screen-gmail so it doesn't leak into the rest of the app.
   ═══════════════════════════════════════════════════════════════════════ */
#screen-gmail {
  background: #f6f8fc;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  color: #202124;
  flex-direction: column;
}
#screen-gmail .gmail__topbar {
  height: 64px; flex: 0 0 64px;
  background: #f6f8fc;
  display: flex; align-items: center;
  padding: 0 16px; gap: 8px;
}
#screen-gmail .gmail__topbar-left {
  display: flex; align-items: center; gap: 4px;
  width: 240px; flex-shrink: 0;
}
#screen-gmail .gmail__ham,
#screen-gmail .gmail__topbar-icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5f6368;
}
#screen-gmail .gmail__ham .material-icons,
#screen-gmail .gmail__topbar-icon .material-icons { font-size: 22px; }
#screen-gmail .gmail__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; color: #5f6368; font-weight: 400; padding-left: 4px;
}
#screen-gmail .gmail__logo-mark { width: 36px; height: 27px; }
#screen-gmail .gmail__wordmark { font-size: 22px; color: #5f6368; letter-spacing: -0.5px; }
#screen-gmail .gmail__searchbar {
  flex: 1; max-width: 720px; height: 48px;
  background: #eaf1fb; border-radius: 24px;
  display: flex; align-items: center; padding: 0 4px 0 8px; gap: 4px;
  color: #5f6368;
}
#screen-gmail .gmail__search-input {
  flex: 1; font-size: 16px; color: #5f6368; padding: 0 8px;
}
#screen-gmail .gmail__topbar-right {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; padding-left: 8px;
}
#screen-gmail .gmail__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1a73e8; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-left: 4px;
}
#screen-gmail .gmail__body { flex: 1; display: flex; overflow: hidden; }
#screen-gmail .gmail__nav { width: 256px; flex-shrink: 0; padding: 8px 0; overflow-y: auto; }
#screen-gmail .gmail__compose {
  margin: 0 16px 16px;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px 0 16px;
  border-radius: 16px;
  background: #c2e7ff; color: #001d35;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08);
}
#screen-gmail .gmail__compose .material-icons { font-size: 20px; color: #001d35; }
#screen-gmail .gmail__nav-list { list-style: none; padding: 0; margin: 0 0 8px; }
#screen-gmail .gmail__nav-item {
  width: calc(100% - 16px);
  margin-right: 16px;
  display: inline-flex; align-items: center; gap: 16px;
  height: 32px; padding: 0 12px 0 24px;
  border-radius: 0 16px 16px 0;
  font-size: 14px; color: #202124; text-align: left;
}
#screen-gmail .gmail__nav-item--active { background: #d3e3fd; font-weight: 700; color: #001d35; }
#screen-gmail .gmail__nav-item .material-icons { font-size: 20px; color: #444746; }
#screen-gmail .gmail__nav-item--active .material-icons { color: #001d35; }
#screen-gmail .gmail__nav-label { flex: 1; }
#screen-gmail .gmail__nav-count { font-size: 12px; color: #444746; font-weight: 700; }
#screen-gmail .gmail__nav-section {
  display: block; padding: 16px 24px 8px;
  font-size: 14px; color: #444746;
}
#screen-gmail .gmail__nav-dot--green  { color: #137333 !important; }
#screen-gmail .gmail__nav-dot--blue   { color: #1a73e8 !important; }
#screen-gmail .gmail__nav-dot--orange { color: #d56e0c !important; }
#screen-gmail .gmail__main {
  flex: 1; background: #fff;
  border-top-left-radius: 16px;
  margin: 0 16px 8px 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e7eb;
}
#screen-gmail .gmail__list { flex: 1; overflow-y: auto; }
#screen-gmail .gmail__row {
  display: grid;
  grid-template-columns: 28px 28px 28px 240px 1fr 92px;
  align-items: center;
  height: 40px; padding: 0 16px;
  border-bottom: 1px solid #f1f3f4;
  background: #f6f8fc;
  cursor: pointer;
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  font-size: 14px; color: #202124;
  text-align: left;
  font-family: inherit;
}
#screen-gmail .gmail__row--unread { background: #fff; font-weight: 700; }
#screen-gmail .gmail__row--unread .gmail__row-snippet { color: #202124; }
#screen-gmail .gmail__row--bid:hover {
  background: #fff;
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px rgba(60,64,67,.15);
  z-index: 1; position: relative;
}
#screen-gmail .gmail__row-check,
#screen-gmail .gmail__row-star,
#screen-gmail .gmail__row-imp {
  display: inline-flex; align-items: center; justify-content: center;
  color: #5f6368;
}
#screen-gmail .gmail__row-check .material-icons,
#screen-gmail .gmail__row-star .material-icons,
#screen-gmail .gmail__row-imp .material-icons { font-size: 18px; }
#screen-gmail .gmail__row-from {
  font-weight: inherit; padding-right: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-gmail .gmail__row-subject {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screen-gmail .gmail__row-snippet { color: #5f6368; font-weight: inherit; padding-left: 8px; }
#screen-gmail .gmail__row-when {
  text-align: right; font-size: 12px; color: #5f6368; font-weight: inherit;
}
#screen-gmail .gmail__row--unread .gmail__row-when { color: #202124; }
#screen-gmail .gmail__row-chip {
  display: inline-block; padding: 2px 6px;
  font-size: 11px; font-weight: 700;
  border-radius: 4px; margin-right: 6px;
  background: #d3e3fd; color: #001d35;
  vertical-align: 1px;
}
#screen-gmail .gmail__row-chip--planhub { background: #d6f0e3; color: #00533c; }

/* ═══════════════════════════════════════════════════════════════════════
   UITB DIGEST EMAIL — opens inside .gmail__main when the PlanHub digest
   row is clicked. Inbox list hides while .is-email-open is set.
   ═══════════════════════════════════════════════════════════════════════ */
#screen-gmail .gmail__main.is-email-open .gmail__list { display: none; }
#screen-gmail .uitb-view {
  flex: 1; overflow-y: auto;
  background: #f6f8fc;
}
#screen-gmail .uitb-actionbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
#screen-gmail .uitb-actionbar__back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 50%;
  cursor: pointer; color: #5f6368;
}
#screen-gmail .uitb-actionbar__back:hover { background: #f1f3f4; }
#screen-gmail .uitb-actionbar__back .material-icons { font-size: 20px; }
#screen-gmail .uitb-actionbar__icons {
  display: inline-flex; gap: 4px; color: #5f6368; padding-right: 8px;
}
#screen-gmail .uitb-actionbar__icons .material-icons { font-size: 18px; opacity: .7; }

#screen-gmail .uitb-email {
  max-width: 760px;
  margin: 16px auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--elevation-light-low);
  border: 1px solid #e5e7eb;
}
#screen-gmail .uitb-email__header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f1f3f4;
}
#screen-gmail .uitb-email__subject {
  font-size: 20px; font-weight: 400;
  color: #202124; margin-bottom: 12px;
}
#screen-gmail .uitb-email__from {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
#screen-gmail .uitb-email__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #00785f; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
#screen-gmail .uitb-email__sender-name { color: #202124; }
#screen-gmail .uitb-email__sender-email { color: #5f6368; font-weight: 400; }
#screen-gmail .uitb-email__to { color: #5f6368; font-size: 12px; margin-top: 2px; }
#screen-gmail .uitb-email__time { color: #5f6368; font-size: 12px; }

/* Dark PlanHub banner at top of the email body */
#screen-gmail .uitb-banner {
  background: #354052;
  padding: 22px 20px;
  display: flex; align-items: center; justify-content: center;
}
#screen-gmail .uitb-banner__img {
  display: block;
  height: 42px;
  width: auto;
}

/* Contextual-PDP email body */
#screen-gmail .uitb-body--ctx {
  padding: 28px 32px 36px;
  background: #fff;
  color: var(--text-primary);
}

#screen-gmail .uitb-ctx__intro { margin-bottom: 22px; }
#screen-gmail .uitb-ctx__greet,
#screen-gmail .uitb-ctx__lede {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--text-primary);
}
#screen-gmail .uitb-ctx__lede:last-child { margin-bottom: 0; }
#screen-gmail .uitb-ctx__divider {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 22px;
}
#screen-gmail .uitb-ctx__restricted {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--text-secondary);
}
#screen-gmail .uitb-ctx__badge {
  color: #e3a73d;
  font-size: 22px !important;
  flex-shrink: 0;
}
#screen-gmail .uitb-ctx__badge--inline {
  font-size: 18px !important;
  vertical-align: -3px;
  margin-right: 2px;
}
#screen-gmail .uitb-ctx__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 12px;
  letter-spacing: -.4px;
  line-height: 1.2;
  text-transform: capitalize;
}
#screen-gmail .uitb-ctx__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
#screen-gmail .uitb-ctx__meta-icon {
  color: var(--text-tertiary);
  font-size: 18px !important;
}
#screen-gmail .uitb-ctx__projcard {
  cursor: default;
  margin-bottom: 4px;
}
#screen-gmail .uitb-ctx__projcard:hover {
  box-shadow: var(--elevation-light-low);
}
#screen-gmail .uitb-ctx__cta-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 4px;
}
#screen-gmail .uitb-ctx__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--action-primary-default);
  color: #fff;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: var(--layout-radius-full);
  cursor: pointer;
}
#screen-gmail .uitb-ctx__cta:hover { background: var(--action-primary-hover); }
#screen-gmail .uitb-ctx__cta-icon { font-size: 18px !important; }
#screen-gmail .uitb-ctx__limited {
  margin: 0 0 6px;
  font-size: 15px;
  text-align: center;
  color: var(--text-secondary);
}
#screen-gmail .uitb-ctx__upgrade {
  margin: 0 0 28px;
  font-size: 15px;
  text-align: center;
  color: var(--text-secondary);
}
#screen-gmail .uitb-ctx__upgrade .uitb-ctx__badge {
  display: inline-block;
  vertical-align: -5px;
  margin-right: 4px;
}
#screen-gmail .uitb-ctx__upgrade-link {
  color: var(--action-primary-default);
  font-weight: 700;
  text-decoration: underline;
}

#screen-gmail .uitb-ctx__card {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 18px;
  overflow: hidden;
}
#screen-gmail .uitb-ctx__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
#screen-gmail .uitb-ctx__card-icon {
  color: var(--text-secondary);
  font-size: 22px !important;
}
#screen-gmail .uitb-ctx__card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
#screen-gmail .uitb-ctx__card-body { padding: 16px 18px; }
#screen-gmail .uitb-ctx__card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
#screen-gmail .uitb-ctx__details {
  margin: 0;
  padding: 4px 18px 12px;
}
#screen-gmail .uitb-ctx__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
#screen-gmail .uitb-ctx__detail-row:last-child { border-bottom: none; }
#screen-gmail .uitb-ctx__detail-row dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
#screen-gmail .uitb-ctx__detail-row dd {
  margin: 0;
  font-size: 15px;
  color: var(--text-secondary);
  text-align: right;
}

/* Legal footer (mint) — used for the contextual-PDP layout */
#screen-gmail .uitb-footer {
  background: #e6f8f4;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}
#screen-gmail .uitb-footer--ctx {
  text-align: left;
  padding: 22px 32px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
}
#screen-gmail .uitb-footer--ctx .uitb-footer__line { margin: 0 0 8px; }
#screen-gmail .uitb-footer--ctx .uitb-footer__links { margin: 12px 0 0; }
#screen-gmail .uitb-footer__line { margin: 0 0 6px; }
#screen-gmail .uitb-footer__links { margin: 8px 0 6px; }
#screen-gmail .uitb-footer--ctx a {
  color: var(--text-primary);
  text-decoration: underline;
}
#screen-gmail .uitb-signup { margin: 0 0 12px; }
#screen-gmail .uitb-signup__copy {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}
#screen-gmail .uitb-signup__link {
  color: var(--text-primary);
  text-decoration: underline;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   POST-SIGNUP MORPH — rail welcome state, research card, reveal sweep,
   confetti, toast. Triggered by app.js runPostSignupMorph().
   ═══════════════════════════════════════════════════════════════════════ */

/* Show the rail whenever it is mounted (in addition to the existing
   is-pdp rule) so the results screen can host it during the signed-out /
   signup phase. */
body.has-rail .app-sidebar { display: flex; }

/* Drop the global top nav on results when the rail is mounted — the rail
   carries the signup CTA and the brand, so the top bar is redundant. This
   mirrors the existing `body.is-pdp .topbar { display: none; }` rule. */
body.has-rail .topbar { display: none; }

/* ── Tile-local rail copies ────────────────────────────────────────────
   Visible only in bird's-eye view (body.is-canvas-out) so the Results and
   locked-PDP tile previews read as real app screens with their nav rail.
   The global #appSidebar continues to handle zoomed-in / screen-mode; the
   tile copies are independent DOM nodes inside each tile, kept in sync by
   syncTileRails() in app.js. Repositioned from fixed (viewport) to
   absolute (tile-relative). Tiles are position:absolute already, so they
   establish a containing block. */
.app-sidebar--tile {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 4; /* above tile content but below the tile-label chip (z:9) */
}
/* Bird's-eye only — tile rails compete on specificity with
   `body.has-rail .app-sidebar` and `body.is-pdp .app-sidebar`, so gate
   them with selectors that match the same 0,2,0 specificity but appear
   later in the cascade. */
body.is-canvas-out .app-sidebar--tile { display: flex; }
body:not(.is-canvas-out) .app-sidebar--tile { display: none; }
/* The base .app-sidebar > * { pointer-events: none } from is-canvas-out
   is already applied via .screen.is-tile > * — that's fine. The rail is
   purely visual in bird's-eye anyway. */

/* Make tile content sit to the right of the embedded rail in bird's-eye.
   In zoomed-in mode the global rail handles this via has-rail (below). */
body.is-canvas-out #screen-results.screen--results .results-shell {
  padding-left: calc(var(--rail-w) + var(--layout-space-m));
}
body.is-canvas-out #screen-locked-pdp .pdp-shell {
  padding-left: var(--rail-w);
}

/* Scope tabs (All Projects / My Projects). Hidden until the user signs up,
   then slide down from the top. */
#scopeBar {
  display: none;
  align-items: center; justify-content: space-between;
  width: 100%;
  padding-bottom: var(--layout-space-s);
  border-bottom: var(--layout-border-default) solid var(--border-subtle);
  margin-bottom: var(--layout-space-s);
  flex-shrink: 0;
}
#scopeBar .scope-tabs { display: inline-flex; gap: var(--layout-space-s); }
#scopeBar .scope-tabs__btn {
  border: 0; background: transparent;
  padding: 8px 4px;
  font-size: var(--typography-font-size-m);
  font-weight: var(--typography-font-weight-semi-bold);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
}
#scopeBar .scope-tabs__btn:hover { color: var(--text-primary); }
#scopeBar .scope-tabs__btn--active {
  color: var(--action-primary-default);
  border-bottom-color: var(--action-primary-default);
}
body.is-signed-up #scopeBar {
  display: flex;
  animation: scopeBarSlideDown 460ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes scopeBarSlideDown {
  0%   { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-signed-up #scopeBar { animation-duration: 0ms; }
}

/* Shift the results-screen content to make room for the rail when mounted.
   The rail is position:fixed so it doesn't consume space on its own. */
body.has-rail #screen-results.screen--results {
  padding-left: calc(var(--rail-w) + var(--layout-space-m));
}

/* When the rail is mid-morph, the welcome card sits in the rail center.
   It collapses downward toward the rail bottom (where the research card
   lives in the signed-in state). */
.rail-welcome {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--layout-space-l);
  opacity: 0;
  animation: railWelcomeIn 360ms 280ms cubic-bezier(.22,.61,.36,1) forwards;
  transform-origin: center bottom;
}
.rail-welcome__inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--layout-space-s);
}
.rail-welcome__mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0066ff, #2db66d);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 102, 255, 0.35);
}
.rail-welcome__mark .material-icons { font-size: 30px; }
.rail-welcome__title {
  color: #fff;
  font-size: 18px;
  font-weight: var(--typography-font-weight-bold);
  margin: 0;
  letter-spacing: -0.2px;
}
.rail-welcome__sub {
  color: rgba(255,255,255,0.7);
  font-size: var(--typography-font-size-s);
  margin: 0;
}
@keyframes railWelcomeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Collapse phase: welcome shrinks toward bottom of rail and fades. */
.app-sidebar.rail--collapsing .rail-welcome {
  animation: railWelcomeCollapse 700ms cubic-bezier(.55,.05,.65,.2) forwards;
}
@keyframes railWelcomeCollapse {
  0%   { opacity: 1; transform: translateY(0)    scale(1); }
  60%  { opacity: 0.7; transform: translateY(35vh) scale(0.45); }
  100% { opacity: 0;   transform: translateY(45vh) scale(0.2); }
}

/* Post-morph rail: nav items + research card fade in. */
.app-sidebar.rail--post-morph .app-sidebar__head,
.app-sidebar.rail--post-morph .app-sidebar__nav,
.app-sidebar.rail--post-morph .app-sidebar__foot,
.app-sidebar.rail--post-morph .rail-research {
  animation: railNavFadeIn 420ms cubic-bezier(.22,.61,.36,1) both;
}
.app-sidebar.rail--post-morph .app-sidebar__head { animation-delay: 0ms; }
.app-sidebar.rail--post-morph .app-sidebar__nav  { animation-delay: 80ms; }
.app-sidebar.rail--post-morph .app-sidebar__foot { animation-delay: 220ms; }
.app-sidebar.rail--post-morph .rail-research    { animation-delay: 320ms; }
@keyframes railNavFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Locked rail: when the signup form fades on submit. */
.app-sidebar__signup.signup--fading {
  animation: signupFadeOut 280ms ease-out forwards;
  pointer-events: none;
}
@keyframes signupFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Research card (rail bottom) ───────────────────────────────────── */
.rail-research {
  margin: var(--layout-space-s) 8px 0;
  border-radius: var(--layout-radius-m);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 12px;
  font-family: inherit;
  transition: opacity 200ms ease;
}
.rail-research[hidden] { display: none; }
.rail-research--swapping { opacity: 0; }
.rail-research__ticker {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 36px;
}
.rail-research__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #23c25e;
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 0 0 rgba(35, 194, 94, 0.6);
  animation: researchPulse 1.6s ease-out infinite;
}
@keyframes researchPulse {
  0%   { box-shadow: 0 0 0 0   rgba(35, 194, 94, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(35, 194, 94, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(35, 194, 94, 0);  }
}
.rail-research__body {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
  gap: 2px;
}
.rail-research__title {
  color: #fff;
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  letter-spacing: -0.1px;
  white-space: normal;
  line-height: 1.25;
}
.rail-research__sub {
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1.3;
  transition: opacity 180ms ease;
}
.rail-research__sub .material-icons { font-size: 14px; }

.rail-research__btn {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  background: transparent; border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
}
.rail-research__btn:hover .rail-research__title { color: #cfe3ff; }
.rail-research__btn:focus-visible {
  outline: 2px solid var(--action-on-action-primary);
  outline-offset: 3px;
  border-radius: 8px;
}
.rail-research__icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.rail-research__icon--ok { color: #4cd97b; font-size: 22px; }
.rail-research__icon--muted { color: rgba(255,255,255,0.55); font-size: 22px; }
.rail-research__new {
  position: absolute;
  top: -8px; right: -4px;
  background: #ff5c5c;
  color: #fff;
  font-size: 9px;
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #1f2933;
}

/* ── Main-area reveal sweep ──────────────────────────────────────────── */
/* When the morph reaches reveal time, the unlock container gets is-unlocking
   and each child with [data-unlock-order] animates in with a stagger. */
/* Pre-unlock state hides the swapped-in PDP cards during the welcome morph,
   so they don't flash-visible before the unlockReveal animation snaps them to opacity 0. */
.pdp-body.is-pre-unlock .pdp-card { opacity: 0; }
.pdp-body.is-unlocking .pdp-card,
.results-list.is-unlocking article.proj-card {
  animation: unlockReveal 700ms cubic-bezier(.22,.61,.36,1) both;
}
.pdp-body.is-unlocking .pdp-card[data-unlock-order="0"],
.results-list.is-unlocking article.proj-card[data-unlock-order="0"] { animation-delay: 0ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="1"],
.results-list.is-unlocking article.proj-card[data-unlock-order="1"] { animation-delay: 120ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="2"],
.results-list.is-unlocking article.proj-card[data-unlock-order="2"] { animation-delay: 240ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="3"],
.results-list.is-unlocking article.proj-card[data-unlock-order="3"] { animation-delay: 360ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="4"],
.results-list.is-unlocking article.proj-card[data-unlock-order="4"] { animation-delay: 480ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="5"],
.results-list.is-unlocking article.proj-card[data-unlock-order="5"] { animation-delay: 600ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="6"],
.results-list.is-unlocking article.proj-card[data-unlock-order="6"] { animation-delay: 720ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="7"],
.results-list.is-unlocking article.proj-card[data-unlock-order="7"] { animation-delay: 840ms; }
.pdp-body.is-unlocking .pdp-card[data-unlock-order="8"],
.results-list.is-unlocking article.proj-card[data-unlock-order="8"] { animation-delay: 960ms; }
@keyframes unlockReveal {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  40%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* ── Confetti ──────────────────────────────────────────────────────── */
.confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1500;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 9px; height: 14px;
  opacity: 0;
  transform: translate(-50%, -50%);
  /* Parent timing = ease-out for the burst (0%→40%); per-keyframe override on 40% switches to ease-in for gravity (40%→100%). */
  animation: confettiBurst var(--cd, 2000ms) var(--cdelay, 0ms) cubic-bezier(.2,.7,.4,1) forwards;
}
.confetti-piece--circle {
  width: 9px; height: 9px;
  border-radius: 50%;
}
@keyframes confettiBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
  10%  { opacity: 1; }
  40%  {
    opacity: 1;
    transform: translate(calc(-50% + var(--cxm)), calc(-50% + var(--cym))) rotate(calc(var(--cr) * 0.4deg));
    animation-timing-function: cubic-bezier(.55,0,.85,.5);
  }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) rotate(calc(var(--cr) * 1deg)); }
}

/* ── Post-signup placeholder toast ─────────────────────────────────── */
.post-signup-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #1f2933;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--layout-radius-full);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-size: var(--typography-font-size-s);
  font-weight: var(--typography-font-weight-semi-bold);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity 220ms ease, transform 220ms ease;
}
.post-signup-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rail-welcome,
  .app-sidebar.rail--collapsing .rail-welcome,
  .app-sidebar.rail--post-morph .app-sidebar__head,
  .app-sidebar.rail--post-morph .app-sidebar__nav,
  .app-sidebar.rail--post-morph .app-sidebar__foot,
  .app-sidebar.rail--post-morph .rail-research,
  .pdp-body.is-unlocking .pdp-card,
  .results-list.is-unlocking article.proj-card {
    animation-duration: 0ms;
    animation-delay: 0ms;
  }
  .confetti-layer { display: none; }
  @keyframes unlockReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Results screen + rail layout: when the rail is mounted, the results
   shell still owns its own max-width centering; we just shift the inner
   content right by the rail width.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.has-rail #screen-results.screen--results {
    padding-left: var(--layout-space-m);
  }
  body.has-rail #appSidebar { /* keep visible — UX choice for prototype */ }
}