/* Adealia — base styles */

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

:root {
  /* Bridge old names → design tokens (non-prototype pages) */
  --blue:    var(--navy);
  --green:   var(--ok-fg);
  --yellow:  var(--warn-fg);
  --red:     var(--alert-fg);
  --gray:    var(--ink-2);
  --light:   var(--surface-1);
  --border:  var(--line-1);
  --text:    var(--ink-1);
  --radius:  var(--radius-sm);
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-1);
  background: var(--surface-1);
  margin: 0;
  min-height: 100vh;
}

/* ── Header ── */
header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.wordmark {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.tagline {
  font-size: 0.8rem;
  color: var(--gray);
}

/* ── Main ── */
main {
  max-width: 960px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

/* ── Header nav ── */
.header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-user {
  font-size: 0.85rem;
  color: var(--gray);
}

.nav-link {
  font-size: 0.85rem;
  color: var(--blue);
  text-decoration: none;
}

.nav-link:hover { text-decoration: underline; }

/* ── Flash messages ── */
.flash-messages { margin-bottom: 1.25rem; }

.flash {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  margin: 0;
}

/* ── Auth pages ── */
.auth-page h1 {
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  margin-top: 1.25rem;
}

.auth-form label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: -0.25rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  background: var(--surface-3);
  color: var(--ink-1);
  transition: border-color var(--dur-base) var(--ease-out);
}
.auth-form input:hover { border-color: var(--line-3); }

.auth-form input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 37, 71, 0.08);
}

.auth-form button { margin-top: 0.5rem; }

/* ── Sign-up trial promise (QuickComp only) ── */
.auth-trial-promise {
  max-width: 480px;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--navy);
  background: var(--info-bg);
  border-radius: var(--radius);
}

.auth-trial-headline {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--text);
}

.auth-trial-detail {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray);
}

/* ── Invite URL display ── */
.invite-label {
  font-size: 0.875rem;
  color: var(--gray);
  margin: 1.25rem 0 0.4rem;
}

.invite-url {
  width: 100%;
  max-width: 560px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  background: #f3f4f6;
  color: var(--text);
}

/* ── Search page ── */
.search-page h1 {
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}

.hint {
  color: var(--gray);
  margin: 0 0 1.5rem;
}

.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 540px;
}

.search-form input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  background: var(--surface-3);
  color: var(--ink-1);
  transition: border-color var(--dur-base) var(--ease-out);
}
.search-form input[type="text"]:hover { border-color: var(--line-3); }

.search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 37, 71, 0.08);
}

/* ── Buttons ── */
button, .btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .btn:hover {
  background: #1648c0;
}

/* ── Error ── */
.error {
  color: var(--red);
  margin-top: 0.75rem;
}

/* ── Not found ── */
.not-found h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.not-found p  { margin: 0.4rem 0; }
.not-found .btn { margin-top: 1.25rem; }

/* ── Result header ── */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.result-address h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.subaddress {
  color: var(--gray);
  margin: 0;
  font-size: 0.9rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.badge {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.grade-a    { background: var(--ok-bg);   color: var(--ok-fg); }
.grade-b    { background: var(--good-bg); color: var(--good-fg); }
.grade-c    { background: var(--warn-bg); color: var(--warn-fg); }
.grade-d, .grade-f { background: var(--alert-bg); color: var(--alert-fg); }

.conf-high   { background: var(--ok-bg);   color: var(--ok-fg); }
.conf-medium { background: var(--good-bg); color: var(--good-fg); }
.conf-low    { background: var(--warn-bg); color: var(--warn-fg); }
.conf-none   { background: var(--surface-2); color: var(--ink-2); }

.trap-badge  { background: var(--alert-bg); color: var(--alert-fg); }
.warn-badge  { background: var(--warn-bg);  color: var(--warn-fg); }

/* ── Cards ── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

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

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.card h2 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin: 0 0 1rem;
}

.card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin: 1.25rem 0 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

dt { color: var(--gray); font-size: 0.875rem; }
dd { margin: 0; font-weight: 500; }

.flag { color: var(--yellow); font-size: 0.8rem; font-weight: 400; }

.positive { color: var(--green); }
.negative { color: var(--red); }

/* ── Feature list ── */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.feature-list li {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
}

.feature-yes {
  background: #d1fae5 !important;
  color: #065f46;
  font-weight: 500;
}

/* ── Alert / notes ── */
.alert {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.notes {
  font-size: 0.875rem;
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
}

/* ── Result footer ── */
.result-footer {
  margin-top: 1.5rem;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ Prototype styles                                                         ║
   ║                                                                          ║
   ║ All rules below are scoped under `body.proto` so they don't affect       ║
   ║ existing pages. Once the new IA ships, these get unscoped and the old    ║
   ║ section above can be retired in pieces.                                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

body.proto {
  --proto-bg:            var(--surface-1);
  --proto-surface:       var(--surface-3);
  --proto-border:        var(--line-1);
  --proto-border-strong: var(--line-3);
  --proto-text:          var(--ink-1);
  --proto-muted:         var(--ink-2);
  --proto-muted-2:       var(--ink-3);
  --proto-brand:         var(--navy);
  --proto-brand-d:       var(--navy-soft);
  --proto-brand-soft:    26, 37, 71;   /* rgb of --navy for rgba() tints */
  --proto-accent:        var(--peach);
  --proto-accent-d:      var(--peach-soft);
  --proto-ok:            var(--ok-dot);
  --proto-warn:          var(--warn-dot);
  --proto-danger:        var(--alert-dot);
  --proto-radius:        var(--radius-sm);
  --proto-radius-lg:     var(--radius-lg);
  --proto-shadow:        var(--shadow-1);

  background: var(--surface-1);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.proto a { color: var(--proto-brand); text-decoration: none; }
.proto a:hover { text-decoration: underline; }

.proto h1, .proto h2, .proto h3, .proto h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Top nav ──────────────────────────────────────────────────────────── */
.proto .proto-nav {
  background: var(--proto-surface);
  border-bottom: 1px solid var(--proto-border);
  padding: 0;
}

.proto .proto-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 56px;
  gap: 2rem;
}

.proto .proto-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--proto-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.proto .proto-brand:hover { text-decoration: none; }
.proto .proto-brand-mark { color: var(--proto-brand); font-size: 1.1rem; }
.proto .proto-brand-word { font-size: 1.05rem; }
.proto .proto-brand-text { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.proto .proto-brand-accent { color: var(--peach-deep); }

.proto .proto-brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Quiet suite descriptor beside the brand mark — signals "intelligence suite"
   without a logo change. Divider + muted uppercase micro-label. */
.proto .proto-brand--suite { gap: 0.55rem; }

.proto .proto-brand-suite-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--proto-muted);
  padding-left: 0.55rem;
  border-left: 1px solid var(--proto-border);
  line-height: 1.15;
}

@media (max-width: 720px) {
  .proto .proto-brand-suite-tag { display: none; }
}

.proto .proto-nav-links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.proto .proto-nav-link {
  color: var(--proto-muted);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--proto-radius);
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear;
}

.proto .proto-nav-link:hover {
  color: var(--proto-text);
  background: var(--proto-bg);
  text-decoration: none;
}

.proto .proto-nav-link.is-active {
  color: var(--navy);
  background: rgba(var(--proto-brand-soft), 0.06);
  box-shadow: inset 0 -2px 0 var(--peach);
}

/* Grouped nav dropdowns ("Products", "Developing"). A hover/focus menu so the
   suite reads as a curated catalog instead of a flat link row. The trigger
   matches .proto-nav-link styling; the panel reuses the surface tokens. */
.proto .proto-nav-group { position: relative; display: flex; align-items: center; }

.proto .proto-nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--proto-muted);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0.5rem 0.85rem;
  border: none;
  background: none;
  border-radius: var(--proto-radius);
  cursor: pointer;
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear;
}

.proto .proto-nav-group-btn:hover,
.proto .proto-nav-group:focus-within .proto-nav-group-btn {
  color: var(--proto-text);
  background: var(--proto-bg);
}

.proto .proto-nav-group-btn.is-active {
  color: var(--navy);
  background: rgba(var(--proto-brand-soft), 0.06);
  box-shadow: inset 0 -2px 0 var(--peach);
}

.proto .proto-nav-group-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* Above Leaflet's popup pane (z-index: 700) so the Products/Developing
   * dropdowns clear the NVI/QuickComp map. The previous value of 60 sat
   * behind every Leaflet pane from tiles (200) upward. Mirrors the
   * .proto-nav-dropdown (user menu) fix below. */
  z-index: 1000;
  min-width: 220px;
  margin-top: 0.25rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-fast) linear,
              visibility var(--dur-fast) linear;
}

.proto .proto-nav-group:hover .proto-nav-group-menu,
.proto .proto-nav-group:focus-within .proto-nav-group-menu,
.proto .proto-nav-group.is-open .proto-nav-group-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hamburger toggle — hidden on desktop, revealed at the mobile breakpoint
   below. Three bars; the JS toggle flips .is-open on the nav. */
.proto .proto-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  background: none;
  cursor: pointer;
}

.proto .proto-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--proto-text);
  border-radius: 2px;
}

.proto .proto-nav-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--proto-muted);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--proto-radius);
  white-space: nowrap;
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear;
}

.proto .proto-nav-group-item:hover {
  color: var(--proto-text);
  background: var(--proto-bg);
  text-decoration: none;
}

.proto .proto-nav-group-item.is-active {
  color: var(--navy);
  background: rgba(var(--proto-brand-soft), 0.06);
}

.proto .proto-nav-group-item--soon {
  color: var(--proto-muted);
  opacity: 0.6;
  cursor: default;
}

.proto .proto-nav-group-item--soon:hover { background: none; }

/* "Admin only" tag on a product that's toggled admin-only but shown to an
   admin (via /admin/products). Signals the link isn't public yet. */
.proto .proto-nav-group-badge {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--proto-muted);
  background: var(--proto-bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  vertical-align: middle;
}

.proto .proto-nav-soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--proto-bg);
  color: var(--proto-muted);
}

/* "What's New": accent the nav label and show a small dot until the user
   opens the page. Driven by the `whatsnew_unseen` flag (inject_whatsnew),
   which clears on first view and re-arms on the next admin edit. */
.proto .proto-nav-link--new { color: var(--peach-deep); font-weight: 600; }
.proto .proto-nav-link--new:hover { color: var(--peach-deep); }
.proto .proto-nav-new-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--peach-deep);
  vertical-align: middle;
}

/* ── Mobile nav (≤720px) ──
   Agents live on phones. Below this width the link row collapses behind the
   hamburger: .proto-nav-links drops out of flow into a full-width panel under
   the header, shown only when JS adds .is-open. The Products/Developing group
   menus go static (inline-expanding) so they don't fly off-screen as absolute
   dropdowns inside the narrow panel. */
@media (max-width: 720px) {
  .proto .proto-nav-toggle { display: flex; }

  .proto .proto-nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 1rem 0.75rem;
    background: var(--proto-surface);
    border-bottom: 1px solid var(--proto-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
  }

  .proto .proto-nav-links.is-open { display: flex; }

  .proto .proto-nav-group { display: block; }
  .proto .proto-nav-group-btn { width: 100%; justify-content: space-between; }

  .proto .proto-nav-group-menu {
    position: static;
    opacity: 1;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    padding: 0;
    transform: none;
    border: none;
    box-shadow: none;
    background: none;
  }

  /* On touch the menu reveals only via the JS .is-open toggle, not hover —
     prevents a sticky-hover menu staying stuck open after a tap. */
  .proto .proto-nav-group:hover .proto-nav-group-menu {
    visibility: hidden;
    height: 0;
  }

  .proto .proto-nav-group.is-open .proto-nav-group-menu {
    visibility: visible;
    height: auto;
    padding: 0.15rem 0 0.25rem 0.75rem;
  }
}

.proto .proto-nav-user {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--proto-muted);
  font-size: 0.88rem;
  cursor: pointer;
}

.proto .proto-nav-user:hover { color: var(--proto-text); }
.proto .proto-nav-caret { font-size: 0.7rem; }

/* ── Trial-status pill (QuickComp, in-window Pro trial) ───────────── */
.proto .proto-nav-trial-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-right: 0.75rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255, 178, 102, 0.16);
  color: #8a4a00;
  border: 1px solid rgba(255, 178, 102, 0.45);
}

.proto .proto-nav-trial-pill:hover {
  background: rgba(255, 178, 102, 0.28);
  text-decoration: none;
}

.proto .proto-nav-trial-label { font-weight: 600; }
.proto .proto-nav-trial-days {
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* ── Main shell ──────────────────────────────────────────────────────── */
.proto .proto-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.proto .proto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--proto-radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--proto-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) linear,
              border-color var(--dur-fast) linear,
              color var(--dur-fast) linear;
}

.proto .proto-btn:hover { text-decoration: none; }
.proto .proto-btn:active { transform: translateY(1px); }
.proto .proto-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.proto .proto-btn-primary {
  background: var(--proto-brand);
  color: #fff;
  border-color: var(--proto-brand);
}
.proto .proto-btn-primary:hover { background: var(--proto-brand-d); }

.proto .proto-btn-secondary {
  background: var(--proto-surface);
  border-color: var(--proto-border-strong);
  color: var(--proto-text);
}
.proto .proto-btn-secondary:hover { background: var(--proto-bg); }

/* ── Note modal ─────────────────────────────────────────────────────────── */
.proto-modal {
  border: 1px solid var(--proto-border-strong);
  border-radius: 8px;
  padding: 1.5rem;
  width: min(560px, 92vw);
  background: var(--proto-surface);
  color: var(--proto-text);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.proto-modal::backdrop {
  background: rgba(0,0,0,.45);
}
.proto-modal-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.proto-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .75rem;
  border: 1px solid var(--proto-border-strong);
  border-radius: 4px;
  background: var(--proto-bg);
  color: var(--proto-text);
  font: inherit;
  font-size: .9rem;
  resize: vertical;
  min-height: 160px;
}
.proto-modal-textarea:focus {
  outline: 2px solid var(--proto-brand);
  outline-offset: -1px;
}
.proto-modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.proto .proto-btn-ghost {
  color: var(--proto-muted);
}
.proto .proto-btn-ghost:hover { color: var(--proto-text); background: var(--proto-bg); }

.proto .proto-btn-tiny { padding: 0.25rem 0.55rem; font-size: 0.78rem; }

.proto .proto-btn-inline {
  margin-left: auto;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.proto .proto-card {
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--proto-shadow);
}

.proto .proto-card-padless { padding: 0; }

.proto .proto-card-title {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--proto-muted);
  margin: 0 0 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.proto .proto-card-title-inline { margin: 0; }

.proto .proto-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.proto .proto-card-title-row .proto-card-title { margin-bottom: 0; }

.proto .proto-btn-reanalyze {
  font-size: 0.72rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--proto-border);
  border-radius: 4px;
  background: transparent;
  color: var(--proto-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.proto .proto-btn-reanalyze:hover {
  border-color: var(--proto-accent);
  color: var(--proto-accent);
}
.proto .proto-reanalyze-form { margin: 0; }

.proto .proto-card-subtitle {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--proto-muted);
  font-weight: 400;
}

.proto .proto-card-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--proto-muted);
}

.proto .proto-card-table-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--proto-border);
  font-size: 0.78rem;
  color: var(--proto-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.proto .proto-card-table-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--proto-border);
  display: flex;
  gap: 0.5rem;
  background: var(--proto-bg);
  border-radius: 0 0 var(--proto-radius-lg) var(--proto-radius-lg);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.proto .proto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.proto .proto-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--proto-muted);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-table tbody td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-table tbody tr:last-child td { border-bottom: none; }

.proto .proto-table th.num,
.proto .proto-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.proto .proto-table th.action,
.proto .proto-table td.action {
  text-align: right;
  width: 1px;
  white-space: nowrap;
}

.proto .proto-table th.cb,
.proto .proto-table td.cb {
  width: 1px;
  padding-right: 0;
}

.proto .proto-row-flagged td { background: rgba(180, 83, 9, 0.05); }

.proto .proto-row-best td {
  background: rgba(4, 120, 87, 0.05);
  font-weight: 500;
}

.proto .proto-row-link { cursor: pointer; }
.proto .proto-row-link:hover td { background: var(--proto-bg); }

/* ── Grade badges ────────────────────────────────────────────────────── */
.proto .proto-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0;
}

.proto .proto-grade-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  border-radius: var(--radius-sm);
}

.proto .proto-grade-a { background: var(--ok-bg);    color: var(--ok-fg); }
.proto .proto-grade-b { background: var(--good-bg);  color: var(--good-fg); }
.proto .proto-grade-c { background: var(--warn-bg);  color: var(--warn-fg); }
.proto .proto-grade-d, .proto .proto-grade-f { background: var(--alert-bg); color: var(--alert-fg); }

/* ── Confidence pill ─────────────────────────────────────────────────── */
.proto .proto-conf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--proto-text);
}

.proto .proto-conf-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  display: inline-block;
}

.proto .proto-conf-high   .proto-conf-dot { background: var(--ok-dot); }
.proto .proto-conf-medium .proto-conf-dot { background: var(--warn-dot); }
.proto .proto-conf-low    .proto-conf-dot { background: var(--ink-3); border: 1px solid var(--line-1); background-color: transparent; }
.proto .proto-conf-none   .proto-conf-dot { background: var(--line-1); }

/* ── Generic pills ───────────────────────────────────────────────────── */
.proto .proto-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.proto .proto-pill-ok     { background: var(--ok-bg);    color: var(--ok-fg); }
.proto .proto-pill-warn   { background: var(--warn-bg);  color: var(--warn-fg); }
.proto .proto-pill-danger { background: var(--alert-bg); color: var(--alert-fg); }
.proto .proto-pill-best {
  background: var(--proto-accent);
  color: var(--proto-brand);
  font-weight: 600;
}
.proto .proto-pill-muted { background: var(--proto-bg); color: var(--proto-muted); }

.proto .proto-mini-pill {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  background: var(--proto-bg);
  color: var(--proto-muted);
  margin-right: 0.2rem;
}

.proto .proto-criteria-pills { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; }

/* ── Definition lists ────────────────────────────────────────────────── */
.proto .proto-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.proto .proto-kv dt {
  color: var(--proto-muted);
  font-size: 0.85rem;
}

.proto .proto-kv dd {
  margin: 0;
  font-weight: 500;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Dashboard ───────────────────────────────────────────────────────── */
.proto .proto-page-dashboard { max-width: 980px; }

.proto .proto-quick-ask {
  margin-bottom: 1.25rem;
}

.proto .proto-quick-ask-form {
  display: flex;
  gap: 0;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  overflow: hidden;
  box-shadow: var(--proto-shadow);
}

.proto .proto-quick-ask-form input {
  flex: 1;
  border: none;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  background: transparent;
  outline: none;
  color: var(--proto-text);
}

.proto .proto-quick-ask-form input::placeholder { color: var(--proto-muted); }

.proto .proto-quick-ask-form button {
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--navy);
  padding: 0 1.4rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  font-size: 0.9rem;
  transition: background var(--dur-fast) linear;
}
.proto .proto-quick-ask-form button:hover { background: var(--navy-soft); }

/* ── Address autocomplete dropdown ──────────────────────────────────── */
.proto .proto-autocomplete-list {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 50;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: var(--shadow-2);
}

.proto .proto-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--line-1);
  cursor: pointer;
  transition: background var(--dur-fast) linear;
}
.proto .proto-autocomplete-item:first-child { border-top: none; }
.proto .proto-autocomplete-item:hover { background: var(--surface-2); }

.proto .proto-autocomplete-item-addr { flex: 1; min-width: 0; }
.proto .proto-autocomplete-item-addr--mls {
  font-weight: 700;
  color: var(--navy);
}

.proto .proto-autocomplete-mls-badge {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(26, 37, 71, 0.08);
  color: var(--navy);
  flex-shrink: 0;
  text-transform: uppercase;
}

.proto .proto-dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.proto .proto-widget {
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--proto-shadow);
}

.proto .proto-widget-title {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--proto-muted);
  margin: 0 0 0.65rem;
  font-weight: 600;
}

.proto .proto-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.proto .proto-widget-bignum {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--font-mono);
  color: var(--navy);
}

.proto .proto-widget-sub {
  color: var(--proto-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 1rem;
}

.proto .proto-widget-inbox .proto-btn { padding: 0.35rem 0.75rem; }

.proto .proto-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}

.proto .proto-stats dt {
  color: var(--proto-muted);
  font-size: 0.85rem;
}

.proto .proto-stats dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.proto .proto-link-muted {
  color: var(--proto-muted);
  font-size: 0.78rem;
}

/* ── Filters bar ─────────────────────────────────────────────────────── */
.proto .proto-filters { margin-bottom: 1rem; }

.proto .proto-filter-form {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 0.7rem 1rem;
  box-shadow: var(--proto-shadow);
}

.proto .proto-filter-form label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--proto-muted);
}

.proto .proto-filter-form select,
.proto .proto-filter-form input[type="text"] {
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  background: var(--proto-surface);
  color: var(--proto-text);
}

.proto .proto-filter-search { flex: 1; min-width: 220px; }
.proto .proto-filter-search input { width: 100%; }

/* ── Page headers ────────────────────────────────────────────────────── */
.proto .proto-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.proto .proto-page-header h1 {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.proto .proto-back {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--proto-muted);
  margin-bottom: 0.85rem;
}

/* ── Detail page ─────────────────────────────────────────────────────── */
.proto .proto-page-detail { max-width: 1080px; }

.proto .proto-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-detail-header h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.proto .proto-detail-grade-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
}

.proto .proto-ivs {
  font-weight: 600;
  font-size: 1rem;
  color: var(--proto-text);
}

.proto .proto-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.proto .proto-watermark {
  font-size: 0.78rem;
  color: var(--proto-muted);
  font-variant-numeric: tabular-nums;
}

.proto .proto-watermark-detail { margin-top: 0.3rem; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.proto .proto-hero-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--proto-shadow);
}

.proto .proto-hero-image {
  position: relative;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: var(--proto-radius);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.proto .proto-hero-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proto .proto-hero-image-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.proto .proto-hero-facts dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
  align-content: start;
}

.proto .proto-hero-facts dt {
  color: var(--proto-muted);
  font-size: 0.85rem;
}

.proto .proto-hero-facts dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.proto .proto-detail-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.proto .proto-gla-status { margin-top: 0.85rem; }

.proto .proto-disclosure {
  margin-top: 0.85rem;
  font-size: 0.85rem;
}

.proto .proto-disclosure summary {
  color: var(--proto-muted);
  cursor: pointer;
  user-select: none;
  padding: 0.3rem 0;
}

.proto .proto-disclosure-body {
  margin: 0.4rem 0 0;
  color: var(--proto-muted);
  font-size: 0.82rem;
}

/* ── Geo flags ───────────────────────────────────────────────────────── */
.proto .proto-flags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.proto .proto-flags li {
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: 4px;
  padding: 0.28rem 0.55rem;
  font-size: 0.8rem;
  color: var(--proto-muted);
}

.proto .proto-flags li.is-yes {
  background: rgba(4, 120, 87, 0.08);
  border-color: rgba(4, 120, 87, 0.25);
  color: var(--proto-ok);
}

.proto .proto-flags li.is-warn {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.25);
  color: var(--proto-warn);
}

/* ── Velocity card mini ──────────────────────────────────────────────── */
.proto .proto-card-velocity p {
  margin: 0;
  font-size: 0.92rem;
}

/* ── Ask page ────────────────────────────────────────────────────────── */
.proto .proto-ask {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
  height: calc(100vh - 56px - 4rem);
  min-height: 540px;
}

.proto .proto-ask-rail {
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--proto-shadow);
}

.proto .proto-ask-rail-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--proto-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.proto .proto-ask-rail-header h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--proto-muted);
}

.proto .proto-ask-thread-list {
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.proto .proto-thread-row {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--proto-text);
  border-left: 2px solid transparent;
}

.proto .proto-thread-row:hover {
  background: var(--proto-bg);
  text-decoration: none;
}

.proto .proto-thread-row.is-active {
  background: rgba(var(--proto-brand-soft), 0.06);
  border-left-color: var(--proto-brand);
}

.proto .proto-thread-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proto .proto-thread-time {
  display: block;
  font-size: 0.72rem;
  color: var(--proto-muted);
  margin-top: 0.15rem;
}

.proto .proto-ask-rail-search {
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--proto-border);
}

.proto .proto-ask-rail-search input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  font-size: 0.82rem;
  background: var(--proto-bg);
}

.proto .proto-ask-conv {
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--proto-shadow);
}

.proto .proto-ask-conv-header {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-ask-conv-header h2 {
  font-size: 1rem;
  font-weight: 600;
}

.proto .proto-thread-meta {
  display: block;
  font-size: 0.76rem;
  color: var(--proto-muted);
  margin-top: 0.2rem;
}

.proto .proto-ask-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.proto .proto-msg {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.proto .proto-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.proto .proto-msg-assistant { align-self: flex-start; }

.proto .proto-msg-label {
  font-size: 0.72rem;
  color: var(--proto-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.proto .proto-msg-body {
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.proto .proto-msg-user .proto-msg-body {
  background: rgba(var(--proto-brand-soft), 0.06);
  border-color: rgba(var(--proto-brand-soft), 0.18);
}

.proto .proto-msg-body p { margin: 0; }
.proto .proto-msg-body p + .proto-msg-attached,
.proto .proto-msg-attached { margin-top: 0.6rem; }

.proto .proto-ask-composer {
  border-top: 1px solid var(--proto-border);
  padding: 0.7rem 1rem 0.85rem;
  background: var(--proto-bg);
}

.proto .proto-ask-composer-form {
  display: flex;
  gap: 0;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  overflow: hidden;
}

.proto .proto-ask-composer-form input {
  flex: 1;
  border: none;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  background: transparent;
  outline: none;
}

.proto .proto-ask-composer-form button {
  border: none;
  background: var(--proto-brand);
  color: #fff;
  padding: 0 1.1rem;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
}

.proto .proto-ask-tools {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--proto-muted);
  text-align: center;
}

.proto .proto-ask-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.proto .proto-ask-empty h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.proto .proto-ask-empty-sub { color: var(--proto-muted); margin: 0 0 1.25rem; }

.proto .proto-ask-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 540px;
  margin-bottom: 1.5rem;
}

.proto .proto-chip {
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
  color: var(--proto-text);
  cursor: pointer;
}

.proto .proto-chip:hover {
  background: rgba(var(--proto-brand-soft), 0.06);
  border-color: rgba(var(--proto-brand-soft), 0.3);
}

/* ── Property card (in chat) ─────────────────────────────────────────── */
.proto .proto-pcard {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--proto-surface);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius-lg);
  padding: 0.7rem;
  color: var(--proto-text);
  text-decoration: none;
  width: 100%;
  max-width: 480px;
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}

.proto .proto-pcard:hover {
  text-decoration: none;
  border-color: var(--proto-brand);
  box-shadow: 0 0 0 2px rgba(var(--proto-brand-soft), 0.15);
}

.proto .proto-pcard-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(26,37,71,0.12) 0%, rgba(26,37,71,0.28) 100%);
  border-radius: var(--proto-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.proto .proto-pcard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.proto .proto-pcard-row1 .proto-pcard-address {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.proto .proto-pcard-row2 {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.proto .proto-pcard-meta {
  font-size: 0.78rem;
  color: var(--proto-muted);
}

.proto .proto-pcard-row3 {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.proto .proto-pcard-price {
  font-weight: 700;
  font-size: var(--fs-body);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.proto .proto-pcard-pathway {
  font-size: 0.78rem;
  color: var(--proto-muted);
}

.proto .proto-pcard-arrow {
  color: var(--proto-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: color var(--dur-fast) linear;
}
.proto .proto-pcard:hover .proto-pcard-arrow { color: var(--navy); }

/* ── Settings: subnav ─────────────────────────────────────────────────── */
.proto .proto-page-settings { max-width: 1080px; }

.proto .proto-subnav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-subnav-link {
  padding: 0.55rem 0.95rem;
  color: var(--proto-muted);
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.proto .proto-subnav-link:hover { color: var(--proto-text); text-decoration: none; }

.proto .proto-subnav-link.is-active {
  color: var(--proto-brand);
  border-bottom-color: var(--proto-accent);
  border-bottom-width: 3px;
  margin-bottom: -2px;
}

/* ── Active version banner ───────────────────────────────────────────── */
.proto .proto-active-version {
  background: linear-gradient(180deg, rgba(var(--proto-brand-soft), 0.04), transparent);
  border-color: rgba(var(--proto-brand-soft), 0.18);
}

.proto .proto-active-version-headline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.proto .proto-active-version-dot { color: var(--proto-ok); font-size: 0.85rem; }

.proto .proto-active-version-label {
  color: var(--proto-muted);
  font-style: italic;
  font-weight: 400;
}

/* ── Comp settings 2-col ─────────────────────────────────────────────── */
.proto .proto-comp-2col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ── Sliders ─────────────────────────────────────────────────────────── */
.proto .proto-slider-group {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--proto-muted);
  margin: 1.25rem 0 0.6rem;
  font-weight: 600;
}

.proto .proto-slider-group:first-of-type { margin-top: 0; }

.proto .proto-slider {
  margin-bottom: 1rem;
}

.proto .proto-slider label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--proto-text);
  margin-bottom: 0.3rem;
}

.proto .proto-slider-val {
  color: var(--proto-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

.proto .proto-slider input[type="range"] {
  width: 100%;
  accent-color: var(--proto-brand);
}

.proto .proto-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--proto-muted-2);
  margin-top: 0.15rem;
}

.proto .proto-comp-save {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--proto-border);
}

.proto .proto-comp-save input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  font-size: 0.88rem;
  margin-bottom: 0.7rem;
}

.proto .proto-comp-save-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── Preview impact ──────────────────────────────────────────────────── */
.proto .proto-preview-result {
  margin-top: 1rem;
}

.proto .proto-preview-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.proto .proto-preview-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.proto .proto-preview-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 1.6rem;
  text-align: right;
}

.proto .proto-preview-label { color: var(--proto-muted); }

.proto .proto-hr { border: none; border-top: 1px solid var(--proto-border); margin: 1rem 0; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.proto .proto-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 420px;
}

.proto .proto-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--proto-muted);
}

.proto .proto-form input,
.proto .proto-form select,
.proto .proto-form textarea {
  /* Matches .adl-input from adealia-tokens.css so all form controls
   * share one token-based look across the app. */
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink-1);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.proto .proto-form input::placeholder { color: var(--ink-4); }
.proto .proto-form input:hover,
.proto .proto-form select:hover,
.proto .proto-form textarea:hover { border-color: var(--line-3); }

.proto .proto-form input:focus,
.proto .proto-form select:focus,
.proto .proto-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 37, 71, 0.08);
}
.proto .proto-form input:disabled,
.proto .proto-form select:disabled { opacity: 0.5; cursor: not-allowed; }

.proto .proto-form-actions { margin-top: 0.5rem; }

/* ── Account zip pills ───────────────────────────────────────────────── */
.proto .proto-zip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.85rem;
}

.proto .proto-zip-pill {
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--proto-text);
}

/* ── Misc utility ────────────────────────────────────────────────────── */
.proto .proto-muted { color: var(--proto-muted); }
.proto .proto-tiny { font-size: 0.78rem; }
.proto .positive { color: var(--proto-ok); }
.proto .negative { color: var(--proto-danger); }

.proto .proto-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--proto-muted);
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.proto .proto-page-empty {
  text-align: center;
  padding: 4rem 1.5rem;
}

.proto .proto-page-empty h1 { font-size: 1.4rem; margin-bottom: 0.5rem; }

/* ── Dialog / modal ──────────────────────────────────────────────────── */
.proto .proto-dialog {
  border: none;
  border-radius: var(--proto-radius-lg);
  padding: 0;
  width: 480px;
  max-width: calc(100vw - 2rem);
  background: var(--proto-surface);
  color: var(--proto-text);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--proto-border);
}

.proto .proto-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.proto .proto-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--proto-border);
}

.proto .proto-dialog-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
}

.proto .proto-dialog-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--proto-muted);
  padding: 0.25rem 0.5rem;
}

.proto .proto-dialog-close:hover { color: var(--proto-text); }

.proto .proto-dialog-body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.proto .proto-dialog-body label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--proto-muted);
}

.proto .proto-dialog-body label > span:first-child {
  font-weight: 500;
  color: var(--proto-text);
}

.proto .proto-dialog-body input[type="text"],
.proto .proto-dialog-body input[type="email"],
.proto .proto-dialog-body input[type="number"],
.proto .proto-dialog-body select,
.proto .proto-dialog-body textarea {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  font-size: 0.9rem;
  background: var(--proto-surface);
  color: var(--proto-text);
  font-family: inherit;
}

.proto .proto-dialog-body input:focus,
.proto .proto-dialog-body select:focus,
.proto .proto-dialog-body textarea:focus {
  outline: 2px solid rgba(var(--proto-brand-soft), 0.35);
  outline-offset: 0;
  border-color: var(--proto-brand);
}

.proto .proto-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}

.proto .proto-form-hint {
  font-size: 0.72rem;
  color: var(--proto-muted-2);
  margin-top: 0.1rem;
}

.proto .proto-dialog-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--proto-border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  background: var(--proto-bg);
  border-radius: 0 0 var(--proto-radius-lg) var(--proto-radius-lg);
}

/* HTMX swap indicator (subtle pulse on rows being swapped) */
.proto .htmx-swapping { opacity: 0.5; transition: opacity 150ms; }
.proto .htmx-request .proto-btn { opacity: 0.7; }

/* ── Search History Page ── */
.proto-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.proto-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.search-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-3);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink-1);
  transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear;
}

.search-history-row:hover {
  background: var(--surface-2);
  border-color: var(--line-3);
}

.search-history-title {
  font-size: var(--fs-body);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-history-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.search-history-dot {
  color: var(--ink-4);
}

.search-history-empty {
  text-align: center;
  padding: var(--space-10) 0;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* ── Nav User Dropdown ── */
.proto-nav-user {
  position: relative;
}

.proto-nav-user-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink-1);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) linear;
}

.proto-nav-user-btn:hover {
  background: var(--surface-2);
}

.proto-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--surface-3);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  /* Above Leaflet's popup pane (z-index: 700) so the dropdown clears the
   * QuickComp map. The previous value of 200 sat behind every Leaflet
   * pane from tiles upward. */
  z-index: 1000;
  padding: var(--space-2) 0;
  overflow: hidden;
}

.proto-nav-user.is-open .proto-nav-dropdown {
  display: block;
}

.proto-nav-dropdown-label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
}

.proto-nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  color: var(--ink-1);
  text-decoration: none;
  transition: background var(--dur-fast) linear;
  white-space: nowrap;
  overflow: hidden;
}

.proto-nav-dropdown-item:hover {
  background: var(--surface-2);
}

.proto-nav-dropdown-item--muted {
  color: var(--ink-3);
}

.proto-nav-dropdown-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.proto-nav-dropdown-time {
  font-size: var(--fs-caption);
  color: var(--ink-3);
  flex-shrink: 0;
}

.proto-nav-dropdown-divider {
  height: 1px;
  background: var(--line-2);
  margin: var(--space-2) 0;
}

/* "Admin" / "Beta" style tag that sits inline after a dropdown item
 * label so the user can see at a glance which entries are restricted
 * or experimental. The parent .proto-nav-dropdown-item is already
 * display:flex with justify-content:space-between, so the badge
 * naturally floats to the trailing edge. */
.proto-nav-dropdown-badge {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--proto-muted);
  background: var(--proto-bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ── Listing Photo Gallery ── */
.pcard-photos {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.pcard-photos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pcard-photos-label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.pcard-photos-count {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.pcard-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-2);
}

.pcard-photo-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-hairline);
  background: var(--surface-2);
  transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-out);
}

.pcard-photo-thumb:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

.pcard-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcard-photo-primary {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4 / 3;
}

.pcard-photo-thumb {
  background: none;
  border: var(--border-hairline);
  padding: 0;
  cursor: pointer;
}

/* ── Lightbox ── */
.adl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 14, 30, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.adl-lightbox[hidden] { display: none; }

.adl-lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
  gap: var(--space-3);
}

.adl-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.adl-lightbox-caption {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-small);
  text-align: center;
  margin: 0;
  min-height: 1em;
}

.adl-lightbox-counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
}

.adl-lightbox-close,
.adl-lightbox-prev,
.adl-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  border-radius: var(--radius-pill);
  line-height: 1;
  transition: background var(--dur-fast) linear;
}

.adl-lightbox-close:hover,
.adl-lightbox-prev:hover,
.adl-lightbox-next:hover {
  background: rgba(255,255,255,0.22);
}

.adl-lightbox-close {
  top: var(--space-5);
  right: var(--space-5);
  font-size: 24px;
  padding: 4px 12px;
}

.adl-lightbox-prev,
.adl-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  padding: 8px 16px;
}

.adl-lightbox-prev { left: var(--space-5); }
.adl-lightbox-next { right: var(--space-5); }


/* ── Photo Analysis card ─────────────────────────────────────────────── */

/* Scope pill variant not covered by ok/warn/danger */
.proto .proto-pill-scope-moderate {
  background: rgba(180, 83, 9, 0.10);
  color: #92400e;
  border: 1px solid rgba(180, 83, 9, 0.25);
}

/* Overview section */
.proto .proto-photo-overview {
  margin-bottom: 1.25rem;
}

.proto .proto-kv-inline {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

.proto .proto-photo-summary {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.proto .proto-photo-evidence {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--proto-muted);
}

/* Sub-sections */
.proto .proto-photo-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--proto-border);
}

.proto .proto-photo-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--proto-muted);
  margin: 0 0 0.65rem;
}

.proto .proto-photo-section-title-warn {
  color: var(--proto-warn);
}

/* Confidence dots */
.proto .proto-conf-high { color: var(--proto-ok);   }
.proto .proto-conf-med  { color: var(--proto-warn);  }
.proto .proto-conf-low  { color: var(--proto-alert); }
.proto .proto-conf-dot  { font-size: 0.78rem; margin-left: 0.3rem; }

/* Compact KV for feature conditions */
.proto .proto-kv-sm {
  margin-top: 0.4rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.8rem;
  font-size: 0.82rem;
}

/* Regional flags — "unknown" state */
.proto .proto-flags-regional li.is-unknown {
  color: var(--proto-muted-2);
  opacity: 0.5;
}
.proto .proto-flags-regional li.is-no {
  color: var(--proto-muted);
}

/* Compact table variant */
.proto .proto-table-sm td,
.proto .proto-table-sm th {
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
}

/* Waived rows */
.proto .proto-row-waived td {
  opacity: 0.5;
}
.proto .proto-waived-tag {
  font-size: 0.72rem;
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
}

/* Total row */
.proto .proto-row-total td {
  border-top: 2px solid var(--proto-border);
  background: var(--proto-bg);
}

/* Rehab totals banner */
.proto .proto-rehab-totals {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--proto-bg);
  border: 1px solid var(--proto-border);
  border-radius: var(--proto-radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
}
.proto .proto-rehab-total-label {
  font-size: 0.78rem;
  color: var(--proto-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.proto .proto-rehab-range {
  font-size: 1.05rem;
  font-weight: 600;
}
.proto .proto-rehab-mid {
  font-size: 0.85rem;
  color: var(--proto-muted);
  margin-left: auto;
}

/* Note lines */
.proto .proto-photo-note {
  font-size: 0.82rem;
  color: var(--proto-muted);
  margin: 0.4rem 0 0;
}
.proto .proto-photo-note-warn {
  color: var(--proto-warn);
}

/* Red flags list */
.proto .proto-red-flags {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
}
.proto .proto-red-flags li {
  margin-bottom: 0.25rem;
  color: var(--proto-alert, #dc2626);
}

/* Empty-state card */
.proto .proto-card-empty p {
  color: var(--proto-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ── ML estimates card ──────────────────────────────────────── */
.proto .proto-ml-card { border-left: 3px solid var(--proto-accent); }

.proto .proto-ml-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--proto-accent);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
}

.proto .proto-ml-delta {
  font-size: 0.82rem;
  color: var(--proto-muted);
  margin-left: 4px;
}
.proto .proto-ml-delta-up   { color: var(--ok-fg); }
.proto .proto-ml-delta-down { color: var(--alert-fg); }

.proto .proto-ml-feedback-pair {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.proto .proto-ml-thumb {
  background: none;
  border: 1px solid var(--proto-border);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: background var(--dur-fast) linear;
}
.proto .proto-ml-thumb:hover          { background: var(--proto-bg); }
.proto .proto-ml-thumb-down:hover     { border-color: var(--alert-fg); }

.proto .proto-ml-feedback-saved {
  font-size: 0.82rem;
  color: var(--proto-muted);
  margin-left: 4px;
}

/* ── Billing ───────────────────────────────────────────────────── */

.proto .billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.proto .billing-plan-card {
  border: 1px solid var(--proto-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--proto-card-bg, white);
}

.proto .billing-plan-card.is-current {
  border-color: var(--ok-fg);
  box-shadow: 0 0 0 1px var(--ok-fg) inset;
}

.proto .billing-plan-name {
  margin: 0;
  font-size: 1.1rem;
}

.proto .billing-plan-price {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.proto .billing-plan-desc {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
}

.proto .billing-plan-card form { margin: 0; }

/* ── Cap-reached callout (inbound from a 402) ──────────────────── */
.proto .billing-cap-callout {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff3e0, #fff7ec);
  border: 1px solid #e8a55a;
  box-shadow: 0 1px 0 rgba(184, 110, 22, 0.08);
}

.proto .billing-cap-callout-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #6b3e0d;
}

.proto .billing-cap-callout-body {
  margin: 0 0 1rem;
  color: #5c3a1a;
  font-size: 0.92rem;
  line-height: 1.5;
}

.proto .billing-cap-callout-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.proto .billing-cap-callout-actions form { margin: 0; }

/* ── Plan benefits list (Current plan card) ────────────────────── */
.proto .billing-benefits {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  color: var(--proto-muted-fg, #5a5a5a);
  font-size: 0.92rem;
  line-height: 1.55;
}

.proto .billing-benefits li {
  margin-bottom: 0.2rem;
}

/* ── Welcome-to-Pro / Team success page ────────────────────────── */
.proto .billing-success-card {
  text-align: left;
}

.proto .billing-success-header {
  margin: 0 0 1rem;
}

.proto .billing-success-header h2 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.proto .billing-success-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e7f5ec;
  color: #1b6b3a;
  border: 1px solid #b9dfc4;
}

.proto .billing-success-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.proto .billing-success-list li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.5rem;
  font-size: 0.92rem;
  color: var(--proto-muted);
}

.proto .billing-success-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1b6b3a;
  font-weight: 700;
}

.proto .billing-success-receipt {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--proto-border);
}

.proto .billing-checkout-wrap {
  max-width: 480px;
  margin: 40px auto;
}

.proto .billing-checkout-card {
  border: 1px solid var(--proto-border);
  border-radius: 10px;
  padding: 24px;
  background: var(--proto-card-bg, white);
}

.proto .billing-checkout-header h2 {
  margin: 0 0 4px 0;
}

.proto .billing-checkout-mode {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.proto .billing-checkout-summary {
  margin: 18px 0;
  padding: 12px 0;
  border-top: 1px solid var(--proto-border);
  border-bottom: 1px solid var(--proto-border);
}

.proto .billing-checkout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.proto .billing-checkout-row code {
  font-size: 0.78rem;
}

.proto .billing-checkout-form label {
  display: block;
  margin-bottom: 10px;
}

.proto .billing-checkout-form label > span {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--proto-muted);
}

.proto .billing-checkout-form input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--proto-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.proto .billing-checkout-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.proto .billing-checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ── Comp set expandable rows ────────────────────────────────────────────── */

.proto .proto-table-comps tbody tr.proto-comp-row {
  cursor: pointer;
  transition: background var(--dur-fast) linear;
}

.proto .proto-table-comps tbody tr.proto-comp-row:hover {
  background: var(--surface-2);
}

.proto .proto-table-comps tbody tr.proto-comp-row-open {
  background: var(--info-bg);
}

.proto .proto-comp-caret {
  color: var(--ink-3);
  margin-right: 4px;
  font-size: 11px;
  display: inline-block;
  width: 10px;
  text-align: center;
}

.proto .proto-comp-detail > td {
  background: var(--surface-1);
  border-top: none;
  padding: 12px 16px 16px 16px;
}

.proto .proto-comp-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 24px;
}

.proto .proto-comp-axis {
  display: grid;
  grid-template-columns: 90px 1fr 44px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.proto .proto-comp-axis-label {
  color: var(--ink-2);
  font-weight: 500;
}

.proto .proto-comp-axis-bar {
  display: block;
  height: 8px;
  background: var(--line-1);
  border-radius: 4px;
  overflow: hidden;
}

.proto .proto-comp-axis-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(26,37,71,0.4), var(--navy));
  border-radius: 4px;
  transition: width var(--dur-base) var(--ease-out);
}

.proto .proto-comp-axis-value {
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  text-align: right;
}

.proto .proto-comp-formula {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Photo lightbox ──────────────────────────────────────────────────────── */

.proto .proto-card-photos {
  margin-top: 16px;
}

.proto .proto-photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 12px 2px;
  scrollbar-width: thin;
}

.proto .proto-photo-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 140px;
  height: 105px;
  padding: 0;
  border: 1px solid var(--line-1);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) linear,
              box-shadow var(--dur-fast) linear;
}

.proto .proto-photo-thumb:hover,
.proto .proto-photo-thumb:focus-visible {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(26, 37, 71, 0.2);
  transform: translateY(-1px);
  outline: none;
}

.proto .proto-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proto .proto-photo-thumb-tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Lightbox overlay */
.proto-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 32px 64px;
}

.proto-lightbox[hidden] { display: none; }

.proto-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 80px);
}

.proto-lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}

.proto-lightbox-caption {
  display: flex;
  gap: 16px;
  align-items: baseline;
  color: #e5e7eb;
  font-size: 13px;
  max-width: 100%;
}

.proto-lightbox-caption #proto-lightbox-caption-text {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proto-lightbox-counter {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
}

/* Nav buttons (prev/next/close) */
.proto-lightbox-nav,
.proto-lightbox-close {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f3f4f6;
  cursor: pointer;
  transition: background var(--dur-fast) linear;
}

.proto-lightbox-nav:hover,
.proto-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.proto-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border-radius: 6px;
  font-size: 32px;
  line-height: 1;
}

.proto-lightbox-prev { left: 16px; }
.proto-lightbox-next { right: 16px; }

.proto-lightbox-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 640px) {
  .proto-lightbox { padding: 16px 8px; }
  .proto-lightbox-nav { width: 36px; height: 48px; font-size: 24px; }
  .proto-lightbox-prev { left: 4px; }
  .proto-lightbox-next { right: 4px; }
  .proto .proto-photo-thumb { width: 110px; height: 82px; }
}

/* ── Adealia AI assistant chat ────────────────────────────────────── */

.proto-nav-divider {
  width: 1px;
  height: 18px;
  background: var(--proto-border, #e5e7eb);
  margin: 0 8px;
  display: inline-block;
  align-self: center;
}

.assistant-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────── */

.assistant-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--proto-border, #e5e7eb);
  background: var(--proto-surface-muted, #fafafa);
  overflow: hidden;
}

.assistant-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px 8px;
}

.assistant-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--proto-border, #e5e7eb);
  font-size: 13px;
  color: var(--proto-text-muted, #6b7280);
}

.assistant-user-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.assistant-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-new-form { margin-bottom: 12px; }
.assistant-new-btn {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--proto-border, #e5e7eb);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--proto-text, #111);
  display: flex;
  align-items: center;
  gap: 8px;
}
.assistant-new-btn:hover { background: var(--proto-surface-muted, #f3f4f6); }

/* Search */
.assistant-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.assistant-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--proto-text-muted, #9ca3af);
  pointer-events: none;
}
.assistant-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px 7px 30px;
  border: 1px solid var(--proto-border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--proto-text, #111);
}
.assistant-search-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.assistant-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Recent list */
.assistant-recent-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--proto-text-muted, #6b7280);
  margin: 4px 4px 6px;
}

.assistant-recent-row {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 6px;
  margin-bottom: 1px;
}
.assistant-recent-row:hover { background: #fff; }
.assistant-recent-row:hover .assistant-rename-btn { opacity: 1; }

.assistant-recent-item {
  flex: 1;
  min-width: 0;
  padding: 8px 4px 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--proto-text, #111);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-recent-item.is-active { font-weight: 500; }

.assistant-rename-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--proto-text-muted, #9ca3af);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1;
}
.assistant-rename-btn:hover { color: var(--proto-text, #111); }

.assistant-rename-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 37, 71, 0.1);
}

.assistant-recent-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--proto-text-muted, #6b7280);
}

/* ── Main content ───────────────────────────────────────────────── */

.assistant-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-1) 50%);
}

.assistant-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 48px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Let the column shrink to its flex track instead of being forced wide
     by wide children (e.g. the property-card grid) — without this a wide
     child blows the track out and the page gets a horizontal scrollbar.
     Mirrors the .qc-ai-chat fix on the QuickComp side. */
  min-width: 0;
}

/* Empty state */
.assistant-empty {
  margin: auto;
  text-align: center;
  color: var(--proto-text-muted, #6b7280);
  max-width: 520px;
  padding: 32px 0;
}
.assistant-empty h2 {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--proto-text, #111);
}
.assistant-empty-subtitle {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.assistant-empty-hint {
  display: inline-block;
  font-size: 13px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--proto-text, #374151);
}
.assistant-empty-samples {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--proto-text, #374151);
}
.assistant-empty-samples li {
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 8px;
  padding: 10px 16px;
}

/* Free-tier monthly message countdown above the chat input. Hidden
   entirely for paid tiers (server omits the block). */
.assistant-quota {
  margin: 0 auto 10px;
  max-width: 720px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  text-align: center;
}
.assistant-quota--warning { background: #fff7e8; border-color: #f0c97a; color: #6b4a0d; }
.assistant-quota--blocked { background: #fdecec; border-color: #e89a9a; color: #7a1d1d; }
.assistant-quota a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Message bubbles */
.assistant-msg {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}
.assistant-msg--user {
  align-self: flex-end;
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant-msg--assistant {
  align-self: flex-start;
  background: #fff;
  color: var(--proto-text, #111);
  white-space: pre-wrap;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.assistant-msg--pending { opacity: 0.9; }
.assistant-msg-content { margin: 0; }

/* Property cards — rendered from streamed tool results alongside the prose.
   Wraps within the chat column rather than scrolling horizontally (the
   nowrap strip we shipped initially blew out the column's intrinsic width
   and triggered a page-wide horizontal scrollbar — see Sean's fix in MR
   !282). JS in assistant/home.html caps the initial render at a viewport-
   sized batch (phone=2, tablet=6, desktop=8 — roughly 2 rows) and surfaces
   the rest behind a "Load more" tile that reveals the next batch per click.
   --expanded is a legacy hook from the old carousel, kept as a no-op so
   any in-flight JS that toggles it doesn't blow up. */
.assistant-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}
.assistant-cards--expanded { flex-wrap: wrap; }
.assistant-card {
  flex: 0 0 180px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.assistant-card--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2563eb;
  cursor: pointer;
  text-align: center;
  min-height: 140px;
}
.assistant-card--more:hover { background: #f8fafc; }
.assistant-card--more:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* Photo slot — always reserves 180×135 (4:3 of the 180px card width) so
   missing/late/broken photos don't collapse the card and cause the chat
   to jump as photos resolve. When card.photo_url is null OR the <img>
   404s, the JS leaves this slot empty and the gray background is the
   placeholder. Same size on every viewport because .assistant-card is
   flex: 0 0 180px (fixed). */
.assistant-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  margin: -2px 0 10px;
  background: #f3f4f6;
  overflow: hidden;
}
.assistant-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.assistant-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
}
.assistant-card-addr {
  margin-top: 3px;
  font-size: 0.86rem;
  color: #333;
  line-height: 1.3;
}
.assistant-card-stats {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #555;
}
.assistant-card-sub {
  margin-top: 6px;
  font-size: 0.78rem;
  color: #777;
  font-style: italic;
}
.assistant-card-status {
  flex: none;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1f4;
  color: #555;
}
.assistant-card-status--A { background: #e6f4ea; color: #1e7a3c; } /* Active */
.assistant-card-status--P { background: #fdf1dd; color: #9a6a12; } /* Pending */
.assistant-card-status--C { background: #eceef0; color: #5a6470; } /* Closed */
.assistant-card-status--X { background: #f6e9e9; color: #9a3838; } /* Off-market */

/* Animated pending indicator — a spinning, breathing Adealia mark. Pure CSS
   so it keeps moving regardless of network/JS state (never looks frozen). */
.assistant-pending {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.assistant-pending-mark {
  width: 18px;
  height: 18px;
  flex: none;
  transform-origin: 50% 50%;
  animation: adealia-spin 1.15s cubic-bezier(0.5, 0.08, 0.5, 0.92) infinite;
}
.assistant-pending-label {
  font-style: italic;
  opacity: 0.7;
}
@keyframes adealia-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.6; }
  50%  { transform: rotate(180deg) scale(1.14); opacity: 1;   }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.6; }
}
/* Respect users who opt out of motion: pulse opacity only, no spin. */
@media (prefers-reduced-motion: reduce) {
  .assistant-pending-mark {
    animation: adealia-pulse 1.6s ease-in-out infinite;
  }
  @keyframes adealia-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }
}

/* Input pill */
.assistant-input-area {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: center;
}

.assistant-input-pill {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  background: var(--surface-3);
  border: 1.5px solid var(--proto-border, #e5e7eb);
  border-radius: 26px;
  padding: 10px 12px 10px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.assistant-input-pill:focus-within {
  border-color: var(--navy);
  box-shadow: 0 2px 16px rgba(26, 37, 71, 0.12);
}
.assistant-input-pill textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 2px 0;
  min-height: 26px;
  max-height: 160px;
  overflow-y: auto;
  color: var(--proto-text, #111);
}
.assistant-input-pill textarea::placeholder { color: var(--proto-text-muted, #9ca3af); }
.assistant-input-pill textarea:disabled { opacity: 0.5; }

.assistant-send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) linear;
  align-self: flex-end;
}
.assistant-send-btn:hover { background: var(--navy-soft); }
.assistant-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
  .assistant-shell { grid-template-columns: 1fr; }
  .assistant-sidebar { display: none; }
  .assistant-messages { padding: 24px 20px; }
  .assistant-input-area { padding: 12px 16px 16px; }
}

/* ── Assistant: over-limit notice ─────────────────────────────────── */

.assistant-msg--over-limit {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-dot);
}
.assistant-msg--over-limit a { color: #78350f; text-decoration: underline; }

/* ── Admin: assistant usage table ─────────────────────────────────── */

.admin-usage-shell { max-width: 1000px; margin: 24px auto; padding: 0 24px; }
.admin-usage-shell h1 { font-size: 22px; margin: 0 0 16px; }
.admin-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-usage-table th, .admin-usage-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--proto-border, #e5e7eb);
}
.admin-usage-table th { font-weight: 600; background: var(--proto-surface-muted, #fafafa); }
.admin-usage-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-usage-table .tier-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-usage-table .tier-pill--free      { background: #f3f4f6; color: #374151; }
.admin-usage-table .tier-pill--pro       { background: #dbeafe; color: #1e40af; }
.admin-usage-table .tier-pill--unlimited { background: #ddd6fe; color: #5b21b6; }
.admin-usage-table .tier-pill--admin     { background: #fef3c7; color: #92400e; }
.admin-usage-form { display: inline-flex; gap: 4px; align-items: center; }
.admin-usage-form select { padding: 2px 6px; font-size: 12px; }
.admin-usage-form button { padding: 2px 8px; font-size: 12px; cursor: pointer; }

/* ── Admin roster (merged user list + assistant usage) ─────────────────
   Wide, information-dense table. Let the Admin page use the full main
   width, keep the table contained inside its card (horizontal scroll as a
   safety net on narrow screens), and tighten cells so 11 columns fit. */
.proto .proto-page-admin { max-width: none; }
.proto .proto-table-scroll { overflow-x: auto; }

.proto .proto-table-roster { font-size: 0.78rem; }
.proto .proto-table-roster thead th,
.proto .proto-table-roster tbody td {
  padding: 0.5rem 0.4rem;
  vertical-align: middle;
}
/* Right-aligned, mono-tabular numeric columns (cost, messages, tokens). */
.proto .proto-table-roster th.roster-num,
.proto .proto-table-roster td.roster-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.proto .proto-table-roster .roster-nowrap { white-space: nowrap; }
/* Sortable column headers. */
.proto .proto-table-roster th a.roster-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.proto .proto-table-roster th a.roster-sort:hover { color: var(--proto-accent); }
.proto .proto-table-roster .roster-sort-ind { font-size: 0.72em; opacity: 0.35; }
.proto .proto-table-roster .roster-sort--active { font-weight: 600; color: var(--proto-text); }
.proto .proto-table-roster .roster-sort--active .roster-sort-ind { opacity: 0.9; }
/* Stacked "in / out" caption under the Tokens header. */
.proto .proto-table-roster .roster-sub {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--proto-muted);
}
.proto .proto-table-roster .roster-sep { color: var(--proto-muted); margin: 0 0.35rem; }
/* Compact inline tier control. */
.proto .proto-table-roster .roster-tier-form {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
}
.proto .proto-table-roster .roster-tier-form select {
  padding: 1px 3px;
  font-size: 0.72rem;
}
/* Per-row actions: short labels side by side (full text in title) so the
   column stays narrow and rows stay short. */
.proto .proto-table-roster td.roster-actions { white-space: nowrap; text-align: right; }
/* Stack the per-row actions vertically (one per line) so each label — Edit /
   Reset / Make admin / Delete — reads in full. Side by side they pushed the
   11-column table past its card and clipped the rightmost buttons, so all you
   saw of "Reset" was the left edge of the R. Stacking also shrinks the column
   to the width of its widest button. */
.proto .proto-table-roster .roster-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
/* Each action — a bare link, or a button wrapped in a form — fills the
   column so its label is fully visible. `align-items: stretch` already widens
   the links/forms; the button needs an explicit width since its form isn't a
   flex container. Buttons keep their native inline-flex centering. */
.proto .proto-table-roster .roster-actions-stack > a,
.proto .proto-table-roster .roster-actions-stack > form,
.proto .proto-table-roster .roster-actions-stack > form > button {
  width: 100%;
  margin: 0;
}
.proto .proto-table-roster th.roster-actions-col { width: 1px; }

/* ─────────────────────────────────────────────────────────────────────
   QuickComp public marketing landing (welcome.html) — logged-out, beta.
   ───────────────────────────────────────────────────────────────────── */
.qc-welcome { background: #fafbfc; }
.qc-beta-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b4cd6;
  background: #efeaff;
  border-radius: 999px;
  vertical-align: middle;
}
.qc-welcome-login {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-1, #1a2230);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--border, #d8dde3);
  border-radius: 8px;
}
.qc-welcome-login:hover { background: #fff; }

.qc-welcome-main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.qc-btn {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 10px;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.qc-btn--primary { color: #fff; background: #6b4cd6; box-shadow: 0 2px 8px rgba(107, 76, 214, 0.28); }
.qc-btn--primary:hover { box-shadow: 0 4px 14px rgba(107, 76, 214, 0.36); }
.qc-btn--primary:active { transform: translateY(1px); }

/* Hero */
.qc-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0 56px;
}
.qc-hero-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6b4cd6;
}
.qc-hero-title {
  font-size: 2.7rem; line-height: 1.08; letter-spacing: -0.02em;
  margin: 12px 0 16px; color: var(--ink-1, #141b27);
}
.qc-hero-sub { font-size: 1.08rem; line-height: 1.55; color: var(--ink-2, #44505f); margin: 0 0 28px; max-width: 30em; }
.qc-hero-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.qc-hero-invite { font-size: 0.82rem; color: var(--ink-3, #76828f); }

.qc-hero-visual {
  background: #fff; border: 1px solid var(--border, #e3e7ec); border-radius: 16px;
  padding: 18px; box-shadow: 0 12px 40px rgba(20, 27, 39, 0.10);
}
.qc-hero-searchbar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border, #e3e7ec); border-radius: 10px;
  padding: 12px 14px; font-size: 0.9rem; color: var(--ink-2, #44505f);
}
.qc-hero-searchicon { font-size: 1.1rem; color: #9aa5b1; }
.qc-hero-result { margin-top: 14px; }
.qc-hero-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 2px; border-top: 1px solid var(--border-hairline, #eef1f4);
  font-size: 0.9rem; color: var(--ink-2, #44505f);
}
.qc-hero-result-row strong { color: var(--ink-1, #141b27); }
.qc-pos { color: var(--green, #1e7a3c); }

/* Section scaffolding */
.qc-section-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6b4cd6;
}
.qc-section-title { font-size: 1.8rem; letter-spacing: -0.015em; margin: 10px 0 12px; color: var(--ink-1, #141b27); }
.qc-section-sub { font-size: 1.02rem; line-height: 1.55; color: var(--ink-2, #44505f); margin: 0 auto; max-width: 38em; }

/* Assistant showcase */
.qc-assistant { padding: 56px 0; border-top: 1px solid var(--border-hairline, #eef1f4); }
.qc-assistant-head { text-align: center; margin-bottom: 32px; }
.qc-chat-preview {
  max-width: 720px; margin: 0 auto; background: #fff;
  border: 1px solid var(--border, #e3e7ec); border-radius: 16px;
  padding: 20px; box-shadow: 0 8px 30px rgba(20, 27, 39, 0.07);
}
.qc-chat-q {
  margin: 8px 0 8px auto; max-width: 80%; width: fit-content;
  background: #6b4cd6; color: #fff; padding: 9px 14px; border-radius: 14px 14px 4px 14px;
  font-size: 0.9rem;
}
.qc-chat-a {
  margin: 8px 0; max-width: 92%;
  background: #f3f5f8; color: var(--ink-1, #141b27); padding: 12px 14px;
  border-radius: 14px 14px 14px 4px; font-size: 0.9rem; line-height: 1.5;
}
.qc-chat-a p { margin: 0 0 10px; }
.qc-chat-a p:last-child { margin-bottom: 0; }
.qc-chat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qc-chat-card { background: #fff; border: 1px solid var(--border, #e3e7ec); border-radius: 10px; padding: 10px; }
.qc-chat-card-price { font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.qc-chat-card-pill {
  font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: 999px; background: #e6f4ea; color: #1e7a3c;
}
.qc-chat-card-addr { font-size: 0.78rem; color: var(--ink-2, #44505f); margin-top: 2px; }
.qc-chat-card-stats { font-size: 0.74rem; color: var(--ink-3, #76828f); margin-top: 4px; }
.qc-chat-card-sub { font-size: 0.72rem; color: #6b4cd6; font-style: italic; margin-top: 4px; }

.qc-assistant-points {
  list-style: none; padding: 0; margin: 32px auto 0; max-width: 760px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.qc-assistant-points li { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2, #44505f); padding-left: 22px; position: relative; }
.qc-assistant-points li::before { content: "→"; position: absolute; left: 0; color: #6b4cd6; font-weight: 700; }
.qc-assistant-points strong { color: var(--ink-1, #141b27); }

/* Feature strip */
.qc-features { padding: 56px 0; border-top: 1px solid var(--border-hairline, #eef1f4); text-align: center; }
.qc-features-title { margin-bottom: 28px; }
.qc-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.qc-feature { background: #fff; border: 1px solid var(--border, #e3e7ec); border-radius: 14px; padding: 22px; }
.qc-feature h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ink-1, #141b27); }
.qc-feature p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2, #44505f); }

/* Closing CTA */
.qc-cta-band { text-align: center; padding: 64px 0; border-top: 1px solid var(--border-hairline, #eef1f4); }
.qc-cta-band .qc-section-sub { margin-bottom: 22px; }

.qc-welcome-footer { text-align: center; padding: 28px; font-size: 0.8rem; color: var(--ink-3, #76828f); }

@media (max-width: 760px) {
  .qc-hero { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 36px; }
  .qc-hero-title { font-size: 2.1rem; }
  .qc-assistant-points { grid-template-columns: 1fr; }
  .qc-feature-grid { grid-template-columns: 1fr; }
}