/* Shared chrome for the templates flow (templates/start.blade.php +
   templates/confirm.blade.php). Single source for classes that would
   otherwise duplicate between the two screens.

   Loaded from resources/views/layouts/participant.blade.php so every
   template-flow page picks it up — same place tokens.css and blocks.css
   are wired in. The .tpl-* namespace is scoped to the templates flow;
   .tpl-card from templates/index.blade.php (the gallery card) is
   intentionally not touched here — it's a separate visual concept and
   stays inline in that file.

   ── No-icons rule (template flow buttons) ───────────────────────────
   Buttons across the entire template flow (templates/start, confirm,
   start-or-save, and the participant journey: welcome / compare /
   question / pre-results / results / closed / not-ready) MUST NOT
   contain arrows, chevrons, glyphs, or any other icon. Button labels
   are plain text only — sourced from lang/en/ui.php. Do not introduce
   '→', '←', '→', '←', or icon spans into any .tpl-*-btn,
   .tpl-continue, .tpl-confirm-btn, .tpl-startsave-btn, .ss-cta-*, or
   any participant-flow back / continue / cta button. Apply at the
   markup layer (no icon nodes); never in CSS via ::before / ::after.
*/

/* ── White-canvas form card ────────────────────────────────────────
   The single canvas treatment shared across:
   - Each form-group wrapper on start.blade.php (session title, issue,
     instructions, items, per-section blocks).
   - .tpl-criterion + .tpl-summary on confirm.blade.php (compose with
     this class so the chrome lives in one place; their own rules keep
     only layout-specific overrides like margin and child styles).

   Reference values: same #fff bg, hairline border at rgba(26,22,18,0.12),
   18px 22px padding that .tpl-criterion already used.
*/
.tpl-form-card{
    background:#fff;
    border:1px solid rgba(26,22,18,0.12);
    border-radius:6px;
    padding:18px 22px;
    margin-bottom:14px;
}

/* ── .tpl-issue — unified input/textarea typography ─────────────────
   Single source of truth for the typography on every text field in
   the templates flow: facilitator name + email, session title, group /
   team name, overall question / issue, and the items-to-rank rows
   (which compose .tpl-issue with .tpl-item-input). No per-field font
   or colour overrides — per-context layout (full-width underline vs
   item-row flex) lives on the contextual class instead.
*/
.tpl-issue{
    font-family:'Abel',sans-serif;
    font-size:18px;
    color:#1A1612;
}
.tpl-issue::placeholder{
    color:var(--color-text-tertiary,#8C8078);
}

/* ── Section heading ────────────────────────────────────────────────
   Large block-level label rendered above .tpl-form-card containers.
   Used on templates/start.blade.php (Session Set Up, Ranking Set Up)
   and templates/confirm.blade.php (Your session). Bebas, tracked
   uppercase — kept here in the shared stylesheet so both screens
   render the same chrome without duplicating the definition.

   Size sits between the page h1 (clamp 36-52px) and .field-label (16px):
   clearly subordinate to the page title, visibly larger than form-field
   labels. confirm.blade.php pushes its own inline `.tpl-section-heading`
   override (18px) via @push('styles'), so this rule applies to start
   only — confirm keeps its tighter sizing.
*/
.tpl-section-heading{
    font-family:'Bebas Neue',sans-serif;
    font-size:40px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:#1A1612;
    line-height:1;
    text-align:center;
    margin-bottom:14px;
}

/* ── Card-group label (Concept B) ──────────────────────────────────
   Muted Abel uppercase sub-header rendered OUTSIDE the white cards
   on templates/start.blade.php — "Items To Rank" above the items
   card, "Criteria" / "Sections" above the per-criterion / per-section
   card stack. Visually subordinate to the page-level
   .tpl-section-heading above. Sits flush-left with the cards via the
   same 10px side margin pattern used by .tpl-issue inputs.
*/
.tpl-section-label{
    font-family:'Abel',sans-serif;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--color-text-tertiary,#8C8078);
    margin:18px 10px 10px;
}

/* ── Mode segmented control ─────────────────────────────────────────
   Two-button segmented control rendered between the "Session Set Up"
   heading and the Block 1 card on templates/start.blade.php. Sits
   centred with a warm-grey track (#e8e3da — same tone used for the
   .sc-toggle-pill and results bar tracks). The active segment lifts
   on a white pill with var(--success) text and a soft shadow; the
   inactive segment reads in muted tertiary grey. Typography (Bebas
   Neue, 16px, 0.08em letter-spacing, uppercase) is preserved from
   the previous flat-button design. The existing click handler in
   start.blade.php's IIFE (modeBtns.forEach → toggle .active) works
   unchanged — only the visual chrome differs. */
.tpl-mode-seg{
    display:flex;
    background:#e8e3da;
    border-radius:8px;
    padding:3px;
    gap:3px;
    width:fit-content;
    margin:0 auto 20px;
}
.tpl-mode-btn{
    font-family:'Bebas Neue',sans-serif;
    font-size:16px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--color-text-tertiary,#8C8078);
    background:transparent;
    border:none;
    padding:0 1.5rem;
    height:38px;
    cursor:pointer;
    border-radius:6px;
    transition:background 0.15s,color 0.15s,box-shadow 0.15s;
}
.tpl-mode-btn.active{
    background:#fff;
    color:var(--color-text);
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
}

/* ── Pill toggle ────────────────────────────────────────────────────
   The label itself is an invisible flex container — no border, no
   background, no padding. Only the input renders as an iOS-style
   sliding switch (track + thumb). Typography on the label text
   matches .sc-toggle on the results page so toggles read identically
   across surfaces. The --small modifier survives in markup for
   back-compat but is now a no-op. */
.tpl-pill-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Abel',sans-serif;
    font-size:13px;
    color:#1a1a1a;
    cursor:pointer;
    user-select:none;
}
.tpl-pill-toggle input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:38px;
    height:22px;
    border-radius:11px;
    background:#e8e3da;
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    transition:background 0.15s;
}
.tpl-pill-toggle input[type="checkbox"]:checked{background:var(--success);}
.tpl-pill-toggle input[type="checkbox"]::before{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
    transition:transform 0.15s;
}
.tpl-pill-toggle input[type="checkbox"]:checked::before{transform:translateX(16px);}

/* ── Inline toggle row ──────────────────────────────────────────────
   Holds feature pill-toggles directly below their corresponding field
   (overall question, items list, comparison prompt). The Project Tag
   toggle on the setup page lives in the Session Set Up card's
   .tpl-block-header-row instead, right-aligned via
   .tpl-block-header-toggles. */
.tpl-inline-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}

/* Smaller switch dimensions for the inline toggle row only. Scoped to
   .tpl-inline-toggles .tpl-pill-toggle so the Advanced Settings master
   toggle (.tpl-block-header-toggles) and the per-row toggles inside
   the Advanced Settings panel (.tpl-adv-row) keep the default 38×22
   size. Label text size on .tpl-pill-toggle is intentionally untouched.
   The base ::before rule contributes top:3px / left:3px (inherited)
   so the 3px padding around the smaller knob carries over; only
   width/height and the checked translateX change here.

   Geometry: 28×16 track, 10×10 knob, 3px padding all sides;
   knob travel = 28 − 10 − 3 − 3 = 12px. */
.tpl-inline-toggles .tpl-pill-toggle input[type="checkbox"]{
    width:28px;
    height:16px;
    border-radius:8px;
}
.tpl-inline-toggles .tpl-pill-toggle input[type="checkbox"]::before{
    width:10px;
    height:10px;
}
.tpl-inline-toggles .tpl-pill-toggle input[type="checkbox"]:checked::before{
    transform:translateX(12px);
}

/* ── Section divider ────────────────────────────────────────────────
   Thin horizontal rule between consecutive criteria/section blocks
   in templates/start.blade.php. Rendered by the foreach for every
   section except the first ($loop->first guard). */
.tpl-section-divider{width:100%;height:1px;background:rgba(0,0,0,0.08);margin:16px 0;}

/* ── Numbered-row prefix ─────────────────────────────────────────────
   Used on items lists across the templates flow:
   - templates/start.blade.php — JS-rendered <span class="tpl-item-num">
     beside each item input row (01, 02, 03…).
   - templates/confirm.blade.php — same numbering on the read-only
     items in the summary card and inside the SWOT per-section blocks.

   Single source so a font/size tweak propagates everywhere. */
.tpl-item-num{
    flex-shrink:0;
    width:2rem;
    text-align:right;
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    color:rgba(26,22,18,0.25);
}
/* Active state — set on the numeral when the sibling .tpl-item-input
   has a value. Toggled from the items JS in templates/start.blade.php
   (single-list bind() and per-section bindPerSection()) so the row's
   number reads "filled" alongside its input text. */
.tpl-item-num--active{color:#1A1612;}

/* ── Codes row (Participant / QR / Facilitator) ────────────────────
   Shared across session-manage.blade.php Section 1 and the
   results/scorecard codes panel. Markup + values mirror the
   production block-renderer's codes_three_col output (extracted
   from assessments.layouts.facilitator_success). Per-side palette
   via .tpl-code-card--participant / --qr / --facilitator variants
   so the markup is identical across surfaces and only the variant
   class changes which palette applies.

   Card sizing: flex:1 1 0 with min-width:0 + overflow:hidden so a
   long code value doesn't blow out the column. On screens narrower
   than 640px the row stacks. Code value font-size + letter-spacing
   match the block-renderer's hardcoded values (1.75rem / 0.2em);
   QR canvas is 80×80 to match the block-renderer's QR size.
*/
.tpl-codes-row{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:3rem;container-type:inline-size;}
@media (max-width: 640px){
    .tpl-codes-row{flex-wrap:wrap;}
    .tpl-codes-row > .tpl-code-card{flex:1 1 100%;max-width:none;}
}

/* Card: square aspect ratio (equal width and height) — one card
   style across surfaces, applied whenever the codes row renders.
   flex:1 1 0 grows toward the max-width cap; aspect-ratio:1 forces
   height to match width so the card stays square at the smaller size. */
.tpl-code-card{
    flex:1 1 0;
    max-width:240px;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid #e5e3de;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    text-align:center;
    aspect-ratio:1 / 1;
    /* Container-query sizing — .tpl-codes-row above is the query
       container; cqw on the card resolves against the row's inline
       size, which tracks the cards' max-width. Every interior size
       below is em-relative to this single font-size, so increasing
       .tpl-code-card max-width (e.g. the scorecard scope's 360px)
       scales the entire card content uniformly. clamp() bounds keep
       text readable on tiny rows and prevents runaway growth on
       very wide ones. */
    font-size:clamp(10px, 2.3cqw, 22px);
    padding:1.67em;
}
/* Grid layout for the wrap area:
   - Row 1 (auto): heading — same height across cards
   - Row 2 (auto): body — same height across cards
   - Row 3 (1fr): payload (code / QR) centred vertically in the
     remaining space
   Since the cards are equal-height (aspect-ratio:1 + flex:1 in a
   row), row 3 ends up the same height in every card, so the
   payload's vertical centre lines up across cards regardless of
   whether the payload is a short code value or a tall QR canvas. */
.tpl-code-card-body-wrap{
    flex:1;
    display:grid;
    grid-template-rows: auto auto 1fr;
    justify-items:center;
}

.tpl-code-card-heading{
    font-family:'Bebas Neue',sans-serif;
    font-size:2em;
    text-align:center;
    font-weight:normal;
    margin:0;
}
.tpl-code-card-body{
    font-family:'Abel',sans-serif;
    font-size:1.17em;
    text-align:center;
    font-weight:normal;
    margin:0.5em 0 0;
    white-space:pre-line;
}
.tpl-code-card-code{
    font-family:'Bebas Neue',sans-serif;
    font-size:2.67em;
    letter-spacing:0.08em;
    margin:0;
    line-height:1;
    white-space:nowrap;
    align-self:center;
}
/* qrcodejs loads via a CDN script and injects its canvas/img async.
   Reserve the QR's exact footprint at initial paint so the card doesn't
   visibly reflow when the script resolves — without this the empty
   container collapses to 0 height, body-wrap absorbs the slack, then
   the 96×96 canvas appears and overflows over the button. width:100%
   keeps the white plate flush with the card padding; the canvas/img is
   centred inside via flex. */
.tpl-code-card-qr{
    background:#fff;
    width:100%;
    height:6em;
    margin:0;
    box-sizing:border-box;
    overflow:hidden;
    align-self:center;
    display:flex;
    justify-content:center;
    align-items:center;
}
.tpl-code-card-qr canvas,
.tpl-code-card-qr img{
    max-width:6em;
    max-height:6em;
    width:auto;
    height:auto;
}
/* margin-top:auto absorbs any extra space inside the card so the
   button always pins to the bottom, even when the row-3 grid item
   in body-wrap (code vs QR) has a different intrinsic height. */
.tpl-code-card-btn{
    font-family:'Abel',sans-serif;
    font-size:1.25em;
    color:#fff;
    border:none;
    cursor:pointer;
    width:100%;
    padding:0.83em 1.33em;
    margin-top:auto;
}

/* Per-side palette variants. The block-renderer assigned palette
   names (dark / blue / warm) per side; here those names are baked
   into semantic class names so the markup says what the card IS
   rather than which palette it uses. */
.tpl-code-card--participant{background:#1a1a1a;}
.tpl-code-card--participant .tpl-code-card-heading,
.tpl-code-card--participant .tpl-code-card-code{color:var(--success);}
.tpl-code-card--participant .tpl-code-card-body{color:#ffffff;}
.tpl-code-card--participant .tpl-code-card-btn{background:var(--success);}

.tpl-code-card--qr{background:#fdf9f7;}
.tpl-code-card--qr .tpl-code-card-heading{color:#2563eb;}
.tpl-code-card--qr .tpl-code-card-body{color:#1a1a1a;}
.tpl-code-card--qr .tpl-code-card-btn{background:#2563eb;}

.tpl-code-card--facilitator{background:#fdf9f7;}
.tpl-code-card--facilitator .tpl-code-card-heading,
.tpl-code-card--facilitator .tpl-code-card-code{color:#c8401a;}
.tpl-code-card--facilitator .tpl-code-card-body{color:#1a1a1a;}
.tpl-code-card--facilitator .tpl-code-card-btn{background:#c8401a;}

/* ── Operator Edit Mode banner ───────────────────────────────────────
   Rendered at the very top of templates/start.blade.php when an
   operator opens a template via /operator/templates/{slug}/edit.
   Single source — no inline overrides on the element. Red border +
   red text, no background fill, full canvas width. */
.tpl-operator-banner{
    border:1px solid var(--accent);
    color:var(--accent);
    background:transparent;
    font-family:'Bebas Neue',sans-serif;
    font-size:14px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    text-align:center;
    padding:10px 24px;
    width:fit-content;
    max-width:calc(100% - 48px);
    margin:24px auto 0;
}

/* ── Session-manage section cards ────────────────────────────────────
   Read-only display of settings.sections inside the manage view. Each
   compare/image_compare section renders as a .tpl-sec-card; its
   per-criterion question(s) and any session-level questions render
   inside the same card using the shared sub-label / value classes.
   Scoped to .tpl-manage so nothing leaks into other views; .tpl-sec-*
   namespace mirrors the .tpl- convention used elsewhere in this file.

   Single source of truth — Blade markup and the renderReadonly() JS
   string-builder both apply these classes only; no inline font-size,
   font-family, or color should appear on these elements. */
.tpl-manage .tpl-sec-card{
    background:#f8f7f4;
    border:1px solid #e5e3de;
    padding:0.875rem 1rem;
    margin-bottom:0.625rem;
}
.tpl-manage .tpl-sec-number{
    font-family:'Bebas Neue',sans-serif;
    font-size:0.8rem;
    letter-spacing:0.1em;
    color:#c8401a;
    margin-bottom:0.375rem;
}
.tpl-manage .tpl-sec-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.25rem;
    letter-spacing:0.02em;
    color:#1a1a1a;
    margin-bottom:0.25rem;
}
.tpl-manage .tpl-sec-sublabel{
    font-family:'Bebas Neue',sans-serif;
    font-size:0.9375rem;
    letter-spacing:0.12em;
    color:#1a1a1a;
    text-transform:uppercase;
    margin-top:0.625rem;
    margin-bottom:0.25rem;
}
.tpl-manage .tpl-sec-value{
    font-family:'Abel',sans-serif;
    font-size:1.0625rem;
    color:#1a1a1a;
    line-height:1.4;
    margin-bottom:0.5rem;
}
.tpl-manage .tpl-sec-items{
    margin:0.5rem 0 0;
    padding-left:1.25rem;
    font-family:'Abel',sans-serif;
    font-size:1.0625rem;
    color:#1a1a1a;
}
.tpl-manage .tpl-sec-items > li{padding:0.15rem 0;}
.tpl-manage .tpl-sec-thumbs{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-top:0.5rem;
}
.tpl-manage .tpl-sec-thumb{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.25rem;
    width:96px;
}
.tpl-manage .tpl-sec-thumb-img{
    width:96px;
    height:72px;
    border:1px solid rgba(26,22,18,0.08);
}
.tpl-manage .tpl-sec-thumb-caption{
    font-family:'Abel',sans-serif;
    font-size:0.75rem;
    color:#6b7280;
    line-height:1.3;
    word-break:break-word;
}
/* Trailing group of session-level questions. .tpl-sec-q-row uses a
   :last-child rule to drop the divider on the last row, which replaces
   the previous {{ !$loop->last ? ... }} ternary in markup. */
.tpl-manage .tpl-sec-q-row{
    padding:0.375rem 0;
    font-family:'Abel',sans-serif;
    font-size:1.0625rem;
    color:#1a1a1a;
    line-height:1.4;
    border-bottom:1px solid rgba(26,22,18,0.06);
}
.tpl-manage .tpl-sec-q-row:last-child{border-bottom:none;}

/* Code cards on the session-manage surface. Bypass the shared rule's
   container-query font sizing — on session-manage the row spans the
   full page width, which makes 2.3cqw resolve to oversized values
   relative to the card's 240px cap. Fix the font-size in pixels so
   every em-relative interior measurement (heading, body, code, QR
   plate, button) scales from a predictable base regardless of row
   or card width. flex-shrink:0 on the button protects it from being
   crushed by overflowing content inside the aspect-ratio square.
   Scorecard rules are untouched — .sc-scorecard .sc-codes-panel
   keeps its own larger sizing inside the scorecard scope. */
.tpl-manage .tpl-codes-row {
    justify-content: center;
}
.tpl-manage .tpl-code-card {
    font-size: 11px;
}
.tpl-manage .tpl-code-card-btn {
    flex-shrink: 0;
}

/* ── Block header row (start.blade.php) ──────────────────────────────
   Shared flex layout for the six section/block headers on the setup
   page. Today only the Advanced Settings master toggle still uses
   this wrapper pattern (label on the left, toggle on the right via
   margin-left:auto on the inner .tpl-block-header-toggles); every
   other field's bare label sits as a direct child of .tpl-block-row
   and inherits its spacing from the rule block below. The nested
   .field-label rule clears the wrapper's label margin so a single-
   row header doesn't stretch the row's height. */
.tpl-block-header-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.tpl-block-header-row .field-label{margin:0;}
.tpl-block-header-toggles{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Label-to-input gap for the five .tpl-issue fields on the setup
   page — facilitator name + email, session title, group / team name,
   overall question / issue. Single source of truth: any .field-label
   that is immediately followed by a non-items .tpl-issue input. Works
   across every wrapper (.tpl-block-row, the .tpl-group-three-col
   columns, .tpl-group-only) without per-field modifier classes. The
   sibling `.tpl-block-row > .field-label` rule retained below covers
   the Items-to-Rank section heading, which sits inside a
   .tpl-block-row but is followed by .tpl-inline-toggles / .tpl-items-
   list rather than a .tpl-issue input — disjoint match, same 10px
   value, no conflict. The mobile @media block tightens uniformly. */
.tpl-start .tpl-form-card .field-label:has(+ .tpl-issue:not(.tpl-item-input)){margin-bottom:10px;}
.tpl-start .tpl-form-card .tpl-block-row > .field-label{margin-bottom:10px;}

/* ── Mobile reflow: toggles below the input ─────────────────────────
   On mobile (≤768px) each .tpl-block-row wrapper becomes a flex-column
   container, the surviving Advanced Settings .tpl-block-header-row
   goes display:contents so its label + toggle join the wrapper's flex
   flow as siblings of the input/panel below, and order:1 on
   .tpl-block-header-toggles pushes the toggle to the bottom. Result:
   label → input(s) → toggles, stacked vertically. Direct-child labels
   in the bare-label rows (session title, issue, etc.) tighten to 6px
   bottom margin matching the mobile stack spacing. */
.tpl-block-row{display:block;}
@media (max-width: 768px){
    .tpl-block-row{display:flex;flex-direction:column;}
    .tpl-block-row > .tpl-block-header-row{display:contents;}
    .tpl-block-row > .tpl-block-header-row > .field-label{margin:0 0 6px;}
    .tpl-block-row > .tpl-block-header-row > .tpl-block-header-toggles{
        order:1;margin-left:0;margin-top:8px;flex-wrap:wrap;
    }
    .tpl-start .tpl-form-card .field-label:has(+ .tpl-issue:not(.tpl-item-input)){margin-bottom:6px;}
    .tpl-start .tpl-form-card .tpl-block-row > .field-label{margin:0 0 6px;}
}

/* ── Desktop: Session Set Up Group-mode 3-column row (≥768px) ───────
   Group-mode only. The Session Set Up card's children flow vertically
   in natural DOM order across both modes: Session Title row → Project
   picker chrome (auth) → (Individual Issue slot OR Group Issue inline
   section, gated by mode) → Group 3-col row (group only). Session
   Title and the Issue field both centre at 70% width in both modes
   via inline-style rules in templates/start.blade.php. This block
   defines just the desktop layout for the group-only 3-col row.

   #tpl-group-three-col holds three direct children — the Group Name
   wrap (with its Team picker chrome nested inside it as flow content),
   the Facilitator Name wrap, and the Facilitator Email wrap. Below
   the 768px breakpoint no rule applies and the three children fall
   back to natural block flow, stacking vertically.

   .tpl-block-row inside the Group Name wrap is the existing wrapper
   that pairs label + input + inline toggle; on desktop it doesn't
   need any override here — it already sits inside its grid cell as
   a normal block. */
@media (min-width: 768px){
    .tpl-group-three-col{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        column-gap:24px;
        align-items:start;
    }
}

/* ── Advanced Settings panel chrome ──────────────────────────────────
   Used by start.blade.php (Advanced Settings card) and session-
   manage.blade.php (Section 5: Scoring & Behaviour). Previously
   page-scoped inline in each Blade <style> block — consolidated here
   so both surfaces share one source. Form-control rule inside .tpl-
   adv-sub forces width:100% by default; the .tpl-adv-select opt-out
   class restores auto-width when the select must sit beside its label
   inside a .tpl-adv-sub-row flex layout. */
.tpl-advanced{--tpl-color-ok:var(--success);--tpl-color-error:#C03525;background:#fff;border:1px solid rgba(26,22,18,0.12);padding:0;display:none;}
.tpl-advanced.shown{display:block;}
.tpl-adv-row{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(26,22,18,0.08);gap:14px;}
.tpl-adv-row:last-of-type{border-bottom:none;}
.tpl-adv-row-locked{opacity:0.45;}
.tpl-adv-row-locked .tpl-pill-toggle{cursor:not-allowed;}
.tpl-adv-label{font-family:'Abel',sans-serif;font-size:15px;color:#1A1612;}
.tpl-adv-sub{padding:0 22px 18px;display:none;}
.tpl-adv-sub.shown{display:block;}
.tpl-adv-sub textarea,
.tpl-adv-sub input[type="text"],
.tpl-adv-sub input[type="email"],
.tpl-adv-sub input[type="datetime-local"],
.tpl-adv-sub select{width:100%;box-sizing:border-box;border:1px solid rgba(26,22,18,0.12);padding:10px 12px;font-family:'Abel',sans-serif;font-size:14px;color:#1A1612;background:#fafafa;outline:none;}
.tpl-adv-sub textarea{resize:vertical;min-height:80px;}
.tpl-adv-sub-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0 8px 22px;gap:14px;}
.tpl-adv-add{margin-top:8px;background:none;border:2px dashed rgba(26,22,18,0.16);color:#8C8078;font-family:'Abel',sans-serif;font-size:13px;letter-spacing:0.06em;padding:9px 14px;cursor:pointer;}
.tpl-adv-hint{font-family:'Abel',sans-serif;font-size:13px;color:#8C8078;line-height:1.5;margin:6px 0 8px;}
.tpl-adv-select{width:auto;background:#fff;}

/* ── Per-item image fields (start.blade.php items editor) ──────────
   Rendered beneath each .tpl-item-row when the + Images toggle is on
   for the containing block (flat OPTIONS TO RANK list, or a single
   section's items in items_per_section templates). The .tpl-item-
   image-row is indented to align under the .tpl-item-input above it,
   leaving room for the number badge.

   .tpl-item-imgurl is a monospaced URL input (matches the visual
   weight of the session-manage .sec-item-imgurl pattern); .tpl-item-
   upload is the Bebas-on-dark CTA; .tpl-item-thumb is the 48px square
   preview whose background-image is set on each input event from JS. */
.tpl-item-image-row{display:flex;align-items:flex-start;gap:0.5rem;margin:0.35rem 0 0.4rem 38px;}
.tpl-item-thumb{flex-shrink:0;width:48px;height:48px;background:#f3f4f6;border:1px solid rgba(26,22,18,0.08);background-size:cover;background-position:center;background-repeat:no-repeat;}
.tpl-item-image-fields{display:flex;flex-direction:column;gap:0.4rem;flex:1;min-width:0;}
.tpl-item-imgurl{width:100%;box-sizing:border-box;border:1px solid rgba(26,22,18,0.12);padding:0.35rem 0.5rem;font-family:'DM Mono',monospace;font-size:0.8rem;color:#1A1612;background:#fafafa;outline:none;}
.tpl-item-upload{align-self:flex-start;background:#1A1612;color:#fff;border:none;font-family:'Bebas Neue',sans-serif;font-size:0.75rem;letter-spacing:0.1em;padding:0.45rem 0.875rem;cursor:pointer;}
.tpl-item-upload:hover{opacity:0.9;}

/* ── Scorecard chrome ────────────────────────────────────────────────
   Shared chrome for every templated results view that renders through
   templates/results/partials/_results-chrome.blade.php. Decision-matrix
   variants (ICE, MCA) and multi-section variants (SWOT today) share
   these rules. The .sc-* namespace covers chrome-level surfaces
   (header, segments, advanced grid, methods table, pairwise list,
   codes panel); per-variant slot files keep their own prefixes for
   markup that is unique to that variant (.dm-table / .dm-winner-* for
   the decision-matrix slot, .ms-* for the multi-section slot). */
.sc-scorecard{font-family:'DM Sans',sans-serif;color:#1A1612;}

/* Collapsible codes panel — paired with the Live Session toggle in
   the unified controls row. The toggle is now an .sc-toggle inside
   .sc-toggles (no separate top row); only the panel framing remains
   scorecard-local. */
.sc-scorecard .sc-codes-panel{background:#fff;border:1px solid rgba(26,22,18,0.12);padding:18px 22px;margin:0 0 28px;display:none;}
.sc-scorecard .sc-codes-panel.shown{display:block;}

/* Codes panel — scorecard-scoped overrides. Two things differ from
   the unscoped (session-manage) rendering:
     1. Panel framing — narrower, chromeless container so cards sit
        directly on the page background.
     2. Card size — max-width raised so the squares are larger on the
        scorecard surface.
   No content-size overrides: the unscoped .tpl-code-card rule above
   uses container-query sizing (font-size: clamp(...,cqw,...) +
   em-based interior), so increasing max-width here scales every
   interior dimension automatically. Any future card-size change is
   one line here; the content follows. */
.sc-scorecard .sc-codes-panel{max-width:800px;margin-left:auto;margin-right:auto;background:transparent;border:0;padding:0;}
.sc-scorecard .sc-codes-panel .tpl-code-card{max-width:360px;}

/* Page header. The title carries .block-heading only — one shared
   class, no per-template overrides; same element + class + size as
   the welcome / pre-results intro heading (var(--text-2xl) Bebas).
   The eyebrow above it is the canonical .block-kicker (red Bebas)
   reused from the participant intro screens. Bottom margin is tight
   (8px) so the Respondents credit block that now sits directly under
   the header reads as part of the same heading group rather than a
   separate section. .sc-kicker and .sc-group rules are kept as dead
   code for now — both render sites were removed (sections B + K),
   final cleanup will drop them. */
.sc-scorecard .sc-header{text-align:center;margin-top:8px;margin-bottom:8px;}
.sc-scorecard .sc-count{font-family:'Abel',sans-serif;font-size:13px;color:#8C8078;}

/* Controls bar — right-aligned single row above the primary table.
   Carries the slot-pushed Items stepper and the chrome's Segments
   toggle. View-state toggles (Breakdown / Grid / Questions /
   Comparisons) live in the per-slice .sc-below-toggles row beneath
   the primary content, not here. */
.sc-scorecard .sc-controls-bar{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:8px;margin-bottom:12px;}
.sc-scorecard .sc-toggles{display:flex;align-items:center;gap:12px;}

/* Below-table toggle row — right-aligned, sits beneath the slot's
   primary content (DM main table / MS stacked sections). Holds the
   variant-specific layout toggle (Breakdown for DM, Grid for MS)
   first, then Questions and Detailed Comparisons. Reveals the
   matching [data-region] inside the same .sc-slice. */
.sc-scorecard .sc-below-toggles{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:20px 0 8px;}
.sc-scorecard .sc-toggle-divider{display:inline-block;width:1px;height:18px;background:rgba(26,22,18,0.18);}
.sc-scorecard .sc-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:'Abel',sans-serif;font-size:13px;color:#1a1a1a;}
.sc-scorecard .sc-toggle input{position:absolute;opacity:0;pointer-events:none;}
.sc-scorecard .sc-toggle-pill{position:relative;display:inline-block;width:38px;height:22px;background:#e8e3da;border-radius:11px;transition:background 0.15s;}
.sc-scorecard .sc-toggle-pill::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,0.15);transition:left 0.15s;}
.sc-scorecard .sc-toggle input:checked + .sc-toggle-pill{background:var(--success);}
.sc-scorecard .sc-toggle input:checked + .sc-toggle-pill::after{left:19px;}

/* Segment pills */
.sc-scorecard .sc-pills-wrap{padding:12px 0 0;border-bottom:1px solid rgba(26,22,18,0.08);margin-bottom:18px;}
.sc-scorecard .sc-pill-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 0 12px;}
.sc-scorecard .sc-pill-label{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:0.14em;color:#8C8078;text-transform:uppercase;}
.sc-scorecard .sc-pills{display:flex;flex-wrap:wrap;gap:6px;}
.sc-scorecard .sc-pill{font-family:'Abel',sans-serif;font-size:12px;letter-spacing:0.04em;color:#1A1612;background:#f4eee4;border:1px solid rgba(26,22,18,0.10);padding:6px 12px;border-radius:14px;cursor:pointer;transition:background 0.12s,color 0.12s,border-color 0.12s;}
.sc-scorecard .sc-pill:hover{background:#ece4d4;}
.sc-scorecard .sc-pill.is-active{background:#1A1612;color:#fff;border-color:#1A1612;}

/* Bar component — used by both the ICE results-table cells and the
   chrome's criterion-breakdown grid. */
.sc-scorecard .sc-bar{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:90px;}
.sc-scorecard .sc-bar-track{width:100%;height:var(--bar-height);background:#e8e3da;border-radius:2px;overflow:hidden;}
.sc-scorecard .sc-bar-fill{height:100%;border-radius:1px;}
.sc-scorecard .sc-bar-pct{font-family:var(--font-heading);font-size:18px;color:var(--color-text);font-variant-numeric:tabular-nums;}
.sc-scorecard .sc-bar.is-lg .sc-bar-pct{font-size:22px;}

/* Record line under a results bar — single shared style. Rendered by
   resources/views/partials/results-record.blade.php and used by ICE
   table cells, the criterion-breakdown grid, and SWOT items. The
   .is-lg parent (breakdown grid) scales the type one step up; SWOT
   and any future template inherit the default. No per-template
   overrides. */
.sc-scorecard .results-record{font-family:'Abel',sans-serif;font-size:9px;color:#8C8078;letter-spacing:0.04em;}
.sc-scorecard .sc-bar.is-lg .results-record{font-size:11px;}

/* Section headings — single typography rule used for every top-level
   scorecard heading: Results, Questions, Detailed Comparisons,
   Criterion Breakdown, Additional Scoring Methods. Margin is the
   advanced-section default (28px above / 14px below); the Results
   row, the questions block, and the pairwise <summary> override to
   margin:0 because their surrounding chrome already handles vertical
   spacing. */
.sc-scorecard .sc-section-heading{margin:28px 0 14px;}
/* Per-context overrides. Results sits in a flex row with toggles to its
   right (margin:0 keeps the row tight); Questions and Detailed
   Comparisons headings anchor left rather than centred — they read as
   block-leading labels for the body that follows, not page-spanning
   section dividers like the breakdown-section headings above. */
.sc-scorecard .sc-pairwise > .sc-section-heading{margin:0;}

/* Breakdown region — wraps per-criterion cards (DM) or per-section
   cells (MS). Hidden by default; the chrome's Breakdown toggle flips
   `hidden` on every [data-region="breakdown"] in lockstep. The inner
   grid container differs (.sc-crit-grid for DM, .ms-matrix for MS)
   but the outer wrapper rule below gives both the same top margin
   so the toggle reveals a visually consistent region either way. */
.sc-scorecard .sc-breakdown{margin-top:24px;}

/* Criterion / section breakdown grid */
.sc-scorecard .sc-crit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.sc-scorecard .sc-crit-card{background:#fff;border:1px solid rgba(26,22,18,0.10);padding:0;}
.sc-scorecard .sc-crit-card-kicker{padding:18px 18px 0;margin-bottom:14px;}
.sc-scorecard .sc-crit-card-kicker.is-overall{color:var(--success);}
.sc-scorecard .sc-crit-table{width:100%;border-collapse:collapse;}
.sc-scorecard .sc-crit-table td{vertical-align:top;}
@media(max-width:640px){
    .sc-scorecard .sc-crit-grid{grid-template-columns:1fr;}
}

.sc-scorecard .sc-no-data{color:rgba(26,22,18,0.30);}

/* Pairwise comparisons (collapsed by default). The <summary> carries
   .sc-section-heading for typography; the rules below only handle
   summary-specific functional bits (cursor, list-style, +/- marker). */
.sc-scorecard .sc-pairwise{margin-top:24px;padding-top:14px;}
.sc-scorecard details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;}
.sc-scorecard details summary::-webkit-details-marker{display:none;}
.sc-scorecard details summary::marker{display:none;}
.sc-scorecard details summary::before{content:'▶';display:inline-block;color:#1A1612;}
.sc-scorecard details[open] summary::before{content:'▼';}
.sc-scorecard .sc-pairwise-body{padding-top:14px;display:flex;flex-direction:column;gap:18px;}
/* Criterion / section sub-label above each comparison group. Same
   font + colour as the section heading but a step down in size so it
   reads as subordinate — clearly a group label inside the Detailed
   Comparisons block, not a peer of the top-level section headings. */
.sc-scorecard .sc-pairwise-kicker{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.04em;color:#1a1a1a;line-height:1;margin-bottom:14px;}
.sc-scorecard .sc-pairwise-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:16px;font-family:'Abel',sans-serif;font-size:14px;padding:8px 12px;margin-bottom:4px;}
.sc-scorecard .sc-pairwise-side{display:flex;flex-direction:column;gap:4px;}
.sc-scorecard .sc-pairwise-left{align-items:flex-end;text-align:right;}
.sc-scorecard .sc-pairwise-right{align-items:flex-start;text-align:left;}
.sc-scorecard .sc-pairwise-row.is-left .sc-pairwise-left{background:#dff1d2;color:#1f5b08;padding:4px 10px;}
.sc-scorecard .sc-pairwise-row.is-left .sc-pairwise-right{background:#fbdbd2;color:#7a1c0a;padding:4px 10px;}
.sc-scorecard .sc-pairwise-row.is-right .sc-pairwise-left{background:#fbdbd2;color:#7a1c0a;padding:4px 10px;}
.sc-scorecard .sc-pairwise-row.is-right .sc-pairwise-right{background:#dff1d2;color:#1f5b08;padding:4px 10px;}
.sc-scorecard .sc-pairwise-row.is-tie .sc-pairwise-left,.sc-scorecard .sc-pairwise-row.is-tie .sc-pairwise-right{background:#f3e6c2;color:#7a5200;padding:4px 10px;}
.sc-scorecard .sc-pairwise-vs{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:0.12em;color:#8C8078;text-transform:uppercase;text-align:center;align-self:center;}
/* Per-side stats: value (Bebas 14px primary) + label (Abel 12px
   secondary) pairs separated by 12px. Stats inherit the side's text
   alignment via the parent's align-items, so the left side's stats
   flush right and the right side's stats flush left. */
.sc-scorecard .sc-pairwise-empty{font-family:'Abel',sans-serif;font-size:13px;color:#8C8078;font-style:italic;}

/* ── Scorecard — ICE slot ────────────────────────────────────────────
   Winner card, results table, footnotes. Lives inside .sc-scorecard so
   the chrome's typography/colour rules cascade through. */
.sc-scorecard .dm-winner{display:flex;align-items:stretch;background:#fff;border:1px solid rgba(26,22,18,0.10);padding:20px 24px;margin-bottom:24px;}
.sc-scorecard .dm-winner-main{flex:1;}
.sc-scorecard .dm-winner-kicker{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:0.2em;color:var(--success);text-transform:uppercase;margin-bottom:6px;}
.sc-scorecard .dm-winner-name{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:0.01em;line-height:1;color:#1A1612;margin-bottom:14px;}
.sc-scorecard .dm-winner-criteria{display:flex;gap:24px;flex-wrap:wrap;}
.sc-scorecard .dm-winner-crit-label{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-right:6px;}
.sc-scorecard .dm-winner-crit-value{font-family:'Abel',sans-serif;font-size:16px;color:#1A1612;font-variant-numeric:tabular-nums;}
.sc-scorecard .dm-winner-summary{display:flex;align-items:center;gap:0;padding-left:24px;}
.sc-scorecard .dm-winner-summary-cell{padding:0 18px;text-align:center;}
.sc-scorecard .dm-winner-summary-value{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:0.02em;color:var(--success);line-height:1;}
.sc-scorecard .dm-winner-summary-caption{font-family:'Abel',sans-serif;font-size:11px;color:#8C8078;text-transform:uppercase;letter-spacing:0.12em;margin-top:4px;}

/* Scorecard table chrome.
   DM (composite-bearing variants) renders ONE summary table inside
   .dm-table-wrap (wrap carries the border + background).
   MS renders ONE table PER section stacked inside .results-table-wrap
   (each table carries its own border + background; the wrap is just
   the [data-region="list"] container that the Grid toggle flips).
   Margin between sibling tables creates the visual gap that signals
   separate blocks. */
.sc-scorecard .dm-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(26,22,18,0.12);background:#fff;}
.sc-scorecard .results-table-wrap{width:100%;-webkit-overflow-scrolling:touch;}
.sc-scorecard .dm-table,
.sc-scorecard .results-table{width:100%;border-collapse:collapse;}
.sc-scorecard .results-table{border:1px solid rgba(26,22,18,0.12);background:#fff;margin-bottom:18px;}
.sc-scorecard .results-table:last-of-type{margin-bottom:0;}

/* Dark-band header — shared by every header-styled surface across
   the scorecard: the DM thead <th>s, the per-section <th>s in each
   stacked-list table, and the MS grid-view section heading <div>s.
   Same Bebas small-caps treatment in white on the dark band,
   regardless of element type. The grid view's heading is not a <th>,
   so the background is applied to the heading element itself; in
   tables the background sits on <thead>. */
.sc-scorecard .dm-table thead,
.sc-scorecard .results-table thead,
.sc-scorecard .ms-cell-heading{background:#1A1612;}
.sc-scorecard .dm-table th,
.sc-scorecard .results-table th{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#fff;font-weight:400;border:none;text-align:left;}
.sc-scorecard .ms-cell-heading{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#fff;font-weight:400;border:none;text-align:left;display:flex;justify-content:space-between;align-items:center;}
.sc-scorecard .dm-table th{padding:14px 12px;vertical-align:bottom;}
.sc-scorecard .results-table th,
.sc-scorecard .ms-cell-heading{padding:10px 12px;}
/* Stacked-list section header's last cell (Win Rate label) anchors
   right above the bar column below it; the first cell (section
   title + question, colspan=2) inherits the default text-align:left
   from the shared rule above. */
.sc-scorecard .results-table th:last-child{text-align:right;}

.sc-scorecard .dm-table th.dm-th-rank{width:64px;text-align:center;}
.sc-scorecard .dm-table th.dm-th-crit,.sc-scorecard .dm-table th.dm-th-summary{text-align:right;}

/* Column widths. Auto-layout: explicit widths act as preferred
   minimums; the Option column absorbs remaining width so long item
   names fit cleanly (and wrap inside the cell — the row's
   vertical-align:middle keeps bars / percentages / W/D/L / Weighted
   Win Rate / ICE Score centred relative to the wrapped name).
   Criterion columns sit at a steady width wide enough for the bar
   + W/D/L stack.

   Summary columns are sized PER COLUMN, not shared, because their
   headers differ widely in length: "WEIGHTED WIN RATE" needs ~125px
   to sit on one line; "ICE SCORE" needs only ~65px. Sharing a width
   would force ICE Score to inherit the wider WWR size, and since
   both cells right-align their content, the extra width would
   manifest as empty space on the left of the ICE value — opening a
   ~90px visual gap between the two right-aligned numeric values.
   The :last-child override sizes ICE Score to its own content so
   the two values sit close together. Column position is reliable:
   the summary pair is always the last two columns regardless of
   how many criteria the session has. Reduced horizontal padding
   tightens the inter-column gap further. */
.sc-scorecard .dm-table th.dm-th-option,
.sc-scorecard .dm-table td.results-option-name,
.sc-scorecard .results-table td.results-option-name{min-width:220px;}
.sc-scorecard .dm-table th.dm-th-crit,
.sc-scorecard .dm-table td.dm-td-crit{width:130px;}
.sc-scorecard .dm-table th.dm-th-summary,
.sc-scorecard .dm-table td.dm-td-summary{width:140px;padding-left:6px;padding-right:6px;}
.sc-scorecard .dm-table th.dm-th-summary:last-child,
.sc-scorecard .dm-table td.dm-td-summary:last-child{width:80px;}

/* Section heading — Bebas small-caps marker for the standalone
   heading above the footnote block (and reusable wherever a future
   template needs the same role). Selector is unscoped so it works
   outside .dm-table-wrap. Multi-section cell headings use the distinct
   .ms-cell-heading treatment below, not this class. */
.results-section-heading{font-family:'Bebas Neue',sans-serif;font-size:12px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;margin:0;}
/* Row dividers — shared by DM summary rows, MS stacked-list rows,
   and MS grid items. DM reserves a 4px border-left slot for the
   winner-row highlight (dm-row-top below); the other surfaces have
   no single-winner concept and skip the reservation. */
.sc-scorecard .dm-table tbody tr,
.sc-scorecard .results-table tbody tr,
.sc-scorecard .ms-items .ms-item{border-bottom:1px solid rgba(26,22,18,0.08);}
.sc-scorecard .dm-table tbody tr{border-left:4px solid transparent;}
.sc-scorecard .dm-table tbody tr.dm-row-top{border-left-color:var(--success);}
.sc-scorecard .dm-table tbody tr:last-child,
.sc-scorecard .results-table tbody tr:last-child,
.sc-scorecard .ms-items .ms-item:last-child{border-bottom:none;}
/* Base body cell — padding + vertical-align only. Typography (font
   family, size, colour) is intentionally NOT set here: cells that
   carry typed content do so via their own class (.results-rank,
   .results-option-name, .dm-td-summary-value, .results-record,
   .sc-bar-pct, etc.), and those classes need to apply uncontested
   across td and div alike. Setting font on the base td rule used
   to bump its specificity above .results-rank/.results-option-name
   in the cascade, which caused those two classes to render
   differently inside table cells than inside grid divs — the
   "three styles" divergence. */
.sc-scorecard .dm-table td,
.sc-scorecard .results-table td{padding:14px 12px;vertical-align:middle;}

/* Rank cell positioning — applies wherever .results-rank lands on a
   <td>, so DM and the MS stacked-list view share one rule. The MS
   grid items' rank lives on a <div> (subgrid handles its column), so
   this selector doesn't match it — and doesn't need to. */
.sc-scorecard td.results-rank{width:64px;text-align:center;}

/* Rank number — single shared text style for every ranked row
   (DM summary cells, MS stacked-list cells, MS grid items). Plain
   integer only — no zero padding, no border treatment. Layout
   (cell width, alignment, vertical centering) comes from the
   wrapping context; this rule is type-only. */
.sc-scorecard .results-rank{font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;color:rgba(26,22,18,0.35);font-variant-numeric:tabular-nums;}

/* Winner-row highlight — ICE-only; the multi-section views have no
   single-winner concept (rank is per section). Specificity 0,3,1
   beats the base rank rule above. */
.sc-scorecard .dm-table tr.dm-row-top .results-rank{color:var(--success);font-size:34px;}

/* Option name — single shared text style across every surface.
   Same Bebas display typography for grid and list views, so the two
   views feel like the same component arranged differently rather
   than two designs. */
.sc-scorecard .results-option-name{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.01em;color:#1A1612;text-transform:uppercase;}
.sc-scorecard .dm-table td.dm-td-crit{text-align:right;}
.sc-scorecard .dm-table td.dm-td-summary{text-align:right;font-variant-numeric:tabular-nums;}

/* MS stacked-list columns. Three columns in the tbody:
   rank (fixed, compact — width + centred alignment come from the
   unscoped `td.results-rank` rule above, shared with the DM rank
   cell), option (flex — its typography class .results-option-name
   carries the min-width 220px from the shared rule above so long
   names wrap gracefully; vertical-align:middle on the td keeps the
   rank and win-rate cells centred against the wrap), and win rate
   (~50% of table width so the bar reads as the dominant visual). */
.sc-scorecard .results-table td.results-td-rate{width:50%;}

/* Section-title heading above each MS per-section block — used in
   both the stacked-list view (above each table) and the grid view
   (above each cell). Bebas uppercase, black, larger than the dark-
   band 12px below it, so it reads as the primary label for the
   section. Tight bottom margin (8px) groups the title with its
   table/cell body. */
.sc-scorecard .results-section-title{margin:0 0 8px 0;}
.sc-scorecard .dm-td-summary-value{font-family:'Abel',sans-serif;font-size:14px;font-weight:500;color:var(--success);}
.sc-scorecard .dm-td-summary-value.is-top{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.02em;}
.sc-scorecard .dm-td-summary-caption{font-family:'Abel',sans-serif;font-size:11px;color:#8C8078;text-transform:uppercase;letter-spacing:0.12em;margin-top:2px;}
.sc-scorecard .dm-empty,
.sc-scorecard .results-table-empty{text-align:center;color:#8C8078;font-family:'Abel',sans-serif;font-size:15px;padding:24px 12px;}

/* Heading sitting between the table and the footnote block. Asymmetric
   margins: a generous gap above (separates from the table) and a tight
   gap below (groups it with the footnote lines it introduces). When the
   heading is present, the footnotes drop their default top margin so
   the heading's bottom margin is the only gap. */
.sc-scorecard .dm-table-wrap + details{margin:18px 0 6px;}
.sc-scorecard .results-section-heading + .sc-footnotes{margin-top:0;}
.sc-scorecard .sc-footnotes{margin-top:18px;}
.sc-scorecard .sc-footnote{font-family:'Abel',sans-serif;font-size:13px;color:#8C8078;line-height:1.6;}

@media(max-width:640px){
    .sc-scorecard .dm-winner{flex-direction:column;align-items:stretch;}
    .sc-scorecard .dm-winner-summary{padding-left:0;border-top:1px solid rgba(26,22,18,0.10);margin-top:14px;padding-top:14px;justify-content:space-around;}
    /* Mobile: tighten cell padding only — typography stays under
       the unscoped class rules (.results-rank, .results-option-name,
       etc.) so the cells inherit their canonical font/size without
       a higher-specificity td rule overriding them. */
    .sc-scorecard .dm-table th,
    .sc-scorecard .dm-table td,
    .sc-scorecard .results-table th,
    .sc-scorecard .results-table td{padding:10px 8px;}
    .sc-scorecard .results-option-name{font-size:15px;}
    .sc-scorecard .results-rank{font-size:18px;}
    .sc-scorecard .dm-table tr.dm-row-top .results-rank{font-size:24px;}
}

/* ── Scorecard chrome — controls-bar stepper ─────────────────────────
   Generic items-to-show stepper component used by any slot whose
   primary view benefits from a "show top N" control. Lives in the
   chrome's controls-right stack (pushed by the slot file); the .sc-*
   namespace marks it as chrome rather than slot-specific markup. */
.sc-scorecard .sc-stepper{display:inline-flex;align-items:center;gap:4px;}
.sc-scorecard .sc-stepper-label{font-family:'Abel',sans-serif;font-size:14px;color:#1A1612;margin-right:8px;}
.sc-scorecard .sc-stepper-btn{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.15);color:#1A1612;font-family:'Bebas Neue',sans-serif;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.sc-scorecard .sc-stepper-btn:hover:not(:disabled){background:#f4eee4;}
.sc-scorecard .sc-stepper-btn:disabled{background:#e8e3da;box-shadow:none;cursor:not-allowed;}
.sc-scorecard .sc-stepper-count{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:0.04em;color:#1A1612;min-width:1.5em;text-align:center;font-variant-numeric:tabular-nums;}

/* ── Scorecard — multi-section slot ──────────────────────────────────
   Matrix — spatial grid of section cells. Each cell is its own
   bordered block with a dark-band heading at top and items below,
   mirroring the per-section tables of the list view (each grid cell
   ≈ one list table). The 18px gap between cells matches the list
   view's margin-bottom between tables, so switching modes feels
   like a re-flow of the same component rather than a different
   design.

   Column count is driven by the matrix's `data-section-count`
   attribute (emitted by the slot from count($criteria)):
     1–3 sections → single column (a 2-col layout with 3 cells
                    would leave a visibly empty 4th cell);
     4+ sections  → 2 columns (base rule), with grid-auto-flow:row
                    pushing 5+ onto additional rows.
   The base rule carries the 2-col default so 4 and 5+ share one
   selector; only 1–3 needs an override. Specificity for the
   override is 0,3,0 (.sc-scorecard + .ms-matrix + [data-section-
   count="N"]), which the mobile breakpoint below matches exactly
   with [data-section-count] (any value) so source-order wins it.
   No template-specific assumptions are encoded — index/order is the
   only thing the rendering layer commits to. */
.sc-scorecard .ms-matrix{display:grid;gap:18px;align-items:start;grid-auto-flow:row;grid-template-columns:1fr 1fr;}
.sc-scorecard .ms-matrix[data-section-count="1"],
.sc-scorecard .ms-matrix[data-section-count="2"],
.sc-scorecard .ms-matrix[data-section-count="3"]{grid-template-columns:1fr;}
.sc-scorecard .ms-cell{display:flex;flex-direction:column;}
.sc-scorecard .ms-matrix-cell{box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(26,22,18,0.12);}

/* Heading sits flush at the top of the cell as a dark band; its
   typography + background come from the shared dark-band rule at
   the top of this file (selector list includes .ms-cell-heading). */

/* Item list — single grid for all items in a cell. The
   `auto | 1fr | 1fr` template (rank / option-name / bar-block) is
   inherited by each .ms-item via subgrid so column widths line up
   across every row regardless of name length. Horizontal padding
   indents items from the cell's border, matching the visual rhythm
   of the list view's td padding. */
.sc-scorecard .ms-items{flex:1;display:grid;grid-template-columns:auto 1fr 1fr;grid-auto-rows:auto;row-gap:0;padding:0 12px;}

/* Item row — subgrid inherits the parent columns. Vertical padding
   matches the list view's td padding (14px) so item rhythm is the
   same in both views. min-height of 44px (≈ 2 line-heights of the
   18px option-name) keeps short rows tall enough for a 2-line wrap;
   the row expands naturally beyond that for taller content. The
   bottom border + last-item border:none come from the shared
   row-divider rule above, so the grid item dividers match the
   table row dividers exactly. */
.sc-scorecard .ms-items .ms-item{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;column-gap:12px;padding:14px 0;min-height:44px;}

.sc-scorecard .ms-cell-empty{font-family:'Abel',sans-serif;color:#8C8078;padding:14px 12px;}

@media(max-width:640px){
    /* On phones the matrix collapses to a single column regardless of
       section count; cells stack in source order via grid-auto-flow.
       The 18px gap from the desktop rule carries over as the
       inter-card spacing. Selector specificity (0,3,0) matches the
       desktop 1–3 override; source-order wins this rule on mobile. */
    .sc-scorecard .ms-matrix[data-section-count]{grid-template-columns:1fr;}
}

/* ── Results meta row (group / team name + respondents count) ────────
   Flex row beneath the session header on facilitator results pages.
   Left cell holds Group / Team Name (suppressed when empty in blade);
   right cell holds the respondents count. Labels are small Abel
   uppercase in --color-text-tertiary; values are Abel body in
   --color-text-primary — same typography as the previous
   .results-facilitator-* block this replaces. */
.results-meta { display: flex; align-items: flex-start; justify-content: center; gap: 48px; }
.results-meta-cell { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.results-meta-label { font-family: 'Abel', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary, #8C8078); }
.results-meta-value { font-family: 'Abel', sans-serif; font-size: 15px; color: var(--color-text-primary, #1a1a1a); }