/*
 * CommitControl ROI worksheets, per-page sheet shared by /roi (money) and
 * /roi/time (time). Consumes tokens.css + site.css. Ported from the old ROI
 * layout onto the charcoal + green + IBM Plex brand. Semantic colour:
 * red = exposure/pain, green = value or time recovered. The money result reads
 * neutral/green; the time worksheet never shows a euro figure.
 */

/* Card base. The ROI pages load only tokens + site + this sheet, and neither
   tokens nor site defines .card, so the surface is defined here. Any ROI card
   (input panel, next-step, chart, notes) gets a framed surface; the hero
   summary card and the headline aside set their own padding on top. */
.roi-calculator .card,
.roi-time .card,
.roi-payback .card,
.roi-notes .card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  padding: 28px 30px;
}

.roi-page-head { padding-bottom: 58px; }
.roi-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 48px;
  align-items: center;
  position: relative;
}
.roi-assumption-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.roi-assumption-strip span {
  display: inline-flex; align-items: center; min-height: 32px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-r-pill);
  background: var(--cc-surface-2); padding: 0 12px;
  font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-ink-soft);
}

/* Summary card: a raised surface, not a navy block. */
.roi-summary-card {
  background: var(--cc-surface); color: var(--cc-ink);
  border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg);
  padding: 32px; box-shadow: var(--cc-shadow-md);
}
.roi-summary-card strong {
  display: block; margin: 12px 0 14px;
  font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric);
  font-size: clamp(40px, 5vw, 64px); font-weight: var(--cc-w-bold);
  line-height: 0.95; letter-spacing: -0.04em; color: var(--cc-ink);
}
.roi-summary-card p { color: var(--cc-ink-soft); font-size: 14px; line-height: 1.55; }
.roi-label {
  display: block; font-family: var(--cc-font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--cc-accent-text); letter-spacing: 0.09em; text-transform: uppercase;
}
.roi-summary-card .roi-label { color: var(--cc-accent-text); }
.roi-summary-card .roi-crosslink { margin-top: 18px; font-size: 14px; }
.roi-summary-card .roi-crosslink a { color: var(--cc-accent-text); font-weight: var(--cc-w-semibold); }
.roi-summary-card .roi-crosslink a:hover { text-decoration: underline; }

/* Worksheet switch: both worksheets presented as a pair so either is one
   click from the other. The current page is marked, the other is a live link. */
.roi-switch { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.roi-switch-label { font-family: var(--cc-font-mono); font-size: var(--cc-fs-label-code); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-ink-mute); }
.roi-switch-options { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .roi-switch-options { grid-template-columns: repeat(2, 1fr); } }
.roi-switch-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-radius: var(--cc-r-md);
  border: 1px solid var(--cc-border); background: var(--cc-surface);
  transition: border-color var(--cc-dur-base), box-shadow var(--cc-dur-base), translate var(--cc-dur-base) var(--cc-ease-out);
  translate: 0 0;
}
.roi-switch-opt b { font-size: 1.0625rem; color: var(--cc-ink); }
.roi-switch-opt span { font-size: var(--cc-fs-sm); color: var(--cc-ink-soft); }
@media (hover: hover) { .roi-switch-opt:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-sm); translate: 0 -2px; } }
.roi-switch-opt[aria-current="page"] { border-color: var(--cc-accent-mid); box-shadow: var(--cc-glow-accent); }
.roi-switch-opt[aria-current="page"] b { color: var(--cc-accent-text); }

/* ─── Time worksheet (Option B): top band + full-width bar chart ────────── */
/* Categorical colours for the six activities. A considered set that sits with
   the charcoal/green brand: the product-tied activity (re-engage, surfaced in
   risk briefing) carries the brand green; the rest are distinct hues so each
   bar and its slider are unmistakable. Scoped to the ROI page, not the global
   tokens. Overridden under light theme for contrast. */
.roi-time {
  --seg-coach: #4CA6A8;        /* teal       */
  --seg-reengage: #539f7a;     /* brand green */
  --seg-plan: #E0A458;         /* amber      */
  --seg-relationship: #6E86C9; /* slate-blue */
  --seg-habits: #C77B58;       /* clay       */
  --seg-reset: #9B7FB5;        /* muted violet */
}
:root[data-theme="light"] .roi-time {
  --seg-coach: #2F8183;
  --seg-reengage: #2F5E4A;
  --seg-plan: #B9792B;
  --seg-relationship: #4A63A8;
  --seg-habits: #A85A38;
  --seg-reset: #7A5C96;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .roi-time {
    --seg-coach: #2F8183;
    --seg-reengage: #2F5E4A;
    --seg-plan: #B9792B;
    --seg-relationship: #4A63A8;
    --seg-habits: #A85A38;
    --seg-reset: #7A5C96;
  }
}

/* Top band: assumptions card beside the headline hours. Columns align to the
   top and size to their content, so neither card is stretched tall and sparse.
   Both carry a surface + border so they read as framed cards, not loose text
   (the ROI pages do not load a global .card base). */
.roi-time { display: flex; flex-direction: column; gap: 24px; padding-bottom: 36px; }
.roi-time-top { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 860px) { .roi-time-top { grid-template-columns: 1.4fr 1fr; } }
.roi-time-headline {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 28px 30px; border-radius: var(--cc-r-lg);
  background: var(--cc-surface); border: 1px solid var(--cc-border);
}
.roi-time-headline strong {
  font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric);
  font-size: 42px; font-weight: var(--cc-w-bold); line-height: 1; letter-spacing: -0.04em; color: var(--cc-accent-text);
}
.roi-time-headline p { font-size: 13.5px; color: var(--cc-ink-soft); line-height: 1.55; }
.roi-time-headline .btn { margin-top: 4px; }

/* The chart card: generous padding so the plot is not crammed to the frame. */
.roi-chart { padding: 36px 40px 32px; display: flex; flex-direction: column; gap: 28px; }
.roi-chart-head p { font-size: 13px; color: var(--cc-ink-soft); line-height: 1.55; margin-top: 10px; max-width: 70ch; }

/* Keep the reclaimed-hours total in view while the leader scrolls through and
   adjusts the bars, so the number the chart is dividing is never off-screen.
   Sticky to the top of the viewport within the chart card. */
.roi-chart-head { position: sticky; top: 84px; z-index: 2; background: var(--cc-surface); padding: 12px 0 14px; margin-top: -8px; border-bottom: 1px solid var(--cc-border); }
.roi-chart-head-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.roi-chart-head-row .roi-label { display: block; }
.roi-chart-total { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.roi-chart-total b { font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric); font-size: 22px; font-weight: var(--cc-w-bold); letter-spacing: -0.02em; color: var(--cc-accent-text); }
.roi-chart-total span { font-size: 12.5px; color: var(--cc-ink-mute); }

/* Plot: six columns, each a value label, a bar, a %, a name and a slider.
   Narrow bars with wide gaps give each column room to breathe; taller bars
   give the chart real vertical presence instead of a squat strip. */
.roi-chart-plot {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px;
  align-items: end; padding: 16px 8px 4px;
}
.roi-bar { display: grid; grid-template-rows: auto 240px auto auto auto; justify-items: center; gap: 12px; min-width: 0; }
.roi-bar-val { font-family: var(--cc-font-mono); font-size: 13px; font-weight: var(--cc-w-semibold); color: var(--cc-ink); white-space: nowrap; }
.roi-bar-col { width: 100%; max-width: 46px; height: 100%; display: flex; align-items: flex-end; border-radius: var(--cc-r-sm); background: var(--cc-surface-2); overflow: hidden; }
.roi-bar-fill { width: 100%; min-height: 4px; border-radius: var(--cc-r-sm) var(--cc-r-sm) 0 0; transition: height var(--cc-dur-base) var(--cc-ease-out); }
.roi-bar-pct { font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-ink-mute); }
.roi-bar-name { font-size: 11.5px; color: var(--cc-ink-soft); text-align: center; line-height: 1.3; min-height: 2.6em; }

.seg-coach .roi-bar-fill { background: var(--seg-coach); }
.seg-reengage .roi-bar-fill { background: var(--seg-reengage); }
.seg-plan .roi-bar-fill { background: var(--seg-plan); }
.seg-relationship .roi-bar-fill { background: var(--seg-relationship); }
.seg-habits .roi-bar-fill { background: var(--seg-habits); }
.seg-reset .roi-bar-fill { background: var(--seg-reset); }

/* Slider under each bar, tinted to its own category colour so the control and
   the bar it drives are visibly one thing. Keyboard-operable, theme-aware. */
.roi-bar input[type="range"] {
  width: 100%; max-width: 72px; height: 4px; margin: 2px 0 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: var(--cc-surface-3);
  border-radius: var(--cc-r-pill); cursor: pointer; --thumb: var(--cc-accent-fill);
}
.seg-coach input[type="range"] { --thumb: var(--seg-coach); }
.seg-reengage input[type="range"] { --thumb: var(--seg-reengage); }
.seg-plan input[type="range"] { --thumb: var(--seg-plan); }
.seg-relationship input[type="range"] { --thumb: var(--seg-relationship); }
.seg-habits input[type="range"] { --thumb: var(--seg-habits); }
.seg-reset input[type="range"] { --thumb: var(--seg-reset); }
.roi-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--thumb); border: 2px solid var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-border-strong);
}
.roi-bar input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cc-surface);
  background: var(--thumb); box-shadow: 0 0 0 1px var(--cc-border-strong);
}
.roi-bar input[type="range"]:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 3px; }

.roi-chart-note { font-size: 12px; color: var(--cc-ink-mute); line-height: 1.6; margin: 0; }

/* Narrow screens: the six bars get tight. Let the plot scroll horizontally so
   each bar keeps a usable width and its slider stays grabbable. */
@media (max-width: 680px) {
  .roi-chart-plot { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; padding-bottom: 8px; }
  .roi-bar { grid-template-rows: auto 150px auto auto auto; }
}

@media (prefers-reduced-motion: reduce) { .roi-bar-fill { transition: none; } }

.roi-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 24px; align-items: start; padding-bottom: 32px;
}
.roi-input-panel, .roi-result-card, .roi-note-card { border-radius: var(--cc-r-md); }

.roi-left { display: flex; flex-direction: column; gap: 24px; }
.roi-next-card { padding: 28px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.roi-next-card h3 { font-size: var(--cc-fs-h3); font-weight: var(--cc-w-semibold); line-height: 1.12; letter-spacing: -0.02em; margin: 12px 0 0; }
.roi-next-card p { color: var(--cc-ink-soft); font-size: 14px; line-height: 1.6; margin-top: 12px; }
.roi-next-card .btn { margin-top: 20px; }

.roi-walkthrough-link { margin-top: 16px; font-size: 13.5px; font-weight: var(--cc-w-semibold); color: var(--cc-accent-text); }
.roi-walkthrough-link:hover { text-decoration: underline; }

/* Payback band */
.roi-payback { padding-top: 8px; }
.roi-payback-card { padding: 28px 32px; --pb-bar: var(--cc-accent-fill); }
.roi-payback-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 2px; }
.roi-payback-head strong {
  font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric);
  font-size: 46px; font-weight: var(--cc-w-bold); letter-spacing: -0.04em; line-height: 1; color: var(--cc-accent-text);
}
.roi-payback-head > div > span { font-size: 14px; color: var(--cc-ink-soft); margin-left: 8px; }
.roi-payback-sub { font-size: 13px; color: var(--cc-ink-mute); margin: 0; }
.roi-payback-label { font-size: 12px; font-weight: var(--cc-w-semibold); color: var(--cc-ink-soft); margin: 22px 0 8px; }
.roi-payback-track { display: flex; height: 34px; border-radius: var(--cc-r-sm); overflow: hidden; border: 1px solid var(--cc-border); }
.roi-payback-cost { width: 2.4%; min-width: 6px; background: var(--cc-danger-fill); }
.roi-payback-upside { flex: 1; background: var(--pb-bar); display: flex; align-items: center; padding-left: 12px; }
.roi-payback-upside span { font-size: 12px; font-weight: 500; color: var(--cc-accent-on-fill); }
.roi-payback-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--cc-ink-mute); margin-top: 6px; }
.roi-payback-divider { height: 1px; background: var(--cc-border); margin: 22px 0; }
.roi-payback-bar-row { margin-bottom: 14px; }
.roi-payback-bar-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--cc-ink-soft); margin-bottom: 5px; }
.roi-payback-bar-head strong { color: var(--cc-ink); font-weight: var(--cc-w-semibold); }
.roi-payback-bar { height: 18px; border-radius: var(--cc-r-sm); }
.roi-payback-bar-value { width: 100%; background: var(--pb-bar); }
.roi-payback-bar-cost { width: 2.4%; min-width: 8px; background: var(--cc-danger-fill); }
.roi-payback-note { font-size: 12px; color: var(--cc-ink-mute); line-height: 1.6; margin: 22px 0 0; }
.roi-payback-usermath { font-size: 12px; color: var(--cc-ink-mute); line-height: 1.6; margin: 10px 0 0; }

.roi-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.roi-panel-head h2, .roi-note-card h2 { font-size: var(--cc-fs-h3); line-height: 1.08; margin-top: 12px; }
.roi-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.roi-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.roi-field span { font-size: 13px; font-weight: var(--cc-w-semibold); color: var(--cc-ink-soft); }
.roi-field input {
  width: 100%; height: 46px; border: 1px solid var(--cc-border-strong); border-radius: var(--cc-r-sm);
  background: var(--cc-surface-2); color: var(--cc-ink);
  font-family: var(--cc-font-mono); font-size: 14px; padding: 0 13px;
}
.roi-field input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }

/* "Work it out" helper: derive weekly hours from recurring tasks. */
.roi-derive { margin-top: 18px; border-top: 1px solid var(--cc-border); padding-top: 16px; }
.roi-derive > summary { cursor: pointer; font-size: 13.5px; font-weight: var(--cc-w-semibold); color: var(--cc-accent-text); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.roi-derive > summary::-webkit-details-marker { display: none; }
.roi-derive > summary::before { content: "+"; font-family: var(--cc-font-mono); font-size: 15px; line-height: 1; color: var(--cc-accent-text); }
.roi-derive[open] > summary::before { content: "\2212"; }
.roi-derive-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.roi-derive-intro { font-size: 13px; color: var(--cc-ink-soft); line-height: 1.55; margin: 0; }
.roi-derive-grid { display: flex; flex-direction: column; gap: 14px; }
.roi-derive-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: end; }
.roi-derive-task { grid-column: 1 / -1; font-size: 13px; color: var(--cc-ink); font-weight: var(--cc-w-medium); }
.roi-derive-row label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--cc-ink-mute); font-family: var(--cc-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.roi-derive-row input { width: 84px; height: 40px; border: 1px solid var(--cc-border-strong); border-radius: var(--cc-r-sm); background: var(--cc-surface-2); color: var(--cc-ink); font-family: var(--cc-font-mono); font-size: 14px; padding: 0 12px; text-align: right; }
.roi-derive-row input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.roi-derive-total { font-size: 13.5px; color: var(--cc-ink-soft); margin: 2px 0 0; }
.roi-derive-total b { font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric); font-size: 15px; color: var(--cc-ink); font-weight: var(--cc-w-semibold); }
.roi-derive-apply { margin-left: 6px; font-size: 13px; font-weight: var(--cc-w-semibold); color: var(--cc-accent-text); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.roi-derive-apply:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 3px; border-radius: 2px; }

.roi-output-panel { display: grid; gap: 16px; position: sticky; top: 98px; }
.roi-result-card strong {
  display: block; margin: 10px 0 8px;
  font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric);
  font-size: 42px; font-weight: var(--cc-w-bold); line-height: 1; letter-spacing: -0.04em; color: var(--cc-ink);
}
.roi-result-card p { color: var(--cc-ink-soft); font-size: 13.5px; line-height: 1.55; min-height: 42px; }

/* One number out: the primary result reads as the headline; the secondary
   card (selling time, or the second capacity unit) reads visibly quieter so it
   is never mistaken for a figure to add on. */
.roi-result-primary strong { color: var(--cc-accent-text); }
.roi-result-secondary { opacity: 0.92; }
.roi-result-secondary strong { font-size: 30px; color: var(--cc-ink-soft); }
.roi-result-secondary .roi-label { color: var(--cc-ink-mute); }

/* Assumption inputs tucked inside a result card. */
.roi-assumption { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--cc-border); display: flex; flex-direction: column; gap: 8px; }
.roi-assumption label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cc-ink-mute); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--cc-w-semibold); }
.roi-assumption input { width: 92px; padding: 8px 10px; border: 1px solid var(--cc-border-strong); border-radius: var(--cc-r-sm); font-family: var(--cc-font-mono); font-weight: var(--cc-w-semibold); font-size: 14px; color: var(--cc-ink); background: var(--cc-surface-2); text-align: right; }
.roi-assumption input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.roi-assumption .roi-basis { font-size: 12.5px; color: var(--cc-ink-mute); text-transform: none; letter-spacing: 0; font-weight: var(--cc-w-regular); line-height: 1.5; }

.roi-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 28px; padding-bottom: 96px; }
.roi-note-card { display: flex; flex-direction: column; align-items: flex-start; }
.roi-note-card p { color: var(--cc-ink-soft); font-size: 15px; line-height: 1.65; margin-top: 14px; }
.roi-note-card .btn { margin-top: 24px; }

details.roi-method { margin-top: 32px; padding: 22px 26px; background: var(--cc-surface-2); border-radius: var(--cc-r-md); color: var(--cc-ink-soft); }
details.roi-method summary { cursor: pointer; font-weight: var(--cc-w-semibold); color: var(--cc-ink); font-size: 14px; }
details.roi-method p { margin-top: 10px; font-size: 14px; line-height: 1.6; }
details.roi-method ul { margin-top: 10px; padding-left: 20px; font-size: 14px; line-height: 1.7; }

/* Third-party context line on the time worksheet. */
.roi-stat { margin-top: 28px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); padding: 28px 30px; }
.roi-stat .big { font-family: var(--cc-num); font-variant-numeric: var(--cc-numeric); font-size: clamp(28px, 4vw, 40px); font-weight: var(--cc-w-bold); letter-spacing: -0.03em; color: var(--cc-accent-text); }
.roi-stat .claim { color: var(--cc-ink-soft); font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 70ch; }
.roi-stat .src { color: var(--cc-ink-mute); font-size: 13px; line-height: 1.6; margin-top: 12px; }
.roi-stat .src a { color: var(--cc-accent-text); }

.roi-guardrails { display: grid; gap: 14px; margin-top: 28px; }
.roi-guardrail { display: flex; gap: 12px; align-items: flex-start; color: var(--cc-ink-soft); font-size: 14.5px; line-height: 1.6; }
.roi-guardrail svg { width: 18px; height: 18px; color: var(--cc-accent); flex: 0 0 auto; margin-top: 3px; }

.pain { color: var(--cc-danger); }

@media (max-width: 900px) {
  .roi-hero-grid { grid-template-columns: 1fr; }
  .roi-calculator { grid-template-columns: 1fr; }
  .roi-output-panel { position: static; }
  .roi-input-grid { grid-template-columns: 1fr; }
  .roi-notes { grid-template-columns: 1fr; }
}