/* =====================================================================
   Hospital HMS — design polish layer (copied from the College ERP design system; module-specific ERP blocks removed).
   Offline (served from /static, no CDN). Loaded AFTER the Tailwind CDN,
   so these rules refine bare elements without fighting Tailwind utilities
   used in the templates. Pure cosmetics — no layout/behaviour changes.
   ===================================================================== */

:root{
    --brand:#0f766e;         /* teal-700 */
    --brand-dark:#115e59;
    --ink:#1e293b;           /* slate-800 */
    --muted:#64748b;         /* slate-500 */
    --line:#e2e8f0;          /* slate-200 */
    --bg:#f1f5f9;            /* slate-100 */
}

/* --- Typography: a clean, professional stack (Segoe UI ships on every
       Windows PC; graceful fallbacks elsewhere) --- */
body{
    font-family:'Segoe UI', system-ui, -apple-system, 'Inter', Roboto,
                'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:var(--ink);
    letter-spacing:.1px;
}
h1,h2,h3,h4{letter-spacing:-.2px;}

/* Money/number columns line up when digits share a width */
td, .tabular-nums, .font-mono{font-variant-numeric:tabular-nums;}

/* --- Interactive niceties: smooth hover, clear keyboard focus --- */
a, button, .nav-link, select, input, [role=button]{
    transition:background-color .15s ease, color .15s ease,
               border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:not(:disabled){cursor:pointer;}

/* Consistent teal focus ring on every form control (accessibility + polish) */
input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:none;
    border-color:var(--brand)!important;
    box-shadow:0 0 0 3px rgba(15,118,110,.15);
}

/* --- Cards & tables: a touch more depth and readable rows, applied only
       to bare elements so template utilities still win where set --- */
.rounded-xl.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.04),
                                 0 1px 3px rgba(15,23,42,.06);}
table{border-collapse:collapse;}
tbody tr{transition:background-color .12s ease;}

/* --- Slimmer, calmer scrollbars (WebKit / Chromium — the office browser) --- */
*{scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:6px;
                          border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#94a3b8; background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

/* Sidebar scrollbar sits on a dark surface — lighten it */
aside ::-webkit-scrollbar-thumb{background:#475569; background-clip:content-box;}

/* --- Sidebar refinement: crisper active state --- */
.nav-link.active{box-shadow:inset 3px 0 0 #5eead4; font-weight:600;}

/* --- Print stays clean --- */
@media print{ ::-webkit-scrollbar{display:none;} }

/* ==========================================================================
   UTILITIES MISSING FROM THE PRE-BUILT tailwind.css
   The Tailwind build is a fixed, hand-checked file (no CDN, no build step at
   deploy time), so a class a template uses but the build does not contain is
   silently DEAD — the element just renders unstyled. Found by the template
   sweep; each one below fixes a real visual bug, listed with where it bit.
   ========================================================================== */

/* Fee-collection call card: the "Call parent" / "WhatsApp parent" buttons used
   bg-indigo-700 / bg-green-700, which do not exist -> white text on a white
   card = invisible buttons. The templates now use shades that DO exist; these
   two rules keep the darker shades working if they are used again. */
.bg-indigo-700{background-color:#4338ca;}
.bg-green-700{background-color:#15803d;}

/* Mobile bottom nav for admins is `grid grid-cols-3` — without the rule the
   three buttons stacked vertically and ate the screen on a phone. */
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* Fee-collection drive table hides secondary columns on small screens with
   `hidden md:table-cell` — the md/lg half was missing, so Father / Mobiles /
   Promise never came back on a desktop. */
@media (min-width:768px){ .md\:table-cell{display:table-cell;} }
@media (min-width:1024px){ .lg\:table-cell{display:table-cell;} }

/* Long remark cell in the same table had no width cap -> the table grew wider
   than the screen. */
.max-w-\[220px\]{max-width:220px;}

/* Cosmetic gaps/padding used by a few screens. */
.gap-x-5{column-gap:1.25rem;}
.pb-5{padding-bottom:1.25rem;}
.bg-emerald-50\/60{background-color:rgba(236,253,245,.6);}
.hover\:bg-emerald-700:hover{background-color:#047857;}

/* Delete buttons added to Library (book/copy) and Staff Attendance use a soft
   rose hover that the build does not carry. */
.hover\:bg-rose-50:hover{background-color:#fff1f2;}

/* ---- Hostel module (2026-07-24): utilities its templates use that are absent
   from the fixed tailwind.css build (a missing class renders as NOTHING). ---- */
.accent-amber-500{accent-color:#f59e0b;}
.border-dashed{border-style:dashed;}
.border-emerald-100{border-color:#d1fae5;}
.border-rose-100{border-color:#ffe4e6;}
.border-slate-800{border-color:#1e293b;}
.first\:border-0:first-child{border-width:0;}
.hover\:bg-slate-700:hover{background-color:#334155;}
.hover\:border-teal-200:hover{border-color:#99f6e4;}
.hover\:text-rose-500:hover{color:#f43f5e;}
.list-disc{list-style-type:disc;}
.ml-4{margin-left:1rem;}
.mt-10{margin-top:2.5rem;}
.pb-4{padding-bottom:1rem;}
@media (min-width:768px){ .md\:inline{display:inline;} }

/* ---- Call cards (fee collection + enquiry, 2026-07-28): the overdue wash was
   bg-rose-50/60 — rose-50 at 60% opacity is near-invisible next to a white
   card, so overdue cards looked exactly like every other card. Each card now
   carries a coloured LEFT EDGE (red = overdue, amber = due today, sky = never
   called) on top of dark-theme-safe utility washes. The edge utilities below
   are absent from the fixed tailwind.css build. ---- */
.border-l-4{border-left-width:4px;}
.border-l-rose-500{border-left-color:#f43f5e;}
.border-l-amber-400{border-left-color:#fbbf24;}
.border-l-sky-400{border-left-color:#38bdf8;}
html[data-theme="dark"] .border-l-4.border-l-rose-500{border-left-color:#fb7185;} /* two classes: outranks theme.css's all-sides .border-rose-300 dark rule, which loads later */

/* ---- Interaction polish (2026-07-29): element-level, so every one of the
   237 screens gets it without template edits. Buttons answer the finger
   quickly (short hover/press transition + a slight press-down), keyboard
   users get a visible accent focus ring, and all of it switches off for
   people whose device asks for reduced motion. ---- */
button,input[type="submit"],.nav-link,summary{
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,
               box-shadow .15s ease,opacity .15s ease,transform .1s ease;
}
button:not(:disabled):active,input[type="submit"]:not(:disabled):active{transform:scale(.97);}
button:focus-visible,input[type="submit"]:focus-visible,a:focus-visible,summary:focus-visible{
    outline:2px solid var(--acc-600,#0d9488);outline-offset:2px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--acc-400,#2dd4bf);outline-offset:0;
}
/* spinner the submit-guard puts inside the pressed button ("⟳ Saving…") */
.busy-spin{
    display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;margin-right:.45em;
    border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;
    animation:busy-rot .6s linear infinite;
}
@keyframes busy-rot{to{transform:rotate(360deg);}}
/* toasts slide in, and fade out just before the 8s auto-dismiss removes them */
#toasts .toast{animation:toast-in .18s ease-out both;}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
#toasts.toasts-leaving .toast{opacity:0;transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s ease;}
/* (the sidebar module fold is animated from base.html — see the end of this
   file for the two rules it needs) */
@media (prefers-reduced-motion:reduce){
    button,input[type="submit"],.nav-link,summary{transition:none;}
    button:not(:disabled):active,input[type="submit"]:not(:disabled):active{transform:none;}
    #toasts .toast{animation:none;}
    #toasts.toasts-leaving .toast{transition:none;}
    .busy-spin{animation-duration:1.5s;} /* status, not decoration: keep it moving, gently */
}

/* ---- Global search (Ctrl+K) overlay — all custom classes, so nothing here
   depends on the fixed tailwind build. Light + dark theme aware. ---- */
.gs-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.5);
    display:flex;align-items:flex-start;justify-content:center;
    padding:10vh 1rem 1rem;}
.gs-overlay[hidden]{display:none;}
.gs-panel{width:min(40rem,100%);background:#fff;border-radius:.75rem;
    box-shadow:0 18px 45px rgba(15,23,42,.35);overflow:hidden;
    display:flex;flex-direction:column;max-height:70vh;}
.gs-panel input{border:0;outline:none !important;padding:.9rem 1rem;
    font-size:1rem;border-bottom:1px solid #e2e8f0;background:transparent;
    color:inherit;width:100%;}
.gs-results{overflow-y:auto;padding-bottom:.35rem;}
.gs-g{padding:.5rem .8rem .15rem;font-size:.65rem;letter-spacing:.05em;
    text-transform:uppercase;color:#94a3b8;font-weight:600;}
.gs-row{display:block;padding:.4rem .6rem;font-size:.85rem;color:inherit;
    text-decoration:none;border-radius:.5rem;margin:0 .35rem;}
.gs-row .gs-sub{font-size:.72rem;color:#64748b;}
.gs-row.sel,.gs-row:hover{background:var(--acc-50,#f0fdfa);}
.gs-hint{padding:.4rem .8rem;font-size:.68rem;color:#94a3b8;
    border-top:1px solid #e2e8f0;}
.gs-empty{padding:1rem .8rem;font-size:.85rem;color:#94a3b8;}
html[data-theme="dark"] .gs-panel{background:#111a2e;}
html[data-theme="dark"] .gs-panel input{border-bottom-color:#1e293b;}
html[data-theme="dark"] .gs-row.sel,
html[data-theme="dark"] .gs-row:hover{background:#1e293b;}
html[data-theme="dark"] .gs-row .gs-sub{color:#94a3b8;}
html[data-theme="dark"] .gs-hint{border-top-color:#1e293b;}

/* ---- .ui-* component classes backing templates/_ui.html (2026-07-29).
   Plain CSS on the accent variables, so every theme/accent works and the
   fixed tailwind build cannot bite. Light + dark. ---- */
.ui-btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:.5rem;
    padding:.5rem 1rem;font-size:.875rem;font-weight:500;
    border:1px solid transparent;cursor:pointer;text-decoration:none;}
.ui-btn-primary{background:var(--acc-600,#0d9488);color:#fff;}
.ui-btn-primary:hover{background:var(--acc-700,#0f766e);}
.ui-btn-secondary{background:#f1f5f9;color:#334155;border-color:#e2e8f0;}
.ui-btn-secondary:hover{background:#e2e8f0;}
.ui-btn-outline{background:transparent;color:var(--acc-700,#0f766e);
    border-color:var(--acc-300,#5eead4);}
.ui-btn-outline:hover{background:var(--acc-50,#f0fdfa);}
.ui-btn-ghost{background:transparent;color:#64748b;}
.ui-btn-ghost:hover{background:#f1f5f9;}
.ui-btn-danger{background:#e11d48;color:#fff;}
.ui-btn-danger:hover{background:#be123c;}
.ui-btn-success{background:#059669;color:#fff;}
.ui-btn-success:hover{background:#047857;}
.ui-card{background:#fff;border:1px solid #f1f5f9;border-radius:.75rem;
    box-shadow:0 1px 2px rgba(15,23,42,.05);padding:1.25rem;}
.ui-kpi-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
    color:#94a3b8;}
.ui-kpi-value{font-size:1.5rem;font-weight:700;margin-top:.15rem;}
.ui-kpi-sub{font-size:.75rem;color:#64748b;margin-top:.15rem;}
.ui-tone-slate{color:#0f172a;}
.ui-tone-teal{color:var(--acc-600,#0d9488);}
.ui-tone-rose{color:#e11d48;}
.ui-tone-emerald{color:#059669;}
.ui-tone-amber{color:#d97706;}
.ui-badge{display:inline-block;border-radius:9999px;padding:.1rem .6rem;
    font-size:.7rem;font-weight:600;white-space:nowrap;}
.ui-badge-slate{background:#f1f5f9;color:#475569;}
.ui-badge-teal{background:var(--acc-100,#ccfbf1);color:var(--acc-800,#115e59);}
.ui-badge-rose{background:#ffe4e6;color:#9f1239;}
.ui-badge-emerald{background:#d1fae5;color:#065f46;}
.ui-badge-amber{background:#fef3c7;color:#92400e;}
.ui-field{display:block;font-size:.875rem;}
.ui-field-label{display:block;color:#64748b;margin-bottom:.25rem;}
.ui-input{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;
    padding:.5rem .6rem;background:#fff;color:inherit;}
.ui-input-err{border-color:#f43f5e;}
.ui-field-help{display:block;font-size:.72rem;color:#94a3b8;margin-top:.2rem;}
.ui-field-err{display:block;font-size:.72rem;color:#e11d48;margin-top:.2rem;}
.ui-empty{text-align:center;color:#94a3b8;padding:2.5rem 1rem;font-size:.9rem;}
.ui-empty-icon{font-size:1.6rem;margin-bottom:.4rem;}
.ui-empty-cta{margin-top:.9rem;}
html[data-theme="dark"] .ui-card{background:#111a2e;border-color:#1e293b;}
html[data-theme="dark"] .ui-btn-secondary{background:#1e293b;color:#cbd5e1;
    border-color:#334155;}
html[data-theme="dark"] .ui-btn-secondary:hover{background:#334155;}
html[data-theme="dark"] .ui-btn-ghost:hover{background:#1e293b;}
html[data-theme="dark"] .ui-input{background:#0b1220;border-color:#334155;}
html[data-theme="dark"] .ui-tone-slate{color:#e2e8f0;}
html[data-theme="dark"] .ui-badge-slate{background:#1e293b;color:#cbd5e1;}

/* ---- contextual bulk-action bar (Students list, 2026-07-29): a dark chip
   that floats up from the bottom once rows are ticked. Same look on light
   and dark themes. ---- */
.bulk-bar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);
    z-index:55;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
    background:#0f172a;color:#f1f5f9;border-radius:.9rem;padding:.55rem .9rem;
    box-shadow:0 12px 30px rgba(15,23,42,.4);max-width:calc(100vw - 1.5rem);
    animation:bulk-up .18s ease-out;}
.bulk-bar[hidden]{display:none;}
@keyframes bulk-up{from{opacity:0;transform:translate(-50%,8px);}
    to{opacity:1;transform:translate(-50%,0);}}
.bulk-count{font-size:.85rem;font-weight:600;white-space:nowrap;}
.bulk-sep{width:1px;align-self:stretch;background:#334155;}
.bulk-bar .ui-btn{padding:.4rem .8rem;font-size:.8rem;}
.bulk-bar .ui-btn-ghost{color:#94a3b8;}
.bulk-bar .ui-btn-ghost:hover{background:#1e293b;color:#e2e8f0;}
.bulk-bar .ui-btn-outline{color:#5eead4;border-color:#155e57;background:transparent;}
.bulk-bar .ui-btn-outline:hover{background:#134e4a;}
.bulk-sec{width:8rem;background:#1e293b;border-color:#334155;color:#f1f5f9;
    padding:.4rem .6rem;font-size:.8rem;}
.bulk-sec::placeholder{color:#64748b;}
html[data-theme="dark"] .bulk-bar{background:#1e293b;
    box-shadow:0 12px 30px rgba(0,0,0,.55);}
html[data-theme="dark"] .bulk-sep{background:#475569;}
html[data-theme="dark"] .bulk-sec{background:#0b1220;}
@media (prefers-reduced-motion:reduce){.bulk-bar{animation:none;}}

/* search palette status line ("Searching…" / failure note); hidden when empty */
.gs-status{padding:.35rem .8rem 0;font-size:.72rem;color:#94a3b8;}
.gs-status:empty{display:none;}

/* ---- Sidebar navigation (2026-07-29) ------------------------------------
   The whole menu is much taller than the screen, so the module you are in has
   to earn its space: one module open at a time (accordion, in base.html), its
   heading PINNED while its items scroll, and slightly tighter rows on
   desktop/laptop where vertical space is scarce. Phones and tablets keep the
   roomy rows — touch targets must stay big there.
   background-color:inherit (not a fixed colour) so the pinned heading matches
   whichever Appearance style is chosen — Classic, Ivory or Midnight. -------- */
#sidenav{padding-top:0;}
#sidenav > :first-child{margin-top:1rem;}      /* the padding-top, moved inside */
/* The pinned heading needs its OWN background. background-color:inherit does
   NOT work here: Chrome renders <summary> inside the <details> shadow tree, so
   inherit resolves against a UA element and comes out TRANSPARENT — menu items
   would scroll visibly straight through the heading. One variable per
   Appearance style instead (Midnight stays translucent glass by design). */
:root{--nav-head-bg:#0f172a;}                       /* Classic, and dark mode */
html[data-style="ivory"]{--nav-head-bg:#0d1a24;}
html[data-style="midnight"]{--nav-head-bg:rgba(9,14,28,.92);}
#sidenav details[open] > summary{
    position:sticky;top:0;z-index:5;background-color:var(--nav-head-bg);
}
html[data-style="midnight"] #sidenav details[open] > summary{
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#sidenav details[open] > summary:hover{background-color:#1e293b;}
@media (min-width:768px){
    #sidenav > :first-child{margin-top:.75rem;}
    #sidenav .nav-link{padding-top:.3rem;padding-bottom:.3rem;}
    #sidenav summary{padding-top:.3rem;padding-bottom:.3rem;}
    #sidenav > * + *{margin-top:.25rem;}
}

/* ---- Sidebar hierarchy (2026-07-29) -------------------------------------
   The menu has three levels — module heading, section label (Money/Reports/
   Admin), page link — but they were visually mis-ranked: the section label
   sat FURTHER LEFT (12px) than the links it groups (44px), so the levels did
   not read as levels.

   Fixed with a guide rail rather than deep indentation: the sidebar is 240px
   and the longest labels already need 152px, leaving ~32px of slack, so a
   full indent ladder would push several labels onto two lines. The rail costs
   almost no width and reads more clearly than indentation alone.
   Order now: heading 36px  <  section ~39px  <  links ~51px.            ---- */

/* the items of an open module hang off a hairline rail */
#sidenav details > div{
    margin-left:4px;
    padding-left:6px;
    border-left:1px solid rgba(148,163,184,.22);
}
/* links: claw back most of the width the rail took, by trimming their own
   left padding and icon gap — net cost is ~7px, not 19px */
#sidenav details > div > a{padding-left:3px;}

/* section label (Money / Reports / Admin): quieter than the module heading,
   sits BETWEEN heading and links, with a short rule trailing the text */
#sidenav details > div > div{
    padding-left:28px;padding-right:6px;
    padding-top:.3rem;padding-bottom:.05rem;      /* the flex row is tighter than
                                                     the template's pt-2.5 */
    display:flex;align-items:center;gap:.5rem;
    color:#64748b;letter-spacing:.08em;
}
#sidenav details > div > div::after{
    content:"";flex:1;height:1px;background:rgba(148,163,184,.18);
}

/* the page you are on: keep the filled pill, add a bright accent bar that
   ties it back to the rail */
#sidenav .nav-link{position:relative;}
#sidenav details > div > a.active::before{
    content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
    width:3px;height:64%;border-radius:2px;background:var(--acc-300,#5eead4);
}

/* ---- Opening / closing a module: a real fold (2026-07-30) ----------------
   A plain <details> SNAPS: the items appear — or vanish — in a single frame,
   and a close cannot be eased at all, because the browser hides the panel the
   instant the attribute goes. So base.html drives the fold itself and animates
   the panel's height, which makes both directions glide and lets the module
   you are leaving fold up while the new one opens. Only two rules are needed
   here; there is deliberately no CSS animation left, or it would run a second
   time on top of the scripted one.
   If the script cannot run (very old browser, motion turned off) nothing below
   applies and the menu simply behaves like a normal <details>.            ---- */

/* while the height is being animated the items must be clipped, not spill */
#sidenav details.nav-folding > div{overflow:hidden;}

/* soft "warn but allow" hint under phone / Aadhaar / email / percent fields —
   quiet amber, never blocks a save (base.html wires it centrally) */
.soft-hint{font-size:.75rem;line-height:1rem;color:#d97706;margin-top:2px;}

/* a closing module still carries [open] until its fold finishes, so the ▶
   marker would hang at 90° for the whole animation — turn it back on click.
   (Beats Tailwind's group-open:rotate-90 on specificity: this rule has an id.) */
#sidenav details.nav-closing > summary > span:last-child{transform:rotate(0deg);}

/* =====================================================================
   ALL MODULES on PHONES — layout ergonomics + accessibility.
   Started as the academic-only pass (2026-08-22, scoped to that module);
   the owner then asked for the same everywhere, so the rules are
   unscoped now. The .cls-*/.unit-*/.att-* hooks are opt-in by class —
   they style nothing until a template carries them. Desktop (>640px)
   keeps the exact same look except the focus outline, which is
   keyboard-only. The mod-<module> body hook (base.html) remains for
   any future module-specific rule.
   ===================================================================== */

/* Keyboard focus is visible (touch/mouse users see nothing new —
   :focus-visible fires for keyboard navigation only). */
main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible,
main summary:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px;
}

@media (max-width:640px){

    /* Grid cards can never push the page sideways: a grid item's default
       min-width:auto refuses to shrink below its longest unbreakable token
       (a URL in a help text was enough), shifting whole cards off-screen.
       Let items shrink and wrap long tokens instead. */
    main .grid > *{min-width:0; overflow-wrap:break-word;}

    /* --- Today's Classes: the class row -------------------------------
       One flex line held time + title + status + buttons; on a phone the
       fixed parts consumed the whole width and the TITLE was crushed to
       0px (the subject wrapped letter-by-letter, ~300px per card).
       Wrap instead: line 1 = time + subject, line 2 = status + actions. */
    .cls-row{flex-wrap:wrap; row-gap:.35rem;}
    .cls-row .cls-time{width:auto; min-width:4.5rem;}
    .cls-row .cls-main{
        flex:1 1 auto; min-width:0;
        /* force status+actions onto the next line */
        flex-basis:calc(100% - 5.25rem - .75rem);
    }
    .cls-row .cls-status{order:3;}
    .cls-row .cls-actions{order:4; margin-left:auto;}

    /* Comfortable touch targets (44px guideline; these were 32x36) */
    .icon-btn{
        min-width:2.75rem; min-height:2.5rem;
        display:inline-flex; align-items:center; justify-content:center;
    }
    .cls-actions a,
    .cls-actions button{
        min-height:2.5rem;
        display:inline-flex; align-items:center; justify-content:center;
    }
    /* row actions inside tables everywhere ("Enter now", "Edit", names):
       buttons and links get a comfortable tap box on phones */
    main table button{min-height:2.5rem;}
    /* Two actions in one cell (Cancel + Delete on the Refund Register) sit side
       by side on a desktop, but on a phone they push the table wider than the
       screen and carry the second button off the edge — stack them instead. */
    main table .stack-actions form{display:block;}
    main table .stack-actions form + form{margin-top:.25rem;}
    main table a{display:inline-flex; align-items:center; min-height:2.25rem;}
    .rowchk{width:1.15rem; height:1.15rem;}

    /* --- Take Class: the unit (topic) rows ----------------------------
       Six columns cannot share 375px. The header hides; each row wraps:
       line 1 = tick + U# + topic, line 2 = "INC x · taught y" + hours box.
       The numbers carry their own labels since the header is gone. */
    .unit-head{display:none;}
    .unit-row{flex-wrap:wrap; row-gap:.2rem;
        padding-top:.45rem; padding-bottom:.45rem;}
    .unit-row .unit-topic{flex-basis:calc(100% - 5rem);}
    .unit-row .unit-inc,
    .unit-row .unit-done{
        width:auto; text-align:left; white-space:nowrap;
    }
    .unit-row .unit-inc{margin-left:4.25rem;}
    .unit-row .unit-inc::before{content:"INC ";}
    .unit-row .unit-done::before{content:"taught ";}
    .unit-row .unit-hrs{margin-left:auto;}

    /* --- Take Class: attendance P/A/L pills (the most-tapped control)
       were 32x26 — well under any touch guideline. */
    .att-pill{
        padding:.4rem .7rem; min-width:2.25rem; min-height:2.5rem;
        display:inline-flex; align-items:center; justify-content:center;
    }
    .att-bulk{padding:.5rem .7rem; min-height:2.25rem;
        display:inline-flex; align-items:center;}
    .unit-row .unit-hrs{min-height:2.25rem;}

    /* --- iPhone zoom trap: Safari zooms the page into any form control
       whose text is under 16px, then the teacher has to pinch back out
       after every field. 16px text stops the zoom. */
    /* :is() carries its argument's specificity, so this outranks the
       text-xs/text-sm utilities that sit on many selects */
    main :is(input:not([type=checkbox]):not([type=radio]), select, textarea){
        font-size:16px;
    }
}