/* The subscription page's own drawings: the editable rows, the category bar, the ranked bars, the
   time cards, the investment checklist and the two-line growth chart.

   Panels, the hero card, stat tiles, the FAQ accordion, related cards and the pick panel all come
   from styles.css and results.css. Scoped to .subs-page, the body class this page opts into.

   Category colours are the site's existing tokens, one per category, and the legend spells every
   one of them out in words — colour is never the only thing telling the categories apart. */

/* ---------------------------------------------------------------- The rows */

.subs-page .lead { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

.subs-page .entry-row.sub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.subs-page .sub-row .field-name { grid-column: 1 / 3; grid-row: 1; }
.subs-page .sub-row .remove { grid-column: 3; grid-row: 1; }
.subs-page .sub-row .field-amount { grid-column: 1; grid-row: 2; }
.subs-page .sub-row .field-frequency { grid-column: 2; grid-row: 2; }
.subs-page .sub-row .field-category { grid-column: 1 / 3; grid-row: 3; }
.subs-page .sub-row .field { margin-bottom: 0; min-width: 0; }
.subs-page .sub-row .field label { font-size: 0.78rem; }
.subs-page .sub-row input,
.subs-page .sub-row select { min-height: 42px; }

.subs-page .row-cur { color: var(--muted); font-weight: 700; }
.subs-page .row-name { min-width: 0; }
.subs-page .row-amount { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.subs-page .row-frequency,
.subs-page .row-category { width: 100%; min-width: 0; }

.subs-page .row-error {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--danger);
}
.subs-page .row-error:empty { display: none; }
.subs-page input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.subs-page .empty-rows {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.subs-page .form-note {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.subs-page .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}
.subs-page .form-actions .btn-secondary { margin: 0; }

.subs-page .add-row:disabled { opacity: 0.5; cursor: default; }

/* ---------------------------------------------------------------- The headline */

.subs-page #annual-total .per {
  font-size: 0.46em;
  font-weight: 600;
  opacity: 0.8;
}

.subs-page .subs-block { margin-top: 8px; }
.subs-page .results-empty { font-size: 0.9rem; color: var(--muted); }

/* ---------------------------------------------------------------- Where it all goes */

.subs-page .cat-bar {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--accent);
  margin-top: 4px;
}
.subs-page .seg {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--cat-color, var(--muted));
  border-right: 1px solid var(--card);
}
.subs-page .seg:last-child { border-right: 0; }

.subs-page .cat-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.subs-page .cat-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}
.subs-page .cat-key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cat-color, var(--muted));
}
.subs-page .cat-name { overflow-wrap: anywhere; }
.subs-page .cat-share { color: var(--muted); font-variant-numeric: tabular-nums; }
.subs-page .cat-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.subs-page [data-cat="streaming"] { --cat-color: var(--primary); }
.subs-page [data-cat="music"] { --cat-color: var(--highlight); }
.subs-page [data-cat="fitness"] { --cat-color: var(--growth); }
.subs-page [data-cat="apps"] { --cat-color: var(--fees); }
.subs-page [data-cat="gaming"] { --cat-color: var(--bmi-under); }
.subs-page [data-cat="news"] { --cat-color: var(--bmi-over); }
.subs-page [data-cat="cloud"] { --cat-color: var(--bmi-healthy); }
.subs-page [data-cat="other"] { --cat-color: var(--rest); }

/* ---------------------------------------------------------------- The biggest bites */

.subs-page .bites { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.subs-page .bite-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.subs-page .bite-name { font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.subs-page .bite-flag {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
}
.subs-page .bite-value {
  margin-left: auto;
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.subs-page .bite-track {
  height: 10px;
  border-radius: 5px;
  background: var(--accent);
  overflow: hidden;
  margin: 6px 0 4px;
}
.subs-page .bite-fill { display: block; height: 100%; border-radius: 5px; background: var(--primary); }
.subs-page .bite.is-top .bite-fill { background: var(--highlight); }
.subs-page .bite-meta { font-size: 0.72rem; color: var(--muted); }

/* ---------------------------------------------------------------- Over time */

.subs-page .time-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}
.subs-page .time-card {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent);
}
.subs-page .time-card.is-current { box-shadow: inset 0 0 0 2px var(--primary); }
.subs-page .time-years { font-size: 0.72rem; color: var(--muted); }
.subs-page .time-value { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.subs-page .slider-row { display: grid; gap: 6px; margin: 0 0 8px; }
.subs-page .slider-row label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}
.subs-page .slider-row output { color: var(--primary); font-variant-numeric: tabular-nums; }
.subs-page .slider-row input[type="range"] { width: 100%; accent-color: var(--primary); min-height: 32px; }
.subs-page .time-figure { margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }

/* ---------------------------------------------------------------- What if one goes? */

.subs-page .cut-field { margin-bottom: 12px; }
.subs-page .cut-stats { margin: 0 0 12px; }
.subs-page .cut-stats .value { font-size: 1.02rem; }

/* ---------------------------------------------------------------- Investing it instead */

.subs-page .invest-block {
  margin-top: 26px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.subs-page .invest-block > p { font-size: 0.9rem; line-height: 1.55; }
.subs-page .invest-sub { font-size: 0.95rem; margin: 18px 0 8px; }
.subs-page .invest-pick { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.subs-page .invest-pick legend { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; padding: 0; }
.subs-page .invest-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.subs-page .invest-link {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 0;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.subs-page .invest-link:hover { color: var(--highlight); }

.subs-page .invest-list { display: grid; gap: 6px; }
.subs-page .invest-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.subs-page .invest-item:hover { border-color: var(--primary); }
.subs-page .invest-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.subs-page .invest-name { font-size: 0.86rem; overflow-wrap: anywhere; }
.subs-page .invest-amount { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.subs-page .invest-presets { margin: 0 0 12px; }
.subs-page .invest-presets .chip { min-height: 36px; }

.subs-page .invest-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.subs-page .invest-inputs input[type="number"] { min-height: 44px; }
.subs-page .invest-inputs input[type="range"] { width: 100%; accent-color: var(--primary); min-height: 30px; margin-top: 6px; }
.subs-page .years-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.subs-page .years-row .chip { min-height: 34px; }

.subs-page .invest-hero {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--accent);
  margin: 4px 0 14px;
}
.subs-page .invest-hero .label { font-size: 0.82rem; color: var(--muted); }
.subs-page .invest-hero .value {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}
.subs-page .invest-hero .sub { font-size: 0.88rem; line-height: 1.55; color: var(--text); }

.subs-page .invest-stats { margin: 0 0 8px; }
.subs-page .invest-stats .value { font-size: 1.02rem; overflow-wrap: anywhere; }

.subs-page .invest-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- The chart */

.subs-page .inv-chart-wrap { margin: 6px 0 0; }
.subs-page .inv-chart { display: block; width: 100%; height: auto; }
.subs-page .chart-area { fill: var(--highlight); opacity: 0.12; }
.subs-page .chart-axis { stroke: var(--border); stroke-width: 1; }
.subs-page .chart-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.subs-page .chart-line.is-balance { stroke: var(--highlight); }
.subs-page .chart-line.is-contrib { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.subs-page .chart-label { fill: var(--muted); font-size: 9px; }
.subs-page .chart-label.is-end { text-anchor: end; }

.subs-page .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.subs-page .chart-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.subs-page .key-balance { background: var(--highlight); }
.subs-page .key-contrib { background: var(--muted); }

.subs-page .inv-table { margin-top: 8px; }
.subs-page .inv-table summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0;
}
.subs-page .inv-table .table-wrap { max-height: 280px; }
.subs-page .inv-table table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.subs-page .inv-table th,
.subs-page .inv-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.subs-page .inv-table th:first-child,
.subs-page .inv-table td:first-child { text-align: left; }

.subs-page .quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.subs-page .quick-card {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  background: var(--accent);
}
.subs-page .quick-card.is-current { box-shadow: inset 0 0 0 2px var(--primary); }
.subs-page .quick-years { font-size: 0.68rem; color: var(--muted); }
.subs-page .quick-value { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.subs-page .quick-meta { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- The prose sections */

.subs-page .fact-list { display: grid; gap: 12px; }
.subs-page .fact { background: var(--accent); border-radius: 12px; padding: 14px 16px; }
.subs-page .fact h3 { font-size: 0.95rem; margin: 0 0 6px; }
.subs-page .fact p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.subs-page .how-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.6; }
.subs-page .how-list li { margin-bottom: 0; }
.subs-page .formula-wrap { display: grid; gap: 8px; margin: 12px 0; }
.subs-page .formula { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.subs-page .formula-more { margin: 8px 0 0; }
.subs-page .formula-more summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.subs-page .freq-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.subs-page .freq-table th,
.subs-page .freq-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.subs-page .freq-table td { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 420px) {
  .subs-page .entry-row.sub-row { grid-template-columns: minmax(0, 1fr) 38px; }
  .subs-page .sub-row .field-name { grid-column: 1; grid-row: 1; }
  .subs-page .sub-row .remove { grid-column: 2; grid-row: 1; }
  .subs-page .sub-row .field-amount { grid-column: 1 / 3; grid-row: 2; }
  .subs-page .sub-row .field-frequency { grid-column: 1 / 3; grid-row: 3; }
  .subs-page .sub-row .field-category { grid-column: 1 / 3; grid-row: 4; }
  .subs-page .invest-block { padding: 12px; }
  .subs-page .invest-hero { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .subs-page * { transition: none !important; animation: none !important; }
}