* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: #f6f8fa;
    color: #1f2328;
    line-height: 1.5;
}
.admin {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px;
}
.admin--narrow { max-width: 420px; }
.admin--guide { max-width: 760px; }
.guide-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.guide-meta__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.guide {
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 32px 36px;
    line-height: 1.55;
    color: #1f2328;
}
.guide__header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #1f2328; }
.guide__title { font-size: 24px; margin: 0 0 4px; }
.guide__centre { font-size: 16px; margin: 0 0 4px; }
.guide__intro {
    font-size: 16px;
    color: #57606a;
    margin: 0 0 24px !important;
    padding: 14px 16px;
    background: #f6f8fa;
    border-left: 3px solid #1060b0;
    border-radius: 0 6px 6px 0;
}
.guide__toc {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 14px 24px 14px 38px;
    margin-bottom: 24px;
}
.guide__toc li { margin: 4px 0; }
.guide__toc a { color: #0969da; text-decoration: none; }
.guide__toc a:hover { text-decoration: underline; }
.guide__step {
    margin: 32px 0;
    padding-bottom: 24px;
    border-bottom: 1px dashed #d0d7de;
}
.guide__step:last-child { border-bottom: none; padding-bottom: 0; }
.guide__step h2 {
    font-size: 22px !important;
    font-weight: 600;
    margin: 0 0 12px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.guide__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1060b0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}
.guide__step h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: #1f2328;
}
.guide__step p, .guide__step ul, .guide__step ol { margin: 8px 0; }
.guide__step ul, .guide__step ol { padding-left: 22px; }
.guide__step li { margin: 4px 0; }
.guide__url-block {
    background: #1f2a48;
    color: #fff;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 8px 0 6px;
    overflow-x: auto;
}
.guide__url {
    background: transparent;
    color: #fff;
    padding: 0;
    font-size: 15px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    word-break: break-all;
}
.guide__table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px;
    font-size: 14px;
}
.guide__table th, .guide__table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #d0d7de;
    vertical-align: top;
}
.guide__table th { background: #f6f8fa; font-weight: 600; }
.guide__callout {
    background: #fff8c5;
    border-left: 4px solid #d4a72c;
    border-radius: 0 6px 6px 0;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 14px;
}
.guide__checklist { list-style: none; padding-left: 0 !important; }
.guide__checklist li {
    padding-left: 28px;
    position: relative;
    margin: 6px 0 !important;
}
.guide__checklist li::before {
    content: "☐";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    color: #1060b0;
}
.guide__faq dt {
    font-weight: 600;
    margin-top: 14px;
    color: #1f2328;
}
.guide__faq dd {
    margin: 4px 0 0 0;
    padding-left: 0;
    color: #57606a;
}
.guide__faq dd a { color: #0969da; }
.guide__footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #d0d7de;
    font-size: 14px;
}
.login {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-top: 80px;
}
.login__logo {
    display: block;
    margin: 0 auto 12px;
    width: 200px;
    height: auto;
    max-width: 60vw;
}
.login__heading {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #57606a !important;
    margin-bottom: 8px !important;
}
.admin__brandbar {
    display: flex;
    align-items: center;
    padding: 8px 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e1e7eb;
}
.admin__brandbar-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.admin__brandbar-logo {
    height: 64px;
    width: auto;
    display: block;
}
.admin__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}
.admin__header a {
    color: #8b949e;
    font-size: 14px;
    text-decoration: none;
}
.admin__nav {
    display: flex;
    gap: 18px;
    align-items: center;
}
.admin__nav a {
    color: #57606a;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.admin__nav a.active {
    color: #1f2328;
    border-bottom-color: #1060b0;
}
.admin__nav a.muted { color: #8b949e; font-weight: 400; }
.admin__nav a:hover { color: #1f2328; }
.admin h1 { font-size: 28px; font-weight: 600; }
.admin h2 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
.admin p { margin: 8px 0; }
.admin__form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #57606a;
}
.admin__form input,
.admin__form textarea {
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-family: inherit;
}
.admin__form textarea {
    resize: vertical;
    line-height: 1.4;
}
.admin__form button {
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    background: #1060b0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.admin__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
}
.stat__num { font-size: 36px; font-weight: 600; line-height: 1.1; }
.stat__label { font-size: 14px; color: #57606a; margin-top: 4px; }
.admin__list {
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 12px 20px;
    list-style: none;
}
.admin__list li {
    padding: 10px 0;
    border-bottom: 1px solid #eaeef2;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin__list li:last-child { border-bottom: none; }
.admin__list li .grow { flex: 1; min-width: 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
}
.section-header h2 { margin: 0; }
.btn-primary {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #1060b0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    display: inline-block;
}
.btn-primary:hover { background: #0a4488; }
.btn-primary:active { background: #d97a1f; }
.admin__form button:active { background: #d97a1f; }
.btn-secondary {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    color: #1f2328;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    display: inline-block;
}
.btn-secondary:hover { background: #f6f8fa; border-color: #afb8c1; }
.kiosk-deploy__path {
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.kiosk-deploy__path--primary {
    border-color: #1060b0;
    box-shadow: 0 1px 0 rgba(16, 96, 176, 0.15);
}
.kiosk-deploy__path-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.kiosk-deploy__path-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.kiosk-deploy__pill {
    background: #1060b0;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.4px;
}
.kiosk-deploy__row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 12px;
}
.kiosk-deploy__qr {
    flex-shrink: 0;
    padding: 8px;
    background: white;
    border-radius: 6px;
}
.kiosk-deploy__qr #qrcode img,
.kiosk-deploy__qr #qrcode canvas {
    display: block;
}
.kiosk-deploy__details {
    flex: 1;
    min-width: 0;
}
.kiosk-deploy__details label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.kiosk-deploy__details input[type="text"] {
    padding: 10px 12px;
    font-size: 14px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f6f8fa;
    width: 100%;
}
.kiosk-deploy__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .kiosk-deploy__row { flex-direction: column; align-items: center; }
    .kiosk-deploy__details { width: 100%; }
}
.btn-link {
    background: transparent;
    border: none;
    color: #0969da;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    padding: 4px;
}
.btn-link--danger { color: #cf222e; }
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background: #eaeef2;
    color: #57606a;
    font-size: 12px;
    font-weight: 500;
}
.badge--active { background: #dafbe1; color: #1a7f37; }
.badge--warn { background: #fff8c5; color: #9a6700; }
.badge--pinned { background: #ddf4ff; color: #0969da; }
.badge--scheduled { background: #fbefff; color: #8250df; }
.checkbox-row {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    color: #1f2328 !important;
    font-size: 16px !important;
}
.checkbox-row input { margin: 0; width: auto; }
.admin__form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.admin__form select {
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-family: inherit;
    background: white;
}
/* NQS Quality Area colour theming.
   Pages set --qa-color on the relevant element (e.g. on .qa-section)
   from the official ACECQA colour for that QA. Styles reference var(--qa-color)
   so we don't need a class-per-QA. */
.nqs-info {
    --qa-color: #80c8ff;
    background: color-mix(in srgb, var(--qa-color) 18%, white);
    border-left: 4px solid var(--qa-color);
    border-radius: 6px;
    padding: 14px 16px;
    margin: -8px 0 8px;
}
.nqs-info h4 {
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--qa-color) 80%, black);
    font-size: 14px;
    font-weight: 600;
}
.nqs-info p { margin: 4px 0; line-height: 1.5; font-size: 14px; }
.nqs-info ul { margin: 6px 0 4px; padding-left: 20px; font-size: 14px; }
.nqs-info ul li { margin: 2px 0; }
.nqs-info ul li strong { color: #1f2328; }
.qa-tag {
    --qa-color: #d0d7de;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--qa-color) 25%, white);
    color: color-mix(in srgb, var(--qa-color) 70%, black);
    border: 1px solid color-mix(in srgb, var(--qa-color) 50%, white);
    font-size: 12px;
    font-weight: 500;
    margin-right: 6px;
}
.qa-section {
    --qa-color: #1f883d;
    margin-bottom: 32px;
}
.qa-section__heading {
    font-size: 18px;
    font-weight: 600;
    color: #1f2328;
    margin: 0 0 4px;
    padding: 6px 0 6px 12px;
    border-left: 6px solid var(--qa-color);
    background: color-mix(in srgb, var(--qa-color) 12%, white);
    border-radius: 0 4px 4px 0;
}
.qa-section__descriptor {
    color: #57606a;
    font-style: italic;
    margin: 0 0 16px;
    padding-left: 18px;
    line-height: 1.5;
}
/* Per-standard block within a QA section (used on QIP + analytics) */
.standard-meta {
    margin: 6px 0 10px;
    padding-left: 18px;
}
.standard-meta__descriptor {
    color: #57606a;
    font-size: 14px;
    margin: 4px 0;
}
.standard-meta details {
    margin-top: 4px;
    font-size: 13px;
    color: #57606a;
}
.standard-meta details summary {
    cursor: pointer;
    color: color-mix(in srgb, var(--qa-color) 60%, black);
    font-weight: 500;
    padding: 2px 0;
}
.standard-meta details summary:hover { text-decoration: underline; }
.standard-meta details ul { margin: 6px 0 4px 20px; padding: 0; }
.standard-meta details ul li {
    margin: 4px 0;
    line-height: 1.4;
}
.standard-meta details ul li strong { color: #1f2328; font-weight: 600; }
.report-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.report-meta .muted { margin: 4px 0 0; }
.qip-period h5 {
    font-size: 13px;
    text-transform: uppercase;
    color: #57606a;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
    font-weight: 600;
}
.qip-period:first-of-type h5 { margin-top: 0; }
.report__title { font-size: 22px; margin: 0 0 4px; }
.print-only { display: none; }

@media print {
    body { background: white !important; }
    .no-print { display: none !important; }
    .print-only { display: block !important; margin-bottom: 24px; }
    .admin { max-width: 100%; padding: 0 12px; }
    .qip-block { page-break-inside: avoid; border: none; padding: 8px 0; margin-bottom: 8px; }
    .qa-section { page-break-inside: avoid; }
    /* Force the QA colour bands to print so assessors see the official colour coding */
    .qa-section__heading,
    .qa-tag,
    .nqs-info {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .qip-statement { background: white; padding: 4px 0; }
    .standard-meta details { display: none !important; }
    .standard-meta__descriptor { display: block !important; }
    a[href]:after { content: ""; }
    /* Tablet setup guide print rules */
    .admin--guide { max-width: 100%; padding: 0; }
    .guide {
        border: none;
        padding: 0;
        font-size: 11pt;
    }
    .guide__step {
        page-break-inside: avoid;
        margin: 18px 0;
        padding-bottom: 12px;
        border-bottom: 1px dashed #999 !important;
    }
    .guide__step h2 { font-size: 16pt !important; margin-top: 8px !important; }
    .guide__step h3 { font-size: 12pt; }
    .guide__num {
        width: 28px;
        height: 28px;
        font-size: 14pt;
        background: #1f2a48 !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .guide__intro {
        background: #f0f0f0 !important;
        border-left-color: #1f2a48 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .guide__url-block {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #999;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .guide__url { color: #000 !important; }
    .guide__table { font-size: 10pt; }
    .guide__table th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .guide__callout {
        background: #fffacc !important;
        border-left-color: #999 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .guide__checklist li::before { color: #000; }
    .guide__footer { font-size: 9pt; color: #999; }
}
.muted { color: #8b949e; font-size: 14px; }
code {
    display: inline-block;
    background: #eaeef2;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 14px;
}
.flashes {
    list-style: none;
    background: #ffd6cc;
    color: #6e1c1c;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px auto;
    max-width: 900px;
}
.chart-card {
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.chart-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}
.chart-card__row {
    display: flex;
    gap: 24px;
    align-items: center;
}
.chart-card__chart {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}
.chart-card__legend {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.chart-card__legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.qip-block {
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.qip-block h3 {
    font-size: 18px;
    margin: 0 0 12px;
}
.qip-block h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: #57606a;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
    font-weight: 600;
}
.qip-period:first-of-type h4 { margin-top: 0; }
.qip-statement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: #f6f8fa;
    border-radius: 6px;
    margin-bottom: 8px;
}
.qip-statement p {
    flex: 1;
    margin: 0;
    line-height: 1.5;
}

/* ---- Element-level nesting on QIP / Analytics / Library ---- */
.standard-section {
    margin: 1.5rem 0 1.5rem 1rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid color-mix(in srgb, var(--qa-color, #888), transparent 70%);
}
.element-section {
    margin: 1rem 0 1rem 1rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid color-mix(in srgb, var(--qa-color, #888), transparent 50%);
}
.element-section h4 {
    font-size: 1.05rem;
    margin: 0.25rem 0;
    font-weight: 600;
    color: color-mix(in srgb, var(--qa-color, #333), black 25%);
}
.element-section--untagged,
.standard-section--untagged {
    border-left-style: dashed;
    opacity: 0.85;
}
.element-rollup {
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem 0;
    color: #555;
}

/* ---- QA tag with colour ---- */
.qa-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--qa-color, #888), white 80%);
    color: color-mix(in srgb, var(--qa-color, #333), black 30%);
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

/* ---- Library page ---- */
.library-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.library-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0; border-bottom: 1px solid #eee;
}
.library-item__text { flex: 1; }
.badge--added { background: #e6f4ea; color: #1a7a36; padding: 2px 8px; border-radius: 4px; }
.btn-small { padding: 4px 10px; font-size: 0.9rem; }
.library-action-bar {
    position: sticky; bottom: 0;
    background: #fff; border-top: 2px solid #ddd;
    padding: 0.75rem 1rem; margin-top: 1rem;
    display: flex; align-items: center; gap: 1rem;
}

/* ---- QIP date picker ---- */
.qip-date-picker {
    display: flex; align-items: end; gap: 1rem;
    margin: 1rem 0 1.5rem 0;
    padding: 0.75rem; background: #f7f7f7; border-radius: 6px;
}
.qip-date-picker label { display: flex; flex-direction: column; font-size: 0.9rem; }
.qip-date-picker input, .qip-date-picker select { margin-top: 0.25rem; }

/* ---- Print rules ---- */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .element-section, .standard-section, .qip-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .qa-section { break-before: auto; }
    body { background: white; }
}
.print-only { display: none; }
.print-header h1 { margin: 0 0 0.25rem 0; }
.print-header p { margin: 0; }

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sort-control label {
    font-size: 14px;
    color: #57606a;
}
.sort-control select {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: white;
    font-family: inherit;
    cursor: pointer;
}
.admin__archived-note {
    margin-top: 12px;
}

/* ── PR-D3 mascot picker (admin question form) ───────────────────── */
.decorate-fieldset {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.decorate-fieldset legend {
    padding: 0 6px;
    font-weight: 500;
    color: #1f2328;
}
.radio-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}
.mascot-picker {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 12px 16px;
    background: #f6f8fa;
    margin: 0;
}
.mascot-picker legend {
    padding: 0 6px;
    font-weight: 500;
    color: #1f2328;
}
.mascot-picker__row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e1e7eb;
}
.mascot-picker__row:last-child { border-bottom: none; }
.mascot-picker__label {
    font-weight: 500;
    color: #1f2328;
    word-break: break-word;
}
.mascot-picker__tiles {
    display: flex;
    gap: 6px;
}
.mascot-picker__tile {
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 2px solid #d0d7de;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.mascot-picker__tile:hover {
    border-color: #1060b0;
    transform: translateY(-1px);
}
.mascot-picker__tile.is-selected {
    border-color: #1060b0;
    background: rgba(16, 96, 176, 0.08);
    box-shadow: 0 0 0 1px #1060b0;
}
.mascot-picker__tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.mascot-picker__none {
    font-size: 24px;
    color: #57606a;
    font-weight: 300;
}

/* ── Live char counter on the question text textarea ─────────────── */
.char-counter {
    margin-top: 4px;
    font-size: 13px;
    color: #57606a;
    font-variant-numeric: tabular-nums;
}
.char-counter--amber { color: #9a6700; }
.char-counter--red { color: #cf222e; font-weight: 500; }

/* ── Datetime field with inline Clear button ─────────────────────── */
.datetime-field {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.datetime-field input[type="datetime-local"],
.datetime-field input.datetime-display {
    flex: 1;
    min-width: 0;
}
.datetime-clear {
    flex: 0 0 auto;
    padding: 0 12px;
    background: transparent;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    color: #57606a;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.datetime-clear:hover {
    color: #cf222e;
    border-color: #cf222e;
    background: rgba(207, 34, 46, 0.04);
}

/* ── flatpickr brand theme — teal selected/today/hover + bigger time picker ── */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover {
    background: #1060b0 !important;
    border-color: #1060b0 !important;
    color: white !important;
    box-shadow: -10px 0 0 #1060b0;
}
.flatpickr-day.today {
    border-color: #1060b0 !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: rgba(16, 96, 176, 0.12) !important;
    color: #1f2328 !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(16, 96, 176, 0.10) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months {
    color: #1f2328 !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #1060b0 !important;
}
/* Bigger, more prominent time picker so the hour:minute reads at a glance */
.flatpickr-time {
    border-top: 1px solid #e1e7eb !important;
    background: #f6f8fa !important;
    height: 48px !important;
    line-height: 48px !important;
}
.flatpickr-time input {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1f2328 !important;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1f2328 !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .numInputWrapper:hover {
    background: rgba(16, 96, 176, 0.10) !important;
}

/* Super-admin visual differentiation — single accent strip across the top
   so it's obvious you're in operator mode and not a centre's admin. */
.super-admin-bar {
    border-top: 4px solid #d6536d;
}
.super-admin-bar__label {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d6536d;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.admin__nav-super-admin {
    color: #d6536d;
    font-weight: 600;
}
.admin__section {
    margin-top: 2rem;
}
.admin__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin__section-header h2 {
    margin: 0;
}
.status-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.status-pill--active { background: #e6f4ea; color: #1f883d; }
.status-pill--invite { background: #fff7e0; color: #b08600; }
.status-pill--reset  { background: #fde7eb; color: #c0364f; }
.copy-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.copy-link__url {
    background: #f4f4f5;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
}
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.inline-form { display: inline-block; margin-right: 0.4rem; }
.admin__dl { display: grid; grid-template-columns: 12rem 1fr; row-gap: 0.4rem; }
.admin__dl dt { font-weight: 600; color: #555; }
.admin__dl dd { margin: 0; }