/* Program view — page-specific styles. Loaded AFTER styles.css, so it inherits
   Castor's tokens, cards, buttons, modal, toast, header, and footer; this file
   only adds the layout the team app doesn't have. Tokens come from
   /shared/porter-tokens.css + the accent block in styles.css — none are
   redeclared here. Success-forward palette: on-track/delivered reads in the
   primary cyan accent; slipped/rollover stays neutral (never an alarm red). */

/* Page spine — same --app-width as the team app's .screen. */
.pv{width:100%;max-width:var(--app-width);margin:0 auto;padding:24px var(--app-pad);}

/* Page intro. */
.pv-head{margin-bottom:26px;}
.pv-h1{font-family:var(--font-display);font-weight:500;font-size:var(--fs-2xl);letter-spacing:.3px;color:var(--text);margin:0 0 8px;}
.pv-sub{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;max-width:62ch;}
.pv-section-note{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.6;margin:-6px 0 12px;max-width:70ch;}

/* Disclaimer — same register as start.html's, warn-coloured left rule. */
.pv-disclaimer{border-left:3px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;}
.pv-disclaimer p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65;}
.pv-disclaimer strong{color:var(--text);font-weight:500;}

/* Load-failure banner. */
.pv-banner{border-left:3px solid var(--danger);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;}

/* ── Import ── */
.pv-drop{border:1.5px dashed var(--border);border-radius:var(--radius);padding:26px 18px;text-align:center;transition:border-color var(--motion-base),background var(--motion-base);}
.pv-drop.drag{border-color:var(--accent);background:var(--accent-tint);}
.pv-drop-lead{font-size:var(--fs-md);color:var(--text);margin:0 0 4px;}
.pv-drop-sub{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;}
.pv-drop-hint{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.6;margin:12px 0 0;}

/* Per-file results list (persists until the next load). */
.pv-results{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.pv-results:empty{display:none;}
.pv-result{display:flex;align-items:baseline;gap:9px;font-size:var(--fs-xs);line-height:1.5;padding:7px 11px;background:var(--surface-2);border-radius:var(--radius-sm);}
.pv-result .pv-r-file{font-family:var(--font-mono);color:var(--text-muted);word-break:break-all;flex:1 1 auto;min-width:0;}
.pv-result .pv-r-tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;}
.pv-r-ok .pv-r-tag{color:var(--success);}
.pv-r-warn .pv-r-tag{color:var(--warn);}
.pv-r-err{flex-wrap:wrap;}
.pv-r-err .pv-r-tag{color:var(--danger);}
.pv-r-reason{flex:1 1 100%;color:var(--text-dim);font-size:var(--fs-2xs);margin-top:2px;}

/* ── Coverage grid ── */
.pv-coverage{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.pv-team{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;position:relative;}
.pv-team-name{font-family:var(--font-display);font-weight:500;font-size:var(--fs-md);color:var(--text);margin:0 28px 9px 0;line-height:1.3;}
.pv-team-id{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-dim);font-weight:400;letter-spacing:.3px;}
.pv-team-rows{display:flex;flex-direction:column;gap:5px;}
.pv-team-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-xs);}
.pv-team-row .k{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);}
.pv-team-row .v{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;}
.pv-team-row .v.stale{color:var(--warn);}
.pv-team-row .v.muted{color:var(--text-dim);}
.pv-team-remove{position:absolute;top:11px;right:11px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--motion-base),background var(--motion-base);-webkit-tap-highlight-color:transparent;}
.pv-team-remove:hover{color:var(--danger);background:var(--danger-tint);}
.pv-noPI{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.4px;color:var(--text-dim);}

/* ── PI section ── */
.pv-pi-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 14px;flex-wrap:wrap;}
.pv-pi-select{display:flex;align-items:center;gap:8px;}
.pv-pi-select select{width:auto;min-width:120px;}

/* Headline strip — program-level figures for the selected PI. */
.pv-headline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;}
.pv-stat{background:var(--surface);padding:14px 16px;}
.pv-stat .pv-stat-fig{font-family:var(--font-display);font-weight:500;font-size:var(--fs-xl);color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums;}
.pv-stat .pv-stat-fig.good{color:var(--accent);}
.pv-stat .pv-stat-lbl{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);margin-top:5px;}

/* Chart card. */
.pv-chart-card{padding:18px;}
.pv-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.pv-chart-title{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);}

/* Chart controls cluster — view toggle + export, right of the title. */
.pv-chart-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Export-as-image button — icon + label so the action is discoverable (a less
   technical RTE shouldn't have to hover to learn it exists); the tooltip adds
   the "for slides" context. */
.pv-export-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:none;border:1px solid var(--border);color:var(--text-muted);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.4px;
  padding:6px 11px;border-radius:var(--radius-sm);
  transition:border-color var(--motion-base),color var(--motion-base);-webkit-tap-highlight-color:transparent;
}
.pv-export-btn:hover{border-color:var(--accent);color:var(--accent);}
.pv-export-btn svg{width:13px;height:13px;flex-shrink:0;}

/* Segmented control — Burn-down · Burn-up · Teams chart view. */
.pv-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px;gap:2px;}
.pv-seg-btn{
  background:none;border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.4px;
  color:var(--text-dim);padding:5px 12px;border-radius:calc(var(--radius-sm) - 2px);
  transition:background var(--motion-base),color var(--motion-base);-webkit-tap-highlight-color:transparent;
}
.pv-seg-btn:hover:not(.active){color:var(--text-muted);}
.pv-seg-btn.active{background:var(--accent-tint);color:var(--accent);}
.pv-chart-wrap{position:relative;height:320px;min-width:0;}
.pv-chart-note{font-size:var(--fs-2xs);color:var(--text-dim);line-height:1.6;margin:12px 0 0;}

/* ── Program velocity chart — custom legend + cursor tooltip ── */
/* Chart.js's built-in legend reads poorly at this size; a custom HTML legend of
   pill chips (swatch + label) is clearer, and renders line series as little
   line segments rather than dots. */
.pv-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:10px;}
.pv-lg{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text);letter-spacing:.3px;}
.pv-lg-sw{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.pv-lg-sw.line{height:0;width:15px;border-radius:0;border-top:3px solid;}
.pv-lg-sw.dash{border-top-style:dashed;}
/* Cursor-following tooltip — two clusters (bars, divider, lines). */
.vel-tip{position:absolute;top:0;left:0;min-width:148px;background:rgba(15,18,23,.97);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-family:var(--font-mono);font-size:11px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.45);}
.vel-tip.show{opacity:1;}
.vel-tip .vt-sprint{color:#fff;font-weight:500;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase;}
.vel-tip .vt-row{display:flex;justify-content:space-between;gap:16px;line-height:1.7;}
.vel-tip .vt-row .k{display:flex;align-items:center;gap:7px;color:#c7ccd6;}
.vel-tip .vt-row .v{color:#fff;font-variant-numeric:tabular-nums;}
.vel-tip .vt-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.vel-tip .vt-sw.line{height:0;border-top:2px solid;width:13px;border-radius:0;}
.vel-tip .vt-div{height:1px;background:var(--border);margin:6px 0;}

/* ── Tables ── */
.pv-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;}
.pv-table-scroll::-webkit-scrollbar{height:8px;}
.pv-table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.pv-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);min-width:560px;}
.pv-table th,.pv-table td{padding:10px 13px;text-align:right;white-space:nowrap;}
.pv-table th{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:400;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--surface-2);}
.pv-table td{color:var(--text-muted);border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;}
.pv-table tr:last-child td{border-bottom:none;}
.pv-table th:first-child,.pv-table td:first-child{text-align:left;}
.pv-table .pv-cell-team{color:var(--text);font-family:var(--font-body);font-weight:400;}
.pv-table td.good{color:var(--accent);}
.pv-table .pv-delta-up{color:var(--accent);}
.pv-table .pv-delta-down{color:var(--text-muted);}
.pv-table .pv-na{color:var(--text-dim);}

/* PI-target entry — editable commitment cell. Compact mono input sized to the
   column; reads as data, not a form field. */
.pv-target-cell{padding-top:6px;padding-bottom:6px;}
.pv-target{
  width:72px;text-align:right;padding:5px 8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-mono);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;outline:none;transition:border-color var(--motion-base);
  -webkit-appearance:none;appearance:none;color-scheme:dark;
}
.pv-target:focus{border-color:var(--accent);}
.pv-target::-webkit-inner-spin-button,.pv-target::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.pv-target::placeholder{color:var(--text-dim);}
/* Teams still needing a target read with a dashed border — a quiet cue that
   the burndown is on the planned-sum fallback for this row, not an alarm. */
.pv-needs-target .pv-target{border-style:dashed;border-color:var(--steel);}

/* ── PI-table drilldown (expandable team rows → editable sprint sub-rows) ── */
.pv-team-row{cursor:pointer;transition:background var(--motion-base);}
.pv-team-row:hover{background:var(--surface-2);}
.pv-caret{display:inline-block;width:0;height:0;border-left:5px solid var(--text-dim);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:9px;transition:transform var(--motion-base);vertical-align:middle;}
.pv-team-row.open .pv-caret{transform:rotate(90deg);}
/* Sprint sub-rows: align to the parent columns, fixed cell height + middle align
   so switching a value to an input never resizes the row. */
.pv-sprint-row td{background:#0e1014;border-bottom:1px solid #1b1e24;color:var(--text-muted);height:38px;padding-top:0;padding-bottom:0;vertical-align:middle;}
.pv-sprint-row td.pv-s-label{font-family:var(--font-mono);color:var(--text-muted);padding-left:32px;font-size:var(--fs-2xs);}
.pv-s-status{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.4px;text-transform:uppercase;}
.pv-s-status.done{color:var(--accent);}
.pv-s-status.prog{color:var(--text-dim);}
/* Edited values read in the secondary coral, with a coral dot on the row. */
.pv-edit-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-blue);margin-left:7px;vertical-align:middle;}
.pv-val-edited{color:var(--accent-blue);}
.pv-s-input{width:58px;text-align:right;padding:2px 7px;line-height:1.3;background:var(--surface-2);border:1px solid var(--accent);border-radius:5px;color:var(--text);font-family:var(--font-mono);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums;outline:none;vertical-align:middle;}
.pv-s-input::-webkit-inner-spin-button,.pv-s-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
/* Icon buttons (pencil / save / cancel / revert). */
.pv-row-actions{display:inline-flex;gap:2px;align-items:center;justify-content:flex-end;}
.pv-ico{background:none;border:none;cursor:pointer;color:var(--text-dim);padding:3px;border-radius:5px;vertical-align:middle;transition:color var(--motion-base),background var(--motion-base);-webkit-tap-highlight-color:transparent;}
.pv-ico:hover{color:var(--accent);background:var(--surface-2);}
.pv-ico svg{width:14px;height:14px;display:block;}
.pv-ico.cancel:hover,.pv-ico.revert:hover{color:var(--accent-blue);}

@media(max-width:720px){
  html{font-size:15px;}
  .pv{padding:18px 14px;}
  .pv-coverage{grid-template-columns:1fr;}
  .pv-headline{grid-template-columns:1fr;}
  .pv-chart-wrap{height:260px;}
  .pv-pi-head{align-items:flex-start;}
  /* Drop zone: browse button is the primary tap target on phones (drag-drop is
     a desktop interaction). */
  .pv-drop{padding:22px 14px;}
}