/* Colors and type come from the design handoff (mobile/src/theme/tokens.ts).
   Dark mode is its own set of steps, not an inversion: it follows the device
   until the visitor picks one with the moon/sun button. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --sunk: oklch(0.975 0.003 80);
  --surface-2: var(--sunk);
  --ink: oklch(0.19 0.005 60);
  --ink2: oklch(0.36 0.005 60);
  --secondary: var(--ink2);
  --muted: oklch(0.5 0.005 60);
  --faint: var(--muted);
  --line: oklch(0.19 0.005 60 / 0.1);
  --line2: oklch(0.19 0.005 60 / 0.06);
  --hairline: var(--line);
  --divider: var(--line2);
  --chip: var(--sunk);
  --chip-hover: oklch(0.95 0.004 80);
  --acc-l: 0.57;
  --acc-h: 265;
  --tint-a: 0.08;
  --accent: oklch(var(--acc-l) 0.15 var(--acc-h));
  --accent-hover: oklch(calc(var(--acc-l) - 0.06) 0.15 var(--acc-h));
  --tint: oklch(var(--acc-l) 0.15 var(--acc-h) / var(--tint-a));
  --accent-tint: var(--tint);
  --on-tint: oklch(0.45 0.13 var(--acc-h));
  --on-accent: #ffffff;
  --pos: oklch(0.52 0.11 150);
  --neg: oklch(0.55 0.14 28);
  --red: var(--neg);
  --green: var(--pos);
  --amber: oklch(0.6 0.12 75);
  --error-surface: oklch(0.55 0.14 28 / 0.09);
  --error-ink: oklch(0.42 0.12 28);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-float: 0 6px 20px -10px rgb(0 0 0 / 0.18);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.18);
  --scrim: rgb(0 0 0 / 0.35);
  --appbar: var(--bg);
  --skeleton: linear-gradient(90deg, var(--sunk) 0%, var(--bg) 50%, var(--sunk) 100%);

  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--ui);
  --radius: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Motion curves: strong ease-out for things arriving, ease-in-out for things moving on screen, the iOS sheet curve for drawers. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: oklch(0.15 0.008 50);
    --surface: oklch(0.175 0.009 50);
    --sunk: oklch(0.2 0.01 50);
    --ink: oklch(0.95 0.003 80);
    --ink2: oklch(0.8 0.003 80);
    --muted: oklch(0.66 0.003 80);
    --line: oklch(1 0 0 / 0.09);
    --line2: oklch(0.95 0.003 80 / 0.07);
    --chip-hover: oklch(0.24 0.004 60);
    --acc-l: 0.7;
    --tint-a: 0.14;
    --on-tint: oklch(0.8 0.1 var(--acc-h));
    --on-accent: oklch(0.16 0.01 60);
    --pos: oklch(0.74 0.11 150);
    --neg: oklch(0.72 0.12 28);
    --amber: oklch(0.78 0.11 75);
    --error-surface: oklch(0.72 0.12 28 / 0.14);
    --error-ink: oklch(0.85 0.07 28);
    --shadow-float: 0 6px 20px -10px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.6);
    --scrim: rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: oklch(0.15 0.008 50);
  --surface: oklch(0.175 0.009 50);
  --sunk: oklch(0.2 0.01 50);
  --ink: oklch(0.95 0.003 80);
  --ink2: oklch(0.8 0.003 80);
  --muted: oklch(0.66 0.003 80);
  --line: oklch(1 0 0 / 0.09);
  --line2: oklch(0.95 0.003 80 / 0.07);
  --chip-hover: oklch(0.24 0.004 60);
  --acc-l: 0.7;
  --tint-a: 0.14;
  --on-tint: oklch(0.8 0.1 var(--acc-h));
  --on-accent: oklch(0.16 0.01 60);
  --pos: oklch(0.74 0.11 150);
  --neg: oklch(0.72 0.12 28);
  --amber: oklch(0.78 0.11 75);
  --error-surface: oklch(0.72 0.12 28 / 0.14);
  --error-ink: oklch(0.85 0.07 28);
  --shadow-float: 0 6px 20px -10px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.6);
  --scrim: rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.sheet-open {
  overflow: hidden;
}

a {
  color: var(--accent);
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
}

/* ---------------------------------------------------------------------------
   App bar and masthead.
   --------------------------------------------------------------------------- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--appbar);
  border-bottom: 1px solid var(--divider);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 16px;
}

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

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 600;
  font-size: 16px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 9px;
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--secondary);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s var(--ease);
}

.icon-button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--chip);
}

.icon-button:active:not(:disabled) {
  transform: scale(0.94);
}

.icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

#theme-toggle .icon-sun,
#theme-toggle[data-mode='dark'] .icon-moon {
  display: none;
}

#theme-toggle[data-mode='dark'] .icon-sun {
  display: block;
}

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 16px 64px;
}

.masthead h1 {
  max-width: 640px;
  margin: 10px 0 10px;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.lede {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  color: var(--secondary);
}

.meta {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* The job counts and refresh time describe the job list, so other tabs drop them. */
body[data-section]:not([data-section='jobs']) .masthead .meta,
body[data-section]:not([data-section='jobs']) .masthead .stats {
  display: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.stat-value {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Section tabs.
   --------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  width: fit-content;
  /* Five tabs (with Tracker) don't fit a phone: scroll sideways instead of squeezing and wrapping labels. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--chip);
  border-radius: 999px;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  white-space: nowrap;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-current='page'] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Search, chips and filters.
   --------------------------------------------------------------------------- */

.controls {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.search {
  position: relative;
  display: block;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding: 13px 44px 13px 42px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.search input::placeholder {
  color: var(--faint);
}

.search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.search-hint {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  transform: translateY(-50%);
  pointer-events: none;
}

.search input:focus ~ .search-hint {
  display: none;
}

.chip-group {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--secondary);
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.chip:hover {
  background: var(--chip-hover);
  color: var(--ink);
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed='true'] {
  color: var(--on-accent);
  background: var(--accent);
}

.chip.empty {
  opacity: 0.8;
}

.chip-count {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.85;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

select {
  width: 100%;
  padding: 9px 30px 9px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a867c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 8px center / 16px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  appearance: none;
  cursor: pointer;
}

select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 22px 2px 12px;
}

.summary p {
  margin: 0;
  font-weight: 600;
}

.summary-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.toggle svg {
  width: 15px;
  height: 15px;
}

.toggle:hover {
  color: var(--ink);
  background: var(--chip);
}

.toggle[aria-pressed='true'] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.toggle[aria-pressed='true'] svg {
  fill: currentColor;
}

.toggle-count {
  font-family: var(--mono);
  font-size: 11.5px;
  opacity: 0.75;
}

button.link {
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Job cards.
   --------------------------------------------------------------------------- */

.list {
  display: grid;
  gap: 10px;
}

.card {
  position: relative;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}

.list > .card {
  cursor: pointer;
  animation: rise 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}

.list > .card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* "Show more" under a long job list. */
.list > .more {
  justify-self: center;
  margin-top: 6px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}

.list > .more:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline));
}

.more-count {
  font-weight: 400;
  color: var(--muted);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.card-title {
  flex: 1;
  min-width: 0;
}

.monogram {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 11px;
}

.monogram.large {
  width: 54px;
  height: 54px;
  font-size: 14px;
  border-radius: 14px;
}

.role {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.role .open {
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.role .open:hover {
  color: var(--accent);
}

.firm {
  margin: 3px 0 0;
  color: var(--muted);
}

.save {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--faint);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s var(--ease);
}

.save:hover {
  color: var(--accent);
  background: var(--accent-tint);
}

.save[aria-pressed='true'] {
  color: var(--accent);
}

.save[aria-pressed='true'] svg {
  fill: currentColor;
  animation: pop 0.3s var(--ease);
}

@keyframes pop {
  50% {
    transform: scale(1.25);
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.card .chips {
  margin-left: 54px;
}

.chips li {
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--secondary);
  background: var(--chip);
  border-radius: 999px;
}

.chips li.kind {
  color: var(--on-tint);
  background: var(--accent-tint);
}

.chips li.pay {
  font-family: var(--mono);
  font-size: 11.5px;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0 54px;
}

.dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

.new-tag {
  padding: 1px 7px;
  font-weight: 600;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-radius: 999px;
}

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

.deadline.urgent {
  color: var(--red);
}

.apply {
  flex: none;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.apply:hover {
  background: var(--accent-hover);
}

.apply:active {
  transform: scale(0.97);
}

.skeleton {
  height: 132px;
  background: var(--skeleton);
  background-size: 200% 100%;
  border-radius: var(--radius);
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.state {
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}

.state.error {
  color: var(--error-ink);
  background: var(--error-surface);
  border-style: solid;
}

.footer {
  margin-top: 48px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--divider);
}

/* Emphasis scales with the resume match: best and good fits read heavier, weak fits lighter. */
.card.best {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.card.best .role {
  font-weight: 600;
}

.card.best .score {
  font-weight: 600;
}

.card.good {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}

.card.good .role {
  font-weight: 650;
}

.card.good .score {
  font-weight: 600;
}

.card.weak .role {
  font-weight: 500;
  color: var(--secondary);
}

.match-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.score {
  color: var(--accent);
}

.why {
  margin: 10px 0 0;
  padding: 10px 12px 10px 28px;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   Job detail sheet: a side panel on wide screens, a bottom sheet on phones.
   --------------------------------------------------------------------------- */

.panel-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(540px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.panel-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: slide-in 0.28s var(--ease);
}

.panel-sheet::backdrop {
  background: var(--scrim);
  animation: fade 0.2s ease;
}

@keyframes slide-in {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}

.sheet-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-position {
  min-width: 64px;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}

.sheet-body {
  flex: 1;
  padding: 22px 22px 36px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.sheet-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sheet-body .dates {
  margin-top: 12px;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 6px;
}

.secondary {
  padding: 11px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.secondary:hover {
  background: var(--chip-hover);
}

.secondary[aria-pressed='true'] {
  color: var(--on-tint);
  background: var(--accent-tint);
}

.sheet-h {
  margin: 24px 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
}

.desc {
  margin: 0;
  color: var(--secondary);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.reqs {
  margin: 0;
  padding-left: 18px;
  color: var(--secondary);
  line-height: 1.6;
}

.sheet-body .hint {
  margin-top: 22px;
}

@media (max-width: 640px) {
  .panel-sheet {
    inset: auto 0 0 0;
    width: 100%;
    height: 88vh;
    height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 18px 18px 0 0;
  }

  .panel-sheet[open] {
    animation-name: slide-up;
  }

  .sheet-bar::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    background: var(--hairline);
    border-radius: 2px;
  }

  @keyframes slide-up {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
  animation: toast-in 0.2s var(--ease);
}

.toast.leaving {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* ---------------------------------------------------------------------------
   Accounts: sign-in, subscribe, profile.
   --------------------------------------------------------------------------- */

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.account-button:hover {
  background: var(--chip);
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  font-weight: 600;
  color: var(--on-tint);
  background: var(--accent-tint) center / cover no-repeat;
  border-radius: 50%;
}

.avatar.small {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.avatar.large {
  width: 76px;
  height: 76px;
  font-size: 28px;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--hairline);
}

.panel {
  margin-top: 28px;
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.panel-lede {
  margin: 6px 0 0;
  max-width: 560px;
  color: var(--secondary);
}

.signin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.signin label {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 5px;
}

.panel input:not([type='checkbox']):not([type='radio']):not([type='file']),
.panel select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background-color: var(--chip);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.panel select {
  padding-right: 32px;
}

.panel input:focus,
.panel select:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.panel input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.primary {
  display: inline-block;
  padding: 11px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-accent);
  text-decoration: none;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.primary:hover {
  background: var(--accent-hover);
}

.primary:active {
  transform: scale(0.98);
}

.primary:disabled {
  opacity: 0.6;
  cursor: progress;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

a.link {
  font-size: 14px;
}

.notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 10px;
}

.notice.error {
  color: var(--error-ink);
  background: var(--error-surface);
}

.muted {
  margin: 2px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.badge {
  display: inline-block;
  white-space: nowrap;
  margin: 8px 0 0;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 999px;
}

.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.profile-who {
  flex: 1;
  min-width: 0;
}

.profile-head .close {
  order: -1;
  flex-basis: 100%;
  text-align: left;
}

.uploads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.upload:hover {
  border-color: var(--accent);
}

.file-button {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 999px;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-button:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.upload .chips {
  margin: 0;
}

.profile-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
}

.profile-form > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.profile-form .sectors,
.profile-form .actions,
.profile-form .notice {
  grid-column: 1 / -1;
}

label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.sectors {
  margin: 0;
  padding: 0;
  border: 0;
}

.sectors legend {
  margin-bottom: 8px;
}

#sector-options,
#alert-city-options,
#alert-kind-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sector, alert city and role type checkboxes read as toggle chips. */
#sector-options label,
#alert-city-options label,
#alert-kind-options label {
  display: inline-flex;
  padding: 6px 12px 6px 10px;
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#sector-options label:has(input:checked),
#alert-city-options label:has(input:checked),
#alert-kind-options label:has(input:checked) {
  color: var(--on-tint);
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

#sector-options input[type='checkbox'],
#alert-city-options input[type='checkbox'],
#alert-kind-options input[type='checkbox'] {
  width: 15px;
  height: 15px;
}

/* Alert settings: the choices only matter once alerts are on. */
.alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alerts .hint {
  margin: 0;
}

#alert-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#alert-settings:not(:has(input[name='emailAlerts']:checked)) #alert-options {
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Tracker: a member's applications by stage.
   --------------------------------------------------------------------------- */

.tracker-top {
  margin: 22px 2px 14px;
}

.tracker-top h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.tracker-top p {
  margin: 0;
}

.tracker-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.track-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-stage-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.track-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.track-head .role {
  margin: 0;
  font-size: 16px;
}

.track-head .open {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.track-head .open:hover {
  color: var(--accent);
}

.track-head .firm {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.track-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.track-controls label,
.track-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.track-controls input[type='date'],
.track-note textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}

.track-note textarea {
  resize: vertical;
  min-height: 44px;
}

.track-controls input[type='date']:focus,
.track-note textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.track-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 14px;
}

.track-foot .follow {
  margin-right: auto;
  color: var(--muted);
}

.track-foot .follow.due {
  font-weight: 600;
  color: var(--red);
}

.stage-pick select {
  height: 100%;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .track-controls {
    grid-template-columns: 1fr;
  }

  .sheet-actions .stage-pick {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------------
   Market data.
   --------------------------------------------------------------------------- */

#markets-view .controls {
  margin-top: 14px;
}

.market-filters {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.market-blurb {
  font-weight: 500 !important;
  color: var(--secondary);
}

.chart-card {
  margin-bottom: 12px;
  padding: 18px;
}

.rates-card,
.counties-card {
  margin-bottom: 12px;
  padding: 18px;
}

.counties-card {
  margin-top: 12px;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.rate-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.rate-tile:hover,
.rate-tile:focus-visible {
  border-color: var(--accent);
}

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

.rate-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rate-change {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.metric-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.chart-head {
  margin-bottom: 10px;
}

.bars {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-link {
  display: grid;
  grid-template-columns: minmax(84px, 120px) 1fr minmax(64px, auto);
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  margin: 0 -8px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.bar-link:hover,
.bar-link:focus-visible {
  background: var(--chip);
}

.bar-label {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  position: relative;
  height: 14px;
}

.bar-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--faint);
}

.bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  transform-origin: left;
  animation: grow 0.5s var(--ease) both;
  transition: filter 0.12s ease;
}

.bar-fill.neg {
  border-radius: 4px 0 0 4px;
  transform-origin: right;
}

.bar-link:hover .bar-fill {
  filter: brightness(1.15);
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

.bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--secondary);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.chart-tip strong {
  color: var(--ink);
}

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.market-table th,
.market-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider);
}

.market-table tbody tr {
  transition: background-color 0.12s ease;
}

.market-table tbody tr:hover > * {
  background: var(--surface-2);
}

.market-table tbody tr:last-child > * {
  border-bottom: 0;
}

.market-table thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}

.market-table .num {
  text-align: right;
  white-space: nowrap;
}

.market-table .city-col {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  background: var(--surface);
}

@media (max-width: 600px) {
  .market-table .city-col {
    min-width: 150px;
  }
}

.sort-button {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.sort-button:hover,
th[aria-sort] .sort-button {
  color: var(--ink);
}

.rank {
  display: inline-block;
  min-width: 20px;
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.city-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.city-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.metro {
  display: block;
  margin: 2px 0 0 26px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.value {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
}

.value.up {
  color: var(--green);
}

.value.down {
  color: var(--red);
}

.market-table td.sorted {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.market-table td.sorted .value {
  font-weight: 600;
}

.bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  margin-left: auto;
  width: 80px;
  background: var(--chip);
  border-radius: 2px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  margin-left: auto;
  background: var(--accent);
  border-radius: 2px;
}

.market-asof,
.market-sources {
  font-size: 12.5px;
  color: var(--muted);
}

/* A figure kept from an earlier update because its source did not refresh. */
.stale-mark {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  vertical-align: super;
  cursor: help;
}

/* What kind of figure a metric is (Residential, Appraised values...), beside its name. */
.cat-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}

.market-asof {
  margin: 10px 2px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

.market-sources {
  margin-top: 18px;
}

.market-sources p {
  margin: 0 0 6px;
  max-width: 640px;
}

.market-head {
  margin-bottom: 12px;
}

.market-head .role {
  margin-top: 8px;
  font-size: 26px;
}

.market-head .link {
  font-size: 14px;
}

.market-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.market-group.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.group-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.group-blurb {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.metric-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  margin: 0;
}

.metric-list dt {
  font-size: 13.5px;
  color: var(--secondary);
}

.metric-list dd {
  margin: 0;
  text-align: right;
}

.metric-meta {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}

/* Where this market sits among all of them: ticks for each, a dot for this one. */
.strip {
  position: relative;
  display: block;
  width: 96px;
  height: 10px;
  margin: 5px 0 3px auto;
}

.strip::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chip);
  border-radius: 1px;
}

.strip i {
  position: absolute;
  top: 2px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: var(--faint);
  opacity: 0.45;
  border-radius: 1px;
}

.strip b {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Phones.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .page {
    padding-top: 24px;
  }

  /* One compact row of counts, so the first jobs show sooner on a phone. */
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
  }

  .stat {
    padding: 9px 8px;
    border-radius: 10px;
  }

  .stat-value {
    font-size: 19px;
  }

  .stat-label {
    font-size: 11px;
    line-height: 1.25;
  }

  .masthead .lede {
    font-size: 15px;
  }

  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .filters label:last-child {
    grid-column: 1 / -1;
  }

  .search-hint {
    display: none;
  }

  .chip-row {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chip-row::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: none;
  }

  .card .chips,
  .card-foot {
    margin-left: 0;
  }

  .monogram {
    width: 38px;
    height: 38px;
  }

  .apply {
    padding: 7px 14px;
  }

  .sheet-actions .primary {
    flex: 1 1 100%;
    text-align: center;
  }

  .sheet-actions .secondary {
    flex: 1;
  }

  .bar-link {
    grid-template-columns: 84px 1fr 64px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Welcome: what signed-out visitors see under the sign-in form.
   --------------------------------------------------------------------------- */

.welcome-block {
  margin-top: 56px;
}

.welcome-block h2,
.welcome-cta h2 {
  margin: 8px 0 0;
  font-size: clamp(22px, 3.2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.welcome h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.005em;
}

.steps p,
.feature p,
.plan p {
  margin: 6px 0 0;
  color: var(--secondary);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.steps li,
.feature,
.plan {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 999px;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.feature svg {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-card {
  max-width: 560px;
  margin-top: 20px;
}

.preview-card .role {
  margin: 0;
  font-size: 16px;
}

.preview .hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plan-price {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

.faq {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.faq details + details {
  border-top: 1px solid var(--divider);
}

.faq summary {
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}

.faq details p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--secondary);
}

.welcome-cta {
  margin-top: 56px;
  padding: 32px 22px;
  text-align: center;
  background: var(--accent-tint);
  border-radius: var(--radius);
}

.welcome-cta h2 {
  margin: 0 0 16px;
  color: var(--on-tint);
}

@media (max-width: 640px) {
  .steps,
  .features,
  .plans {
    grid-template-columns: 1fr;
  }

  .welcome-block {
    margin-top: 40px;
  }
}

/* ---------------------------------------------------------------------------
   News: commercial real estate headlines by city.
   --------------------------------------------------------------------------- */

.news-filters {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  max-width: 260px;
}

.news-item {
  animation: rise 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}

.news-item:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline));
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

.news-source {
  font-weight: 600;
  color: var(--secondary);
}

.news-title {
  margin: 6px 0 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
}

.news-title a {
  color: var(--ink);
  text-decoration: none;
}

.news-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The whole card opens the article, without nesting a second link. */
.news-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.news-item .chips {
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Development map (devmap.js) */
.dev-card {
  margin-bottom: 12px;
  padding: 18px;
}

.dev-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0;
}

.dev-controls .dev-cities {
  flex-basis: 100%;
  margin-bottom: 0;
}

.dev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--secondary);
  cursor: pointer;
}

.dev-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.dev-legend .dot + .dot,
.dev-legend .dot:not(:first-child) {
  margin-left: 8px;
}

.dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.private {
  background: var(--accent);
}

.dot.public {
  background: var(--amber);
}

.dev-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  height: 480px;
}

.dev-map {
  min-height: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  z-index: 0;
}

/* The site's icon rule sizes every svg at 18px; Leaflet's marker layer sets its own size. */
.dev-map svg {
  width: auto;
  height: auto;
  stroke-width: initial;
}

.dev-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.dev-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  /* A market's full list runs to thousands of rows: rows scrolled out of view skip layout and paint. */
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

.dev-item:last-child {
  border-bottom: 0;
}

.dev-item.active {
  background: var(--accent-tint);
}

.dev-pick {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.dev-pick > :not(.dot) {
  grid-column: 2;
}

.dev-pick .dot {
  align-self: center;
}

.dev-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.dev-pick:hover .dev-name,
.dev-pick:focus-visible .dev-name {
  color: var(--accent);
}

.dev-meta {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.dev-off {
  font-size: 11.5px;
  color: var(--faint);
  font-style: italic;
}

.dev-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0 18px;
  font-size: 12.5px;
}

.dev-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.dev-pop {
  display: grid;
  gap: 3px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
}

.dev-pop-title {
  font-size: 14.5px;
  line-height: 1.3;
}

.dev-pop .muted {
  color: var(--muted);
}

.dev-pop-people {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  margin: 4px 0 0;
}

.dev-pop-people dt {
  color: var(--muted);
}

.dev-pop-people dd {
  margin: 0;
}

.dev-pop-scope {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--secondary);
}

.dev-pop .dev-links {
  margin: 6px 0 0;
}

.dev-card .leaflet-popup-content-wrapper,
.dev-card .leaflet-popup-tip {
  background: var(--surface);
  color: var(--ink);
}

.dev-card .leaflet-container a.leaflet-popup-close-button {
  color: var(--muted);
}


/* Development map filters (devmap.js): a collapsible panel, open on desktop, folded on phones. */
.dev-filters {
  flex-basis: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-2);
}

.dev-filters-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.dev-filters-summary::-webkit-details-marker {
  display: none;
}

.dev-filters-summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s var(--ease);
}

.dev-filters[open] > .dev-filters-summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.dev-filters-badge {
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.dev-filters-body {
  padding: 0 12px 12px;
}

.dev-search input {
  padding: 10px 14px 10px 40px;
  font-size: 15px;
  background: var(--surface);
  border-color: var(--hairline);
  border-radius: 9px;
}

.dev-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dev-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.dev-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.dev-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
}

.dev-count {
  margin: 0;
  font-size: 14px;
  color: var(--secondary);
}

.dev-count strong {
  font-family: var(--mono);
  color: var(--ink);
}

.dev-count-pins {
  color: var(--muted);
}

.dev-clear {
  padding: 5px 12px;
  font-size: 13px;
}

.dev-results .dev-legend {
  margin-left: auto;
}

.dev-map .dev-loading {
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
}

.dev-empty {
  display: grid;
  gap: 4px;
  padding: 28px 16px;
  text-align: center;
  color: var(--secondary);
}

.dev-empty .dev-meta {
  display: inline;
}

@media (max-width: 760px) {
  .dev-results .dev-legend {
    flex-basis: 100%;
    margin-left: 0;
  }

  .dev-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dev-search input {
    font-size: 16px;
  }

  .dev-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 340px auto;
    height: auto;
  }

  .dev-list {
    max-height: 420px;
  }
}

/* Events (events-view.js) reuse the news cards, grouped by month. */
.events-month {
  display: grid;
  gap: 10px;
}

.events-month-title {
  margin: 14px 0 2px;
}

.school-line { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.school-line .school-icon { width: 20px; height: 20px; flex: none; object-fit: contain; border-radius: 4px; }

@media (max-width: 480px) {
  .tabs {
    gap: 0;
  }

  .tab {
    padding: 8px 9px;
    font-size: 13px;
  }
}

/* Market data views: city data, compare cities, deal calculator (market-tools.js). */
.market-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.market-tools .chip {
  text-decoration: none;
}

.market-tools .chip[aria-current='page'] {
  color: var(--on-accent);
  background: var(--accent);
}

.chip:disabled {
  cursor: default;
  opacity: 0.55;
}

.chip:disabled:active {
  transform: none;
}

.compare-pick,
.calc-card,
.calc-glossary {
  margin-bottom: 12px;
  padding: 18px;
}

.compare-pick .metric-pills {
  margin-bottom: 0;
}

.compare-block {
  margin-bottom: 16px;
}

.compare-block > .group-title {
  margin: 0 2px;
}

.compare-block > .group-blurb {
  margin: 4px 2px 10px;
}

.compare-table .city-col {
  min-width: 180px;
  font-weight: 500;
  color: var(--secondary);
}

.compare-table thead .city-link {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.compare-table td.best {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.compare-table td.best .value {
  font-weight: 600;
}

.best-tag {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--accent);
}

.calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.calc-input {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}

.calc-input:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.calc-input input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.calc-affix {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
}

.calc-input .calc-affix:first-child {
  padding-right: 0;
}

.calc-input input + .calc-affix {
  padding-left: 0;
}

.calc-fills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.calc-fills .eyebrow {
  margin-right: 4px;
}

.calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.calc-tile:hover {
  border-color: var(--hairline);
}

.calc-tile.good .rate-value {
  color: var(--green);
}

.calc-tile.warn .rate-value {
  color: var(--amber);
}

.calc-tile.bad .rate-value {
  color: var(--red);
}

.calc-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.calc-warning {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--secondary);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-radius: 10px;
}

.calc-glossary summary {
  cursor: pointer;
}

.calc-terms {
  margin-top: 12px;
  grid-template-columns: minmax(90px, auto) 1fr;
}

.calc-def {
  text-align: left !important;
  margin: 0;
  font-size: 13.5px;
  color: var(--secondary);
}

.chip[aria-pressed='true']:disabled {
  opacity: 0.85;
}

.lease-table .city-col {
  min-width: 140px;
}

.lease-table .metric-meta {
  text-align: right;
}

.lease-period {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.report-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.report-list li {
  display: grid;
  gap: 3px;
}

.report-firm {
  font-size: 13.5px;
  font-weight: 600;
}

.report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13.5px;
}

.sites-filters {
  margin-bottom: 12px;
  padding: 18px;
}

.sites-filters .metric-pills {
  margin-bottom: 4px;
}

.sites-table .city-col {
  min-width: 220px;
}

.site-address {
  display: block;
  font-weight: 500;
}

.sites-table .metro {
  margin-left: 0;
}

.site-zoning {
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.sites-table td .metric-meta {
  display: block;
}

.sites-more {
  margin-top: 12px;
}

/* Deal of the week under News (deal-view.js). */
#n-deal {
  display: grid;
  gap: 12px;
}

.owner-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.owner-field {
  flex: 1 1 260px;
}

.owner-results {
  display: grid;
  gap: 12px;
}

.owner-card .group-title {
  margin-bottom: 10px;
}

.owner-facts {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0 0 10px;
  font-size: 14px;
}

.owner-facts dt {
  color: var(--muted);
}

.owner-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.owner-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.owner-list li {
  display: grid;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}

.owner-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.owner-pick {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.radar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.radar-item {
  display: grid;
  align-content: start;
  gap: 4px;
}

.radar-facts {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

.radar-line {
  margin: 0;
  font-size: 13px;
}

.radar-quote {
  display: block;
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--secondary);
}

.drive-map {
  height: 440px;
}

.drive-results .calc-results,
.distress-tiles {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.deal-title {
  margin: 6px 0 8px;
  font-size: 20px;
  line-height: 1.3;
}

.deal-title a {
  color: var(--ink);
  text-decoration: none;
}

.deal-title a:hover {
  color: var(--accent);
}

.deal-steps {
  display: grid;
  gap: 14px;
  margin: 16px 0 12px;
  padding-left: 22px;
}

.deal-steps li::marker {
  color: var(--accent);
  font-weight: 600;
}

.deal-steps p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary);
}

.deal-step-title {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 640px) {
  .owner-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 0;
  }

  .owner-facts dd {
    margin-bottom: 8px;
  }

  .drive-map {
    height: 340px;
  }

  .radar-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.deal-card .chips,
.owner-card .dev-links,
.radar-item .dev-links,
.deal-card .dev-links {
  padding-left: 0;
  margin-left: 0;
}

/* Salary check, zoning alerts, hiring vs. building (insights-view.js) */
.pay-controls,
.zoning-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 10px;
}
.pay-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.pay-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pay-count {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.pay-table td.num,
.pay-rows td.num {
  white-space: nowrap;
}
.pay-level {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.zoning-list,
.growth-list,
.growth-projects {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zoning-item {
  padding: 14px 16px;
  margin: 0 0 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.zoning-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}
.zoning-date {
  font-weight: 600;
  color: var(--ink);
}
.zoning-place {
  color: var(--muted);
  font-size: 13px;
}
.zoning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.zoning-tags .badge {
  margin-top: 6px;
}
.zoning-use {
  background: var(--chip);
  color: var(--secondary);
}
.zoning-file {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.zoning-title {
  margin: 8px 0 6px;
  color: var(--secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.growth-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}
.growth-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
}
.growth-head .badge {
  margin: 0;
}
.growth-firm {
  font-weight: 600;
  color: var(--ink);
}
.growth-projects li,
.growth-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-top: 1px solid var(--divider);
}
.growth-list li {
  padding: 10px 0;
}
.growth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.growth-chips .chip {
  text-decoration: none;
}
.dev-pop-hiring {
  margin: 6px 0 0;
  font-size: 13px;
}
.zoning-item .dev-links,
.growth-list .dev-links {
  margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Pitch deck (pitch.js): a full-screen, swipeable tour for signed-out visitors.
   --------------------------------------------------------------------------- */

.tour-link {
  margin-top: 14px;
}

body.pitch-open {
  overflow: hidden;
}

.pitch {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pitch-fade 0.25s ease;
}

.pitch[hidden] {
  display: none;
}

.pitch-frame {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(640px, 100%);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: pitch-rise 0.35s var(--ease);
}

.pitch-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 12px;
}

.pitch-count {
  margin: 0 auto 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.pitch-bar {
  height: 3px;
  margin: 0 22px;
  overflow: hidden;
  background: var(--divider);
  border-radius: 3px;
}

.pitch-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}

.pitch-track {
  display: flex;
  flex: 1;
  min-height: 0;
  transition: transform 0.45s var(--ease);
  touch-action: pan-y;
}

.pitch-track.instant {
  transition: none;
}

.pitch-slide {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 40px;
  flex: 0 0 100%;
  min-width: 0;
  padding: 28px 56px;
  overflow-y: auto;
}

.pitch-slide.final {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.pitch-copy > * + * {
  margin-top: 14px;
}

.pitch-slide h2 {
  margin-top: 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pitch-lede {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--secondary);
}

.pitch-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 999px;
}

.pitch-live::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pitch-pulse 1.8s ease infinite;
}

.pitch-points {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pitch-points li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--secondary);
}

.pitch-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 3px;
}

.pitch-points strong {
  color: var(--ink);
}

/* The slide's picture: CSS and SVG mock-ups, drawn in the site's own colors. */
.pitch-art {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
}

.pitch-slide.current .pitch-art > * {
  animation: pitch-rise 0.5s var(--ease) both;
}

.pitch-slide.current .pitch-art > * + * {
  animation-delay: 0.1s;
}

.skyline {
  width: 100%;
  height: auto;
  max-height: 340px;
  stroke: none;
}

.skyline .sun {
  fill: var(--amber);
  opacity: 0.35;
}

.skyline .b1 {
  fill: var(--accent-tint);
}

.skyline .b2 {
  fill: var(--accent);
  opacity: 0.85;
}

.skyline .b3 {
  fill: var(--accent);
}

.skyline .win rect {
  fill: var(--bg);
  opacity: 0.7;
}

.skyline .ground {
  stroke: var(--hairline);
  stroke-width: 2;
}

.funnel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.funnel span {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--secondary);
  background: var(--chip);
  border-radius: 999px;
}

.funnel span:nth-child(odd) {
  transform: rotate(-3deg);
}

.funnel span:nth-child(even) {
  transform: rotate(2deg);
}

.funnel-arrow {
  flex-basis: 100%;
  width: 28px;
  height: 28px;
  color: var(--faint);
}

.funnel .brand-mark {
  width: 56px;
  height: 56px;
  font-size: 28px;
  border-radius: 16px;
}

.mock-stack,
.mock-board,
.mock-news,
.mock-events {
  display: grid;
  gap: 10px;
}

.mock-job,
.mock-mail,
.mock-pill,
.mock-news li,
.mock-events p,
.tool-grid li {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.mock-job small,
.mock-mail small,
.tool-grid small {
  font-size: 13px;
  color: var(--muted);
}

.mock-job.best {
  border: 2px solid var(--accent);
}

.mock-job:nth-child(2) {
  margin-left: 18px;
  opacity: 0.85;
}

.mock-job:nth-child(3) {
  margin-left: 36px;
  opacity: 0.65;
}

.mock-badge {
  justify-self: start;
  margin-bottom: 4px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.mock-mail {
  border-left: 4px solid var(--green);
}

.mock-board {
  grid-template-columns: repeat(3, 1fr);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.mock-board div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.mock-board h4 {
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
}

.mock-board i {
  height: 30px;
  background: var(--chip);
  border-radius: 8px;
}

.mock-board i.hot {
  background: var(--accent-tint);
  border: 2px solid var(--accent);
}

svg.bars {
  width: 100%;
  height: auto;
  max-height: 260px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  stroke: none;
}

svg.bars rect {
  fill: var(--accent-tint);
}

svg.bars rect.hi {
  fill: var(--accent);
}

svg.bars .axis {
  stroke: var(--hairline);
  stroke-width: 2;
}

svg.bars text {
  font-family: var(--mono);
  font-size: 11px;
  text-anchor: middle;
  fill: var(--muted);
}

.mock-pill {
  justify-self: start;
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 999px;
}

.mock-map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(var(--divider) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--divider) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.mock-map::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 58%;
  width: 120%;
  height: 10px;
  background: var(--chip-hover);
  transform: rotate(-14deg);
}

.mock-map .pin {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.mock-map .pin.big {
  width: 24px;
  height: 24px;
  background: var(--amber);
  animation: pitch-pulse 1.8s ease infinite;
}

.mock-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-grid li {
  border-top: 3px solid var(--accent);
}

.tool-grid li.wide {
  grid-column: 1 / -1;
  border-top-color: var(--amber);
}

.mock-news {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mock-news li {
  font-weight: 600;
}

.mock-news span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
}

.mock-events {
  grid-template-columns: 1fr 1fr;
}

.mock-events p {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
}

.mock-events b {
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 8px;
}

.pitch-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 22px auto 0;
  text-align: left;
}

.pitch-plans p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.pitch-plans p:first-child {
  border: 2px solid var(--accent);
}

.pitch-plans .price {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pitch-plans small {
  font-size: 14px;
  color: var(--muted);
}

.pitch-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.pitch-ctas .primary {
  padding: 14px 26px;
  font-size: 17px;
}

.pitch-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--divider);
}

.pitch-dots {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 4px;
}

/* A 24px tap target around each small dot. */
.pitch-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.pitch-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--hairline);
  border-radius: 999px;
  transition: width 0.25s var(--ease), background-color 0.25s ease;
}

.pitch-dots button[aria-selected='true']::before {
  width: 22px;
  background: var(--accent);
}

.pitch-next {
  min-width: 112px;
  white-space: nowrap;
}

@keyframes pitch-fade {
  from {
    opacity: 0;
  }
}

@keyframes pitch-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes pitch-pulse {
  50% {
    box-shadow: 0 0 0 6px transparent, 0 0 0 0 var(--accent-tint);
    opacity: 0.6;
  }
}

@media (max-width: 760px) {
  .pitch {
    padding: 0;
  }

  .pitch-frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .pitch-top {
    padding: 12px 16px 10px;
  }

  .pitch-bar {
    margin: 0 16px;
  }

  .pitch-slide {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 22px;
    padding: 22px 16px;
  }

  .pitch-slide.cover .pitch-art {
    order: -1;
  }

  .pitch-slide.cover .skyline {
    max-height: 170px;
  }

  .pitch-points li,
  .pitch-lede {
    font-size: 15px;
  }

  .pitch-nav {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .mock-events,
  .pitch-plans {
    grid-template-columns: 1fr;
  }

  .pitch-nav {
    gap: 10px;
  }

  .pitch-dots {
    gap: 0;
  }

  .pitch-dots button {
    width: 16px;
  }

  .pitch-dots button[aria-selected='true'] {
    width: 26px;
  }

  .pitch-next {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch,
  .pitch-frame,
  .pitch-slide.current .pitch-art > *,
  .pitch-live::before,
  .mock-map .pin.big {
    animation: none;
  }

  .pitch-track {
    transition: none;
  }
}

/* First sign-in prompt to fill in the profile (account.js). */
.profile-prompt {
  width: min(420px, calc(100% - 32px));
  padding: 28px 24px 22px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.profile-prompt[open] {
  animation: fade 0.2s ease;
}

.profile-prompt::backdrop {
  background: var(--scrim);
}

.profile-prompt h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.profile-prompt p {
  margin: 0 0 20px;
  color: var(--secondary);
  line-height: 1.5;
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ---------------------------------------------------------------------------
   Polished layout (2026-10): a wider page, underlined section tabs, one search
   strip, and on wide screens the posting beside the list instead of over it.
   On phones the section tabs move to a bar at the bottom of the screen.
   --------------------------------------------------------------------------- */

.appbar-inner,
.page {
  max-width: 1240px;
}

.page {
  padding: 28px 24px 64px;
}

/* Reading-width blocks stay narrow on the wider page. */
#gate,
#welcome,
#paywall,
#profile,
.footer {
  max-width: 920px;
}

.masthead h1 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.masthead .eyebrow {
  font-size: 11px;
}

/* Section tabs: a plain row with an underline under the open one. */
.tabs {
  gap: 26px;
  width: auto;
  margin-top: 22px;
  padding: 0 2px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
}

.tab {
  padding: 12px 0 11px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
}

.tab[aria-current='page'] {
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The job search: search box and dropdowns in one strip, city and role chips under it. */
#controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding: 10px;
}

#controls .search {
  flex: 1 1 300px;
  min-width: 0;
}

#controls .search input {
  padding-block: 11px;
}

#controls .filters {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

#controls .filters label {
  flex: 1 1 120px;
  gap: 3px;
}

#controls .filters select {
  padding-block: 10px;
  background-color: var(--chip);
  border-color: transparent;
  font-weight: 600;
}

#controls .chip-group {
  order: 3;
  flex: 1 1 100%;
  grid-template-columns: 88px 1fr;
  align-items: center;
  margin: 0;
  padding: 8px 4px 0;
  border-top: 1px solid var(--divider);
}

#controls .chip-group + .chip-group {
  padding-top: 4px;
  border-top: 0;
}

.summary {
  margin: 18px 2px 10px;
}

/* Cards: a touch quieter, so the match and deadline carry the emphasis. */
.card {
  padding: 16px;
}

.list > .card:hover {
  transform: none;
}

.list > .card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

/* List beside the posting. The dialog is shown non-modally on wide screens. */
.split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.split > .list {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 1024px) {
  .panel-sheet[open]:not(:modal) {
    position: sticky;
    top: 76px;
    flex: 1.25 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    animation: none;
  }

  .panel-sheet:not(:modal) .sheet-body {
    padding: 24px 28px 32px;
  }

  .panel-sheet:not(:modal) .sheet-head h2 {
    font-size: 26px;
    font-weight: 600;
  }

  .panel-sheet:not(:modal) .sheet-actions .primary {
    flex: 1 1 200px;
    text-align: center;
  }
}

/* Phones: section tabs become a bar along the bottom of the screen. */
@media (max-width: 640px) {
  .page {
    padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 0;
    margin: 0;
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: var(--appbar);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .tab {
    flex: 1 0 auto;
    min-height: 56px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--muted);
  }

  .tab[aria-current='page'] {
    color: var(--accent);
    box-shadow: inset 0 3px 0 var(--accent);
  }

  #controls .filters label {
    flex: 1 1 0;
    min-width: 0;
  }

  #controls .filters select {
    padding-inline: 10px 26px;
    font-size: 13.5px;
  }

  #controls .chip-group {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #controls .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #controls .chip-row .chip {
    flex: none;
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------------------
   Screens v2 (2026-10): the "today" strip and the richer job panel (facts,
   match ring, have/missing skills, similar roles); the tracker as a board
   with a "this week" strip; a rates ticker, ranked headline figures and
   talking points on a city's market page; events as date blocks beside a
   mini calendar; profile progress, skill gaps and alert switches.
   --------------------------------------------------------------------------- */

:root {
  --warn-surface: var(--error-surface);
  --ok-surface: color-mix(in srgb, var(--green) 14%, var(--surface));
  --soon-surface: color-mix(in srgb, var(--amber) 16%, var(--surface));
}

/* Jobs: today strip */
.today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.today[hidden] {
  display: none;
}

.today-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.today-stat:hover {
  border-color: var(--accent);
}

.today-stat b {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.today-stat b.hot {
  color: var(--red);
}

.today-stat small {
  font-size: 13px;
  color: var(--muted);
}

.today-stat em {
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  font: 500 12.5px var(--ui);
  font-style: normal;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Job panel: fact tiles */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 4px;
}

.fact {
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
}

.fact dt {
  font-size: 11.5px;
  color: var(--muted);
}

.fact dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
}

.fact.warn {
  background: var(--warn-surface);
  border-color: transparent;
}

.fact.warn dd {
  color: var(--red);
}

/* Match ring and have/missing skills */
.fit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--accent-tint);
  border-radius: 14px;
}

.fit[hidden] {
  display: none;
}

.fit p {
  margin: 0;
  color: var(--on-tint);
}

.ring {
  --p: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--chip) 0);
  border-radius: 50%;
}

.ring span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font: 700 14px var(--mono);
  background: var(--surface);
  border-radius: 50%;
}

.checks {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.checks:empty {
  display: none;
}

.checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.checks i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  font: 500 12.5px var(--ui);
  font-style: normal;
  border-radius: 50%;
}

.checks .yes i {
  color: var(--green);
  background: var(--ok-surface);
}

.checks .no i {
  color: var(--amber);
  background: var(--soon-surface);
}

/* Similar roles */
.similar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.similar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
}

.similar-item:hover {
  border-color: var(--accent);
}

.similar-item .monogram {
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 11px;
  border-radius: 9px;
}

.similar-text {
  display: grid;
  min-width: 0;
}

.similar-text b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.similar-text small {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tracker: this week, then the board */
.week {
  margin-bottom: 16px;
  padding: 16px 18px;
}

.week-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.week-head .group-title {
  margin: 0;
}

.week-note {
  font: 500 12.5px var(--ui);
  color: var(--faint);
}

.week-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
}

.due {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  flex: none;
  padding: 3px 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
}

.due.soon {
  color: var(--red);
  background: var(--warn-surface);
}

.due.later {
  color: var(--amber);
  background: var(--soon-surface);
}

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 240px;
  padding: 10px;
  background: color-mix(in srgb, var(--chip) 60%, transparent);
  border-radius: 14px;
}

.board-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 4px 6px 6px;
  font-size: 15px;
  font-weight: 600;
}

.board-empty {
  margin: 0;
  padding: 24px 8px;
  font-size: 13.5px;
  text-align: center;
  color: var(--muted);
}

.track-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.track-card .track-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.track-card .monogram {
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 11px;
  border-radius: 9px;
}

.track-who {
  min-width: 0;
}

.track-card .track-head .role {
  font-size: 14.5px;
}

.track-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.track-note-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--secondary);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.track-edit summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.track-edit[open] summary {
  margin-bottom: 10px;
}

.track-card .track-controls {
  grid-template-columns: 1fr;
}

/* Market data: rates ticker, headline figures, chart beside talking points */
.ticker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
}

.tick {
  min-width: 0;
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  margin: 0 -1px -1px 0;
}

.tick:hover {
  background: var(--chip);
}

.tick small {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tick b {
  display: block;
  font: 700 18px var(--mono);
}

.tick-change {
  display: block;
  font: 500 12.5px var(--ui);
  color: var(--faint);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.kpi {
  min-width: 0;
}

.kpi small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.kpi b {
  display: block;
  margin: 2px 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.kpi-rank {
  font: 500 12.5px var(--ui);
  color: var(--faint);
}

.market-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.market-pair.single {
  grid-template-columns: minmax(0, 1fr);
}

.market-pair .chart-card {
  margin: 0;
}

.bars:has(.bar-row.me) .bar-row:not(.me) .bar-fill {
  opacity: 0.38;
}

.bar-row.me .bar-label,
.bar-row.me .bar-value {
  font-weight: 600;
}

.talk-card {
  margin: 0;
}

.talk {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.talk li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
}

.talk-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  font: 700 12px var(--mono);
  color: var(--on-tint);
  background: var(--accent-tint);
  border-radius: 8px;
}

.talk-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.market-all {
  margin-bottom: 16px;
}

.market-table tr.me > * {
  background: var(--accent-tint);
}

/* Events: date blocks beside a mini calendar */
.events-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.events-layout:has(.events-side[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.events-side {
  position: sticky;
  top: 76px;
}

.event-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  transition: box-shadow 0.3s ease;
}

.event-card.flash {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}

.date-block {
  padding: 8px 0;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
}

.date-block small {
  display: block;
  font: 500 12.5px var(--ui);
  color: var(--red);
}

.date-block b {
  display: block;
  font-size: 24px;
  line-height: 1.05;
}

.date-block span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.event-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.event-title a {
  color: var(--ink);
  text-decoration: none;
}

.event-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.event-where {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.event-tags .chip {
  padding: 3px 9px;
  font-size: 12.5px;
  cursor: default;
}

/* Long organizer names, prices and addresses from the calendars wrap instead of widening a phone page. */
.event-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-tags .chip {
  max-width: 100%;
  white-space: normal;
}

.event-address,
.event-notes {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.event-notes {
  font-weight: 600;
}

.event-tags .chip.badge-status {
  background: var(--error-surface);
  color: var(--error-ink);
  border-color: transparent;
  font-weight: 600;
}

.event-tags .chip.badge-price {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  border-color: transparent;
}

.event-card.is-cancelled .event-title a,
.event-card.is-cancelled .event-title {
  text-decoration: line-through;
}

.events-report {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.events-report summary {
  cursor: pointer;
  font-weight: 600;
}

.events-report-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.events-report-list li {
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.events-report-list .report-unreadable b {
  text-decoration: underline wavy var(--line);
}

.chip.org {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip.org i {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.event-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  text-align: center;
}

.secondary.sm {
  padding: 8px 14px;
  font-size: 13.5px;
  white-space: nowrap;
}

.link.sm {
  font-size: 12.5px;
}

.cal {
  padding: 16px;
}

.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-nav {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

.cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  font-size: 13px;
  text-align: center;
}

.cal-grid > * {
  padding: 7px 0;
  border-radius: 8px;
}

.cal-grid .dow {
  padding: 4px 0;
  font: 500 12.5px var(--ui);
  color: var(--faint);
}

.cal-grid button {
  font: inherit;
  font-weight: 600;
  color: var(--on-tint);
  background: var(--accent-tint);
  border: 0;
  cursor: pointer;
}

.cal-grid button:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.cal-grid .is-today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cal-count {
  margin: 10px 0 0;
  font: 500 12.5px var(--ui);
  color: var(--faint);
}

/* Profile: progress, found skills, gaps, alert switches */
.prof-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px 28px;
  align-items: start;
  margin: 20px 0;
  padding: 18px;
}

.prof-meter {
  display: grid;
  gap: 8px;
}

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

.prof-meter-head .meta,
.gaps-head .meta,
.gap-row .meta {
  margin: 0;
  font-size: 11.5px;
}

.meter-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  background: var(--chip);
  border-radius: 4px;
}

.meter-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s var(--ease);
}

.prof-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prof-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.prof-steps i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  border-radius: 50%;
}

.prof-steps .done i {
  color: var(--green);
  background: var(--ok-surface);
}

.prof-steps .todo i {
  border: 2px solid var(--hairline);
}

.prof-steps .todo .link {
  font-size: 14px;
  text-align: left;
}

.resume-skills-title {
  margin: 12px 0 6px;
}

#resume-skills.found li {
  color: var(--green);
  background: var(--ok-surface);
}

.skill-gaps {
  margin: 16px 0 20px;
  padding: 18px;
}

.gaps-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}

.gaps-head .group-title {
  margin: 0;
}

.gaps {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.gap-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.gap-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gap-row .meter-bar i {
  background: var(--amber);
}

.gap-row .meta {
  text-align: right;
}

.panel input.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  margin: 0;
  background: var(--chip);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.panel input.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease);
}

.panel input.switch:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.panel input.switch:checked::after {
  transform: translateX(18px);
}

.panel input.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Narrower screens */
@media (max-width: 900px) {
  .market-pair,
  .events-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-side {
    position: static;
    order: -1;
  }

  .prof-progress {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .today {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .today-stat {
    padding: 12px;
  }

  .today-stat b {
    font-size: 22px;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .similar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column at a time, snapping, with the next peeking in. */
  .board {
    grid-template-columns: repeat(5, 82%);
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .board-col {
    scroll-snap-align: start;
  }

  .ticker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .kpi b {
    font-size: 22px;
  }

  .event-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .event-actions {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  .gap-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
  }

  .gap-row .meter-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meter-bar i,
  input.switch,
  input.switch::after {
    transition: none;
  }
}

/* Public bids under the development map. */
.dev-bids {
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

.dev-bids-title {
  margin: 0 0 4px;
  font-size: 1rem;
}

.dev-bids-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.dev-bid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Underwriting model (underwrite-view.js). */
.uw-block {
  margin-top: 16px;
}

.uw-table td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uw-table .uw-base {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  font-weight: 600;
}

.uw-table .uw-neg {
  color: var(--red);
}

.uw-table tr.uw-total th,
.uw-table tr.uw-total td {
  font-weight: 600;
}

.uw-download {
  font-weight: 600;
}

/* ------------------------------------------------------------ Career tab (career-view.js) */

/* Open a long time / reposted, on job cards and in the job panel. */
.job-flag {
  color: var(--amber);
  font-weight: 500;
}
.job-flag.repost {
  color: var(--accent);
}
.job-flags {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.job-flags li {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--secondary);
}
.job-flags strong {
  color: var(--amber);
}
.job-flags .repost strong {
  color: var(--accent);
}

.career-pick {
  display: inline-grid;
  gap: 4px;
  margin: 4px 0 16px;
  min-width: min(100%, 320px);
}
.career-search {
  width: min(100%, 360px);
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.career-list {
  margin: 6px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--secondary);
}
.brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.title-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.title-card {
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.title-name {
  margin: 0;
  font-size: 16px;
}
.title-does {
  margin: 0;
  color: var(--secondary);
  font-size: 14px;
}
.title-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 4px 0;
  font-size: 13.5px;
}
.title-facts dt {
  color: var(--muted);
}
.title-facts dd {
  margin: 0;
}
.title-card .career-list {
  font-size: 13.5px;
  gap: 2px;
}
.title-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-bars {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.skill-bars li {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.skill-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--accent-tint);
  position: relative;
  overflow: hidden;
}
.skill-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--accent);
  border-radius: 5px;
}
.skill-pct {
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  color: var(--muted);
}
.heat-table td.heat {
  background: color-mix(in srgb, var(--accent) calc(var(--heat) * 70%), transparent);
  color: var(--ink);
}

.tour-stops {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: stop;
  display: grid;
  gap: 10px;
}
.tour-stop {
  counter-increment: stop;
  padding: 14px 16px 14px 56px;
  position: relative;
  display: grid;
  gap: 4px;
}
.tour-stop::before {
  content: counter(stop);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 13px var(--mono);
}
.tour-name {
  margin: 0;
  font-size: 15px;
}
.tour-stop p {
  margin: 0;
  font-size: 13.5px;
}
.tour-scope {
  color: var(--muted);
}
#career-view .compare-block .primary,
#career-view .compare-block .secondary {
  display: inline-block;
  margin-top: 10px;
}

@media (max-width: 640px) {
  .skill-bars li {
    grid-template-columns: 110px 1fr 40px;
  }
}

@media print {
  .tabs,
  #career-controls,
  .brief-actions,
  .masthead,
  header {
    display: none !important;
  }
}

#jp-brief,
#career-view a.secondary,
#career-view a.primary {
  text-decoration: none;
  text-align: center;
}
#jp-brief {
  display: inline-grid;
  place-items: center;
}

/* Seven sections on a phone's bottom bar: tighter tabs so Career stays in view. */
@media (max-width: 640px) {
  .tab {
    padding: 0 7px;
    font-size: 12.5px;
  }
}

/* Watchlists (migration 0017): Follow buttons and the profile list. */
.follow-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip.follow[aria-pressed='true'] { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.follow-status { font-size: 13px; color: var(--muted); }
.watch-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 8px; }
.watch-metric summary { cursor: pointer; font-size: 14px; }
/* One figure: the pickers sit in one wrapping row, not full-width stacks. */
.watch-metric[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.watch-metric summary { flex-basis: 100%; }
.watch-metric select { width: auto; max-width: 100%; }
.watch-metric input {
  width: 8em;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}
.watch-metric input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.watch-metric .follow-wrap { margin-top: 0; }
.watch-list { list-style: none; margin: 8px 0; padding: 0; }
.watch-list li { padding: 4px 0; font-size: 14px; }
.watch-list li.muted { color: var(--muted); }
.watch-frequency { display: flex; gap: 16px; margin: 6px 0; }
#watch-settings label.check { display: inline-flex; }
.watch-frequency input[type='radio'] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* ── Phase 1: section states, provenance tags, comparison warnings (labels.js) ── */
.state.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.state-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: state-spin 0.8s linear infinite;
}

@keyframes state-spin {
  to {
    transform: rotate(360deg);
  }
}

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

.state-retry {
  display: block;
  margin: 12px auto 0;
}

.prov-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 4px;
  cursor: help;
}

.prov-verified {
  color: var(--on-tint);
  background: var(--accent-tint);
}

.prov-assumption {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--hairline);
}

.prov-estimate {
  color: var(--ink);
  background: var(--warn-surface);
  font-style: italic;
}

.prov-legend {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.prov-legend .prov-tag {
  margin-left: 0;
}

.calc-tile .prov-tag,
.kpi .prov-tag {
  margin: 4px 0 0;
  align-self: flex-start;
}

.figure-source {
  display: block;
  margin-top: 2px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.compare-period {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.compare-warnings {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  background: var(--warn-surface);
  border-radius: var(--radius);
}

.compare-warnings ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.compare-flag {
  margin-left: 4px;
  color: var(--amber);
  cursor: help;
}

.prov-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 6px;
  grid-column: 1 / -1;
}

/* Keyboard focus on the development map filters. */
.dev-filters-summary:focus-visible,
.dev-clear:focus-visible,
.dev-empty-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Details shown in the list for a project with no pin on the map. */
.dev-detail {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--line, rgba(127, 127, 127, 0.25));
}

/* Coverage note, smaller filings and "Report a development" under the map (devreports-view.js). */
.dev-reports { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.dev-coverage { margin: 0; font-size: 0.85rem; color: var(--muted); }
.dev-smaller summary, .dev-report summary { cursor: pointer; font-weight: 600; }
.dev-report summary.chip { display: inline-flex; list-style: none; }
.dev-report summary::-webkit-details-marker { display: none; }
.dev-smaller-search { width: 100%; max-width: 24rem; margin: 0.5rem 0; }
.dev-smaller-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; display: grid; gap: 0.4rem; }
.dev-smaller-list .dev-item { display: grid; gap: 0.1rem; }
.dev-report-form { display: grid; gap: 0.6rem; max-width: 32rem; margin-top: 0.6rem; }
.dev-report-field { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.dev-report-field input, .dev-report-field textarea { width: 100%; box-sizing: border-box; font: inherit; }
.dev-report-pin { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dev-report-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.report-approved { color: var(--green, #2e7d4f); }
.report-rejected, .report-duplicate { color: var(--muted); }

.dot.small { background: var(--card, #fff); border: 1.5px solid var(--accent); width: 7px; height: 7px; }
.dev-smaller-show { justify-self: start; font-size: 0.8rem; }

/* ===========================================================================
   Redesign v3 (2026-10): Instrument Sans, warm neutrals, a clay accent,
   hairlines instead of shadows, 12px panels and 999px controls. Layered over
   the rules above; the tokens at the top of the file carry the colors.
   =========================================================================== */

body {
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4,
.masthead h1,
.group-title,
.page-title {
  font-weight: 500;
  letter-spacing: -0.01em;
}

b,
strong {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.eyebrow,
legend.eyebrow,
.dev-filter-label {
  font: 500 13px/1.4 var(--ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.eyebrow.accent,
.accent {
  color: var(--accent);
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

#main:focus {
  outline: none;
}

/* Cards and panels: hairline, no shadow. */
.card,
.panel,
.chart-card,
.dev-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

/* Buttons: pills. */
.primary,
.secondary,
button.primary,
a.primary,
a.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  font: 500 14px/1 var(--ui);
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.primary {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}

.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.secondary {
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
}

.secondary:hover:not(:disabled) {
  background: var(--sunk);
}

.primary.small {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.chip,
button.chip,
a.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 13px;
  font: 400 13.5px/1 var(--ui);
  color: var(--ink2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  color: var(--ink);
  background: var(--sunk);
}

.chip[aria-pressed='true'],
.chip[aria-current='page'],
.chip[aria-current='true'] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.chip .chip-count {
  font: inherit;
  font-size: 12px;
  color: inherit;
  opacity: 0.6;
}

input[type='search'],
input[type='email'],
input[type='text'],
input:not([type]),
input[type='number'],
input[type='date'],
select,
textarea {
  font-family: var(--ui);
  border-radius: 12px;
}

select {
  border: 1px solid var(--line);
  background-color: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   App header: wordmark, sections, search, theme, avatar.
   --------------------------------------------------------------------------- */

.appbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appbar-inner {
  max-width: 1320px;
  height: 64px;
  padding: 0 40px;
  gap: 28px;
  align-items: stretch;
}

.brand {
  align-self: center;
  align-items: baseline;
  gap: 10px;
}

.brand-name {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

body:has(#feed:not([hidden])) .brand-tag {
  display: none;
}

.landing-nav {
  display: none;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
}

.landing-nav a {
  color: var(--ink2);
  text-decoration: none;
}

.landing-nav a:hover {
  color: var(--ink);
}

body:has(#gate:not([hidden])) .landing-nav {
  display: flex;
}

.appbar .tabs {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow-x: auto;
  scrollbar-width: none;
}

body:has(#feed[hidden]) .appbar .tabs,
body:has(#feed[hidden]) .head-search {
  display: none;
}

.appbar .tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.appbar .tab:hover {
  color: var(--ink);
}

.appbar .tab[aria-current='page'] {
  font-weight: 500;
  color: var(--ink);
  background: none;
  box-shadow: none;
  border-bottom-color: var(--accent);
}

.tab-count {
  align-self: flex-start;
  margin-top: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
}

.tab-count:empty {
  display: none;
}

.appbar-actions {
  margin-left: auto;
  gap: 12px;
}

body:has(#gate:not([hidden])) .appbar-actions {
  margin-left: 0;
}

.head-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
  margin: 0;
}

.head-search .search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.head-search input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 34px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.head-search .search-hint {
  position: absolute;
  right: 10px;
  padding: 0 6px;
  font: 500 11px/18px var(--ui);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
}

.theme-button {
  height: 34px;
  padding: 0 13px;
  font: 500 12.5px var(--ui);
  color: var(--ink2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.theme-button:hover {
  color: var(--ink);
  background: var(--sunk);
}

.account-button {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.account-button .avatar.small {
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------------------------------------------------------------------------
   Page frame.
   --------------------------------------------------------------------------- */

.page {
  max-width: 1320px;
  padding: 40px 40px 80px;
}

#gate,
#welcome,
#paywall,
#profile,
.footer {
  max-width: none;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.page-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-count {
  color: var(--muted);
}

.page-head .meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.section-title {
  margin: 0 0 16px;
  padding-bottom: 14px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 80px;
  padding: 24px 0 0;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.footer p {
  margin: 0;
}

.notice {
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Landing: hero with the sign-in pill, then how it works, why, pricing + FAQ.
   --------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px 64px;
  padding: 40px 0 72px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.hero-copy {
  flex: 1 1 520px;
  min-width: 0;
}

.hero h1 {
  max-width: 13em;
  margin: 18px 0 24px;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}

.hero .lede {
  max-width: 30em;
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink2);
}

.pill-form {
  display: flex;
  align-items: center;
  max-width: 480px;
  padding: 5px 5px 5px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pill-form:focus-within {
  border-color: var(--accent);
}

.pill-form label {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.pill-form input {
  width: 100%;
  height: 40px;
  padding: 0;
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
}

.pill-form .primary {
  flex: none;
  min-height: 44px;
  padding: 0 20px;
  font-weight: 600;
}

.hero-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.hero-note .tour-link {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.hero .meta {
  margin-top: 6px;
  font-size: 13px;
}

.hero .notice {
  max-width: 480px;
  margin: 14px 0 0;
}

.hero-aside {
  flex: 1 1 360px;
  max-width: 460px;
}

.hero-aside-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}

.sample-job {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.sample-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line2);
}

.sample-score {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
}

.sample-score small {
  font-size: 12px;
}

.sample-head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.sample-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.sample-head p {
  margin: 0;
  font-size: 13.5px;
}

.sample-job .chips {
  margin: 16px 0;
}

.sample-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  font-size: 13.5px;
  border-top: 1px solid var(--line2);
}

.hero-aside .hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.welcome {
  margin: 0;
}

.welcome-block {
  margin: 0;
  padding: 120px 0 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 64px;
}

.welcome > .welcome-block:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 48px;
  padding-bottom: 120px;
}

.welcome-block h2,
.welcome-cta h2 {
  margin: 10px 0 40px;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.welcome > .welcome-block:first-child .eyebrow,
.welcome > .welcome-block:first-child h2 {
  grid-column: 1;
}

.welcome > .welcome-block:first-child .eyebrow {
  align-self: end;
}

.welcome .steps {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.welcome .steps li {
  padding: 0;
  background: none;
  border: 0;
}

.welcome .step-num {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  font: 400 13px var(--ui);
  color: var(--muted);
  background: none;
  border: 0;
}

.welcome .step-num::before {
  content: '0';
}

.welcome h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 500;
}

.welcome p {
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
}

.welcome .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 48px;
  margin-bottom: 120px;
  border-top: 1px solid var(--line);
}

.welcome .feature {
  padding: 28px 0 32px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.welcome .feature svg {
  display: none;
}

.welcome-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  padding: 120px 0;
  border-top: 1px solid var(--line);
}

.welcome-pair .welcome-block {
  flex: 1 1 420px;
  min-width: 0;
  padding: 0;
  border: 0;
}

.welcome .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.welcome .plan {
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.welcome .plan.featured {
  background: var(--sunk);
  border-color: transparent;
}

.welcome .plan h3 {
  font-size: 13px;
  color: var(--muted);
}

.welcome .plan-price {
  margin: 4px 0 8px;
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.welcome .faq {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.welcome .faq details {
  padding: 18px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.welcome .faq summary {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.welcome .faq summary::-webkit-details-marker {
  display: none;
}

.welcome .faq summary::after {
  content: '+';
  color: var(--muted);
}

.welcome .faq details[open] summary::after {
  content: '–';
}

.welcome .faq p {
  margin-top: 10px;
}

.welcome-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 120px 0 40px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.welcome-cta h2 {
  margin: 0;
  font-size: 40px;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Jobs: filter row, row list, sticky detail panel.
   --------------------------------------------------------------------------- */

.today {
  margin-top: 24px;
}

.today-stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.today-stat:hover {
  border-color: var(--ink2);
}

.today-stat b {
  font-size: 24px;
  font-weight: 500;
}

.today-stat em {
  font: 400 12.5px var(--ui);
  color: var(--muted);
}

#controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 24px 0 0;
  padding: 0 0 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

#controls .chip-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#controls .chip-group > .eyebrow {
  display: none;
}

#controls .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Role type as a segmented control. */
#kind-chips {
  gap: 0;
  padding: 3px;
  background: var(--sunk);
  border-radius: 999px;
}

#kind-chips .chip {
  min-height: 30px;
  border: 0;
  background: none;
  color: var(--muted);
}

#kind-chips .chip[aria-pressed='true'] {
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}

#controls .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

#controls .filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

#controls .filters .eyebrow {
  font-size: 13.5px;
  color: var(--muted);
}

#controls .filters select {
  min-height: 32px;
  padding: 0 26px 0 2px;
  font-size: 13.5px;
  font-weight: 500;
  border: 0;
  background-color: transparent;
}

.summary {
  margin: 18px 0 10px;
}

.summary #count {
  font-size: 13px;
  color: var(--muted);
}

.toggle {
  border-radius: 999px;
}

.split {
  gap: 32px;
}

.list {
  gap: 0;
}

#list > .card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    'logo title side'
    'logo chips side'
    'logo badge side';
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0;
  padding: 16px 16px 16px 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  box-shadow: none;
  animation: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
}

#list > .card:hover {
  background: var(--sunk);
}

#list > .card.selected {
  background: var(--sunk);
  box-shadow: inset 2px 0 0 var(--accent);
}

#list > .card.best {
  box-shadow: inset 4px 0 0 var(--accent);
}

#list > .card .card-head,
#list > .card .card-foot {
  display: contents;
}

#list > .card .monogram {
  grid-area: logo;
  align-self: start;
  width: 40px;
  height: 40px;
  font: 500 12px var(--ui);
  color: var(--ink2);
  background: var(--sunk);
  border-radius: 10px;
}

#list > .card .card-title {
  grid-area: title;
  min-width: 0;
}

#list > .card .role {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

#list > .card .role .open {
  font: inherit;
  color: var(--ink);
}

#list > .card .firm {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

#list > .card .chips {
  grid-area: chips;
  margin: 2px 0 0;
}

#list > .card .match-badge {
  grid-area: badge;
  margin: 2px 0 0;
  padding: 0;
  font: 500 12.5px var(--ui);
  color: var(--accent);
  background: none;
}

#list > .card .save {
  grid-area: side;
  align-self: start;
  justify-self: end;
}

#list > .card .dates {
  grid-area: side;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  font: 400 12.5px var(--ui);
  color: var(--muted);
  text-align: right;
}

#list > .card .dates .score {
  order: -1;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

#list > .card.best .dates .score {
  color: var(--accent);
}

#list > .card .apply {
  display: none;
}

.chips li {
  font: 500 11.5px/1 var(--ui);
  padding: 5px 8px;
  color: var(--ink2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.chips li.pay {
  color: var(--ink2);
  background: none;
}

.chips li.kind {
  color: var(--ink);
  background: var(--sunk);
  border-color: transparent;
}

.new-tag {
  color: var(--accent);
  background: none;
  padding: 0;
  font-weight: 500;
}

.monogram {
  font-family: var(--ui);
  font-weight: 500;
  color: var(--ink2);
  background: var(--sunk);
  border-radius: 10px;
}

.more {
  margin: 20px auto 0;
  border-radius: 999px;
}

#job-panel.panel-sheet {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

#job-panel .sheet-head h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

#job-panel .facts {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

#job-panel .fact {
  padding: 10px 12px;
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

#job-panel .fact:last-child {
  border-right: 0;
}

#job-panel .fact dt {
  font: 400 12.5px var(--ui);
  color: var(--muted);
}

#job-panel .fact dd {
  font-size: 14px;
  font-weight: 500;
}

#job-panel #jp-why-wrap {
  padding: 18px;
  background: var(--tint);
  border-radius: 12px;
}

#job-panel .sheet-h {
  font: 500 13px var(--ui);
  color: var(--muted);
}

#jp-why-wrap .sheet-h {
  color: var(--accent);
}

#job-panel .sheet-actions .primary {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Section headers and tool chips (Markets, Property, Career, News, Events).
   --------------------------------------------------------------------------- */

#markets-view > form.controls,
#property-view > form.controls,
#career-view > form.controls,
#news-view > form.controls,
#events-view > form.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin: 0;
  padding: 0 0 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.market-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 100%;
}

.market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.market-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.market-blurb {
  font-size: 14px;
  color: var(--ink2);
}

.market-table th,
.market-table td {
  border-color: var(--line2);
}

.market-table thead th {
  font: 500 13px var(--ui);
  color: var(--muted);
}

.market-table .city-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.market-table .bar i,
.bar i {
  background: var(--accent);
}

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

/* Tracker */
.tracker-top h2,
#tracker-view h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Events */
.events-layout {
  gap: 32px;
}

/* News */
.news-list .card {
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  padding-inline: 0;
}

/* ---------------------------------------------------------------------------
   Profile: a side column and the form.
   --------------------------------------------------------------------------- */

#profile.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 48px;
  padding: 0;
  background: none;
  border: 0;
}

.profile-side {
  flex: 1 1 280px;
  max-width: 340px;
}

.profile-main {
  flex: 1 1 560px;
  min-width: 0;
}

.profile-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.profile-head .avatar.large {
  width: 96px;
  height: 96px;
  font-size: 34px;
  color: var(--on-accent);
  background: var(--accent);
}

.profile-head h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}

.profile-head .close {
  order: -1;
}

.profile-head .badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--accent);
  background: var(--tint);
  border-radius: 6px;
}

.prof-progress.card {
  padding: 20px 0;
  border: 0;
  border-radius: 0;
}

.profile-side-actions {
  display: flex;
  gap: 18px;
  font-size: 14px;
}

.profile-side-actions .link {
  font-size: 14px;
}

.profile-main .uploads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}

.profile-main .upload,
.profile-main .skill-gaps {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
}

.profile-main .skill-gaps {
  margin-bottom: 48px;
}

.profile-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 16px;
  margin-top: 40px;
}

.profile-form > .section-title,
.profile-form > fieldset,
.profile-form > .actions,
.profile-form > .notice,
.profile-form > .check {
  grid-column: 1 / -1;
}

.profile-form input,
.profile-form select {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.profile-form fieldset.alerts > legend {
  float: left;
  width: 100%;
  margin: 24px 0 12px;
  padding-bottom: 14px;
  font: 500 30px/1.15 var(--ui);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.profile-form fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

input.switch:checked {
  background: var(--accent);
}

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

@media (max-width: 1100px) {
  .head-search {
    width: 180px;
  }

  .appbar .tabs {
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .appbar-inner {
    padding: 0 20px;
    gap: 16px;
  }

  .page {
    padding: 28px 20px 72px;
  }

  .head-search,
  .landing-nav {
    display: none !important;
  }

  .welcome > .welcome-block:first-child {
    grid-template-columns: 1fr;
  }

  .welcome .steps {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .appbar-inner {
    height: 56px;
    padding: 0 16px;
  }

  .brand-name {
    font-size: 24px;
  }

  .page {
    padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .appbar .tabs {
    gap: 0;
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow-x: auto;
  }

  .appbar .tab {
    flex: 1 0 auto;
    justify-content: center;
    min-height: 56px;
    padding: 0 8px;
    font-size: 12.5px;
    margin: 0;
    border-bottom: 0;
    border-top: 2px solid transparent;
  }

  .appbar .tab[aria-current='page'] {
    color: var(--ink);
    border-top-color: var(--accent);
  }

  .tab-count {
    display: none;
  }

  .page-title {
    font-size: 32px;
  }

  .hero {
    padding-top: 16px;
  }

  .hero .lede {
    font-size: 17px;
  }

  .pill-form {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border-radius: 24px;
  }

  .pill-form label {
    padding: 0 12px;
  }

  .welcome-block,
  .welcome-pair,
  .welcome-cta {
    padding-top: 64px;
  }

  .welcome > .welcome-block:first-child {
    padding-bottom: 64px;
  }

  .welcome .features {
    margin-bottom: 64px;
  }

  .welcome-pair {
    padding-bottom: 64px;
  }

  .welcome-block h2,
  .welcome-cta h2 {
    font-size: 30px;
  }

  #controls .filters {
    margin-left: 0;
    width: 100%;
  }

  #list > .card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-inline: 4px;
  }

  #list > .card .monogram {
    width: 36px;
    height: 36px;
  }
}

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

@media (min-width: 1024px) {
  #job-panel.panel-sheet[open]:not(:modal) {
    flex: 0 1 440px;
    min-width: 360px;
    top: 88px;
    border-radius: 12px;
    box-shadow: none;
  }
}

#controls .filters label {
  flex: 0 0 auto;
  flex-direction: row;
}

#controls .chip-group:has(#kind-chips) {
  order: -2;
}

#controls .chip-group:has(#city-chips) {
  order: -1;
}

#controls .filters select {
  width: auto;
  max-width: 180px;
}

#job-panel .facts {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

#job-panel .fact dd {
  overflow-wrap: normal;
  hyphens: auto;
}

.page-title.section-head {
  margin: 0 0 24px;
}

.market-tools .chip[aria-current='page'],
nav.market-tools a.chip[aria-current='page'] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Development map v2 (devmap.js): project list | map with floating filters,
   a filings chart and a project panel.
   --------------------------------------------------------------------------- */

.dev-card.devx {
  padding: 0;
  margin: 24px 0;
  overflow: hidden;
}

.devx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--line2);
}

.devx-crumbs {
  display: flex;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--muted);
}

.devx-crumbs span:last-child {
  color: var(--ink2);
}

.devx-title {
  margin: 0;
  font-size: clamp(22px, 3vh, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.devx-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.devx-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.devx-head-actions .follow-wrap {
  margin: 0;
}

.devx-body {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: clamp(560px, calc(100vh - 64px - 96px), 920px);
  height: clamp(560px, calc(100dvh - 64px - 96px), 920px);
}

.devx-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
}

.devx-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px 20px 0;
}

.devx-search .search-icon {
  position: absolute;
  left: 14px;
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.devx-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.devx-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 20px 0;
}

.devx-total,
.devx-pinned {
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
}

.devx-total b {
  margin-right: 4px;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.devx-pinned {
  font-size: 13px;
  color: var(--muted);
}

.devx-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin: 12px 20px 0;
  overflow: hidden;
  background: var(--sunk);
  border-radius: 999px;
}

.devx-bar i {
  flex: 1 1 0;
  min-width: 2px;
}

.devx-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 10px 20px 0;
  padding: 0 0 14px;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.devx-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 4px;
  font: 400 13.5px var(--ui);
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.devx-legend-item:hover {
  background: var(--sunk);
}

.devx-legend-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.devx-legend-count {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.devx-legend-item[aria-pressed='false'] {
  color: var(--muted);
  text-decoration: line-through;
}

.devx-legend-item[aria-pressed='false'] .devx-badge {
  opacity: 0.25;
}

.devx-cat {
  --glyph: #ffffff;
  background: var(--cat, #9b958d);
  color: var(--glyph);
}

.devx-glyph-dark {
  --glyph: #1b1917;
}

/* Category badge: the legend, the list and the panel. */
.devx-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.12);
}

.devx-badge svg {
  width: 14px;
  height: 14px;
}

.devx-badge.approx {
  background: color-mix(in srgb, var(--cat) 60%, var(--surface));
  outline: 1.5px dashed var(--ink);
  outline-offset: 1px;
  box-shadow: none;
}

.devx-panel-cat .devx-badge {
  width: 18px;
  height: 18px;
}

.devx-panel-cat .devx-badge svg {
  width: 11px;
  height: 11px;
}

/* Map pins (Halo): a dark disc with a ring and glyph in the category color. */
.devx-pin-icon,
.devx-speck-icon {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
}

.devx-pill-icon {
  display: block;
  border-radius: 999px;
}

.devx-pin-icon:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -2px;
}

.devx-pin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: color-mix(in srgb, var(--cat) 82%, #ffffff);
  background: radial-gradient(circle, color-mix(in srgb, var(--cat) 22%, #16140f) 0%, #16140f 75%);
  border: 2px solid var(--cat);
  border-radius: 50%;
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.45);
  transition: transform 0.12s ease;
}

.devx-pin svg {
  width: 16px;
  height: 16px;
}

/* Approximate: a dashed, paler ring, so it never reads as an exact site. */
.devx-pin.approx {
  color: color-mix(in srgb, var(--cat) 55%, #ffffff);
  border: 2px dashed color-mix(in srgb, var(--cat) 60%, #ffffff);
}

.devx-pin-icon.lit .devx-pin {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #16140f, 0 0 0 4px var(--cat), 0 2px 8px oklch(0 0 0 / 0.5);
}

.devx-pin-icon.chosen .devx-pin {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px #16140f, 0 0 0 6px var(--accent), 0 3px 10px oklch(0 0 0 / 0.55);
}

/* Price pills: the Halo disc and the filed cost, with a small tail onto the spot. */
.devx-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 2px 11px 2px 2px;
  font: 600 12.5px var(--ui);
  color: #f3efe8;
  white-space: nowrap;
  background: #16140f;
  border: 1.5px solid var(--cat);
  border-radius: 999px;
  box-shadow: 0 2px 7px oklch(0 0 0 / 0.45);
  transition: transform 0.12s ease;
  transform-origin: 15px 100%;
}

.devx-pill::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -6px;
  width: 8px;
  height: 8px;
  background: #16140f;
  border-right: 1.5px solid var(--cat);
  border-bottom: 1.5px solid var(--cat);
  transform: rotate(45deg);
}

.devx-pill .devx-pin {
  width: 24px;
  height: 24px;
  border-width: 1.5px;
  box-shadow: none;
}

.devx-pill .devx-pin svg {
  width: 13px;
  height: 13px;
}

.devx-pill.approx {
  border-style: dashed;
}

.devx-pill-icon.lit .devx-pill {
  transform: scale(1.08);
  background: #2a2620;
}

.devx-pill-icon.chosen .devx-pill {
  color: #16140f;
  background: #f3efe8;
  box-shadow: 0 0 0 3px var(--accent), 0 3px 10px oklch(0 0 0 / 0.55);
}

.devx-pill-icon.chosen .devx-pill::after {
  background: #f3efe8;
}

.devx-pill-icon.lit .devx-pin,
.devx-pill-icon.chosen .devx-pin {
  transform: none;
  box-shadow: none;
}

/* Specks: projects waiting for room to show their pill. */
.devx-speck {
  width: 7px;
  height: 7px;
  background: var(--cat);
  border-radius: 50%;
  opacity: 0.75;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.5);
}

.devx-speck.approx {
  background: none;
  border: 1.5px dashed var(--cat);
}

.devx-speck-icon.lit .devx-speck {
  opacity: 1;
  transform: scale(1.8);
}

/* Night basemap: OpenStreetMap tiles darkened in the browser, no extra tile service. */
.devx .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.6);
}

.devx .leaflet-container {
  background: #16140f;
}

.devx .leaflet-overlay-pane .devx-leader {
  stroke: #1b1917;
  stroke-opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .devx-pin {
    transition: none;
  }
}

/* The pin key under the legend. */
.devx-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 20px;
  padding: 10px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.devx-key-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.devx-key-approx {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.devx-key-pill {
  flex: none;
  padding: 2px 8px;
  font: 600 10.5px var(--ui);
  color: #f3efe8;
  background: #16140f;
  border: 1.5px solid var(--muted);
  border-radius: 999px;
}

.devx-key-approx {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sunk);
  border: 2px dashed var(--ink);
}

.devx-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
}

.devx-list-head .dev-count {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.devx-list-head .dev-count strong {
  font-weight: 500;
  color: var(--ink2);
}

.devx-seg {
  display: flex;
  padding: 3px;
  background: var(--sunk);
  border-radius: 999px;
}

.devx-seg-item {
  padding: 4px 10px;
  font: 400 12.5px var(--ui);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.devx-seg-item[aria-pressed='true'] {
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}

.devx-side .dev-smaller-hint {
  margin: 8px 20px 0;
  text-align: left;
}

.devx-list.dev-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 6px 10px 12px;
  overflow-y: auto;
  list-style: none;
  border: 0;
}

.devx-list .dev-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  /* Rows scrolled out of view skip layout and paint: thousands of them made a filter change miss its frame. */
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

.devx-list .dev-pick {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 10px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.devx-list .dev-pick:hover {
  background: var(--sunk);
}

.devx-list .dev-item.active .dev-pick {
  background: var(--sunk);
  box-shadow: inset 2px 0 0 var(--accent);
}

.devx-list .dev-pick .devx-badge {
  margin-top: 1px;
}

.devx-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.devx-list .dev-name {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}

.devx-list .dev-meta {
  font-size: 13px;
  color: var(--muted);
}

.devx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.devx-tag {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--ink2);
  background: var(--sunk);
  border-radius: 999px;
}

.devx-list .dev-item.active .devx-tag {
  background: var(--bg);
}

.devx-tag.dev-off {
  color: var(--muted);
  background: none;
  border: 1px dashed var(--line);
}

.devx-tag.hiring {
  color: var(--on-tint);
  background: var(--tint);
}

.devx-cost {
  font-size: 13.5px;
  font-weight: 500;
}

.devx-mapwrap {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.devx-mapwrap .dev-map {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.devx .leaflet-container {
  font-family: var(--ui);
  background: var(--sunk);
}

.devx .leaflet-control-zoom {
  margin: 0 16px 16px 0;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-float) !important;
}

.devx .leaflet-control-zoom a {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.devx .leaflet-tooltip {
  padding: 6px 10px;
  font: 500 12.5px/1.4 var(--ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}

.devx .leaflet-tooltip-top::before {
  border-top-color: var(--surface);
}

.devx-pulse {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: devx-pulse 1.6s ease-out infinite;
}

@keyframes devx-pulse {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .devx-pulse {
    animation: none;
    transform: scale(0.8);
  }
}

.devx-filters {
  position: absolute;
  z-index: 500;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.devx-filters > * {
  pointer-events: auto;
}

.devx-mapwrap.panel-open:not(.narrow) .devx-filters {
  right: 412px;
}

.devx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 6px 0 14px;
  font: 500 13.5px var(--ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

.devx-pill.on {
  border-color: var(--ink2);
}

.devx-pill-label {
  font-weight: 400;
  color: var(--muted);
}

.devx-pill select {
  max-width: 190px;
  min-height: 30px;
  padding: 0 24px 0 2px;
  font: 500 13.5px var(--ui);
  color: var(--ink);
  background-color: transparent;
  border: 0;
  border-radius: 999px;
}

.devx-toggle,
.devx-clear {
  padding: 0 14px;
}

.devx-toggle-dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink2);
  border-radius: 50%;
}

.devx-toggle[aria-pressed='true'] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.devx-toggle[aria-pressed='true'] .devx-toggle-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.devx-clear {
  color: var(--accent);
}

.devx-more {
  position: relative;
}

.devx-more-summary {
  padding-right: 14px;
  list-style: none;
}

.devx-more-summary::-webkit-details-marker {
  display: none;
}

.devx-more-summary::after {
  content: '▾';
  font-size: 11px;
  color: var(--muted);
}

.devx-more-badge {
  min-width: 18px;
  font-size: 11px;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.devx-more-badge:empty {
  display: none;
}

.devx-more-body {
  position: absolute;
  top: 42px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}

.devx-more-body .devx-pill {
  box-shadow: none;
}

.devx-chart {
  position: absolute;
  z-index: 500;
  left: 16px;
  bottom: 16px;
  width: calc(100% - 96px);
  max-width: 620px;
  padding: 12px 14px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}

.devx-mapwrap.panel-open:not(.narrow) .devx-chart {
  max-width: min(620px, calc(100% - 440px));
}

.devx-chart-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.devx-chart-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.devx-chart-note {
  font-size: 12.5px;
  color: var(--muted);
}

.devx-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
}

.devx-bar-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.devx-bar-col i {
  width: 100%;
  background: var(--ink2);
  border-radius: 3px 3px 1px 1px;
}

.devx-bar-col:hover i {
  background: var(--ink);
}

.devx-bar-col[aria-pressed='true'] i {
  background: var(--accent);
}

.devx-bar-col.before i {
  background: var(--line);
}

.devx-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.devx-panel {
  position: absolute;
  z-index: 600;
  top: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100% - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  outline: none;
}

.devx-panel[hidden] {
  display: none;
}

.devx-mapwrap.narrow .devx-panel {
  top: 40%;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  max-width: none;
}

.devx-mapwrap.narrow.panel-open .devx-filters,
.devx-mapwrap.narrow.panel-open .devx-chart {
  display: none;
}

.devx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line2);
}

.devx-panel-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--accent);
}

.devx-panel-nav {
  display: flex;
  gap: 6px;
}

.devx-panel-nav .icon-button {
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
}

.devx-panel-body {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  font-size: 14px;
}

.devx-panel-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.devx-panel-address {
  margin: 6px 0 0;
  color: var(--ink2);
}

.devx-panel-note {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.devx-panel-loc {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.devx-panel-loc.warn {
  color: var(--ink2);
}

.devx-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.devx-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--sunk);
  border-radius: 10px;
}

.devx-tile span {
  font-size: 12px;
  color: var(--muted);
}

.devx-tile b {
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.devx-sched {
  margin-bottom: 16px;
}

.devx-sched-top,
.devx-sched-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.devx-sched-top b {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.devx-track {
  height: 6px;
  margin: 8px 0 6px;
  overflow: hidden;
  background: var(--sunk);
  border-radius: 999px;
}

.devx-track i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.devx-hiring {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--sunk);
  border-radius: 12px;
}

.devx-hiring p {
  margin: 0;
}

.devx-hiring-title {
  font-size: 13px;
  color: var(--muted);
}

.devx-hiring-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px !important;
  font-weight: 500;
}

.devx-hiring-note {
  margin-top: 8px !important;
  font-size: 12px;
  color: var(--muted);
}

.devx-scope {
  margin: 0 0 16px;
  color: var(--ink2);
}

.devx-people {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--line2);
}

.devx-people dt,
.devx-people dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line2);
}

.devx-people dt {
  color: var(--muted);
}

.devx-people dd {
  overflow-wrap: anywhere;
}

.devx-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line2);
}

.devx-panel-foot .dev-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.devx-panel-foot .primary,
.devx-panel-foot .secondary {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}

.devx-panel-foot .follow-wrap {
  margin: 0;
}

.devx > .dev-note,
.devx > .dev-reports,
.devx > .dev-bids,
.devx > details,
.devx > section:not(.devx-body) {
  margin-left: 24px;
  margin-right: 24px;
}

.devx > .dev-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}

.devx > :last-child {
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .devx-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .devx-mapwrap {
    order: -1;
    height: 70vh;
    height: 70dvh;
    min-height: 420px;
  }

  .devx-side {
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .devx-list.dev-list {
    max-height: 70vh;
  }

  .devx-head {
    padding: 14px 16px;
  }

  .devx > .dev-note,
  .devx > section:not(.devx-body),
  .devx > details {
    margin-left: 16px;
    margin-right: 16px;
  }
}

@media (max-width: 640px) {
  .devx-filters {
    top: 10px;
    left: 10px;
    right: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .devx-filters .devx-more-body {
    position: fixed;
    top: auto;
    left: 10px;
  }

  .devx-chart {
    left: 10px;
    bottom: 10px;
    width: calc(100% - 70px);
  }

  .devx-cities {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: calc(100vw - 32px);
  }
}

.devx-pill select,
.devx-filters select {
  width: auto;
  flex: none;
}

.devx .devx-list button.dev-pick {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  flex-direction: unset;
}

.devx .devx-list .dev-item.active .dev-name {
  color: var(--ink);
}

.devx .devx-pill select {
  width: auto;
  min-width: 0;
  max-width: 200px;
}

.devx-summary {
  flex-wrap: wrap;
}

.devx-tile b {
  font-size: 15px;
  overflow-wrap: normal;
  hyphens: auto;
}

.devx .dev-pick > * {
  grid-column: auto;
}

.devx .dev-item,
.devx .dev-item.active {
  background: none;
  border-bottom: 0;
}

.devx .dev-pick:hover .dev-name {
  color: var(--ink);
}

.devx .devx-pill select,
#controls .filters select {
  field-sizing: content;
}

/* News, redesign v3: the newest headline leads on the left, the rest list on the right. */
@media (min-width: 960px) {
  #n-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  #n-list > .news-item { grid-column: 2; }
  #n-list > .news-item:first-child { grid-column: 1; grid-row: 1 / span 6; border-bottom: 0; position: sticky; top: 88px; }
  #n-list > .news-item:first-child .news-title { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
}
.news-title { font-weight: 500; }

/* Events, redesign v3: open date numerals instead of boxed tiles. */
.date-block { background: none; border: 0; box-shadow: none; align-items: flex-start; text-align: left; min-width: 72px; padding: 0; }
.date-block > :nth-child(1) { color: var(--accent); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.date-block > :nth-child(2) { font-size: 2.4rem; font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.date-block > :nth-child(3) { font-size: 12px; color: var(--muted); }

/* Profile, redesign v3: the field styling above must not reach switches and checkboxes. */
.profile-form input.switch { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; min-height: 0; padding: 0; flex: none; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line2); }
.profile-form input.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s ease; }
.profile-form input.switch:checked { background: var(--accent); border-color: var(--accent); }
.profile-form input.switch:checked::after { transform: translateX(18px); }
.profile-form input[type='checkbox']:not(.switch), .profile-form input[type='radio'] { width: 16px; height: 16px; min-height: 0; padding: 0; flex: none; }
.profile-form label.check { display: inline-flex; align-items: center; gap: 10px; }
.profile-form input.switch:not(:checked)::after { background: var(--muted); }
.profile-form input.switch:checked::after { background: #fff; }

/* ---------------------------------------------------------------------------
   Development map workspace (#markets&tool=map): the map and project list get
   the viewport under the header; the market tools stay one link away.
   --------------------------------------------------------------------------- */
body[data-workspace='map'] #markets-view > :not(#m-body) {
  display: none;
}

body[data-workspace='map'] .page {
  max-width: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

body[data-workspace='map'] #m-body > .devx {
  margin: 0;
  scroll-margin-top: 72px;
}

body[data-workspace='map'] .devx-head {
  padding: 12px 20px;
}

body[data-workspace='map'] .devx-body {
  height: calc(100vh - 64px - 24px - 76px);
  height: calc(100dvh - 64px - 24px - 76px);
  min-height: 520px;
}

.devx-crumbs a {
  color: var(--muted);
}

.devx-crumbs a:hover {
  color: var(--ink);
}

/* One menu instead of the chip row where the chips would run off the edge. */
.devx-city-menu {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.devx-city-menu select {
  width: auto;
  min-height: 34px;
  padding: 0 28px 0 4px;
  background-color: transparent;
  border: 0;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .devx-head-actions .devx-cities {
    display: none;
  }

  .devx-city-menu {
    display: inline-flex;
  }
}

/* The map's entry card on the market pages. */
.devx-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 20px;
  padding: 24px;
}

.devx-teaser-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.devx-teaser-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.devx-teaser-open {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  text-decoration: none;
}

@media (max-width: 900px) {
  body[data-workspace='map'] .devx-body {
    height: auto;
    min-height: 0;
  }

  /* Phones: the map fills what's left between the header, the title row and the bottom tabs. */
  body[data-workspace='map'] .devx-mapwrap {
    height: calc(100vh - 64px - 12px - 118px);
    height: calc(100dvh - 64px - 12px - 118px);
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  body[data-workspace='map'] .page {
    padding: 8px 0 calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body[data-workspace='map'] #m-body > .devx {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  body[data-workspace='map'] .devx-mapwrap {
    height: calc(100vh - 56px - 8px - 124px - 60px);
    height: calc(100dvh - 56px - 8px - 124px - 60px);
    min-height: 380px;
  }

  body[data-workspace='map'] .devx-title {
    font-size: 20px;
  }

  .devx-chart .devx-bars {
    height: 44px;
  }

  body[data-workspace='map'] .devx-head {
    padding: 10px 16px;
  }

  /* The project panel: a sheet over the lower part of the map with its own scrolling body. */
  .devx-mapwrap.narrow .devx-panel {
    top: 22%;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .devx-panel-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
  }

  .devx-panel-foot {
    padding: 10px 12px;
    gap: 6px;
  }

  .devx-panel-foot .dev-links {
    gap: 6px;
  }

  .devx-panel-foot .primary,
  .devx-panel-foot .secondary {
    min-height: 34px;
    padding: 0 11px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Many metros: the menu replaces the chip row at every width. */
.devx-head-actions.many .devx-cities {
  display: none;
}

.devx-head-actions.many .devx-city-menu {
  display: inline-flex;
}

.devx-mapwrap {
  scroll-margin-top: 64px;
}

/* ---------------------------------------------------------------------------
   Markets overview: the relief map. Every market is a peak on the Texas
   outline, sized by the figure picked above it, over the same contour field as
   the landing page. The ranked list carries that figure's numbers; the table
   under the fold still carries every figure for every market.
   --------------------------------------------------------------------------- */

.market-relief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.relief-sheet {
  overflow: hidden;
}

.relief-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.relief-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.relief-period {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.relief-head .metric-pills {
  margin: 0 0 0 auto;
}

/* The contour canvas is positioned against this box. */
.relief-body {
  position: relative;
  isolation: isolate;
  padding: 14px 18px 18px;
  min-height: 320px;
}

.relief-body > .topo {
  inset: 0;
  width: 100%;
  height: 100%;
}

.relief-map .tx-map {
  max-height: 560px;
}

/* The side-panel map this inherits from is ~210px tall; at 560px the shared
   18px label scales up with the viewBox and reads far too large. */
.relief-map .tx-label {
  font-size: 13px;
  stroke-width: 4px;
}

.relief-key {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 13px;
  font-size: 11.5px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.relief-key b {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 11.5px;
}

.relief-key-dots {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.relief-key-dots span {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.relief-key-dots i {
  display: block;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  border: 1px solid var(--accent);
}

.relief-side {
  display: grid;
  gap: 16px;
}

.relief-ranked {
  overflow: hidden;
}

.relief-ranked-head {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-row + .rank-row {
  border-top: 1px solid var(--line2);
}

.rank-pick {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 46px 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.rank-pick:hover {
  background: var(--sunk);
}

.rank-row.on .rank-pick {
  background: var(--tint);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rank-n {
  font-size: 11.5px;
  color: var(--muted);
}

.rank-city {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A figure repeated from another city's metro: named, and the bar stepped back. */
.rank-same {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.rank-row.shared .rank-bar i {
  opacity: 0.25;
}

.rank-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line2);
  overflow: hidden;
}

.rank-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.55;
}

.rank-row.on .rank-bar i {
  opacity: 1;
}

.rank-value {
  text-align: right;
  font-weight: 600;
}

/* The picked market's panel sits under the ranked list, not beside the table. */
.relief-detail {
  position: static;
  padding: 0;
  background: var(--surface);
  border-color: var(--line);
  overflow: hidden;
}

.relief-detail .market-side-head {
  padding: 18px 18px 14px;
}

.relief-detail .market-side-links {
  padding: 14px 16px;
}

.relief-fold {
  margin-bottom: 24px;
}

/* A city repeating another's metro figure: a ring where it is, not a second peak. */
.tx-pin.shared .tx-dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5px;
}

.tx-pin.shared .tx-halo {
  opacity: 0;
}

/* A market with no figure for the chosen topic still shows where it is. */
.tx-pin.blank .tx-dot,
.tx-pin.blank .tx-halo {
  fill: var(--muted);
  opacity: 0.45;
}

@media (max-width: 1100px) {
  .market-relief {
    grid-template-columns: minmax(0, 1fr);
  }

  .relief-head .metric-pills {
    margin-left: 0;
    width: 100%;
  }

  .relief-body {
    min-height: 0;
  }

  .relief-key {
    position: static;
    margin-top: 12px;
  }
}

/* Ten figure pills stack into ten rows on a phone and push the map off the
   screen, so they scroll sideways instead, as the other chip rows do. */
@media (max-width: 760px) {
  .relief-head {
    display: block;
    padding: 12px 0 12px 16px;
  }

  .relief-caption {
    padding-right: 16px;
  }

  .relief-head .metric-pills {
    flex-wrap: nowrap;
    margin: 10px 0 0;
    padding-bottom: 2px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .relief-head .metric-pills::-webkit-scrollbar {
    display: none;
  }

  .relief-head .chip {
    white-space: nowrap;
  }

  .relief-body {
    padding: 12px 14px 14px;
  }
}

/* The comparison table beside the picked city's panel: still used by the table
   under the relief map's fold. */
.market-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
  margin-bottom: 24px;
}

.market-overview .market-table tr.pickable {
  cursor: pointer;
}

.market-overview .market-table tr.me > * {
  background: var(--tint);
}

.market-pick {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

.market-pick[aria-pressed='true'] {
  color: var(--muted);
  text-decoration: none;
}

.market-side {
  position: sticky;
  top: 84px;
  padding: 24px;
  background: var(--sunk);
  border-color: transparent;
}

.market-side-city {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.market-side-metro {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.market-side .kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--line);
}

.market-side .kpi {
  padding: 14px 12px 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.market-side .kpi:nth-child(odd) {
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.market-side .kpi:nth-child(even) {
  padding-left: 14px;
}

.market-side .kpi b {
  font-size: 24px;
  font-weight: 400;
}

.market-side-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.market-side-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.market-side-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
}

.chart-fold {
  margin: 0 0 24px;
}

.chart-fold-summary {
  cursor: pointer;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 14px;
}

@media (max-width: 1060px) {
  .market-overview {
    grid-template-columns: 1fr;
  }

  .market-side {
    position: static;
    min-width: 0;
  }

  .market-overview > * {
    min-width: 0;
  }
}

/* The panel picker is for keyboards and screen readers; a row's click does the same for a mouse. */
.market-pick:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phones: the market tool chips scroll in one row, and the menus sit two by two. */
@media (max-width: 640px) {
  #market-controls .market-tools,
  #property-controls .market-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }

  #market-controls .market-tools .chip,
  #property-controls .market-tools .chip {
    flex: none;
  }

  #m-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #m-filters label,
  #m-filters select {
    width: 100%;
    min-width: 0;
  }
}

/* Jobs, redesign v3: the day's counts as one compact row of links, so the roles lead. */
.today {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

#today .today-stat,
#today .today-stat.card {
  display: inline-flex;
  flex-direction: row;
  width: auto;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  text-align: left;
}

.today-stat b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.today-stat small {
  font-size: 13px;
  color: var(--ink2);
}

.today-stat em {
  display: none;
}

/* The filter block: type, cities and menus in as few rows as fit. */
#controls {
  gap: 10px 12px;
  padding-bottom: 14px;
}

@media (max-width: 640px) {
  .today {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 12px;
    padding: 0 16px;
  }

  .today-stat {
    flex: none;
  }

  #controls #city-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -16px;
    padding-right: 16px;
  }

  #controls #city-chips .chip {
    flex: none;
  }
}

/* Tracker on phones: the stages stack, each one a full-width list, with an empty stage folded to its heading. */
@media (max-width: 640px) {
  .board {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    overflow: visible;
  }

  .board-col {
    min-height: 0;
    width: auto;
    min-width: 0;
  }

  .board-col:has(.board-empty) .board-empty {
    padding: 6px 8px 8px;
    text-align: left;
  }
}

/* Profile, redesign v3: the picture is changed from the identity block; resume and skill gaps sit side by side. */
.avatar-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 10px;
}

.avatar-upload .file-button.small span {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.avatar-upload .hint {
  margin: 0;
  font-size: 12px;
}

.profile .profile-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.profile .profile-cards > .card {
  margin: 0;
  padding: 20px;
}

.profile .skill-gaps .gap-row {
  grid-template-columns: minmax(90px, auto) 1fr auto;
}

.prof-meter-head {
  white-space: nowrap;
}

/* Property owner lookup, redesign v3: the parcel up top, the owner beside their other parcels, a companion column. */
.owner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

.owner-aside[hidden] {
  display: none;
}

.owner-layout:has(.owner-aside[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.parcel-hero {
  padding: 0;
  overflow: hidden;
}

.parcel-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 24px;
}

.parcel-account {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.parcel-hero .parcel-address {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.parcel-line {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.parcel-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.parcel-value span {
  font-size: 13px;
  color: var(--muted);
}

.parcel-value b {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.parcel-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}

.parcel-tiles > div {
  padding: 14px 24px;
  border-right: 1px solid var(--line);
}

.parcel-tiles > div:last-child {
  border-right: 0;
}

.parcel-tiles dt {
  font-size: 13px;
  color: var(--muted);
}

.parcel-tiles dd {
  margin: 4px 0 0;
  font-size: 17px;
}

.parcel-hero .owner-facts {
  margin: 0;
  padding: 16px 24px 4px;
  border-top: 1px solid var(--line);
}

.parcel-hero > .dev-links {
  padding: 0 24px 18px;
}

.owner-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.owner-pair > .card {
  margin: 0;
}

.owner-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 84px;
}

.owner-side-card {
  padding: 22px;
  background: var(--sunk);
  border-color: transparent;
}

.owner-side-title {
  margin: 6px 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

.owner-side-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0 0 14px;
}

.owner-side-facts dt,
.owner-side-facts dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.owner-side-facts dt {
  color: var(--muted);
}

.owner-side-facts dd {
  text-align: right;
}

.owner-side-list ul {
  margin: 8px 0 10px;
  padding: 0;
  list-style: none;
}

.owner-side-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.owner-side-addr {
  font-size: 14px;
}

.owner-side-meta {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--muted);
}

.owner-side-list li b {
  grid-column: 2;
  grid-row: 1;
  font-weight: 500;
  color: var(--danger, #b4412f);
}

@media (max-width: 1060px) {
  .owner-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-aside {
    position: static;
  }

  .parcel-value {
    align-items: flex-start;
    text-align: left;
  }
}

.owner-main > .owner-results:not(:empty) {
  margin-top: 16px;
}

/* Career interview brief, redesign v3: the brief beside a short title decoder. */
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}

.brief-firm {
  margin: 4px 0 6px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.brief-main > .compare-block:first-child {
  padding-top: 0;
}

.brief-main .compare-block:nth-child(2) li {
  font-size: 18px;
  line-height: 1.45;
}

.brief-decoder {
  position: sticky;
  top: 84px;
  padding: 22px 24px;
}

.brief-decoder-note {
  margin: 4px 0 8px;
  color: var(--ink2);
  font-size: 14px;
}

.brief-decoder-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.brief-decoder-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.brief-decoder-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.brief-decoder-top b {
  font-weight: 500;
}

.brief-decoder-list p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink2);
}

@media (max-width: 1060px) {
  .brief-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .brief-decoder {
    position: static;
  }
}

/* Review pass: phones lead with the newest headline and with event rows, the calendar follows. */
@media (max-width: 959px) {
  #n-list > .news-item:first-child { padding-block: 8px 24px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
  #n-list > .news-item:first-child .news-title { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
}
@media (max-width: 900px) {
  .events-side { order: 1; }
  .events-side .cal { padding: 12px 14px; }
  .events-side .cal-grid { gap: 2px; }
  .events-side .cal-grid > * { min-height: 30px; font-size: 12.5px; }
}

/* Phone map: the button that jumps to search, categories and the project list. */
.devx-to-list { display: none; }
@media (max-width: 900px) {
  .devx-to-list { display: inline-flex; }
  .devx-side { scroll-margin-top: 64px; }
}
@media (max-width: 900px) {
  /* Scrolling to anything stops short of the fixed bottom tabs. */
  html { scroll-padding-bottom: 76px; }
}
@media (max-width: 640px) {
  /* The city chips scroll inside their row; the row never widens the page. */
  #controls .chip-group,
  #controls #city-chips { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
  /* One row of head actions (city, Follow, search & list) that scrolls sideways, so the map's height math holds. */
  body[data-workspace='map'] .devx-head-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    min-width: 0;
  }
  body[data-workspace='map'] .devx-head-actions > * { flex: none; }
}
@media (max-width: 900px) {
  .devx-head-actions .devx-city-menu { order: -2; }
  .devx-head-actions .devx-to-list { order: -1; }
}

/* ---------------------------------------------------------------------------
   UI fixes: button labels, dropdown menus, Jobs rows, Deal of the week notes.
   --------------------------------------------------------------------------- */

/* Pill buttons and pill links center their label both ways and wrap without
   overlapping lines. The Career brief and tour had set them inline-block,
   which dropped an <a>'s label to the top of its 40px pill. */
.primary,
.secondary,
button.primary,
a.primary,
a.secondary {
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
}

#career-view .compare-block .primary,
#career-view .compare-block .secondary {
  display: inline-flex;
  vertical-align: middle;
}

.brief-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

#career-view .brief-actions .primary,
#career-view .brief-actions .secondary {
  margin-top: 0;
  min-height: 44px;
}

/* Native dropdown menus: give each option a solid background and ink in the
   active theme. Options were transparent, so Windows painted the open menu
   white under the dark theme's light text. The OS keeps the keyboard and
   hover highlight, which sets its own readable text color. */
select option,
select optgroup {
  color: var(--ink);
  background-color: var(--bg);
}

select option:checked {
  color: var(--ink);
  background-color: var(--sunk);
}

select option:disabled {
  color: var(--muted);
}

/* Jobs rows: the bookmark gets its own column at the top right, and the
   match score, New, posted date, deadline, flags and source sit in a fixed
   column beside it, so every row lines up the same way whatever it has. */
#list > .card {
  grid-template-columns: 40px minmax(0, 1fr) 9.5rem 32px;
  grid-template-areas:
    'logo title meta save'
    'logo chips meta save'
    'logo badge meta save';
  align-items: start;
}

#list > .card .save {
  grid-area: save;
  align-self: start;
  justify-self: end;
  margin: 0;
}

#list > .card .dates {
  grid-area: meta;
  align-self: start;
  justify-content: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

#list > .card .dates > * {
  max-width: 100%;
}

#list > .card .dates .score {
  line-height: 1.3;
}

/* When the list has match scores, rows without one keep its line, so New and
   the dates sit at the same height on every row. */
#list > .card .dates .score:empty {
  display: block;
  min-height: 1.3em;
}

#list > .card .role,
#list > .card .firm {
  overflow-wrap: anywhere;
}

#list > .card .chips {
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  #list > .card {
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    grid-template-areas:
      'logo title save'
      'logo chips chips'
      'logo badge badge'
      'logo meta meta';
  }

  #list > .card .dates {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 2px;
    margin-top: 4px;
    text-align: left;
  }

  #list > .card .dates .score {
    order: -1;
    font-size: 14px;
  }

  #list > .card .dates .score:empty {
    display: none;
  }
}

/* Deal of the week: what the news reported, apart from the estimates. */
.deal-facts {
  margin: 14px 0 4px;
}

.deal-reported {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 6px 0 8px;
  font-size: 14px;
}

.deal-reported dt {
  color: var(--muted);
}

.deal-reported dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.deal-older-note {
  margin: 8px 0;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--sunk);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
}

.deal-none p {
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------------------
   Landing, A3 · Live: the headline and sign-in on the left, a live panel of
   counts and the Texas map on the right (never postings: signed-out visitors
   get counts only), then how it works, why, pricing and questions as calm
   bands. Motion is live.js startLanding: the headline arrives word by word,
   the panel rises and leans toward the cursor, the bands reveal on scroll.
   --------------------------------------------------------------------------- */

body:has(#gate:not([hidden])) {
  overflow-x: clip;
}

#gate.hero {
  display: grid;
  gap: 48px;
  align-items: center;
  margin: 0;
  padding: 56px 0 64px;
  color: var(--ink);
  background: none;
}

@media (min-width: 1000px) {
  #gate.hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    padding: 32px 0 72px;
  }
}

/* The contour band belonged to the old landing. */
#gate .terrain-topo {
  display: none;
}

#gate .hero-copy {
  min-width: 0;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 5px 12px 5px 10px;
  font-size: 13px;
  color: var(--ink2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.live-pill[hidden] {
  display: none;
}

.live-pill b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.live-pill .pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
}

/* Constant, slow and small: the one thing on the page that says "live". */
.live-pill .pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pos);
  animation: live-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes live-ping {
  75%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

#gate h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#gate .lede {
  max-width: 540px;
  margin: 0 0 28px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink2);
  text-wrap: pretty;
}

#gate .pill-form {
  max-width: 500px;
  background: var(--surface);
  border-color: var(--line);
}

#gate .pill-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

#gate .pill-form input {
  color: var(--ink);
}

#gate .pill-form input::placeholder {
  color: var(--muted);
}

#gate .primary {
  color: var(--on-accent);
  background: var(--accent);
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}

#gate .primary:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  #gate .primary:hover {
    background: var(--accent-hover);
  }
}

#gate .hero-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
}

#gate .hero-note .tour-link {
  color: var(--accent);
}

/* The live panel. */
.hero-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.35);
}

.hero-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 2px;
}

.hero-panel-head b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero-panel-head span,
.hero-panel-foot {
  font-size: 12.5px;
  color: var(--muted);
}

.hero-panel-foot {
  margin: 2px 0 0;
  padding: 4px 12px 8px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hero-panel .bento-box {
  min-width: 0;
  padding: 12px 14px;
  background: var(--sunk);
  border: 0;
  border-radius: 12px;
}

.hero-panel .bento-box[hidden] {
  display: none;
}

.bento-box p {
  margin: 0;
}

.bento-k {
  font-size: 12px;
  color: var(--muted);
}

.bento-v {
  margin-top: 4px !important;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.bento-s {
  margin-top: 2px !important;
  font-size: 12.5px;
  color: var(--muted);
}

.bento-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.bento-list li {
  padding: 4px 10px;
  font-size: 13px;
  color: var(--ink2);
  background: var(--surface);
  border-radius: 999px;
}

.hero-panel .bento-map-box .bento-map .tx-map {
  max-height: 230px;
}

/* Bands under the hero: one quiet style for every section. */
#welcome .welcome-block,
#welcome .welcome-pair,
#welcome .welcome-cta {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

#welcome .welcome-pair .welcome-block {
  padding: 0;
  border: 0;
}

#welcome .welcome-block h2,
#welcome .welcome-cta h2 {
  max-width: 620px;
  margin: 0 0 28px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

#welcome .eyebrow {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--accent);
}

#welcome > .welcome-block:first-child {
  display: block;
}

#welcome .steps,
#welcome .features,
#welcome .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#welcome .steps li,
#welcome .feature,
#welcome .plan {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

#welcome .step-num {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: none;
  border: 0;
}

#welcome .step-num::before {
  content: '0';
}

#welcome h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

#welcome p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink2);
}

#welcome .feature svg {
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#welcome .plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

#welcome .plan-price {
  margin: 6px 0;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

#welcome .faq details {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

#welcome .faq details:last-child {
  border-bottom: 1px solid var(--line);
}

#welcome .faq summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

#welcome .faq summary::after {
  content: '+';
  font-weight: 400;
  color: var(--muted);
  transition: transform 200ms var(--ease-out);
}

#welcome .faq details[open] summary::after {
  transform: rotate(45deg);
}

#welcome .faq details p {
  margin-top: 10px;
  max-width: 680px;
}

#welcome .welcome-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
}

#welcome .welcome-cta h2 {
  margin: 0;
}

/* Landing motion (live.js): first-visit choreography, so delight is allowed here and nowhere else. */
.land-w {
  display: inline-block;
  animation: land-word 800ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

@keyframes land-word {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.35em);
  }
}

.land-in {
  animation: land-in 700ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

@keyframes land-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(14px);
  }
}

.land-panel {
  transform-origin: 50% 100%;
  animation: land-panel 900ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}

@keyframes land-panel {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(24px) scale(0.96);
  }
}

/* Scroll reveals are transitions, so scrolling quickly past retargets instead of restarting. */
.land-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out, transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.land-rv.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  #gate.hero {
    padding: 32px 0 40px;
  }

  .hero-stats .bento-v {
    font-size: 22px;
  }

  #welcome .welcome-block,
  #welcome .welcome-pair,
  #welcome .welcome-cta {
    padding: 40px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .land-w,
  .land-in,
  .land-panel {
    animation: land-fade 300ms ease both;
    filter: none;
  }

  @keyframes land-fade {
    from {
      opacity: 0;
    }
  }

  .land-rv {
    transform: none;
    transition: opacity 300ms ease;
  }

  .live-pill .pulse::after {
    animation: none;
  }
}

.brand-mark {
  position: relative;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
}

.brand-mark::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--on-accent);
  border-top-width: 4px;
  border-radius: 2px;
}

.brand {
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Signed in, A3 · Live: calm surfaces instead of the contour band and cursor
   light. A frosted app bar, bordered cards that only change their border on
   hover, and a quick press on everything you can click. Motion lives in what
   changes (the tab underline, toasts, counts, the maps), not in decoration.
   --------------------------------------------------------------------------- */

#main {
  position: relative;
  isolation: isolate;
}

/* The contour band and the cursor light belonged to the night console. */
.app-topo,
#main::before {
  display: none;
}

/* Frosted bar on wide screens. Phones keep a solid bar: a backdrop filter would trap the fixed bottom tabs inside it. */
@media (min-width: 641px) {
  .appbar {
    background: color-mix(in oklch, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  /* Not over the full-screen dev map: blurring a map that repaints on every filter change costs frames there. */
  body[data-workspace='map'] .appbar {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.page-title,
.section-title {
  font-weight: 600;
  letter-spacing: -0.03em;
}

.page-count,
.tab-count,
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* Postings as bordered cards (they were divided rows): the open one gets an accent ring, best matches keep their badge. */
#list.list {
  gap: 8px;
}

#list > .card {
  padding: 14px 16px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

#list > .card.selected,
#list > .card.best.selected {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

#list > .card.best {
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  #list > .card:hover:not(.selected) {
    background: var(--surface);
    border-color: color-mix(in oklch, var(--ink) 24%, transparent);
  }
}

/* A quick press on anything clickable: the page heard you. */
.primary,
.secondary,
.chip,
.tab,
.card .save,
.more,
.devx-seg-item,
.icon-button {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.primary:active,
.secondary:active,
.chip:active,
.card .save:active,
.more:active,
.devx-seg-item:active,
.icon-button:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .primary:active,
  .secondary:active,
  .chip:active,
  .card .save:active,
  .more:active,
  .devx-seg-item:active,
  .icon-button:active {
    transform: none;
  }
}

/* Events: the date column. The news-list rule above takes a card's side padding away, which put the month,
   day and weekday against the card's left border (and the 64px column was narrower than the 72px block).
   Give the column room for its widest date and keep side padding on every screen size and zoom. */
#e-list .event-card {
  grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr) auto;
  padding-inline: 16px;
}

#e-list .date-block {
  min-width: 4.5rem;
  padding-inline: 4px 0;
  overflow: visible;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #e-list .event-card {
    grid-template-columns: minmax(3.75rem, max-content) minmax(0, 1fr);
    padding-inline: 12px;
  }

  #e-list .date-block {
    min-width: 3.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Development map, map-first (concept B): the map is the page, and the project
   dock, filters, filings timeline and project card float over it on glass.
   --------------------------------------------------------------------------- */
body[data-workspace='map'] .page:has(.devx.mapfirst) {
  padding: 0;
}

.devx.mapfirst {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The title row stays for screen readers and links; the dock says where you are. */
.devx.mapfirst .devx-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.devx.mapfirst .devx-body,
body[data-workspace='map'] .devx.mapfirst .devx-body {
  display: block;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  min-height: 560px;
}

.devx.mapfirst .devx-mapwrap {
  height: 100%;
  overflow: hidden;
}

.devx-glass {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

/* Left dock: place, total, search, categories, results. */
.devx.mapfirst .devx-side {
  position: absolute;
  z-index: 600;
  top: 16px;
  left: 16px;
  bottom: 136px;
  width: 360px;
  border-right: 1px solid var(--line);
  transition: transform 260ms var(--ease-out);
}

.devx.mapfirst .devx-side.folded {
  transform: translateX(calc(-100% + 56px));
}

.devx-dock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 0 18px;
}

.devx-dock-titles {
  min-width: 0;
}

.devx-place {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.devx-place b {
  font-weight: 500;
  color: var(--ink);
}

.devx-place-pick.devx-city-menu {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
}

.devx-place-pick select {
  min-height: 0;
  padding: 0 18px 0 2px;
  font-weight: 500;
  color: var(--ink);
  background-position: right 2px center;
}

.devx-big {
  margin: 2px 0 0;
  font: 500 40px/1 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.devx-big-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.devx-big-sub b {
  font-weight: 500;
  color: var(--ink);
}

.devx-fold {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  background: var(--sunk);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

.devx-fold:active {
  transform: scale(0.92);
}

.devx-fold svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 260ms var(--ease-in-out);
}

.devx-side.folded .devx-fold svg {
  transform: rotate(180deg);
}

.devx.mapfirst .devx-search {
  margin: 14px 16px 0;
}

.devx.mapfirst .devx-search input {
  background: var(--sunk);
  border-color: transparent;
  border-radius: 12px;
}

.devx.mapfirst .devx-search input:focus {
  border-color: var(--accent);
  outline: none;
}

/* Categories as chips: click one to hide or show it. */
.devx.mapfirst .devx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 16px 0;
  padding: 0;
  border: 0;
}

.devx.mapfirst .devx-legend-item {
  width: auto;
  height: 30px;
  padding: 0 10px 0 4px;
  gap: 6px;
  font-size: 12.5px;
  background: var(--sunk);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}

.devx.mapfirst .devx-legend-item:active {
  transform: scale(0.96);
}

.devx.mapfirst .devx-legend-item .dev-cat-badge,
.devx.mapfirst .devx-legend-item > :first-child {
  transform: scale(0.82);
}

.devx.mapfirst .devx-legend-label {
  flex: none;
  white-space: nowrap;
}

.devx.mapfirst .devx-legend-count {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
}

.devx.mapfirst .devx-legend-item[aria-pressed='false'] {
  text-decoration: none;
  background: transparent;
  border-color: var(--line);
}

.devx.mapfirst .devx-legend-item[aria-pressed='false'] > :first-child {
  opacity: 0.3;
}

.devx.mapfirst .devx-list-head {
  margin: 14px 18px 4px;
  padding: 0;
  border: 0;
}

.devx.mapfirst .devx-list {
  padding: 0 8px 10px;
}

.devx.mapfirst .dev-item {
  border-radius: 12px;
}

/* Top right: the filters as one glass bar. */
.devx.mapfirst .devx-filters.devx-glass {
  left: auto;
  right: 16px;
  max-width: calc(100% - 410px);
  padding: 4px;
  justify-content: flex-end;
  pointer-events: auto;
}

.devx.mapfirst .devx-mapwrap.panel-open:not(.narrow) .devx-filters {
  right: 16px;
}

.devx.mapfirst .devx-filters .devx-pill {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Bottom: the filings timeline across the map. */
.devx.mapfirst .devx-chart.devx-glass,
.devx.mapfirst .devx-mapwrap.panel-open:not(.narrow) .devx-chart {
  left: 16px;
  right: 72px;
  bottom: 16px;
  width: auto;
  max-width: none;
  padding: 12px 16px 10px;
}

/* The project card: glass, under the filters on the right. */
.devx.mapfirst .devx-panel {
  top: 72px;
  bottom: 136px;
  width: 360px;
}

.devx.mapfirst .devx-mapwrap .leaflet-bottom.leaflet-right {
  bottom: 0;
}

/* Phones and narrow windows: the dock becomes a bottom sheet that peeks. */
.devx.mapfirst .devx-mapwrap.narrow .devx-side {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 86%;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  transform: translateY(calc(100% - var(--peek, 196px)));
  transition: transform 320ms var(--ease-drawer, ease);
}

.devx.mapfirst .devx-mapwrap.narrow .devx-side.up {
  transform: translateY(0);
}

.devx.mapfirst .devx-mapwrap.narrow .devx-side::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  background: var(--line);
  border-radius: 999px;
}

.devx.mapfirst .devx-mapwrap.narrow .devx-dock-head {
  padding-top: 20px;
}

.devx.mapfirst .devx-mapwrap.narrow .devx-big {
  font-size: 32px;
}

.devx.mapfirst .devx-mapwrap.narrow .devx-fold svg {
  transform: rotate(90deg);
}

.devx.mapfirst .devx-mapwrap.narrow .devx-side.up .devx-fold svg {
  transform: rotate(-90deg);
}

.devx.mapfirst .devx-mapwrap.narrow .devx-filters.devx-glass {
  top: 10px;
  left: 10px;
  right: 10px;
  max-width: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.devx.mapfirst .devx-mapwrap.narrow .leaflet-control-zoom {
  display: none;
}

/* In the sheet the timeline is a plain block above the list. */
.devx.mapfirst .devx-side > .devx-chart {
  position: static;
  width: auto;
  max-width: none;
  margin: 14px 16px 0;
  padding: 10px 12px 8px;
  background: var(--sunk);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.devx.mapfirst .devx-mapwrap.narrow .devx-panel {
  top: auto;
  left: 10px;
  right: 10px;
  bottom: calc(var(--peek, 196px) + 10px);
  width: auto;
  max-height: calc(100% - var(--peek, 196px) - 72px);
}

@media (max-width: 900px) {
  .devx.mapfirst .devx-body,
  body[data-workspace='map'] .devx.mapfirst .devx-body {
    height: auto;
    min-height: 0;
  }

  body[data-workspace='map'] .devx.mapfirst .devx-mapwrap {
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .devx.mapfirst .devx-side {
    transition: none;
  }
}

.devx-filters .devx-pill::after {
  display: none;
}

.devx-bar-col i.stacked {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: none;
  border-radius: 3px 3px 0 0;
}

.devx-bar-col i.stacked span {
  display: block;
  flex: 1 1 0;
  min-height: 1px;
}

/* ---------------------------------------------------------------------------
   Live (live.js and friends): the tab underline that slides, toasts with
   Undo, the Texas map, the "new roles" button and the dev map time-lapse.
   --------------------------------------------------------------------------- */

/* One underline slides between tabs; the open tab's own underline steps aside. */
@media (min-width: 641px) {
  .appbar .tabs.sliding {
    position: relative;
  }
}

.appbar .tabs.sliding .tab[aria-current='page'] {
  border-bottom-color: transparent;
}

.tab-slider {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  transition: transform 260ms var(--ease-in-out), width 260ms var(--ease-in-out), opacity 150ms ease;
}

@media (max-width: 640px) {
  .appbar .tabs.sliding .tab[aria-current='page'] {
    border-top-color: transparent;
  }

  .tab-slider {
    top: 0;
    bottom: auto;
  }
}

/* Toasts rise from the bottom edge and leave the same way, faster than they came. */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.4s var(--ease-out);
}

.toast.leaving {
  opacity: 0;
  transform: translate(-50%, 100%);
  transition: transform 0.2s var(--ease-out), opacity 0.2s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
}

.toast-undo {
  margin: -4px -8px -4px 0;
  padding: 4px 10px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}

.toast-undo:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .toast-undo:hover {
    background: color-mix(in srgb, var(--bg) 18%, transparent);
  }
}

/* The Texas map: the outline draws itself, then the dots arrive one after another. */
.tx-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tx-land {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tx-draw 1400ms var(--ease-in-out) 200ms forwards, tx-fill 700ms ease 1100ms backwards;
}

@keyframes tx-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes tx-fill {
  from {
    fill-opacity: 0;
  }
}

.tx-dot,
.tx-halo,
.tx-ripple {
  transform-box: fill-box;
  transform-origin: center;
}

.tx-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1.5;
  animation: tx-pin-in 500ms var(--ease-out) backwards;
  animation-delay: calc(1000ms + var(--i, 0) * 70ms);
  transition: transform 200ms var(--ease-out);
}

.tx-halo {
  fill: var(--accent);
  opacity: 0.14;
  animation: tx-pin-in 600ms var(--ease-out) backwards;
  animation-delay: calc(1050ms + var(--i, 0) * 70ms);
}

@keyframes tx-pin-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

.tx-label {
  font: 600 18px var(--ui);
  fill: var(--ink2);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 5px;
  stroke-linejoin: round;
  animation: tx-label-in 400ms ease backwards;
  animation-delay: calc(1200ms + var(--i, 0) * 70ms);
}

.tx-n {
  font-weight: 500;
  fill: var(--muted);
}

@keyframes tx-label-in {
  from {
    opacity: 0;
  }
}

.tx-map.settled .tx-land {
  stroke-dashoffset: 0;
  animation: none;
}

.tx-map.settled .tx-dot,
.tx-map.settled .tx-halo,
.tx-map.settled .tx-label {
  animation: none;
}

.tx-pin[role='button'] {
  cursor: pointer;
  outline: none;
}

.tx-pin[role='button']:focus-visible .tx-dot {
  stroke: var(--ink);
  stroke-width: 2.5;
}

@media (hover: hover) and (pointer: fine) {
  .tx-pin[role='button']:hover .tx-dot {
    transform: scale(1.25);
  }
}

.tx-ring {
  pointer-events: none;
  transition: transform 450ms var(--ease-in-out);
}

.tx-ring circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.tx-ripple {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.bento-map {
  margin: 8px 0 4px;
}

.bento-map .tx-map,
.market-map .tx-map {
  max-height: 210px;
}

.market-map {
  margin: 4px 0 14px;
}

/* New roles wait under the header instead of pushing the list down. */
/* At rest it sits in the row above the list (the negative margin); scrolled, it rides under the header. */
.new-roles-wrap {
  position: sticky;
  top: 118px;
  z-index: 30;
  display: flex;
  justify-content: center;
  height: 0;
}

.new-roles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-top: -46px;
  padding: 0 14px;
  font: 600 13.5px var(--ui);
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition: transform 300ms var(--ease-out), opacity 300ms ease;
}

@starting-style {
  .new-roles {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

.new-roles[hidden] {
  display: none;
}

/* Wide screens: centered over the list column, not the list and the posting beside it (the split is 1 : 1.25 with a 32px gap). */
@media (min-width: 1024px) {
  body:has(.panel-sheet[open]:not(:modal)) .new-roles-wrap {
    padding-right: calc((100% - 32px) * 1.25 / 2.25 + 32px);
  }
}

.new-roles:active {
  transform: scale(0.97);
  transition-duration: 160ms;
}

.new-roles svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card.arrived {
  animation: card-arrived 1600ms ease-out;
}

@keyframes card-arrived {
  from {
    background-color: var(--tint);
  }
}

/* Dev map time-lapse: Play beside the chart title, a month label over the map, rings where filings land. */
.devx-chart-titles {
  display: flex;
  align-items: center;
  gap: 10px;
}

.devx-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  font: 500 12px var(--ui);
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}

.devx-play:active {
  transform: scale(0.95);
}

.devx-play svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.devx-bar-col.after i {
  opacity: 0.2;
}

.devx-lapse-chip {
  position: absolute;
  z-index: 610;
  top: 16px;
  left: 50%;
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: transform 240ms var(--ease-out), opacity 200ms ease;
}

.devx-lapse-chip.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.devx-lapse-chip b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.devx-blip-icon {
  pointer-events: none;
}

.devx-blip {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--c);
  border-radius: 50%;
  animation: devx-blip 900ms var(--ease-out) forwards;
}

@keyframes devx-blip {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }

  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (max-width: 640px) {
  .new-roles-wrap {
    top: 110px;
  }

  .devx-lapse-chip {
    top: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-slider,
  .tx-ring {
    transition: opacity 150ms ease;
  }

  .toast,
  .toast.leaving {
    animation: none;
    transform: translateX(-50%);
  }

  .tx-land {
    stroke-dashoffset: 0;
    animation: none;
  }

  .tx-dot,
  .tx-halo,
  .tx-label,
  .card.arrived {
    animation: none;
  }

  .devx-lapse-chip {
    transform: translate(-50%, 0);
  }

  .devx-blip {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Free TERRA: create/sign-in switch, free-access card, welcome screen, tour icons
   --------------------------------------------------------------------------- */
.auth-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.auth-mode {
  min-height: 36px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.auth-mode[aria-pressed='true'] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.12);
}
.auth-mode:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.core-features .feature h3 {
  margin-top: 4px;
}

.free-card {
  margin-top: 20px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.free-card p {
  margin: 0;
}
.free-card p + p {
  margin-top: 10px;
}

.welcome-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.home {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 32px;
}
.home-head h1 {
  margin: 4px 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
}
.home-head .lede {
  margin: 0;
  color: var(--muted);
}
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-top: 24px;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 168px;
  padding: 18px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, transform 0.15s;
}
.home-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.home-card-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-card-title {
  font-size: 1.1rem;
  font-weight: 650;
}
.home-card-text {
  color: var(--muted);
}
.home-card-count {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--accent);
}
.home-deal {
  margin: 16px 0 0;
}
.home-mine {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.home-mine h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (prefers-reduced-motion: reduce) {
  .home-card {
    transition: none;
  }
  .home-card:hover {
    transform: none;
  }
}

.pitch-icon {
  display: grid;
  place-items: center;
  width: min(220px, 50vw);
  aspect-ratio: 1;
  margin: auto;
  background: var(--accent-tint);
  border-radius: 32px;
}
.pitch-icon svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Location not verified: only the ZIP code area is known. */
.devx-tag.dev-unverified {
  border-style: dashed;
}
/* City data page: header, headline figures, topic tabs and one detail table (markets-view.js cityView). */
.city-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 6px;
}
.city-head-name {
  min-width: 0;
}
.city-head-name .firm {
  margin: 2px 0 0;
}
.city-picker {
  display: grid;
  gap: 4px;
  min-width: 200px;
}
.city-coverage {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 70ch;
}
.city-kpis .kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.city-kpis .figure-source {
  margin-top: auto;
  padding-top: 6px;
}
.city-topics {
  padding: 0;
  overflow: hidden;
}
.city-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.city-tab {
  font: 500 14px var(--ui);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 36px;
}
.city-tab:hover {
  color: var(--ink);
  background: var(--chip-hover);
}
.city-tab[aria-selected='true'] {
  color: var(--on-tint);
  background: var(--tint);
}
.city-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.city-panel {
  padding: 20px 24px 24px;
}
.city-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 15px;
}
.city-table thead th {
  font: 500 12.5px var(--ui);
  color: var(--muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.city-table thead th.num {
  text-align: right;
}
.city-table tbody th,
.city-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.city-table tbody tr:last-child > * {
  border-bottom: 0;
}
.city-table tbody th {
  font-weight: 500;
}
.city-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 16px;
}
.city-table .city-period {
  color: var(--muted);
  white-space: nowrap;
  width: 1%;
}
.city-metric-name {
  display: block;
}
.city-fold summary {
  cursor: pointer;
  font: 500 13px var(--ui);
  color: var(--muted);
  width: fit-content;
  padding: 4px 0;
}
.city-fold summary:hover {
  color: var(--ink);
}
.city-fold summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.city-fold p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.city-fold-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 6px 0 2px;
  font: 400 13px var(--ui);
  color: var(--muted);
  max-width: 62ch;
}
.city-fold-list dt {
  font-weight: 600;
  color: var(--ink);
}
.city-fold-list dd {
  margin: 0;
}
.city-fold-list a {
  color: var(--accent);
}
.city-note,
.city-empty {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.city-missing {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sunk);
}
.city-missing-list {
  margin: 8px 0 2px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .city-picker {
    width: 100%;
  }
  .city-panel {
    padding: 16px;
  }
  .city-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .city-table,
  .city-table tbody,
  .city-table tr {
    display: block;
  }
  .city-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name value' 'fold period';
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .city-table tbody th,
  .city-table tbody td {
    padding: 0;
    border: 0;
  }
  .city-table tbody th {
    display: contents;
  }
  .city-table .city-metric-name {
    grid-area: name;
  }
  .city-table tbody th .city-fold {
    grid-area: fold;
  }
  .city-table td.num {
    grid-area: value;
  }
  .city-table .city-period {
    grid-area: period;
    width: auto;
    text-align: right;
    font-size: 13px;
  }
}
.city-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .city-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Rates strip: even rows at every width; the last tile closes its row (markets-view.js rates()). */
.ticker {
  grid-template-columns: repeat(var(--cols-wide, 5), minmax(0, 1fr));
}
.ticker .tick:last-child {
  grid-column: span var(--span-wide, 1);
}
@media (max-width: 1000px) {
  .ticker {
    grid-template-columns: repeat(var(--cols-mid, 3), minmax(0, 1fr));
  }
  .ticker .tick:last-child {
    grid-column: span var(--span-mid, 1);
  }
}
@media (max-width: 640px) {
  .ticker {
    grid-template-columns: repeat(var(--cols-narrow, 2), minmax(0, 1fr));
  }
  .ticker .tick:last-child {
    grid-column: span var(--span-narrow, 1);
  }
}

/* ---------------------------------------------------------------------------
   Contour: the landing and the welcome screen sit on a field of contour lines
   (contour.js) that leans toward the cursor; the headline is set large with
   the accent on "real estate", the four features are tabs with a sliding
   pill, and the sections signed in arrive with a short blur-in. The
   development map is left exactly as it is.
   --------------------------------------------------------------------------- */
:root {
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.6%, 1.067 22.8%, 1.083 26.2%, 1.069 30.2%, 1.014 39.5%, 0.996 46.3%, 1.001 71%, 1);
}

/* The field: full bleed behind the section, fading out at its foot. */
#gate.hero,
#home-view .home-head {
  position: relative;
  isolation: isolate;
}

.topo {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#gate .topo {
  top: -24px;
  bottom: -40px;
  left: 50%;
  width: 100vw;
  height: calc(100% + 64px);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

@media (min-width: 1000px) {
  #gate.hero {
    min-height: min(760px, calc(100svh - 64px));
  }
}

#gate h1 {
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

#gate h1 em {
  font-style: normal;
  color: var(--accent);
}

#gate .lede {
  font-size: clamp(17.5px, 1.5vw, 20px);
  max-width: 34ch;
}

#gate .pill-form {
  box-shadow: var(--shadow-float);
  transition: border-color 200ms ease, box-shadow 300ms var(--ease-out);
}

#gate .pill-form:focus-within {
  box-shadow: 0 0 0 4px var(--tint), var(--shadow-float);
}

/* The live panel reads as a survey readout: glass over the lines. */
#gate .hero-panel {
  padding: 10px;
  background: color-mix(in oklch, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

#gate .hero-panel .bento-box {
  background: color-mix(in oklch, var(--sunk) 80%, transparent);
}

#gate .hero-panel .bento-v {
  font-size: 34px;
  letter-spacing: -0.045em;
}

/* Bands: larger headings, softer surfaces. */
#welcome .welcome-block h2,
#welcome .welcome-cta h2 {
  max-width: 18ch;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#welcome .eyebrow {
  font-size: 14px;
  font-weight: 600;
}

#welcome .steps li {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 26px;
  background: var(--sunk);
  border: 0;
  border-radius: 18px;
  transition: transform 500ms var(--ease-out);
}

#welcome .step-num {
  margin-bottom: auto;
  padding-bottom: 28px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
}

#welcome .steps h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
}

@media (hover: hover) and (pointer: fine) {
  #welcome .steps li:hover {
    transform: translateY(-4px);
  }
}

/* Features as tabs (contour.js): a raised pill slides under the picked one. */
.ftabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px;
  background: var(--sunk);
  border-radius: 16px;
}

.ftab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  font: 500 15px/1.2 var(--ui);
  color: var(--ink2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: color 200ms ease, transform 160ms var(--ease-out);
}

.ftab[aria-selected='true'] {
  color: var(--ink);
}

.ftab:active {
  transform: scale(0.98);
}

.ftab b {
  font-weight: 600;
}

.ftab svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ftab-pill {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  transition: transform 550ms var(--spring), width 550ms var(--spring), height 550ms var(--spring);
}

#welcome .core-features.tabbed {
  display: block;
}

#welcome .core-features.tabbed .feature {
  display: none;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: clamp(28px, 4vw, 48px);
  padding-right: min(46%, 420px);
  background: var(--sunk);
  border: 0;
  border-radius: 20px;
}

#welcome .core-features.tabbed .feature.on {
  display: block;
  animation: contour-pane 500ms var(--ease-out) both;
}

/* Each panel carries its feature's mark on a patch of contour rings. */
#welcome .core-features.tabbed .feature::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -8%;
  width: min(52%, 460px);
  aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, color-mix(in oklch, var(--accent) 22%, transparent) 22px 23px);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%);
  mask-image: radial-gradient(circle, #000 40%, transparent 70%);
}

#welcome .core-features.tabbed .feature svg {
  display: block;
  position: absolute;
  top: 50%;
  right: max(10%, calc(23% - 60px));
  width: clamp(72px, 10vw, 120px);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  stroke-width: 1.2;
  translate: 0 -50%;
}

#welcome .core-features.tabbed .feature h3 {
  margin-bottom: 14px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

#welcome .core-features.tabbed .feature p {
  max-width: 42ch;
  font-size: 17px;
}

@keyframes contour-pane {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px) scale(0.99);
  }
}

@media (max-width: 760px) {
  .ftabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #welcome .core-features.tabbed .feature {
    min-height: 0;
    padding: 28px 24px 150px;
  }

  #welcome .core-features.tabbed .feature::before {
    top: auto;
    bottom: -45%;
    right: -20%;
    width: 80%;
  }

  #welcome .core-features.tabbed .feature svg {
    top: auto;
    bottom: 28px;
    right: 28px;
    width: 72px;
    translate: none;
  }
}

/* $0. For anyone. */
#free-title {
  font-size: clamp(44px, 5.4vw, 76px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
}

#welcome .free-card {
  padding: 22px;
  background: var(--sunk);
  border: 0;
  border-radius: 18px;
}

#welcome .welcome-cta {
  flex-direction: column;
  align-items: center;
  padding: clamp(64px, 9vw, 120px) 0;
  text-align: center;
}

#welcome .welcome-cta h2 {
  max-width: none;
}

/* Welcome screen: the greeting sits on its own field, and the four doors lift. */
#home-view .home-head {
  overflow: hidden;
  min-height: 240px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--sunk);
  border-radius: 22px;
}

#home-view .home-head .topo {
  inset: 0;
  width: 100%;
  height: 100%;
}

#home-view .home-head h1 {
  max-width: 14ch;
  margin: 6px 0 12px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
}

#home-view .home-head .eyebrow {
  color: var(--accent);
  font-weight: 600;
}

#home-view .home-head .lede {
  font-size: 17px;
  color: var(--ink2);
}

#home-view .home-card {
  min-height: 200px;
  padding: 22px;
  border-radius: 18px;
  transition: border-color 200ms ease, transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}

#home-view .home-card-title {
  font-size: 22px;
  letter-spacing: -0.02em;
}

#home-view .home-card-count {
  font-size: 15px;
}

@media (hover: hover) and (pointer: fine) {
  #home-view .home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
  }
}

/* Tabs on wide screens: the slider becomes a pill behind the open tab. */
@media (min-width: 641px) {
  .appbar .tabs.sliding {
    isolation: isolate;
  }

  .appbar .tabs.sliding .tab-slider {
    z-index: -1;
    top: 50%;
    bottom: auto;
    height: 34px;
    margin-top: -17px;
    background: var(--tint);
    border-radius: 999px;
    transition: transform 500ms var(--spring), width 500ms var(--spring), opacity 150ms ease;
  }

  .appbar .tabs.sliding .tab[aria-current='page'] {
    color: var(--on-tint);
  }
}

/* Chips: the picked one takes the accent tint, as the tab pill does (the map keeps its own). */
.chip[aria-pressed='true']:not(.devx *),
.chip[aria-current='page']:not(.devx *),
.chip[aria-current='true']:not(.devx *) {
  color: var(--on-tint);
  background: var(--tint);
  border-color: transparent;
  font-weight: 600;
}

/* Sections signed in arrive with a short blur-in (the map is left as it is). */
#home-view:not([hidden]),
#tracker-view:not([hidden]),
#news-view:not([hidden]),
#events-view:not([hidden]),
#profile:not([hidden]) {
  animation: contour-view 420ms var(--ease-out) both;
}

@keyframes contour-view {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-view:not([hidden]),
  #tracker-view:not([hidden]),
  #news-view:not([hidden]),
  #events-view:not([hidden]),
  #profile:not([hidden]),
  #welcome .core-features.tabbed .feature.on {
    animation: none;
  }

  #welcome .steps li,
  #home-view .home-card,
  .ftab-pill,
  .appbar .tabs.sliding .tab-slider {
    transition: none;
  }

  #welcome .steps li:hover,
  #home-view .home-card:hover {
    transform: none;
  }
}
   Profile layout (profile-check.mjs): the completion card stacks heading and
   count, bar, then one step per row; About you is two columns on desktop and
   one on phones; Resume, About you and Daily job alerts share one rhythm.
   --------------------------------------------------------------------------- */

#profile.profile {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}

#profile .profile-side,
#profile .profile-main {
  max-width: none;
  min-width: 0;
}

#profile .profile-head h2,
#profile #profile-email {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#profile .prof-progress,
#profile .prof-progress.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 20px 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#profile .prof-meter,
#profile .prof-meter .meter-bar {
  width: 100%;
  max-width: none;
}

#profile .prof-meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#profile .prof-meter-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  white-space: normal;
}

#profile .prof-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#profile .prof-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  min-width: 0;
}

#profile .prof-steps .link {
  min-width: 0;
  padding: 4px 0;
  text-align: left;
  overflow-wrap: anywhere;
}

#profile .prof-steps .link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

#profile .profile-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#profile .profile-main .uploads,
#profile .profile-main .skill-gaps,
#profile .profile-main > .notice {
  margin: 0;
}

#profile .profile-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  border: 0;
}

#profile .profile-form .about {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#profile .profile-form .section-title,
#profile .profile-form fieldset.alerts > legend {
  float: none;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 0 12px;
  font: 500 24px/1.2 var(--ui);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

#profile .profile-form fieldset.alerts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#profile .profile-form .fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

#profile .profile-form .fields > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#profile .profile-form .fields .eyebrow {
  white-space: normal;
}

#profile .profile-form .fields input,
#profile .profile-form .fields select {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

#profile .profile-form .actions,
#profile .profile-form > .notice {
  margin: 0;
}

@media (max-width: 760px) {
  #profile.profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  #profile .profile-form .fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Contour, the rest of the site: larger page titles, sunk cards without
   borders, big figures, tinted picks. Nothing here reaches the development map.
   --------------------------------------------------------------------------- */
.page-title,
.page-title.section-head {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

#today .today-stat {
  padding: 18px 20px;
  background: var(--sunk);
  border: 0;
  border-radius: 16px;
}

#today .today-stat b {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

#list .card,
.news-list .card,
.event-card.card,
.track-card.card,
#markets-view .growth-card,
#markets-view .zoning-item,
.deal-card,
.profile .profile-cards > .card,
.prof-progress.card {
  border-color: transparent;
  border-radius: 16px;
  background: var(--sunk);
  transition: background 200ms ease, transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #list .card:hover,
  .event-card.card:hover,
  #markets-view .zoning-item:hover {
    background: var(--tint);
  }

  .news-list .news-item:hover {
    transform: translateX(4px);
  }
}

#job-panel {
  border-radius: 20px;
}

#job-panel .facts > div {
  background: var(--sunk);
  border-radius: 11px;
}

/* Tools and topics: the picked chip takes the tint, like the app's tabs. */
#markets-view:not(:has(.devx-body, .dev-map)) .market-tools .chip[aria-current],
#news-view .market-tools .chip[aria-current] {
  color: var(--on-tint);
  background: var(--tint);
}

#markets-view .market-table th,
#markets-view .market-table td,
#markets-view .lease-table th,
#markets-view .lease-table td {
  font-variant-numeric: tabular-nums;
}

/* The tracker's stages are lanes; a card lifts while it is dragged (contour.js). */
#tracker-view .board-col {
  padding: 14px;
  background: var(--sunk);
  border-radius: 18px;
  outline: 2px dashed transparent;
  outline-offset: -4px;
  transition: background 200ms ease, outline-color 200ms ease;
}

#tracker-view .board-col.drop {
  background: var(--tint);
  outline-color: var(--accent);
}

#tracker-view .track-card.card {
  background: var(--bg);
}

@media (hover: hover) and (pointer: fine) {
  #tracker-view .track-card {
    cursor: grab;
  }
}

#tracker-view .track-card.dragging {
  position: relative;
  z-index: 5;
  cursor: grabbing;
  rotate: -1.5deg;
  box-shadow: var(--shadow-lg);
  transition: none;
}

/* Events */
.cal {
  background: var(--sunk);
  border: 0;
  border-radius: 18px;
}

.event-card .date-block {
  background: var(--bg);
  border-radius: 12px;
}

/* The sign-in code reads as a code. */
#verify-code {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

#verify-code::placeholder {
  font-weight: 400;
  letter-spacing: normal;
}

/* The tour's pictures sit on contour rings. */
#pitch .pitch-icon {
  position: relative;
  overflow: hidden;
  background: var(--sunk);
  border-radius: 22px;
}

#pitch .pitch-icon::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: repeating-radial-gradient(circle, transparent 0 18px, color-mix(in oklch, var(--accent) 20%, transparent) 18px 19px);
}

#pitch .pitch-icon svg {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .news-list .news-item:hover {
    transform: none;
  }
}

/* News headline cards, polish pass: one card style everywhere, the same padding and left edge for the
   source line, headline and tags, a gap between stacked cards, and a lead story that sits top-aligned
   beside its own column instead of spanning grid rows. Layout only. */
#n-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
#n-list .news-more {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
#n-list .news-item.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 16px;
  min-width: 0;
  border: 1px solid var(--line2);
  border-radius: 16px;
  overflow-wrap: anywhere;
}
#n-list .news-item > * { margin: 0; padding: 0; }
#n-list .news-item .news-title { font-size: 16.5px; line-height: 1.35; letter-spacing: 0; font-weight: 500; }
#n-list .news-item .chips { margin: 2px 0 0; padding: 0; }
#n-list .news-item.news-lead { position: relative; top: auto; border: 1px solid var(--line2); }
#n-list .news-item.news-lead .news-title { font-size: 1.375rem; line-height: 1.22; letter-spacing: -0.015em; }
#n-list .news-title a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
#n-list .news-title a:hover,
#n-list .news-title a:focus-visible { color: var(--accent); text-decoration: underline; }
#n-list .news-title a:focus-visible { outline: none; }
#n-list .news-item:has(.news-title a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (min-width: 600px) {
  #n-list .news-item.card { padding: 24px; }
}
@media (min-width: 960px) {
  #n-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  #n-list > .news-item.news-lead { grid-column: 1; grid-row: auto; }
  #n-list > .news-item.news-lead:only-child { grid-column: 1 / -1; }
  #n-list .news-item.news-lead .news-title { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.2; }
}

/* Events cards, polish pass (matches the News cards): one card style and padding, three desktop columns
   (date, event, calendar actions) all top-aligned, wrapping titles, actions under the event on phones,
   and the mini calendar's top level with the first event card. Layout only. */
#e-list { display: grid; gap: 28px; align-content: start; }
#e-list .events-month { display: grid; gap: 12px; }
#e-list .events-month-title { margin: 0; height: 20px; line-height: 20px; overflow: hidden; }
#e-list .event-card.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.75rem, max-content) minmax(0, 1fr) 12.5rem;
  column-gap: 24px;
  align-items: start;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line2);
  border-radius: 16px;
}
#e-list .date-block {
  box-sizing: border-box;
  min-width: 4.75rem;
  padding: 8px 10px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 12px;
  align-self: start;
}
#e-list .date-block > * { overflow: hidden; text-overflow: clip; }
#e-list .event-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
#e-list .event-body > * { margin: 0; }
#e-list .event-title { line-height: 1.3; }
#e-list .event-tags { margin: 2px 0 0; }
#e-list .event-actions { align-self: start; align-items: stretch; gap: 8px; min-width: 0; }
#e-list .event-actions > * { white-space: normal; text-align: center; }
#e-list .event-actions > * { display: flex; align-items: center; justify-content: center; min-height: 36px; }
#e-list .event-title a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
#e-list .event-title a:hover,
#e-list .event-title a:focus-visible { color: var(--accent); text-decoration: underline; }
@media (min-width: 901px) {
  /* The first month's heading (20px) plus its 12px gap: the calendar starts level with the first card. */
  .events-layout:has(#e-list .events-month) > .events-side { margin-top: 32px; }
}
@media (max-width: 640px) {
  #e-list .event-card.card { grid-template-columns: minmax(3.75rem, max-content) minmax(0, 1fr); column-gap: 14px; row-gap: 14px; padding: 16px; }
  #e-list .date-block { min-width: 3.75rem; padding: 6px 8px; }
  #e-list .event-actions { grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; min-width: 0; }
  #e-list .event-actions > * { flex: 1 1 auto; min-height: 44px; padding-inline: 14px; }
}

/* Events cards, second pass (Rod's review of the live page): a quieter date tile, actions as two matching
   compact buttons that sit beside the text instead of floating at the far edge, and no underlined link. */
#e-list .event-card.card {
  grid-template-columns: 4.5rem minmax(0, 1fr) max-content;
  column-gap: 20px;
  padding: 24px;
}
#e-list .date-block {
  width: 4.5rem;
  min-width: 0;
  padding: 8px 0;
  text-align: center;
  align-items: center;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 12px;
}
#e-list .date-block > * { display: block; text-align: center; }
#e-list .event-title { font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
#e-list .event-body { gap: 8px; }
#e-list .event-where { font-size: 13.5px; }
#e-list .event-actions { display: flex; flex-direction: column; gap: 8px; width: 11.5rem; }
#e-list .event-actions > * {
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal;
}
#e-list .event-actions > a.link {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line2);
}
#e-list .event-actions > a.link:hover,
#e-list .event-actions > a.link:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  #e-list .event-card.card { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  #e-list .date-block { width: 3.75rem; }
  #e-list .event-actions { flex-direction: row; width: auto; }
  #e-list .event-actions > * { min-height: 44px; flex: 1 1 0; }
}