/*
 * /registry-status — the public registry availability page.
 *
 * Scoped under body.status-page, which also carries .learn-docs and
 * .learn-no-sidebar. Those two bring the whole shell — design tokens
 * (--learn-ink-950, --learn-accent), .learn-btn variants, the top bar, and the
 * sidebar-less margins — from learn.css, exactly as layouts/blog_new.html.erb
 * does. Only the page-specific parts live below.
 *
 * That inheritance also covers the application.css `a { border-bottom: 2px
 * solid #dee2e6 }` trap: learn.css already resets it under `.learn-docs a`.
 * Removing learn-docs from the layout would bring stray underlines back.
 */

.status-page {
  /* Green for a registry that answered, then yellow through red as the share of
     searches it missed rises. Lightness falls across the five steps as well as
     hue, so the ordering survives a greyscale print.

     Note for anyone revisiting this: green-to-red is the classic red/green
     colour-blind confusion, and the mid-ramp orange-red sits close to the green
     for a deutan viewer. That was a deliberate call — the ring below and the
     full data table are what carry the reading for anyone who can't separate
     the hues. */
  --status-pct-0: #37b24d; /* answered (at or below the threshold) */
  --status-pct-1: #ffd43b; /* > 0.5%  yellow        */
  --status-pct-2: #fab005; /* > 5%    yellow-orange */
  --status-pct-3: #fd7e14; /* > 15%   orange        */
  --status-pct-4: #f4511e; /* > 35%   orange-red    */
  --status-pct-5: #c92a2a; /* > 65%   red           */

  /* No lookups observed that day. Distinct from zero — see the methodology. */
  --status-nodata: #ffffff;
  --status-nodata-line: rgba(86, 76, 115, 0.18);

  --status-measure: 62rem;
}

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

/* .learn-main already supplies the top-bar offset and page padding. This only
   widens the reading measure: learn.css targets a ~48rem prose column, and a
   30-cell strip needs more room than prose does. */
.status-content {
  max-width: var(--status-measure);
}

/* ---------- header ---------- */

.status-header {
  margin-bottom: 2.5rem;
}

.status-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.15;
  color: var(--learn-ink-950);
  margin: 0 0 0.75rem;
}

.status-lede {
  font-size: 1.0625rem;
  color: var(--learn-body);
  max-width: 44rem;
  margin: 0 0 1rem;
}

.status-meta {
  font-size: 0.8125rem;
  color: var(--learn-muted);
  margin: 0;
}

.status-h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--learn-ink-950);
  margin: 3rem 0 1rem;
}

.status-h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--learn-ink-900);
  margin: 1.75rem 0 0.5rem;
}

.status-page .status-prose p {
  color: var(--learn-body);
  margin: 0 0 0.875rem;
  max-width: 44rem;
}

.status-page .status-prose a {
  color: var(--learn-accent);
  text-decoration: underline;
}

/* ---------- headline stats ---------- */

.status-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .status-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.status-stat {
  border: 1px solid var(--learn-border);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
}

.status-stat-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--learn-ink-950);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.375rem;
}

.status-stat-label {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--learn-body);
}

.status-stat-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--learn-muted);
}

/* ---------- scale legend ---------- */

.status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--learn-muted);
  margin-bottom: 1.25rem;
}

.status-legend-scale {
  display: flex;
  align-items: center;
  gap: 2px;
}

.status-legend-swatch {
  width: 22px;
  height: 12px;
  border-radius: 2px;
}

.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

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

.status-cards {
  display: grid;
  gap: 1rem;
}

.status-card {
  border: 1px solid var(--learn-border);
  border-radius: 12px;
  padding: 1.25rem;
  background: #fff;
}

.status-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--learn-ink-950);
  margin: 0 0 0.25rem;
  /* Registry names are free text from an external reporter; a long one must
     wrap rather than push the strip out of the card. */
  overflow-wrap: anywhere;
}

.status-card-stats {
  font-size: 0.8125rem;
  color: var(--learn-body);
  margin: 0 0 1rem;
}

.status-card-stats .status-peak {
  color: var(--learn-ink-900);
  font-weight: 500;
}

/* The strip: one cell per day in the window. 1fr columns rather than fixed
   widths so 30 cells fit a 320px viewport and still fill a wide card. */
.status-strip {
  display: grid;
  grid-template-columns: repeat(var(--status-days, 30), 1fr);
  gap: 2px; /* the surface gap that keeps adjacent fills legible */
  height: 30px;
}

.status-cell {
  border-radius: 2px;
  background: var(--status-pct-0);
}

.status-cell-1 { background: var(--status-pct-1); }
.status-cell-2 { background: var(--status-pct-2); }
.status-cell-3 { background: var(--status-pct-3); }
.status-cell-4 { background: var(--status-pct-4); }
.status-cell-5 { background: var(--status-pct-5); }

/* Secondary encoding, not decoration. The yellow end of the ramp sits under 3:1
   against the page, so a lone 0.8% day would read as blank at one cell wide.
   The ring marks a cell as carrying a reading independently of its fill, and
   keeps every measured day the same shape — only "not enough observations" is
   hollow. */
.status-cell {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.status-cell-nodata {
  background: var(--status-nodata);
  border: 1px dashed var(--status-nodata-line);
  box-shadow: none;
}

.status-strip-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--learn-muted);
  margin-top: 0.375rem;
}

/* ---------- data table ---------- */

.status-details {
  margin-top: 2rem;
  border: 1px solid var(--learn-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.status-details summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--learn-ink-900);
}

.status-table-scroll {
  overflow-x: auto;
  margin-top: 1rem;
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.status-table th,
.status-table td {
  text-align: left;
  padding: 0.4375rem 0.75rem 0.4375rem 0;
  border-bottom: 1px solid var(--learn-border);
  white-space: nowrap;
}

.status-table th {
  font-weight: 600;
  color: var(--learn-ink-900);
  position: sticky;
  top: 0;
  background: #fff;
}

.status-table td.status-num {
  text-align: right;
  padding-right: 1.5rem;
}

/* ---------- footnotes, methodology, disclaimer ---------- */

.status-notes {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--learn-border);
}

.status-page .status-notes p,
.status-page .status-notes li {
  font-size: 0.875rem;
  color: var(--learn-body);
  max-width: 44rem;
}

.status-notes ul {
  padding-left: 1.125rem;
  margin: 0 0 0.875rem;
}

.status-notes li {
  margin-bottom: 0.5rem;
}

.status-empty {
  border: 1px solid var(--learn-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--learn-body);
}

.status-aaha {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--learn-border);
}

.status-aaha img {
  max-height: 76px;
  margin-bottom: 1rem;
}

.status-page .status-aaha p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--learn-muted);
  max-width: none;
}

@media (min-width: 768px) {
  .status-strip {
    height: 38px;
  }
}