/* Cadence screen (cadence-view.js). Brand tokens and base components live in /styles.css;
   follow ../DESIGN.md. Tokens only: no hex, rgb or named colors in this file. The projection
   chart and grid use navy tints only. Horizontal timeline on desktop, vertical under 900px. */

#cadence-view { display: grid; gap: var(--space-4); align-content: start; }
#cadence-view > .panel + .panel { margin-top: 0; }

/* ============================== Sequence facts and start date ============================== */
.cadence-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.cadence-facts > div { min-width: 0; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); }
.cadence-facts dt { font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-2); }
.cadence-facts dd { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
/* What the one-window schedule cannot express (e.g. a launch-day window set in Apollo): a warn-dot line. */
.cadence-schedule-note { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-hair); font-size: var(--fs-small); line-height: 1.5; color: var(--status-warn-text); }
.cadence-schedule-note::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--status-warn-dot); box-shadow: var(--status-dot-ring); }
#schedule-form .cadence-note-field { flex: 1 1 320px; }
.cadence-start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-8); }
.cadence-start label { flex: none; }
.cadence-start input { width: 200px; }
.cadence-start p { flex: 1 1 280px; max-width: 560px; padding-bottom: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }

/* ============================== Timeline ============================== */
/* Five white cards on one thin navy line. Past steps: navy node. Today's or the next send:
   the gold dot (once on this screen). Later steps: open node. */
.cadence-track { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: var(--space-4); margin: 0; padding: 0 0 var(--space-1); list-style: none; overflow-x: auto; }
.cadence-step { position: relative; min-width: 0; display: flex; flex-direction: column; padding-top: 32px; }
.cadence-step::before { content: ''; position: absolute; top: 11px; left: calc(var(--space-4) / -2); right: calc(var(--space-4) / -2); height: 1px; background: var(--navy-600); }
.cadence-step:first-child::before { left: 50%; }
.cadence-step:last-child::before { right: 50%; }
.cadence-node { position: absolute; top: 5px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--navy-400); box-shadow: 0 0 0 4px var(--surface); }
.cadence-step.is-past .cadence-node { background: var(--navy-600); border-color: var(--navy-600); }
.cadence-step.is-next .cadence-node { background: var(--gold-mark); border-color: var(--gold-mark); box-shadow: var(--status-dot-ring), 0 0 0 4px var(--surface); }

.cadence-track .step { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.cadence-step.is-next .step { border-color: var(--navy-200); box-shadow: var(--shadow-card-rest); }
.cadence-track .step-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.cadence-track .step-head b { font: 700 var(--fs-h1)/1 var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.step-date { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-labels { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-2); }
.step-labels > span + span::before { content: '·'; margin: 0 6px; color: var(--navy-200); }
.step-email { font: 700 var(--fs-micro)/1.5 var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.step-now { font-weight: 600; color: var(--accent); }
.cadence-track .mail { flex: 1 1 auto; min-height: 120px; max-height: 320px; overflow: auto; padding: var(--space-3); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.6; }
.cadence-track .mail-subject { margin-bottom: 10px; padding-bottom: 10px; font-size: var(--fs-small); }
.cadence-track .token { display: inline; padding: 0 6px; border: 1px solid var(--border-cool); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent); font: 600 var(--fs-caption)/1.6 var(--font-body); white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cadence-track .step-meta { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-2); }
.step-edit { align-self: flex-start; }
.step-form { gap: var(--space-3); }
.step-form textarea { min-height: 220px; font-size: var(--fs-small); }
.step-form .actions { margin-top: 0; }
.cadence-track .step-apollo { margin-top: 0; }
.cadence-track .step-apollo summary { font-size: var(--fs-small); }
.step-apollo .step-version { margin-top: var(--space-3); font: 400 var(--fs-caption)/1.5 var(--font-body); color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cadence-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-hair); }
.cadence-more .history { margin-top: 0; flex: 1 1 320px; min-width: 0; }
.cadence-more .inline-form { margin-top: var(--space-3); }

/* ============================== Projection ============================== */
.cadence-lede { max-width: 880px; font-size: var(--fs-body); line-height: 1.65; color: var(--text-2); }
.cadence-lede strong { color: var(--text); }
.cadence-controls { margin: var(--space-5) 0; padding: var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); }
.cadence-controls input, .cadence-controls select { background-color: var(--surface); }
.cadence-projection .compare { gap: var(--space-4); }
.cadence-projection .compare > div { display: grid; gap: 4px; align-content: start; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--navy-400); border-radius: var(--radius-md); }
.cadence-projection .compare > .compare-bad { border-left-color: var(--navy-900); }
.cadence-projection .compare b { font: 700 var(--fs-h2-lg)/1.15 var(--font-heading); letter-spacing: -0.02em; color: var(--text); }
.cadence-projection .compare .label { font-size: var(--fs-small); color: var(--text-2); }
.cadence-projection .compare .hint { margin-top: 0; color: var(--text-2); }
.cadence-chart { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cadence-projection .legend { gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); font-size: var(--fs-small); color: var(--text-2); }
.cadence-projection .legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cadence-projection .swatch { width: 12px; height: 12px; margin: 0; border-radius: 2px; }
.cadence-projection .swatch.new { background: var(--navy-600); }
.cadence-projection .swatch.fu { background: var(--navy-200); }
.cadence-projection .swatch.backlog { background: var(--navy-900); }
.cadence-projection .swatch.cap { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--navy-900); background: none; }
.cadence-projection .swatch.cell-full { background: var(--navy-100); box-shadow: inset 0 0 0 1px var(--border-cool); }
.cadence-projection .swatch.cell-over { background: var(--navy-200); }

.cadence-chart .chart .bar-fu { fill: var(--navy-200); }
.cadence-chart .chart .bar-new { fill: var(--navy-600); }
.cadence-chart .chart .bar-backlog { fill: var(--navy-900); }
.cadence-chart .chart .cap-line { stroke: var(--navy-900); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cadence-chart .chart .grid { stroke: var(--border); stroke-width: 1; }
.cadence-chart .chart text { fill: var(--text-2); font: 500 var(--fs-micro) var(--font-body); font-variant-numeric: tabular-nums; }
.cadence-chart .chart .x-label { text-anchor: middle; }
.cadence-chart .chart .y-label { text-anchor: end; }

.cadence-grid-title { margin: var(--space-6) 0 var(--space-2); }
.cadence-grid { margin-top: var(--space-2); }
.cadence-grid .grid-table { font-size: var(--fs-small); }
.table-wrap.cadence-grid .grid-table th, .table-wrap.cadence-grid .grid-table td { padding: 6px 8px; border: 0; border-right: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair); text-align: center; }
.table-wrap.cadence-grid .grid-table thead th { font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: 0.04em; color: var(--text-2); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.table-wrap.cadence-grid .grid-table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); font: 500 var(--fs-small)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); white-space: nowrap; box-shadow: inset -1px 0 0 var(--border); }
.table-wrap.cadence-grid .grid-table thead th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; box-shadow: inset -1px 0 0 var(--border); }
.table-wrap.cadence-grid .grid-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.table-wrap.cadence-grid .grid-table tr:hover td { background: var(--surface-sunken); }
.cadence-grid .grid-table td { color: var(--text); }
.cadence-grid .grid-table td.cell-full, .table-wrap.cadence-grid .grid-table tr:hover td.cell-full { background: var(--navy-100); color: var(--navy-900); }
.cadence-grid .grid-table td.cell-over, .table-wrap.cadence-grid .grid-table tr:hover td.cell-over { background: var(--navy-200); color: var(--navy-900); font-weight: 700; }
.cadence-grid .grid-table td.cell-zero { color: var(--text-2); }

/* ============================== Responsive ============================== */
@media (max-width: 1150px) {
  .cadence-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Vertical sequence: the line runs down the left edge, nodes beside each card. */
@media (max-width: 900px) {
  .cadence-track { grid-template-columns: 1fr; overflow: visible; }
  .cadence-step { padding: 0 0 0 32px; }
  .cadence-step::before { top: 0; bottom: calc(var(--space-4) * -1); left: 11px; right: auto; width: 1px; height: auto; }
  .cadence-step:first-child::before { top: 24px; left: 11px; }
  .cadence-step:last-child::before { bottom: auto; right: auto; height: 24px; }
  .cadence-step:first-child:last-child::before { display: none; }
  .cadence-node { top: 18px; left: 5px; margin-left: 0; }
  .cadence-track .mail { min-height: 0; }
}
@media (max-width: 720px) {
  .cadence-facts, .cadence-projection .compare { grid-template-columns: 1fr; }
  .cadence-start { margin-bottom: var(--space-6); }
  .cadence-start label, .cadence-start input { width: 100%; }
  .cadence-chart { padding: var(--space-3); }
}