/* Project Crew Forecast — page-specific rules on top of site.css (tokens: docs/DESIGN.md).
   Dark, colourful. Split semantics stay fixed: --pro cyan = the professional, --flare orange =
   YRproject's fee, --client violet = what the client pays. The six role groups each carry one
   data hue (--c, set inline from yr/forecast/model.py GROUPS) and are always labelled too. */

/* ---------- input ---------- */
.fc-input .grid { row-gap: var(--s7); }
.fc-text { display: grid; gap: var(--s4); }
.fc-text textarea { min-height: 7.5rem; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.01em; resize: vertical; }
.fc-mode { border-left: 2px solid var(--line-soft); padding-left: var(--s3); }
.fc-honest { border-top: 1px solid var(--line); padding-top: var(--s4); }
.fc-honest p { margin-top: var(--s2); max-width: 34em; }
.fc-or { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 var(--s5); }
.fc-or::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.fc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fc-fieldset legend { padding: 0; margin-bottom: var(--s2); }
.fc-seg { display: flex; flex-wrap: wrap; width: 100%; }
.fc-seg label { flex: 1 1 auto; justify-content: center; }
.fc-checks { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.fc-groups { display: grid; gap: var(--s3) var(--s5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fc-group { display: grid; gap: var(--s2); }
.fc-group label { display: flex; align-items: center; gap: .55em; font-size: var(--fs-small); }
.fc-group select { width: 100%; }
.fc-swatch { width: .7em; height: .7em; flex: none; display: inline-block; border-radius: 2px; background: var(--c, var(--mist)); box-shadow: 0 0 10px color-mix(in srgb, var(--c, transparent) 60%, transparent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-params__go { margin-top: var(--s5); }
.fc-params[aria-busy="true"], [data-fc-result][aria-busy="true"] { opacity: .55; transition: opacity 160ms; }

/* ---------- the curve (dark North Sea surface) ---------- */
.fc-curve { scroll-margin-top: 1rem; }
.fc-head { display: grid; gap: var(--s6); margin-bottom: var(--s7); }
.fc-head h2 .badge { vertical-align: middle; letter-spacing: .06em; margin-right: .4em; color: var(--fg-muted); }
.fc-head .lead { color: var(--fg-muted); margin-top: var(--s4); }
.fc-head .lead a { color: var(--fg); }
.fc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
.fc-kpis dt { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s2); }
.fc-kpis dd { margin: 0; white-space: normal; }
.fc-kpis dd small { display: block; margin: .35em 0 0; font-size: var(--fs-micro); letter-spacing: 0; }
@media (min-width: 56rem) { .fc-kpis { grid-template-columns: repeat(3, 1fr); } }
.fc-kpis dd.fig { background: var(--g-client); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-kpis dd small { color: var(--fg-muted); -webkit-text-fill-color: var(--fg-muted); }
.fc-sketch-note { margin-top: var(--s4); max-width: 46rem; font-size: var(--fs-small); color: var(--fg-muted); border-left: 3px solid var(--warn); padding-left: var(--s4); }
.fc-sketch-note strong { color: var(--fg); }

.fc-read { border: 1px solid var(--line); padding: var(--s5); margin-bottom: var(--s7); display: grid; gap: var(--s3); }
.fc-read .facts { margin: 0; }
.fc-read ul { margin: 0; padding-left: 1.1em; }
.fc-read__adj { font-size: var(--fs-small); margin-top: var(--s2); }

.fc-figure { margin: 0; }
.fc-plot { padding-left: 2.25rem; }
.fc-gantt { display: grid; gap: 3px; margin-bottom: var(--s4); }
.fc-gantt__row { position: relative; height: 1.375rem; }
.fc-gantt__bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, rgb(91 157 255 / .28), rgb(157 140 255 / .16)); border-left: 2px solid var(--blue); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-gantt__label { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: .55em; font-size: .75rem; letter-spacing: .02em; white-space: nowrap; color: var(--fg); }
.fc-gantt__label--before { padding-left: 0; padding-right: .55em; color: var(--fg-muted); }
.fc-figure.is-animating .fc-gantt__row { opacity: .35; transition: opacity 200ms; }
.fc-figure.is-animating .fc-gantt__row.is-on, .fc-figure.is-animating .fc-gantt__row.is-done { opacity: 1; }
.fc-gantt__row.is-on .fc-gantt__bar { background: linear-gradient(90deg, rgb(56 225 214 / .5), rgb(91 157 255 / .3)); border-color: var(--pro); box-shadow: var(--glow-pro); }

.fc-chart { position: relative; height: clamp(14rem, 34vw, 24rem); border-bottom: 1px solid var(--edge); border-left: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 100%, rgb(91 157 255 / .08), transparent 70%); }
.fc-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fc-grid { stroke: var(--sea-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fc-phase-line { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 2 5; opacity: .6; vector-effect: non-scaling-stroke; }
.fc-band { stroke: var(--sea); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: opacity 160ms; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-outline { fill: none; stroke: var(--foam); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgb(238 243 250 / .55)); }
.fc-figure.has-hot .fc-band { opacity: .22; }
.fc-figure.has-hot .fc-band.is-hot { opacity: 1; }
.fc-yticks span { position: absolute; left: -2.25rem; width: 1.9rem; text-align: right; transform: translateY(50%); font-size: .6875rem; color: var(--fg-dim); line-height: 1; font-variant-numeric: tabular-nums; }
.fc-peak { position: absolute; width: 0; height: 0; pointer-events: none; transition: opacity 300ms; }
.fc-peak > i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 4px rgb(238 243 250 / .18), 0 0 22px rgb(238 243 250 / .8); }
.fc-peak > span { position: absolute; bottom: 14px; left: -1rem; background: var(--foam); color: var(--ink); border-radius: var(--r-sm); font-size: .75rem; font-weight: 600; padding: .35em .65em; white-space: nowrap; line-height: 1.2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-peak--left > span { left: auto; right: -1rem; }
@media (max-width: 30rem) { .fc-peak > span { white-space: normal; width: 9.5rem; } }
.fc-figure.is-animating .fc-peak { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fc-peak > i { animation: fc-pulse 2.4s var(--ease) infinite; }
  @keyframes fc-pulse { 50% { box-shadow: 0 0 0 9px rgb(238 243 250 / 0), 0 0 22px rgb(238 243 250 / .8); } }
}
.fc-xaxis { position: relative; height: 1.6rem; }
.fc-xaxis span { position: absolute; top: .45rem; transform: translateX(-50%); font-size: .6875rem; color: var(--fg-dim); white-space: nowrap; line-height: 1; }
.fc-unit { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; }
.fc-replay { background: none; border: 1px solid var(--edge); border-radius: var(--r-sm); color: var(--fg); font: inherit; font-size: var(--fs-micro); padding: .45em .8em; min-height: 2.75rem; cursor: pointer; }
.fc-replay:hover { border-color: var(--fg); }

.fc-legend { margin-top: var(--s6); }
.fc-legend table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.fc-legend thead th { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); font-weight: 500; text-align: left; padding: 0 var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); }
.fc-legend tbody th, .fc-legend tbody td { text-align: left; padding: .7rem var(--s4) .7rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-weight: 400; }
.fc-legend tbody th { font-weight: 600; }
.fc-legend tbody th .fc-swatch { margin-right: .6em; }
.fc-legend__inc { display: block; font-weight: 400; font-size: var(--fs-micro); color: var(--fg-muted); margin: .2em 0 0 1.3em; }
.fc-legend tbody td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-legend tr.is-hot th, .fc-legend tr.is-hot td { background: color-mix(in srgb, var(--c) 12%, transparent); }
@media (max-width: 43.99rem) {
  .fc-legend thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fc-legend table, .fc-legend tbody, .fc-legend tr, .fc-legend th, .fc-legend td { display: block; }
  .fc-legend tr { border-bottom: 1px solid var(--line-soft); padding: var(--s3) 0; }
  .fc-legend tbody th, .fc-legend tbody td { border: 0; padding: .1rem 0; }
  .fc-legend tbody td { margin-left: 1.3em; color: var(--fg-muted); font-size: var(--fs-micro); white-space: normal; }
  .fc-legend tbody td::before { content: attr(data-label) ": "; }
}
@media (min-width: 56rem) { .fc-plot { padding-left: 2.5rem; } }

/* ---------- open-book cost: one professional per line, never a sum ---------- */
.fc-assume { display: grid; gap: var(--s4) var(--gutter); align-items: start; margin-bottom: var(--s6); padding: var(--s5); background: var(--surface); border-radius: var(--r); box-shadow: var(--hi); }
.fc-assume .field input { max-width: 9rem; }
@media (min-width: 56rem) { .fc-assume { grid-template-columns: 14rem 1fr; } }
.fc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 64rem) { .fc-lines { grid-template-columns: 1fr 1fr; } }
.fc-line { position: relative; padding: var(--s5); background: var(--surface); border-radius: var(--r); box-shadow: var(--hi); border-top: 3px solid var(--c); display: grid; gap: var(--s4); break-inside: avoid; }
.fc-line__group { margin: 0; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); display: flex; align-items: center; gap: .6em; }
.fc-line__say { margin: 0; font-size: var(--fs-lead); line-height: 1.9; letter-spacing: -.01em; }
.fc-inp { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; vertical-align: baseline; color: var(--fg-muted); }
.fc-inp input { width: 6.75rem; min-height: 2.75rem; padding: .3em .5em; text-align: right; font: inherit; font-size: max(1em, 16px); font-variant-numeric: tabular-nums; color: var(--fg); }
.fc-inp input[data-fc-months] { width: 5.25rem; }
.fc-inp input[aria-invalid="true"] { border-color: var(--bad); }
.fc-line__split { margin: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 30rem) { .fc-line__split { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.fc-line__split dt { font-size: var(--fs-micro); color: var(--fg-muted); margin-bottom: .25em; }
.fc-line__split dd { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fc-line__split .is-client dd { color: var(--client); }
.fc-line__split .is-pro dd { color: var(--pro); }
.fc-line__split .is-yr dd { color: var(--flare-hi); }
.fc-line__pct { white-space: nowrap; }
.fc-line__bar { height: .5rem; border-radius: 99px; background: var(--g-fee); overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-line__bar i { display: block; height: 100%; background: var(--g-pro); border-right: 2px solid var(--sea); transition: width var(--t) var(--ease); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.fc-line__how { margin: 0; font-variant-numeric: tabular-nums; }
.fc-line__short { color: var(--warn); }
.fc-cost__why { margin-top: var(--s6); max-width: 46rem; }
.fc-cost__go { margin-top: var(--s5); }
.fc-taper { margin-top: var(--s7); border-left: 6px solid var(--accent); padding: var(--s2) 0 var(--s2) var(--s5); max-width: 52rem; }
.fc-taper p { margin-top: var(--s3); }

.fc-how__groups { margin-top: var(--s7); }
.fc-groupdefs { margin: var(--s4) 0 var(--s6); display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.fc-groupdefs dt { font-weight: 600; font-size: var(--fs-small); display: flex; align-items: center; gap: .6em; }
.fc-groupdefs dd { margin: .25em 0 0 1.3em; font-size: var(--fs-small); color: var(--fg-muted); }

.fc-send .grid { row-gap: var(--s7); align-items: start; }
.fc-send input[readonly] { font-size: max(var(--fs-small), 16px); text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .fc-gantt__bar, .fc-band, .fc-peak, .fc-line__bar i { transition: none; }
}

/* ---------- print: the sketch and the lines on white paper ---------- */
@media print {
  .fc-input, .fc-send, .fc-how, .fc-replay, .fc-cost__go, .fc-mode, .pagehead .eyebrow { display: none !important; }
  .pagehead { padding-block: 0 1rem; border: 0; }
  .pagehead h1 { font-size: 2rem; }
  .pagehead .lead { font-size: 1rem; margin-top: .5rem; }
  .section { padding-block: 1.25rem; }
  .fc-curve.sea, .fc-book { --bg: #fff; --fg: #0B0D0E; --fg-muted: #565B5A; --fg-dim: #565B5A; --line: #0B0D0E; --line-soft: #D5D1C7; --sea-rule: #D5D1C7; --edge: #565B5A; --sea: #fff; --foam: #0B0D0E; --surface: #fff; --client: #4B3BC4; --pro: #0B6E68; --flare-hi: #B8330F; --warn: #8A5A00; background: #fff; color: #0B0D0E; }
  .fc-kpis dd.fig { background: none; color: #0B0D0E; -webkit-text-fill-color: #0B0D0E; }
  .fc-chart { height: 15rem; background: none; }
  .fc-outline { filter: none; }
  .fc-peak > span { color: #fff; }
  .fc-peak > i { box-shadow: none; animation: none; }
  .fc-swatch { box-shadow: none; }
  .fc-figure, .fc-line, .fc-taper { break-inside: avoid; }
  .fc-lines { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .fc-line { box-shadow: none; border: 1px solid #D5D1C7; border-top: 3px solid var(--c); padding: .75rem; }
  .fc-line__say { font-size: 1rem; line-height: 1.5; }
  .fc-inp input { border: 0; background: none; padding: 0; width: 3.5rem; min-height: 0; color: #0B0D0E; }
  .fc-assume { background: none; padding: 0; box-shadow: none; }
  .fc-book::after { content: "Rough staffing sketch from YRproject's own planning assumptions. Rates are examples. Cost is per professional and is never added up. Not a quote. yrproject.nl/crew-forecast"; display: block; font-size: .75rem; color: #565B5A; padding: 1rem var(--gutter) 0; }
}