/* Evaluate (phase 3): from insight to a charter the board can sign. Every selector is prefixed .evaluate-.
   Shared building blocks (.discover-section-head, .discover-stream-short, .discover-tip) come from discover.css. */

.evaluate-page { padding-top: 22px; }
.evaluate-page h3 { font-size: var(--fs-base); }

/* ---------- hero & section nav ---------- */
.evaluate-hero { margin-bottom: 16px; }
.evaluate-h1 { font-size: clamp(var(--fs-2xl), 2.6vw, var(--fs-3xl)); margin: 12px 0 8px; }
.evaluate-hero .lede { margin-bottom: 14px; max-width: 80ch; }
.evaluate-express-lede { display: flex; gap: 8px; align-items: flex-start; max-width: 80ch; margin: -4px 0 14px; padding: 8px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-deep); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.45; }
.evaluate-express-lede svg { flex: none; margin-top: 2px; }
.evaluate-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.evaluate-navbtn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); background: #fff; border-radius: 999px;
  padding: 5px 14px 5px 5px; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink); cursor: pointer; min-height: 36px; transition: border-color .2s, background .2s;
}
.evaluate-navbtn:hover { border-color: var(--teal-ink); }
.evaluate-navn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--band-2); color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.evaluate-navbtn.is-done .evaluate-navn { background: var(--teal-ink); color: #fff; }
.evaluate-navbtn.is-charter { margin-left: auto; }
.evaluate-navopt { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); margin-left: -2px; }
.evaluate-navbtn.is-optional { border-style: dashed; }
.evaluate-navbtn.is-charter .evaluate-navn { background: var(--navy); color: #fff; }
.evaluate-banner { margin-bottom: 16px; align-items: center; }
.evaluate-banner svg { color: var(--teal-deep); flex: none; }

/* ---------- layout ---------- */
.evaluate-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .evaluate-layout { grid-template-columns: minmax(0, 1fr) 290px; } }
@media (min-width: 1360px) { .evaluate-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.evaluate-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.evaluate-section { padding: 22px; scroll-margin-top: 80px; }
.evaluate-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) { .evaluate-side { position: sticky; top: 76px; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 4px; } }

/* ---------- (1) prioritise ---------- */
.evaluate-prio { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* The matrix gets the room (up to 440 px); the list beside it puts each value stream's scales under its name. */
@media (min-width: 900px) { .evaluate-prio { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); } }
.evaluate-matrix { position: relative; border-radius: 14px; }
.evaluate-matrix .chart { transition: filter .2s; }
.evaluate-matrix-grid { position: absolute; left: 9.524%; top: 9.524%; width: 80.952%; height: 80.952%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); }
.evaluate-cell { border: 0; background: transparent; cursor: crosshair; border-radius: 6px; transition: background .12s, box-shadow .12s; }
.evaluate-cell:hover, .evaluate-cell:focus-visible { background: rgba(0, 57, 95, .10); box-shadow: inset 0 0 0 2px var(--navy); outline: none; }
.evaluate-matrix.is-placing { box-shadow: 0 0 0 3px var(--teal-soft); }
.evaluate-legend { margin-top: 6px; justify-content: center; }
.evaluate-ghosts { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.evaluate-seg button.is-calc:not(.is-active) { box-shadow: inset 0 0 0 2px var(--salmon-ui); color: var(--salmon-ink); }
.evaluate-seg button.is-calc.is-active { box-shadow: inset 0 0 0 2px var(--salmon-ui), inset 0 0 0 4px #fff; }
.evaluate-key-ghost { color: var(--salmon-ink); }
.evaluate-key-ghost i { background: none !important; border-top: 2px dashed currentColor; height: 0 !important; }
.evaluate-howto { margin: 0 0 8px; min-height: 20px; }
.evaluate-prio-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.evaluate-prio-head { display: grid; grid-template-columns: 70px 116px 116px; gap: 10px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px 2px; }
.evaluate-prio-head span:first-child { visibility: hidden; overflow: hidden; }
.evaluate-prio-head span + span { text-align: center; }
.evaluate-prio-row { display: grid; grid-template-columns: 70px 116px 116px; gap: 4px 10px; align-items: center; padding: 6px 8px 8px; border-radius: 12px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.evaluate-prio-row > .evaluate-pick { grid-column: 1 / -1; }
.evaluate-prio-row > span.evaluate-seg:nth-of-type(1) { grid-column: 2; }
.evaluate-prio-row > span.evaluate-seg:nth-of-type(2) { grid-column: 3; }
.evaluate-prio-row:hover { background: var(--band); }
.evaluate-prio-row.is-selected { background: var(--teal-soft); border-color: #A9E3D7; }
.evaluate-prio-row.is-unplaced .evaluate-pick-t b { color: var(--amber-ink); font-weight: var(--fw-bold); }
.evaluate-pick { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; min-width: 0; color: inherit; }
.evaluate-pick[disabled] { cursor: default; }
.evaluate-pick-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; line-height: 1.25; }
.evaluate-pick-t .strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
/* The status and the cost range wrap as whole parts when the column is narrow (Dutch). */
.evaluate-pick-t .tiny { white-space: normal; line-height: 1.3; }
.evaluate-pick .discover-stream-short { width: 62px; min-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); padding-inline: 4px; }
.evaluate-rank { width: 18px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.evaluate-seg { display: inline-grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.evaluate-seg button { border: 0; background: none; min-height: 30px; padding: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.evaluate-seg button + button { border-left: 1px solid var(--hairline); }
.evaluate-seg button:hover:not([disabled]) { background: var(--band); color: var(--ink); }
.evaluate-seg button.is-active { background: var(--navy); color: #fff; }
.evaluate-seg button[disabled] { cursor: default; }
.evaluate-seg button[disabled]:not(.is-active) { color: var(--border-strong); }
.evaluate-gaps { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--band); display: flex; flex-direction: column; gap: 8px; }
.evaluate-gap-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .evaluate-gap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evaluate-gap { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); color: var(--ink); border-left: 4px solid var(--border); }
.evaluate-gap.is-bad { border-left-color: var(--salmon-ui); }
.evaluate-gap.is-warn { border-left-color: var(--amber-ui); }
.evaluate-gap.is-good { border-left-color: var(--teal-ui); }

/* Express: the matrix is optional and folded until the team opens it. */
.evaluate-optpill { font-size: var(--fs-xs); }
.evaluate-section.is-folded { padding-bottom: 18px; }
.evaluate-fold { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-left: 44px; padding: 10px 14px; border-radius: 12px; background: var(--band); }
.evaluate-fold p { flex: 1 1 280px; color: var(--ink-2); }

/* ---------- (2) redesign ---------- */
.evaluate-mode { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
@media (min-width: 900px) { .evaluate-mode { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.evaluate-mode-l { display: flex; gap: 10px; align-items: flex-start; }
.evaluate-mode-l .pill { flex: none; margin-top: 1px; }
.evaluate-progress { display: flex; flex-direction: column; gap: 6px; }
.evaluate-blueprints { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
@media (min-width: 800px) { .evaluate-blueprints { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evaluate-bp { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--band); font-size: var(--fs-sm); }
.evaluate-bp .tiny { color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.evaluate-bp-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--ink); flex: none; }
.evaluate-bp.is-gated { background: var(--teal-soft); }
.evaluate-bp.is-gated .evaluate-bp-icon { background: var(--teal-ink); color: #fff; }
.evaluate-bp.is-autonomous .evaluate-bp-icon { color: var(--salmon-ink); }
.evaluate-bp-apply { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.evaluate-bp-apply .small { display: inline-flex; gap: 6px; align-items: center; }
.evaluate-nudge { margin-bottom: 12px; align-items: center; }
.evaluate-nudge svg { color: var(--teal-deep); flex: none; }
.evaluate-designs { display: flex; flex-direction: column; gap: 6px; }
.evaluate-design {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid var(--hairline); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.evaluate-design:hover { border-color: #BFD0DB; box-shadow: var(--shadow-xs); }
.evaluate-design.is-top:not(.is-designed) { border-color: #F1D593; background: linear-gradient(90deg, #FFFBF1, #fff 60%); }
.evaluate-design.is-designed { background: linear-gradient(90deg, #F2FAF8, #fff 60%); }
.evaluate-design > .btn { justify-self: end; }
.evaluate-design .discover-stream-short { justify-self: start; font-size: var(--fs-xs); padding-inline: 5px; }
.evaluate-design-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.evaluate-design-name .strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: var(--fs-sm); }
.evaluate-design-name .pill { font-size: var(--fs-xs); padding: 0 8px; }
.evaluate-design-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
/* The three numbers wrap as whole items rather than run into the needs column (long Dutch labels). */
.evaluate-dnums { display: inline-flex; flex-wrap: wrap; gap: 0 10px; font-size: var(--fs-xs); color: var(--muted); max-width: 100%; }
.evaluate-dnums > span { white-space: nowrap; }
.evaluate-dnums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.evaluate-dnums .bad b, .evaluate-dnums .bad { color: var(--salmon-ink); }
.evaluate-dnums .warn b, .evaluate-dnums .warn { color: var(--amber-ink); }
.evaluate-needs { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; min-width: 0; }
.evaluate-needs .tiny { margin-right: 3px; }
.evaluate-need { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--cyan-soft); color: var(--link-hover); cursor: help; }
@media (max-width: 1180px) { .evaluate-design { grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.4fr) auto; } .evaluate-needs { grid-column: 2 / 4; } }

/* ---------- (3) architecture ---------- */
.evaluate-erp { border-radius: 16px; padding: 18px; background: linear-gradient(160deg, #EEF4F8, #F7FAFC 60%); border: 1px solid #D3E0E8; margin-bottom: 18px; }
.evaluate-erp-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.evaluate-dilemma { color: var(--salmon-ink); display: inline-flex; gap: 6px; align-items: center; }
.evaluate-erp-q { font-size: var(--fs-lg) !important; margin: 4px 0 6px; }
.evaluate-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.evaluate-fact { display: inline-flex; gap: 6px; align-items: baseline; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 5px 12px; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-strong); }
.evaluate-fact b { font-size: var(--fs-base); color: var(--ink); font-variant-numeric: tabular-nums; }
.evaluate-fact.is-changed { border-color: #F7C8BD; background: var(--salmon-soft); }
.evaluate-fact.is-changed b { color: var(--salmon-ink); }
.evaluate-principles { display: flex; flex-direction: column; gap: 18px; }
.evaluate-principle-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.evaluate-principle-head h3 { margin: 0; }
.evaluate-opts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .evaluate-opts.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evaluate-opts.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evaluate-opt {
  display: flex; flex-direction: column; gap: 6px; text-align: left; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px;
  cursor: pointer; color: var(--ink-2); transition: border-color .2s, box-shadow .2s, background .2s; min-width: 0; font-size: var(--fs-sm); line-height: 1.4;
}
.evaluate-opt:hover:not([disabled]) { border-color: var(--teal-ink); }
.evaluate-opt.is-selected { border: 2px solid var(--teal-ink); padding: 11.5px 13.5px; background: #F4FBF9; box-shadow: 0 0 0 4px var(--teal-soft); }
.evaluate-opt[disabled] { cursor: default; }
/* After the lock: the chosen option in full colour, the others outline-only (app.css .readonly-choice), never faded. */
.evaluate-opt.readonly-choice.is-chosen .evaluate-opt-name { color: var(--teal-deep); }
.evaluate-opt.is-big { padding: 14px 16px; }
.evaluate-opt.is-big.is-selected { padding: 13.5px 15.5px; }
.evaluate-opt-head { display: flex; gap: 8px; align-items: center; }
.evaluate-opt-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.is-selected .evaluate-opt-mark { background: var(--teal-ink); border-color: var(--teal-ink); }
.evaluate-opt-name { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-md); line-height: 1.25; }
.is-big .evaluate-opt-name { font-size: var(--fs-base); }
.evaluate-default { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); background: var(--band); border-radius: 999px; padding: 1px 8px; margin-left: auto; white-space: nowrap; align-self: flex-start; }
.evaluate-opt.is-selected .evaluate-default { background: #fff; color: var(--teal-deep); }
.evaluate-opt-desc { color: var(--ink-2); }
.evaluate-pros, .evaluate-cons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); }
.evaluate-pros li, .evaluate-cons li { position: relative; padding-left: 18px; }
.evaluate-pros li::before { content: "+"; position: absolute; left: 2px; top: -1px; font-weight: var(--fw-bold); color: var(--teal-ink); }
.evaluate-cons li::before { content: "−"; position: absolute; left: 2px; top: -1px; font-weight: var(--fw-bold); color: var(--salmon-ink); }
.evaluate-opt-hint { display: flex; gap: 6px; align-items: flex-start; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hairline); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink); }
.evaluate-opt-hint svg { flex: none; color: var(--teal-ink); margin-top: 1px; }
/* One line per option (name, default tag, what it costs); description, pros and cons open with the trade-offs toggle. */
.evaluate-opt.is-compact { padding: 10px 12px; gap: 6px; justify-content: flex-start; }
.evaluate-opt.is-compact.is-selected { padding: 9.5px 11.5px; }
.evaluate-opt.is-compact.is-big { padding: 12px 14px; }
.evaluate-opt.is-compact.is-big.is-selected { padding: 11.5px 13.5px; }
.evaluate-opt.is-compact .evaluate-opt-hint { margin-top: 2px; }
.evaluate-opt.is-compact:not(.is-open) .evaluate-opt-hint { border-top: 0; padding-top: 0; }
.evaluate-facts .evaluate-tradeoffs { margin-left: auto; }
.evaluate-principle-head .evaluate-tradeoffs { align-self: center; }
.evaluate-prow-body { margin-top: 10px; }
.evaluate-prow-tools { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* Express: the other operating-model choices as folded rows, each on its default until changed. */
.evaluate-prows { display: flex; flex-direction: column; gap: 8px; }
.evaluate-prow { border: 1px solid var(--hairline); border-radius: 14px; padding: 10px 12px 10px 14px; background: #fff; }
.evaluate-prow.is-open { border-color: #BFD0DB; box-shadow: var(--shadow-xs); }
.evaluate-prow-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.evaluate-prow-q h3 { margin: 0; font-size: var(--fs-md) !important; }
.evaluate-prow-q .small { line-height: 1.35; }
.evaluate-prow-v { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.evaluate-prow-v .strong { font-size: var(--fs-sm); }
.evaluate-prow .evaluate-opts { margin-top: 0; }
@media (max-width: 1180px) { .evaluate-prow-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .evaluate-prow-head .role-chip { display: none; } }

/* ---------- (4) ambitions ---------- */
/* The level descriptions are the lesson (the 'but…' clause says why Assist is not enough): never clamped. */
.evaluate-levels { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; margin-bottom: 14px; }
@media (min-width: 700px) { .evaluate-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evaluate-lv { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--band); font-size: var(--fs-sm); }
.evaluate-lv .tiny { color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.evaluate-lv-n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-xs); background: #fff; color: var(--ink); }
.evaluate-lv.is-l1 .evaluate-lv-n { background: var(--cyan-soft); color: var(--link-hover); }
.evaluate-lv.is-l2 .evaluate-lv-n { background: #BFE9DF; color: var(--teal-deep); }
.evaluate-lv.is-l3 .evaluate-lv-n { background: var(--teal-ink); color: #fff; }
.evaluate-amb-list { display: flex; flex-direction: column; gap: 6px; }
.evaluate-amb { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; background: #fff; }
.evaluate-amb.is-unset { border-style: dashed; }
.evaluate-amb-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 150px; gap: 12px; align-items: center; }
.evaluate-amb-top > .discover-stream-short { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.evaluate-amb-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.evaluate-amb-ready { text-align: right; }
.evaluate-amb.is-compact { padding-block: 7px; }
.evaluate-amb.is-compact .evaluate-amb-top { grid-template-columns: 64px minmax(0, 1fr) auto minmax(150px, auto); }
.evaluate-amb-toggle { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; justify-self: end; background: none; border: 0; padding: 2px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.evaluate-amb-toggle:hover .pill { box-shadow: 0 0 0 2px currentColor; }
.evaluate-lvseg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.evaluate-lvseg button { border: 0; background: none; min-height: 32px; padding: 0 11px; font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.evaluate-lvseg button + button { border-left: 1px solid var(--hairline); }
.evaluate-lvseg button:hover:not([disabled]) { background: var(--band); color: var(--ink); }
.evaluate-lvseg button.is-active { background: var(--navy); color: #fff; }
.evaluate-lvseg button.is-active.is-l3 { background: var(--teal-ink); }
.evaluate-lvseg button.is-default { box-shadow: inset 0 0 0 2px var(--border-strong); background: repeating-linear-gradient(135deg, #fff 0 5px, var(--band) 5px 10px); color: var(--ink); }
.evaluate-lvseg button[disabled] { cursor: default; }
.evaluate-amb-body { margin: 8px 0 0 64px; display: flex; flex-direction: column; gap: 6px; }
.evaluate-amb-text { color: var(--ink-2); }
.evaluate-amb-missing { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.evaluate-req { font-size: var(--fs-xs); font-weight: var(--fw-strong); padding: 1px 8px; border-radius: 999px; background: var(--salmon-soft); color: var(--salmon-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.evaluate-amb-warn { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); }
.evaluate-amb-warn .small { flex: 1; }

/* ---------- (5) commitment ---------- */
.evaluate-commit { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; margin-bottom: 14px; }
@media (min-width: 900px) { .evaluate-commit { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.evaluate-sliders { display: flex; flex-direction: column; gap: 16px; }
.evaluate-slider { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--band); }
.evaluate-slider .range { height: 28px; margin: 4px 0 0; }
.evaluate-slider-head { display: flex; flex-direction: column; gap: 0; }
.evaluate-slider-v { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.evaluate-slider.is-unset .evaluate-slider-v { color: var(--muted); }
.evaluate-slider-def { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; color: var(--amber-ink); vertical-align: middle; }
.evaluate-slider.is-unset .range { opacity: .7; }
.evaluate-scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-strong); margin-top: -4px; }
/* The HSO reference plan as a marker on the slider track (the thumb is about 16 px wide). */
.evaluate-range-wrap { position: relative; }
.evaluate-ref { position: absolute; top: 5px; left: calc(8px + (100% - 16px) * var(--p)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
/* Near either end of the scale the label hangs inward, so it never leaves the card. */
.evaluate-ref.is-start { transform: translateX(-1.5px); align-items: flex-start; }
.evaluate-ref.is-end { transform: translateX(calc(-100% + 1.5px)); align-items: flex-end; }
.evaluate-ref i { width: 3px; height: 18px; border-radius: 2px; background: var(--navy); opacity: .75; }
.evaluate-ref span { margin-top: 1px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--navy); white-space: nowrap; background: var(--band); padding: 0 4px; border-radius: 4px; line-height: 1.4; }
.evaluate-slider:has(.evaluate-ref) .evaluate-scale { margin-top: 2px; }
.evaluate-refnote { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink); padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--border); }
.evaluate-refnote svg { flex: none; margin-top: 1px; color: var(--navy); }
.evaluate-grant { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.evaluate-grant-k { color: var(--on-dark-2); }
.evaluate-grant-v { font-size: var(--fs-4xl); font-weight: var(--fw-heavy); line-height: 1.05; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.evaluate-grant-sub { color: var(--on-dark-2); }
.evaluate-grant-lines { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.evaluate-grant-lines div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.evaluate-grant-lines b { color: #fff; font-variant-numeric: tabular-nums; }
.evaluate-grant-note { color: var(--on-dark-2); line-height: 1.45; }
.evaluate-grant-cap { color: #FFD68A; display: flex; gap: 6px; align-items: flex-start; }
.evaluate-grant-cap svg { flex: none; margin-top: 2px; }
.evaluate-saydo svg { color: var(--amber-ink); flex: none; }

/* ---------- charter ---------- */
.evaluate-charter { scroll-margin-top: 80px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); border-top: 6px solid var(--navy); }
.evaluate-ch-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.evaluate-ch-head h2 { margin: 2px 0 4px; font-size: var(--fs-2xl); }
.evaluate-ch-actions { display: flex; gap: 8px; align-items: center; }
.evaluate-ch-mandate { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.evaluate-ch-mandate > div { display: flex; flex-direction: column; background: var(--band); border-radius: 12px; padding: 12px 14px; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-strong); }
.evaluate-ch-def { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); letter-spacing: 0; }
.evaluate-ch-big { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.evaluate-ch-grid { display: grid; gap: 18px 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .evaluate-ch-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.evaluate-ch-wide { grid-column: 1 / -1; }
.evaluate-ch-grid h4 { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.evaluate-ch-list { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.evaluate-ch-list li + li { margin-top: 4px; }
.evaluate-ch-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px dotted var(--hairline); }
.evaluate-ch-row b { color: var(--ink); text-align: right; }
.evaluate-ch-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.evaluate-ch-table th { text-align: left; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hairline); }
.evaluate-ch-table td { padding: 5px 8px 5px 0; border-bottom: 1px dotted var(--hairline); color: var(--ink); }
.evaluate-ch-sign { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
.evaluate-ch-line { height: 34px; border-bottom: 1.5px solid var(--ink); margin-bottom: 6px; }
.evaluate-ch-foot { margin-top: 18px; }

/* ---------- side summary ---------- */
.evaluate-sum { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.evaluate-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.evaluate-check { width: 100%; display: flex; gap: 10px; align-items: center; background: none; border: 0; border-radius: 10px; padding: 7px 8px; cursor: pointer; text-align: left; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink); }
.evaluate-check:hover { background: var(--band); }
.evaluate-check-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--band-2); color: var(--ink); flex: none; }
.evaluate-check.is-done .evaluate-check-n { background: var(--teal-ink); color: #fff; }
.evaluate-check-v { color: var(--muted); font-weight: var(--fw-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.evaluate-check.is-done .evaluate-check-v { color: var(--teal-deep); }
.evaluate-sum-budget { background: var(--band); border-radius: 12px; padding: 10px 12px; }
.evaluate-sum-v { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.evaluate-lockhint { text-align: center; margin-top: -4px; }
.evaluate-lockedbox { display: flex; gap: 10px; align-items: flex-start; background: var(--teal-soft); border-radius: 12px; padding: 10px 12px; color: var(--teal-deep); }
.evaluate-lockedbox svg { flex: none; margin-top: 2px; }
.evaluate-tips { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.evaluate-tips .kicker { display: inline-flex; gap: 6px; align-items: center; color: var(--teal-deep); }

/* ---------- print: the charter only ---------- */
/* The printed charter goes to the board: A4 with 14 mm margins and a header with the HSO mark, the game and the event. */
.evaluate-ch-print { display: none; }
@page charter { size: A4; margin: 14mm; }
@media print {
  .evaluate-page { page: charter; }
  .evaluate-page > :not(.evaluate-layout), .evaluate-main > :not(.evaluate-charter), .evaluate-side { display: none !important; }
  .evaluate-layout { display: block; }
  .evaluate-charter { box-shadow: none; border: 0; padding: 0; }
  .evaluate-ch-print { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 3px solid var(--navy); break-after: avoid; }
  .evaluate-ch-logo { height: 30px; width: auto; }
  .evaluate-ch-wordmark { font-weight: var(--fw-heavy); font-size: var(--fs-lg); letter-spacing: .06em; color: #fff; background: var(--navy); padding: 2px 9px; border-radius: 4px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .evaluate-ch-game { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--ink); padding-left: 12px; border-left: 1px solid var(--hairline); }
  .evaluate-ch-event { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
  .evaluate-ch-mandate > div { border: 1px solid var(--hairline); }
  .evaluate-ch-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px 24px; }
  .evaluate-ch-grid > div, .evaluate-ch-table tr, .evaluate-ch-sign { break-inside: avoid; }
  .evaluate-ch-sign { margin-top: 20px; }
}

/* ---------- tablets (< 1100 px): the charter summary moves above the sections ---------- */
@media (max-width: 1099px) {
  .evaluate-side { order: -1; }
  .evaluate-tips { display: none; }
  .evaluate-sum { display: grid; gap: 12px 18px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .evaluate-sum > .row-between, .evaluate-sum > .evaluate-checks { grid-column: 1; }
  .evaluate-sum > .evaluate-sum-budget, .evaluate-sum > .btn, .evaluate-sum > .evaluate-lockhint, .evaluate-sum > .evaluate-lockedbox { grid-column: 2; }
  .evaluate-sum > .evaluate-sum-budget { grid-row: 1 / 3; }
}