/* The public half's furniture, once.
 *
 * _public.html's own header comment says it exists so the same CSS bug cannot
 * appear in two files again -- and then explore.html and subject.html imported
 * only its nav() macro and re-declared all of its CSS locally, so editing
 * _public.html changed nothing on the two busiest public pages. The comments in
 * both files record that this duplication caused the same min-width: 0 overflow
 * bug twice. This file is where that stops.
 *
 * Depends on tokens.css for every colour and measure.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--font-size)/var(--line-height) var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* Figures line up in columns. The app half never set this, so every KPI and
     mention count wobbled between rows. */
  font-variant-numeric: tabular-nums;
}

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

/* ---- top bars -------------------------------------------------------- */

.bar { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar.controls { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.bar-in {
  max-width: var(--measure-data);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* navbrand, not brand: /pulse and /radio/advertisers already use `.brand` for a
   small uppercase eyebrow above their headline, and they now load this file to
   get the shared bar. One generic name for two different objects is how the
   nav lockup would have turned their eyebrow bold. */
.navbrand { font-weight: 650; letter-spacing: -.01em; margin-right: auto; }
.navbrand a { text-decoration: none; color: inherit; }
.navbrand span { color: var(--muted); font-weight: 400; }
.bar-in a.nav { font-size: .9rem; text-decoration: none; color: var(--muted); }
.bar-in a.nav.on { color: var(--ink); font-weight: 600; }
.bar-in a.nav:hover { color: var(--ink); }

/* Segmented control: period and medium. */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.seg a { padding: .3rem .7rem; font-size: .85rem; text-decoration: none; color: var(--muted); }
.seg a.on { background: var(--accent); color: var(--accent-ink); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-1); font-size: .85rem;
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .6rem .2rem .7rem;
}
.pill a { text-decoration: none; color: var(--muted); font-weight: 650; }

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

.wrap { max-width: var(--measure-data); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.wrap.prose { max-width: var(--measure-prose); }

h1 { font-size: clamp(1.6rem, 4.4vw, 2.4rem); margin: 0 0 var(--space-2); letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); letter-spacing: -.01em; }
.lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 var(--space-5); max-width: 36rem; }
p { max-width: 38rem; }
.muted { color: var(--muted); font-size: .92rem; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

.btn {
  display: inline-block; padding: .55rem 1.2rem; border-radius: var(--radius-control);
  background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: .95rem;
  border: 0; cursor: pointer;
}

footer {
  max-width: var(--measure-data); margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}
footer p { max-width: 44rem; }

/* ---- cards and rows -------------------------------------------------- */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (max-width: 46rem) { .cards { grid-template-columns: 1fr; } }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (max-width: 52rem) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-5); display: flex; flex-direction: column;
}
.card.lead { border-color: var(--accent); }
.card h2 { margin: 0 0 .2rem; font-size: .95rem; letter-spacing: -.01em; }
.card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.card .price { font-size: .95rem; color: var(--muted); margin: 0 0 var(--space-3); }
.card .unit {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: .55rem;
  display: flex; justify-content: space-between;
}

.rows { list-style: none; margin: .3rem 0 0; padding: 0; flex: 1; }
/* The bar is drawn BEHIND the label, not beside it: the row stays one line and
   the shape is readable without a second column. */
.row {
  position: relative; display: flex; justify-content: space-between;
  gap: var(--space-4); padding: .42rem var(--space-2); font-size: .92rem;
}
.row i { position: absolute; inset: 0 auto 0 0; background: var(--bar); border-radius: 3px; }
.row b, .row span { position: relative; }
/* min-width: 0 is load-bearing. A flex child defaults to min-width: auto, which
   forbids shrinking below its content -- so ellipsis never engaged and a long
   name held the row open, pushing search results off a narrow screen with no
   horizontal scroll to reach them. */
.row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.row span { color: var(--muted); min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 26rem) {
  .row { flex-direction: column; gap: .1rem; align-items: flex-start; }
  .row span { text-align: left; }
}

.more { margin: var(--space-3) 0 0; font-size: .82rem; color: var(--muted); }
.empty { color: var(--muted); font-size: .9rem; padding: var(--space-2); }

/* Headline list on a subject page. Lived only in subject.html's own block, so
   extracting that block took these with it -- the exact failure mode this file
   exists to end, caught here because the list rendered with bullets. */
.heads { list-style: none; margin: .3rem 0 0; padding: 0; }
.heads li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.heads li:last-child { border-bottom: 0; }
.heads .src { color: var(--muted); font-size: .8rem; }

/* ---- KPI strip and charts ------------------------------------------- */

.kpis {
  display: flex; gap: 0; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; flex-wrap: wrap;
}
.kpi { flex: 1 1 8rem; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kpi .v { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; }

.chart { border: 1px solid var(--line); border-radius: 0 0 var(--radius-card) var(--radius-card); padding: .9rem 1rem 1.2rem; }
/* Height is not fixed: the drawing keeps its aspect ratio so the axis labels
   inside it are not stretched by the container's width. */
.chart svg { width: 100%; height: auto; display: block; color: var(--accent); }

/* ---- forms ----------------------------------------------------------- */

form.find { display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); }
form.find input[type=search] {
  flex: 1; padding: .55rem .8rem; font-size: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--paper); color: var(--ink);
}
form.find button {
  padding: .55rem 1.2rem; font-size: 1rem; border: 0; border-radius: var(--radius-control);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
}

form.contact { display: grid; gap: .9rem; max-width: 34rem; margin-top: var(--space-5); }
form.contact label { display: grid; gap: .3rem; font-size: .9rem; }
form.contact input, form.contact textarea {
  padding: .6rem .8rem; font: inherit; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--paper); color: var(--ink);
}
form.contact textarea { min-height: 9rem; resize: vertical; }
form.contact button {
  justify-self: start; padding: .6rem 1.4rem; font: inherit; border: 0;
  border-radius: var(--radius-control); background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
.notice {
  padding: .8rem 1rem; border-radius: var(--radius-control); border: 1px solid var(--line);
  background: var(--wash); margin-top: var(--space-4); max-width: 34rem;
}
.notice.bad { border-color: var(--accent); }

/* ---- screenshots on the features page -------------------------------- */

figure.shot { margin: var(--space-4) 0 var(--space-5); max-width: 100%; }
figure.shot img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--wash);
}
figure.shot figcaption { margin-top: var(--space-2); font-size: .85rem; color: var(--muted); }