/* Styles of a few pages only (code sheet, imports, two-factor setup, sign-in landing, quick
   guides, answers entered by staff), on the tokens: kept out of app.css, which every page
   loads. Linked from those templates' head block. */
/* Code sheet: printable cards. */
.code-sheet-header { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.code-url code { word-break: break-all; }
/* The sheets of several class groups printed at once: one per page. */
.code-sheet + .code-sheet { margin-top: var(--sp-7); break-before: page; }
.code-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--sp-2); }
.code-card { border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-3); break-inside: avoid; background: var(--c-raised); }
.code-card-name { display: block; font-weight: 600; }
.code-card-code { display: block; font-family: var(--font-mono); font-size: 1.6em; letter-spacing: .1em; }
.code-card-url { display: block; font-size: .75em; color: var(--c-text-muted); word-break: break-all; }

/* Imports. */
.resolve-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0; }
.resolve-form select { max-width: 22rem; }
.search-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); }
.search-form input[type="search"] { max-width: 14rem; }
.search-status:empty { display: none; }
.decision-needs_match > td, .decision-needs_decision > td { background: var(--c-warning-soft); }
.decision-error > td { background: var(--c-danger-soft); }
.row-messages, .row-matches { margin: 0; padding-left: var(--sp-4); }

/* Two-factor authentication */
.totp-qr { background: #fff; padding: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.totp-secret { word-break: break-word; font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .05em; }
.totp-key { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.recovery-codes { columns: 2; list-style: none; padding: var(--sp-4); font-family: var(--font-mono); background: var(--c-surface); border-radius: var(--r-md); }
/* Tutors and teachers sheet (OI-114): one select per person in a cell. */
.assignment-sheet select { display: block; max-width: 16rem; margin-bottom: var(--sp-1); }
.feedback-text { width: 100%; max-width: 40rem; }
.role-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Home (sign-in landing) */
.c-landing { max-width: var(--w-narrow); margin: var(--sp-6) auto 0; text-align: center; }
.c-landing__mark { width: 72px; height: 72px; }
.c-landing h1 { margin: var(--sp-4) 0 var(--sp-3); }
.c-landing__lead { font-size: var(--fs-lg); color: var(--c-text-muted); }
.c-landing__actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; margin: var(--sp-5) 0; }
.c-landing__actions .c-btn { min-width: 16rem; }

/* Help index (pilot guides) */
.c-guide { max-width: 72ch; }
.c-guide h2 { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.c-guide table { margin-bottom: var(--sp-5); }
.c-guide blockquote { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--c-primary); background: var(--c-primary-soft); border-radius: var(--r-md); }

/* Answers entered by staff (sociogram/response_form.html): the questionnaire's lists. */
.questionnaire .nomination-group { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--c-raised); border-radius: var(--r-lg); }
.questionnaire .nomination-group legend { float: left; width: 100%; margin: 0 0 var(--sp-2); padding: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.questionnaire .nomination-group legend + * { clear: both; }
.questionnaire .nomination-group label { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.5rem; padding: var(--sp-1) var(--sp-2); border-top: 1px solid var(--c-border); font-weight: 500; }
.questionnaire .nomination-group label:has(input:checked) { background: var(--c-primary-soft); }
.questionnaire .counter { font-weight: 600; color: var(--c-info-text); }
.choice-reason { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 400; }
.search input { width: 100%; max-width: 30rem; }
.search label { display: block; }
/* School year rollover (ADR 0013): one outcome per student in a table cell. */
.radio-row { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.radio-row label { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 500; min-height: 2rem; }
.c-year, .c-rollover-step { margin-bottom: var(--sp-5); }
.c-year .stacked-form { max-width: 44rem; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }

/* Tutors and teachers (UX review D9): the year picker in the header, a progress line,
   one fold per level (the first open) and a save bar that stays in view. */
.c-year-pick { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.c-year-pick select { min-height: 2.25rem; padding-block: var(--sp-1); }
.c-level { margin: 0 0 var(--sp-3); background: var(--c-raised); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.c-level__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.c-level__summary::-webkit-details-marker { display: none; }
.c-level__chevron { color: var(--c-text-muted); transition: transform var(--dur-1) var(--ease); }
.c-level[open] > .c-level__summary .c-level__chevron { transform: rotate(90deg); }
.c-level__title { display: inline; margin: 0; font-size: var(--fs-lg); }
.c-level__meta { color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.c-level > .c-table-scroll { margin: 0; border-width: 1px 0 0; border-radius: 0 0 var(--r-md) var(--r-md); }
/* Staff: the add form folded under the list, its fields in one row on wide screens. */
.c-staff-invite { margin-top: var(--sp-5); }
.c-staff-invite__body { padding: 0 var(--sp-4) var(--sp-4); }
.c-staff-invite__body > p { margin-top: 0; font-size: var(--fs-sm); }
.c-staff-invite__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--sp-3); align-items: end; max-width: none; }
.c-staff-invite__form > p { margin: 0; }
.c-staff-invite__form input:not([type="radio"], [type="checkbox"]), .c-staff-invite__form select { width: 100%; }
/* School years: the year sections share the table's left edge; class groups in columns. */
.c-year { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.c-year__title { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.c-year h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); }
.c-year ul { margin: 0; padding-left: 0; list-style: none; }
.c-year li { padding: 2px 0; }
.c-year__groups { columns: 4 12rem; column-gap: var(--sp-5); }
/* Staff (ADR 0025): the role radio and the tick «Administra el centre» as cards. */
.c-role-fields { border: 0; padding: 0; margin: 0 0 var(--sp-2); display: grid; gap: var(--sp-2); }
.c-role-fields legend { font-weight: 600; margin-bottom: var(--sp-1); }
.c-role-fields__admin { margin: 0 0 var(--sp-3); }
.c-form label.c-role-card, .stacked-form label.c-role-card { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-raised); }
.c-role-card:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.c-role-card:has(input:disabled) { opacity: .7; }
.c-role-card__text { display: grid; gap: var(--sp-1); }
.c-role-card__title { font-weight: 600; }
.c-staff-invite__roles { grid-column: 1 / -1; }
.c-role-form { width: min(16rem, 78vw); }
.c-role-form .c-role-card { padding: var(--sp-2); }
.c-staff-table th[scope="row"] { min-width: 11rem; max-width: 15rem; overflow-wrap: anywhere; }
.c-staff-table td:nth-child(3) { min-width: 10rem; }
.c-badge--admin { display: inline-flex; align-items: center; gap: var(--sp-1); }
.c-badge--admin .icon { width: 1em; height: 1em; }
.c-seats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.c-seats .icon { width: 1.1em; height: 1.1em; }
/* «Què pot fer cada rol» (ADR 0031): the roles side by side, then four short notes. */
.c-staff-roles { margin: 0 0 var(--sp-4); }
.c-staff-roles__body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); }
.c-staff-roles__body > p { margin-top: 0; }
.c-roles-table th[scope="row"] { min-width: 14rem; font-weight: 500; }
.c-roles-table td { min-width: 7rem; }
.c-staff-roles__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); }
.c-staff-roles__notes h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-md); }
.c-staff-roles__notes p { margin: 0; }
.c-grant-groups { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); grid-column: 1 / -1; }
.c-grant-groups legend { width: 100%; }