/* Peakhold peak planner: layout and drawing particular to the tool, in Forevenza's tokens. */
.ph-intro { margin-bottom: var(--fv-s5); }
.ph-eyebrow { color: var(--fv-slate); font-size: var(--fv-text-sm); font-weight: 550; }
.ph-top-notice { margin-bottom: var(--fv-s4); }

.ph-planner { display: grid; gap: var(--fv-s5); }
.ph-figures .fv-figure--lead .fv-figure__value { font-size: var(--fv-text-3xl); }

/* Chart */
.ph-chart-panel { padding-bottom: var(--fv-s4); }
.ph-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--fv-s3) var(--fv-s6); margin-bottom: var(--fv-s3); }
.ph-chart-head h2 { font-size: var(--fv-text-lg); }
.ph-limit-control { display: grid; gap: 0.2rem; width: min(100%, 20rem); }
.ph-limit-control output { color: var(--fv-blue); font-weight: 650; margin-left: 0.25rem; }
.ph-chart-box { width: 100%; min-height: 230px; }
.ph-chart .ph-bar-in { fill: var(--fv-data-3); }
.ph-chart .ph-bar-over { fill: var(--fv-data-1); }
.ph-chart .ph-limit { stroke: var(--fv-data-2); stroke-width: 1.5; }
.ph-chart .ph-line-label { fill: var(--fv-ink-2); }
.ph-chart .ph-peak { fill: var(--fv-blue); }
.ph-chart .ph-halo { paint-order: stroke; stroke: var(--fv-paper); stroke-width: 4px; stroke-linejoin: round; }

/* Inputs */
.ph-building { margin-bottom: var(--fv-s5); }
.ph-weeks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fv-s2); margin-bottom: var(--fv-s2); }
.ph-weeks-head h3 { font-size: var(--fv-text-base); }
.ph-paste { display: grid; gap: var(--fv-s2); margin-bottom: var(--fv-s3); padding: var(--fv-s3); background: var(--fv-canvas); border-radius: var(--fv-radius-s); }
.ph-paste[hidden] { display: none; }
.ph-weeks { max-height: none; }
.ph-weeks .fv-table th:first-child { width: 1%; }
.ph-week-input { width: 5.25rem; margin-left: auto; display: block; }
.ph-weeks tr.ph-over td.ph-overflow-cell { color: var(--fv-blue); font-weight: 650; }
.ph-weeks tr.ph-over th { box-shadow: inset 3px 0 0 var(--fv-blue); }
.ph-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; min-width: 0; }

/* Options */
.ph-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-s2); }
.ph-option { display: grid; gap: 0.15rem; padding: var(--fv-s3) var(--fv-s4); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-s); max-width: none; }
.ph-option--best { border-color: var(--fv-positive); background: var(--fv-positive-wash); }
.ph-option__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fv-s3); }
.ph-option__name { font-weight: 600; font-size: var(--fv-text-sm); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ph-option__total { font-size: var(--fv-text-xl); font-weight: 600; font-stretch: 106%; letter-spacing: -0.015em; white-space: nowrap; }
.ph-option__basis, .ph-option__parts { color: var(--fv-slate); font-size: var(--fv-text-xs); }
.ph-option__need { color: var(--fv-caution); font-size: var(--fv-text-xs); font-weight: 550; }
.ph-insights { margin: var(--fv-s4) 0 0; padding-left: 1.1rem; display: grid; gap: var(--fv-s2); font-size: var(--fv-text-sm); color: var(--fv-ink-2); }
.ph-rates { margin-top: var(--fv-s4); }
.ph-dirty { color: var(--fv-caution); font-weight: 550; }

/* After the plan */
.ph-after { align-items: start; }
.ph-request-plan { margin-bottom: var(--fv-s4); }
.ph-proposal { border-color: var(--fv-blue); }
.ph-proposal .fv-table-wrap { margin: var(--fv-s3) 0; }
.ph-proposal__text { display: grid; gap: var(--fv-s2); }
.ph-stale { margin-bottom: var(--fv-s3); }
.ph-thread { margin-bottom: var(--fv-s4); }
.ph-thread-event { align-self: center; color: var(--fv-slate); font-size: var(--fv-text-xs); }
.ph-waiting { margin-bottom: var(--fv-s3); }

.ph-planner .fv-field { align-content: start; }
.ph-planner .fv-grid { align-items: start; }

@media (max-width: 40rem) {
  .ph-figures { grid-template-columns: 1fr 1fr; }
  .ph-figures .fv-figure:nth-child(1), .ph-figures .fv-figure:nth-child(4) { grid-column: 1 / -1; }
  .ph-week-input { width: 4.25rem; }
  .ph-weeks .fv-table th, .ph-weeks .fv-table td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .ph-weeks .ph-col-onhand { display: none; }
  .ph-option__total { font-size: var(--fv-text-lg); }
}