/* The screens' typeface, the owner's choice from E.more V.0.79 (DEC-194): AGC in three weights, each face covering the
   weights around it so nothing is drawn thicker or thinner by the browser — light for the large numbers, regular for
   what is read and pressed, bold for titles and what stands out (500 reads regular, 600 bold). The contracts and the
   official letters keep their own type (Alexandria, in their frozen papers). AGC has no Latin letters: a code or a
   name in English is drawn by the next typeface in --font. */
@font-face { font-family: "AGC"; src: url("fonts/agc/AGCLight.ttf") format("truetype"); font-weight: 100 300; font-display: swap; }
@font-face { font-family: "AGC"; src: url("fonts/agc/AGCRegular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "AGC"; src: url("fonts/agc/AGCBold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }

/* The look the owner chose (DEC-175): a light workspace on a soft grey page, the identity's blue and red where something
   is chosen, pressed or warned of, rounded corners and hairlines instead of shadows. Every colour and size below is a
   token, and the screens take them from here and from EMoreTheme only (ui-guidelines §1). */
:root {
    --brand: #001392;
    --brand-deep: #000C63;
    --brand-lift: #2A3CC4;
    --brand-soft: #ECEEFC;
    --wash: #F4F5F9;
    --sunk: #F7F8FC;
    --surface: #FFFFFF;
    --red: #EC1B23;
    /* The identity's red where white words sit on it — the main button, the page you are on — one step deeper, so they
       read at 5.6 rather than 4.4 (normal text needs 4.5). */
    --red-strong: #CF1219;
    --red-wash: #FDEAEB;
    --rail-text: #E8EBFF;
    --rail-quiet: #B7BEF2;
    --rail-line: rgba(255, 255, 255, .14);
    --ink: #0B1030;
    --ink-2: #4A5279;
    --ink-3: #697090;
    --line: #E3E6EF;
    /* A box's edge, where something is typed or chosen: 3.4 against white, so it reads as a box (WCAG 1.4.11 asks 3). */
    --field-line: #858BA8;
    --radius: 10px;
    --radius-lg: 12px;
    --font: AGC, "Segoe UI", Tahoma, Arial, sans-serif;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    /* What the badges and the money of a group say in colour, beside their word: making money, near the line, losing. */
    --good: #0A6B3D;
    --good-wash: #E4F4EC;
    --warn: #7A5000;
    --warn-wash: #FBF1DF;
    --bad: #B3121A;
    /* A colour per subject on the groups' cards (DEC-197), by the subject's place in the subjects list: deep enough for
       white words on it (4.5 or more), with a soft wash of the same for its icon and the teacher's letters. */
    --subject-0: #1D4ED8;
    --subject-0-wash: #E8EFFE;
    --subject-1: #047857;
    --subject-1-wash: #E3F5EE;
    --subject-2: #C2410C;
    --subject-2-wash: #FFEFE4;
    --subject-3: #BE185D;
    --subject-3-wash: #FCE8F2;
    --subject-4: #0F766E;
    --subject-4-wash: #E1F4F1;
    --subject-5: #A84D08;
    --subject-5-wash: #FBF0E0;
    --subject-6: #6D28D9;
    --subject-6-wash: #EFE9FD;
    --subject-7: #3F6212;
    --subject-7-wash: #EEF5E1;
    --subject-8: #0E7490;
    --subject-8-wash: #E2F3F8;
    --subject-9: #001392;
    --subject-9-wash: #ECEEFC;
    --ease: cubic-bezier(.22, .61, .36, 1);
    color-scheme: only light;
}

html, body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--surface);
    font-variant-numeric: tabular-nums;
}

h1:focus {
    outline: none;
}

/* Page headings: one title, bold, a short quiet line under it (DEC-185). */
.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 .2rem;
}

.page-subtitle {
    color: var(--ink-3);
    font-size: .8rem;
    margin: 0 0 1.25rem;
}

/* The one main action of a screen in the identity's red (DEC-185); every other button stays as it is. */
.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled) {
    background-color: var(--red-strong);
}

.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):hover {
    background-color: #B00F15;
}

/* A number at a glance (StatCard): what it counts, the number, and a line under it — a comparison or a short trend. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
}

@media (max-width: 600px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-card {
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.stat-label {
    color: var(--ink-2);
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

/* The icon in a small chip of its colour beside what is counted (DEC-185). */
.stat-chip {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.stat-chip .mud-icon-root {
    font-size: 1.15rem;
}

.stat-chip-good { background: #E4F4EC; color: #0A6B3D; }
.stat-chip-red { background: var(--red-wash); color: #B3121A; }
.stat-chip-warn { background: #FBF1DF; color: #7A5000; }

/* The large number in light (DEC-194): at this size the thin face reads clearly, and the size alone makes it stand out. */
.stat-value {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.35;
}

.stat-unit {
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-3);
    margin-inline-start: .25rem;
}

.stat-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--ink-3);
}

/* A trend under a number: the line and a soft area beneath it, the latest month marked. Read right to left like the
   analytics columns, so the latest month sits on the left (DEC-173). */
.sparkline {
    width: 100%;
    height: 2.1rem;
    transform: scaleX(-1);
}

.sparkline .area { fill: var(--series-1); opacity: .1; }
.sparkline .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* The home page (DEC-175): sections each under a quiet heading, and the panels beside each other where there is room. */
.home-section {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.home-section-title,
.home-panel-title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

.home-panel-title {
    margin-bottom: .5rem;
}

.home-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.home-panel {
    min-width: 0;
}

/* What waits on you, one line each: what it is, and how many, opening the screen where it is dealt with. */
.todo-list {
    display: flex;
    flex-direction: column;
}

.todo-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .35rem;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
}

.todo-line:last-child {
    border-bottom: 0;
}

.todo-line:hover,
.todo-line:focus-visible {
    background: var(--sunk);
}

.todo-icon {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: #FBF1DF;
    color: #8A5A00;
}

.todo-title {
    flex: 1;
    min-width: 0;
}

.todo-count {
    font-weight: 600;
    font-size: 1rem;
}

/* A change beside a number: up in green, down in red, said in words too so the colour is never alone (ui-guidelines §7). */
.delta {
    border-radius: 999px;
    padding: 0 .45rem;
    font-weight: 600;
    font-size: .75rem;
    background: var(--sunk);
    color: var(--ink-2);
}

.delta-up { background: #E5F4EC; color: #0A6B3D; }
.delta-down { background: var(--red-wash); color: #B3121A; }

/* Sign-in pages (static, no MudBlazor interactivity) */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--wash);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(11, 16, 48, .07);
    padding: 1.75rem 1.5rem;
}

.auth-brand {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    padding: .35rem .75rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    direction: ltr;
}

.auth-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.auth-hint {
    color: var(--ink-2);
    margin: -.5rem 0 1rem;
}

.auth-alert {
    background: var(--red-wash);
    color: #C4141B;
    border-radius: var(--radius);
    padding: .6rem .75rem;
    margin-bottom: 1rem;
}

/* A notice, not a failure. The session running out is not something the person did wrong, and red would
   tell them it was (DEC-039). */
.auth-note {
    background: var(--wash);
    color: var(--ink-2);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: .6rem .75rem;
    margin-bottom: 1rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.auth-form label {
    font-weight: 600;
    font-size: .9rem;
    margin-top: .5rem;
}

.auth-input {
    font: inherit;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: .55rem .7rem;
    text-align: right;
    transition: border-color .16s var(--ease);
}

.auth-input:focus {
    outline: none;
    border-color: var(--brand);
}

.auth-validation, .validation-message {
    color: var(--red);
    font-size: .85rem;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400 !important;
}

.auth-button {
    font: inherit;
    font-weight: 600;
    margin-top: 1rem;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    padding: .65rem;
    cursor: pointer;
    transition: background .16s var(--ease);
}

.auth-button:hover {
    background: var(--brand-lift);
}

/* The second sign-in step (S-03): the code, the picture for the app, the key by hand, and the recovery codes. */
/* An English name inside an Arabic line, kept in one piece and in its own order. */
.auth-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.auth-code {
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: .2em;
}

.auth-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.25rem 0 0;
}

.auth-links a, .auth-link-button {
    font: inherit;
    color: var(--brand);
    background: none;
    border: 0;
    padding: .35rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-button-link {
    display: block;
    text-align: center;
    text-decoration: none;
}

.auth-button-quiet {
    background: #fff;
    color: var(--brand);
    border: 1.5px solid var(--brand);
}

.auth-button-quiet:hover {
    background: var(--wash);
}

.two-step-steps {
    padding-inline-start: 1.2rem;
    margin: 0 0 .5rem;
    line-height: 1.7;
}

.two-step-steps li {
    margin-bottom: .6rem;
}

.two-step-qr {
    display: block;
    margin: .6rem auto;
    image-rendering: pixelated;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.two-step-key-label {
    display: block;
    font-size: .9rem;
    color: var(--ink-2);
}

.two-step-key {
    display: block;
    margin-top: .3rem;
    padding: .5rem .6rem;
    background: var(--wash);
    border-radius: var(--radius);
    font-size: 1rem;
    letter-spacing: .05em;
    word-break: break-word;
    user-select: all;
    text-align: left;
}

.two-step-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem .75rem;
    list-style: none;
    padding: .75rem;
    margin: 0 0 .5rem;
    background: var(--wash);
    border-radius: var(--radius);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1rem;
    text-align: center;
}

.two-step-action {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .75rem;
}

.two-step-effect {
    font-size: .85rem;
    color: var(--ink-2);
}

@media print {
    .auth-page { background: #fff; min-height: 0; }
    .auth-card { border: 0; box-shadow: none; }
    .auth-link-button, .auth-button-link { display: none; }
}

.blazor-error-boundary {
    background: var(--red);
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "حصلت مشكلة في الجزء ده من الصفحة.";
    }

/* Screens */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.page-header .page-subtitle {
    margin-bottom: 0;
}

.muted {
    color: var(--ink-3);
    font-size: .85rem;
}

.mono {
    font-family: Consolas, "Courier New", monospace;
}

.ltr-field input,
.ltr-field textarea {
    direction: ltr;
    text-align: left;
}

.temp-password {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.5rem;
    letter-spacing: .08em;
    text-align: center;
    background: var(--wash);
    border: 1.5px dashed var(--brand);
    border-radius: var(--radius);
    padding: .75rem;
    user-select: all;
}

.permission-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem 0;
    border-bottom: 1px solid var(--line);
}

.permission-choice {
    max-width: 11rem;
}

.day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
}

/* The rail (DEC-185): the menu on the identity's navy, its logo at the top, who is signed in under it, the way out at
   the foot. On a phone it comes out over the page from the bar's button; the bar is the phone's only. */
.mud-layout .mud-appbar.phone-bar {
    display: none;
}

.phone-bar-logo {
    height: 2.1rem;
    width: auto;
    margin-inline-start: .5rem;
}

.mud-main-content.app-main {
    padding-top: 0;
}

/* The page drawn before it is live (MainLayout): it takes no press yet, so it says so. Nothing shows for a quick start;
   after .4s a thin bar in the identity's blue runs along the top until the page answers. No box of its own. */
.app-shell {
    display: contents;
}

.app-shell[inert]::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 2000;
    height: 3px;
    background: var(--brand);
    opacity: 0;
    transform-origin: right;
    animation: shell-show 0s linear .4s forwards, shell-wait 1.2s var(--ease) infinite alternate;
}

body:has(.app-shell[inert]) {
    cursor: progress;
}

@keyframes shell-show {
    to { opacity: 1; }
}

@keyframes shell-wait {
    from { transform: scaleX(.15); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell[inert]::before {
        animation: shell-show 0s linear .4s forwards;
    }
}

@media (max-width: 959.98px) {
    .mud-layout .mud-appbar.phone-bar {
        display: flex;
    }

    .mud-main-content.app-main {
        padding-top: var(--mud-appbar-height);
    }
}

.mud-layout .mud-drawer.app-rail .mud-drawer-content {
    display: flex;
    flex-direction: column;
    padding: .9rem .25rem .75rem;
}

.rail-logo {
    display: flex;
    justify-content: center;
    padding: .25rem 0 .75rem;
}

.rail-logo img {
    width: 10.5rem;
    height: auto;
}

.rail-who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 .75rem .5rem;
    padding: .25rem .25rem .6rem;
    border-bottom: 1px solid var(--rail-line);
}

.rail-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-tools {
    display: flex;
    align-items: center;
    color: var(--rail-text);
}

.rail-foot {
    margin-top: auto;
    padding: .75rem .75rem 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-top: 1px solid var(--rail-line);
}

.rail-foot .rail-out {
    color: var(--rail-text);
    justify-content: flex-start;
}

.rail-copy {
    color: var(--rail-quiet);
    font-size: .7rem;
    text-align: center;
}

/* The menu's items: a rounded band each, light on the navy. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link {
    border-radius: var(--radius);
    margin-inline: .5rem;
    width: calc(100% - 1rem);
    padding-block: .45rem;
    font-size: .875rem;
    color: var(--rail-text);
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled):not(.active) {
    background-color: rgba(255, 255, 255, .08);
}

/* A group's title reads as a quiet label over its items, its arrow still there to fold it — light enough on the navy
   for small text. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
    font-size: .75rem;
    color: var(--rail-quiet);
    padding-block: .9rem .25rem;
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link:hover {
    background-color: transparent;
}

/* The page you are on, in the side menu: white on the identity's red, and bolder than the rest, so the mark never rests
   on colour alone (ui-guidelines §7). MudBlazor's own selectors for the active link are more specific and its weight is
   marked !important, which once made a rule like this one load and change nothing — measured, hence the longer selector
   (which outranks theirs on its own, not by coming later in the page) and the one !important. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #FFFFFF;
    background-color: var(--red-strong);
    font-weight: 600 !important;
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: #FFFFFF;
}

/* A section's line in the menu, marked as the page you are on from any of its screens (DEC-176) — the same mark as
   MudBlazor's own «active», which only knows the one address the line opens. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-item.section-on > .mud-nav-link,
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.section-on {
    color: #FFFFFF;
    background-color: var(--red-strong);
    font-weight: 600 !important;
}

.mud-layout .mud-drawer .mud-navmenu .mud-nav-item.section-on > .mud-nav-link .mud-nav-link-icon,
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link.section-on .mud-nav-link-icon {
    color: #FFFFFF;
}

/* The screens of one menu entry, as tabs over each of them (DEC-176): the one open in the identity's blue with a line
   under it and bolder, so the mark never rests on colour alone. Scrolls inside itself on a narrow screen. */
.section-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.section-tabs a {
    flex: none;
    padding: .55rem .9rem;
    color: var(--ink-2);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--radius) var(--radius) 0 0;
    white-space: nowrap;
}

.section-tabs a:hover {
    background-color: var(--sunk);
}

.section-tabs a.on {
    color: var(--brand);
    border-bottom-color: var(--red-strong);
    font-weight: 600;
}

.section-tabs a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* The arrows that open and close the menu groups take the drawer's icon colour, the one every other menu icon uses and
   which passes the 3 a control needs (DEC-057), through the same stronger selector. */
.mud-layout .mud-drawer .mud-navmenu .mud-nav-link-expand-icon {
    color: var(--mud-palette-drawer-icon);
    fill: var(--mud-palette-drawer-icon);
}

/* The two halves of the menu (DEC-174), side by side as one control: the half you are in pressed, the other a press away. */
.space-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    margin: .25rem .75rem .5rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--rail-line);
    border-radius: 10px;
}

.space-switch button {
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    color: var(--rail-text);
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: .4rem .25rem;
    cursor: pointer;
}

.space-switch button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    cursor: default;
}

.space-switch button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 1px;
}

/* Finding a screen by its name (DEC-175), with Ctrl+K from anywhere: a white field on the navy. */
.screen-search {
    margin: 0 .75rem .25rem;
}

.screen-search .mud-input.mud-input-outlined {
    background: var(--surface);
    border-radius: var(--radius);
}

/* On the navy the field says what it is for inside itself: its label stays for whoever reads the page aloud, out of
   sight, and the field's edge keeps no gap for it. */
.screen-search .mud-input-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-search .mud-input-outlined-border legend {
    width: 0 !important;
    padding: 0 !important;
}

.screen-search-hint {
    font-size: .7rem;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0 .3rem;
    direction: ltr;
    white-space: nowrap;
}

.screen-search-where {
    color: var(--ink-3);
    font-size: .78rem;
    margin-inline-start: .5rem;
}

/* The building blocks every screen uses, in the same look, set once here rather than screen by screen (ui-guidelines §10). */
.mud-paper-outlined {
    border-color: var(--line);
    border-radius: var(--radius-lg);
}

.mud-table.mud-table-outlined {
    border-color: var(--line);
    border-radius: var(--radius-lg);
}

.mud-table .mud-table-head .mud-table-cell {
    background-color: var(--sunk);
    color: var(--ink-3);
    font-weight: 500;
    font-size: .8rem;
}

.mud-table .mud-table-body .mud-table-cell {
    border-color: var(--line);
}

/* A list's own search sits inside its frame: room above it for the label that rises when you type, at every width. */
.mud-table .mud-table-toolbar {
    height: auto;
    min-height: 4rem;
    padding-top: .75rem;
}

.mud-simple-table table thead th {
    background-color: var(--sunk);
    color: var(--ink-3);
    font-weight: 500;
    font-size: .8rem;
}

.mud-alert {
    border-radius: 10px;
}

.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined {
    border-radius: var(--radius);
}

.mud-button-root.mud-button-outlined.mud-button-outlined-default,
.mud-button-root.mud-button-outlined.mud-button-outlined-inherit {
    border-color: var(--line);
    background-color: var(--surface);
}

/* A status in a list: a soft pill of its own colour rather than a ring, so a column of them reads at a glance. */
.mud-chip.mud-chip-outlined {
    border-color: transparent;
    font-weight: 500;
}

.mud-chip.mud-chip-outlined.mud-chip-color-default { background-color: var(--sunk); border-color: var(--line); }
.mud-chip.mud-chip-outlined.mud-chip-color-primary { background-color: var(--brand-soft); }
.mud-chip.mud-chip-outlined.mud-chip-color-success { background-color: #E5F4EC; }
.mud-chip.mud-chip-outlined.mud-chip-color-warning { background-color: #FBF1DF; }
.mud-chip.mud-chip-outlined.mud-chip-color-error { background-color: var(--red-wash); }
.mud-chip.mud-chip-outlined.mud-chip-color-info { background-color: #E8EBFA; }

.mud-dialog {
    border-radius: 14px;
}

.mud-tabs .mud-tabs-tabbar {
    background-color: transparent;
}

/* DEC-047: settings are read on any device and written from a computer. On a phone the write actions go, and
   a note takes their place saying where they are — so nothing disappears without a word. The same narrow
   breakpoint as the touch rule below. Marked on each control rather than guessed from its library class. */
.write-on-computer-note {
    display: none !important;
}

@media (max-width: 600px) {
    .write-on-computer {
        display: none !important;
    }

    .write-on-computer-note {
        display: flex !important;
    }
}

/* Touch targets on a finger-sized screen: 44x44 (ui-guidelines §4, settled in DEC-042). The desktop keeps
   its admin density (§1) — this sits behind a touch/narrow query and never reaches a mouse.
   Written on the elements themselves, not on one library's class names, so it covers the sign-in page
   (.auth-*), MudBlazor, and anything built later without somebody having to remember this file exists.
   Switching it off makes the phone checks fail on real controls, which is how we know it carries weight
   and is not sitting here decoratively (DEC-028). */
@media (pointer: coarse), (max-width: 600px) {
    button,
    a[href],
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    summary,
    [role="button"],
    [role="checkbox"],
    [role="switch"] {
        min-height: 44px;
    }

    /* Narrow counts too: an edit button in a table row came out 26 wide and 44 tall, which is still a miss.
       Only the controls a finger aims at — a text box is already wider than a thumb without help. */
    button,
    a[href],
    summary,
    [role="button"],
    [role="checkbox"],
    [role="switch"] {
        min-width: 44px;
    }

    /* The one place a library rule outranks the element rule above: MudBlazor's page buttons set their own
       32-pixel minimum width with a more specific selector. Named here because the general rule cannot reach it;
       the audit log's page «1» came out 32 wide. */
    .mud-pagination .mud-pagination-item > * {
        min-width: 44px;
    }

    /* A tick box 13 pixels across is smaller than a fingernail. Tapping its label already toggles it, so
       the label carries the 44 and the box itself only needs a size a person can see and aim at.
       Matched by what the label holds rather than by a class name, so MudBlazor's tick boxes and the
       sign-in page's are both covered by the one rule. */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* The registration form on paper (academy-rulings 5.1): the screen's own furniture is not part of the form. */
.print-page h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.print-page h2 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
}

.print-line {
    margin-bottom: 0.4rem;
}

/* A line under the one before it on paper: an assessment under its subject (DEC-166). Logical, so it indents from the right in Arabic. */
.print-indent {
    padding-inline-start: 1.25rem;
}

/* A certificate of appreciation (DEC-166): one to a page, centred, framed by a hairline in the identity's colour. */
.certificate {
    border: 1px solid var(--mud-palette-primary);
    padding: 2rem 1.5rem;
    text-align: center;
}

.certificate h1 {
    font-size: 2rem;
    margin: 1rem 0;
}

.certificate-logo {
    max-height: 5rem;
    max-width: 100%;
}

.certificate-company {
    font-weight: 700;
    margin-top: 0.5rem;
}

.certificate-text {
    font-size: 1.15rem;
    line-height: 2;
}

/* A paper printed while practising (DEC-148): plain and bold at its top, so it cannot be taken for a real one. */
.training-mark {
    border: 2px solid currentColor;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    margin-bottom: 1rem;
    text-align: center;
}

.print-sign {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

/* A letter's preview (HR-15): the printed page itself, in a frame of its own so its styles stay its own. */
.letter-preview {
    width: 100%;
    height: 70vh;
    min-height: 28rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: #fff;
}

/* The names a letter's text may use, each beside what it is. */
.letter-names {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
    font-size: .85rem;
}

.letter-names dt {
    font-family: Consolas, "Courier New", monospace;
    text-align: left;
}

.letter-names dd {
    margin: 0;
}

@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-container,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* A group's reports printed at once: each student on a page of their own (ACAD-24). */
    .guardian-report + .guardian-report {
        break-before: page;
    }

    /* A group's month of certificates printed at once: one to a sheet, each handed over on its own (DEC-166 (5)), like the reports. */
    .certificate + .certificate {
        break-before: page;
    }
}

/* Analytics charts (DEC-173, dataviz): thin columns from one baseline, 4px rounded data end, a 2px surface gap between
   a pair, a recessive hairline baseline; values on the chosen month's cap only, everything else in the tooltip and the
   table beside the charts. Two series: slot 1 and slot 2 of the reference palette, validated on the light surface. */
.viz-card { flex: 1 1 22rem; min-width: 0; }
.viz-columns { --series-1: #2a78d6; --series-2: #eb6834; --viz-grid: #e6e6e3; display: flex; align-items: flex-end; gap: .5rem; overflow-x: auto; padding-top: 1.25rem; }
.viz-slot { display: flex; flex-direction: column; align-items: center; flex: 1 0 2.25rem; }
.viz-plot { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 10rem; width: 100%; border-bottom: 1px solid var(--viz-grid); }
.viz-bar { width: 100%; max-width: 24px; min-height: 0; border-radius: 4px 4px 0 0; }
.viz-pair .viz-bar { max-width: 14px; }
.viz-bar:hover, .viz-bar:focus-visible { filter: brightness(1.15); outline: none; }
.viz-series-1 { background: var(--series-1, #2a78d6); }
.viz-series-2 { background: var(--series-2, #eb6834); }
.viz-cap { position: absolute; top: -1.2rem; font-size: .8rem; color: var(--ink-2); }
.viz-tick { margin-top: .25rem; font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.viz-legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--ink-2); }
.viz-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: .35rem; vertical-align: middle; }

/* The simple screens (DEC-185, DEC-186): where you are above the title, a card per question with its own short head,
   the state of a thing said in a small coloured word, and a share drawn as a short bar beside its number. */
.crumb {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--ink-3);
    font-size: .8rem;
    margin-bottom: .35rem;
}

.crumb a {
    color: var(--ink-2);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--brand);
    text-decoration: underline;
}

.state-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--sunk);
    color: var(--ink-2);
}

.state-badge.good { background: #E4F4EC; color: #0A6B3D; }
.state-badge.warn { background: #FBF1DF; color: #7A5000; }
.state-badge.red { background: var(--red-wash); color: #B3121A; }
.state-badge.info { background: var(--brand-soft); color: var(--brand); }
.state-badge.mute { background: var(--sunk); color: var(--ink-2); }

.fill-bar {
    display: inline-block;
    width: 4.5rem;
    height: .4rem;
    border-radius: 99px;
    background: var(--sunk);
    overflow: hidden;
    vertical-align: middle;
    margin-inline-end: .4rem;
}

.fill-bar i {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 99px;
    background: var(--brand);
}

.fill-bar i.low {
    background: var(--red-strong);
}

.group-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--line);
}

.group-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

@media (max-width: 959.98px) {
    .group-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.group-side {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.group-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
}

.group-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem .5rem;
}

.group-card-head h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
}

.group-marks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0 1rem 1rem;
}

.group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The line wraps rather than squeeze the name: where the hour, the state and the button leave the name less than 11rem
   (a phone, or the home page's third column on a wide screen), the state and the button take the next line, and the
   name keeps its words on one line instead of one word a line (review 10/11). */
.group-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--line);
}

.group-list-time {
    min-width: 4.2rem;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .8rem;
}

.group-list-what {
    flex: 1 1 11rem;
    min-width: 0;
}

.group-table {
    overflow-x: auto;
}

.group-table td a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.group-table td a:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* A list's filters in a card of their own over it, and how many it shows under them (DEC-186). */
.list-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
    gap: .75rem;
    align-items: end;
    padding: .25rem 1rem .85rem;
    border-radius: var(--radius-lg);
}

/* With the rail beside it a mid-sized screen has room for the four lists in a row under the search, not beside it. */
@media (max-width: 1279.98px) {
    .list-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .list-filters .list-filters-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 959.98px) {
    .list-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-filters .list-filters-search {
        grid-column: 1 / -1;
    }
}

/* The students' filters on a phone: one a row, or a chosen «تسجيل مبدئي» is cut in half beside another list. */
@media (max-width: 599.98px) {
    .list-filters.students-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The lists after the search fold behind «تصفية» on a phone, so the first student shows on the first screen; the button
   says how many are chosen, so a folded choice is never a silent one (review 10/11). From a tablet up the button is not
   there and the lists sit in the row as before: the wrapper is no box of its own. */
.list-filters .filters-toggle {
    display: none;
}

.list-filters .filters-more {
    display: contents;
}

@media (max-width: 599.98px) {
    .list-filters .filters-toggle {
        display: inline-flex;
        justify-self: start;
    }

    .list-filters .filters-more:not(.open) {
        display: none;
    }
}

/* A student on a phone in two columns, not one line a field: the name across the top, then the code and the branch, the
   grade and the payer, the state and the buttons. Every field the computer shows is still there, under its name; only
   the student's name goes without one (review 10/11). */
/* MudBlazor puts mud-xs-table on the grid at every width; its own card rules wait for a phone, so these wait too.
   Outside this query the card once showed on computers and tablets (found 10/11, the day it was merged). */
@media (max-width: 599.98px) {
    .students-grid.mud-xs-table .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .35rem .75rem;
        padding: .65rem .75rem;
        border-bottom: 1px solid var(--line);
    }

    .students-grid.mud-xs-table .mud-table-body .mud-table-cell {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .students-grid.mud-xs-table .mud-table-body .mud-table-cell::before {
        display: block;
        padding: 0;
        font-size: .75rem;
        font-weight: 500;
        color: var(--ink-3);
    }

    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الطالب"] { grid-column: 1 / -1; order: -1; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الطالب"]::before { content: none; }
    /* In a plain cell the name is inline, and the phone's 44 pixels (pointer: coarse, above) do not reach an inline link. */
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الطالب"] .row-title { display: inline-flex; align-items: center; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="كود الطالب"] { order: 1; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الفرع"] { order: 2; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الصف"] { order: 3; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="ولي الأمر الذي يدفع"] { order: 4; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[data-label="الحالة"] { order: 5; align-self: end; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell:last-child { order: 6; align-self: end; }
    .students-grid.mud-xs-table .mud-table-body .mud-table-cell[colspan] { grid-column: 1 / -1; }
}

.list-count {
    color: var(--ink-2);
    font-size: .8rem;
    margin: .25rem 0 .5rem;
}

.row-title {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.row-title:hover {
    color: var(--brand);
    text-decoration: underline;
}

.row-sub {
    color: var(--ink-3);
    font-size: .75rem;
    margin-top: .1rem;
}

.time-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.time-chip {
    background: var(--sunk);
    color: var(--ink-2);
    border-radius: 6px;
    padding: .05rem .45rem;
    font-size: .75rem;
    white-space: nowrap;
}

.group-tabs .mud-tab-slider {
    background: var(--red-strong);
}

.fill-cell {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* The groups as cards (DEC-197), the pictures the owner approved in the app's own look: white cards on the grey page with
   a hairline, each in its subject's colour (a band on top, its icon, the days it meets), the filters over them as chips
   and the tabs as plain buttons that say whether they are pressed. */
.subject-tone-0 { --c: var(--subject-0); --t: var(--subject-0-wash); }
.subject-tone-1 { --c: var(--subject-1); --t: var(--subject-1-wash); }
.subject-tone-2 { --c: var(--subject-2); --t: var(--subject-2-wash); }
.subject-tone-3 { --c: var(--subject-3); --t: var(--subject-3-wash); }
.subject-tone-4 { --c: var(--subject-4); --t: var(--subject-4-wash); }
.subject-tone-5 { --c: var(--subject-5); --t: var(--subject-5-wash); }
.subject-tone-6 { --c: var(--subject-6); --t: var(--subject-6-wash); }
.subject-tone-7 { --c: var(--subject-7); --t: var(--subject-7-wash); }
.subject-tone-8 { --c: var(--subject-8); --t: var(--subject-8-wash); }
.subject-tone-9 { --c: var(--subject-9); --t: var(--subject-9-wash); }

/* The groups' filters: the way of showing in a column as wide as its two buttons, so it never reaches past the card. */
.list-filters.groups-filters {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
}

@media (max-width: 1279.98px) {
    .list-filters.groups-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    }
}

@media (max-width: 959.98px) {
    .list-filters.groups-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.groups-view {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius);
    background: var(--wash);
    justify-self: start;
}

.groups-view button,
.subject-chip,
.groups-tabs button {
    font: inherit;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
}

.groups-view button {
    padding: .3rem .75rem;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    font-size: .85rem;
}

.groups-view button[aria-pressed="true"],
.groups-tabs button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line);
}

.groups-view button:focus-visible,
.subject-chip:focus-visible,
.groups-tabs button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.subject-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.subject-chip {
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--wash);
    color: var(--ink-2);
    font-size: .8rem;
}

.subject-chip i {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--c);
}

.subject-chip em {
    font-style: normal;
    color: var(--ink-3);
    font-size: .75rem;
}

.subject-chip[aria-pressed="true"] {
    background: var(--brand);
    color: var(--surface);
}

.subject-chip[aria-pressed="true"] em {
    color: var(--rail-quiet);
}

.subject-chip[aria-pressed="true"] i {
    box-shadow: 0 0 0 2px var(--surface);
}

/* A phone: the way of showing on a row of its own, its two halves side by side, and the subjects in one row that scrolls
   inside itself rather than a dozen lines over the cards — the page itself never slides (ui-guidelines §3). */
@media (max-width: 599.98px) {
    .groups-view {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .groups-view button {
        flex: 1;
    }

    .subject-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .subject-chip {
        flex: none;
    }
}

.groups-money-tiles {
    margin-bottom: .35rem;
}

.groups-money-rule {
    color: var(--ink-3);
    font-size: .78rem;
    margin: 0 0 .75rem;
}

.groups-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .75rem;
}

.groups-tabs button {
    padding: .35rem .8rem;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-2);
    font-size: .9rem;
}

.groups-tabs button b {
    font-weight: 400;
    color: var(--ink-3);
    margin-inline-start: .15rem;
}

.groups-tabs button.groups-tab-loss,
.groups-tabs button.groups-tab-loss b {
    color: var(--bad);
}

.groups-tabs .list-count {
    margin: 0;
    margin-inline-start: auto;
}

/* The student's page in parts (ARIA tabs), in the groups' own tab look: a row of names that wraps on a narrow screen
   rather than scrolling the page sideways, the chosen one raised on white. */
.file-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem;
    margin: 0 0 1rem;
    border-radius: var(--radius-lg);
    background: var(--wash);
}

.file-tabs button {
    font: inherit;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    padding: .4rem .85rem;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-2);
    font-size: .9rem;
}

.file-tabs button[aria-selected="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line);
}

.file-tabs button:hover { color: var(--ink); }

.file-tabs button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 599.98px) {
    .file-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .file-tabs button { white-space: normal; text-align: center; }
}

/* The overview: what the student is, as label and value, two columns where there is room. */
.file-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.5rem;
    margin: 0;
}

.file-facts > div {
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
}

.file-facts dt { color: var(--ink-3); font-size: .8rem; }
.file-facts dd { margin: .15rem 0 0; }

@media (max-width: 599.98px) {
    .file-facts { grid-template-columns: minmax(0, 1fr); }
}

/* The student's overview (the owner's note of 27/10): three summaries side by side — the subjects, the money, who pays —
   each a white card with a hairline and the way into its own tab; the facts of one line each in a row under them. */
.overview-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 1099.98px) {
    .overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Two a row: a card left alone on its row takes the whole of it, no hole beside it. */
    .overview-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 599.98px) {
    .overview-cards { grid-template-columns: minmax(0, 1fr); }
}

.overview-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.overview-card p { margin: 0; }

.overview-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ink-2);
    font-size: .85rem;
    font-weight: 700;
}

.overview-card-lead {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.overview-money.is-owed { color: var(--bad); }
.overview-money.is-ahead { color: var(--good); }

.overview-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.overview-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--line);
    font-size: .9rem;
}

.overview-warn { color: var(--warn); }
.overview-bad { color: var(--bad); }

/* The subscription has nothing to press, so its cards end on their text, not on room kept for a button. */
.subscription-cards .overview-card { padding-bottom: 12px; }

/* The way into the tab at the card's foot, however much the card above it says. */
.overview-card > .mud-button-root {
    align-self: flex-start;
    margin-top: auto;
}

.file-facts.overview-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 599.98px) {
    .file-facts.overview-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Completing a draft's registration: each step with its state and the page's own button for it. */
.file-steps { padding: .75rem 1rem; border-radius: var(--radius-lg); }

.file-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-steps-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--line);
}

.file-step-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--wash);
    color: var(--ink-2);
    font-weight: 700;
}

.file-steps-list li[data-done="true"] .file-step-mark { background: var(--good-wash); color: var(--good); }

.file-step-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.group-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: .9rem;
}

.group-tiles-empty {
    border-radius: var(--radius-lg);
}

.group-tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.1rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.group-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--c);
}

.group-tile-top {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.group-tile-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: var(--t);
    color: var(--c);
}

.group-tile-what {
    min-width: 0;
    flex: 1;
}

.group-tile-title {
    margin: 0 0 .1rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.group-tile-grade {
    margin: 0;
    color: var(--ink-2);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.group-tile-extra {
    color: var(--c);
    font-weight: 600;
}

/* A group offered to put a student in or move them to: its own name whole, wrapped however long, and under it, short and
   quieter, when it meets, who teaches and how full it is. */
.group-choice {
    display: flex;
    flex-direction: column;
    white-space: normal;
    line-height: 1.35;
}

.group-choice-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.group-choice-facts {
    color: var(--ink-3);
    font-size: .8rem;
}

/* The group chosen, said again under its box, which cuts a long name: smaller than the box, in line with its text. */
.group-chosen {
    padding-inline: 14px;
    font-size: .875rem;
}

/* The name somebody typed for the group, under what it is: read second, so it is smaller and quieter. */
.group-tile-name {
    margin: .15rem 0 0;
    color: var(--ink-3);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.group-tile-state {
    flex: none;
}

.group-tile-teacher {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.group-tile-teacher b {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.group-tile-teacher small {
    display: block;
    color: var(--ink-3);
    font-size: .72rem;
}

.group-tile-avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--t);
    color: var(--c);
    font-size: .75rem;
    font-weight: 700;
}

.group-week {
    display: grid;
    grid-template-columns: repeat(var(--days, 6), minmax(0, 1fr));
    gap: .3rem;
}

.group-week span {
    text-align: center;
    padding: .3rem 0;
    border-radius: 8px;
    background: var(--sunk);
    color: var(--ink-3);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
}

.group-week span.on {
    background: var(--c);
    color: var(--surface);
    font-weight: 600;
}

.group-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    color: var(--ink-2);
    font-size: .84rem;
}

.group-tile-meta > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.group-tile-meta .mud-icon-root {
    color: var(--ink-3);
}

.group-tile-fill {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    color: var(--ink-2);
}

.group-tile-fill b {
    color: var(--ink);
}

.group-tile-bar {
    flex: 1;
    height: .45rem;
    border-radius: 99px;
    background: var(--sunk);
    overflow: hidden;
}

.group-tile-bar i {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 99px;
    background: var(--c);
}

.group-tile-bar i.full {
    background: var(--red-strong);
}

.group-money {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .75rem;
    border-radius: var(--radius);
    background: var(--sunk);
    --m: var(--ink-2);
}

.group-money.gain { background: var(--good-wash); --m: var(--good); }
.group-money.loss { background: var(--red-wash); --m: var(--bad); }
.group-money.edge { background: var(--warn-wash); --m: var(--warn); }

.group-money-top {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.group-money-word {
    color: var(--m);
    font-weight: 600;
    font-size: .85rem;
}

.group-money-net {
    margin-inline-start: auto;
    color: var(--m);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.group-money-top small {
    color: var(--ink-3);
    font-size: .72rem;
    white-space: nowrap;
}

.group-money-line {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    color: var(--ink-2);
    font-size: .78rem;
}

.group-money-line b {
    color: var(--ink);
    font-weight: 600;
}

.group-money-hint {
    color: var(--m);
    font-size: .78rem;
    font-weight: 600;
}

.group-money-note {
    color: var(--ink-2);
    font-size: .75rem;
}

.group-tile-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.group-tile-actions .group-tile-open {
    flex: 1;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.group-tile-actions .group-tile-open:hover {
    background: color-mix(in srgb, var(--brand-soft), var(--brand) 7%);
}

/* The home page the simple way (DEC-188): today's lessons beside what waits on you, and the quick ways in as tiles. */
.home-today {
    padding: 1rem 0 0;
}

.home-today .home-section-head {
    padding: 0 1rem .5rem;
}

.home-today > .muted {
    padding: 0 1rem 1rem;
}

.home-side {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.quick-tile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    min-width: 0;
}

.quick-tile:hover {
    background: var(--sunk);
}

.quick-tile:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* A lesson's sheet on its own page (DEC-189): one line a student, three marks a press each, the save at the foot. */
.sheet-teacher {
    max-width: 26rem;
}

.sheet-card {
    margin-bottom: 5rem;
}

.sheet-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem .75rem;
    padding: .65rem 1rem;
    border-top: 1px solid var(--line);
}

.sheet-line:first-child {
    border-top: 0;
}

.sheet-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sheet-who b {
    font-weight: 600;
}

.sheet-marks {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.sheet-mark {
    font: inherit;
    font-size: .8rem;
    min-width: 3.6rem;
    min-height: 2.5rem;
    padding: .3rem .6rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}

.sheet-mark:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.sheet-mark.p.on { background: #E4F4EC; border-color: #8FD0AE; color: #0A6B3D; font-weight: 700; }
.sheet-mark.l.on { background: #FBF1DF; border-color: #E9C27A; color: #7A5000; font-weight: 700; }
.sheet-mark.a.on { background: var(--red-wash); border-color: #F3A2A6; color: #B3121A; font-weight: 700; }

.sheet-more {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.sheet-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 calc(-1 * var(--sheet-gutter, 0px));
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(11, 16, 48, .06);
}

.sheet-counts {
    color: var(--ink-2);
    font-size: .85rem;
}

@media (max-width: 599.98px) {
    .sheet-line {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Where you are stays on one line, the last part cut short when it is long. */
.crumb {
    flex-wrap: nowrap;
    min-width: 0;
}

.crumb .mud-icon-root {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.crumb > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a phone the sheet's save sits on the screen's foot whatever the length of the list. */
@media (max-width: 959.98px) {
    .sheet-bar {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
    }
}

/* A link of «where you are» keeps its thumb-sized box on a phone, its words in the middle of it like the rest. */
.crumb a {
    display: inline-flex;
    align-items: center;
}

/* DEC-189, stage 2: the collection window. A word said one way on a computer and another on a phone («استلم واطبع» or
   «استلم»), the students found when it opens with nobody, and «حصّل» beside a row's own button. */
.on-phone { display: none; }

@media (max-width: 959.98px) {
    .on-wide { display: none; }
    .on-phone { display: inline; }
}

.collect-found {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.collect-found:hover:not(:disabled) { border-color: var(--red-strong); }
.collect-found:disabled { cursor: default; opacity: .6; }

/* The payment window in the order the desk works: family, amount, way of paying, review — each a part with its title. */
/* A short part inside a form that adds to one of its lists (a heading for a spending), set off from the fields around it
   so it reads as a step of its own and not as one more field to fill. */
.inline-add {
    margin-top: .5rem;
    padding: .5rem .75rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunk);
}

.inline-add-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.collect-part {
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
}

.collect-part:last-child { border-bottom: 0; padding-bottom: 0; }

.collect-part-title {
    margin: 0 0 6px;
    color: var(--ink-2);
    font-size: .8rem;
    font-weight: 700;
}

.collect-share { margin-top: 4px; }

.collect-review { background: var(--wash); border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; }

.collect-sum { margin: 0; }

.collect-sum > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.collect-sum dt { color: var(--ink-2); }
.collect-sum dd { margin: 0; font-weight: 700; }

/* Boxes with a clear edge, their name always above them, in named groups (the owner's note of 27/10; ui-guidelines §5).
   MudBlazor's own outlined box (Variant.Outlined, Margin.Dense, ShrinkLabel) in a form or bar marked .field-boxes, its
   edge the --field-line (the theme's input line is 1.5 against white, and read as no edge at all), white on the group's
   soft grey. Hover, focus and a mistake keep MudBlazor's colours, which are drawn over the same line. */
.field-boxes {
    --mud-palette-lines-inputs: var(--field-line);
}

.field-boxes .mud-input.mud-input-outlined {
    background: var(--surface);
}

/* A search box in a list's own bar takes the bar's width, as it did before it had an edge. */
.toolbar-search {
    flex: 1 1 auto;
    min-width: 0;
}

/* Two boxes side by side that fall one under the other when narrow. Set on the box itself: MudBlazor puts a box's
   Style on its inner part, where a flex basis makes it that tall instead of that wide. */
.field-pair > .mud-input-control {
    flex: 1 1 12rem;
    min-width: 0;
}

.field-boxes .mud-input-label {
    color: var(--ink-2);
}

/* A group: FieldGroup's fieldset, and the payment window's four parts, which were drawn as lines between them. */
.field-group,
.field-boxes .collect-part {
    min-width: 0;
    margin: 0 0 12px;
    padding: 10px 14px 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--sunk);
}

.field-boxes .collect-part:last-child {
    margin-bottom: 0;
    padding-bottom: 12px;
}

.field-group-title,
.field-boxes .collect-part-title {
    margin: 0 0 6px;
    padding: 0;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
}

/* A legend's name inside its box, not on its edge where a legend is drawn by itself; what follows starts under it. */
.field-group-title {
    float: inline-start;
    width: 100%;
}

.field-group-title + * {
    clear: both;
}

/* What a box shows while empty («الكل» on a filter, an example) is quieter than what is chosen or typed. */
.field-boxes input::placeholder,
.field-boxes textarea::placeholder {
    color: var(--ink-3);
    font-weight: 400;
    opacity: 1;
}

.field-group-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The review is read, not filled in: the identity's soft blue, apart from the groups. */
.field-boxes .collect-part.collect-review {
    background: var(--brand-soft);
}

/* On a phone the box is the 44 a thumb needs with MudBlazor's padding inside it: the 44 rule for every input, added to
   that padding, drew each box 65 tall, two of them where one fits. A choice whose items carry their own text shows it
   in a div, not an input, which the 44 rule does not reach: with the padding inside it, the year and the month of the
   analytics and of the month's results were drawn 21 tall, the year cut (28/10). */
@media (pointer: coarse), (max-width: 600px) {
    .field-boxes .mud-input-outlined .mud-input-slot {
        box-sizing: border-box;
    }

    .field-boxes .mud-input-outlined div.mud-input-slot {
        min-height: 44px;
    }
}

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* DEC-190: «أضف طلابًا» on the group's page. One line a student with what adding does under it; the students chosen
   under an earlier search as small buttons that take them off; and on a phone the window fills the screen, its rows in
   one column and its buttons always in sight. */
.add-places { margin: 0 0 .25rem; }
.add-from { margin: 0 0 .25rem; font-size: .85rem; }

.add-rows { margin-top: .5rem; }

.add-row {
    padding: 2px 0 6px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.add-row .mud-checkbox { min-height: 44px; }
.add-row-name { overflow-wrap: anywhere; }
.add-row-what { padding-inline-start: 46px; overflow-wrap: anywhere; }

/* Who else is ticked and who will not be billed, kept in sight beside «أضف (n)» whatever the scroll. */
.add-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: .5rem;
    padding: .25rem 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.add-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-height: 30vh;
    overflow-y: auto;
}

/* Small with a mouse only: on a finger-sized screen the 44px rule for every button stands (DEC-042). */
@media (pointer: fine) and (min-width: 601px) {
    .add-chip { min-height: 32px; }
}

.add-chip {
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--sunk);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

/* Taking a payment fills a phone's screen too (review 10/11), and its money boxes lose the two little arrows there: too
   small for a finger, and nobody pays by steps of one. */
@media (max-width: 599.98px) {
    .mud-dialog.add-students, .mud-dialog.collect-dialog {
        width: 100vw;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog.add-students .mud-dialog-content, .mud-dialog.collect-dialog .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; }

    .mud-dialog.collect-dialog .mud-input-control.mud-input-number-control .mud-input-numeric-spin { display: none; }
}

/* DEC-191: the files on the student's page. A long name or file name wraps inside its cell (the file's own name inherits
   it), so the table never pushes the page sideways on a phone; «افتح» and «أزل» stay together at the row's end. */
.student-files .file-name { overflow-wrap: anywhere; }
.student-files .file-kind { vertical-align: middle; margin-inline-end: 4px; }
.student-files .file-about { font-size: .85rem; }
.student-files td:last-child { width: 1%; white-space: nowrap; }
.file-removed-list { margin-top: 4px; }
.file-removed { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* The usual papers offered under the name box, as small buttons that fill it in. */
.file-names {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* The chosen file's own name, often a long one off a phone, wraps inside the window rather than scrolling it sideways. */
.file-chosen { margin-top: 4px; overflow-wrap: anywhere; }

/* A wrapper that is there only to hear a key: laid out as if it were not. */
.keys-only { display: contents; }

/* DEC-192: messages to guardians. One row per guardian; the WhatsApp link a real anchor at least 44px high, kept at the
   row's end, and the row wrapping on a phone rather than sliding sideways. A guardian who cannot be messaged is greyed
   with the reason. */
.message-rows { display: flex; flex-direction: column; }
.message-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}
.message-row:last-child { border-bottom: none; }
.message-row.skipped { color: var(--ink-3); }
.message-who { min-width: 0; flex: 1 1 auto; }
.message-opened { color: var(--ink-2); }
.wa-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius);
    background: #0F7A40;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.wa-open:hover, .wa-open:focus-visible { background: #0B5E31; color: #FFFFFF; }
.wa-open.again { background: var(--surface); color: #0B5E31; border: 1.5px solid #0F7A40; }
/* After «.again», which would otherwise hide the pointer and the keyboard's place on a link opened once (ui-guidelines §4). */
.wa-open.again:hover { background: #E3F2E9; color: #0B5E31; }
.wa-open:focus-visible, .wa-open.again:focus-visible { outline: 3px solid #0B5E31; outline-offset: 2px; }
.wa-open.again:focus-visible { background: #E3F2E9; color: #0B5E31; }
/* On a phone the link takes a line of its own under the guardian, so the name and the number keep the row's width, and
   the three message windows fill the screen, as adding students does (DEC-190). */
@media (max-width: 479.98px) {
    .message-row { flex-wrap: wrap; }
    .message-row .message-who { flex: 1 1 100%; }
    .message-row .wa-open { flex: 1 1 100%; }
}
@media (max-width: 599.98px) {
    .mud-dialog.absence-messages, .mud-dialog.reminder-messages, .mud-dialog.free-message {
        width: 100vw;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog.absence-messages .mud-dialog-content, .mud-dialog.reminder-messages .mud-dialog-content,
    .mud-dialog.free-message .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; }
}
.message-note { color: var(--ink-2); margin-bottom: 8px; }
.receipt-message { margin-top: 16px; max-width: 560px; }
.guardian-receives { margin-top: 2px; }
/* DEC-192, part B: the words of a free message as they will go, and the log of messages opened. Rows that wrap on a
   phone; the words kept as typed, line breaks and all. */
.free-words { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunk); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px; }
.message-log { display: flex; flex-direction: column; }
.message-log-row { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
.message-log-row:last-child { border-bottom: none; }
.message-log-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 2px; }
.message-kind { font-weight: 600; color: #0B5E31; }
.message-log-body { white-space: pre-wrap; color: var(--ink-2); margin-top: 4px; font-size: 0.875rem; }

/* The portal (DEC-193): phone first, one column, a navy bar and nothing of the staff side. Static pages, so the menu is
   a plain <details> rather than a component that needs a live connection. */
.portal-page {
    min-height: 100vh;
    background: var(--wash);
}

.portal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--brand);
    color: #fff;
}

.portal-brand {
    font-weight: 700;
}

.portal-menu {
    position: relative;
}

.portal-menu > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    cursor: pointer;
    padding: .35rem .5rem;
    min-height: 44px;
    border-radius: var(--radius);
}

.portal-menu > summary::-webkit-details-marker {
    display: none;
}

.portal-menu > summary:focus-visible {
    outline: 2px solid #fff;
}

.portal-who {
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-menu-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .25rem);
    z-index: 10;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(11, 16, 48, .12);
    padding: .25rem;
}

.portal-menu-list a,
.portal-menu-list button {
    font: inherit;
    color: var(--ink);
    text-decoration: none;
    text-align: start;
    background: none;
    border: 0;
    border-radius: var(--radius);
    padding: .6rem .75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

/* Said to a screen reader, not shown: the menu's name beside whose account it is (WCAG 2.5.3). */
.portal-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.portal-menu-list a:hover,
.portal-menu-list button:hover {
    background: var(--brand-soft);
}

.portal-main {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.portal-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

.portal-text {
    color: var(--ink-2);
    margin: 0;
}

/* A family account that reaches the error page sees its text alone, without the staff frame. */
.portal-bare {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

/* The portal's pages (DEC-193 P2): cards rather than tables, one column at most 640px wide, every tap target 44px or
   more, and the tabs a row of links that scrolls inside itself on a narrow phone rather than the page sliding sideways. */
.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.portal-logo {
    height: 32px;
    max-width: 96px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 2px;
}

.portal-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.25rem 0 .5rem;
}

.portal-notice {
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--red-strong);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin: 0 0 1rem;
}

.portal-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.portal-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .875rem 1rem;
    margin-bottom: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-cards .portal-card {
    margin-bottom: 0;
}

.portal-card-link {
    color: inherit;
    text-decoration: none;
    min-height: 44px;
}

.portal-card-link:hover,
.portal-card-link:focus-visible {
    border-color: var(--brand);
}

.portal-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.portal-card-line {
    color: var(--ink-2);
}

.portal-due {
    color: var(--red-strong);
    font-weight: 600;
}

.portal-chip {
    display: inline-block;
    align-self: flex-start;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .875rem;
    font-weight: 600;
}

.portal-chip-warn {
    background: var(--red-wash);
    color: var(--red-strong);
}

.portal-chip-soft {
    background: var(--sunk);
    color: var(--ink-2);
}

.portal-crumb {
    margin-bottom: .5rem;
}

.portal-crumb a,
.portal-link,
.portal-month-step {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand);
    font-weight: 600;
}

.portal-child-head {
    margin-bottom: .75rem;
}

.portal-child-head .portal-title {
    margin-bottom: .25rem;
}

.portal-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin: 0 0 1rem;
    scrollbar-width: thin;
}

.portal-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 .5rem;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.portal-tab-on {
    color: var(--brand);
    font-weight: 700;
    border-bottom-color: var(--brand);
}

.portal-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.portal-month-name {
    font-weight: 700;
}

.portal-month-step {
    min-width: 5rem;
}

.portal-month-step:last-child {
    justify-content: flex-end;
}

.portal-summary {
    font-weight: 600;
    margin: 0 0 .5rem;
}

.portal-standing {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.portal-list {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.portal-card .portal-list {
    border: 0;
    margin: 0;
}

.portal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
    min-width: 0;
}

.portal-card .portal-row {
    padding-inline: 0;
}

.portal-row:last-child {
    border-bottom: 0;
}

.portal-row-main {
    min-width: 0;
}

.portal-ask {
    margin: 1.25rem 0 0;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.portal-ask a {
    color: var(--brand);
    font-weight: 600;
}

.portal-paper {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow-wrap: anywhere;
}

.portal-total {
    margin-top: .75rem;
}

.portal-actions {
    margin-top: 1rem;
}

.portal-button {
    font: inherit;
    min-height: 44px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--red-strong);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

@media print {
    .portal-page,
    .portal-paper {
        background: #fff;
    }

    .portal-main {
        max-width: none;
        padding: 0;
    }
}

/* The portal's way in from the student's page (DEC-193 P1): a line and «رابط الدخول» under the guardian, and a window that
   fills a phone's screen as the message windows do; the message's words in a box that can be selected and copied. */
.family-access-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.family-access-cell > span { overflow-wrap: anywhere; min-width: 0; }
.family-own { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.family-children { margin: 4px 0; padding-inline-start: 20px; overflow-wrap: anywhere; }
.family-issued { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.family-text-label { color: var(--ink-2); font-size: 0.875rem; }
.family-text {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunk);
    resize: vertical;
    overflow-wrap: anywhere;
}
@media (max-width: 599.98px) {
    .mud-dialog.family-access-dialog {
        width: 100vw;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog.family-access-dialog .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; }
    .mud-dialog.family-access-dialog .mud-dialog-actions { flex-wrap: wrap; gap: 4px; }
    .family-issued .wa-open { align-self: stretch; }
}

/* DEC-198: the timetable as one big card. The week at its head, the grades as chips and the teacher, room and subject to
   narrow it by, then the hours down the side and the days across — today's column tinted, a red line at the time — and
   each lesson a soft block in its subject's colour. A subject's colour is one of ten (SubjectLook), by its place among the
   company's subjects: the colour for the line and the name, its tint under them; every pair reads at 4.5 or more. */
.subject-look-0 { --subject: var(--subject-0); --subject-soft: var(--subject-0-wash); }
.subject-look-1 { --subject: var(--subject-1); --subject-soft: var(--subject-1-wash); }
.subject-look-2 { --subject: var(--subject-2); --subject-soft: var(--subject-2-wash); }
.subject-look-3 { --subject: var(--subject-3); --subject-soft: var(--subject-3-wash); }
.subject-look-4 { --subject: var(--subject-4); --subject-soft: var(--subject-4-wash); }
.subject-look-5 { --subject: var(--subject-5); --subject-soft: var(--subject-5-wash); }
.subject-look-6 { --subject: var(--subject-6); --subject-soft: var(--subject-6-wash); }
.subject-look-7 { --subject: var(--subject-7); --subject-soft: var(--subject-7-wash); }
.subject-look-8 { --subject: var(--subject-8); --subject-soft: var(--subject-8-wash); }
.subject-look-9 { --subject: var(--subject-9); --subject-soft: var(--subject-9-wash); }

.tt-card {
    /* One hour down the grid; a lesson's place and length are said in hours and drawn with this. */
    --hour: 64px;
    /* The narrowest a lesson's block may be before its day widens and the grid scrolls inside the card. */
    --lane-min: 5.5rem;
    /* The narrowest a day may be, whatever a busier day takes: its blocks and its header still read whole. */
    --day-min: 6.75rem;
    --hours-col: 3.5rem;
    --grid-line: #EEF0F6;
    --today-wash: #FFF8F8;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
}

.tt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.tt-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

/* The week's arrows in a hairline square. Not MudBlazor's outlined variant, which takes away the 44px a thumb needs. */
.tt-head .tt-arrow {
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tt-head .tt-this-week {
    background: var(--brand-soft);
    font-weight: 600;
}

/* «الأسبوع | اليوم», side by side as one control: the view you are in pressed, the other a press away. */
.tt-switch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    margin-inline-start: auto;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tt-switch button {
    font: inherit;
    font-size: .85rem;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: .35rem 1.1rem;
    cursor: pointer;
}

.tt-switch button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(11, 16, 48, .08);
    cursor: default;
}

.tt-switch button:focus-visible,
.tt-chip:focus-visible,
.tt-days button:focus-visible,
.tt-lesson:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.tt-filters {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--sunk);
}

.tt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.tt-chips-label {
    color: var(--ink-2);
    font-size: .85rem;
    font-weight: 600;
    margin-inline-end: .25rem;
}

.tt-chip {
    font: inherit;
    font-size: .85rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .3rem .9rem;
    white-space: nowrap;
    cursor: pointer;
}

.tt-chip:hover {
    border-color: var(--brand-lift);
}

.tt-chip[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
    font-weight: 600;
}

.tt-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tt-selects {
    display: grid;
    grid-template-columns: repeat(4, 11.5rem);
    gap: .75rem;
}

.tt-selects .mud-input-control {
    margin-top: 0;
}

.tt-selects .mud-input-outlined {
    background: var(--surface);
}

.tt-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    margin-inline-start: auto;
}

.tt-key {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .15rem .65rem;
    white-space: nowrap;
}

.tt-key i {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--subject);
}

/* The day view's days, one press each: the six working days in one row even on a phone. */
.tt-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.9rem, 1fr));
    gap: .3rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.tt-days button {
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    padding: .35rem .2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.tt-days button b {
    font-size: .8rem;
    color: var(--ink);
    white-space: nowrap;
}

.tt-days button small {
    font-size: .75rem;
    color: var(--ink-3);
}

.tt-days button.today b,
.tt-days button.today small {
    color: var(--red-strong);
}

.tt-days button[aria-pressed="true"] {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.tt-days button[aria-pressed="true"] b {
    color: var(--brand);
}

.tt-empty {
    padding: 1.5rem 1.25rem;
}

/* The week: the grid scrolls sideways inside the card when its busiest days need more room than there is, never the page. */
.tt-scroll {
    overflow-x: auto;
}

.tt-grid {
    display: grid;
    grid-template-columns: var(--hours-col) var(--days);
    min-width: min-content;
}

.tt-corner,
.tt-day {
    border-bottom: 1px solid var(--line);
}

.tt-day {
    padding: .7rem .25rem;
    text-align: center;
    border-inline-start: 1px solid var(--grid-line);
}

.tt-day b {
    display: block;
    font-size: .9rem;
}

/* «اليوم · 25 أكتوبر» on one line, as in the picture, not broken over three. */
.tt-day small {
    display: block;
    color: var(--ink-3);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-day.today b,
.tt-day.today small {
    color: var(--red-strong);
}

.tt-day.today small {
    font-weight: 700;
}

.tt-hour {
    height: var(--hour);
    box-sizing: border-box;
    padding-top: .25rem;
    color: var(--ink-3);
    font-size: .75rem;
    text-align: center;
    white-space: nowrap;
}

.tt-col {
    position: relative;
    height: calc(var(--span) * var(--hour));
    border-inline-start: 1px solid var(--grid-line);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--grid-line) calc(var(--hour) - 1px), var(--grid-line) var(--hour));
}

.tt-col.today {
    background-color: var(--today-wash);
}

.tt-lesson {
    position: absolute;
    top: calc(var(--from) * var(--hour) + 2px);
    height: calc(var(--len) * var(--hour) - 4px);
    inset-inline-start: calc(var(--lane) * 100% / var(--lanes) + 3px);
    width: calc(100% / var(--lanes) - 6px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding: .3rem .45rem;
    font: inherit;
    font-size: .75rem;
    line-height: 1.4;
    text-align: start;
    color: var(--ink);
    background: var(--subject-soft);
    border: 0;
    border-inline-start: 4px solid var(--subject);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(11, 16, 48, .06);
    cursor: pointer;
    /* Over the red line of the time now: a line through a lesson's name reads as a lesson called off. */
    z-index: 2;
}

.tt-lesson:hover {
    box-shadow: 0 2px 8px rgba(11, 16, 48, .14);
    z-index: 3;
}

.tt-lesson b,
.tt-lesson span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-lesson b {
    color: var(--subject);
    font-size: .8rem;
    font-weight: 700;
}

.tt-lesson span {
    color: var(--ink-2);
}

/* «قاعة 7 · 5:30 م»: the room takes what is left and is cut first; the time is never cut. */
.tt-lesson .tt-where {
    display: flex;
    gap: .25rem;
}

.tt-lesson .tt-sep,
.tt-lesson .tt-time {
    flex: none;
}

/* A block too narrow for both — lessons side by side — keeps the time alone rather than the first letter of a room, and
   one too narrow for the time whole says none rather than half of one; the room and the time are in the lesson's window. */
.tt-lesson {
    container-type: inline-size;
}

@container (max-width: 4.5rem) {
    .tt-lesson .tt-room,
    .tt-lesson .tt-sep {
        display: none;
    }
}

@container (max-width: 2.75rem) {
    .tt-lesson .tt-where {
        display: none;
    }
}

/* A lesson called off stays where it was, greyed and struck through, and says so in words on its middle line. */
.tt-lesson.cancelled,
.tt-row.cancelled .tt-row-main {
    background: var(--sunk);
    border-inline-start-style: dashed;
    border-inline-start-color: var(--ink-3);
}

.tt-lesson.cancelled b {
    color: var(--ink-3);
    text-decoration: line-through;
}

.tt-lesson .tt-called-off {
    color: #B3121A;
}

.tt-lesson .tt-done {
    font-style: normal;
    font-weight: 600;
    color: #0A6B3D;
}

.tt-lesson .tt-done svg {
    width: .85rem;
    height: .85rem;
    margin-inline-end: .15rem;
    vertical-align: -.15rem;
}

.tt-now {
    position: absolute;
    inset-inline: 0;
    top: calc(var(--at) * var(--hour));
    height: 2px;
    background: var(--red-strong);
    /* Under the blocks: it runs across the hours between lessons and goes behind a lesson, never through its name. */
    z-index: 1;
    pointer-events: none;
}

.tt-now::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red-strong);
    top: -3.5px;
    inset-inline-start: -4px;
}

.tt-foot {
    padding: .75rem 1.25rem;
    color: var(--ink-3);
    font-size: .8rem;
    border-top: 1px solid var(--line);
}

/* The day: a line a lesson, by the hour, with its buttons on it. */
.tt-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem 1rem;
    padding: .65rem 1.25rem;
    border-top: 1px solid var(--line);
}

.tt-row:first-child {
    border-top: 0;
}

.tt-row-time {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
}

.tt-row-time small {
    color: var(--ink-3);
    font-weight: 400;
    font-size: .8rem;
}

/* Pressed, the line opens the lesson's window, as a block does in the week. */
.tt-row-main {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding: .45rem .75rem;
    font: inherit;
    color: var(--ink);
    text-align: start;
    background: var(--subject-soft);
    border: 0;
    border-inline-start: 4px solid var(--subject);
    border-radius: 10px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.tt-row-main:hover {
    box-shadow: 0 2px 8px rgba(11, 16, 48, .14);
}

.tt-row-main:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.tt-row-main b {
    color: var(--subject);
    font-weight: 700;
}

.tt-row.cancelled .tt-row-main b {
    color: var(--ink-3);
    text-decoration: line-through;
}

.tt-row-group {
    font-weight: 600;
}

.tt-row-main > span:not(.tt-row-group) {
    color: var(--ink-2);
    font-size: .85rem;
}

.tt-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

/* A lesson's window: what it is in its colour, what is known about it, and its buttons. */
.tt-panel {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.tt-panel-head {
    display: flex;
    flex-direction: column;
    padding: .6rem .85rem;
    background: var(--subject-soft);
    border-inline-start: 4px solid var(--subject);
    border-radius: 10px;
}

.tt-panel-head b {
    color: var(--subject);
    font-size: 1rem;
}

.tt-panel-head span {
    color: var(--ink-2);
    font-size: .85rem;
}

.tt-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem 1rem;
    margin: 0;
}

.tt-facts dt {
    color: var(--ink-3);
}

.tt-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.tt-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* With the menu beside it a mid-sized screen gives the four lists the row's width, and lessons side by side share their
   day as narrow as the approved picture draws two of them before the day widens, so a busy week still fits more often
   than it scrolls; a quiet day keeps its --day-min whatever. */
@media (max-width: 1279.98px) {
    .tt-card {
        --lane-min: 3rem;
    }

    .tt-filter-row,
    .tt-selects {
        width: 100%;
    }

    .tt-selects {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tt-legend {
        justify-content: flex-start;
        margin-inline-start: 0;
    }
}

@media (max-width: 599.98px) {
    .tt-head,
    .tt-filters,
    .tt-days,
    .tt-row,
    .tt-foot,
    .tt-empty {
        padding-inline: 1rem;
    }

    .tt-title {
        flex: 1 1 100%;
        order: -1;
        font-size: .95rem;
    }

    /* The grades in one line that slides under the finger, rather than four lines of chips over the lessons. */
    .tt-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .tt-chip {
        flex: none;
    }

    /* The four lists one a row, as the students' filters: two side by side cut «كل المدرسين» to «كل ال…» at 320 and
       a branch named «فرع المقاسات» at 390. */
    .tt-selects {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt-row {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .tt-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* A leaving's months on a phone (DEC-200): each month a block of its own, every number beside its name, so what comes
   off the invoice — the table's last column — is read without sliding the table under the finger (ui-guidelines §3). */
@media (max-width: 599.98px) {
    .mud-simple-table.leaving-months table thead { display: none !important; }
    .mud-simple-table.leaving-months table, .mud-simple-table.leaving-months table tbody, .mud-simple-table.leaving-months table tr,
    .mud-simple-table.leaving-months table td { display: block !important; width: 100% !important; min-width: 0 !important; }
    .mud-simple-table.leaving-months table tr { padding: .35rem 0; border-bottom: 1px solid var(--line); }
    .mud-simple-table.leaving-months table td {
        display: flex !important; justify-content: space-between; gap: .75rem; border: 0 !important; padding: .15rem .5rem !important;
        white-space: normal !important; text-align: start;
    }
    .mud-simple-table.leaving-months table td::before { content: attr(data-label); color: var(--ink-2); flex: none; }
}

/* The assessment types on a phone: each type a block of its own, its name across and its weight and mark under it. In four
   columns the framed boxes were cut to a letter; each box carries its own name, so the table's head is not needed. */
@media (max-width: 599.98px) {
    .mud-simple-table.assessment-type-rows table thead { display: none !important; }
    .mud-simple-table.assessment-type-rows table, .mud-simple-table.assessment-type-rows table tbody { display: block !important; width: 100% !important; }
    .mud-simple-table.assessment-type-rows table tr {
        display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .5rem 0;
        border-bottom: 1px solid var(--line);
    }
    .mud-simple-table.assessment-type-rows table td { display: block !important; border: 0 !important; padding: 0 .25rem !important; min-width: 0 !important; }
    .mud-simple-table.assessment-type-rows table td:first-child { grid-column: 1 / -1; }
}