/* The owner-only admin surfaces (scope amendment 2026-08-20): the
   section switcher, the metrics board, and the render feed (2026-09-06).
   The board reads like a spec sheet from the studio world: gallery
   white, hard ink hairlines, mono for every number, the one IKB accent
   kept for live state and the row that pays. The feed keeps the same
   sheet: photos on a card, the recipe in mono under them. */

/* Section switcher */

.admin-nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: var(--border-hard);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-nav .auth-label {
  margin: 0 var(--space-2) 0 0;
}

.admin-nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: var(--space-1);
}

.admin-nav-link:hover {
  color: var(--ink);
}

.admin-nav-link.is-active {
  color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}

/* Board head: title left, liveness right */

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

.metrics-page h1 {
  margin: 0;
}

.metrics-live {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.metrics-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: metrics-pulse 2.4s ease-out infinite;
}

@keyframes metrics-pulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 60, 255, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(43, 60, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 60, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .metrics-pulse { animation: none; }
}

/* Range switcher: one hard-edged segmented strip */

.metrics-ranges {
  display: flex;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: var(--border-hard);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

.metrics-range {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-card);
}

.metrics-range + .metrics-range {
  border-left: 1.5px solid var(--line-strong);
}

.metrics-range:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.metrics-range.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* Ruled sections */

.metrics-section {
  border-top: var(--border-hard);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}

.metrics-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.metrics-heading span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-2);
}

.metrics-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-7);
  align-items: start;
}

@media (max-width: 44rem) {
  .metrics-pair { grid-template-columns: 1fr; }
}

/* The funnel: label, count, proportional bar, stage-over-stage rate */

.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.funnel-stage {
  display: grid;
  grid-template-columns: 9.5rem 4.5rem 1fr 4.5rem;
  align-items: center;
  column-gap: var(--space-3);
}

.funnel-label {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.funnel-count {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--ink);
  text-align: right;
}

/* Bars are stretched SVG rects, widths carried as presentational
   attributes: the CSP blocks style attributes site-wide. */
.funnel-track {
  display: block;
  width: 100%;
  height: 14px;
  background: var(--paper-deep);
}

.funnel-bar {
  fill: var(--ink);
}

.funnel-stage-paid .funnel-bar {
  fill: var(--accent);
}

.funnel-stage-paid .funnel-count {
  color: var(--accent-deep);
}

.funnel-rate {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: right;
}

@media (max-width: 34rem) {
  .funnel-stage {
    grid-template-columns: 1fr 4.5rem 4rem;
    grid-template-areas: "label count rate" "track track track";
    row-gap: var(--space-1);
  }
  .funnel-label { grid-area: label; }
  .funnel-count { grid-area: count; }
  .funnel-track { grid-area: track; }
  .funnel-rate { grid-area: rate; }
}

/* Ledger rows: label, dotted leader, mono value */

.ledger {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.ledger-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ledger-row dt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.ledger-row dt em {
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  opacity: 0.75;
}

.ledger-leader {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-3px);
  min-width: var(--space-4);
}

.ledger-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.ledger-row dd em {
  font-style: normal;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

.ledger-row-strong dt,
.ledger-row-strong dd {
  color: var(--ink);
  font-weight: 600;
}

/* The ops liveness strip under Right now */

.metrics-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin: var(--space-4) 0 0;
}

/* Tables: hairline rules, mono numerals right */

.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.metrics-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-align: left;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
}

.metrics-table td {
  border-top: 1px solid var(--line);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  color: var(--ink-soft);
}

.metrics-table .num {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}

.metrics-table .bar-col {
  width: 34%;
}

.table-track {
  display: block;
  width: 100%;
  height: 8px;
  background: var(--paper-deep);
}

.table-bar {
  fill: var(--ink);
}

.metrics-table-sub {
  margin-top: var(--space-4);
}

/* Footnotes and alerts */

.metrics-note {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  /* Upload failures print raw API reasons (one unbroken 70-char
     token); let them break anywhere so a phone never scrolls sideways. */
  overflow-wrap: anywhere;
}

.is-alert {
  color: #b3261e;
  font-style: normal;
}

/* The tape */

.tape {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.tape-row {
  display: grid;
  grid-template-columns: 7.5rem 5rem 1fr auto;
  column-gap: var(--space-3);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: var(--space-2) 0;
}

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

.tape-at {
  color: var(--ink-soft);
}

.tape-kind {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tape-kind-sign_up { color: var(--ink-soft); }
.tape-kind-trial { color: var(--ink); }
.tape-kind-purchase { color: var(--accent-deep); font-weight: 600; }

.tape-who {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tape-detail {
  color: var(--ink-soft);
}

@media (max-width: 34rem) {
  .tape-row {
    grid-template-columns: 6.5rem 1fr auto;
  }
  .tape-who { display: none; }
}

/* The render feed: one card per render, before and after side by side
   (the style reference joins for Style Transfer), the recipe and the
   account in mono beneath. Phones stack the pair so the after photo
   gets the full width: the point of the page is judging the output. */

/* minmax(0, 1fr) columns throughout: a grid item's default min-width
   is its content, and a 720px variant would otherwise push the card
   past a phone's edge. */
.feed {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.feed-card {
  background: var(--paper-card);
  border: var(--border-hard);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.feed-pair {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.feed-shot {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.feed-shot a {
  display: block;
}

.feed-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-md) - 4px);
  background: var(--paper-deep);
}

.feed-shot figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* The after slot while there is no photo: in flight, failed, or a
   before photo purged with an older upload. */
.feed-shot-empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: calc(var(--radius-md) - 4px);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: center;
  /* API failure reasons arrive as one unbroken token. */
  overflow-wrap: anywhere;
}

.feed-shot-empty.is-failed {
  color: #b3261e;
}

.feed-meta {
  display: grid;
  gap: var(--space-1);
}

.feed-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.feed-line-strong {
  color: var(--ink);
}

.feed-note {
  margin: 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink);
}

.feed-more {
  margin: var(--space-4) 0 0;
}

@media (max-width: 34rem) {
  .feed-pair {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }
}