/* ==========================================================================
   /hiring-subsidy-calculator/ (Hub B). Loads AFTER css/funded.css and reuses its
   system: the forest registry masthead, white Style A cards with accent rails,
   mono field labels, the Who Wins table language, copper = Premium, forest = go.
   This file adds only what a calculator needs: the form, the answer, the
   stacked "who pays what" bar, the why panel, the timeline.
   NOT used (deprecated early-SEO kit): gradient/grid heroes, coloured italic
   keywords, "Updated" pills, floating stat strips.
   ========================================================================== */

/* ---- the form ------------------------------------------------------------ */
.hc-calc { padding: 0; overflow: hidden; }
.hc-calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 12px 20px; background: var(--fl-paper-2); border-bottom: 1px solid var(--fl-rule); }
.hc-calc__head .fl-label { color: var(--fl-forest-2); }
.hc-calc__head span:last-child { font: 500 11.5px var(--fl-mono); color: var(--fl-ink-3); }
.hc-step { border: 0; margin: 0; padding: 18px 18px 6px 20px; min-width: 0; }
.hc-step + .hc-step { border-top: 1px solid var(--fl-rule-2); }
@media (min-width: 768px) { .hc-step { padding: 22px 28px 8px 30px; } .hc-calc__head { padding: 14px 28px 12px 30px; } }
.hc-step legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; padding: 0; margin-bottom: 14px;
  font: 600 19px/1.25 var(--fl-serif); color: var(--fl-ink); font-variation-settings: 'opsz' 36; }
.hc-step legend + * { clear: both; }
.hc-step legend b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fl-forest); color: var(--fl-on-forest); font: 600 12.5px var(--fl-mono); }
.hc-q, .hc-field { margin-bottom: 16px; min-width: 0; }
.hc-label, .hc-field > label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14.5px; color: var(--fl-ink); }
.hc-hint { font-weight: 400; color: var(--fl-ink-3); }

.hc-choices { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .hc-choices { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .hc-choices { grid-template-columns: repeat(3, 1fr); } }
.hc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-choice { position: relative; display: block; cursor: pointer; }
.hc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hc-choice span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--fl-rule); background: var(--fl-paper); font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--fl-ink);
  transition: border-color .12s, background-color .12s; }
.hc-choices .hc-choice span { min-height: 60px; }
.hc-choice small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--fl-ink-3); }
.hc-choice:hover span { border-color: #CDBFAA; }
.hc-choice input:checked + span { border-color: var(--fl-forest-2); background: var(--fl-forest-tint); box-shadow: inset 0 0 0 1px var(--fl-forest-2); }
.hc-choice input:focus-visible + span { outline: 2px solid var(--fl-forest-2); outline-offset: 2px; }
.hc-sub { margin: 4px 0 16px; padding: 14px 14px 2px; border-radius: 8px; background: var(--fl-paper-2); border: 1px solid var(--fl-rule-2); }

.hc-checks { display: grid; gap: 6px; }
.hc-check { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--fl-rule-2); background: var(--fl-paper); font-size: 14.5px; line-height: 1.35; }
.hc-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--fl-forest); }

.hc-row { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .hc-row { grid-template-columns: 1fr 1fr; } .hc-row--3 { grid-template-columns: repeat(3, 1fr); } }
.hc-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-input { position: relative; display: flex; align-items: center; min-height: 48px; border-radius: 8px; border: 1px solid #D8CDBC;
  background: #fff; }
.hc-input:focus-within { border-color: var(--fl-forest-2); box-shadow: 0 0 0 3px rgba(45,106,79,.16); }
.hc-input i { flex: none; padding-left: 12px; font: 500 15px var(--fl-mono); font-style: normal; color: var(--fl-ink-3); }
.hc-input input, .hc-input select { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; padding: 0 12px;
  font: 500 16px var(--fl-sans); color: var(--fl-ink); -webkit-appearance: none; appearance: none; }
.hc-input i + input { padding-left: 4px; }
.hc-input select { padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

.hc-go-wrap { padding: 8px 18px 20px 20px; border-top: 1px solid var(--fl-rule-2); background: var(--fl-paper-2); }
@media (min-width: 768px) { .hc-go-wrap { padding: 14px 28px 22px 30px; } }
.hc-go { width: 100%; }
@media (min-width: 768px) { .hc-go { width: auto; min-width: 320px; } }
.hc-go-note { margin-top: 10px; font: 500 12px/1.5 var(--fl-mono); color: var(--fl-ink-3); }
.hc-err { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: var(--fl-copper-tint); border: 1px solid var(--fl-copper-line);
  color: var(--fl-copper-dk); font-weight: 600; font-size: 14.5px; outline: 0; }

/* ---- the answer ---------------------------------------------------------- */
.hc-results { scroll-margin-top: calc(var(--fl-nav) + 12px); }
.hc-results > * + * { margin-top: 16px; }
.hc-results > .hc-h { margin-top: 36px; margin-bottom: 0; }
.hc-sum { padding: 20px 18px 20px 22px; }
@media (min-width: 768px) { .hc-sum { padding: 26px 30px 24px 32px; } }
.hc-sum__for { margin-top: 8px; font-size: 14px; color: var(--fl-ink-2); }
.hc-big { margin-top: 10px; font: 600 clamp(46px, 13vw, 68px)/1 var(--fl-serif); letter-spacing: -.02em; color: var(--fl-forest); font-variation-settings: 'opsz' 144; }
.hc-big--word { font-size: clamp(30px, 8vw, 40px); }
.hc-big__sub { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--fl-ink-2); max-width: 640px; }
.hc-big__sub b { color: var(--fl-ink); }
.hc-big__plus { font-size: 15px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--fl-rule); }
.hc-asof { margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--fl-ink-3); }

.hc-bar { display: flex; height: 38px; margin-top: 18px; border-radius: 6px; overflow: hidden; border: 1px solid var(--fl-rule); background: #fff; }
.hc-bar__seg { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; font: 600 13px var(--fl-mono); color: #fff; }
.hc-bar__seg--0 { background: var(--fl-forest); }
.hc-bar__seg--1 { background: var(--fl-forest-2); }
.hc-bar__seg--2 { background: #4F7C66; }
.hc-bar__you { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; white-space: nowrap; overflow: hidden;
  font: 600 12.5px var(--fl-mono); color: var(--fl-ink-2);
  background: repeating-linear-gradient(135deg, #fff 0 4px, #EFE6D6 4px 8px); }
.hc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px !important; font-size: 13.5px; color: var(--fl-ink-2); }
.hc-legend li { display: flex; align-items: center; gap: 7px; }
.hc-legend b { color: var(--fl-ink); font-family: var(--fl-mono); font-size: 13px; }
.hc-key { flex: none; width: 11px; height: 11px; border-radius: 2px; }
.hc-key--0 { background: var(--fl-forest); } .hc-key--1 { background: var(--fl-forest-2); } .hc-key--2 { background: #4F7C66; }
.hc-key--you { background: repeating-linear-gradient(135deg, #fff 0 2px, #D9CCB6 2px 4px); border: 1px solid #CDBFA6; }

/* one programme line */
.hc-line { padding: 18px 18px 6px 20px; }
@media (min-width: 768px) { .hc-line { padding: 22px 28px 8px 30px; } }
.hc-line__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.hc-line__title { margin-top: 6px !important; font: 600 19px/1.25 var(--fl-serif); color: var(--fl-ink); font-variation-settings: 'opsz' 36; }
.hc-amt { flex: none; text-align: right; font: 600 26px/1.05 var(--fl-serif); color: var(--fl-forest); }
.hc-amt small { display: block; font: 500 11px/1.4 var(--fl-mono); letter-spacing: .04em; color: var(--fl-ink-3); }
.hc-amt small:first-child { margin-bottom: 2px; }
.hc-amt__word { font-size: 16px; color: var(--fl-ink-2); }
.hc-rule { margin-top: 8px !important; font-size: 15px; color: var(--fl-ink-2); max-width: 640px; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hc-meta .fl-tag { margin-left: 0; }
.hc-tag--check { color: var(--fl-amber-ink); background: var(--fl-amber-tint); }
.hc-whybtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 14.5px var(--fl-sans); color: var(--fl-forest-2); }
.hc-whybtn svg { transition: transform .15s; }
.hc-whybtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hc-why { margin: 2px 0 14px; padding: 14px 14px 12px; border-radius: 8px; background: var(--fl-paper-2); border: 1px solid var(--fl-rule-2); }
.hc-why > .fl-label { margin-top: 12px; margin-bottom: 6px; }
.hc-why > .fl-label:first-child { margin-top: 0; }
.hc-math li { padding: 5px 0; font-size: 13.5px; line-height: 1.5; color: var(--fl-ink); border-bottom: 1px dashed var(--fl-rule); }
.hc-math li:last-child { border-bottom: 0; font-weight: 600; color: var(--fl-forest); }
.hc-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--fl-copper); border-radius: 0 6px 6px 0; background: #fff; font-size: 14.5px; line-height: 1.5; }
.hc-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: .04em; color: var(--fl-ink-3); }
.hc-more { margin-top: 10px; }
.hc-more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--fl-forest-2); }
.hc-more .hc-quote + .hc-quote { margin-top: 8px; }
.hc-ticks li { position: relative; padding: 4px 0 4px 24px; font-size: 14.5px; }
.hc-ticks li::before { content: ''; position: absolute; left: 3px; top: 10px; width: 11px; height: 6px; border-left: 2px solid var(--fl-forest-2);
  border-bottom: 2px solid var(--fl-forest-2); transform: rotate(-45deg); }
.hc-ticks--confirm li::before { width: 8px; height: 8px; top: 9px; border: 2px solid var(--fl-amber-ink); border-radius: 50%; transform: none; }
.hc-why .fl-src { margin-top: 12px; font-size: 12.5px; color: var(--fl-ink-3); }
.hc-why .fl-src a { font-weight: 600; }

.hc-partners { margin-top: 12px; border-radius: 8px; border: 1px solid var(--fl-rule-2); background: var(--fl-paper-2); }
.hc-partners summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; cursor: pointer;
  font-size: 14px; color: var(--fl-ink-2); list-style: none; }
.hc-partners summary::-webkit-details-marker { display: none; }
.hc-partners__cta { flex: none; font-weight: 700; color: var(--fl-forest-2); }
.hc-partners[open] summary { border-bottom: 1px solid var(--fl-rule-2); }
.hc-partners > .fl-note { padding: 0 12px 12px; }
.hc-plist { display: grid; gap: 6px; padding: 10px 10px 0 !important; }
.hc-chip { display: block; width: 100%; text-align: left; min-height: 48px; padding: 9px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--fl-rule); background: #fff; font: 400 14px/1.35 var(--fl-sans); color: var(--fl-ink); }
.hc-chip b { display: block; font-weight: 700; }
.hc-chip small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fl-ink-3); }
.hc-chip[aria-pressed="true"] { border-color: var(--fl-forest-2); background: var(--fl-forest-tint); box-shadow: inset 0 0 0 1px var(--fl-forest-2); }

/* what to do first */
.hc-time { position: relative; margin-top: 4px !important; padding-left: 26px !important; }
.hc-time::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--fl-rule); }
.hc-time li { position: relative; padding: 0 0 18px; }
.hc-time li::before { content: ''; position: absolute; left: -25px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fl-paper);
  border: 2.5px solid var(--fl-forest-2); }
.hc-time li.is-start::before { background: var(--fl-copper); border-color: var(--fl-copper); }
.hc-time__when { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-copper); }
.hc-time p { margin-top: 3px !important; font-size: 15px; line-height: 1.5; max-width: 680px; }
.hc-time__aside { color: var(--fl-ink-3); font-size: 14px; }

/* folds */
.hc-fold { border-radius: var(--fl-r); border: 1px solid var(--fl-rule); background: var(--fl-paper); }
.hc-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 18px; cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; }
.hc-fold > summary::-webkit-details-marker { display: none; }
.hc-fold > summary::after { content: '+'; margin-left: auto; font: 500 20px var(--fl-mono); color: var(--fl-ink-3); }
.hc-fold[open] > summary::after { content: '\2013'; }
.hc-fold > summary .fl-mono { font-weight: 500; color: var(--fl-ink-3); font-size: 13px; }
.hc-fold__body { padding: 0 18px 16px; }
.hc-alt { padding: 14px 0; border-top: 1px solid var(--fl-rule-2); }
.hc-alt__title { font: 600 17px/1.3 var(--fl-serif); }
.hc-alt p { margin-top: 6px !important; font-size: 14.5px; color: var(--fl-ink-2); }
.hc-out__list { padding: 0 18px 14px !important; }
.hc-out__list li { padding: 9px 0; border-top: 1px solid var(--fl-rule-2); font-size: 14px; }
.hc-out__list li b { display: block; }
.hc-out__list li span { color: var(--fl-ink-2); }
.hc-out__list li.is-more { color: var(--fl-ink-3); }

/* Premium, kit, hand-off, share */
.hc-prem .fl-also { margin-top: 12px; }
.hc-kit__sec { margin-top: 16px; }
.hc-kit__sec p { margin-top: 6px !important; font-size: 14.5px; color: var(--fl-ink-2); }
.hc-kit .fl-stamp { display: inline-flex; }
.hc-share { padding: 4px 2px 0; }
.hc-share .fl-actions { margin-top: 8px; }

/* nothing applies */
.hc-none__title { margin-top: 10px !important; font: 600 clamp(22px, 5.4vw, 28px)/1.2 var(--fl-serif); letter-spacing: -.01em; max-width: 30ch; }
.hc-none__h { margin-top: 22px !important; font: 600 18px/1.3 var(--fl-serif); }
.hc-levers { display: grid; gap: 8px; margin-top: 10px !important; }
.hc-levers button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; text-align: left;
  border-radius: 8px; border: 1px solid var(--fl-rule); background: #fff; cursor: pointer; font: 600 14.5px/1.35 var(--fl-sans); color: var(--fl-ink); }
.hc-levers button:hover { border-color: var(--fl-forest-2); }
.hc-levers small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--fl-ink-3); }
.hc-levers b { flex: none; font: 600 17px var(--fl-serif); color: var(--fl-forest); }
.hc-why-none { display: grid; gap: 8px; margin-top: 10px; }
.hc-why-none > div { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: baseline; }
.hc-why-none dt { font: 600 22px var(--fl-serif); color: var(--fl-ink); text-align: right; }
.hc-why-none dd { font-size: 14.5px; color: var(--fl-ink-2); margin: 0; }

/* ---- static content (programme tables, worked examples) ------------------ */
.hc-prog td:first-child { min-width: 180px; }
.hc-prog .sub { max-width: 46ch; }
.hc-ex td.fig { color: var(--fl-forest); font-weight: 600; }
@media (max-width: 640px) {
  .hc-stack thead { display: none; }
  .hc-stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--fl-rule-2); }
  .hc-stack tr:last-child { border-bottom: 0; }
  .hc-stack td { display: block; padding: 2px 0 !important; border: 0 !important; text-align: left !important; }
  .hc-stack td[data-h]::before { content: attr(data-h) ' '; font: 500 10.5px var(--fl-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-3); }
}
.hc-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .hc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .hc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.hc-takeaway { font-size: 16.5px; line-height: 1.6; color: var(--fl-ink); max-width: 720px; }
.hc-takeaway b { font-weight: 700; }
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: -10px 0 6px; color: var(--fl-on-forest-3); font: 500 11px var(--fl-mono); }
.hc-crumbs a.fl-mast__crumb { text-decoration: underline; text-decoration-color: rgba(253,250,244,.3); text-underline-offset: 4px; }
.hc-grouprow th { padding-top: 18px !important; font: 600 15px/1.3 var(--fl-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--fl-ink) !important; white-space: normal !important; }
.hc-grouprow:first-child th { padding-top: 4px !important; }
.hc-grouprow .fl-mono { font-size: 12px; color: var(--fl-ink-3); font-weight: 500; }
@media (max-width: 640px) { .hc-stack tr.hc-grouprow { padding-bottom: 0; border-bottom: 0; } .hc-stack .hc-grouprow th { display: block; } }
.hc-gap p, .hc-gap__p { margin-top: 8px !important; font-size: 14.5px; color: var(--fl-ink-2); }
.hc-gap p b, .hc-gap__p b { color: var(--fl-ink); }
.hc-gap .fl-mono, .hc-gap__p .fl-mono { font-size: 11.5px; color: var(--fl-ink-3); }
.hc-prog { table-layout: fixed; }
.hc-where { font: 500 13px/1.45 var(--fl-mono); color: var(--fl-ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .hc-prog { table-layout: auto; } .hc-prog colgroup { display: none; } }
/* after a calculation the form folds to one line (the answer replaces the questions) */
.hc-calc.is-done .hc-step, .hc-calc.is-done .hc-go-wrap { display: none; }
.hc-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px 14px 20px; }
.hc-done[hidden] { display: none; }
@media (min-width: 768px) { .hc-done { padding: 16px 28px 16px 30px; } }
.hc-done__for { font-size: 14.5px; color: var(--fl-ink-2); max-width: 640px; }
.hc-done__edit { min-height: 44px; font-size: 14.5px; }
.hc-calc.is-done .hc-calc__head { display: none; }
.hc-done__for { margin-top: 4px !important; }