/* SHARED CONTROLS — built once, for any page to link. Class selectors only and every value a token; the roles are
   declared in tokens.css (SHARED CONTROLS), so every theme reaches them.

   THE TREE (.c-tree): a list of nodes, top-level ones in a band with a leading bar, their children hanging from a
   rule. A node is a button-like row: its label, an optional mark, and its counts at the end. A row being dragged
   over a node that takes it shows the drop state. First host: an assessment's groups and dimensions
   (public/js/setup-assessment.js).

   THE CHOICE TILES (.c-tiles): one choice of a few, each a tile with a radio mark, its name and, where given, a small
   drawing of how it answers. Wherever set-up chooses how a question is answered (QuestionTypes.tilesField); a tile
   that cannot be chosen here is shown dimmed.

   THE PREVIEW FRAME (.c-frame): another page shown inside this one — a head line naming it, a progress line, and its
   body scrolling within a bounded height. First host: an assessment's preview of one respondent.

   THE 2×2 GRID: a matrix of four quadrants split at each axis's cut point, drawn on a results page as a plot
   (templates/results/partials/_grid, .q-plot in scorecard-questions.css) and as four tinted cells where its quadrants are written
   (.c-grid-quadrants, the set-up page). Every colour is a --grid-* role; the legend under the plot is .c-grid-legend.

   THE STEPPER (.c-stepper): − / a whole number / +, light-edged. THE UNDERLINE FIELD (.c-ufield): a text field on its
   line, the set-up page's field, with no box. THE SCALE ROW (.c-scale): a scale's two ends — a caption, a stepper and
   an end label each, the right end right-aligned — with its points drawn between them and, with every point
   labelled, a label field under each point (QuestionTypes.stepper, QuestionTypes.scaleRow).

   THE CHECKBOX (.c-check): a real checkbox inside its label — the input hidden, the box drawn by the label, its text (if any)
   after it. Every checkbox on the app, participant and results surfaces (Platform Administration's are Filament's): the
   session tables' row selects (with an indeterminate state for "select all"), the participant field's Required
   (public/js/setup-editor.js segCheck), and every form's. A disabled one dims as a tile does. Its label reads as the
   text around it; a host that wants it otherwise sets the --check-label-* roles (the set-up cards: a caption).
   THE SWITCH (.c-switch): Off / On, a track and a sliding knob — a .tpl-pill-toggle's checkbox, and a rail setting's.

   THE BUTTON (.c-btn): every app and results button — a label, and a .c-btn-icon before or after it, on a box of one
   size scale. The role is a modifier: --primary (the filled action), --bordered (the outlined one), --quiet (its words
   alone), --danger (an action that deletes). The size: --sm (a toolbar's or a list row's), none (a control's), --lg (a
   page's own action), --icon (a square holding one glyph); a host may set --btn-h for every button inside it. Every
   value is a --btn-* role. A button that opens a dropdown is also its .tpl-switcher-trigger (dropdown.css).

   THE ANSWER (.c-answer): an availability poll's answer — a dot and its label, in the answer's colour on its pill
   (--answer-yes, --answer-maybe, --answer-no and their -pill roles; no answer on --answer-none-pill). Each carries every
   label, the others laid unseen under its own, so every pill is as wide as the widest label wherever it is drawn
   (partials/_poll-answer). THE ANSWER CHOICE (.c-answer-choice): the respondent's three-part control for one date —
   equal parts, each a radio inside its label, the chosen one filled with its answer's colour.

   THE TOAST (#app-toast): a brief confirmation at the foot of the screen, shown by window.showToast
   (public/js/toast.js). Moved here from home.css 2026-10-13 so the set-up page takes it too. */

.c-tree{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;}
.c-tree-node{display:flex;align-items:center;gap:var(--gap-tight);width:100%;min-width:0;padding:var(--inset-control) var(--inset-control);
    border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font-family:var(--font-body);font-size:var(--type-note);
    line-height:var(--type-note-line);text-align:left;cursor:pointer;}
.c-tree-node:hover{background:var(--tree-node-hover);}
.c-tree-node:focus-visible{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--btn-edge-w);}
.c-tree-node--top{margin-top:var(--inset-control);background:var(--tree-group-fill);border-left:var(--inset-tag) solid var(--tree-group-edge);
    font-size:var(--type-field);}
.c-tree-node--child{position:relative;padding-left:calc(var(--inset-panel) + var(--inset-control));}
.c-tree-node--child::before{content:"";position:absolute;left:var(--inset-box);top:0;bottom:0;border-left:var(--btn-edge-w) solid var(--tree-rule);}
.c-tree-node--quiet{color:var(--tree-count);font-style:italic;}
.c-tree-node--apart{margin-top:var(--inset-panel);border-top:var(--btn-edge-w) solid var(--tree-rule);}
.c-tree-node.is-on{background:var(--tree-node-on);color:var(--on-tree-node-on);}
.c-tree-node.is-on .c-tree-count{color:inherit;}
.c-tree-node.is-drop{outline:var(--tab-line-width) dashed var(--tree-drop);outline-offset:var(--btn-edge-w);}
.c-tree-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.c-tree-mark{flex:none;width:var(--gap-tight);height:var(--gap-tight);border-radius:var(--radius-pill);background:var(--tree-mark);}
.c-tree-count{flex:none;margin-left:auto;font-family:var(--font-code);font-size:var(--type-caption);color:var(--tree-count);white-space:nowrap;}

/* Every row of tiles as tall as the tallest tile, so a wrapped name lengthens the whole group, not one tile. */
.c-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));grid-auto-rows:1fr;gap:var(--gap-row);min-width:0;}
.c-tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-tight);min-width:0;padding:var(--inset-control) var(--inset-box);
    border:var(--btn-edge-w) solid var(--tile-edge);border-radius:var(--radius-control);background:var(--tile-fill);color:var(--ink);
    font-family:var(--font-body);font-size:var(--type-note);line-height:var(--type-note-line);text-align:left;cursor:pointer;}
.c-tile:hover{background:var(--tile-fill-on);}
.c-tile:focus-visible{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--btn-edge-w);}
.c-tile[aria-checked="true"]{border-color:var(--tile-edge-on);background:var(--tile-fill-on);}
.c-tile[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
/* --row: the tiles side by side at their own widths (the help's goal filters); --two: two to a row (the Call To Action's
   Show on); --four: four to a row (the New session chooser's starting points); --stack: one full-width tile a row, at the field's size (the help's chooser); --stack-phone: one a row below
   the phone breakpoint, at the tiles' own size (the Respondents card). Below the phone breakpoint a row wraps as the
   default does. */
.c-tiles--row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;}
.c-tiles--two{grid-template-columns:repeat(2, minmax(0, 1fr));}
.c-tiles--four{grid-template-columns:repeat(4, minmax(0, 1fr));}
.c-tiles--stack{grid-template-columns:minmax(0, 1fr);grid-auto-rows:auto;}
.c-tiles--stack .c-tile{padding:var(--inset-panel) var(--space-lg);font-size:var(--type-field);}
@media (max-width:768px){.c-tiles--row{grid-auto-flow:row;grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));}}
@media (max-width:640px){.c-tiles--stack-phone{grid-template-columns:minmax(0, 1fr);}}
.c-tile-head{display:flex;align-items:center;gap:var(--gap-tight);}
.c-tile-mark{flex:none;width:var(--type-field);height:var(--type-field);border-radius:var(--radius-pill);border:var(--tab-line-width) solid var(--tile-edge);}
.c-tile[aria-checked="true"] .c-tile-mark{border:var(--scale-track-line-weight) solid var(--tile-mark-on);}
.c-tile-title{font-weight:var(--weight-semibold);}
.c-tile-art{display:flex;align-items:center;gap:var(--inset-tag);min-height:var(--type-panel-title);font-family:var(--font-code);font-size:var(--type-micro);color:var(--tile-art-ink);}
.c-tile-art i{display:inline-block;width:var(--type-label);height:var(--type-label);border:var(--btn-edge-w) solid var(--tile-art);border-radius:var(--radius-pill);}
.c-tile-art b{display:inline-block;padding:0 var(--inset-tag);border:var(--btn-edge-w) solid var(--tile-art);border-radius:var(--radius-control);font-weight:var(--weight-regular);}

/* An unset --check-label-* role leaves its property to inherit, so the label is the host's text. */
.c-check{position:relative;display:inline-flex;align-items:center;gap:var(--gap-tight);cursor:pointer;font-family:var(--check-label-face);
    font-size:var(--check-label-size);letter-spacing:var(--check-label-tracking);text-transform:var(--check-label-case);
    line-height:var(--check-label-line);color:var(--check-label-ink);}
.c-check input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;pointer-events:none;} /* literal: visually hidden — the standard 1px box base.css .file-input states */
.c-check::before{content:"";flex:0 0 var(--switch-knob);width:var(--switch-knob);height:var(--switch-knob);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
    border:var(--btn-edge-w) solid var(--hairline-strong);border-radius:var(--radius-control);background:var(--surface-field);
    font-family:var(--font-label);font-size:var(--type-badge);line-height:var(--type-badge-line);letter-spacing:0;text-transform:none;color:var(--on-success);}
.c-check:has(input:checked){color:var(--check-label-ink-on);}
.c-check:has(input:checked)::before{content:"\2713";background:var(--success);border-color:var(--success);}
.c-check:has(input:focus-visible)::before{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--tab-line-width);}
.c-check:has(input:disabled){opacity:.45;cursor:not-allowed;}
/* Indeterminate ("some, not all" — set only by a script, never a click) has its own mark, a bar across the box. */
.c-check:has(input:indeterminate)::before{border-color:rgba(var(--ink-rgb),0.35);}
.c-check:has(input:indeterminate)::after{content:"";position:absolute;left:var(--nudge);width:calc(var(--switch-knob) - 2 * var(--nudge));top:calc(50% - var(--btn-edge-w));height:var(--nudge);background:var(--ink-glyph-muted);}

.c-frame{border:var(--btn-edge-w) solid var(--frame-edge);border-radius:var(--radius-card);overflow:hidden;background:var(--frame-body);min-width:0;}
.c-frame-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--inset-control) var(--inset-box);padding:var(--inset-control) var(--inset-box);
    background:var(--frame-head);font-family:var(--font-code);font-size:var(--type-caption);color:var(--muted);}
.c-frame-head > b{color:var(--ink);}
.c-frame-head-end{margin-left:auto;}
.c-frame-progress{height:var(--gap-tight);background:var(--frame-progress);}
.c-frame-progress > i{display:block;height:100%;background:var(--frame-progress-on);}
.c-frame-body{max-height:36rem;overflow:auto;padding:var(--inset-panel) var(--gap-block);}

/* The set-up page's quadrant cells (.c-grid-quadrant): each tinted by its --grid-q-* role. */
.c-grid-quadrant--tl{background:var(--grid-q-tl);}
.c-grid-quadrant--tr{background:var(--grid-q-tr);}
.c-grid-quadrant--bl{background:var(--grid-q-bl);}
.c-grid-quadrant--br{background:var(--grid-q-br);}
.c-grid-legend{display:flex;flex-wrap:wrap;gap:var(--inset-control) var(--inset-panel);font-size:var(--type-note);color:var(--grid-label);}
.c-grid-legend i{display:inline-block;width:var(--inset-box);height:var(--inset-box);margin-right:var(--inset-tag);border-radius:var(--radius-pill);vertical-align:middle;}
.c-grid-legend .c-grid-legend-dot{background:var(--grid-dot);}
.c-grid-legend .c-grid-legend-mean{border:var(--grid-mean-w) solid var(--grid-mean);}
.c-grid-legend .q-plot-legend-own{background:var(--grid-own);}
.c-grid-quadrants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--inset-control);}
.c-grid-quadrant{display:flex;flex-direction:column;gap:var(--gap-tight);padding:var(--inset-box);border:var(--btn-edge-w) solid var(--grid-edge);border-radius:var(--radius-control);}

.c-stepper{display:inline-flex;align-items:stretch;border:var(--btn-edge-w) solid var(--stepper-edge);border-radius:var(--radius-control);overflow:hidden;background:var(--stepper-fill);}
.c-stepper-btn{width:var(--app-control-h, var(--btn-h-icon));border:0;background:var(--stepper-btn);color:var(--stepper-btn-ink);font-size:var(--type-field);cursor:pointer;}
.c-stepper-btn:hover{background:var(--stepper-btn-hover);}
.c-stepper-btn:disabled{cursor:default;opacity:.45;}
.c-stepper-input{width:var(--control-height);border:0;background:transparent;text-align:center;font-family:var(--font-code);font-size:var(--type-field);color:var(--ink);-moz-appearance:textfield;appearance:textfield;}
.c-stepper-input::-webkit-inner-spin-button,.c-stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.c-stepper-input:focus{outline:none;}
.c-stepper:focus-within{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--btn-edge-w);}
.c-ufield{width:100%;min-width:0;box-sizing:border-box;padding-inline:0;border:0;border-bottom:var(--btn-edge-w) solid var(--ufield-rule);border-radius:0;background:transparent;
    font-family:var(--font-body);font-size:var(--type-field);color:var(--ink);}
.c-scale-part{display:flex;flex-direction:column;gap:var(--inset-control);container-type:inline-size;}
.c-ufield:focus{outline:none;border-bottom-color:var(--ufield-rule-focus);}
.c-scale{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr) minmax(9rem,13rem);gap:var(--inset-panel);align-items:start;}
.c-scale-end{display:flex;flex-direction:column;align-items:flex-start;gap:var(--inset-control);min-width:0;}
.c-scale-end--high{align-items:flex-end;text-align:right;}
.c-scale-end--high .c-ufield{text-align:right;}
.c-scale-track{position:relative;min-width:0;padding-top:var(--type-field);}
.c-scale-dots{position:relative;display:flex;justify-content:space-between;}
.c-scale-dots::before{content:"";position:absolute;left:var(--type-field);right:var(--type-field);top:50%;border-top:var(--btn-edge-w) dashed var(--range-line);}
.c-scale-dot{position:relative;flex:none;display:grid;place-items:center;width:calc(2 * var(--type-field));height:calc(2 * var(--type-field));border:var(--btn-edge-w) solid var(--range-dot-edge);
    border-radius:var(--radius-pill);background:var(--stepper-fill);font-family:var(--font-code);font-size:var(--type-caption);color:var(--ink);}
.c-scale-dot--end{border-color:var(--range-dot-end);color:var(--range-dot-end);}
.c-scale-labels{display:flex;gap:var(--gap-tight);margin-top:var(--inset-control);}
.c-scale-labels .c-ufield{flex:1 1 0;width:0;text-align:center;font-size:var(--type-note);}
.c-scale-error[hidden]{display:none;}
/* The ends over the track once the scale's own box is narrow (a question card at any width), not the window. */
@container (max-width:40rem){
    .c-scale{grid-template-columns:repeat(2,minmax(0,1fr));}
    .c-scale-track{grid-column:1 / -1;grid-row:2;}
}

/* THE SWITCH (.c-switch): Off / On, a track with a knob that slides, on a checkbox that is the control itself (a
   .tpl-pill-toggle's input, a rail setting's, templates/_rail-dropdown). Every value is a --switch-* token, so a theme
   sets its colours there. :is(input[type="checkbox"], span) keeps the weight the checkbox form always had, (0,2,1). */
:is(input[type="checkbox"], span).c-switch{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;box-sizing:border-box;flex-shrink:0;width:var(--switch-track-width);height:var(--switch-track-height);margin:0;border:0;border-radius:calc(var(--switch-track-height) / 2);background:var(--switch-off);cursor:pointer;transition:background var(--motion-fast);}
:is(input[type="checkbox"], span).c-switch::before{content:'';position:absolute;top:var(--switch-knob-inset);left:var(--switch-knob-inset);width:var(--switch-knob);height:var(--switch-knob);border-radius:50%;background:var(--surface-field);box-shadow:var(--switch-knob-shadow);transition:transform var(--motion-fast);}
input[type="checkbox"].c-switch:checked{background:var(--switch-on);}
input[type="checkbox"].c-switch:checked::before{transform:translateX(calc(var(--switch-track-width) - var(--switch-knob) - 2 * var(--switch-knob-inset)));}
input[type="checkbox"].c-switch:focus-visible{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--tab-line-width);}
input[type="checkbox"].c-switch:disabled{cursor:not-allowed;}
@media (prefers-reduced-motion:reduce){
    :is(input[type="checkbox"], span).c-switch,
    :is(input[type="checkbox"], span).c-switch::before{transition:none;}
}
#app-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--toast-fill);color:var(--on-toast);font-family:var(--font-label);font-size:var(--type-caption);letter-spacing:var(--type-caption-tracking-wide);padding:var(--gap-row) var(--inset-panel);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:var(--layer-toast);}
#app-toast.is-visible{opacity:1;transform:translate(-50%,0);}

.c-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);min-height:var(--btn-h, var(--btn-h-md));
    margin:0;padding:var(--btn-pad);border:var(--btn-edge-w) solid var(--btn-edge);border-radius:var(--btn-radius);background:var(--btn-fill);color:var(--btn-ink);
    box-shadow:var(--btn-shadow, none);
    font-family:var(--btn-face);font-size:var(--btn-type);font-weight:var(--btn-weight);letter-spacing:var(--btn-tracking);text-transform:var(--btn-case);
    line-height:var(--btn-leading);text-align:center;text-decoration:none;cursor:pointer;
    --btn-fill:var(--btn-bordered-fill);--btn-ink:var(--btn-bordered-ink);--btn-edge:var(--btn-bordered-edge);--btn-hover-fill:var(--btn-bordered-hover);
    --btn-hover-ink:var(--btn-ink);--btn-type:var(--btn-bordered-type);--btn-weight:var(--btn-label-weight);--btn-case:var(--btn-label-case);
    --btn-tracking:var(--btn-bordered-tracking);--btn-pad:var(--btn-bordered-pad);}
.c-btn:hover{background:var(--btn-hover-fill);color:var(--btn-hover-ink);}
.c-btn:focus-visible,
label.c-btn:focus-within{outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:var(--btn-edge-w);}
.c-btn:is(:disabled, [aria-disabled="true"]){opacity:var(--btn-off);cursor:not-allowed;}
.c-btn[data-busy="1"]{opacity:var(--btn-busy);pointer-events:none;}
.c-btn--primary{--btn-fill:var(--btn-primary-fill);--btn-ink:var(--btn-primary-ink);--btn-edge:transparent;--btn-hover-fill:var(--btn-fill);
    --btn-type:var(--btn-primary-type);--btn-weight:var(--btn-primary-weight);--btn-case:var(--btn-primary-case);--btn-tracking:var(--btn-primary-tracking);
    --btn-pad:var(--btn-primary-pad);}
.c-btn--primary:hover{opacity:var(--btn-primary-hover);}
.c-btn--quiet{--btn-fill:var(--btn-quiet-fill);--btn-ink:var(--btn-quiet-ink);--btn-edge:transparent;--btn-hover-fill:var(--btn-quiet-fill);--btn-hover-ink:var(--btn-quiet-hover-ink);
    --btn-type:var(--btn-quiet-type);--btn-tracking:var(--btn-quiet-tracking);--btn-pad:var(--btn-quiet-pad);}
.c-btn--danger{--btn-fill:var(--btn-danger-fill);--btn-ink:var(--btn-danger-ink);--btn-edge:var(--btn-danger-edge);--btn-hover-fill:var(--btn-danger-hover);
    --btn-hover-ink:var(--btn-danger-hover-ink);--btn-type:var(--btn-danger-type);--btn-tracking:var(--btn-danger-tracking);--btn-pad:var(--btn-danger-pad);}
.c-btn--sm{--btn-h:var(--btn-h-sm);}
.c-btn--lg{--btn-h:var(--btn-h-lg);}
.c-btn--icon{--btn-h:var(--btn-h-icon);--btn-pad:0;width:var(--btn-h);flex:none;}
/* Where a button takes its box's width: an availability poll's table cells and summary band (partials/_poll-table,
   _poll-summary), and every button on its Manage page at a phone's width but an icon's (facilitator/_manage-poll). */
.poll-table .c-btn,.poll-summary-share .c-btn{width:100%;}
@media(max-width:640px){ .pm .c-btn:not(.c-btn--icon){width:100%;} }
/* Its glyph: a .tpl-btn-icon (THE ICON, base.css; --square for a 24x24 drawing), before the label at the button's
   gap; one after the label sits at the right inner edge, out of flow, so the label centres as it would alone. */
.c-btn > .tpl-btn-icon{flex:none;width:var(--btn-glyph-w);height:var(--btn-glyph-h);background-repeat:no-repeat;background-position:center;background-size:var(--btn-glyph-w) var(--btn-glyph-h);}
.c-btn > .tpl-btn-icon--square{height:var(--btn-glyph-w);}
.c-btn:has(> .tpl-btn-icon:last-child:not(:first-child)){position:relative;padding-inline:calc(var(--gap-row) + var(--btn-glyph-w) + var(--btn-gap));}
.c-btn > .tpl-btn-icon:last-child:not(:first-child){position:absolute;right:var(--gap-row);top:50%;transform:translateY(-50%);}
/* An even row fixes the button's width (EVEN ROWS, templates.css), so the lane before the label goes back to the label: a
   one-word label such as Translated otherwise breaks mid-word. */
.tpl-actions-row--even .c-btn:has(> .tpl-btn-icon:last-child:not(:first-child)){padding-inline-start:var(--gap-row);}
/* One that opens a dropdown is also its .tpl-switcher-trigger: what it adds around its label, for the menu's width
   (dropdown.css, A MENU-ENTRY SIZER) — its padding, gap, chevron and edges. */
.c-btn.tpl-switcher-trigger{--switcher-trigger-extra:calc(2 * var(--gap-row) + var(--btn-gap) + var(--switcher-chev) + 2 * var(--btn-edge-w));}

/* THE ANSWER (.c-answer, partials/_poll-answer): a dot and the label, one width; data-a is the answer. */
.c-answer{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-tight);box-sizing:border-box;max-width:100%;
    min-height:var(--btn-h-sm);padding:0 var(--gap-row);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--type-caption);
    font-weight:var(--weight-medium);line-height:var(--line-control);white-space:nowrap;background:var(--answer-none-pill);color:var(--muted);}
.c-answer::before{content:"";flex:none;width:var(--inset-control);height:var(--inset-control);border-radius:var(--radius-pill);
    border:var(--btn-edge-w) dashed var(--border-strong);box-sizing:border-box;}
.c-answer-label{display:inline-grid;}
.c-answer-label > *{grid-area:1/1;text-align:center;}
.c-answer-label > [aria-hidden]{visibility:hidden;}
.c-answer[data-a="yes"]{background:var(--answer-yes-pill);color:var(--answer-yes);}
.c-answer[data-a="could_be"]{background:var(--answer-maybe-pill);color:var(--answer-maybe);}
.c-answer[data-a="no"]{background:var(--answer-no-pill);color:var(--answer-no);}
.c-answer:is([data-a="yes"], [data-a="could_be"], [data-a="no"])::before{background:currentColor;border-color:currentColor;}
/* THE ANSWER CHOICE (.c-answer-choice): three equal parts, a radio in each label; the chosen one in its answer's colour. */
.c-answer-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--btn-edge-w) solid var(--choice-edge);
    border-radius:var(--radius-control);overflow:hidden;background:var(--surface-panel);}
.c-answer-choice > label{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--gap-tight);min-width:0;
    min-height:var(--btn-h-lg);padding:0 var(--gap-tight);border-inline-start:var(--btn-edge-w) solid var(--choice-edge);cursor:pointer;white-space:nowrap;
    font-family:var(--font-body);font-size:var(--type-caption);font-weight:var(--weight-medium);line-height:var(--line-control);text-align:center;}
.c-answer-choice > label:first-child{border-inline-start:0;}
.c-answer-choice > label > span{min-width:0;}
@media(max-width:640px){ .c-answer-choice > label{white-space:normal;} }
.c-answer-choice > label::before{content:"";flex:none;width:var(--inset-control);height:var(--inset-control);border-radius:var(--radius-pill);
    border:var(--btn-edge-w) solid currentColor;box-sizing:border-box;}
.c-answer-choice input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;pointer-events:none;} /* literal: visually hidden, as .c-check's */
.c-answer-choice > label:has(input[value="yes"]){color:var(--answer-yes);}
.c-answer-choice > label:has(input[value="could_be"]){color:var(--answer-maybe);}
.c-answer-choice > label:has(input[value="no"]){color:var(--answer-no);}
.c-answer-choice > label:has(input:checked){color:var(--on-answer);}
.c-answer-choice > label:has(input:checked)::before{background:currentColor;}
.c-answer-choice > label:has(input[value="yes"]:checked){background:var(--answer-yes);}
.c-answer-choice > label:has(input[value="could_be"]:checked){background:var(--answer-maybe);}
.c-answer-choice > label:has(input[value="no"]:checked){background:var(--answer-no);}
.c-answer-choice > label:has(input:focus-visible){outline:var(--tab-line-width) solid var(--focus-ring);outline-offset:calc(-1 * var(--tab-line-width));}