/* Hallmark · genre: atmospheric · macrostructure: Index-First · theme: Midnight
 * tone: utilitarian · anchor hue: 40 · enrichment: none · nav: N9 · footer: Ft2
 * pre-emit critique: P4 H5 E5 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * mobile: pass (34, 49, 50–57) · icons: pass (30)
 *
 * Every colour and font resolves through a token in tokens.css.
 * Outlier face (mono) is confined to two roles: the row metadata line and the
 * summary figures. Gate 38 caps the outlier at two slots.
 */

/* Deliberate overflow safety net. `clip` not `hidden` — hidden creates a
   scroll container and would break the sticky filter rail. */
html { overflow-x: clip; }
body { overflow-x: clip; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Focus rings appear instantly and are never transitioned. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-input);
}

kbd {
  font-size: var(--text-xs);
  border: var(--rule-hair) solid var(--color-rule-ctl);
  border-radius: var(--radius-input);
  padding: 0 var(--space-2xs);
}

/* ============================================================
   Masthead — N9 edge-aligned. The space between is the design.
   ============================================================ */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.masthead__meta {
  margin: 0;
  display: flex;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}

.masthead__sep { color: var(--color-rule-ctl); }
.masthead__meta .is-warning { color: var(--color-accent); }

/* ============================================================
   Lede — Index-First opens with a short paragraph. Single column,
   stacked, no eyebrow. Bottom padding outweighs top so the opener
   sits into the page rather than floating above it.
   ============================================================ */

.lede {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
}

.lede__title,
.lede__text { max-width: var(--measure); }

.lede__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.lede__text {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

/* Summary counts — typographic, not cards. Real figures from meta.json. */
.summary {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}

.summary__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-3xs) 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.summary__item:hover { border-bottom-color: var(--color-accent); }
.summary__item:active { transform: translateY(1px); }

.summary__item[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.summary__n {
  font-family: var(--font-outlier);
  font-size: var(--text-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.summary__item[data-digest="moved"] .summary__n { color: var(--color-signal); }

/* Clickable text never wraps. Labels are short enough to hold one line. */
.summary__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

/* ============================================================
   Layout — asymmetric: narrow filter rail, wide index. Never 1fr 1fr.
   ============================================================ */

.index-layout {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
  align-items: start;
}

/* ---- Filter rail ---- */

.rail {
  position: sticky;
  top: var(--space-md);
  z-index: var(--z-base);
}

.rail__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-right: var(--space-md);
  border-right: var(--rule-hair) solid var(--color-rule);
}

.field { border: 0; margin: 0; padding: 0; min-width: 0; }

.field__label,
legend.field__label {
  display: block;
  padding: 0;
  margin-bottom: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-neutral);
}

.field__input {
  width: 100%;
  min-height: var(--control-h);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-ctl);
  border-radius: var(--radius-input);
  outline: 2px solid transparent;   /* reserved so focus adds no geometry */
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.field__input:hover { border-color: var(--color-neutral); }
.field__input:active { background: var(--color-paper-3); }
.field__input::placeholder { color: var(--color-neutral); }

.field__input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Reserved so an appearing hint or error never pushes the rail down. */
.field__hint {
  margin: var(--space-2xs) 0 0;
  min-height: 1lh;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.chip {
  background: none;
  border: var(--rule-hair) solid var(--color-rule-ctl);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  min-height: 2rem;
  padding: var(--space-3xs) var(--space-sm);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.chip:hover { border-color: var(--color-neutral); color: var(--color-ink); }
.chip:active { transform: translateY(1px); }
.chip[disabled] { opacity: 0.55; cursor: not-allowed; }

.chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
}

.btn-reset,
.btn-more {
  align-self: start;
  min-height: var(--control-h);
  background: none;
  border: var(--rule-hair) solid var(--color-rule-ctl);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}

.btn-reset:hover,
.btn-more:hover { border-color: var(--color-accent); color: var(--color-ink); }
.btn-reset:active,
.btn-more:active { transform: translateY(1px); }

.btn-reset[disabled],
.btn-more[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   Index — rows divided by hairlines. No cards, no side stripes.
   Each row is a single column: metadata line, then title, then body.
   ============================================================ */

.index { min-width: 0; }

.index__count {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral);
}

.index__empty {
  padding: var(--space-3xl) 0;
  color: var(--color-neutral);
}

.index__more {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

.row {
  padding: var(--space-lg) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  min-width: 0;
}

.row:first-child { border-top: 0; }

/* Outlier role 1 of 2: the machine-metadata line. Source anchors the left
   edge, timing anchors the right, so the row spans the column. */
.row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-xs);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.row__meta-l,
.row__meta-r {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  min-width: 0;
}

.row__meta-r { justify-content: flex-end; }

.row__source {
  color: var(--color-neutral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.row__date { color: var(--color-neutral); }

.row__status { color: var(--color-muted); }
.row__status[data-status="Rolling out"] { color: var(--color-accent); }
.row__status[data-status="Launched"]    { color: var(--color-signal); }
.row__status[data-status="Cancelled"]   { text-decoration: line-through; color: var(--color-neutral); }

.row__flag {
  color: var(--color-accent);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Underline drawn with a transform, so the only animated properties on the
   page are transform and opacity. */
.row__title a {
  position: relative;
  text-decoration: none;
}

.row__title a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--rule-hair);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-short) var(--ease-out);
}

.row__title a:hover::after { transform: scaleX(1); }

/* 16px floor for body prose — 13px was below the accessibility minimum and
   was also what made the measure stop ~440px short of the column edge. */
.row__summary {
  margin: var(--space-xs) 0 0;
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.row__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.row__tags li::before {
  content: '·';
  margin-right: var(--space-2xs);
  color: var(--color-rule-ctl);
}

.row__tags li:first-child::before { content: none; }

/* New-to-me: elevation by lightness. Never a glow shadow on dark. */
.row.is-new {
  background: var(--color-paper-2);
  box-shadow: 0 0 0 var(--space-sm) var(--color-paper-2);
  border-radius: var(--radius-input);
}

/* ============================================================
   Footer — Ft2, one line above a hairline.
   ============================================================ */

.foot-line {
  max-width: var(--page-max);
  margin-inline: auto;
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
}

.foot-line p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.foot-line a { color: var(--color-muted); text-decoration: underline; }
.foot-line a:hover { color: var(--color-accent); }

/* ============================================================
   Responsive — verified at 320 / 375 / 414 / 768.
   The rail unsticks and stacks; rows are already single-column.
   ============================================================ */

@media (max-width: 60rem) {
  .index-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .rail { position: static; }

  .rail__inner {
    border-right: 0;
    border-bottom: var(--rule-hair) solid var(--color-rule);
    padding-right: 0;
    padding-bottom: var(--space-lg);
  }
}

@media (max-width: 34rem) {
  .lede { padding-top: var(--space-lg); }
  .summary { gap: var(--space-sm) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}