/* ============================================================================
   REBO console theme — layered over Pico, scoped to the REBO crawler only.
   Direction: an instrument panel for a housing auto-apply agent. Delftware blue
   structure on cool slate; green = armed/available, amber = reserved/boundary,
   rust = rented. Space Grotesk for figures, Inter for prose.
   ============================================================================ */

:root {
  --ink:        #0f1e2e;
  --ink-soft:   #3a4a5c;
  --surface:    #e9edf1;
  --surface-2:  #dfe4ea;
  --card:       #ffffff;
  --line:       #d3dae2;
  --delft:      #1b5e8c;
  --delft-deep: #123f5f;
  --signal:     #2e7d4f;
  --signal-bg:  #e0efe5;
  --amber:      #9c6a12;
  --amber-bg:   #f4ead2;
  --rust:       #a63a2a;
  --rust-bg:    #f3ddd8;
  --muted-bg:   #e6e9ed;
  --muted-fg:   #57636f;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Retune Pico to the console palette. */
  --pico-font-family: var(--font-body);
  --pico-primary: var(--delft);
  --pico-primary-hover: var(--delft-deep);
  --pico-background-color: var(--surface);
  --pico-border-radius: 10px;
  --pico-font-size: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #eaf1f8;
    --ink-soft:   #b3c1cf;
    --surface:    #0c1620;
    --surface-2:  #111f2c;
    --card:       #14232f;
    --line:       #21323f;
    --delft:      #4a9fd4;
    --delft-deep: #6bb6e4;
    --signal:     #57b97e;
    --signal-bg:  #113124;
    --amber:      #d3a24e;
    --amber-bg:   #33280f;
    --rust:       #e07a63;
    --rust-bg:    #34211c;
    --muted-bg:   #1a2a37;
    --muted-fg:   #8ea0b0;
    --pico-background-color: var(--surface);
  }
}

body {
  background:
    radial-gradient(1200px 480px at 78% -8%, color-mix(in srgb, var(--delft) 12%, transparent), transparent 70%),
    var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ── Header: turn the brand bar into a console strip ───────────────────────── */
.app-header {
  background: linear-gradient(180deg, var(--delft-deep), var(--delft));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 20px -12px rgba(15, 30, 46, 0.6);
  margin-bottom: 1.75rem;
}
.app-brand { font-family: var(--font-display); letter-spacing: 0.02em; font-size: 1.15rem; }
.app-brand-icon { width: 1.4rem; height: 1.4rem; }
.app-nav a { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.01em; }

/* ── Type scale ────────────────────────────────────────────────────────────── */
main.container > h1,
main.container > h2,
.panel h2,
.eyebrow { font-family: var(--font-display); }
main.container > h1 {
  color: var(--ink);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--delft);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ── Agent status ribbon (the thesis) ──────────────────────────────────────── */
.agent {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 1.75rem;
}
.agent-cell {
  background: var(--card);
  padding: 0.85rem 1.15rem;
  flex: 1 1 auto;
  min-width: max-content;
}
.agent-cell.lead { flex: 2 1 220px; }
.agent-cell .k {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-fg);
}
.agent-cell .v {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.agent-cell .v.small { font-size: 1rem; font-weight: 500; }

/* A live status lamp. */
.lamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
}
.lamp::before {
  content: "";
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background: var(--muted-fg);
  box-shadow: 0 0 0 0 transparent;
}
.lamp.on  { color: var(--signal); }
.lamp.on::before  { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-bg); animation: pulse 2.4s ease-in-out infinite; }
.lamp.dry { color: var(--amber); }
.lamp.dry::before { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.lamp.off { color: var(--muted-fg); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--signal-bg); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .lamp.on::before { animation: none; } }

/* ── Panels ────────────────────────────────────────────────────────────────── */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
}
.panel > h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.panel > h2 .count { color: var(--muted-fg); font-weight: 500; font-size: 0.9rem; }

/* ── Affordability funnel gauge (signature) ────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: 0.55rem; }
.funnel-row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.75rem; }
.funnel-row .flabel { font-size: 0.82rem; color: var(--ink-soft); }
.funnel-track { display: block; height: 0.7rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
/* Spans are inline by default, which ignores width/height and hides the fill — force block. */
.funnel-fill { display: block; min-width: 2px; height: 100%; border-radius: 999px; background: var(--delft); transition: width 0.4s ease; }
.funnel-fill.open { background: var(--delft); }
.funnel-fill.scope { background: #3b7fb0; }
.funnel-fill.afford { background: var(--signal); }
.funnel-row .fnum { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.5rem; text-align: right; }

/* ── Status ladder ─────────────────────────────────────────────────────────── */
.ladder { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rung {
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--muted-bg);
  color: var(--muted-fg);
  font-weight: 500;
  border: 1px solid transparent;
}
.rung.reached { background: var(--signal-bg); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 30%, transparent); }
.rung.current { background: var(--delft); color: #fff; }

/* ── Listings: table on wide, cards on narrow ──────────────────────────────── */
.pipeline { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.pipeline table { margin: 0; font-family: var(--font-body); font-size: 0.9rem; }
.pipeline thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.pipeline tbody td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.pipeline tbody tr:last-child td { border-bottom: none; }
.pipeline .num { font-variant-numeric: tabular-nums; }
.pipeline .addr { font-weight: 500; }
.pipeline .addr a { text-decoration: none; }
.pipeline .addr a:hover { text-decoration: underline; }

tr.applied td { opacity: 0.5; }
tr.applied td.applied-cell, tr.applied td.status-cell { opacity: 1; }

/* Badges reworked into console chips. */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap;
}
.badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.9; }
.badge-available { background: var(--signal-bg); color: var(--signal); }
.badge-reserved, .badge-optioned { background: var(--amber-bg); color: var(--amber); }
.badge-rented    { background: var(--rust-bg); color: var(--rust); }
.badge-unknown, .badge-removed { background: var(--muted-bg); color: var(--muted-fg); }

.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; color: var(--delft);
}
.pill.interest { color: var(--signal); }
.mono-sub { color: var(--muted-fg); font-size: 0.8rem; }

/* Applied checkbox → a tidy square. */
.applied-cell { text-align: center; }
.applied-toggle { width: 1.1rem; height: 1.1rem; accent-color: var(--signal); cursor: pointer; }

/* Sort headers */
.pipeline thead a { color: inherit; text-decoration: none; white-space: nowrap; }
.pipeline thead a:hover { color: var(--delft); }
.sort-ind { font-size: 0.7em; opacity: 0.7; }

/* Alerts */
.flash { border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; border: 1px solid transparent; }
.flash.ok   { background: var(--signal-bg); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 25%, transparent); }
.flash.err  { background: var(--rust-bg); color: var(--rust); border-color: color-mix(in srgb, var(--rust) 25%, transparent); }

/* Definition rows for the Control page */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; align-items: baseline; }
.dl dt { color: var(--muted-fg); font-size: 0.85rem; }
.dl dd { margin: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

time { white-space: nowrap; }

/* ── Mobile: collapse the listings table into cards ────────────────────────── */
@media (max-width: 720px) {
  .agent-cell { flex: 1 1 45%; }
  .pipeline thead { display: none; }
  .pipeline table, .pipeline tbody, .pipeline tr, .pipeline td { display: block; width: 100%; }
  .pipeline tr {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "addr    applied"
      "status  price"
      "seen    price";
    gap: 0.35rem 0.9rem;
    align-items: center;
  }
  .pipeline tbody tr:last-child { border-bottom: none; }
  .pipeline td { border: none !important; padding: 0; }
  .pipeline td.addr { grid-area: addr; }
  .pipeline td.status-cell { grid-area: status; justify-self: start; }
  .pipeline td.price-cell { grid-area: price; justify-self: end; align-self: center; font-family: var(--font-display); font-weight: 600; }
  .pipeline td.seen-cell { grid-area: seen; color: var(--muted-fg); font-size: 0.8rem; }
  .pipeline td.applied-cell { grid-area: applied; justify-self: end; align-self: start; }
  /* Secondary columns fold away on narrow screens. */
  .pipeline td.hide-narrow { display: none; }
}