/*
 * reference.css - the three reference screens, built against the design system.
 *
 * Every value below is a token. There are no literals except 0, 100%, 1fr and the
 * keywords. If a value you need is not a token, the answer is a token, not a literal.
 *
 * Load order: tokens.css, base.css (both via base.css's @import), then this.
 */
@import url("./base.css");
@import url("./components.css");
/* The shell - nav, scroller, bottom bar. Extracted so web/index.html can load the SAME
   chrome instead of keeping a second, website-shaped one of its own. */
@import url("./shell.css");


/* ==========================================================================
   RHYTHM
   Space above a heading is larger than the space below it. Related things sit
   tight. Sections separate generously. Nothing is uniform.
   ========================================================================== */
.lede      { margin: var(--space-2) 0 0; color: var(--color-text-secondary); }
.section   { margin-top: var(--space-8); }
.section-first { margin-top: var(--space-6); }
.section > h2 { margin: 0 0 var(--space-2); }
.section > p  { margin: 0; }
.tight     { margin-top: var(--space-2); }
.spacer-sm { height: var(--space-4); }
.spacer-lg { height: var(--space-10); }

h1, h2, h3 { margin: 0; }

/* The screen title. Display face, display size, negative tracking, and NEVER a full
   sentence - a title is a name, the sentence goes in the lede below it. */
/* SF, not the display face. A screen title is navigation, and an iOS large title is not a
   separate object from the nav title - the system animates one into the other, so setting
   one in SF and the other in a serif says they are two different things. This completes at
   34px the withdrawal MIGRATION.md §13 began at 17. */
.title {
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-large-title);
  line-height: var(--leading-large-title);
  letter-spacing: var(--tracking-large-title);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  padding-top: var(--space-6);
}
.title-sm {
  font-family: var(--font-ui);
  font-size: var(--text-title-1);
  line-height: var(--leading-title-1);
  letter-spacing: var(--tracking-title-1);
  font-weight: var(--weight-bold);
}

/* A section heading. Sentence case, never uppercase, never tracked. */
.label {
  font-size: var(--text-footnote);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   WAVEFORM
   The hero. Drawn from decoded audio in a canvas, in neutrals, with the accent
   marking only the detected call window. Not CSS bars, not a rainbow.
   ========================================================================== */
.wave {
  margin-top: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.wave canvas { display: block; width: 100%; height: auto; }

/* The time axis sits under the chart, not on it. Tabular so the digits do not shift
   as the playhead moves. */
.wave-axis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   NOTICE - the refusal and error surface
   Danger is never signalled by colour alone: this carries its own surface AND an
   icon AND a label. #b45309 sits 1.4 degrees from the accent, so colour is the
   third cue here, never the first.
   ========================================================================== */
.notice {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-danger-surface);
}
/* align-items: flex-start, not center: with a label that wraps to two lines at the
   largest text size, centring floats the icon into the gap between them. */
.notice-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-danger);
  min-width: 0;
}
.notice-label { flex: 1 1 auto; min-width: 0; }
/* An icon that belongs to a line of text is sized in em, so it scales with that text
   the way SF Symbols scale with Dynamic Type. An icon in fixed chrome - the nav - stays
   in px. At AX5 a 20px px-sized glyph next to a 53px label reads as a rendering fault. */
.notice-head svg {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  /* Optical alignment with the cap height of the first line rather than its box top. */
  margin-top: 0.08em;
}
.notice-label {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.notice-body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}
.notice.is-ok { background: var(--color-success-surface); }
.notice.is-ok .notice-head { color: var(--color-success); }

/* ==========================================================================
   BUTTONS
   One primary per screen. Everything else is quiet. Hierarchy is carried by fill
   and weight, and survives the accent being covered because the primary is also
   the only full-width control.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-fill-quaternary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--duration-micro) var(--ease-out);
}
.btn:active { opacity: var(--pressed-opacity); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-pressed); opacity: 1; }
.btn-quiet {
  background: none;
  color: var(--color-accent);
  font-weight: var(--weight-regular);
}

/* ==========================================================================
   PROGRESS - honest, named stages and a real percentage
   ========================================================================== */
.progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}
.progress-stage { flex: 1 1 auto; min-width: 0; }
.progress-stage { font-size: var(--text-body); color: var(--color-text-primary); }
.progress-pct {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}
.progress-track {
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-fill-quaternary);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform-origin: left center;
  /* transform, not width. A width transition is a layout animation on every frame. */
  transition: transform var(--duration-move) var(--ease-out);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-10) 0;
}
.empty-title {
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-ui);
  font-size: var(--text-title-1);
  line-height: var(--leading-title-1);
  letter-spacing: var(--tracking-title-1);
  font-weight: var(--weight-bold);
}
.empty-body {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

/* ==========================================================================
   HISTORY LIST
   Rows with hairlines, grouped under a date. No cards: a card per row is how a list
   becomes a pile.
   ========================================================================== */
.group { margin-top: var(--space-6); }
.group:first-child { margin-top: var(--space-4); }
.group-label {
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-2);
}
/* Flex-wrap, not a two-column grid. At the largest accessibility size the meta column
   ("no score" at 106px) is wider than an SE's content width, and a grid track cannot get
   out of the way - it just overflows. Wrapping lets the meta drop to its own line. */
.item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: var(--hairline) solid var(--color-separator);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--duration-micro) var(--ease-out);
}
.item:active { opacity: var(--pressed-opacity); }
/* The subtle one. This IS a reading - the name of a call - so the serif looks earned. But
   it is a reading in an INDEX, and a serif in a list row is the most reliable "blog cards"
   signal there is. The reading gets its serif on the surface where it is the subject; in a
   list it is a row label, and row labels are SF at body size. */
.item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.item-name.is-refusal { font-family: var(--font-ui); color: var(--color-text-secondary); }
.item-sub {
  flex: 1 1 100%;
  margin-top: var(--space-1);
  font-size: var(--text-subhead);
  line-height: var(--leading-body);
  color: var(--color-text-tertiary);
}
.item-meta {
  flex: 0 1 auto;
  margin-left: auto;
  text-align: right;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--text-callout);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   THE SCREEN SWITCHER - development only, never shipped
   ========================================================================== */
.dev {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-top: var(--hairline) solid var(--color-separator);
  background: var(--color-surface);
}
.dev a {
  padding: var(--space-1) var(--space-2);
  margin: 0;
  border-radius: var(--radius-control);
  background: var(--color-fill-quaternary);
  color: var(--color-text-secondary);
  font-size: var(--text-footnote);
  text-decoration: none;
}
.dev a.on { background: var(--color-accent); color: var(--color-on-accent); }
[data-bare="1"] .dev { display: none; }