/* Review Intelligence Terminal - dark executive terminal theme */
:root {
  color-scheme: dark;
  --bg: #070b12;
  --panel: #0e1420;
  --panel-2: #121a29;
  --panel-3: #172236;
  --line: #1e2a3d;
  --line-2: #2a3850;
  --text: #e6edf7;
  --text-2: #b7c3d6;
  --muted: #8b9bb4;
  --dim: #5d6b82;
  --amber: #f5a623;
  --amber-2: #c98500;
  --amber-soft: rgba(245, 166, 35, 0.14);
  --up: #2fbf71;
  --up-soft: rgba(47, 191, 113, 0.14);
  --down: #e66767;
  --down-soft: rgba(230, 103, 103, 0.14);
  --blue: #3987e5;
  --s1: #c98500; --s2: #3987e5; --s3: #d95926; --s4: #199e70; --s5: #9085e9; --s6: #d55181; --s7: #008300; --s8: #e66767;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.small { font-size: 12px; }
.tiny { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
[hidden] { display: none !important; }

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: #05080e; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 3px; background: linear-gradient(135deg, var(--amber) 0%, #ff7a18 100%); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 12px; background: linear-gradient(to top right, transparent 46%, #05080e 47%, #05080e 55%, transparent 56%); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.brand-tag { font-size: 11px; color: var(--muted); margin-top: 2px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--amber); border-bottom-color: var(--amber); }
.status { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.status-item { display: flex; flex-direction: column; line-height: 1.15; }
.status-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.status-value { font-size: 12px; color: var(--text-2); }

/* ---------- ticker ---------- */
.ticker { background: #0a0f18; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; height: 30px; display: flex; align-items: center; }
.ticker-track { display: inline-flex; gap: 34px; padding-left: 100%; animation: tick 180s linear infinite; font-family: var(--mono); font-size: 12px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; gap: 8px; align-items: center; color: var(--text-2); }
.ticker-item b { color: var(--text); font-weight: 500; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; padding-left: 12px; } }

.banner { background: var(--amber-soft); border-bottom: 1px solid rgba(245,166,35,.35); color: #ffd58a; padding: 8px 20px; font-size: 13px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.banner a, .banner button { color: var(--amber); font-weight: 600; }
.banner .btn-primary { color: #1a1200; }

/* ---------- layout ---------- */
.view { flex: 1; padding: 18px 20px 40px; max-width: 1600px; width: 100%; margin: 0 auto; }
.loading { color: var(--muted); padding: 40px; text-align: center; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-head .crumbs { font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.page-head .crumbs a:hover { color: var(--amber); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
@media screen and (max-width: 1100px) { .grid-4, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media screen and (max-width: 760px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } .span-2, .span-3 { grid-column: auto; } .status { display: none; } .view { padding: 12px; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.panel-head .meta { font-size: 11px; color: var(--muted); }
.panel-head .meta .btn { margin-left: 8px; vertical-align: middle; }
.panel-body { padding: 12px; }
.panel-body.flush { padding: 0; }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 340px; }
.chart-box.short { height: 200px; }

/* ---------- KPI tiles ---------- */
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* a tile never clips: a long name wraps, and a subtitle is often the caveat that makes the number true ("a ceiling") */
.kpi-value { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--text); overflow-wrap: break-word; }
.kpi-sub { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; min-width: 0; overflow-wrap: break-word; }
.kpi.accent .kpi-value { color: var(--amber); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
/* overflow-x makes the wrap the sticky header's scroll container, so a long table scrolls inside a
   viewport-tall box and its th top:0 stays in view below the topbar (print resets this to visible) */
@media screen { .table-wrap { max-height: calc(100vh - 140px); overflow: auto; } .grid-table th { z-index: 1; } }
table.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; cursor: pointer; user-select: none; }
.grid-table th.num { text-align: right; }
.grid-table th.sorted { color: var(--amber); }
.grid-table th.sorted::after { content: " ▾"; }
.grid-table th.sorted.asc::after { content: " ▴"; }
.grid-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.grid-table tr:hover td { background: rgba(255,255,255,.025); }
.grid-table tr.clickable { cursor: pointer; }
.grid-table td.name { white-space: normal; min-width: 180px; font-weight: 500; }
.grid-table td.name .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.grid-table td.name a:hover { color: var(--amber); }
.grid-table tr.is-client td.name::before { content: "●"; color: var(--blue); margin-right: 6px; font-size: 9px; vertical-align: middle; }
.rank { color: var(--dim); font-family: var(--mono); width: 34px; }
.delta { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.delta::before { display: inline-block; width: 1em; }
.delta.up::before { content: "▲"; font-size: 9px; }
.delta.down::before { content: "▼"; font-size: 9px; }
.delta.flat::before { content: ""; width: 0; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.badge i { font-style: normal; font-size: 10px; }
.sig-accelerating { color: #7be3a9; background: rgba(47,191,113,.16); border-color: rgba(47,191,113,.35); }
.sig-growing { color: #6fd39a; background: rgba(47,191,113,.10); border-color: rgba(47,191,113,.25); }
.sig-steady { color: #9fb6d8; background: rgba(57,135,229,.12); border-color: rgba(57,135,229,.3); }
.sig-stalled { color: #c5ccd8; background: rgba(139,155,180,.12); border-color: rgba(139,155,180,.3); }
.sig-declining { color: #ff9c9c; background: var(--down-soft); border-color: rgba(230,103,103,.35); }
.sig-baseline { color: var(--muted); background: rgba(139,155,180,.08); border-color: var(--line-2); }
.tier-prime { color: #ffd27a; background: var(--amber-soft); border-color: rgba(245,166,35,.45); }
.tier-strong { color: #ffc65c; background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.28); }
.tier-emerging { color: #b7c3d6; background: rgba(183,195,214,.08); border-color: rgba(183,195,214,.25); }
.tier-watch { color: var(--dim); background: transparent; border-color: var(--line-2); }
.status-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 3px; background: var(--panel-3); color: var(--text-2); border: 1px solid var(--line-2); text-transform: capitalize; }
.status-pill.customer { color: #7be3a9; border-color: rgba(47,191,113,.4); }
.status-pill.qualified, .status-pill.proposal { color: #ffd27a; border-color: rgba(245,166,35,.4); }
.status-pill.prospect, .status-pill.contacted { color: #9cc7f5; border-color: rgba(57,135,229,.4); }
.status-pill.not_fit { color: var(--dim); }

.score { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); }
.score-bar { width: 64px; height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--amber); border-radius: 3px; }
.spark { width: 90px; height: 24px; vertical-align: middle; }
.spark path { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.spark.up path { stroke: var(--up); }
.spark.down path { stroke: var(--down); }
.spark circle { fill: var(--amber); }
.stars { color: var(--amber); font-size: 11px; letter-spacing: -1px; }

/* ---------- lists / rows ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(255,255,255,.025); }
.row .name { font-weight: 500; }
.row .sub { grid-column: 1; font-size: 11px; color: var(--muted); }
.row .big { font-family: var(--mono); font-size: 18px; font-weight: 600; text-align: right; }
.row .bar { grid-column: 1 / -1; height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.row .bar i { display: block; height: 100%; background: var(--up); }
.empty { color: var(--muted); padding: 24px; text-align: center; font-size: 13px; }

/* ---------- forms / controls ---------- */
.btn { background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #1a1200; }
.btn-primary:hover { background: #ffbb3d; color: #1a1200; }
.btn-ghost { background: transparent; }
.btn-danger:hover { border-color: var(--down); color: var(--down); }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea, .input { background: #0a0f18; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 9px; color: var(--text); font-size: 13px; min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--amber); }
.field textarea { min-height: 70px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-grid .full { grid-column: 1 / -1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11px; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--muted); cursor: pointer; background: transparent; }
.chip.active { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.check-list label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-2); }
.check-list label i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); display: inline-block; }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd a:hover { color: var(--amber); }
pre.code { background: #05080e; border: 1px solid var(--line); padding: 10px; border-radius: var(--radius); font-family: var(--mono); font-size: 12px; overflow-x: auto; color: var(--text-2); margin: 6px 0; }
.quadrant-note { font-size: 11px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- modal / toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,4,8,.7); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 50; overflow: auto; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; width: min(720px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-3); border: 1px solid var(--amber); color: var(--text); padding: 10px 14px; border-radius: var(--radius); z-index: 60; font-size: 13px; max-width: 420px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.toast.error { border-color: var(--down); }

.footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; flex-wrap: wrap; }

/* ---------- market picker ---------- */
.picker { display: grid; grid-template-columns: 220px 220px 1fr auto; gap: 10px; align-items: end; }
@media screen and (max-width: 900px) { .picker { grid-template-columns: 1fr 1fr; } }
.market-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.market-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.market-card:hover { border-color: var(--amber); }
.market-card .title { font-weight: 600; }
.market-card .stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.market-card .stats b { color: var(--text); font-weight: 500; }

.progress { height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--amber); transition: width .3s; }
.results { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); max-height: 320px; overflow: auto; }
.result { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); align-items: center; }
.result:last-child { border-bottom: 0; }
.result .r-name { font-weight: 500; }
.result .r-sub { font-size: 11px; color: var(--muted); }
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.pipe { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; text-align: center; cursor: pointer; }
.pipe.active { border-color: var(--amber); }
.pipe b { display: block; font-family: var(--mono); font-size: 18px; }
.pipe span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media screen and (max-width: 900px) { .pipeline { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.grid-table tr.hl td { background: rgba(245, 166, 35, .10); font-weight: 600; }
.grid-table tr.hl td.num { font-weight: 600; }


/* ---------------------------------------------------------------- map pack */
.pack-actions { display: block; column-count: 1; }
.pack-actions li { margin: 0 0 12px; padding-left: 4px; }
.pack-actions li .badge { margin-left: 6px; vertical-align: middle; }
.sect { margin: 16px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.podium-slot { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--panel-2, rgba(255,255,255,.02)); }
.podium-slot:first-child { border-color: var(--amber); }
.podium-rank { font-size: 12px; letter-spacing: .08em; color: var(--amber); font-weight: 700; }
.podium-name { font-size: 16px; font-weight: 700; margin: 4px 0 6px; }
.podium-stats { font-size: 14px; }
.podium-sub { font-size: 12px; color: var(--dim, #8b97a8); margin-top: 2px; }

.rank-pill { display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 999px;
             font-weight: 700; font-size: 12px; border: 1px solid; }
.rank-top3 { color: #2fd27a; border-color: #2fd27a; }
.rank-near { color: var(--amber); border-color: var(--amber); }
.rank-far  { color: #8b97a8; border-color: #3a4454; }
.rank-none { color: #e06c6c; border-color: #6b3636; font-weight: 500; }

.why { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11px; line-height: 1.4; text-align: left; }
.why li { margin: 0; }
.podium-soft { outline: 1px dashed var(--amber); }
.panel-body > .bar { height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.panel-body > .bar i { display: block; height: 100%; background: var(--amber); transition: width .4s; }
@media screen and (max-width: 720px) { .podium { grid-template-columns: 1fr; } }

/* ---- map pack grid map */
.pkmap { height: 600px; border-radius: 8px; border: 1px solid var(--line); background: #0b1020; overflow: hidden; }
.pkmap .leaflet-container { background: #0b1020; font-family: inherit; }
.pkmap .osm-dark { filter: invert(1) hue-rotate(190deg) saturate(.55) brightness(.78) contrast(1.05); }
.pkmap .leaflet-control-attribution { background: rgba(7,11,18,.7); color: #7f8a99; font-size: 10px; }
.pkmap .leaflet-control-attribution a { color: #9aa6b6; }
.pkmap .leaflet-bar a { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.pkmap .leaflet-popup-content-wrapper, .pkmap .leaflet-popup-tip { background: var(--panel); color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.5); border: 1px solid var(--line); }
.pkmap .leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.4; }
.pk-pop-head { font-weight: 700; margin-bottom: 4px; color: var(--amber); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.pk-pop-you { margin: 4px 0 8px; padding: 6px 8px; border-radius: 6px; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.35); }
.pk-pop-row { margin: 6px 0; padding-top: 6px; border-top: 1px solid var(--line); }
.pk-pop-slot { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(240,178,68,.1); border: 1px dashed var(--amber); }
.pin { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 "IBM Plex Mono", monospace;
       color: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(0,0,0,.55); cursor: pointer; }
.pin-3    { background: #1f9d5a; }
.pin-10   { background: #d9962c; }
.pin-20   { background: #5b6675; }
.pin-none { background: #b23b3b; }
.pin-err  { background: #3a2f2f; color: #e06c6c; }
.pin-you  { background: #2563eb; width: 30px; height: 30px; font-size: 15px; }
.pin-l0 { background: #1f9d5a; } .pin-l1 { background: #d9962c; } .pin-l2 { background: #2563eb; }
.pin-l3 { background: #8b3fd1; } .pin-l4 { background: #d1408f; } .pin-l5 { background: #14a89a; }
.pin-other { background: #5b6675; }
.pin-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; color: #fff; font: 700 10px/1 "IBM Plex Mono", monospace; vertical-align: middle; }
/* before / after: a pill reading "7→2", coloured by the direction of the move */
.pin-cmp  { width: 48px; height: 30px; border-radius: 15px; font-size: 11px; letter-spacing: -.02em; white-space: nowrap; }
.pin-up   { background: #1f9d5a; }
.pin-down { background: #b23b3b; }
.pin-same { background: #5b6675; }
.pk-headline { margin: 0 0 12px; font-size: 15px; line-height: 1.45; padding: 10px 12px; border-left: 3px solid var(--amber); background: var(--panel-2); border-radius: 0 8px 8px 0; }
.pk-pick { width: 28px; padding-right: 0 !important; }
.pk-pick input { accent-color: var(--amber); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.pk-cmp-bar { justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px; }
/* the public link box on a published grid map */
.pk-proof { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); flex-wrap: wrap; }
.pk-proof .input { flex: 1; min-width: 200px; font-size: 12px; }
@media screen and (max-width: 720px) { .pkmap { height: 420px; } .pk-headline { font-size: 14px; } }

/* ---- map pack company typeahead */
.typeahead { position: relative; }
.typeahead .input { width: 100%; box-sizing: border-box; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-height: 320px; overflow: auto; margin-top: 4px; }
.suggest-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px; }
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover { background: var(--panel-2); }
.chip-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---- map pack: three-step workflow */
.pk-steps { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.pk-step .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.pk-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #111; font: 700 12px/22px "IBM Plex Mono", monospace; justify-content: center; }
.pk-actions { display: grid; gap: 10px; }
.pk-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.pk-card b { font-size: 14px; }
.pk-cost { font: 500 11px/1 "IBM Plex Mono", monospace; color: var(--amber); }
.pk-card .btn { align-self: flex-start; }
#pkTerms .chip { cursor: pointer; }
@media screen and (max-width: 1100px) { .pk-steps { grid-template-columns: 1fr; } }
/* scheduled maps: the form is one row on a desk, a stack on a phone; a paused row fades */
.pk-sched-form { display: grid; grid-template-columns: 2fr 2fr .8fr 2fr; gap: 10px; }
#pkSched .panel-head .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pkSchedList tr.paused td { opacity: .55; }
@media screen and (max-width: 900px) { .pk-sched-form { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 600px) { .pk-sched-form { grid-template-columns: 1fr; } }

/* ---------- search demand ---------- */
.dm-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.dm-filters .chips { flex: 1; }
.dm-filters #dmSearch { width: 220px; }
.dm-pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dm-pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.dm-adopt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); }
@media screen and (max-width: 760px) { .dm-adopt .btn { width: 100%; } #dmButtons { margin-left: 0 !important; width: 100%; } }
/* the term explorer: a term in the report is a link; on its own page, six KPIs, the ZIP heat map and its legend */
.dm-term { color: var(--text); border-bottom: 1px dotted var(--muted); }
.dm-term:hover { color: var(--amber); border-bottom-color: var(--amber); }
.tm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tm-map { height: 520px; }
.tm-map .leaflet-tooltip.tm-zip-label { background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff;
  font: 700 10px/1 "IBM Plex Mono", monospace; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); pointer-events: none; }
.tm-map .leaflet-tooltip.tm-zip-label::before { display: none; }
.tm-legend { align-items: center; }
.tm-legend .hollow::before { background: transparent; border: 1px dashed #5b6675; box-sizing: border-box; }
.tm-regions { margin-top: 8px; border-top: 1px solid var(--line); }
.tm-regions .row { padding: 5px 0; }

/* ---------- proposals (the cost calculator) ---------- */
.pr-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.pr-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-tier { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.pr-tier b { font-size: 14px; }
.pr-tier:hover { border-color: var(--amber); }
.pr-tier.active { border-color: var(--amber); background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber); }
.pr-row { display: grid; grid-template-columns: 28px 1.4fr 1.3fr 120px; gap: 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pr-row:last-child { border-bottom: 0; }
.pr-row.off .pr-what, .pr-row.off .pr-qty, .pr-row.off .pr-cost { opacity: .45; }
.pr-toggle { display: flex; align-items: center; justify-content: center; padding-top: 4px; cursor: pointer; }
.pr-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.pr-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-what b { font-size: 13.5px; }
.pr-what .badge { margin-left: 6px; vertical-align: middle; }
.pr-qty { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.pr-qty .input { font-size: 12px; padding: 5px 7px; max-width: 220px; }
.pr-num { display: flex; flex-direction: column; gap: 2px; }
.pr-num span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-num .input { width: 84px; }
.pr-cost { display: flex; flex-direction: column; gap: 2px; text-align: right; align-items: flex-end; font-size: 14px; font-weight: 600; }
.pr-cost .tiny { font-size: 10px; font-weight: 400; }
.pr-kpis .kpi { padding: 10px 12px; }
.pr-kpis .kpi-value { font-size: 20px; }
.pr-summary input[type="range"] { width: 100%; accent-color: var(--amber); margin: 6px 0 0; }
.pr-summary .rows .row .big { font-size: 15px; }
@media screen and (max-width: 1100px) { .pr-layout { grid-template-columns: 1fr; } .pr-tiers { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 760px) { .pr-tiers { grid-template-columns: 1fr; } .pr-row { grid-template-columns: 28px 1fr; } .pr-row .pr-qty, .pr-row .pr-cost { grid-column: 2; align-items: flex-start; text-align: left; } }

/* ---- print: what comes out of the printer is the report, not the terminal ----------------------------- */
@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #f6f7f9; --panel-3: #eef0f3; --line: #d4d8de; --text: #111; --muted: #555; --amber: #b8791a; --up: #1a7f4b; --down: #b23b3b; }
  html, body { background: #fff !important; color: #111 !important; }
  header nav, .status, .ticker, .banner, #printBtn, #authBtn, .toolbar, .btn, button, select, input, textarea, datalist,
  .pk-steps, .pk-actions, .pk-sched-form, .typeahead, .suggest, .pk-cmp-bar, .pk-proof, .pk-pick, .dm-pick, .dm-adopt,
  #pkAddPanel, #pkSchedForm, .pr-tiers, .pr-toggle, .pr-qty, #prName, .leaflet-control-zoom { display: none !important; }
  /* chips stay: the control chips are buttons (hidden above), the rest carry data - a metro's per-city counts, the census terms */
  /* the map keeps its tile credit on paper - the copy that leaves the building is the one that owes it */
  .pkmap .leaflet-control-attribution { background: #fff !important; color: #555 !important; font-size: 8px !important; }
  .pkmap .leaflet-control-attribution a, .pkmap .leaflet-control-attribution span { color: #555 !important; }
  .pr-layout { grid-template-columns: 1fr; } .pr-row { grid-template-columns: 1fr 120px; }
  .topbar { position: static !important; background: #fff !important; border-bottom: 2px solid #b8791a !important; padding: 0 0 6px !important; margin-bottom: 10px; display: flex !important; }
  .brand-name, .brand-tag { color: #111 !important; }
  .topbar::after { content: 'Printed ' attr(data-printed); margin-left: auto; font-size: 11px; color: #444; align-self: center; }
  .grid-table th { position: static !important; }
  .panel { border: 1px solid #d4d8de !important; background: #fff !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; margin-bottom: 10px; }
  .panel-head { background: #f6f7f9 !important; }
  .panel-head h2, h1, h2, h3 { color: #111 !important; }
  .kpi, .kpi-value, .kpi-label, .kpi-sub, td, th, p, li, span, b { color: #111 !important; }
  .muted, .small.muted, .note { color: #444 !important; }
  .up { color: #1a7f4b !important; } .down { color: #b23b3b !important; } .amber { color: #b8791a !important; }
  .grid-table th { background: #eef0f3 !important; color: #111 !important; }
  .grid-table tr:nth-child(even):not(.hl) td { background: #fafbfc !important; }
  .badge { border-color: #999 !important; color: #111 !important; }
  .pkmap { height: 520px !important; border-color: #d4d8de !important; break-inside: avoid; }
  .pkmap .osm-dark { filter: none !important; }
  .tm-map .leaflet-tooltip.tm-zip-label { color: #000 !important; text-shadow: none !important; }
  .pin { box-shadow: none !important; border-color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* everything whose meaning is its colour prints in colour: pins and their legend, the bars, the highlighted rows */
  .pin, .pin-key, .legend span::before, .score-bar i, .row .bar i, .progress i, .panel-body > .bar i, .grid-table tr.hl td,
  .kpi, .badge, .rank-pill, .podium-slot, .panel-head, .grid-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pin-key { color: #fff !important; }
  .why li { color: #111 !important; }
  a { color: #111 !important; text-decoration: none !important; }
  .page-head { margin-bottom: 8px; }
  /* wide tables: the page turns landscape, the table fits the width, and the columns that only work on screen go */
  .table-wrap { overflow: visible !important; max-height: none !important; }
  .grid-table { width: 100% !important; table-layout: auto; font-size: 9.5px !important; }
  .grid-table th, .grid-table td { padding: 3px 4px !important; white-space: normal !important; word-break: normal; }
  .grid-table td.name { max-width: 150px; }
  .grid-table th.col-pipeline, .grid-table td.col-pipeline, .grid-table th.col-pick, .grid-table td.col-pick, .grid-table th.col-act, .grid-table td.col-act,
  .grid-table th.col-cmp, .grid-table td.col-cmp, .grid-table th.col-trend12, .grid-table td.col-trend12 { display: none !important; }
  .spark, canvas.spark { max-width: 60px; }
}
@media screen and (max-width: 1100px) { .dm-kpis, .tm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 760px) { .dm-kpis, .tm-kpis { grid-template-columns: 1fr 1fr; } .dm-adopt .btn { width: 100%; } #dmButtons { margin-left: 0 !important; width: 100%; }
  .dm-form .field { width: 100% !important; } .dm-filters #dmSearch { width: 100%; } .tm-map { height: 400px; } }

/* ---------- paid ads ---------- */
/* the strategy panel: three lists on a desk, one column on a phone; each item is a term and the one-line reason */
.ad-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; font-weight: 600; color: var(--muted); }
.ad-h.up { color: var(--up); } .ad-h.down { color: var(--down); }
.ad-item { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ad-item:last-child { border-bottom: 0; }
.ad-item b { font-size: 13px; }
.ad-strategy .pk-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-strategy .pk-card .badge { align-self: flex-start; }
[data-table="ads_advs"] tbody tr { cursor: pointer; }
[data-table="ads_advs"] tbody tr:hover td { background: rgba(255,255,255,.03); }
@media screen and (max-width: 1100px) { .ad-strategy .pk-actions { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 760px) { .ad-lists { grid-template-columns: 1fr; } .ad-strategy .pk-actions { grid-template-columns: 1fr; } #adButtons { margin-left: 0 !important; width: 100%; } #adButtons .btn { width: 100%; } }
@media print { .ad-strategy .pk-actions { display: grid !important; } .ad-item { break-inside: avoid; } }

/* ---------- working context: one line under the header, a popover with the three pickers ---------- */
.ctxbar { position: relative; background: #0a0f18; border-bottom: 1px solid var(--line); padding: 0 20px; z-index: 19; }
.ctx-line { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 12.5px; flex-wrap: wrap; }
.ctx-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-weight: 700; white-space: nowrap; }
.ctx-open { background: transparent; border: 0; padding: 4px 0; cursor: pointer; color: var(--text-2); display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; text-align: left; }
.ctx-open b { color: var(--text); font-weight: 600; }
.ctx-open:hover b { color: var(--amber); }
.ctx-change { font-size: 11px; color: var(--amber); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 7px; letter-spacing: .04em; }
.ctx-open:hover .ctx-change { border-color: var(--amber); }
.ctx-right { margin-left: auto; display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); }
.ctx-right a:hover { color: var(--amber); }
.ctx-pop { position: absolute; left: 20px; top: 100%; z-index: 40; width: min(920px, calc(100vw - 40px)); background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 16px 50px rgba(0,0,0,.6); padding: 12px 14px; }
.ctx-pop .ctx-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ctx-pickers { display: grid; grid-template-columns: 1.1fr 1fr 64px 1.3fr auto; gap: 10px; align-items: end; }
.ctx-pickers .btn { align-self: end; }
@media screen and (max-width: 900px) { .ctx-pickers { grid-template-columns: 1fr 1fr; } .ctx-right { display: none; } .ctx-pop { left: 12px; width: calc(100vw - 24px); } }
@media screen and (max-width: 760px) { .ctxbar { padding: 0 12px; } .ctx-pickers { grid-template-columns: 1fr; } }

/* ---------- start here: the pickers, then four numbered cards, then the row that sends the case ---------- */
.st-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.st-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.st-card .st-top { display: flex; align-items: center; gap: 10px; }
.st-card h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.st-card .st-get { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; flex: 1; }
.st-card .st-get b { color: var(--text); }
.st-status { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; line-height: 1.45; min-height: 38px; }
.st-status.done { color: var(--text-2); }
.st-status.done::before { content: "✓ "; color: var(--up); font-weight: 700; }
.st-status .down { color: var(--down); }
.st-status a { color: var(--amber); }
.st-card .btn { align-self: flex-start; }
.st-tab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: auto; white-space: nowrap; }
.st-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-send .input { flex: 1; min-width: 220px; font-size: 12px; }
.st-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-rules .rule { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.st-rules .rule b { color: var(--text); }
/* the full analysis: one card per step - its price or "on file" over the step's name and what it measures.
   The step count sets the columns inline, so the phone breakpoint has to outrank it */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.step { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.step .w { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.step b { display: block; font-size: 15px; line-height: 1.25; }
.step p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; overflow-wrap: break-word; }
@media screen and (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media screen and (max-width: 1100px) { .st-cards { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 760px) { .st-cards, .st-rules { grid-template-columns: 1fr; } .st-card .btn { width: 100%; } }
@media print { .ctxbar, .st-card .btn, .st-send .btn { display: none !important; } }

/* term page: five-year seasonality */
.tm-verdict{margin:0 0 12px;padding:10px 14px;border-left:4px solid var(--line-2);background:var(--panel-2);border-radius:3px;font-size:14px;color:var(--text)}
.tm-verdict.up{border-left-color:var(--up)}.tm-verdict.warn{border-left-color:var(--amber)}
.tm-years{width:100%;border-collapse:collapse;font-size:13px}.tm-years th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line-2)}
.tm-years td{padding:5px 6px;border-bottom:1px solid var(--line)}.tm-years .num{text-align:right}

/* proposals: the margin verdict under the save button */
.pr-fix{margin-top:8px;font-size:13px}.pr-fix.warn{color:var(--amber)}
.btn-danger{background:rgba(229,72,77,.15);border-color:var(--down);color:#ffb3b5}

/* search demand: the legend under the table */
.dm-legend h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 10px}
.dm-legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}
.dm-legend-grid > div{font-size:13px}.dm-legend-grid p{margin:6px 0 0;color:var(--text-2);line-height:1.5}.dm-legend-grid p b{color:var(--text)}
@media screen and (max-width: 1000px){.dm-legend-grid{grid-template-columns:1fr}}

/* reviews-received report: slim date columns - weekday initial over the day, the month once where it changes */
.grid-table th.dcol, .grid-table td.dcol { width: 28px; min-width: 26px; max-width: 30px; padding: 3px 2px !important; text-align: center !important; }
.grid-table th.dcol-m { border-left: 1px solid var(--line-2); } .grid-table td.dcol-m { border-left: 1px solid var(--line-2); }
.grid-table td.dcol-we, .grid-table th.dcol-we { background: rgba(255,255,255,.025); }
.dhead { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-family: var(--mono); }
.dhead em { font-style: normal; font-size: 9px; color: var(--amber); letter-spacing: .04em; height: 11px; }
.dhead i { font-style: normal; font-size: 9px; color: var(--muted); text-transform: uppercase; }
.dhead b { font-size: 12px; }
.grid-table td.dcol b { font-family: var(--mono); }
.dstrip { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.dcell { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-family: var(--mono); min-width: 24px; }
.dcell i { font-style: normal; font-size: 9px; color: var(--muted); text-transform: uppercase; } .dcell em { font-style: normal; font-size: 10px; color: var(--muted); } .dcell b { font-size: 13px; }
@media print { .grid-table th.dcol, .grid-table td.dcol { width: 22px; min-width: 20px; padding: 2px 1px !important; } .dhead b { font-size: 10px; } }

/* ---------------------------------------------------------------- print: a document, not a screen dump
   1. one screen = one document: the brand line and the printed time on page one, a title from the page's own h1
   2. sections never tear: a panel keeps together when it fits a page; a long table breaks between rows with its
      header row repeated on every page, and a big table starts on a fresh page
   3. headings stay with what follows; the KPI row stays with the panel under it
   4. white space is deliberate: fixed gutters, no sticky headers, no shadows, charts at a fixed height */
@media print {
  @page { margin: 12mm 11mm 14mm 11mm; }
  html { font-size: 12px; }
  body { line-height: 1.35; }
  #view { padding: 0 !important; max-width: none !important; }
  .page-head { break-after: avoid; page-break-after: avoid; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid #d4d8de; }
  .page-head h1 { font-size: 20px; margin: 0 0 2px; }
  .crumbs { font-size: 10px; color: #666 !important; }
  h1, h2, h3, .panel-head, .sect { break-after: avoid; page-break-after: avoid; }
  /* the desk layout prints as it is (the phone breakpoints are screen-only); a grid may break between its tiles and panels */
  .grid { gap: 8px !important; break-after: avoid; page-break-after: avoid; margin-bottom: 10px !important; }
  .kpi { border: 1px solid #d4d8de !important; border-radius: 3px; padding: 6px 8px !important; break-inside: avoid; }
  .kpi-value { font-size: 18px !important; } .kpi-label { font-size: 9px !important; } .kpi-sub { font-size: 9px !important; }
  .panel { margin: 0 0 12px !important; border-radius: 3px; }
  .panel.print-page { break-before: page; page-break-before: always; }
  .panel.print-long { break-inside: auto !important; page-break-inside: auto !important; }
  .panel-head { padding: 6px 10px !important; } .panel-head h2 { font-size: 13px !important; } .panel-head .meta { font-size: 9.5px !important; }
  .panel-body { padding: 8px 10px !important; }
  .table-wrap { margin: 0 !important; }
  table.grid-table { font-size: 9.5px !important; }
  table.grid-table thead { display: table-header-group; }
  table.grid-table tfoot { display: table-footer-group; }
  table.grid-table tr { break-inside: avoid; page-break-inside: avoid; }
  table.grid-table th, table.grid-table td { padding: 3px 5px !important; border-bottom: 1px solid #e3e6ea !important; }
  table.grid-table td.name .sub { font-size: 8.5px !important; color: #555 !important; }
  .chart-box { height: 190px !important; break-inside: avoid; }
  .tm-verdict, .note, .empty { break-inside: avoid; }
  .pack-actions li, .why li { break-inside: avoid; }
  .pkmap, .tm-map { height: 460px !important; }
  .step, .flow { break-inside: avoid; }
  .footer, .topbar .right, #nav { display: none !important; }
  a[href]::after { content: none !important; }
  .print-only { display: block !important; }
  .print-foot { display: block; margin-top: 14px; padding-top: 6px; border-top: 1px solid #d4d8de; font-size: 9px; color: #555; }
}
.print-only { display: none; }

@media print {
  /* the reviews-received table: one line per company, the city beside the name, the date cells plain */
  table.grid-table td.name .sub { display: inline !important; margin-left: 6px; }
  table.grid-table td.name .sub::before { content: "· "; }
  table.grid-table td.dcol b.amber { color: #b8791a !important; }
  .dstrip { gap: 2px 6px; }
}

/* owner-only nav link, the company report preview, the Your clients list, the metro forms */
.nav a[hidden] { display: none; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; padding: 7px 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:hover, .nav-more[open] summary { color: var(--text); }
.nav-more.active summary { color: var(--amber); border-bottom-color: var(--amber); }
.nav-more-menu { position: absolute; right: 0; top: 100%; z-index: 50; min-width: 220px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.nav-more-menu a { border-bottom: 0; padding: 8px 14px; }
.nav-more-menu a.active { border-bottom: 0; background: var(--amber-soft); }
.modal.modal-wide { width: min(1100px, 100%); }
.rp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.rp-pick { display: flex; flex-direction: column; gap: 3px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: 1 1 180px; min-width: 0; }
.rp-pick select { width: 100%; }
.rp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-frame { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; height: 70vh; min-height: 360px; }
.rp-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cl-list { display: flex; flex-direction: column; }
.cl-row { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cl-row:last-child { border-bottom: 0; }
.cl-row.paused { opacity: .6; }
.cl-name { min-width: 0; }
.cl-name .sub { display: block; font-size: 11px; color: var(--muted); }
.cl-fact { font-size: 12px; min-width: 0; }
.cl-k { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.cl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* a prospect row carries one fact more (the stage) and a note under the name */
.cl-row.pr-row { grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(0, 1fr)) auto; }
.pr-stage select { padding: 3px 6px; font-size: 12px; max-width: 100%; }
.pr-stage .sub, .cl-name .pr-note { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cl-name .pr-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row.pr-won { opacity: .45; pointer-events: none; }
@media screen and (max-width: 1100px) { .cl-row, .cl-row.pr-row { grid-template-columns: 1fr 1fr 1fr; } .cl-name { grid-column: 1 / -1; } .cl-acts { grid-column: 1 / -1; justify-content: flex-start; } }
@media screen and (max-width: 560px) { .cl-row, .cl-row.pr-row { grid-template-columns: 1fr 1fr; } .rp-frame { height: 60vh; } }
.mt-form textarea { width: 100%; }
@media print { .cl-acts, .rp-bar { display: none !important; } }
/* the company page's two SEO audits: page 1 and the whole website, side by side */
.seo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seo-card { border: 1px solid var(--line-2); border-radius: 6px; padding: 12px 14px; background: var(--panel-2, transparent); min-width: 0; }
.seo-card-head b { display: block; font-size: 13px; }
.seo-card-head .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.seo-card-score { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
@media screen and (max-width: 760px) { .seo-cards { grid-template-columns: 1fr; } }
/* the service intelligence board: its step columns are the date columns' cousins, a little wider for a word label */
.grid-table th.icol, .grid-table td.icol { width: 46px; min-width: 44px; max-width: 50px; }
/* Scoreboards fit the screen: no left-right scrolling (up-down is fine). The page uses the screen's width, headers
   wrap onto two lines instead of widening their column, and on a laptop-width screen the cells tighten. */
.view { max-width: 2400px; }
.grid-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.grid-table td.name .sub { overflow-wrap: anywhere; }
@media screen and (max-width: 1800px) {
  .grid-table th { padding: 7px 6px; }
  .grid-table td { padding: 6px 6px; }
  .grid-table td.name { min-width: 150px; }
}
@media screen and (max-width: 1500px) {
  .grid-table { font-size: 12px; }
  .grid-table th { padding: 6px 4px; font-size: 9px; letter-spacing: .05em; }
  .grid-table td { padding: 5px 4px; }
  .grid-table td.name { min-width: 130px; }
  .score-bar { width: 36px !important; }
}
.grid-table td.wrap { white-space: normal; min-width: 140px; }
.grid-table td.wrap .sub { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }

/* Map Pack saved grids (server/mappreset.py) - cards and heat maps wrap; nothing scrolls sideways */
.mp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.mp-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.mp-card-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.mp-card .chip{display:inline-block;margin:2px 2px 0 0}
.mp-heat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:10px 0}
.mp-heat figure{margin:0;background:#fff;border-radius:6px;padding:8px}
.mp-heat svg{width:100%;height:auto;display:block}
table.mp-places{width:100%;table-layout:fixed}
table.mp-places td,table.mp-places th{white-space:normal;word-break:break-word}
table.mp-places th:first-child{width:22%}

/* ---------- phones: a menu button, and every wide table as stacked cards (labels from its own header) ---------- */
.nav-toggle { display: none; }
@media screen and (max-width: 760px) {
  .topbar { gap: 10px; padding: 8px 12px; }
  .brand-tag { display: none; }
  .brand-name { font-size: 13px; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: auto; width: 40px; height: 36px; padding: 8px;
                background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 1px; }
  .nav { display: none; width: 100%; flex-direction: column; gap: 0; }
  .topbar.nav-open .nav { display: flex; }
  .nav a { padding: 12px 6px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .nav a.active { border-bottom-color: var(--line); }
  .nav-more { width: 100%; } .nav-more summary { padding: 12px 6px; }
  .nav-more-menu { position: static !important; box-shadow: none !important; width: 100%; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .toolbar, .chips, .panel-head { flex-wrap: wrap; }
  .panel-head .meta { width: 100%; }
  .table-wrap { max-height: none !important; overflow: visible !important; }
  table.grid-table { min-width: 0 !important; width: 100% !important; }
  table.grid-table thead { display: none; }
  table.grid-table, table.grid-table tbody, table.grid-table tr, table.grid-table td { display: block; width: 100% !important; }
  table.grid-table tr { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; padding: 6px 10px; background: var(--panel); }
  table.grid-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0 !important; border: 0 !important;
                        text-align: right !important; white-space: normal !important; min-width: 0 !important; max-width: none !important; position: static !important; }
  table.grid-table td::before { content: attr(data-label); flex: none; max-width: 48%; text-align: left; font-size: 10.5px; letter-spacing: .06em;
                                text-transform: uppercase; color: var(--muted); }
  table.grid-table td[data-label=""]::before { display: none; }
  table.grid-table td:first-child { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line) !important; padding-bottom: 7px !important; margin-bottom: 3px; }
  table.grid-table td:empty { display: none; }
  .modal, .modal-card { width: calc(100vw - 20px) !important; max-width: none !important; }
  input, select, textarea { font-size: 16px; }    /* no iPhone zoom on focus */
  .grid > * { min-width: 0; } .kpi-value, .kpi-sub { overflow-wrap: anywhere; }   /* a tile never pushes its grid wider than the phone */
  main.view { overflow-x: clip; }                  /* a chart's few spare pixels never scroll the page sideways */
  .toolbar > *, .toolbar select, .toolbar .input { max-width: 100%; min-width: 0; }
}

/* customer mode: no breadcrumbs back into owner pages; article status pills are the owner's */
body.customer-mode .crumbs { display: none; }

/* the owner's red alert: a customer is waiting on a license */
#ownerAlert { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 18px;
  background: #b3261e; color: #fff; font-size: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
#ownerAlert b { color: #fff; }
#ownerAlert .oa-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: oaPulse 1.2s infinite; margin-right: 4px; }
#ownerAlert .oa-go { margin-left: auto; background: #fff; color: #b3261e; font-weight: 700; padding: 5px 12px; border-radius: 4px; text-decoration: none; }
@keyframes oaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #ownerAlert .oa-dot { animation: none; } }
#ownerAlert .oa-lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 520px; }
#ownerAlert .oa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#ownerAlert .oa-tel { color: #fff; font-weight: 800; text-decoration: underline; white-space: nowrap; }
#ownerAlert .oa-dim { opacity: .8; font-size: 12px; }
#ownerAlert .oa-called { background: transparent; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 3px 10px; font-weight: 700; cursor: pointer; }