/* =============================================================================
   Automation payback calculator — kept separate from the site's shared sheets.

   Look: the site's own dark surfaces, with the chart carrying the colour. Three
   hues, each with one job and used for nothing else on the page:
     blue  = value recovered       amber = what it costs
     green = ahead of cost         cyan  = the budget ceiling
   Everything else is neutral, so the eye goes to the line that matters.

   Every class here is `pb-*`; nothing redefines a shared class.
   ========================================================================== */

.pb-page {
  --pb-value: var(--brand-300);
  --pb-cost: var(--warn-400);
  --pb-gain: var(--ok-400);
  --pb-ceiling: var(--accent-400);
  --pb-ink: var(--text);
  --pb-ink-soft: var(--text-soft);
  --pb-ink-muted: var(--text-muted);
  --pb-ink-dim: var(--text-dim);
  --pb-panel: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  --pb-field: rgb(255 255 255 / 4%);
  --pb-track: rgb(255 255 255 / 8%);

  /* The header is fixed, so the page has to start below it. */
  padding-block-start: calc(var(--header-h) + var(--space-8));
}

/* --- Hero ----------------------------------------------------------------- */
.pb-hero { padding-block: var(--space-6) var(--space-10); }
.pb-hero .h1 { max-inline-size: 22em; text-wrap: balance; letter-spacing: -0.02em; }
.pb-hero .lede { margin-block-start: var(--space-4); color: var(--pb-ink-soft); }
.pb-back {
  display: flex;
  inline-size: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  color: var(--pb-ink-muted);
  font-size: var(--text-sm);
  transition: color var(--dur-base) var(--ease-out);
}
.pb-back:hover { color: var(--pb-ink); }
ul.pb-notes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-6); }
.pb-noscript { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--danger-400); border-radius: var(--r-md); color: var(--danger-400); }

/* --- Workbench: inputs beside a live result -------------------------------- */
.pb-workbench { display: grid; gap: var(--space-6); align-items: start; padding-block-end: var(--space-6); }
@media (min-width: 64rem) {
  .pb-workbench { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--space-8); }
  .pb-live { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-4)); }
}

.pb-inputs { display: grid; gap: var(--space-5); min-inline-size: 0; }

/* --- Cards ------------------------------------------------------------------ */
.pb-card {
  min-inline-size: 0;
  padding: clamp(1.125rem, 2.2vw, 1.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--pb-panel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), var(--shadow-md);
}
.pb-card__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-block-end: var(--space-5); }
.pb-card__head h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
.pb-card__head p { margin-block-start: var(--space-1); color: var(--pb-ink-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.pb-card__head--plain { margin-block-end: var(--space-4); }
.pb-step {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--line-brand);
  border-radius: var(--r-full);
  background: rgb(30 133 230 / 12%);
  color: var(--brand-300);
  font-size: var(--text-sm);
  font-weight: 800;
}

/* --- Fields ------------------------------------------------------------------ */
.pb-field { display: grid; gap: var(--space-2); min-inline-size: 0; align-content: start; }
.pb-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--pb-ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
}
.pb-field__label small { flex: none; color: var(--pb-ink-dim); font-size: var(--text-xs); font-weight: 500; }
.pb-field__hint { color: var(--pb-ink-dim); font-size: var(--text-xs); line-height: 1.7; }
.pb-field input[type='text'],
.pb-field select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--pb-field);
  color: var(--pb-ink);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pb-field input[type='text']:hover,
.pb-field select:hover { border-color: rgb(255 255 255 / 22%); }
.pb-field input[type='text']:focus,
.pb-field select:focus { border-color: var(--brand-400); background: rgb(30 133 230 / 8%); }
.pb-field input::placeholder { color: var(--pb-ink-dim); }
.pb-field select option { background: var(--surface-3); color: var(--text); }

.pb-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-4); }
.pb-field--range { margin-block-end: var(--space-5); }
.pb-range { display: flex; align-items: center; gap: var(--space-4); }
.pb-range input[type='range'] { flex: 1; min-inline-size: 0; accent-color: var(--brand-400); cursor: pointer; }
.pb-range__out { flex: none; min-inline-size: 3.5rem; color: var(--pb-ink); font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }

.pb-derived { min-block-size: 1.5em; margin-block-start: var(--space-3); color: var(--accent-300); font-size: var(--text-sm); font-weight: 600; }

/* --- Task rows ------------------------------------------------------------- */
.pb-tasks { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); }
.pb-task {
  position: relative;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 2.5%);
}
.pb-task__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.pb-task__name { grid-column: 1 / -1; }
.pb-task__sum {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-start: var(--space-4);
  color: var(--accent-300);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pb-task__remove {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-md);
  color: var(--pb-ink-dim);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pb-task__remove:hover { color: var(--danger-400); background: rgb(248 113 113 / 10%); }
.pb-add { inline-size: 100%; justify-content: center; border: 1px dashed var(--line-strong); }
.pb-add[disabled] { opacity: .45; }

/* --- Advanced ------------------------------------------------------------------ */
.pb-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--pb-ink-soft);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pb-advanced summary::-webkit-details-marker { display: none; }
.pb-advanced summary::after {
  content: '';
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid var(--pb-ink-muted);
  border-block-end: 2px solid var(--pb-ink-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.pb-advanced[open] summary::after { transform: rotate(225deg); }
.pb-advanced__note { margin-block: var(--space-4); color: var(--pb-ink-muted); font-size: var(--text-sm); }
.pb-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- The live panel -------------------------------------------------------------- */
.pb-live { display: grid; gap: var(--space-4); min-inline-size: 0; align-content: start; }
.pb-example {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-accent);
  border-radius: var(--r-md);
  background: rgb(34 211 238 / 6%);
  color: var(--accent-300);
  font-size: var(--text-sm);
}

.pb-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.pb-figure {
  min-inline-size: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--pb-panel);
}
.pb-figure dt { color: var(--pb-ink-muted); font-size: var(--text-sm); font-weight: 600; }
.pb-figure dd { margin: 0; }
.pb-figure__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-block-start: var(--space-2);
  color: var(--pb-ink);
  font-variant-numeric: tabular-nums;
}
.pb-figure__value { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.pb-figure__unit { color: var(--pb-ink-muted); font-size: var(--text-base); font-weight: 600; }
.pb-figure__sub { margin-block-start: var(--space-1); color: var(--pb-ink-dim); font-size: var(--text-xs); line-height: 1.7; }
.pb-figure__sub:empty { display: none; }
.pb-figure--lead { border-color: var(--line-brand); background: radial-gradient(90% 140% at 100% 0%, rgb(30 133 230 / 14%), transparent 60%), var(--pb-panel); }

/* The verdict: the one sentence the page exists to say. */
.pb-verdict {
  --tone: var(--pb-ink-muted);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--tone);
  border-radius: var(--r-lg);
  background: var(--pb-panel);
}
.pb-verdict[data-state='payback'] { --tone: var(--pb-gain); }
.pb-verdict[data-state='ceiling'] { --tone: var(--pb-ceiling); }
.pb-verdict[data-state='never'] { --tone: var(--pb-cost); }
.pb-verdict[data-state='loss'] { --tone: var(--danger-400); }
.pb-verdict__label { color: var(--pb-ink-muted); font-size: var(--text-sm); font-weight: 600; }
.pb-verdict__big {
  margin-block: var(--space-1) var(--space-2);
  color: var(--tone);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.pb-verdict[data-state='empty'] .pb-verdict__big { color: var(--pb-ink-dim); }
.pb-verdict__text { color: var(--pb-ink-soft); font-size: var(--text-base); line-height: var(--leading-normal); max-inline-size: 60ch; }

/* --- Chart -------------------------------------------------------------------------- */
.pb-chart { margin: 0; padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--pb-panel); }
.pb-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.pb-chart__title { color: var(--pb-ink-soft); font-size: var(--text-sm); font-weight: 700; }
ul.pb-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.pb-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--pb-ink-muted); font-size: var(--text-xs); }
.pb-legend__item::before { content: ''; inline-size: 1.125rem; block-size: 0; border-block-start: 3px solid var(--swatch, var(--pb-value)); border-radius: 2px; }
.pb-legend__item--value { --swatch: var(--pb-value); }
.pb-legend__item--cost { --swatch: var(--pb-cost); }
.pb-legend__item--cost::before { border-block-start-style: dashed; }
.pb-legend__item--ceiling { --swatch: var(--pb-ceiling); }

.pb-chart__stage { position: relative; border-radius: var(--r-md); touch-action: pan-y; }
.pb-chart__stage svg { display: block; inline-size: 100%; block-size: auto; direction: ltr; overflow: visible; font-family: var(--font-sans); user-select: none; }
.pb-chart__help { margin-block-start: var(--space-2); color: var(--pb-ink-dim); font-size: var(--text-xs); }

.pb-grid { stroke: var(--line); stroke-width: 1; }
.pb-axis { stroke: var(--line-strong); stroke-width: 1; }
.pb-tick { fill: var(--pb-ink-muted); font-size: 11px; stroke: none; font-variant-numeric: tabular-nums; }
.pb-tick--unit { fill: var(--pb-ink-dim); }
.pb-tick--live { fill: var(--pb-ink-dim); }
.pb-tick--note { fill: var(--pb-ink-muted); font-size: 13px; }
.pb-tick--payback { fill: var(--pb-gain); font-size: 12px; font-weight: 700; }
.pb-live-line { stroke: var(--pb-ink-dim); stroke-width: 1; stroke-dasharray: 3 4; }
.pb-area { fill: rgb(52 211 153 / 14%); stroke: none; }
.pb-line { fill: none; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.pb-line--value { stroke: var(--pb-value); }
.pb-line--cost { stroke: var(--pb-cost); stroke-width: 2; stroke-dasharray: 6 5; }
.pb-line--ceiling { stroke: var(--pb-ceiling); }
.pb-line.is-drawing { animation: pb-reveal 900ms var(--ease-out) both; }
.pb-drop { stroke: var(--pb-gain); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .8; }
.pb-dot { stroke-width: 3; }
.pb-dot--payback { fill: var(--bg); stroke: var(--pb-gain); }
.pb-dot--ceiling { fill: var(--pb-ceiling); stroke: var(--bg); stroke-width: 2; }
.pb-cursor { pointer-events: none; }
.pb-cursor__line { stroke: var(--pb-ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pb-cursor__dot { stroke: var(--bg); stroke-width: 2; }
.pb-cursor__dot--a { fill: var(--pb-value); }
.pb-cursor__dot--b { fill: var(--pb-cost); }
.pb-hit { fill: transparent; cursor: crosshair; }

@keyframes pb-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.pb-chart__stage:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 4px; }

.pb-tip {
  position: absolute;
  inset-block-start: 12%;
  z-index: 2;
  min-inline-size: 11.5rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-4);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  pointer-events: none;
  transform: translateX(14px);
}
.pb-tip[data-side='left'] { transform: translateX(calc(-100% - 14px)); }
.pb-tip__title { margin-block-end: var(--space-2); color: var(--pb-ink); font-size: var(--text-sm); font-weight: 800; }
.pb-tip__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 2px; color: var(--pb-ink-muted); }
.pb-tip__row strong { color: var(--pb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-tip__row--value strong { color: var(--pb-value); }
.pb-tip__row--cost strong { color: var(--pb-cost); }
.pb-tip__row--ok strong { color: var(--pb-gain); }

.pb-data { margin-block-start: var(--space-3); }
.pb-data summary { display: inline-block; color: var(--brand-300); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.pb-data[open] summary { margin-block-end: var(--space-3); }

/* --- Tables -------------------------------------------------------------------------- */
.pb-table-wrap { overflow-x: auto; }
.pb-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pb-table th, .pb-table td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--line); text-align: start; white-space: nowrap; }
.pb-table thead th { color: var(--pb-ink-dim); font-size: var(--text-xs); font-weight: 700; }
.pb-table tbody th { color: var(--pb-ink-soft); font-weight: 600; }
.pb-table td { color: var(--pb-ink); }
.pb-table tbody tr:last-child > * { border-block-end: 0; }
.pb-table--ceilings td { font-size: var(--text-base); font-weight: 700; }
.pb-table--ceilings tr.is-key > * { background: rgb(34 211 238 / 8%); color: var(--accent-300); }

/* --- Below the fold ------------------------------------------------------------------- */
.pb-details { display: grid; gap: var(--space-5); padding-block-start: var(--space-4); }
@media (min-width: 48rem) {
  .pb-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .pb-card--wide { grid-column: 1 / -1; }
}
.pb-details .pb-card { align-self: stretch; }

ul.pb-stress { display: grid; gap: var(--space-4); }
.pb-stress__item { display: grid; grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr) minmax(5.5rem, auto); align-items: center; gap: var(--space-3); }
.pb-stress__name { color: var(--pb-ink-soft); font-size: var(--text-sm); font-weight: 600; }
.pb-stress__track, .pb-rank__track { display: block; block-size: 0.5rem; border-radius: var(--r-full); background: var(--pb-track); overflow: hidden; }
.pb-stress__fill, .pb-rank__fill {
  display: block;
  inline-size: calc(var(--w, 0) * 1%);
  block-size: 100%;
  border-radius: inherit;
  transition: inline-size var(--dur-slow) var(--ease-out);
}
.pb-stress__fill { background: var(--pb-gain); }
.pb-stress__fill.is-over { background: repeating-linear-gradient(135deg, var(--pb-cost) 0 6px, rgb(251 191 36 / 45%) 6px 12px); }
.pb-stress__value { color: var(--pb-ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: end; }
.pb-stress__none, .pb-rank__none { color: var(--pb-ink-dim); font-size: var(--text-sm); }

ol.pb-rank { display: grid; gap: var(--space-5); }
.pb-rank__item { display: grid; gap: var(--space-2); }
.pb-rank__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pb-rank__name { color: var(--pb-ink); font-weight: 700; }
.pb-rank__value { margin-inline-start: auto; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.pb-rank__fill { background: linear-gradient(to left, var(--brand-400), var(--brand-300)); }
.pb-rank__sub { color: var(--pb-ink-dim); font-size: var(--text-xs); }

ol.pb-method__list { display: grid; gap: var(--space-2); padding-inline-start: 1.25rem; list-style: decimal; color: var(--pb-ink-soft); font-size: var(--text-sm); line-height: var(--leading-normal); }
.pb-method__list li::marker { color: var(--pb-ink-dim); }
.pb-method__out { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); color: var(--pb-ink-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

.pb-cta { border-color: var(--line-brand); background: radial-gradient(80% 120% at 0% 0%, rgb(30 133 230 / 14%), transparent 65%), var(--pb-panel); }
.pb-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pb-cta__status { min-block-size: 1.5em; margin-block-start: var(--space-3); color: var(--ok-400); font-size: var(--text-sm); font-weight: 600; }
.pb-cta__hint { margin-block-start: var(--space-1); color: var(--pb-ink-dim); font-size: var(--text-xs); line-height: 1.7; }

/* --- Summary bar on a phone, once the result has scrolled away ------------------------- */
.pb-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  padding: var(--space-3) var(--shell-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--line-strong);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.pb-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-inline-size: 40rem; margin-inline: auto; }
.pb-bar__item { display: grid; min-inline-size: 0; }
.pb-bar__k { color: var(--pb-ink-dim); font-size: var(--text-2xs); }
.pb-bar__item strong { color: var(--pb-ink); font-size: var(--text-base); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pb-bar__go { flex: none; color: var(--brand-300); font-size: var(--text-sm); font-weight: 700; }

/* --- Phones ------------------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .pb-figures { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pb-figure { padding: var(--space-4); }
  .pb-verdict { padding: var(--space-4) var(--space-5); }
  .pb-chart { padding: var(--space-4) var(--space-3); }
  .pb-stress__item { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .pb-stress__track { grid-column: 1 / -1; grid-row: 2; }
  .pb-task__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-cta__buttons .btn { inline-size: 100%; justify-content: center; }
}
@media (max-width: 47.99rem) {
  /* Count and period share a row; the minutes, the longest label, get their own. */
  .pb-task__grid > :last-child { grid-column: 1 / -1; }
}

/* --- Motion ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pb-line.is-drawing { animation: none; }
  .pb-stress__fill, .pb-rank__fill { transition: none; }
}

/* --- Paper: the result and the numbers behind it, on white ------------------------------- */
@media print {
  .pb-page {
    --pb-value: #0b5cad;
    --pb-cost: #b45309;
    --pb-gain: #047857;
    --pb-ceiling: #0e7490;
    --pb-ink: #111;
    --pb-ink-soft: #222;
    --pb-ink-muted: #444;
    --pb-ink-dim: #555;
    --pb-panel: #fff;
    --pb-field: #fff;
    --pb-track: #ddd;
    --line: #ccc;
    --line-strong: #999;
    --text: #111;
    --bg: #fff;
    padding-block-start: 0;
  }
  body { background: #fff; color: #111; }
  body > header, body > footer, body > .backdrop, body > .skip-link, .pb-bar, .pb-back, .pb-notes, .pb-actions, .pb-add, .pb-task__remove, .pb-cta, .pb-chart__help, .pb-example, .pb-advanced { display: none !important; }
  .pb-workbench, .pb-details { display: block; }
  .pb-live { position: static; margin-block: var(--space-6); }
  .pb-card, .pb-figure, .pb-verdict, .pb-chart { box-shadow: none; break-inside: avoid; margin-block-end: var(--space-4); }
  .pb-details { padding-block-start: 0; }
  .pb-card h2, .pb-step { color: #111; }
  .pb-tip { display: none; }
}