/* ========================================================================================================
   The Admin page (admin.html) in the Classlings look (the teacher, 14 October 2026): the School directory's side
   list, for the platform admin only. The shape, the panel, the question box and the people bits are
   classlings-page.css; buttons, text boxes and the question box are the shared controls standard
   (classlings-controls.css). This file is what is left: the side list's admin-only touches, and everything
   shared/js/adminPanel.js writes into the panel (tiles, rows, tables, chips), in Login cards' tokens.
   Fredoka for headings, buttons and labels; Atkinson Hyperlegible for reading. Nothing here moves on its own; a
   colour always comes with a word. Wide tables scroll inside their own wrapper, never the page or the panel.
   ======================================================================================================== */

/* ------------------------------------------------------------------ who is looking */
/* Anyone but the platform admin sees plain words in place of the sections (adminPanel.js sets data-access). */
body.cla-admin:not([data-access="admin"]) .pg-view,
body.cla-admin:not([data-access="admin"]) .pg-secs { display: none !important; }
body.cla-admin[data-access="admin"] .pg-locked { display: none; }
.pg-locked { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; padding: 24px 32px; }
.pg-locked .pg-empty { max-width: 560px; padding: 0; }
.pg-locked .pg-h3 { font-size: 28px; }
.pg-locked .pg-line { font-size: 18px; }

/* ------------------------------------------------------------------ the side list */
.cla-admin .pg-wrap { grid-template-rows: minmax(0, 1fr); }
.cla-admin .pg-secs { gap: 6px; }
.cla-admin .pg-sec small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cla-admin .pg-sec b { white-space: nowrap; }

/* Home at the foot, the account beside it, and Sign in or Sign out under the account. */
.cla-admin .pg-foot {
    margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 6px; align-items: end;
}
.cla-admin .pg-foot .pg-home { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
.cla-admin .pg-foot .pg-about { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; font: 400 16px / 1.25 var(--body); color: var(--ink-2); }
.cla-admin .pg-foot .pg-auth { grid-column: 2; grid-row: 2; justify-self: start; margin-bottom: var(--ctl-lift); }

/* Eight sections (from 22 October, with Kit's island and Videos) only fit at full size from about 800 tall: below that
   they need to be a little tighter to leave room for Home. */
@media (min-width: 900px) and (max-height: 800px) {
    .cla-admin .pg-secs { gap: 4px; }
    .cla-admin .pg-sec { min-height: 58px; padding: 4px 12px; }
}
/* A laptop's page is about 580 tall: there they also need the page's edge, the gaps and the sections' words smaller. */
@media (min-width: 900px) and (max-height: 700px) {
    .cla-admin .pg-wrap { padding-top: 12px; padding-bottom: 12px; }
    .cla-admin .pg-side { gap: 10px; }
    .cla-admin .pg-secs { gap: 3px; }
    .cla-admin .pg-sec { min-height: 0; padding: 1px 12px; }
    .cla-admin .pg-sec b { font-size: 19px; line-height: 1.15; }
    .cla-admin .pg-sec small { font-size: 15px; line-height: 1.2; }
    /* The chosen section keeps its blue edge, tint and arrow, but not the inner ring, which would sit on its second line. */
    .cla-admin .pg-sec.is-on { box-shadow: none; }
}
/* The shortest laptop page (about 540 tall): the page's edge and the gaps smaller still, the words the same. */
@media (min-width: 900px) and (max-height: 570px) {
    .cla-admin .pg-wrap { padding-top: 8px; padding-bottom: 8px; }
    /* Not under 8: the lettering hangs 8 below its line (room for tails). */
    .cla-admin .pg-side { gap: 8px; }
    .cla-admin .pg-secs { gap: 2px; }
    .cla-admin .pg-sec { padding-top: 0; padding-bottom: 0; }
}

/* ------------------------------------------------------------------ the panel */
.cla-admin .pg-top { min-height: 90px; }
.cla-admin .pg-scroll { container: adm / inline-size; overflow-x: hidden; }
.pg-top-words .pg-line { max-width: 60ch; }
.admin-summary { margin: 2px 0 14px; font: 400 18px / 1.4 var(--body); color: var(--ink); }
.pg-line { overflow-wrap: anywhere; }
.pg-h3 + .pg-line { margin-top: 2px; }

/* A group of things in a section: a heading, a pale rule over it, and room. No boxes inside boxes. */
.admin-block { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--wash-2); min-width: 0; }
.admin-summary + .admin-block, .pg-scroll > .admin-block:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
.admin-block > .pg-h3 { margin-bottom: 8px; }
.platform-action-header, .exception-review-header, .attention-queue-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px;
}
.platform-action-header > div, .exception-review-header > div, .attention-queue-header > div { min-width: 0; }
.exception-review-header .cla-btn, .attention-queue-header .cla-btn { flex: none; }

/* Text, drop-downs and the buttons that sit with them, on one row; their faces line up with the boxes. */
.admin-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 6px 0 12px; }
.admin-controls .cla-btn, .account-lookup-form .cla-btn { margin-bottom: 0; }
.admin-controls .pg-search { flex: 1 1 260px; min-width: 200px; max-width: 480px; }
.compact-field { display: grid; gap: 4px; flex: 0 1 190px; min-width: 150px; }
.compact-field .fl, .fl { font: 600 16px / 1.2 var(--display); color: var(--ink-2); }
.compact-field textarea.cla-field { min-height: 96px; resize: vertical; }
.account-lookup-form { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 4px; }
.account-lookup-form .pg-search { flex: 1 1 320px; max-width: 520px; }
.lookup-status { margin: 8px 0 4px; }
.lookup-status:empty { display: none; }
.lookup-status.error, .lookup-status.success { padding-left: 10px; font-weight: 700; color: var(--ink); border-left: 4px solid var(--wash-2); }
.lookup-status.error { border-left-color: var(--tangerine-deep); }
.lookup-status.success { border-left-color: var(--lime-deep); }
.account-lookup-results { display: grid; margin-bottom: 4px; }

/* "3 shown of 12" and its friends: small chips; one that needs looking at says so in its words, on gold's tint. */
.entitlement-filter-summary, .audit-filter-summary { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
.entitlement-filter-summary span, .audit-filter-summary span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px;
    font: 400 16px / 1.2 var(--body); color: var(--ink-2); background: var(--wash); border-radius: 10px;
}
.entitlement-filter-summary strong, .audit-filter-summary strong { font: 700 17px / 1 var(--display); color: var(--ink); }
.entitlement-filter-summary span.is-warning { color: var(--ink); background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold-deep); }

/* A message under a heading, or nothing to show: a few plain words. */
.empty { padding: 14px 16px; font: 400 18px / 1.4 var(--body); color: var(--ink-2); background: var(--wash); border-radius: var(--r-s); }
.usage-muted { color: var(--ink-2); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.usage-warning { color: var(--tangerine-deep); }

/* ------------------------------------------------------------------ chips and tags */
.usage-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-pill {
    display: inline-flex; align-items: center; max-width: 100%; min-height: 28px; padding: 1px 10px;
    font: 600 16px / 1.2 var(--display); color: var(--ink); white-space: normal; overflow-wrap: anywhere;
    background: var(--wash); border: 2px solid var(--wash-2); border-radius: 10px;
}
.usage-pill.warning { background: var(--gold-tint); border-color: var(--gold-deep); }
.usage-pill.danger { background: var(--tangerine-tint); border-color: var(--tangerine-deep); }
/* The state a colour stands for, in words. */
.tone-tag {
    display: inline-flex; align-items: center; justify-self: start; align-self: start; margin-top: 4px; padding: 0 8px;
    font: 700 16px / 1.5 var(--display); font-style: normal; color: var(--ink); border: 2px solid; border-radius: 8px;
}
.tone-tag.is-warning { background: var(--gold); border-color: var(--gold-deep); }
.tone-tag.is-danger { background: var(--tangerine); border-color: var(--tangerine-deep); }

/* ------------------------------------------------------------------ tiles: a label, a figure, a line */
.platform-overview-metrics, .usage-insights, .security-posture-grid, .budget-facts, .budget-drivers,
.entitlement-summary-list, .account-risk-grid, .entitlement-impact-grid, .feature-gate-metrics {
    display: grid; gap: 10px; min-width: 0;
}
.platform-overview-metrics { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 4px 0 4px; }
.usage-insights { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); margin: 0 0 14px; }
.security-posture-grid, .budget-drivers { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.budget-facts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 10px; }
.entitlement-summary-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.account-risk-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.entitlement-impact-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.feature-gate-metrics { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 10px 0; }

:is(.overview-metric, .usage-insight, .budget-fact, .budget-drivers > div, .security-posture-card, .entitlement-summary-item,
    .account-risk-grid > div, .entitlement-impact-grid > div, .feature-gate-metrics > span) {
    display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 14px;
    background: var(--wash); border-radius: var(--r-s);
}
:is(.overview-metric, .usage-insight, .budget-fact, .budget-drivers > div, .security-posture-card,
    .account-risk-grid > div, .entitlement-impact-grid > div) > span {
    font: 600 16px / 1.25 var(--display); color: var(--ink-2);
}
:is(.overview-metric, .usage-insight, .budget-fact, .budget-drivers > div, .security-posture-card,
    .account-risk-grid > div, .entitlement-impact-grid > div, .entitlement-summary-item, .feature-gate-metrics > span) > strong {
    font: 700 24px / 1.15 var(--display); overflow-wrap: anywhere;
}
:is(.overview-metric, .usage-insight, .budget-fact, .budget-drivers > div, .security-posture-card,
    .account-risk-grid > div, .entitlement-impact-grid > div, .feature-gate-metrics > span) > small {
    font: 400 16px / 1.3 var(--body); color: var(--ink-2); overflow-wrap: anywhere;
}
.entitlement-summary-item > strong { font-size: 20px; }
.entitlement-summary-item > span { font: 400 16px / 1.3 var(--body); color: var(--ink-2); }
.feature-gate-metrics > span > strong { font-size: 22px; }
.budget-drivers > div > strong { font-size: 20px; }
/* Needs a look, or over its limit: gold's or tangerine's tint and edge, and the tile says so in a word. */
:is(.overview-metric, .usage-insight, .budget-fact, .security-posture-card, .account-risk-grid > div, .entitlement-impact-grid > div).is-warning {
    background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold-deep);
}
:is(.overview-metric, .budget-fact, .account-risk-grid > div).is-danger {
    background: var(--tangerine-tint); box-shadow: inset 0 0 0 2px var(--tangerine-deep);
}
.entitlement-impact-grid > div.is-changed { background: var(--sky-tint); box-shadow: inset 0 0 0 2px var(--sky-deep); }
/* What a save would change: a row for each field (what it will be, and what it was), the changed ones in sky. */
.entitlement-impact-grid > div {
    grid-template-columns: 84px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 6px 10px; background: transparent; border-radius: 10px;
}
.entitlement-impact-grid > div + div { margin-top: 4px; }
.entitlement-impact-grid > div > strong { font-size: 18px; }
.entitlement-impact-grid > div > small { text-align: right; }
.entitlement-impact-grid > div.is-changed { background: var(--sky-tint); }

/* ------------------------------------------------------------------ the plan: what to do next */
.platform-action-list { display: grid; }
.platform-action-item {
    appearance: none; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    column-gap: 18px; row-gap: 2px; align-items: start; width: 100%; padding: 12px 10px;
    font: inherit; text-align: left; color: var(--ink); background: transparent;
    border: 0; border-top: 2px solid var(--wash-2); border-radius: 0; cursor: pointer;
}
.platform-action-item:first-child { border-top: 0; }
.platform-action-item:hover, .platform-action-item:focus-visible { background: var(--wash); }
.platform-action-item:focus-visible { outline-offset: -4px; }
.platform-action-item .plan-flags { grid-column: 1; grid-row: 1 / span 3; display: grid; justify-items: start; gap: 4px; }
.platform-action-item .plan-flags .tone-tag { margin-top: 0; }
.platform-action-item > strong { grid-column: 2; font: 600 20px / 1.25 var(--display); }
.platform-action-item > span:not(.plan-flags):not(.plan-go) { grid-column: 2; }
.platform-action-item > small { grid-column: 2; font: 400 16px / 1.35 var(--body); color: var(--ink-2); }
.platform-action-item .plan-go { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: inline-flex; align-items: center; gap: 8px; font: 600 16px / 1 var(--display); white-space: nowrap; }
.platform-action-list .empty { margin: 4px 0; }

/* ------------------------------------------------------------------ the free-plan forecast */
.bandwidth-budget:not(:empty) { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--wash-2); }
.budget-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.budget-panel-header > div:first-child { min-width: 0; }
.budget-panel-header p { font: 400 16px / 1.35 var(--body); color: var(--ink-2); }
.budget-percent { display: grid; justify-items: end; gap: 2px; flex: none; }
.budget-percent > strong { font: 700 32px / 1 var(--display); }
.budget-percent .tone-tag { margin-top: 0; }
.budget-meter { height: 22px; margin-bottom: 12px; overflow: hidden; background: var(--wash); border: 2px solid var(--wash-2); border-radius: 12px; }
.budget-meter i { display: block; height: 100%; min-width: 4px; background: var(--sky); border-right: 2px solid var(--sky-deep); }
.budget-panel.is-warning .budget-meter i { background: var(--gold); border-right-color: var(--gold-deep); }
.budget-panel.is-danger .budget-meter i { background: var(--tangerine); border-right-color: var(--tangerine-deep); }

/* ------------------------------------------------------------------ the overview's lists */
.platform-overview-grid { display: grid; gap: 0; min-width: 0; }
.feature-gate-list { display: grid; gap: 0; }
.feature-gate-card { padding: 14px 0; border-top: 2px solid var(--wash-2); }
.feature-gate-card:first-child { padding-top: 0; border-top: 0; }
.feature-gate-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.feature-gate-header > div { display: grid; min-width: 0; }
.feature-gate-header strong { font: 600 20px / 1.25 var(--display); }
.feature-gate-enforcement { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-gate-enforcement span { padding: 2px 10px; font: 600 16px / 1.2 var(--display); background: var(--wash); border-radius: 10px; }
.feature-gate-blocked { display: grid; gap: 0; margin-top: 12px; }
.feature-gate-blocked > strong { font: 600 18px / 1.3 var(--display); margin-bottom: 4px; }

/* ------------------------------------------------------------------ rows you can open */
/* An account in a list: a button across the page; who, then how much, then what to do, with a pale rule between. */
:is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result, .feature-gate-account) {
    appearance: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 20px; align-items: start; width: 100%; padding: 12px 10px; text-align: left;
    font: inherit; color: var(--ink); background: transparent;
    border: 0; border-top: 2px solid var(--wash-2); border-radius: 0; cursor: pointer;
}
:is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result, .feature-gate-account):first-child { border-top: 0; }
:is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result, .feature-gate-account):hover,
:is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result, .feature-gate-account):focus-visible { background: var(--wash); }
:is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result, .feature-gate-account):focus-visible { outline-offset: -4px; }
:is(.attention-main, .attention-note, .exception-review-main, .exception-review-note, .entitlement-account-main,
    .entitlement-account-status, .account-lookup-main, .account-lookup-meta) { display: grid; gap: 3px; min-width: 0; align-content: start; }
:is(.attention-main, .exception-review-main, .entitlement-account-main, .account-lookup-main) > strong { font: 600 19px / 1.25 var(--display); overflow-wrap: anywhere; }
:is(.attention-note, .exception-review-note) > strong { font: 600 18px / 1.25 var(--display); }
:is(.attention-note, .exception-review-note, .entitlement-account-status, .account-lookup-meta) > span { overflow-wrap: anywhere; }
:is(.attention-main, .exception-review-main, .entitlement-account-main) > .usage-pill-row,
:is(.entitlement-account-status, .account-lookup-meta) > .usage-pill { justify-self: start; margin-top: 2px; }
:is(.attention-metrics, .exception-review-metrics, .entitlement-account-metrics, .account-lookup-metrics) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0;
}
:is(.attention-metrics, .exception-review-metrics, .entitlement-account-metrics, .account-lookup-metrics) > span { display: grid; align-content: start; gap: 1px; min-width: 0; }
:is(.attention-metrics, .exception-review-metrics, .entitlement-account-metrics, .account-lookup-metrics) strong { font: 700 18px / 1.2 var(--display); overflow-wrap: anywhere; }
:is(.attention-metrics, .exception-review-metrics, .entitlement-account-metrics, .account-lookup-metrics) small { font: 400 16px / 1.25 var(--body); color: var(--ink-2); }
.attention-list .empty, .exception-review-list .empty, .entitlement-account-list .empty, .audit-list-panel .empty, .directory-list .empty { margin: 4px 0; }
/* A feature gate's blocked account sits in its card as a smaller row. */
.feature-gate-account { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 10px; }
.feature-gate-account > span { display: grid; gap: 2px; min-width: 0; }
.feature-gate-account strong { font: 600 18px / 1.25 var(--display); overflow-wrap: anywhere; }
.feature-gate-account small { font: 400 16px / 1.3 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ usage: the pages, and the table */
.usage-page-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.usage-page-controls .cla-btn { flex: none; }
.usage-page-summary { min-width: 0; font: 600 17px / 1.25 var(--display); color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.usage-table-wrap { overflow-x: auto; padding-bottom: 4px; }
.admin-usage-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.usage-col-account { width: 32%; }
.usage-col-date { width: 13%; }
.usage-col-active { width: 10%; }
.usage-col-ops { width: 11%; }
.usage-col-data { width: 13%; }
.usage-col-stored { width: 21%; }
.admin-usage-table th, .admin-usage-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--wash-2); overflow-wrap: anywhere; }
.admin-usage-table th { font: 600 17px / 1.2 var(--display); color: var(--ink-2); }
.admin-usage-table td { font: 400 17px / 1.35 var(--body); }
.admin-usage-table tbody tr { cursor: pointer; }
.admin-usage-table tbody tr:hover td { background: var(--wash); }
.admin-usage-table tbody tr:focus-visible { outline-offset: -4px; }
.admin-usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-account { display: grid; gap: 3px; min-width: 0; }
.usage-account strong, .admin-usage-table td strong { font: 600 17px / 1.25 var(--display); overflow-wrap: anywhere; }
.usage-date { display: inline-block; font-weight: 700; }
.usage-largest { color: var(--ink-2); font-size: 16px; overflow-wrap: anywhere; }
.usage-cause { display: grid; gap: 1px; margin-top: 4px; min-width: 0; }
.usage-cause strong { font: 600 17px / 1.25 var(--display); }
.usage-cause span, .usage-cause small { font: 400 16px / 1.3 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }

/* Tables in a card or a panel: pale rules, no boxes. */
.detail-table, .security-posture-table { overflow-x: auto; padding-bottom: 4px; }
.detail-table table, .security-posture-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.detail-table th, .detail-table td, .security-posture-table th, .security-posture-table td {
    padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--wash-2); overflow-wrap: anywhere;
}
.detail-table th, .security-posture-table th { font: 600 17px / 1.2 var(--display); color: var(--ink-2); white-space: nowrap; }
.detail-table td, .security-posture-table td { font: 400 17px / 1.35 var(--body); }
.detail-table td strong, .security-posture-table td strong { font: 600 18px / 1.25 var(--display); }
.detail-table td:first-child { min-width: 170px; }
.detail-table tbody tr:last-child td, .security-posture-table tbody tr:last-child td { border-bottom: 0; }
.security-flag {
    display: inline-flex; align-items: center; padding: 1px 10px; font: 600 16px / 1.3 var(--display); white-space: nowrap;
    border: 2px solid; border-radius: 10px;
}
.security-flag.ok { background: var(--lime-tint); border-color: var(--lime-deep); }
.security-flag.warning { background: var(--gold-tint); border-color: var(--gold-deep); }
.security-flag.danger { background: var(--tangerine-tint); border-color: var(--tangerine-deep); }

/* ------------------------------------------------------------------ school requests */
.directory-list { display: grid; }
.directory-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-top: 2px solid var(--wash-2); }
.directory-item:first-child { border-top: 0; }
.request-words { display: grid; gap: 2px; min-width: 0; }
.request-words strong { font: 600 22px / 1.25 var(--display); overflow-wrap: anywhere; }
.request-words p { font: 400 17px / 1.35 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.request-acts { flex: none; display: flex; align-items: center; gap: 10px; }
.request-acts .cla-btn { margin-bottom: var(--ctl-small-lift); }

/* ------------------------------------------------------------------ activity (the audit list) */
.audit-list { display: grid; gap: 0; }
.audit-item { display: grid; gap: 2px; padding: 10px 0; border-top: 2px solid var(--wash-2); min-width: 0; }
.audit-item:first-child { border-top: 0; }
.audit-item strong { font: 600 19px / 1.25 var(--display); }
.audit-item span { overflow-wrap: anywhere; }
.audit-item-card { grid-template-columns: minmax(0, auto) auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 3px; padding: 12px 0; }
.audit-item-card > .usage-muted:nth-of-type(2) { justify-self: end; text-align: right; }
.audit-item-card > span:nth-of-type(n+3) { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ privacy */
.guardrail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 8px; }
.guardrail-item { display: grid; align-content: start; justify-items: start; gap: 6px; padding: 14px 16px; background: var(--wash); border-radius: var(--r-m); min-width: 0; }
.guardrail-item strong { font: 600 20px / 1.25 var(--display); }
.guardrail-item > span:not(.ic) { font: 400 17px / 1.4 var(--body); color: var(--ink-2); }
.privacy-manifest { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--wash-2); }
.privacy-manifest-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.privacy-manifest-header > div { min-width: 0; }
.privacy-manifest-header h3 { font: 600 20px / 1.2 var(--display); }
.privacy-manifest-header p { font: 400 16px / 1.35 var(--body); color: var(--ink-2); }
.privacy-manifest-summary { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.privacy-manifest-summary span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px; font: 400 16px / 1.2 var(--body); color: var(--ink-2); background: var(--wash); border-radius: 10px; }
.privacy-manifest-summary strong { font: 700 17px / 1 var(--display); color: var(--ink); }
.privacy-surface-list { display: grid; }
.privacy-surface-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 8px 24px; padding: 14px 0; border-top: 2px solid var(--wash-2); }
.privacy-surface-card:first-child { border-top: 0; }
.privacy-surface-card > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.privacy-surface-card > div strong { font: 600 19px / 1.25 var(--display); }
.privacy-surface-card > div span { font: 400 16px / 1.35 var(--body); color: var(--ink-2); }
.privacy-surface-card dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; min-width: 0; }
.privacy-surface-card dt { font: 600 16px / 1.35 var(--display); color: var(--ink-2); }
.privacy-surface-card dd { font: 400 16px / 1.35 var(--body); overflow-wrap: anywhere; }
.security-posture { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--wash-2); display: grid; gap: 14px; }
.security-posture:empty { display: none; }

/* ------------------------------------------------------------------ the account detail panel */
.account-detail-overlay {
    position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink);
    width: min(1000px, calc(100vw - 32px)); max-width: none; height: min(calc(100dvh - 32px), 900px); max-height: none; overflow: visible;
    font: 400 18px / 1.4 var(--body); letter-spacing: 0.01em;
}
.account-detail-overlay:not([open]) { display: none; }
.account-detail-overlay::backdrop { background: var(--scrim); }
.account-detail-overlay:focus { outline: none; }
.account-detail-panel {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
    background: var(--page); border: var(--edge) solid var(--ink); border-radius: var(--r-l); box-shadow: 0 6px 0 var(--ink);
}
.account-detail-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 12px 28px; border-bottom: 2px solid var(--wash-2); }
.account-detail-words { display: grid; gap: 2px; min-width: 0; }
.account-detail-words .pg-h2 { overflow-wrap: anywhere; }
.account-detail-header .cla-btn { flex: none; }
.account-detail-body { container: adm / inline-size; flex: 1 1 auto; min-height: 0; padding: 0 28px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* The message about saving stays at the top of the panel's scroll, so it is seen wherever the Save button is. */
.detail-status { position: sticky; top: 0; z-index: 2; max-width: none; margin: 0 0 10px; padding: 10px 14px; font-size: 18px; box-shadow: none; }
.detail-status.hidden { display: none; }
.account-detail-body > .detail-status { margin-top: 12px; }
.account-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding-top: 14px; }
.detail-block { min-width: 0; margin-bottom: 8px; }
.detail-block-wide { grid-column: 1 / -1; margin-top: 10px; padding-top: 18px; border-top: 2px solid var(--wash-2); }
.detail-block > .pg-h3 { margin-bottom: 8px; }
.detail-list { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; }
.detail-list dt { font: 600 16px / 1.5 var(--display); color: var(--ink-2); }
.detail-list dd { overflow-wrap: anywhere; }
.entitlement-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.entitlement-form .compact-field { flex: none; min-width: 0; }
.entitlement-notes, .entitlement-impact-preview, .entitlement-save { grid-column: 1 / -1; }
.entitlement-save { display: flex; justify-content: flex-end; }
.entitlement-impact-preview { display: grid; gap: 8px; padding: 12px 14px; background: var(--page); border: 2px solid var(--wash-2); border-radius: var(--r-s); }
.entitlement-impact-preview:empty { display: none; }
.entitlement-impact-preview.is-warning { background: var(--gold-tint); border-color: var(--gold-deep); }
.entitlement-impact-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.entitlement-impact-header strong { font: 600 19px / 1.25 var(--display); }
.entitlement-impact-header span, .entitlement-impact-preview p { font: 400 16px / 1.4 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.entitlement-impact-preview .entitlement-impact-warning { font-weight: 700; color: var(--ink); padding-left: 10px; border-left: 4px solid var(--tangerine-deep); }

.usage-driver-list { display: grid; }
.usage-driver-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 18px; padding: 10px 0; border-top: 2px solid var(--wash-2); }
.usage-driver-row:first-child { border-top: 0; }
.usage-driver-row > span { grid-row: 1 / span 2; font: 600 16px / 1.5 var(--display); color: var(--ink-2); }
.usage-driver-row > strong { grid-column: 2; font: 600 19px / 1.3 var(--display); overflow-wrap: anywhere; }
.usage-driver-row > small { grid-column: 2; font: 400 16px / 1.4 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }

.account-risk-panel, .account-action-panel { display: grid; gap: 12px; }
.account-risk-header, .account-action-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-risk-header > div, .account-action-header > div { display: grid; gap: 2px; min-width: 0; }
.account-risk-header strong, .account-action-header strong { font: 600 20px / 1.25 var(--display); }
.account-risk-header div > span, .account-action-header div > span { color: var(--ink-2); }
.account-action-list { display: grid; }
.account-action-item { display: grid; gap: 2px; padding: 10px 12px; border-top: 2px solid var(--wash-2); }
.account-action-item:first-child { border-top: 0; }
.account-action-item > span { font: 600 16px / 1.3 var(--display); color: var(--ink-2); }
.account-action-item > strong { font: 600 19px / 1.3 var(--display); }
.account-action-item > small { font: 400 16px / 1.4 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.account-action-item.is-warning { background: var(--gold-tint); box-shadow: inset 4px 0 0 var(--gold-deep); }
.account-action-item.is-danger { background: var(--tangerine-tint); box-shadow: inset 4px 0 0 var(--tangerine-deep); }

.daily-usage-list { display: grid; }
.daily-usage-row { display: grid; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 10px 0; border-top: 2px solid var(--wash-2); }
.daily-usage-row:first-child { border-top: 0; }
.daily-usage-date, .daily-usage-meta { display: grid; gap: 1px; min-width: 0; }
.daily-usage-date strong { font: 600 18px / 1.25 var(--display); }
.daily-usage-date span, .daily-usage-meta span { font: 400 16px / 1.3 var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.daily-usage-bars { display: grid; gap: 6px; min-width: 0; }
.daily-usage-bar-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; align-items: center; gap: 10px; }
.daily-usage-bar-line span { font: 600 16px / 1.2 var(--display); color: var(--ink-2); }
.daily-usage-bar-line strong { font: 600 16px / 1.2 var(--display); text-align: right; }
.daily-usage-bar { height: 16px; overflow: hidden; background: var(--wash); border-radius: 8px; }
.daily-usage-bar i { display: block; height: 100%; min-width: 3px; background: var(--sky); border-radius: 8px; }
.daily-usage-bar.is-reads i { background: var(--grape); }

/* ------------------------------------------------------------------ narrower than the full panel (a phone, or a small window) */
@container adm (max-width: 800px) {
    :is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result) > :nth-child(3) { grid-column: 1 / -1; }
    .platform-action-item { grid-template-columns: 140px minmax(0, 1fr); }
    .platform-action-item .plan-go { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 6px; }
    .privacy-surface-card { grid-template-columns: minmax(0, 1fr); }
    .daily-usage-row { grid-template-columns: minmax(0, 1fr); }
    .account-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .detail-block:nth-child(2) { margin-top: 10px; padding-top: 18px; border-top: 2px solid var(--wash-2); }
}
@container adm (max-width: 560px) {
    :is(.attention-item, .exception-review-item, .entitlement-account-item, .account-lookup-result) { grid-template-columns: minmax(0, 1fr); }
    .platform-action-item { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .platform-action-item .plan-flags, .platform-action-item > strong, .platform-action-item > span:not(.plan-flags):not(.plan-go), .platform-action-item > small, .platform-action-item .plan-go { grid-column: 1; grid-row: auto; }
    .platform-action-item .plan-flags { display: flex; flex-wrap: wrap; align-items: center; }
    .directory-item { flex-direction: column; align-items: stretch; }
    .request-acts { justify-content: flex-end; }
    .entitlement-form { grid-template-columns: minmax(0, 1fr); }
    .entitlement-impact-grid > div { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
    .usage-driver-row { grid-template-columns: minmax(0, 1fr); }
    .usage-driver-row > span { grid-row: auto; }
    .usage-driver-row > strong, .usage-driver-row > small { grid-column: 1; }
    .detail-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .detail-list dd { margin-bottom: 8px; }
    .usage-page-controls { flex-wrap: wrap; }
    .usage-page-summary { order: -1; flex: 1 1 100%; }
    .usage-page-controls .cla-btn { flex: 1 1 0; }
    .account-lookup-form { flex-wrap: wrap; }
    .account-lookup-form .pg-search { flex-basis: 100%; max-width: none; }
    .admin-controls .pg-search { flex-basis: 100%; max-width: none; }
    .compact-field { flex: 1 1 140px; }
    .budget-panel-header, .platform-action-header, .exception-review-header, .attention-queue-header { flex-wrap: wrap; }
    .exception-review-header .cla-btn, .attention-queue-header .cla-btn { align-self: flex-start; }
    .audit-item-card { grid-template-columns: minmax(0, 1fr); }
    .audit-item-card > .usage-muted:nth-of-type(2) { justify-self: start; text-align: left; }

    /* A table becomes a card for each row. */
    .usage-table-wrap, .detail-table { overflow-x: visible; }
    .admin-usage-table, .detail-table table { min-width: 0; table-layout: auto; }
    .admin-usage-table, .admin-usage-table tbody, .admin-usage-table tr, .admin-usage-table td,
    .detail-table table, .detail-table tbody, .detail-table tr, .detail-table td { display: block; width: 100%; min-width: 0; }
    .admin-usage-table colgroup, .admin-usage-table thead, .detail-table thead { display: none; }
    .admin-usage-table tbody tr, .detail-table tbody tr { padding: 10px 0; border-top: 2px solid var(--wash-2); }
    .admin-usage-table tbody tr:first-child, .detail-table tbody tr:first-child { border-top: 0; }
    .admin-usage-table th, .admin-usage-table td, .detail-table td { padding: 6px 4px; border-bottom: 0; }
    .admin-usage-table td::before, .detail-table td[data-label]::before {
        content: attr(data-label); display: block; font: 600 16px / 1.3 var(--display); color: var(--ink-2);
    }
}

/* ------------------------------------------------------------------ a phone */
@media (max-width: 899px) {
    /* The side list keeps its own height: it must not shrink under the sections and let the panel climb over them. */
    .cla-admin .pg-side { flex: none; min-height: auto; }
    .cla-admin .pg-pane { flex: 1 1 0; }
    .cla-admin .pg-foot { display: contents; }
    .cla-admin .pg-foot .pg-home { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; }
    .cla-admin .pg-foot .pg-about { grid-column: 1; grid-row: 3; align-self: center; font-size: 16px; }
    .cla-admin .pg-foot .pg-auth { grid-column: 2; grid-row: 3; justify-self: end; margin-bottom: var(--ctl-small-lift); }
    /* Eight sections, three to a row (two columns each of six): the last two, Kit's island and Videos, share their row. */
    .cla-admin .pg-secs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .cla-admin .pg-sec { min-height: 64px; grid-column: span 2; }
    .cla-admin .pg-sec[data-go="island"], .cla-admin .pg-sec[data-go="videos"] { grid-column: span 3; }
    .cla-admin .pg-sec > .pg-arrow { display: none; }
    /* The panel's buttons are the controls standard's small size here, side by side along the header. */
    .cla-admin .pg-top-acts { width: 100%; gap: 10px; }
    .cla-admin .pg-top-acts .cla-btn:only-child { flex: 0 0 auto; margin-left: auto; }
    .cla-admin .pg-top-acts .cla-btn {
        flex: 1 1 0; margin-bottom: var(--ctl-small-lift); padding: 0 12px;
        --l: var(--ctl-small-lift); min-height: var(--ctl-small-h); font: var(--ctl-small-font); border-radius: var(--ctl-small-r);
    }
    .pg-locked { align-items: flex-start; padding: 24px 16px; }
    .account-detail-overlay { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
    .pg-ask h2 { font-size: 24px; overflow-wrap: anywhere; }
    .account-detail-header { flex-direction: column-reverse; align-items: stretch; gap: 6px; padding: 12px 12px 10px 16px; }
    .account-detail-header .cla-btn { align-self: flex-end; }
    .account-detail-body { padding: 0 16px 20px; }
}

/* A big board: more room round the page and a wider panel. */
@media (min-width: 1600px) {
    .account-detail-overlay { width: min(1100px, calc(100vw - 64px)); }
}

/* ------------------------------------------------------------------ Kit's island */
/* The 3D test's picture beside a few words and its Play button (labs/kits-island/ is the game). */
.island-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 24px; align-items: start; max-width: 1080px; }
.island-shot { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--ink); background: #4d9de0; }
.island-words { display: grid; gap: 12px; align-content: start; }
.island-list { margin: 0; padding-left: 22px; list-style: disc; display: grid; gap: 4px; font: 400 16px / 1.35 var(--body); color: var(--ink-2); }
.island-play { justify-self: start; margin-top: 4px; }
@media (max-width: 900px) {
    .island-card { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Videos */
/* Every film in 4K (labs/videos/), one card each: a still from it, its words, and a Watch and a Download for each shape.
   The list is written by scripts/admin-videos.mjs. */
.film-count { margin-bottom: 12px; }
.film-list { display: grid; gap: 14px; max-width: 1080px; }
/* Relative, so each button's hidden words (.sr-only) are placed inside the card and the list's scroll, not on the page. */
.film { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px; background: var(--wash); border-radius: var(--r-m); }
.film-shot { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #4d9de0; }
.film-words { display: grid; gap: 6px; min-width: 0; }
.film-name { margin: 0; font: 600 20px / 1.2 var(--display); color: var(--ink); }
.film-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.film-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.film-shape { flex: 0 0 250px; font: 400 16px / 1.3 var(--body); color: var(--ink-2); }
.film-shape b { font: 600 17px / 1.3 var(--display); color: var(--ink); }
.film-size { font-weight: 400; }
.cla-admin .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
    .film { grid-template-columns: minmax(0, 1fr); }
    .film-shape { flex-basis: 100%; }
}