/* Dashboard theme — dark by default, because these get read at a glance.

   Swap the BRAND block per client (pull the accent off their own site), leave
   the surface/ink/line tokens alone unless you re-check contrast: every one
   here was measured, not eyeballed, and the dimmest (--muted) is 6.5:1 on the
   card surface. The --s1..--s6 series ramp passed the dataviz validator on this
   dark surface, including the >=3:1 mark contrast that light ramps tend to fail,
   so reach for a client's brand colour in the CHROME, not in the charts.

   Fonts are self-hosted in fonts/ (see fonts.css) so a client's browser makes
   no third-party request when they open their own numbers. */

:root {
  color-scheme: dark;
  --bg: #071226;
  --surface: #0f1d36;
  --surface-2: #152643;
  --ink: #f2f4f2;          /* headline / values — deliberately near-white, this is a glance tool */
  --ink-2: #c6cdd4;
  --muted: #98a3af;        /* still 4.6:1 on the card surface */
  --line: #233656;
  --line-2: #1a2b48;

  --coral: #14C08F;
  --coral-dk: #4FD9AE;     /* on dark, the "stronger" coral is the LIGHTER one */
  --coral-soft: #14C08F22;
  --sage: #8fbba0;
  --sage-dk: #a8cdb6;
  --sage-soft: #8fbba01f;

  --good: #4cc08d;
  --good-soft: #4cc08d1f;
  --warn: #e0a33e;
  --warn-soft: #e0a33e1f;
  --bad: #e8776a;
  --bad-soft: #e8776a1f;

  /* validated categorical ramp (dataviz validator, dark surface — all 6 pass,
     including >=3:1 contrast, which the light steps did not) */
  --s1: #d95926;  /* brand-adjacent orange */
  --s2: #3987e5;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #9085e9;
  --s6: #e66767;
  --neutral: #55636f;      /* "everything else" bars */

  /* MedSprout brand — the assistant's colour, taken from medsproutai.com.
     Coral stays Nexus's; green marks anything MedSprout powers. On dark they
     use the footer treatment: Med white / Sprout green / AI white. */
  --ms: #14C08F;
  --ms-dk: #2fd0a0;

  --radius: 14px;
  --pill: 30px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .28);
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15.5px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; margin: 0; letter-spacing: -.01em; }
a { color: var(--coral-dk); }
button { font-family: var(--body); }

/* faint standing watermark so no screenshot of this can be mistaken for real data */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='260'><text x='0' y='150' transform='rotate(-24 0 150)' font-family='Helvetica,Arial' font-size='34' font-weight='700' fill='%23ffffff' fill-opacity='0.045'>SAMPLE STORE</text></svg>");
}

/* ---------------------------------------------------------------- login */

#gate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% -10%, #1b2836 0%, #0b1119 60%);
  padding: 24px;
}
.gate-card {
  width: min(430px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); padding: 34px 32px 30px; text-align: center;
}
.gate-card img { width: 210px; max-width: 80%; height: auto; margin-bottom: 20px; }
.gate-card h1 { font-size: 21px; margin-bottom: 6px; }
.gate-card p { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; }
.gate-card input {
  width: 100%; padding: 13px 18px; font-size: 15px; font-family: var(--body);
  border: 1px solid var(--line); border-radius: var(--pill); background: #101823; color: var(--ink);
  text-align: center;
}
.gate-card input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--coral); color: #06231a; border: 0; border-radius: var(--pill);
  padding: 12px 26px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--coral-dk); }
.btn.ms { background: var(--ms); color: #08121b; }
.btn.ms:hover { background: var(--ms-dk); }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.gate-card .btn { width: 100%; margin-top: 14px; }
.gate-err { color: var(--bad); font-size: 13.5px; min-height: 20px; margin-top: 12px; }
.gate-foot { margin-top: 20px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- shell */

#app { display: none; position: relative; z-index: 1; }
#app.on { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(15, 21, 29, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 11px 22px;
}
.topbar img.logo { height: 34px; width: auto; }
.topbar .who { font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.15; }
.topbar .who span { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }
.badge-demo {
  background: var(--coral-soft); color: var(--coral-dk); border: 1px solid #ff573355;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--pill); white-space: nowrap;
}
.stamp { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.35; }
.stamp b { color: var(--ink-2); font-weight: 700; }

.layout { display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 22px; padding: 22px; max-width: 1500px; margin: 0 auto; }
#main { min-width: 0; }

.rail { position: sticky; top: 72px; align-self: start; min-width: 0; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: transparent; border: 0; border-radius: 10px; padding: 10px 12px;
  font-size: 14.5px; color: var(--ink-2); cursor: pointer;
}
.rail button:hover { background: var(--surface-2); color: var(--ink); }
.rail button.on { background: var(--coral); color: #06231a; font-weight: 700; }
.rail button .ic { width: 18px; text-align: center; font-size: 15px; }
.rail button .tag {
  margin-left: auto; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 1px 7px;
}
.rail button.on .tag { background: var(--coral); }
.rail-foot { margin-top: 18px; font-size: 11.5px; color: var(--muted); line-height: 1.5; padding: 0 12px; }

/* ---------------------------------------------------------------- cards */

.page { display: none; }
.page.on { display: block; }
.page-head { margin-bottom: 16px; }
.page-head h2 { font-size: 24px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); min-width: 0;
}
.card > h3 { font-size: 14px; letter-spacing: .01em; }
.card > h3 + .sub { margin: 2px 0 12px; color: var(--muted); font-size: 12.5px; }
.card > h3:only-child, .card > h3:last-child { margin-bottom: 0; }
.card h3 + * { margin-top: 12px; }

/* stat tiles */
.tile { display: flex; flex-direction: column; gap: 2px; }
.tile .lab { font-size: 12.5px; color: var(--ink-2); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.tile .val { font-family: var(--head); font-weight: 700; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
.tile .val small { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-left: 2px; }
.tile .note { font-size: 13px; color: var(--muted); }
.delta { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.delta.up { color: var(--good); }
.delta.dn { color: var(--bad); }
.delta.flat { color: var(--muted); }

/* alerts */
.alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: left; width: 100%;
}
.alert + .alert { margin-top: 8px; }
.alert:hover { border-color: #3a4756; }
.alert .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; }
.alert.critical { background: var(--bad-soft); border-color: #f6d6d4; }
.alert.critical .dot { background: var(--bad); }
.alert.warning { background: var(--warn-soft); border-color: #f2e0bd; }
.alert.warning .dot { background: var(--warn); }
.alert.info { background: var(--sage-soft); border-color: #cfe6da; }
.alert.info .dot { background: var(--sage-dk); }
.alert b { display: block; font-size: 14px; font-family: var(--head); }
.alert span { font-size: 13px; color: var(--ink-2); }
.alert .lvl { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; padding-top: 3px; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 700; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-y { max-height: 460px; overflow-y: auto; }

.pill {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--pill);
  background: #26313e; color: var(--ink-2);
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.sage { background: var(--sage-soft); color: var(--sage-dk); }
.pill.coral { background: var(--coral-soft); color: var(--coral-dk); }

/* filter row */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters select, .filters input {
  font: 13.5px var(--body); padding: 7px 12px; border: 1px solid var(--line);
  border-radius: var(--pill); background: var(--surface-2); color: var(--ink);
}
.filters input { min-width: 180px; }
.filters .count { font-size: 13px; color: var(--muted); margin-left: auto; }

/* legend + charts */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: #26313e; color: var(--ink); border: 1px solid var(--line); font-size: 12px; line-height: 1.45; padding: 7px 10px;
  border-radius: 8px; white-space: nowrap; z-index: 5; transform: translate(-50%, -115%);
}
.chart .tip b { font-family: var(--head); }
.chart .tip.on { opacity: 1; }
.axis { font-size: 11px; fill: var(--muted); font-family: var(--body); }
.gridline { stroke: var(--line-2); stroke-width: 1; }
.baseline { stroke: var(--line); stroke-width: 1; }
.dlabel { font-size: 11px; font-weight: 700; fill: var(--ink-2); font-family: var(--body); }

/* bed board */
.beds { display: flex; flex-wrap: wrap; gap: 6px; }
.bed { width: 26px; height: 30px; border-radius: 6px; background: var(--sage); border: 1px solid rgba(255,255,255,.07); }
.bed.open { background: #26313e; }
.bedkey { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }

.meter { height: 8px; border-radius: 6px; background: #26313e; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--sage); border-radius: 6px; }
.meter.coral i { background: var(--coral); }

/* ------------------------------------------------------------------ ask */

#ask-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  box-shadow: 0 6px 26px rgba(0, 200, 83, .40);
}
#ask-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); z-index: 50;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -14px 0 46px rgba(0,0,0,.55);
  display: flex; flex-direction: column; transform: translateX(102%); transition: transform .22s ease;
}
#ask-panel.on { transform: none; }
.ask-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ask-head h3 { font-size: 15px; }
.ask-head p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.ask-head .x { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; font-size: 14px; line-height: 1.55; }
.msg.me { align-self: flex-end; background: var(--coral); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.msg.it { align-self: flex-start; background: var(--sage-soft); color: var(--ink); padding: 10px 13px; border-radius: 14px 14px 14px 4px; }
.msg.it.err { background: var(--bad-soft); color: var(--bad); }
.msg.it p { margin: 0 0 8px; }
.msg.it p:last-child { margin-bottom: 0; }
.msg.it ul { margin: 4px 0 8px; padding-left: 18px; }
.msg.it table { font-size: 12.5px; margin: 6px 0; }
.msg.it th, .msg.it td { padding: 4px 8px; }
.ask-seed { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.ask-seed button {
  font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 7px 13px; cursor: pointer; color: var(--ink-2); text-align: left;
}
.ask-seed button:hover { border-color: var(--coral); color: var(--coral-dk); }
.ask-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ask-form input {
  flex: 1; min-width: 0; font: 14px var(--body); padding: 11px 15px;
  border: 1px solid var(--line); border-radius: var(--pill); background: #101823; color: var(--ink);
}
.ask-form input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.ask-form .btn { padding: 11px 18px; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-dk); animation: bob 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

.foot-note {
  max-width: 1500px; margin: 0 auto; padding: 6px 22px 40px; font-size: 12px; color: var(--muted); line-height: 1.6;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1080px) {
  .g5, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; }
  .topbar .who { font-size: 14px; }
  .topbar #print-btn { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
  /* the rail becomes a horizontal scroller — it must not be allowed to widen the page */
  .rail { position: static; max-width: 100%; overflow: hidden; }
  .rail nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .rail button { white-space: nowrap; }
  .rail button .tag { display: none; }
  .rail-foot { display: none; }
  .g5, .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .topbar .stamp { display: none; }
  .tile .val { font-size: 26px; }
}

/* ------------------------------------------------------- live viewers */

.live-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: #00c8531f; color: var(--ms); border: 1px solid #00c85355;
  border-radius: var(--pill); padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  font-family: var(--body); white-space: nowrap;
}
.live-chip:hover { background: #00c8532e; }
.live-chip b { font-size: 14px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ms); flex: 0 0 auto;
  box-shadow: 0 0 0 0 #00c853b3; animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px #00c85300; }
  100% { box-shadow: 0 0 0 0 #00c85300; }
}
.live-card { border-color: #00c8533d; }
.live-head { display: flex; align-items: center; gap: 12px; }
.live-head h3 { font-size: 14px; }
.live-head .sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.live-num {
  margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 46px;
  line-height: 1; color: var(--ms); letter-spacing: -.02em;
}
.live-num.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.live-lab {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 700; margin-bottom: 8px;
}
.live-row { display: flex; align-items: center; gap: 9px; font-size: 13px; margin-bottom: 7px; }
.live-row code, .live-row span:first-child { flex: 0 0 auto; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row b { flex: 0 0 auto; min-width: 18px; text-align: right; }
.live-feed { max-height: 132px; overflow: hidden; }
.live-ev { display: flex; gap: 10px; font-size: 12.5px; margin-bottom: 8px; line-height: 1.35; }
.live-ago { flex: 0 0 30px; color: var(--ms); font-weight: 700; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; color: var(--ink-2); }

.ask-powered {
  text-align: center; font-size: 11.5px; color: var(--muted);
  padding: 0 16px 12px; letter-spacing: .02em;
}
.ms-mark { font-family: var(--head); font-weight: 700; font-size: 12.5px; letter-spacing: -.005em; }
.ms-mark .ms-a { color: #fff; }
.ms-mark .ms-b { color: var(--ms); }

@media (max-width: 1080px) { .live-num { font-size: 36px; } }
@media (max-width: 860px)  { .live-chip { order: 3; } }

/* --------------------------------------------------- click-through links */

/* anything the assistant names that exists on a page becomes a door to it */
a.jump {
  color: var(--coral-dk); text-decoration: none; cursor: pointer;
  border-bottom: 1px dashed #ff755066; padding-bottom: 1px;
}
a.jump:hover { color: #fff; background: #ff75501f; border-bottom-color: var(--coral-dk); }

.tile.tap { cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.tile.tap:hover { border-color: var(--coral); transform: translateY(-1px); }
.tile.tap::after {
  content: "→"; position: absolute; top: 13px; right: 15px;
  color: var(--muted); font-size: 14px; opacity: 0; transition: opacity .15s ease;
}
.tile.tap:hover::after { opacity: 1; }
.card.tile { position: relative; }

/* the row you clicked through for */
tbody tr.hl, .alert.hl { animation: flash 2.6s ease; }
@keyframes flash {
  0%, 55% { background: #ff57332e; box-shadow: inset 3px 0 0 var(--coral); }
  100% { background: transparent; box-shadow: none; }
}

/* ------------------------------------------------------------------ print */
/* He WILL press Print. On a dark theme that means white-on-white pages, so
   print gets its own light palette rather than a bug report. */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fafafa;
    --ink: #111; --ink-2: #333; --muted: #555;
    --line: #ccc; --line-2: #e2e2e2;
    --shadow: none;
  }
  body { background: #fff; font-size: 11pt; }
  body::before { display: none; }                 /* watermark: replaced below */
  .topbar { position: static; background: #fff; }
  /* the dark-background logo is cream — swap back to the original on paper */
  .topbar img.logo { content: url("logo.png"); }
  .rail, #ask-fab, #ask-panel, #print-btn, .live-chip, .live-card, .filters { display: none !important; }
  .layout { display: block; padding: 0; max-width: none; }
  .page { display: none !important; }
  .page.on { display: block !important; }
  .card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
  .scroll-y { max-height: none !important; overflow: visible !important; }
  .tbl-wrap { overflow: visible !important; }
  th { background: #fff !important; }
  .grid { gap: 10px; }
  .tile .val { font-size: 22pt; }
  a.jump { color: #111; border-bottom: none; }
  .foot-note { color: #444; }
  /* the printed page must still say what it is */
  .page-head::after {
    content: "DEMO DATA — every figure on this page is simulated.";
    display: block; margin-top: 6px; font-size: 9pt; font-weight: 700; color: #b00;
  }
  @page { margin: 14mm; }
}

/* ---- CarGents dealer additions */
.rail .tag { color: #06231a; }
.alert { cursor: pointer; }
.pill.in { background: #3987e522; color: #8fbaf2; }
.pill.out { background: var(--coral-soft); color: var(--coral-dk); }
.pill.live { background: #e0a33e26; color: var(--warn); font-size: 10px; letter-spacing: .06em; margin-left: 4px; }
.res { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); line-height: 1.35; }
.res.ok { background: var(--good-soft); color: var(--good); }
.res.warn { background: var(--warn-soft); color: var(--warn); }
td small, .tile small { color: var(--muted); }
.good { color: var(--good); }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 12.5px; margin: 10px 2px 0; }
.filters button { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; cursor: pointer; }
.filters button.on { background: var(--coral); color: #06231a; border-color: var(--coral); }
.opening .why { color: var(--ink-2); margin: 6px 0 12px; font-size: 14px; }
.opening h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--coral-dk); margin: 6px 0 8px; }
.fits, .qs { margin: 0 0 12px; padding-left: 20px; }
.fits li, .qs li { margin-bottom: 8px; font-size: 14px; }
.fits li span { color: var(--ink-2); font-size: 13px; }
.grid.tight { gap: 22px; }
.page > * + * { margin-top: 14px; }
@media (max-width: 760px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2 { grid-template-columns: 1fr; } }