/* ==========================================================================
   Security Awareness Training ROI Calculator (/sat-roi-calculator)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the calculator card (three numbered steps, unit-adorned number inputs, the program level cards and
   the ALE readout), the results (notices, stat tiles, the breakdown table and the key assumptions) and the FAQ
   answers' extras. Every class starts with sroi-. Views/Launchpad/SATROICalculator.cshtml links it in its FinalHeader
   section with a ?v= cache buster from StaticAssetVersion; Scripts/sat-roi-calculator/sat-roi-calculator.js fills
   the results.
   ========================================================================== */
.sroi-root {
  /* Value colours: a gain at 5.4:1 on white, a loss at 6.5:1 on white and 5.3:1 on the blush tile */
  --sroi-gain: #1A7A43;
  --sroi-loss: #B3261E;
}

/* ---------- The calculator card ---------- */
/* A little more room for the fields on the narrowest phones */
@media (max-width: 399.98px) { .sroi-tool > .tc-card__head, .sroi-tool > .tc-card__body { padding-left: 14px; padding-right: 14px; } }
.sroi-inputs { padding-top: 6px; padding-bottom: 6px; }
@media (min-width: 768px) { .sroi-inputs { padding-top: 8px; padding-bottom: 8px; } }

/* A step: its number, heading and intro beside (on wide screens) or above its fields */
.sroi-step { display: grid; gap: 14px 40px; padding: 22px 0; }
.sroi-step + .sroi-step { border-top: 2px dashed rgba(47, 42, 79, .25); }
@media (min-width: 992px) {
  .sroi-step { grid-template-columns: 250px minmax(0, 1fr); padding: 28px 0; }
}
@media (min-width: 1200px) { .sroi-step { grid-template-columns: 280px minmax(0, 1fr); } }
.sroi-step__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 12px; }
.sroi-num { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); box-shadow: 0 3px 0 var(--tc-ink); font: 700 1.125rem/1 var(--tc-display); color: var(--tc-ink); }
.tc-root .sroi-step__title { align-self: center; margin: 0; font: 700 clamp(1.35rem, 1.2rem + .5vw, 1.6rem)/1.15 var(--tc-display); color: var(--tc-ink); }
.sroi-step__lede { grid-column: 1 / -1; margin: 4px 0 0; color: var(--tc-ink-2); }
.sroi-step__body { min-width: 0; }

/* Fields in a grid; on wide screens each field's label, input and hint share rows with its neighbours (subgrid),
   so the inputs line up whatever the length of the labels above them */
.sroi-fields { display: grid; gap: 4px 20px; }
@media (min-width: 600px) { .sroi-fields--2, .sroi-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sroi-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) {
  .sroi-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 6px; }
  .sroi-field .tc-label { align-self: end; }
}

/* A number input with its unit ($, hrs, %) inside the same ink outline */
.sroi-input { display: flex; align-items: stretch; min-height: 48px; border: 2px solid var(--tc-ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); }
.sroi-input:focus-within { outline: 3px solid var(--tc-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tc-yellow); }
.sroi-input__unit { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--tc-sky-1); font: 700 1rem/1 var(--tc-display); color: var(--tc-ink-2); }
.sroi-input__unit:first-child { border-right: 2px solid var(--tc-ink); border-radius: 12px 0 0 12px; }
.sroi-input__unit:last-child { border-left: 2px solid var(--tc-ink); border-radius: 0 12px 12px 0; }
.tc-root .sroi-input__field { flex: 1; width: 100%; min-width: 0; margin: 0; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; font: 600 1rem/1.3 var(--tc-display); color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tc-root .sroi-input__field:focus, .tc-root .sroi-input__field:focus-visible { outline: none; box-shadow: none; }
.tc-root .sroi-field .tc-input { font-variant-numeric: tabular-nums; }

/* ---------- Program levels: radio cards ---------- */
.sroi-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
@media (min-width: 1100px) { .sroi-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.sroi-level { position: relative; display: flex; min-width: 0; }
/* Out of sight but still focusable and still the thing a screen reader announces */
.sroi-level__input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sroi-level__card { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 18px 12px 14px; border: 2px solid var(--tc-ink); border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
.sroi-level__card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tc-ink); background: var(--tc-butter); }
.sroi-level__input:checked + .sroi-level__card { border-width: 3px; padding: 17px 11px 13px; background: var(--tc-yellow); box-shadow: 0 5px 0 var(--tc-ink); }
/* A tick badge on the chosen level, so the choice doesn't rest on colour alone */
.sroi-level__input:checked + .sroi-level__card::after { content: ""; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border: 3px solid var(--tc-ink); border-radius: 50%; background: var(--tc-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232F2A4F' d='m10 15.6-3.3-3.3-1.4 1.4 4.7 4.7 8.7-8.7-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / 18px; }
.tc-root .sroi-level__input:focus-visible + .sroi-level__card { outline: 3px solid var(--tc-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--tc-yellow); }
.tc-root .sroi-level__input:checked:focus-visible + .sroi-level__card { box-shadow: 0 0 0 7px var(--tc-sky); }
.sroi-level__icon { margin: 0 0 6px; font-size: 2rem; line-height: 1; color: var(--tc-ink); }
.tc-root .sroi-level__icon { width: auto; }
.sroi-level__title { display: block; margin: 0 0 4px; font: 700 1.0625rem/1.2 var(--tc-display); color: var(--tc-ink); }
.sroi-level__desc { display: block; margin: 0 0 10px; font-size: .8125rem; line-height: 1.4; color: var(--tc-ink-2); }
.sroi-level__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: auto; }
.sroi-level__stats > span { padding: 2px 8px 1px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; font: 600 .75rem/1.4 var(--tc-display); color: var(--tc-ink); white-space: nowrap; }
.sroi-level__input:checked + .sroi-level__card .sroi-level__desc { color: var(--tc-ink); }
@media (max-width: 399.98px) {
  .sroi-levels { gap: 10px; }
  .sroi-level__card { padding: 14px 8px 12px; }
  .sroi-level__input:checked + .sroi-level__card { padding: 13px 7px 11px; }
  .sroi-level__stats > span { white-space: normal; }
}
.sroi-levels__legend { max-width: 52rem; }
.sroi-levels__legend strong { color: var(--tc-ink); }

/* ---------- The ALE readout: worked out, not an input ---------- */
.sroi-ale { margin-top: 12px; padding: 16px 18px; border: 2px solid var(--tc-ink); border-radius: 18px; background: var(--tc-cream); }
.sroi-ale__label { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 700 .8125rem/1.25 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.sroi-ale__label i { font-size: 1.1rem; color: var(--tc-ink); }
.sroi-ale__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 4px; font: 700 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.15 var(--tc-display); color: var(--tc-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sroi-ale__formula { font: 600 .9375rem/1.3 var(--tc-body); color: var(--tc-muted); }

/* ---------- Results ---------- */
.sroi-warnings:empty { display: none; }
.sroi-warnings { display: grid; gap: 10px; margin: 0 0 22px; }
.sroi-notice p { margin: 0; font-weight: 600; }
.sroi-notice > i { color: var(--tc-ink); }
.tc-root .sroi-results__title { margin: 0 0 18px; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--tc-display); color: var(--tc-ink); }

/* Six stat tiles: one to a row on the narrowest phones, two on other phones, three on wider screens; the ROI tile is
   highlighted. Below 360px two tiles leave a figure under 90px, so a seven-digit amount ("-$1,644,491") would break
   inside its digits. With one tile a row there and the smaller phone size below, every figure up to twelve
   characters ("-$99,999,999", "$999,999,999") stays on one line from 320px up; longer ones, which only extreme
   inputs give, still wrap inside their tile */
.sroi-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; }
@media (max-width: 359.98px) { .sroi-stats { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .sroi-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.sroi-stat { min-width: 0; padding: 14px 14px 12px; border: 3px solid var(--tc-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--tc-ink); }
@media (min-width: 768px) { .sroi-stat { padding: 18px 20px 16px; } }
.sroi-stat__label { margin: 0 0 4px; font: 700 .75rem/1.3 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
@media (min-width: 768px) { .sroi-stat__label { font-size: .8125rem; } }
.sroi-stat__value { margin: 0; font: 700 clamp(1.2rem, .95rem + 1.5vw, 2.1rem)/1.15 var(--tc-display); color: var(--tc-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .sroi-stat__value { font-size: clamp(1.1rem, .8rem + 1.5vw, 1.6rem); } }
.sroi-stat--pos .sroi-stat__value { color: var(--sroi-gain); }
.sroi-stat--neg .sroi-stat__value { color: var(--sroi-loss); }
.sroi-stat--roi { background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%); }
.sroi-stat--roi .sroi-stat__label { color: var(--tc-ink); }
/* A negative ROI loses the highlight and shows red, as it always did */
.sroi-stat--roi.sroi-stat--neg { background: var(--tc-blush); }

/* The breakdown table beside the key assumptions on wide screens */
.sroi-detail { display: grid; gap: 30px; }
@media (min-width: 1100px) { .sroi-detail { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
.sroi-detail__part { min-width: 0; }
.tc-root .sroi-detail__title { margin: 0 0 12px; font: 700 1.3rem/1.2 var(--tc-display); color: var(--tc-ink); }

.sroi-breakdown { box-shadow: 0 4px 0 var(--tc-ink); }
.tc-root .sroi-table { min-width: 0; }
.tc-root .sroi-table th, .tc-root .sroi-table td { padding: 10px 14px; vertical-align: middle; }
.tc-root .sroi-table .sroi-table__num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tc-root .sroi-table thead .sroi-table__num { font-weight: 700; }
/* Group rows: a tinted band with a small capitals label, left-aligned */
.tc-root .sroi-table .sroi-table__group th { padding-top: 9px; padding-bottom: 7px; border-top: 2px solid var(--tc-ink); border-bottom: 2px solid var(--tc-line); background: var(--tc-sky-1); font: 700 .75rem/1.3 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-ink); text-align: left; }
.tc-root .sroi-table tbody:first-of-type .sroi-table__group th { border-top: 0; }
.tc-root .sroi-table .sroi-table__total td { background: var(--tc-butter); font-weight: 700; color: var(--tc-ink); }
@media (max-width: 399.98px) { .tc-root .sroi-table th, .tc-root .sroi-table td { padding: 9px 10px; font-size: .875rem; } }

/* Key assumptions: label left, value right */
.sroi-assume { padding: 6px 18px; border: 2px solid var(--tc-ink); border-radius: 18px; background: var(--tc-sky-0); }
.sroi-assume__list { display: grid; }
@media (min-width: 600px) and (max-width: 1099.98px) { .sroi-assume__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.sroi-assume__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 0; border-bottom: 2px dashed rgba(47, 42, 79, .18); font-size: .9375rem; color: var(--tc-ink-2); font-variant-numeric: tabular-nums; }
.sroi-assume__list li:last-child { border-bottom: 0; }
@media (min-width: 600px) and (max-width: 1099.98px) { .sroi-assume__list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.sroi-assume__list strong { font-weight: 600; color: var(--tc-ink); }

/* ---------- FAQ answers: the headings, lists and table the old answers had ---------- */
/* The table in the third answer is wider than a phone: the FAQ's grid items may shrink below their content, so it
   scrolls inside its frame instead of widening the column (which the page then clips) */
.sroi-root .tc-split > *, .sroi-root .tc-qa { min-width: 0; }
.tc-root .sroi-answer { font-size: 1rem; }
.tc-root .sroi-answer h4 { margin: 1.4em 0 .4em; font-size: 1.0625rem; }
.tc-root .sroi-answer > h4:first-child { margin-top: 0; }
.sroi-faq-table { margin: 0 0 1.1em; border-width: 2px; border-radius: 14px; box-shadow: none; }
.tc-root .sroi-faq-table .tc-table { min-width: 620px; font-size: .875rem; }
.tc-root .sroi-faq-table .tc-table th, .tc-root .sroi-faq-table .tc-table td { padding: 9px 12px; }
.tc-root .sroi-faq-table td:nth-child(n+3) { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sroi-level__card:hover { transform: none; }
}