/* CompAtlas application styling.

   The palette below is the brand kit's, reached through the legacy variable
   names the rest of this file already uses.  Repointing rather than renaming:
   500 lines of rules downstream keep working, and there is still exactly one
   place where a colour is decided.  Kit values live in
   /brand/compatlas-brand.css -- change them there first. */
@import url("/brand/compatlas-fonts.css");
@import url("/brand/compatlas-brand.css");

:root {
  --ink: #16202e;              /* ca-ink       */
  --muted: #5a6472;            /* ca-slate     */
  --line: #dde3ea;             /* ca-border    */
  --bg: #f4f6f8;               /* ca-surface   */
  --panel: #ffffff;
  --navy: #1f3a6e;             /* ca-navy      */
  --navy-deep: #152a52;
  --navy-soft: #e8edf5;        /* ca-navy-tint */
  --olive: #9a9500;            /* the mark. never body text */
  --olive-deep: #7a7600;       /* olive that carries text on white */
  --olive-light: #bfba3c;      /* olive that carries text on navy */
  --olive-wash: #f2f1dc;
  --green: #157347;
  --green-bg: #d6f0e0;
  --amber: #8a6100;
  --amber-bg: #fdf0c8;
  --red: #b02a37;
  --red-bg: #fadbdd;
  --grey-bg: #eceef2;

  --font-display: Archivo, "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius-sm: 4px;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 var(--font-body);
  color: var(--ink);
  background: var(--bg);
}

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

/* A data product lines its digits up.  The kit calls this non-optional, and it
   is the single change that most makes a table of prices readable. */
td, th, .num, .kpi-figure, input[type="number"] { font-variant-numeric: tabular-nums; }

/* Visible on navy and on white alike, which a navy focus ring is not. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--olive-light);
  outline-offset: 2px;
}

/* ---------- top bar ---------- */
/* Kit spec: navy, 54px minimum, reverse lockup at 26px on the left, nav
   wrapping rather than overflowing, active item on a 20% white fill. */
.topbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 6px 20px; min-height: 54px;
  background: var(--navy); color: #fff;
  border-bottom: 2px solid var(--olive);
}
.topbar .brand { display: flex; align-items: center; text-decoration: none; }
.topbar .brand img { height: 26px; width: auto; display: block; }
/* The wordmark if the artwork ever fails to load -- never a redrawn logo. */
.topbar .brand-text {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: .2px; color: #fff;
}
/* Nine items no longer fit on one line at a laptop width, and an overflowing
   nav pushed the whole page into a horizontal scroll.  Wrapping keeps every
   screen reachable without the page sliding sideways. */
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 2px; margin-right: auto; }
.topbar nav a {
  color: #c9d5ee; text-decoration: none; padding: 6px 10px;
  border-radius: var(--radius-sm); font-weight: 500;
}
.topbar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar nav a.on { background: rgba(255,255,255,.2); color: #fff; }

/* margin-left:auto keeps the pair on the right even when the nav pushes them
   onto a second row -- without it they wrap to the far left, under the logo. */
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* Scoped to .topbar for specificity: a bare .btn-onnavy ties with .btn on one
   class each, and .btn wins on source order further down this file. */
.topbar .btn-onnavy {
  background: #fff; border-color: #fff; color: var(--navy); font-weight: 600;
}
.topbar .btn-onnavy:hover {
  background: var(--navy-soft); border-color: var(--navy-soft); color: var(--navy-deep);
}

main { padding: 20px; max-width: 1900px; margin: 0 auto; }

/* ---------- generic ---------- */
h1 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 4px; }
h2, h3 { font-family: var(--font-display); }
h2 { font-size: 16px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
h3 { font-size: 15px; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 16px; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px;
}
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.row > .panel { flex: 1 1 340px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: 5px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: #f0f3f8; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-excel { background: var(--green); border-color: var(--green); color: #fff; }
.btn-excel:hover { background: #10603a; color: #fff; }
.btn-danger { color: var(--red); border-color: #e6b8bd; }
.btn-sm { padding: 3px 8px; font-size: 12px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-fresh { background: var(--green-bg); color: var(--green); }
.badge-aging { background: var(--amber-bg); color: var(--amber); }
.badge-stale { background: var(--red-bg); color: var(--red); }
.badge-none  { background: var(--grey-bg); color: var(--muted); }
.badge-gap   { background: #ffe8cc; color: #9a4a00; text-decoration: none; }
a.badge-gap:hover { background: #ffd9a8; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px;
  background: var(--navy-soft); color: var(--navy); font-weight: 600; white-space: nowrap;
}
.pill-coming_soon { background: #e3edff; color: #1f4fa8; }
.pill-active { background: var(--green-bg); color: var(--green); }
.pill-sold_out { background: var(--grey-bg); color: #4b5563; }
.pill-subject { background: var(--red-bg); color: var(--red); }
.pill-untagged { background: #fff3d6; color: #8a6100; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.tabs a {
  padding: 8px 16px; text-decoration: none; color: var(--muted); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.tabs a .n { color: var(--muted); font-weight: 500; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: 13px; background: #fff; min-width: 140px;
}
.field textarea { min-height: 60px; resize: vertical; }
.field.wide input, .field.wide textarea, .field.wide select { min-width: 320px; }
.field.check { flex-direction: row; align-items: center; gap: 6px; min-width: 130px; }
.field.check label { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--ink); font-weight: 500; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
th, td { padding: 6px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  background: #eef1f6; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: #46536b; font-weight: 700; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
th a { color: inherit; text-decoration: none; display: block; }
th a:hover { color: var(--navy); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f7f9fc; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.scroller { overflow: auto; max-height: calc(100vh - 250px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }

tr.group-head td {
  background: #e7ecf5; font-weight: 700; border-top: 2px solid #c8d3e6;
}
tr.group-head a { color: var(--navy); text-decoration: none; }
tr.group-head a:hover { text-decoration: underline; }
tr.sold-out td { color: #6b7280; }

.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- detail ---------- */
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }
#map { height: 260px; border-radius: 6px; border: 1px solid var(--line); }
.map-missing { height: 120px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--grey-bg); border-radius: 6px; text-align: center; padding: 12px; }

.flash { padding: 10px 14px; border-radius: 6px; background: var(--green-bg); color: var(--green);
  margin-bottom: 14px; font-weight: 600; }
.flash-gap { background: #fff4e5; color: #9a4a00; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.flash-gap a { color: #9a4a00; }

.form-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 0 0 16px; }
legend { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; padding: 0 6px; }

/* ---------- study workbench ---------- */
.study-layout { display: flex; gap: 16px; align-items: flex-start; }
.study-sidebar { flex: 0 0 300px; position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow: auto; }
.study-main { flex: 1 1 auto; min-width: 0; }

.side-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.side-filters .field select { min-width: 0; width: 100%; }

.comp-list { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.comp-item { display: flex; gap: 8px; align-items: flex-start; padding: 4px 6px; border-radius: 4px;
  font-size: 13px; cursor: pointer; }
.comp-item:hover { background: #f2f5fa; }
.comp-item input { margin-top: 3px; flex: 0 0 auto; }
.comp-item .pill { font-size: 10px; padding: 1px 6px; }

.chart { width: 100%; min-height: 460px; }
.chart-toggles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.toggle-sep { width: 1px; height: 18px; background: var(--line); }

.chart-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.key { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.dashline { width: 22px; height: 0; display: inline-block; border-top: 3px solid var(--muted); }
.dashline.dashed { border-top-style: dashed; }

.warn-note { background: #fff4e5; color: #9a4a00; border-radius: 6px; padding: 8px 12px;
  font-size: 13px; margin: 0 0 10px; }

tr.median-row td { background: #eef1f6; border-top: 2px solid #c8d3e6; }
tr.median-row.sub td { background: #f6f8fc; border-top: 1px solid var(--line); font-size: 12px; }
tr.is-subject td { background: #fff5f6; }
tr.is-subject:hover td { background: #ffeced; }

/* ---------- expand a chart to full screen ---------- */
body.has-expanded { overflow: hidden; }
.panel.chart-expanded {
  position: fixed; inset: 12px; z-index: 60; margin: 0; overflow: auto;
  box-shadow: 0 18px 60px rgba(15, 25, 45, .28);
}
.expand-btn { margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- subject scenario pricing ---------- */
.scenario-table { font-size: 13px; }
.scenario-table th { position: static; }
.scenario-input {
  width: 118px; text-align: right; padding: 5px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 5px; background: #fffdfd;
}
.scenario-input:focus { outline: 2px solid #c8102e; outline-offset: -1px; border-color: #c8102e; }
.scenario-delta.over  { color: var(--red); font-weight: 600; }
.scenario-delta.under { color: var(--green); font-weight: 600; }
#scenario { border-left: 3px solid #c8102e; }

/* ---------- prospects ---------- */
.pill-prospect { background: #e8e3ff; color: #4a3aa7; }

/* ---------- delete confirmation ---------- */
.delete-menu { position: relative; }
.delete-menu > summary { list-style: none; }
.delete-menu > summary::-webkit-details-marker { display: none; }
.delete-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 420px;
  background: #fff; border: 1px solid #e6b8bd; border-radius: 8px; padding: 16px;
  box-shadow: 0 14px 44px rgba(15, 25, 45, .22); text-align: left;
}
.delete-panel h3 { margin: 0 0 8px; color: var(--red); }
.delete-panel p { margin: 0 0 8px; font-size: 13px; }
.delete-panel ul { margin: 0 0 10px; padding-left: 20px; font-size: 13px; }
.delete-panel li { margin-bottom: 2px; }
.delete-panel form { display: flex; gap: 8px; margin-top: 4px; }

.tabs a.tab-prospect { margin-left: auto; color: #4a3aa7; }
.tabs a.tab-prospect.on { border-bottom-color: #4a3aa7; }

.scenario-footer { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.scenario-choice { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.scenario-choice strong { font-size: 13px; }
.btn-commit { background: #c8102e; border-color: #c8102e; color: #fff; }
.btn-commit:hover { background: #a50d26; color: #fff; }

/* ---------- comp picker map ---------- */
.comp-map-wrap { margin-bottom: 12px; }
.comp-map-wrap > summary { list-style: none; width: 100%; text-align: left; }
.comp-map-wrap > summary::-webkit-details-marker { display: none; }
#comp-map { height: 300px; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; }
.comp-item.flash-target { background: #fff3d6; }
.pill-product { background: #eef1f6; color: #46536b; }
.scenario-net { font-variant-numeric: tabular-nums; }

/* ---------- scenario footer: three parallel choices ---------- */
.scenario-footer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.scenario-choice {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fbfcfe;
}
.scenario-choice h4 { margin: 0; font-size: 13px; }
.scenario-choice p { margin: 0; font-size: 12px; color: var(--muted); flex: 1 1 auto; }
/* Every card ends with the same 34px action row, so the three buttons line up
   whatever length the description above them runs to. */
.scenario-choice > *:last-child { margin-top: auto; }
.choice-form { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.choice-action { display: flex; align-items: stretch; height: 34px; }
.choice-action .btn { flex: 1 1 auto; text-align: center; display: flex;
  align-items: center; justify-content: center; }
.asof-label { font-size: 11px; color: var(--muted); display: flex;
  align-items: center; gap: 6px; justify-content: space-between; }
.asof-label input { padding: 3px 6px; font-size: 12px; border: 1px solid var(--line);
  border-radius: 5px; flex: 1 1 auto; }

/* ---------- map toolbar and full-screen mode ---------- */
.map-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.comp-map-wrap.map-expanded {
  position: fixed; inset: 10px; z-index: 70; background: #fff; margin: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  box-shadow: 0 18px 60px rgba(15, 25, 45, .3); display: flex; flex-direction: column;
}
.comp-map-wrap.map-expanded #comp-map { width: 100%; }  /* height set in JS */
.comp-map-wrap.map-expanded .map-toolbar { margin-bottom: 8px; }

/* ---------- map marker legend ---------- */
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  font-size: 11px; color: var(--muted); margin-top: 8px; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.map-legend .sep { width: 1px; height: 14px; background: var(--line); padding: 0; }
.comp-marker { background: none; border: none; }
.comp-marker svg { display: block; filter: drop-shadow(0 1px 2px rgba(15,25,45,.25)); }
.comp-marker.is-selected svg { filter: drop-shadow(0 2px 4px rgba(15,25,45,.4)); }

/* ---------- shared comp filters (sidebar + inside the map) ---------- */
.comp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.comp-filters label { display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 600; flex: 1 1 90px; }
.comp-filters select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: 13px; background: #fff; min-width: 0; width: 100%; }
.filter-summary { font-size: 11px; margin: 0 0 10px; }

.map-filters { margin-top: 8px; }
.comp-map-wrap.map-expanded .map-filters {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px 2px; margin: 0 0 8px;
}
.comp-map-wrap.map-expanded .comp-filters label { flex: 0 1 190px; }

.btn-prospect { background: #fff; border-color: #c8102e; color: #c8102e; font-weight: 600; }
.btn-prospect:hover { background: #fdeaec; color: #c8102e; }
.tabs a.tab-ours { color: #b02a37; }
.tabs a.tab-ours.on { border-bottom-color: #b02a37; }

/* ---------- duplicate resolution ---------- */
.dup-actions { min-width: 210px; }
.dup-keep { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.dup-keep select { display: block; width: 100%; margin-top: 3px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 12px; }
.dup-buttons { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- collapsible panels ---------- */
.panel.collapsible > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.panel.collapsible > summary::-webkit-details-marker { display: none; }
.panel.collapsible > summary h2 { margin: 0; }
.panel.collapsible > summary:hover h2 { color: var(--navy); }
.panel.collapsible > summary .chev { color: var(--muted); transition: transform .15s; }
.panel.collapsible[open] > summary { margin-bottom: 12px; }
.panel.collapsible[open] > summary .chev { transform: rotate(180deg); }

/* ---------- trend line toggles ---------- */
.trend-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.trend-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 700; }
.trend-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.trend-swatch { width: 16px; height: 0; border-top: 2px dotted currentColor;
  display: inline-block; }

/* ---------- comp comparison cards ---------- */
.compare-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.compare-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  background: #fbfcfe; }
.compare-card.is-subject { border-color: #e6b8bd; background: #fff7f8; }
.compare-card h4 { margin: 0 0 2px; font-size: 14px; }
.compare-sub { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.compare-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr;
  gap: 5px 10px; margin: 0; font-size: 12px; }
.compare-kv dt { color: var(--muted); font-weight: 600; }
.compare-kv dd { margin: 0; }
.sold-bar { height: 5px; background: var(--line); border-radius: 3px; margin-top: 4px;
  overflow: hidden; }
.sold-bar span { display: block; height: 100%; background: var(--green); }
.compare-card.is-subject .sold-bar span { background: #c8102e; }
.price-cut { color: var(--red); font-weight: 600; }

/* ---------- sortable table headings ---------- */
th .sort-link { color: inherit; text-decoration: none; display: inline-flex;
  align-items: center; gap: 4px; white-space: nowrap; }
th .sort-link:hover { color: var(--navy); text-decoration: underline; }
th .sort-link.on { color: var(--navy); }
.sort-arrow { font-size: 9px; line-height: 1; color: var(--muted); }
th.num .sort-link { justify-content: flex-end; }

/* ---------- stale-details notice ---------- */
.detail-stale { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.detail-stale form { margin: 0; }

/* ---------- standalone map screen ---------- */
.map-shell { display: flex; flex-direction: column; gap: 10px; }
.map-controls { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 10px; }
.map-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.map-filters label { display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700; }
.map-filters select { font-size: 13px; padding: 4px 6px; }
.map-status { display: flex; align-items: center; gap: 10px; font-size: 12px;
  color: var(--muted); }
/* The map and its legend share a frame so the legend can float inside it.
   Sized off the viewport minus the ribbon, filters and the tile beneath. */
.map-frame { position: relative; }
/* A starting height only -- map.js measures the real room left below the
   filter bar and sets the height from that.  min-height is deliberately low:
   on a short window a tall map pushes its own legend off the screen. */
.market-map { height: calc(100vh - 330px); min-height: 320px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); }

/* OSM at full strength is louder than several of the marker colours.  Applied
   to the tile pane only, so pins, hulls and controls keep their true colour. */
.market-map.basemap-soft .leaflet-tile-pane {
  filter: saturate(.42) brightness(1.06) contrast(.92);
}

/* Inside the map, bottom-left: the legend used to sit under a viewport-tall
   map, which put it below the fold on every laptop.  Capped and scrollable so
   colour-by-builder cannot push it off the top. */
.map-frame .map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 500;
  max-width: min(560px, calc(100% - 90px)); max-height: 40%; overflow-y: auto;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 10px; margin: 0;
  box-shadow: 0 2px 8px rgba(15,25,45,.16);
}
.map-frame .map-legend:empty { display: none; }
/* Set by map.js only when the map cannot fit the window; left and max-width
   come with it so the legend stays over the map rather than the page edge. */
.map-frame .map-legend.is-pinned { position: fixed; bottom: 12px; }
.legend-title { font-weight: 700; color: var(--ink); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- what is on screen right now ---------- */
.visible-panel { margin-top: 12px; }
.visible-note { font-size: 12px; margin: 0 0 10px; }
.visible-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--line);
  border-radius: var(--radius); }
.visible-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.visible-table th, .visible-table td { padding: 5px 8px; text-align: left;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.visible-table thead th { position: sticky; top: 0; background: var(--navy);
  color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.visible-table tbody tr:nth-child(even) { background: var(--bg); }
.visible-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- plans inside a map popup ---------- */
.pin-plans { margin: 8px 0; max-height: 190px; overflow-y: auto; }
.pin-plan-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pin-plan-table th, .pin-plan-table td { padding: 3px 6px; text-align: left;
  border-bottom: 1px solid var(--line); }
.pin-plan-table thead th { color: var(--muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: .3px; }
.pin-plan-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pin-inc { margin-top: 5px; font-size: 11px; color: var(--olive-deep); font-weight: 600; }
.map-pin { background: none; border: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: 12px; }
.legend-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 700; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); }
.pin-title { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pin-sub { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.pin-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  margin: 0 0 8px; font-size: 12px; }
.pin-kv dt { color: var(--muted); font-weight: 600; }
.pin-kv dd { margin: 0; }
.pin-open { display: inline-block; }

/* ---------- map tools, selection and placement ---------- */
.map-tools { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--line); }
.tool-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-tools .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.market-map.is-drawing { cursor: crosshair; }
.market-map.is-placing { cursor: crosshair; }
.map-heat { position: absolute; left: 0; top: 0; pointer-events: none; opacity: .5; }

.map-selbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 10px 12px; border: 1px solid #b9d4f5; border-radius: 8px;
  background: #f2f8ff; }
.map-selbar label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; }
.map-selbar select, .map-selbar input { font-size: 13px; padding: 4px 6px; }
.map-selbar > strong { align-self: center; }

.map-placebar { display: flex; gap: 10px; align-items: center; padding: 8px 12px;
  border: 1px solid #f0d28a; border-radius: 8px; background: #fffaf0; font-size: 13px; }

.unplaced-panel { margin-top: 12px; }
.unplaced-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-height: 320px; overflow-y: auto; }
.unplaced-list li { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: #fbfcfe; font-size: 13px; }

/* A class with `display: flex` outranks the [hidden] attribute's `display:
   none`, so anything toggled by `hidden` needs this or it never hides. */
[hidden] { display: none !important; }

/* ---------- address worklist ---------- */
.address-table { width: 100%; }
.address-table input { font-size: 13px; padding: 5px 7px; width: 100%;
  border: 1px solid var(--line); border-radius: 5px; }
.address-table .addr-city { max-width: 150px; }
.address-table input.saved { border-color: var(--green); background: #f5fdf7; }
.address-table td { vertical-align: top; }

/* ---------- importers ---------- */
.import-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe; }
.upload-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 16px 0 6px; }
.week-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.week-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }

.review-actions { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.review-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: none; }
.review-name { min-width: 220px; flex: 1 1 auto; font-size: 13px; }
.review-pick { flex: 0 1 380px; }
.match-pick { width: 100%; font-size: 13px; padding: 4px 6px; }
.untracked-grid { max-height: 460px; overflow-y: auto; }

/* ---------- resale batches on the study chart ---------- */
.resale-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.resale-upload { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.resale-upload input[type="text"] { font-size: 12px; padding: 3px 6px; max-width: 150px; }
.resale-upload input[type="file"] { font-size: 11px; max-width: 190px; }
.btn.linkish { border: none; background: none; color: var(--muted); padding: 0 4px;
  font-size: 14px; line-height: 1; }
.btn.linkish:hover { color: var(--red); }

/* The create option leads the list and is set apart: it makes a record, the
   others only file numbers against one that exists. */
.match-pick .opt-new { font-weight: 700; color: var(--navy); }
.upload-list { max-height: 260px; overflow-y: auto; }
.upload-list li { padding: 5px 0; }

/* ---------- backups ---------- */
.backup-action { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.restore-steps { font-size: 13px; color: var(--ink); margin: 10px 0 0; padding-left: 20px; }
.restore-steps li { margin-bottom: 6px; }
.restore-steps code { background: #eef1f6; padding: 1px 5px; border-radius: 4px;
  font-size: 12px; }
.pill-miles { background: #eef4ff; color: #2b4a7d; border: 1px solid #cfdcf5; }

/* ---------- report buttons ---------- */
.report-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 8px; }
.assumptions-box { width: 100%; font-size: 13px; padding: 8px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 6px; font-family: inherit; }

.address-table .url-cell { display: flex; align-items: center; gap: 5px; }
.address-table .url-input { flex: 1 1 auto; min-width: 0; }
.url-open { text-decoration: none; color: var(--muted); font-size: 13px; padding: 0 2px; }
.url-open:hover { color: var(--navy); }

/* Compact table for inline histories -- the MLS uploads on a study, and any
   other "what produced this" list that should not compete with the real data. */
.resale-history { margin: 6px 0 0; }
.resale-history > summary { padding: 2px 0; }
table.mini { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
table.mini th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 8px 3px 0; }
table.mini th.num, table.mini td.num { text-align: right; padding-right: 12px; }
table.mini td { padding: 3px 8px 3px 0; border-top: 1px solid var(--line); }

/* Add-plans grid: several plans entered together rather than one at a time. */
.table-scroll { overflow-x: auto; }
table.plan-grid { border-collapse: collapse; font-size: 13px; }
table.plan-grid th { text-align: left; font-weight: 600; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 0 6px 4px 0; }
table.plan-grid th.num { text-align: right; }
table.plan-grid td { padding: 2px 6px 2px 0; }
table.plan-grid input, table.plan-grid select { padding: 4px 6px; font-size: 13px; }
table.plan-grid td.num input { text-align: right; }
.inline-field { font-size: 12px; color: var(--muted); margin-right: 12px; }
.inline-field input { margin-left: 6px; }

/* A study may name two subjects -- a site's current scheme and a proposed one.
   Both are red, because red means subject; the second is drawn hollow. */
.swatch.hollow { background: #fff; border: 2px solid #c8102e; }

/* ---------- bulk pricing review ---------- */
.import-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-red   { background: var(--red-bg);   color: var(--red); }
.count { color: var(--muted); font-weight: 500; font-size: 13px; }
.import-row { border-top: 1px solid var(--line); padding: 10px 0; }
.import-row:first-of-type { border-top: 0; }
.import-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.import-head .approve { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.import-head .picker { max-width: 340px; }
.import-row table.mini { margin-top: 6px; }
.import-row td.up   { color: var(--red); }
.import-row td.down { color: var(--green); }
.import-row tr.needs-pick td { background: var(--amber-bg); }

/* ---------- data-gap worklist ---------- */
.worklist-note { font-size: 13px; margin: 0 0 12px; max-width: 78ch; }
.field-cell { display: inline-flex; align-items: center; gap: 5px; }
.field-cell .suffix { font-size: 11px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 4px; }
.address-table input.saved { border-color: var(--green); }
tr.row-removed { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { tr.row-removed { transition: none; } }

/* "Not our market" is a one-off correction, not something to offer a hundred
   times over.  It stays a keystroke away but out of the way until wanted. */
.address-table .mark-outside { opacity: 0; transition: opacity .12s ease; }
.address-table tr:hover .mark-outside,
.address-table .mark-outside:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .address-table .mark-outside { transition: none; }
}
@media (hover: none) { .address-table .mark-outside { opacity: 1; } }

/* Download the gaps, fill them in, upload them back -- the two halves sit
   together so the round trip is obvious. */
.gaps-exchange { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gaps-exchange .upload-form { display: flex; align-items: center; gap: 6px; }

/* ---------- Market Stats ----------
   Deliberately compact.  The grid above it is sized to whatever room is left,
   so every pixel this panel takes is a row of the table you cannot see. */
.panel-tight { padding: 11px 14px; margin-bottom: 10px; }
.stats-panel { margin-top: 12px; padding: 12px 16px 14px; }
.stats-title { font-family: var(--font-display); font-weight: 500; font-size: 17px;
  margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink); }
.stats-scope { margin: 0; font-size: 12px; max-width: 44ch; text-align: right; }
.stats-table { width: 100%; border-collapse: collapse; margin: 9px 0 0; font-size: 12.5px; }
.stats-table th, .stats-table td { padding: 3px 10px; text-align: left;
  border-bottom: 1px solid var(--line); }
.stats-table thead th { background: var(--navy); color: #fff; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px; }
.stats-table tbody tr:nth-child(even) { background: var(--bg); }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-table tbody td:first-child { font-weight: 500; }
/* Stated, not scored: a larger incentive and a larger price move in opposite
   directions, so a red/green here would be inventing a judgement. */
.stats-delta { font-family: var(--font-mono); font-weight: 500; }
.stats-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; max-width: 110ch; }
.stats-builders { margin: 6px 0 0; font-size: 11.5px; }
.stats-builders summary { cursor: pointer; color: var(--navy); font-weight: 600; }
/* Capped and scrollable: 33 builders on four wrapped lines would push the grid
   down by more than the list is worth. */
.stats-builder-list { margin: 6px 0 0; color: var(--muted); line-height: 1.6;
  max-width: 110ch; max-height: 90px; overflow-y: auto; }

/* ---------- Studies ---------- */
/* New study leads: wider than the note beside it, and first in the source so
   it is also first for a keyboard or a screen reader. */
.study-top { align-items: stretch; margin-bottom: 4px; }
.study-new { flex: 1 1 460px; }
.study-aside { flex: 1 1 320px; background: var(--navy-soft); border-color: #cfdaee; }
.study-new .field { margin-bottom: 12px; }
.study-new select[multiple] { width: 100%; min-width: 0; }
.study-new textarea { width: 100%; }
.field-note { font-size: 12px; margin: 6px 0 0; line-height: 1.5; }
.subject-swatch { color: var(--red); }
.study-steps { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.study-steps li { margin-bottom: 6px; }
.study-aside-note { font-size: 12px; margin: 12px 0 0; line-height: 1.5; }

.studies-scroller { max-height: 360px; }
.studies-table { width: 100%; border-collapse: collapse; }
.studies-table th, .studies-table td { padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.studies-table thead th { position: sticky; top: 0; background: var(--navy);
  color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.studies-table tbody tr:nth-child(even) { background: var(--bg); }
.studies-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Notes are free text and can run long; a column that grows without limit
   pushes the actions off the right of the table. */
.study-notes { max-width: 280px; font-size: 12px; color: var(--muted); }
.study-actions { display: flex; gap: 6px; }
.study-actions form { display: inline; }

/* ---------- resale upload, in the sidebar ---------- */
/* Narrow by design: it lives under the comp controls now, so the chart column
   keeps the width it needs. */
.side-resales {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.side-resale-note { font-size: 11.5px; line-height: 1.45; margin: 4px 0 8px; }
.side-resale-form { display: flex; flex-direction: column; gap: 8px; }
.side-resale-field { display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700; }
.side-resale-field input, .side-resale-field select { width: 100%; min-width: 0; }
.side-resale-field input[type="file"] { font-size: 11px; }

/* ---------- overwrite warning ---------- */
.warn-block {
  margin: 6px 0 8px; padding: 7px 10px; font-size: 11.5px; line-height: 1.45;
  background: var(--amber-bg); border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm); color: #6b4b00;
}
.warn-block ul { margin: 0; padding-left: 16px; }
.warn-block li { margin-bottom: 2px; }

/* ---------- Below Market Rate ---------- */
/* Olive is the identity colour and never means "good"; BMR is not a judgement
   about a plan, it is a fact about how it is priced, so it borrows the neutral
   badge and distinguishes the two states by outline rather than by colour. */
.bmr-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: 1px;
  background: var(--navy-soft); color: var(--navy); border: 1px solid #c6d3ea;
}
/* Unconfirmed: dashed, so an unresolved guess never reads as a settled fact. */
.bmr-possible { border-style: dashed; background: transparent; color: var(--muted);
  border-color: var(--muted); }

.bmr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bmr-table th, .bmr-table td { padding: 6px 10px; text-align: left;
  border-bottom: 1px solid var(--line); }
.bmr-table thead th { background: var(--navy); color: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; }
.bmr-table tbody tr:nth-child(even) { background: var(--bg); }
.bmr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bmr-decide { display: flex; gap: 5px; }
.panel-note { font-size: 12px; margin: 0 0 12px; max-width: 92ch; line-height: 1.5; }

/* ---------- Data sub-tabs ---------- */
/* Under the ribbon, not in it: these six are one destination with rooms, and
   promoting them to the ribbon was what made it nine items wide. */
.subtabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 16px;
  border-bottom: 1px solid var(--line); }
.subtabs a { padding: 7px 14px; text-decoration: none; color: var(--muted);
  font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); background: var(--bg); }
.subtabs a.on { color: var(--navy); border-bottom-color: var(--olive); }
.gaps-note { flex-basis: 100%; font-size: 12px; margin: 6px 0 0; max-width: 78ch; }

/* ---------- worksheet round trip ---------- */
.worksheet-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.review-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.review-table th, .review-table td { padding: 5px 9px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.review-table thead th { background: var(--navy); color: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; }
.review-table tbody tr:nth-child(even) { background: var(--bg); }
/* A row that replaces something already on file, rather than filling a blank. */
.review-table tr.has-note { background: var(--amber-bg); }
.review-where { font-size: 11px; }
.review-why { font-size: 12px; color: var(--muted); max-width: 46ch; }
.review-actions { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------- */
/* Signed-in identity, and the People screen                              */
/* --------------------------------------------------------------------- */
/* Who you are, on the navy ribbon.  Name links to your own account; the
   sign-out is a POST, so no link anyone follows can end your session. */
.whoami { display: flex; align-items: center; gap: 8px; }
.whoami > a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 2px;
  white-space: nowrap;
}
.whoami > a:hover { color: #fff; text-decoration: underline; }

/* A form that has to sit inside a table cell or a row of buttons without
   pushing anything onto its own line. */
.inline-form { display: inline; margin: 0; }
.inline-form select { padding: 3px 6px; font-size: 13px; }

/* A deactivated person: still listed, because their name is on records going
   back years, but visibly not one of the people who can sign in. */
tr.row-off td { opacity: .55; }

/* Shown exactly once, and long enough to select in one go. */
.setup-link {
  flex: 1 1 320px;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line, #d9e0ea);
  border-radius: 5px;
  background: #f7f9fc;
}

/* Inside a table cell the standard .actions top margin misaligns the row. */
td .actions { margin-top: 0; }

/* A <fieldset> used only so that `disabled` on it disables every control
   inside -- it must contribute nothing to the layout of its own.  min-width:0
   is the one that matters: a fieldset's default `min-width: min-content`
   stops flex and grid children inside it from ever shrinking. */
.bare-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* --------------------------------------------------------------------- */
/* "This is the laptop copy"                                             */
/* --------------------------------------------------------------------- */
/* Amber rather than red: nothing is broken and nothing is urgent -- it is
   a statement of fact about which database is on screen.  Red here would
   cry wolf every time the app is opened for development. */
.local-copy-bar {
  background: #fff4d6;
  border-bottom: 2px solid #e0a800;
  color: #6b4e00;
  font-size: 13px;
  padding: 7px 16px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.local-copy-bar a {
  color: #6b4e00;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

/* The signed-out screens centre one card on a full-height flex body, so the
   strip has to sit out of that flow rather than become a third flex child. */
.local-copy-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}