/* ============================================================================
Damasio Academy — form controls, styled.
House rule §1.8: never ship a raw or radio. Style
them — custom box, brand accent, drawn checkmark, hover and focus ring,
comfortable hit area. Same for selects and file inputs.
This is ONE stylesheet for every surface (public site, student, teacher,
owner) so the controls cannot drift apart. It was written after finding a
default blue system checkbox on the instructor's "Mark as graded" control and
native radios in the student quiz.
LOAD ORDER: after tokens.css / themes.css, BEFORE the per-surface stylesheet.
That way a surface can still override, and — importantly — the deliberately
invisible inputs inside .f-choice (public "find a teacher" cards, where the
card itself is the control) keep their own rules, because find.css loads last.
Colours come from whichever token set is present: --da-accent on the public
site, --accent inside the portals.
============================================================================ */
:root {
--ctl-accent: var(--da-accent, var(--accent, #b04a3a));
--ctl-line: var(--da-line, var(--line, #d8ccb4));
--ctl-bg: var(--da-surface, var(--panel, #ffffff));
--ctl-ink: var(--btn-ink, #ffffff);
}
/* ---- checkbox + radio --------------------------------------------------- */
input[type="checkbox"]:not(.ctl-raw),
input[type="radio"]:not(.ctl-raw) {
-webkit-appearance: none;
appearance: none;
/* comfortable hit area: the box is 20px, the touch target 24px */
width: 20px; height: 20px;
min-width: 20px;
margin: 2px;
flex: none;
display: inline-grid;
place-content: center;
vertical-align: -0.25em;
border: 1.5px solid var(--ctl-line);
background: var(--ctl-bg);
cursor: pointer;
transition: border-color .14s ease, background-color .14s ease, box-shadow .18s ease;
}
input[type="checkbox"]:not(.ctl-raw) { border-radius: 6px; }
input[type="radio"]:not(.ctl-raw) { border-radius: 50%; }
input[type="checkbox"]:not(.ctl-raw):hover:not(:disabled),
input[type="radio"]:not(.ctl-raw):hover:not(:disabled) {
border-color: var(--ctl-accent);
}
input[type="checkbox"]:not(.ctl-raw):focus-visible,
input[type="radio"]:not(.ctl-raw):focus-visible {
outline: none;
border-color: var(--ctl-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 30%, transparent);
}
input[type="checkbox"]:not(.ctl-raw):checked,
input[type="radio"]:not(.ctl-raw):checked {
background: var(--ctl-accent);
border-color: var(--ctl-accent);
}
/* the drawn checkmark — a scaled pseudo-element, so it animates in */
input[type="checkbox"]:not(.ctl-raw)::after {
content: "";
width: 12px; height: 12px;
transform: scale(0);
transition: transform .14s cubic-bezier(.2, .9, .3, 1.2);
background-color: var(--ctl-ink);
-webkit-mask: center / 12px 12px no-repeat url("data:image/svg+xml;utf8,");
mask: center / 12px 12px no-repeat url("data:image/svg+xml;utf8,");
}
input[type="checkbox"]:not(.ctl-raw):checked::after { transform: scale(1); }
/* the radio dot */
input[type="radio"]:not(.ctl-raw)::after {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: var(--ctl-ink);
transform: scale(0);
transition: transform .14s cubic-bezier(.2, .9, .3, 1.2);
}
input[type="radio"]:not(.ctl-raw):checked::after { transform: scale(1); }
input[type="checkbox"]:not(.ctl-raw):disabled,
input[type="radio"]:not(.ctl-raw):disabled {
opacity: .5; cursor: not-allowed;
}
/* indeterminate, for "some selected" headers */
input[type="checkbox"]:not(.ctl-raw):indeterminate {
background: var(--ctl-accent); border-color: var(--ctl-accent);
}
input[type="checkbox"]:not(.ctl-raw):indeterminate::after {
transform: scale(1);
-webkit-mask: center / 12px 2.5px no-repeat linear-gradient(#000, #000);
mask: center / 12px 2.5px no-repeat linear-gradient(#000, #000);
}
/* ---- select ------------------------------------------------------------- */
/* A native select arrow is the other giveaway. Draw our own chevron. */
select:not(.ctl-raw) {
-webkit-appearance: none;
appearance: none;
background-color: var(--ctl-bg);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .7em center;
background-size: 18px 18px;
padding-right: 2.3em;
cursor: pointer;
}
select:not(.ctl-raw):hover { border-color: var(--ctl-accent); }
select:not(.ctl-raw):focus-visible {
outline: none; border-color: var(--ctl-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 24%, transparent);
}
/* ---- file input --------------------------------------------------------- */
/* The default "Choose File" button is unstyleable; the ::file-selector-button
pseudo-element is not. */
input[type="file"]:not(.ctl-raw) { cursor: pointer; }
input[type="file"]:not(.ctl-raw)::file-selector-button {
font-family: inherit; font-size: .88em; font-weight: 600;
border: 1.5px solid var(--ctl-line);
background: transparent;
color: inherit;
border-radius: 8px;
padding: .5em .95em;
margin-right: .9em;
cursor: pointer;
transition: border-color .14s ease, color .14s ease;
}
input[type="file"]:not(.ctl-raw)::file-selector-button:hover {
border-color: var(--ctl-accent); color: var(--ctl-accent);
}
/* ---- a comfortable label row for a control + its text ------------------- */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
display: inline-flex; align-items: center; gap: 9px;
cursor: pointer; line-height: 1.4;
padding: 4px 0; /* larger hit area than the box alone */
}
@media (prefers-reduced-motion: reduce) {
input[type="checkbox"]:not(.ctl-raw)::after,
input[type="radio"]:not(.ctl-raw)::after { transition: none; }
}