/* ==========================================================================
   Performance — performance.drfigo.com
   Black-dominant surfaces, beige type, gold reserved for the data marks.
   Surface ratio comes from .site-performance in tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The measurement log — the signature moment.
   Gold is safe as text here and only here: 6.2:1 on black, 4.9:1 on maroon-dk.
   -------------------------------------------------------------------------- */

.log-section { padding-block-end: var(--sp-8); }

.log {
  background: var(--surface);
  border-block-start: 2px solid var(--accent);
  padding: var(--sp-6) var(--gutter);
}

.log__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.log__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.log__tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}

/* Readouts. A fixed two-up grid with tabular figures, so dragging the slider
   rewrites glyphs without moving anything. */
.readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-4);
  margin-block-start: var(--sp-6);
}

.readout { display: grid; gap: var(--sp-1); }

.readout dt {
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}

.readout dd {
  display: flex;
  align-items: baseline;
  gap: .3em;
  margin: 0;
}

.readout__v {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
}

.readout__u { font-size: var(--fs-xs); color: var(--ink-quiet); }

.readout__d {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The curve */
.log__curve { margin-block-start: var(--sp-6); }

.perf-curve { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

.pc-area  { fill: rgba(239, 231, 218, .07); stroke: none; }
.pc-line  { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-tick  { stroke: var(--ink-quiet); stroke-width: 1; }
.pc-drop  { stroke: var(--accent); stroke-width: 1; opacity: .55; }
.pc-dot   { fill: var(--accent); }

/* The week slider. The one interactive element on the page. */
.weeker { margin-block-start: var(--sp-5); }

.weeker__label {
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}

.weeker__n {
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}

.weeker__range {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  block-size: var(--tap);
  margin-block-start: var(--sp-2);
  background: transparent;
  cursor: pointer;
  /* Dragging the slider must not scroll the page underneath it. */
  touch-action: none;
}

.weeker__range::-webkit-slider-runnable-track {
  block-size: 2px;
  background: rgba(239, 231, 218, .28);
}

.weeker__range::-moz-range-track {
  block-size: 2px;
  background: rgba(239, 231, 218, .28);
}

.weeker__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 26px;
  block-size: 26px;
  margin-block-start: -12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
}

.weeker__range::-moz-range-thumb {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
}

.weeker__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.log__plateau {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.log__note {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
}

/* --------------------------------------------------------------------------
   Client result — deliberately an empty slot.
   Nothing on this platform invents a person's words, so this stays a marked
   placeholder until a real quote and result arrive.
   -------------------------------------------------------------------------- */

.quote-slot {
  margin-block-start: var(--sp-6);
  padding: var(--sp-6);
  border: 1px dashed var(--rule-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-quiet);
  max-inline-size: var(--measure);
}

/* --------------------------------------------------------------------------
   Cards read as panels on a dark ground rather than tinted blocks.
   -------------------------------------------------------------------------- */

.card { background: var(--surface); border-inline-start-color: var(--accent); }
.card__title { color: var(--ink); }

@media (min-width: 700px) {
  .log { padding: var(--sp-7); }
  .readouts { grid-template-columns: repeat(4, 1fr); }
  .log__curve { margin-block-start: var(--sp-7); }
}