/* =========================================================================
   Teaching Activity System — design layer
   Implements the token set from design_handoff_teaching_system/README.md.

   HOW THIS SITS NEXT TO BOOTSTRAP (decision, phase 0.2)
   -----------------------------------------------------
   Bootstrap 5.3.3 stays loaded for now and is dropped in phase 9. The design
   uses no Bootstrap component — every layout in the mocks is CSS grid or flex
   — but 24 templates still lean on its classes, so removing it today would
   break every screen that has not been rebuilt yet.

   To avoid a specificity war in the meantime, nothing here overrides a
   Bootstrap component. Instead:

     * tokens are  --ta-*  custom properties on :root
     * components are  .ta-*  classes, so they never collide with .btn, .card,
       .table, .navbar and friends
     * Bootstrap utilities (d-flex, mb-3, ...) stay usable on rebuilt screens
     * one bridge block below remaps the handful of --bs-* colour variables so
       that screens still running on Bootstrap do not clash with the new
       chrome. That block is temporary and is deleted with Bootstrap itself.

   Load order in base.html is: remixicon, fonts, app.css.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --ta-ground: #eeeeec;
    --ta-surface: #ffffff;
    --ta-surface-alt: #fbfbf9;
    --ta-sunken: #f7f7f5;
    --ta-sunken-2: #f4f4f1;
    --ta-filter-strip: #fafaf8;
    --ta-share-card: #fcfcfb;

    /* Borders */
    --ta-border-strong: #d8d8d2;
    --ta-border: #e6e6e1;
    --ta-border-light: #f1f1ed;
    --ta-border-lighter: #eeeeea;

    /* Ink */
    --ta-ink: #1b1c1e;
    --ta-ink-2: #3c4045;
    --ta-ink-3: #4a4e54;
    --ta-muted: #6c7075;
    --ta-muted-2: #7a7e84;
    --ta-faint: #c9ccd0;

    /* Accent — the only accent. Status is carried by pills and this colour. */
    --ta-accent: #1f4e8c;
    --ta-accent-hover: #16375f;
    --ta-accent-tint: #eef3fa;
    --ta-accent-tint-2: #eaf1fb;
    --ta-accent-tint-3: #e3ecf8;
    --ta-accent-text: #1a4478;
    --ta-accent-light: #a8c6ee;

    /* Rows */
    --ta-row-selected: #f4f6f9;
    --ta-row-hover: #f7f8fa;

    /* Status */
    --ta-locked: #55585c;
    --ta-caution: #c2ab6e;
    --ta-caution-tint: #f6f2e6;
    --ta-caution-tint-2: #f6f2ea;
    --ta-caution-border: #e4dcc4;
    --ta-caution-text: #7d6a35;
    --ta-caution-text-2: #8a7a55;
    --ta-caution-strip-text: #6b5c33;
    --ta-mid-bar: #5d7fa8;
    --ta-track: #ebebe7;
    --ta-danger-text: #8a5a5a;
    --ta-danger-border: #d8c9c9;

    /* Staff split row status (handoff Screen 10) */
    --ta-done-bg: #e5f0e6;
    --ta-done-text: #2c6a3a;
    --ta-left-bg: #fbeedb;
    --ta-left-border: #efd6b0;
    --ta-left-text: #8a4f00;
    --ta-over-bg: #f8e3e0;
    --ta-over-text: #a3261b;

    /* Disabled / read-only */
    --ta-disabled-bg: #f1f1ed;
    --ta-disabled-text: #9a9ea4;
    --ta-disabled-border: #e2e2dc;
    --ta-readonly-bg: #f7f7f5;

    /* Navbar */
    --ta-nav-bg: #1b1c1e;
    --ta-nav-link: #cfd2d6;
    --ta-nav-chip: #26282a;
    --ta-nav-rule: #3c4045;

    /* Type */
    --ta-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ta-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* Spacing — 4px base, the steps the handoff actually uses */
    --ta-s1: 4px;
    --ta-s2: 6px;
    --ta-s3: 8px;
    --ta-s4: 10px;
    --ta-s5: 12px;
    --ta-s6: 14px;
    --ta-s7: 16px;
    --ta-s8: 18px;
    --ta-s9: 22px;
    --ta-s10: 26px;
    --ta-s11: 28px;

    /* Radius — no shadows anywhere; separation is border and surface tone */
    --ta-r-control: 3px;
    --ta-r-inner: 4px;
    --ta-r-card: 5px;
    --ta-r-chip: 999px;

    /* Layout caps */
    --ta-page-max: 1560px;
    --ta-page-max-wide: 1780px;
    --ta-page-max-narrow: 1240px;
    --ta-page-pad: 28px;
}


/* -------------------------------------------------------------------------
   3. Base
   (Section 2 was the Bootstrap colour bridge, deleted in phase 9 along with
   bootstrap.min.css. The numbering is left alone so the section names in the
   handover and in commit messages still point at the right places.)
   ------------------------------------------------------------------------- */

body {
    margin: 0;    /* Bootstrap's reboot used to do this; without it every page sat 8px in */
    background: var(--ta-ground);
    color: var(--ta-ink);
    font-family: var(--ta-sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

a {
    color: var(--ta-accent);
}

a:hover {
    color: var(--ta-accent-hover);
}

/* Keyboard focus stays visible everywhere. */
:focus-visible {
    outline: 2px solid var(--ta-accent);
    outline-offset: 1px;
}

.ta-page {
    max-width: var(--ta-page-max);
    margin: 0 auto;
    padding-inline: var(--ta-page-pad);
}

.ta-page--wide { max-width: var(--ta-page-max-wide); }
.ta-page--narrow { max-width: var(--ta-page-max-narrow); }

@media (max-width: 640px) {
    .ta-page { padding-inline: var(--ta-s7); }
}

/* Every number that lines up in a column. */
.ta-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ta-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ta-muted-2);
}

.ta-h1 {
    font-family: var(--ta-serif);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.ta-h2 {
    font-family: var(--ta-serif);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.ta-group-header {
    font-family: var(--ta-serif);
    font-size: 14.5px;
    font-weight: 600;
    background: var(--ta-sunken);
}

.ta-meta {
    font-size: 12.5px;
    color: var(--ta-muted-2);
}

.ta-hint {
    font-size: 13px;
    color: var(--ta-muted);
}


/* -------------------------------------------------------------------------
   4. Navbar
   ------------------------------------------------------------------------- */

.ta-nav {
    background: var(--ta-nav-bg);
    color: var(--ta-nav-link);
}

.ta-nav__inner {
    max-width: var(--ta-page-max-narrow);
    margin: 0 auto;
    padding: 11px var(--ta-page-pad);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ta-s9);
    row-gap: var(--ta-s3);
    font-size: 13.5px;
}

.ta-nav__brand {
    font-family: var(--ta-serif);
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

.ta-nav__brand:hover { color: #ffffff; }

.ta-nav__link {
    font-size: 13.5px;
    color: var(--ta-nav-link);
    white-space: nowrap;
    flex-shrink: 0;
}

.ta-nav__link:hover { color: #ffffff; }

.ta-nav__link.is-active {
    color: #ffffff;
    font-weight: 600;
}

/* Notifications bell (Buildv2 §17.2); the badge counts unread ones. */
.ta-nav__bell { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.ta-nav__badge {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ta-caution);
    color: #1d1d1d;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Admin links sit in their own chip — this is the admin/user distinction. */
.ta-nav__admin {
    display: flex;
    align-items: center;
    gap: var(--ta-s6);
    background: var(--ta-nav-chip);
    padding: var(--ta-s1) var(--ta-s5);
    border-radius: var(--ta-r-control);
    flex-wrap: wrap;
    row-gap: var(--ta-s1);
}

.ta-nav__admin-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a8e94;
    white-space: nowrap;
}

.ta-nav__spacer { margin-left: auto; }

.ta-nav__divider {
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--ta-nav-rule);
    flex-shrink: 0;
}

.ta-nav__user {
    font-size: 13px;
    color: #8a8e94;
    white-space: nowrap;
}
a.ta-nav__user:hover, a.ta-nav__user.is-active { color: #ffffff; }

.ta-nav__logout {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13.5px;
    color: var(--ta-nav-link);
    cursor: pointer;
    white-space: nowrap;
}

.ta-nav__logout:hover { color: #ffffff; }


/* -------------------------------------------------------------------------
   5. Page header
   ------------------------------------------------------------------------- */

.ta-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ta-ground);
    border-bottom: 1px solid var(--ta-border-strong);
}

.ta-header__inner {
    max-width: var(--ta-page-max);
    margin: 0 auto;
    padding-inline: var(--ta-page-pad);
}

.ta-header--wide .ta-header__inner { max-width: var(--ta-page-max-wide); }
.ta-header--narrow .ta-header__inner { max-width: var(--ta-page-max-narrow); }

.ta-header__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ta-s1) var(--ta-s5);
    padding-block: var(--ta-s4) var(--ta-s2);
    font-size: 13px;
    color: var(--ta-muted);
}

.ta-header__crumbs a { color: var(--ta-muted); }
.ta-header__crumbs a:hover { color: var(--ta-ink-2); }

.ta-header__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ta-s5) var(--ta-s9);
    padding-bottom: var(--ta-s6);
}

.ta-header__titles {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ta-s2) var(--ta-s5);
    min-width: 0;
}

.ta-header__titles .ta-h1 { flex: 0 0 auto; }

.ta-header__deadline {
    font-size: 13px;
    color: var(--ta-muted);
}

.ta-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ta-s3);
}

/* Autosave state, right end of the breadcrumb row. */
.ta-savestate {
    display: inline-flex;
    align-items: center;
    gap: var(--ta-s2);
    font-size: 13px;
    color: var(--ta-muted);
}

.ta-savestate::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--ta-r-chip);
    background: var(--ta-accent);
    flex-shrink: 0;
}

.ta-savestate.is-failed { color: var(--ta-caution-text); }
.ta-savestate.is-failed::before { background: var(--ta-caution); }


/* -------------------------------------------------------------------------
   6. State pills
   ------------------------------------------------------------------------- */

.ta-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ta-s2);
    padding: 5px 11px;
    border-radius: var(--ta-r-control);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ta-pill--open {
    background: var(--ta-accent);
    color: #ffffff;
}

.ta-pill--open::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--ta-r-chip);
    background: var(--ta-accent-light);
}

.ta-pill--locked {
    background: var(--ta-locked);
    color: #ffffff;
}

.ta-pill--none {
    background: var(--ta-surface);
    color: var(--ta-muted);
    border: 1px solid var(--ta-border-strong);
}

/* Smaller pills used inside tables and cards. */
.ta-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--ta-r-control);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ta-tag--over { background: var(--ta-accent-tint-3); color: var(--ta-accent-text); }
.ta-tag--on { background: #edf0f4; color: var(--ta-ink-3); }
.ta-tag--under { background: var(--ta-caution-tint); color: var(--ta-caution-text); }
.ta-tag--none { background: var(--ta-disabled-bg); color: var(--ta-disabled-text); }
/* A semester figure: fulfilment is judged on the year (Buildv2 §4.2). */
.ta-tag--interim { background: #edf0f4; color: var(--ta-ink-3); }


/* -------------------------------------------------------------------------
   7. KPI strip
   ------------------------------------------------------------------------- */

.ta-kpi {
    display: flex;
    flex-wrap: wrap;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-inner);
    overflow: hidden;
}

.ta-kpi__cell {
    flex: 1 1 auto;
    min-width: 108px;
    padding: var(--ta-s4) var(--ta-s6) var(--ta-s5);
    border-left: 1px solid var(--ta-border);
}

.ta-kpi__cell:first-child { border-left: 0; }

.ta-kpi__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ta-muted-2);
    white-space: nowrap;
}

.ta-kpi__value {
    font-family: var(--ta-serif);
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: 1px;
}


/* -------------------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------------------- */

.ta-card {
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
}

.ta-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ta-s2) var(--ta-s6);
    padding: var(--ta-s6) var(--ta-s8) 13px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-card__body { padding: var(--ta-s6) var(--ta-s8); }

.ta-card__foot {
    padding: var(--ta-s4) var(--ta-s8) var(--ta-s5);
    background: var(--ta-sunken);
    border-top: 1px solid var(--ta-border);
    font-size: 12.5px;
    color: var(--ta-muted-2);
    border-radius: 0 0 var(--ta-r-card) var(--ta-r-card);
}

.ta-empty {
    text-align: center;
    padding: 46px var(--ta-s8);
}

.ta-empty__title {
    font-family: var(--ta-serif);
    font-size: 17px;
    font-weight: 600;
}

.ta-empty__hint {
    font-size: 13.5px;
    color: var(--ta-muted-2);
    margin-top: var(--ta-s1);
}


/* Admin card — the dashboard's administration grid. */
.ta-admin-card {
    display: block;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-inner);
    padding: 13px 15px 15px;
    color: var(--ta-ink);
}

.ta-admin-card:hover {
    border-color: var(--ta-accent);
    color: var(--ta-ink);
}


/* -------------------------------------------------------------------------
   9. Buttons
   ------------------------------------------------------------------------- */

.ta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ta-s2);
    padding: 7px 13px;
    border-radius: var(--ta-r-control);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.ta-btn--primary {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: #ffffff;
    font-weight: 600;
}

.ta-btn--primary:hover {
    background: var(--ta-accent-hover);
    border-color: var(--ta-accent-hover);
    color: #ffffff;
}

.ta-btn--outline {
    background: var(--ta-surface);
    border-color: var(--ta-border-strong);
    color: var(--ta-ink-3);
}

.ta-btn--outline:hover {
    background: var(--ta-sunken);
    color: var(--ta-ink);
}

.ta-btn--accent-outline {
    background: transparent;
    border-color: var(--ta-accent);
    color: var(--ta-accent);
}

.ta-btn--accent-outline:hover {
    background: var(--ta-accent-tint);
    color: var(--ta-accent-hover);
}

.ta-btn--text {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ta-accent);
    font-size: 12.5px;
}

.ta-btn--danger {
    background: var(--ta-surface);
    border-color: var(--ta-danger-border);
    color: var(--ta-danger-text);
}

.ta-btn--sm {
    padding: 4px 9px;
    font-size: 12.5px;
}

/* One disabled treatment everywhere, including the catalogue "Added" state. */
.ta-btn:disabled,
.ta-btn.is-disabled {
    background: var(--ta-disabled-bg);
    border-color: var(--ta-disabled-border);
    color: var(--ta-disabled-text);
    cursor: default;
    pointer-events: none;
}


/* -------------------------------------------------------------------------
   10. Filter chips and segmented controls
   ------------------------------------------------------------------------- */

.ta-chip {
    display: inline-block;
    padding: var(--ta-s1) var(--ta-s4);
    border-radius: var(--ta-r-chip);
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-ink-3);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.ta-chip.is-active {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: #ffffff;
}

.ta-segmented {
    display: inline-flex;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-control);
    overflow: hidden;
}

.ta-segmented button {
    background: var(--ta-surface);
    border: 0;
    border-left: 1px solid var(--ta-border-strong);
    padding: 4px var(--ta-s4);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ta-ink-3);
    cursor: pointer;
    white-space: nowrap;
}

.ta-segmented button:first-child { border-left: 0; }
.ta-segmented button:hover { background: #f3f3f0; }

.ta-segmented button.is-active {
    background: var(--ta-accent);
    color: #ffffff;
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   11. Form controls
   ------------------------------------------------------------------------- */

.ta-label {
    display: block;
    font-size: 13px;
    color: var(--ta-muted);
    margin-bottom: var(--ta-s1);
}

.ta-input,
.ta-select {
    width: 100%;
    padding: 8px var(--ta-s4);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-control);
    background: var(--ta-surface);
    color: var(--ta-ink);
    font-family: inherit;
    font-size: 13.5px;
}

.ta-input--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ta-input:focus,
.ta-select:focus {
    border-color: var(--ta-accent);
    outline: none;
}

.ta-input[readonly],
.ta-input:disabled,
.ta-select:disabled {
    background: var(--ta-readonly-bg);
    color: var(--ta-ink-3);
    border-color: var(--ta-border);
}

.ta-help {
    font-size: 12.5px;
    color: var(--ta-muted-2);
    margin-top: var(--ta-s1);
}

/* Validation lives in the caution family — never red. */
.ta-input.is-invalid,
.ta-select.is-invalid {
    border-color: var(--ta-caution);
    background: #fdfbf5;
}

.ta-error {
    font-size: 12.5px;
    color: var(--ta-caution-text);
    margin-top: var(--ta-s1);
}


/* -------------------------------------------------------------------------
   12. Banners
   ------------------------------------------------------------------------- */

.ta-banner {
    background: var(--ta-caution-tint);
    border: 1px solid var(--ta-caution-border);
    border-left: 3px solid var(--ta-caution);
    border-radius: var(--ta-r-control);
    color: var(--ta-caution-strip-text);
    padding: var(--ta-s4) var(--ta-s5);
    font-size: 13.5px;
}

.ta-banner b,
.ta-banner strong { font-weight: 700; }

.ta-banner--info {
    background: var(--ta-row-selected);
    border-color: #cfdcee;
    border-left-color: var(--ta-accent);
    color: var(--ta-accent-text);
}


/* -------------------------------------------------------------------------
   13. Tables
   Shared rhythm for the grid-based tables the screens build on top.
   ------------------------------------------------------------------------- */

.ta-scroll-x { overflow-x: auto; }

.ta-colhead {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
    background: var(--ta-sunken);
}

.ta-row {
    border-bottom: 1px solid var(--ta-border-lighter);
    border-left: 3px solid transparent;
}

.ta-row:hover { background: var(--ta-row-hover); }

.ta-row.is-selected {
    background: var(--ta-row-selected);
    border-left-color: var(--ta-accent);
}

.ta-row.is-unsaved { border-left-color: var(--ta-caution); }

/* Official German terms (glossary.py): dotted underline, English hint in the
   native tooltip. Touch screens have no hover, so a tap focuses the term and
   the same hint is drawn below it. */
.ta-term {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
    position: relative;
}
@media (hover: none) {
    .ta-term:focus::after {
        content: attr(title);
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 4px;
        z-index: 20;
        width: max-content;
        max-width: min(260px, 80vw);
        padding: 6px 8px;
        border-radius: var(--ta-r-control);
        background: var(--ta-ink, #222);
        color: #fff;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.35;
        text-transform: none;
        letter-spacing: 0;
        white-space: normal;
    }
}

/* The academic-year table (Buildv2 §4.3): a real <table>, styled like the
   grid rows so it sits with the other screens. */
.ta-yeartable { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.ta-yeartable th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
    background: var(--ta-sunken);
    text-align: left;
    padding: 9px 12px;
    white-space: nowrap;
}
.ta-yeartable td { padding: 9px 12px; border-bottom: 1px solid var(--ta-border-lighter); }
.ta-yeartable tbody tr:hover { background: var(--ta-row-hover); }
.ta-yeartable th:first-child, .ta-yeartable td:first-child { padding-left: 18px; }
.ta-yeartable th.ta-num, .ta-yeartable td.ta-num { text-align: right; }

/* "No value" is a dot, not an empty cell and not 0.00. */
.ta-nil { color: var(--ta-faint); }


/* -------------------------------------------------------------------------
   14. Progress bars (group load cards, statistics)
   ------------------------------------------------------------------------- */

.ta-bar {
    height: 5px;
    background: var(--ta-track);
    border-radius: var(--ta-r-control);
    overflow: hidden;
}

.ta-bar__fill {
    height: 100%;
    border-radius: var(--ta-r-control);
    background: var(--ta-mid-bar);
}

.ta-bar__fill--over { background: var(--ta-accent); }
.ta-bar__fill--on { background: var(--ta-mid-bar); }
.ta-bar__fill--under { background: var(--ta-caution); }
.ta-bar__fill--none { background: var(--ta-faint); }
.ta-bar__fill--interim { background: var(--ta-mid-bar); }


/* -------------------------------------------------------------------------
   15. Messages — Django's messages framework, restyled off Bootstrap alerts
   ------------------------------------------------------------------------- */

.ta-messages {
    max-width: var(--ta-page-max);
    margin: var(--ta-s6) auto 0;
    padding-inline: var(--ta-page-pad);
    display: grid;
    gap: var(--ta-s3);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* -------------------------------------------------------------------------
   16. Semester overview matrix
   The geometry here is the one fragile part of the handoff. Two rules carry
   it: box-sizing on every cell (without it the declared widths exclude
   padding and the pinned columns drift out of line with their heads), and
   opaque backgrounds on the pinned cells (a transparent sticky cell lets the
   scrolling columns show through underneath it).
   Left offsets: Code at 0, Activity at 156px = the Code column's width.
   ------------------------------------------------------------------------- */

.ta-matrix-scroll {
    overflow: auto;
    max-height: 620px;
}

.ta-matrix {
    table-layout: fixed;
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.ta-matrix th,
.ta-matrix td {
    box-sizing: border-box;
}

/* --- head --- */
.ta-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ta-sunken-2);
    border-bottom: 1px solid var(--ta-border-strong);
    padding: 9px 12px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
}

.ta-matrix thead th.ta-mx-entity {
    text-align: right;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    padding: 9px 10px;
    cursor: pointer;
}

.ta-matrix thead th.ta-mx-entity.is-focused {
    background: var(--ta-accent-tint-3);
    color: var(--ta-accent-text);
}

/* --- pinned columns --- */
.ta-matrix .ta-mx-code {
    width: 156px;
    min-width: 156px;
    max-width: 156px;
    position: sticky;
    left: 0;
    border-right: 1px solid var(--ta-border);
}

.ta-matrix .ta-mx-title {
    width: 300px;
    min-width: 300px;
    position: sticky;
    left: 156px;
    border-right: 1px solid var(--ta-border-strong);
}

.ta-matrix thead th.ta-mx-code,
.ta-matrix thead th.ta-mx-title { z-index: 12; }

.ta-matrix tbody td.ta-mx-code,
.ta-matrix tbody td.ta-mx-title { z-index: 4; }

/* --- other column widths --- */
.ta-matrix .ta-mx-type { width: 92px; }
.ta-matrix .ta-mx-program { width: 168px; }
.ta-matrix .ta-mx-part { width: 74px; }
.ta-matrix .ta-mx-base { width: 82px; border-right: 1px solid var(--ta-border); }
.ta-matrix .ta-mx-entity { width: 88px; min-width: 88px; }
.ta-matrix .ta-mx-total { width: 92px; min-width: 92px; border-left: 1px solid var(--ta-border); }
/* Trailing spacer absorbs leftover width so the real columns keep their size. */
.ta-matrix .ta-mx-spacer { width: auto; }

/* --- body --- */
.ta-matrix tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ta-border-light);
    background: var(--ta-surface);
}

.ta-matrix tbody tr.is-alt td { background: var(--ta-surface-alt); }
.ta-matrix tbody tr:hover td { background: var(--ta-row-hover); }

.ta-matrix tbody td.ta-mx-code {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ta-ink-2);
}

.ta-matrix tbody td.ta-mx-title { line-height: 1.3; text-wrap: pretty; }

.ta-matrix td.ta-mx-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ta-matrix td.ta-mx-entity { padding: 9px 10px; }

.ta-matrix td.ta-mx-entity.is-focused {
    background: var(--ta-accent-tint-2) !important;
    color: var(--ta-accent-text);
    font-weight: 700;
}

.ta-matrix td.ta-mx-total { font-weight: 600; }

.ta-matrix td.ta-mx-unassigned {
    background: var(--ta-caution-tint-2) !important;
    color: var(--ta-caution-text-2);
    font-weight: 400;
    text-align: right;
    font-size: 12.5px;
}

/* --- group header rows --- */
.ta-matrix tbody td.ta-mx-group {
    background: var(--ta-sunken);
    font-family: var(--ta-serif);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ta-ink);
    border-bottom: 1px solid var(--ta-border);
    padding: 10px 12px;
}

/* --- foot --- */
.ta-matrix tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--ta-sunken-2);
    border-top: 1px solid var(--ta-border-strong);
    padding: 11px 12px;
}

.ta-matrix tfoot td.ta-mx-code,
.ta-matrix tfoot td.ta-mx-title { z-index: 6; }

.ta-matrix tfoot td.ta-mx-code {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
}

.ta-matrix tfoot td.ta-mx-title { color: var(--ta-muted); font-size: 12.5px; }
.ta-matrix tfoot td.ta-mx-num { font-weight: 600; }
.ta-matrix tfoot td.is-focused { background: var(--ta-accent-tint-3); color: var(--ta-accent-text); }
.ta-matrix tfoot td.ta-mx-grand { font-weight: 700; }

/* --- group summary cards above the matrix --- */
.ta-groupgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.ta-groupcard {
    padding: 12px 16px 13px;
    cursor: pointer;
    border-right: 1px solid var(--ta-border-light);
    border-bottom: 1px solid var(--ta-border-light);
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    width: 100%;
}

.ta-groupcard:hover { background: var(--ta-row-hover); }
.ta-groupcard.is-focused { background: var(--ta-row-selected); }

.ta-groupcard__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.ta-groupcard__name { font-size: 14px; font-weight: 600; }

.ta-groupcard__figures {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 7px;
}

.ta-groupcard__value {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ta-groupcard__of { font-size: 12.5px; color: var(--ta-muted-2); }


/* -------------------------------------------------------------------------
   17. Course instances (screen 4)
   The grid drops the handoff's Status column: CourseInstance.status was
   removed in migration 0022, because instances are created by research
   groups during entry and never passed through an admin staging step.
   "Claimed by" takes its place — the question an admin actually has about a
   row is which group owns it.
   ------------------------------------------------------------------------- */

.ta-instrow {
    display: grid;
    grid-template-columns: 40px 152px minmax(0, 1fr) 104px 92px 200px 96px;
    min-width: 900px;
    box-sizing: border-box;
}

/* No gap, for the same reason as .ta-tmplrow below: the width budget is
   spent on the columns, and padding does the separating. */
.ta-instrow > * { padding-right: 14px; }
.ta-instrow > :last-child { padding-right: 0; }

.ta-row.ta-instrow { cursor: pointer; }
.ta-row.ta-instrow:has(input[data-rowcheck]:checked) {
    background: var(--ta-row-selected);
    border-left-color: var(--ta-accent);
}

/* The bulk bar replaces nothing while it is hidden: it sits above the column
   head and pushes it down, so the row positions never shift under a tick. */
.ta-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--ta-row-selected);
    border-bottom: 1px solid var(--ta-border);
}

.ta-bulkbar__count {
    font-size: 13.5px;
    font-weight: 600;
    margin-right: auto;
}


/* -------------------------------------------------------------------------
   18. Course templates and the detail drawer (screen 5)
   The list keeps its own scroll container; the drawer sits beside it and
   sticks, so reading a definition never costs the list's scroll position.
   ------------------------------------------------------------------------- */

.ta-split {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.ta-split__main { flex: 1 1 640px; min-width: 0; }

/* A split whose banners (flex: 1 1 100%) must take their own full-width line
   above the columns instead of squeezing in beside them. */
.ta-split--banners { flex-wrap: wrap; }

/* Finish / unlock a semester: prominent, its own full-width line. */
.ta-finishbar {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 14px 18px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--ta-border);
    border-left: 3px solid var(--ta-accent);
    border-radius: var(--ta-r-card);
    font-size: 14px;
}
.ta-finishbar > div { flex: 1 1 360px; min-width: 0; }
.ta-finishbar.is-finished { background: var(--ta-row-selected); }

.ta-tmplrow {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 96px 164px 74px 66px 62px 74px 96px 92px;
    min-width: 1080px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
}

/* The handoff's column widths assume no gap: the fixed columns already come
   to 872px of the 1080px minimum, so a gap would be taken out of the title.
   Cells separate themselves with their own padding instead. */
.ta-tmplrow > * { padding-right: 12px; }
.ta-tmplrow > :last-child { padding-right: 0; }

a.ta-row.ta-tmplrow:hover { text-decoration: none; }

/* Revision badges. These replace the green "Active" pill: current is the
   accent tint, superseded the caution tint, so neither reads as a status. */
.ta-rev {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--ta-r-control);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ta-rev--current { background: var(--ta-accent-tint-3); color: var(--ta-accent-text); }
.ta-rev--old { background: var(--ta-caution-tint); color: var(--ta-caution-text); }

.ta-drawer {
    flex: 1 1 360px;
    max-width: 420px;
    position: sticky;
    top: 92px;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
    max-height: calc(100vh - 116px);
    overflow-y: auto;
}

/* On its own page the drawer is just a card: no sticking, no close button. */
.ta-drawer--page {
    position: static;
    max-width: none;
    max-height: none;
    flex: none;
}

.ta-drawer--page .ta-drawer__close { display: none; }

.ta-drawer__close {
    float: right;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    padding: 12px 14px;
    color: var(--ta-muted-2);
    cursor: pointer;
}

.ta-drawer__close:hover { color: var(--ta-ink); }

.ta-drawer__head {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-drawer__body { padding: 4px 18px 16px; }

.ta-drawer__section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ta-border-light);
}

.ta-drawer__title {
    font-family: var(--ta-serif);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 9px;
}

.ta-drawer__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--ta-sunken);
    border-top: 1px solid var(--ta-border);
    border-radius: 0 0 var(--ta-r-card) var(--ta-r-card);
}

/* Label/value rows: the label column sizes to its content and stops there. */
.ta-deflist {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: 7px 14px;
    font-size: 13.5px;
    align-items: baseline;
    padding-top: 12px;
}

.ta-deflist__label { color: var(--ta-muted); font-size: 13px; }
.ta-deflist .ta-num { text-align: left; }

.ta-revlist { display: grid; gap: 4px; }

.ta-revlist__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 1px solid var(--ta-border-light);
    border-radius: var(--ta-r-control);
    color: inherit;
    text-decoration: none;
}

.ta-revlist__row:hover { background: var(--ta-row-hover); text-decoration: none; }
.ta-revlist__row.is-shown { background: var(--ta-row-selected); border-color: var(--ta-border-strong); }

/* Markdown notes. Nothing here may introduce a colour of its own. */
.ta-prose { font-size: 13.5px; line-height: 1.6; }
.ta-prose > :first-child { margin-top: 0; }
.ta-prose > :last-child { margin-bottom: 0; }
.ta-prose code {
    background: var(--ta-sunken);
    padding: 0.15em 0.35em;
    border-radius: var(--ta-r-control);
    font-size: 0.92em;
}
.ta-prose pre {
    background: var(--ta-sunken);
    padding: 10px 12px;
    border-radius: var(--ta-r-inner);
    overflow-x: auto;
}
.ta-prose pre code { background: none; padding: 0; }
.ta-prose blockquote {
    margin: 0 0 1em;
    padding-left: 12px;
    border-left: 3px solid var(--ta-border-strong);
    color: var(--ta-muted);
}

/* Below this the drawer cannot sit beside a 1080px table and still be read. */
@media (max-width: 1100px) {
    .ta-split { display: block; }
    .ta-drawer {
        position: static;
        max-width: none;
        max-height: none;
        margin-top: 22px;
    }
}


/* -------------------------------------------------------------------------
   19. Statistics chart (screen 6)
   Plain HTML: a track and a fill per row, no chart library. The axis is
   capped so a single 636 % group cannot flatten every other bar, and the
   exact figure always prints in the value column -- which is also the relief
   the palette needs, since the caution and no-target fills sit below 3:1
   against the card and must never be the only thing carrying a number.
   ------------------------------------------------------------------------- */

.ta-chart { display: grid; gap: 7px; }

.ta-chart__row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 96px;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--ta-r-control);
}

.ta-chart__row:hover { background: var(--ta-row-hover); text-decoration: none; }

.ta-chart__name {
    text-align: right;
    font-size: 13px;
    color: var(--ta-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-chart__track {
    position: relative;
    height: 22px;
    background: var(--ta-sunken-2);
    border-radius: 2px;
}

.ta-chart__fill,
.ta-chart__stack {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    display: flex;
}

.ta-chart__fill.is-over { background: var(--ta-accent); }
.ta-chart__fill.is-on { background: var(--ta-mid-bar); }
.ta-chart__fill.is-under { background: var(--ta-caution); }
.ta-chart__fill.is-none { background: var(--ta-faint); }
.ta-chart__fill.is-interim { background: var(--ta-mid-bar); }

/* A 2px gap of the surface between touching fills, so two segments never
   read as one even where their colours are close. */
.ta-chart__seg { box-shadow: 2px 0 0 var(--ta-surface); }
.ta-chart__seg:last-child { box-shadow: none; }
.ta-chart__stack > :first-child { border-radius: 2px 0 0 2px; }
.ta-chart__stack > :last-child { border-radius: 0 2px 2px 0; }

/* Past the cap the fill fades out rather than ending in a hard edge that
   would read as the real value. */
.ta-chart__track.is-capped::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 26px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ta-surface));
    pointer-events: none;
}

.ta-chart__marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--ta-ink);
    opacity: 0.55;
}

.ta-chart__value {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ta-chart__value.is-over { color: var(--ta-accent-text); }
.ta-chart__value.is-under { color: var(--ta-caution-text); }
.ta-chart__value.is-none { color: var(--ta-muted-2); font-weight: 400; }

.ta-ticks {
    position: relative;
    height: 20px;
    margin: 6px 0 0 130px;
    margin-right: 108px;
}

.ta-ticks__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--ta-muted-2);
    white-space: nowrap;
}

.ta-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 14px 130px;
    font-size: 12.5px;
    color: var(--ta-ink-3);
}

.ta-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.ta-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* The table view. Plain, dense, copyable. */
.ta-datatable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ta-datatable caption { text-align: left; padding: 4px 0 10px; }

.ta-datatable th,
.ta-datatable td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ta-border-lighter);
    text-align: left;
}

.ta-datatable thead th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
    border-bottom: 1px solid var(--ta-border);
}

.ta-datatable .ta-num { text-align: right; }
.ta-datatable tbody th { font-weight: 600; }

@media (max-width: 620px) {
    .ta-chart__row { grid-template-columns: 96px minmax(0, 1fr) 76px; gap: 8px; }
    .ta-ticks, .ta-legend { margin-left: 104px; }
}


/* -------------------------------------------------------------------------
   20. Admin forms (screen 8)
   One pattern for every admin form: sections with a sentence saying why they
   matter, label-above-control fields, a live computed preview where a formula
   is involved, caution-family validation, and a footer that spells out the
   consequence. Phase 9 reuses this for the remaining CRUD.
   ------------------------------------------------------------------------- */

.ta-formsection { padding: 0 0 20px; }
.ta-formsection + .ta-formsection {
    border-top: 1px solid var(--ta-border-light);
    padding-top: 20px;
}

.ta-formsection__title {
    font-family: var(--ta-serif);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.ta-formsection__why {
    font-size: 13px;
    color: var(--ta-muted-2);
    margin: 3px 0 15px;
    line-height: 1.45;
    max-width: 62ch;
    text-wrap: pretty;
}

.ta-fieldgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 18px;
}

.ta-field { min-width: 0; }
.ta-field--wide { grid-column: 1 / -1; }

.ta-field__label {
    display: block;
    font-size: 13px;
    color: var(--ta-ink-3);
    margin-bottom: 5px;
}

.ta-field__required { color: var(--ta-muted-2); }

.ta-field__help {
    font-size: 12.5px;
    color: var(--ta-muted-2);
    margin-top: 5px;
    line-height: 1.4;
}

.ta-field__error {
    font-size: 12.5px;
    color: var(--ta-caution-text);
    margin-top: 5px;
    line-height: 1.4;
}

/* Validation stays in the caution family. Red is for destructive
   confirmation only, and an invalid field is not a destroyed one. */
.ta-field.is-invalid .ta-input,
.ta-field.is-invalid .ta-select {
    border-color: var(--ta-caution);
    background: #fdfbf5;
}

.ta-field .ta-input,
.ta-field .ta-select,
.ta-field textarea.ta-input { width: 100%; }

textarea.ta-input { line-height: 1.5; resize: vertical; }

/* Study programmes as chips, not a multiple <select> nobody can operate. */
.ta-chipset { display: flex; flex-wrap: wrap; gap: 7px; }

.ta-chipset__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ta-s1) var(--ta-s4);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-chip);
    background: var(--ta-surface);
    font-size: 12.5px;
    color: var(--ta-ink-3);
    cursor: pointer;
}

.ta-chipset__chip:hover { background: var(--ta-sunken); }

.ta-chipset__chip:has(input:checked) {
    background: var(--ta-accent-tint-3);
    border-color: #cfdcee;
    color: var(--ta-accent-text);
    font-weight: 600;
}

.ta-checkline {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.ta-checkline__label { font-size: 13.5px; display: block; }
.ta-checkline .ta-field__help { margin-top: 2px; }

/* The live formula strip. */
.ta-formula {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 15px;
    background: var(--ta-row-selected);
    border: 1px solid #cfdcee;
    border-radius: var(--ta-r-inner);
}

.ta-formula__label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-muted-2);
}

.ta-formula__expr {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}

.ta-formula__note {
    font-size: 12.5px;
    color: var(--ta-muted-2);
    margin-top: 3px;
}

.ta-formula__note.is-warning { color: var(--ta-caution-text); }

.ta-help.is-warning { color: var(--ta-caution-text); }

.ta-formula__value {
    font-family: var(--ta-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--ta-accent-text);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.ta-formula__value.is-empty { color: var(--ta-faint); }

/* Footer bar: the primary action, the way out, and the consequence in words. */
.ta-formfoot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 -22px;
    padding: 14px 22px;
    background: #fafaf8;
    border-top: 1px solid var(--ta-border);
    border-radius: 0 0 var(--ta-r-card) var(--ta-r-card);
}

.ta-formfoot__note {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ta-muted-2);
    max-width: 44ch;
    text-align: right;
    line-height: 1.4;
}

/* Context panel — same column geometry as the screen-5 drawer. */
.ta-context {
    flex: 1 1 280px;
    max-width: 360px;
    background: var(--ta-sunken);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
    padding: 4px 18px 18px;
    position: sticky;
    top: 92px;
}

.ta-context__section {
    padding-top: 16px;
    margin-top: 14px;
    border-top: 1px solid var(--ta-border);
}

.ta-context__section:first-child { border-top: 0; margin-top: 0; }

.ta-context__title {
    font-family: var(--ta-serif);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 7px;
}

.ta-context__list { display: grid; gap: 6px; }

.ta-context__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.ta-context__row > :first-child { font-weight: 600; }
.ta-context__row .ta-pill { margin-left: auto; }

.ta-dialog {
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
    padding: 20px 22px 16px;
    max-width: 480px;
    color: var(--ta-ink);
    background: var(--ta-surface);
}

.ta-dialog::backdrop { background: rgba(27, 28, 30, 0.35); }
.ta-dialog .ta-hint { margin: 10px 0 0; }

.ta-dialog__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ta-border-light);
}

@media (max-width: 1100px) {
    .ta-context {
        position: static;
        max-width: none;
        margin-top: 22px;
    }
}


/* -------------------------------------------------------------------------
   21. Compare revisions (screen 9)
   One grid, not a pair of cards. Changed rows are marked with the accent and
   a tag; unchanged rows stay plain. No green/red diff colouring -- the
   question is "what moved", not "what is good".
   ------------------------------------------------------------------------- */

.ta-diffrow {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 92px;
    gap: 14px;
    min-width: 760px;
    box-sizing: border-box;
    align-items: baseline;
    border-bottom: 1px solid var(--ta-border-lighter);
    border-left: 3px solid transparent;
    font-size: 13.5px;
}

.ta-diffrow.is-changed {
    background: var(--ta-row-selected);
    border-left-color: var(--ta-accent);
}

.ta-diff__field { color: var(--ta-ink-3); }
.ta-diff__old { color: var(--ta-muted-2); overflow-wrap: anywhere; }
.ta-diff__new { overflow-wrap: anywhere; }
.ta-diffrow.is-changed .ta-diff__new { font-weight: 600; }

.ta-diff__when {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ta-muted-2);
}

.ta-diff__current { color: var(--ta-accent-text); font-weight: 600; }

.ta-diff__tag {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ta-accent-text);
}


/* -------------------------------------------------------------------------
   22. Teaching load (screen 1)
   Three zones: the entered list, the catalogue rail, and the share panel that
   replaces the rail while a row is selected. No draft area, because nothing
   is a draft any more -- every edit is saved as it is made.
   ------------------------------------------------------------------------- */

.ta-savestate.is-saving { color: var(--ta-muted); }
.ta-savestate.is-saving::before { background: var(--ta-caution); }
.ta-savestate.is-error { color: var(--ta-caution-text); }
.ta-savestate.is-error::before { background: var(--ta-caution); }

.ta-loadrow {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr) 84px 118px 84px 76px 34px;
    min-width: 700px;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
}

.ta-loadrow > * { padding-right: 12px; }
.ta-loadrow > :last-child { padding-right: 0; }

.ta-loadrow__code { font-size: 12.5px; font-weight: 600; color: var(--ta-ink-3); }
.ta-loadrow__title { font-size: 14.5px; line-height: 1.3; text-wrap: pretty; }
.ta-loadrow__sws { font-size: 14.5px; font-weight: 600; }

.ta-loadrow__saving { color: var(--ta-accent-text); font-weight: 600; }
.ta-loadrow__needs { color: var(--ta-caution-text); font-weight: 600; }

/* An entry missing the count that decides its credit is worth less than it
   should be, so it is marked rather than left looking finished. */
.ta-row.ta-loadrow.is-incomplete {
    border-left-color: var(--ta-caution);
    background: var(--ta-caution-tint);
}

/* Errors the user must fix but may save past (Buildv2 §8): the caution
   family at full strength, still never red. */
.ta-banner--error { font-weight: 600; }
.ta-mx-title.is-incomplete::after {
    content: " \00b7  participants missing";
    color: var(--ta-caution-text);
    font-weight: 600;
    font-size: 12px;
}

.ta-loadrow__count { width: 70px; padding: 4px 7px; font-size: 13px; }

.ta-loadfoot {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 18px;
    background: var(--ta-sunken);
    border-top: 1px solid var(--ta-border);
    font-size: 13px;
    color: var(--ta-ink-3);
    border-radius: 0 0 var(--ta-r-card) var(--ta-r-card);
}

.ta-loadfoot__value {
    margin-left: auto;
    font-size: 15.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ta-ink);
}

/* The rail carries zone B and zone C in turn. */
.ta-rail {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 430px;
    position: sticky;
    top: 92px;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
    overflow: hidden;
}

.ta-rail__tabs { display: flex; }

.ta-rail__tabs button {
    flex: 1;
    padding: 11px 10px;
    border: 0;
    background: var(--ta-sunken-2);
    color: var(--ta-muted-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.ta-rail__tabs button.is-active {
    background: var(--ta-surface);
    color: var(--ta-ink);
    box-shadow: inset 0 -2px 0 var(--ta-accent);
}

.ta-rail__filters {
    padding: 12px 14px;
    background: #fafaf8;
    border-bottom: 1px solid var(--ta-border);
    display: grid;
    gap: 9px;
}

.ta-rail__filters .ta-input { width: 100%; }

.ta-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }

.ta-chiprow button {
    padding: 4px 10px;
    border-radius: var(--ta-r-chip);
    border: 1px solid var(--ta-border-strong);
    background: var(--ta-surface);
    color: var(--ta-ink-3);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.ta-chiprow button.is-active {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: #fff;
}

.ta-rail__list { max-height: calc(100vh - 340px); overflow-y: auto; }

.ta-rail__empty {
    padding: 26px 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ta-muted-2);
}

.ta-railitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ta-border-light);
}

.ta-railitem:hover { background: #fafafa; }
.ta-railitem__code { font-size: 12px; font-weight: 600; color: var(--ta-ink-3); }
.ta-railitem__title { font-size: 13.8px; line-height: 1.3; }
.ta-railitem .ta-btn { margin-left: auto; flex-shrink: 0; }
/* Copy tab: already in this semester, greyed out at the bottom. */
.ta-railitem.is-added { background: var(--ta-surface-alt); }
.ta-railitem.is-added > div:first-child { opacity: .55; }
.ta-railitem .ta-btn[disabled] {
    background: var(--ta-border-light);
    border-color: #e2e2dc;
    color: #9a9ea4;
    cursor: default;
}

/* Zone C. */
.ta-sharehead {
    padding: 12px 16px;
    background: var(--ta-row-selected);
    border-bottom: 1px solid var(--ta-border);
}

.ta-sharehead__title {
    font-family: var(--ta-serif);
    font-size: 16.5px;
    font-weight: 600;
    margin: 2px 0 1px;
}

.ta-sharebody { padding: 14px 16px 16px; }

.ta-sharelabel {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ta-muted-2);
}

.ta-sharelabel > :last-child {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.ta-unitrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 6px;
}

.ta-unitrow .ta-segmented { margin-left: auto; }

.ta-sharelist { display: grid; gap: 9px; margin-top: 10px; }

.ta-sharecard {
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-r-inner);
    padding: 10px 11px;
    background: #fcfcfb;
}

.ta-sharecard__top { display: flex; align-items: center; gap: 8px; }
.ta-sharecard__top .ta-select { flex: 1; min-width: 0; }

.ta-sharecard__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.ta-sharecard__bottom .ta-input { width: 82px; }
.ta-sharecard__sws {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ta-x {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid #e0e0da;
    border-radius: var(--ta-r-control);
    background: var(--ta-surface);
    color: #8a8e94;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ta-x:hover { border-color: #c8ccd2; color: var(--ta-ink); }

@media (max-width: 1080px) {
    .ta-rail { position: static; max-width: none; margin-top: 22px; }
}


/* -------------------------------------------------------------------------
   23. Destructive confirmation (phase 9)
   The only red in the system. Everywhere else status is a pill and a warning
   is the caution family, so that arriving here still means something.
   ------------------------------------------------------------------------- */

.ta-confirm {
    max-width: 620px;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-r-card);
    overflow: hidden;
}

.ta-confirm__head {
    padding: 14px 20px;
    background: #fdf7f7;
    border-bottom: 1px solid #e8d8d8;
}

.ta-confirm__title {
    font-family: var(--ta-serif);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #8a5a5a;
}

.ta-confirm__body { padding: 16px 20px 4px; }

.ta-confirm__lead { margin: 0; font-size: 14.5px; line-height: 1.5; }

.ta-confirm__consequence {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--ta-ink-3);
    line-height: 1.5;
}

.ta-confirm__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 20px;
    background: #fafaf8;
    border-top: 1px solid var(--ta-border);
}

.ta-confirm__note {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ta-muted-2);
}

.ta-posrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 40px;
    gap: 12px;
    align-items: center;
}

.ta-posrow .ta-input { width: 100%; }

/* Thesis sub-rows under a thesis activity (Buildv2 §7.2). */
.ta-thesislist {
    padding: 4px 18px 10px 52px;
    border-bottom: 1px solid var(--ta-border-lighter);
    background: var(--ta-sunken);
}
.ta-thesisrow {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 34px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}
.ta-thesisrow .ta-input { width: 100%; }

/* Target declaration (Buildv2 §9): semester rows and reduction rows. */
.ta-targetrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 110px 110px;
    gap: 12px;
    align-items: center;
}

.ta-targetrow .ta-input { width: 100%; }

.ta-redrow {
    display: grid;
    grid-template-columns: 180px 130px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
}

.ta-redrow .ta-input,
.ta-redrow .ta-select { width: 100%; }

.ta-targetrow > *,
.ta-redrow > * { min-width: 0; }

/* .ta-input is content-box; at width: 100% its padding would overflow. */
.ta-targetrow .ta-input,
.ta-redrow .ta-input,
.ta-redrow .ta-select,
.ta-thesisrow .ta-input { box-sizing: border-box; }

@media (max-width: 640px) {
    .ta-targetrow { grid-template-columns: minmax(0, 1fr) 84px 72px 64px; gap: 8px; }
    .ta-targetrow.ta-colhead { font-size: 10px; letter-spacing: 0.03em; }
    .ta-targetrow.ta-colhead > div { overflow-wrap: anywhere; }
    .ta-redrow { grid-template-columns: minmax(0, 1fr) 90px 34px; }
    .ta-redrow > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
}

.ta-backuprow {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 90px 150px 190px;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}


/* -------------------------------------------------------------------------
   Sign-in (handoff Screen 7, band layout)
   A full-width dark band with the centred title; the white card is pulled
   up over its lower edge (margin-top: -100px).
   ------------------------------------------------------------------------- */

.ta-signin { padding-bottom: 56px; }

.ta-signin__band {
    background: var(--ta-ink);          /* #1b1c1e */
    padding: 56px var(--ta-s6) 156px;   /* 100px of it sits under the card */
    text-align: center;
}

.ta-signin__eyebrow {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a8e94;
    margin-bottom: 8px;
}

.ta-signin__title {
    margin: 0;
    font-family: var(--ta-serif);
    font-size: 34px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ta-signin__card {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 380px;
    margin: -100px auto 0;
    padding: 26px 26px 22px;
    background: var(--ta-surface, #ffffff);
    border: 1px solid var(--ta-border-strong);
    border-radius: 5px;
    position: relative;
}

.ta-signin__h2 { font-size: 21px; margin: 0 0 4px; }
.ta-signin__lead { margin: 0 0 20px; font-size: 13.5px; color: var(--ta-muted); }

.ta-signin__error {
    margin-bottom: 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 4px;
}

.ta-signin__input {
    box-sizing: border-box;   /* .ta-input is content-box; 100% + padding overflowed */
    width: 100%;
    padding: 9px 11px;
    font-size: 14px;
    margin-bottom: 14px;
}

.ta-signin__input[type="password"] { margin-bottom: 18px; }

.ta-signin__submit {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 14px;
}

.ta-signin__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ta-border-light);
    font-size: 13px;
    color: var(--ta-muted-2);
    line-height: 1.5;
}

.ta-signin__open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 12px;
    color: var(--ta-muted);
}

.ta-signin__open strong { color: var(--ta-ink); }

.ta-signin__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ta-accent);
}

.ta-signin__account {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 380px;
    margin: 18px auto 0;
    font-size: 13px;
    color: var(--ta-muted-2);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 480px) {
    .ta-signin__band { padding: 40px var(--ta-s5) 140px; }
    .ta-signin__title { font-size: 27px; }
    .ta-signin__card { padding: 22px 18px 18px; }
}

/* Entry status of a group in a semester (entry_status.js). */
.ta-entrystatus { display: inline-flex; vertical-align: -2px; margin-left: 6px; cursor: help; }
.ta-entrystatus--finished { color: var(--ta-accent); }
.ta-entrystatus--entering { color: var(--ta-caution-text); }
.ta-entrystatus--not_finished { color: var(--ta-muted-2); }

/* Share panel: "Done" closes it, bottom right (same as Back to catalogue). */
.ta-sharefoot { display: flex; justify-content: flex-end; margin-top: 18px; }

/* Questions on a line (EntryQuestion): icon in the row, thread in the panel. */
.ta-qicon { display: inline-flex; vertical-align: -2px; color: var(--ta-muted-2); cursor: help; }
.ta-qicon.is-open { color: var(--ta-caution-text); }
.ta-qthread { border: 1px solid var(--ta-border); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.ta-qthread.is-open { border-color: var(--ta-caution-border); background: var(--ta-caution-tint); }
.ta-qmsg + .ta-qmsg { margin-top: 8px; }
.ta-qmsg__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.8px; margin-top: 2px; }
.ta-qthread textarea, .ta-sharebody > textarea { width: 100%; margin-top: 8px; resize: vertical; }
.ta-qactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
/* width: 100% plus padding pushed textareas past their card. */
textarea.ta-input { box-sizing: border-box; max-width: 100%; }

/* Reminder settings: one row per additional recipient. */
.ta-recipient { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ta-recipient .ta-input { flex: 1; min-width: 0; }
.ta-field > input.ta-input { box-sizing: border-box; max-width: 100%; }

/* Staff sign-off per line (LineCheck): toggle for staff, tick for groups. */
.ta-check { display: inline-flex; vertical-align: -2px; padding: 1px; border: 1px solid var(--ta-border);
    border-radius: 4px; background: transparent; color: var(--ta-muted-2); cursor: pointer; }
.ta-check.is-checked { border-color: var(--ta-accent); background: var(--ta-accent); color: #fff; }
span.ta-check { cursor: help; }
.ta-check:not(.is-checked) svg { opacity: .35; }

/* Period switcher in the breadcrumb (partials/_period_switch.html). */
.ta-periodswitch { width: auto; display: inline-block; padding: 2px 6px; font-size: inherit; }
.ta-matrix .ta-mx-external { background: var(--ta-surface-alt); }


/* -------------------------------------------------------------------------
   Staff split (Buildv2 §20, handoff Screen 10). One table scrolling in its
   own box: header row sticky top, activity column sticky left, "Not
   distributed" sticky right.
   ------------------------------------------------------------------------- */

.ta-kpi__of { font-size: 15px; font-weight: 400; color: var(--ta-muted-2); }
.ta-split-kpi--left { color: var(--ta-left-text); }
.ta-split-kpi--over { color: var(--ta-over-text); }

.ta-staffsplit { display: flex; flex-direction: column; gap: 12px; }
.ta-staffsplit__intro { margin: 0; font-size: 14px; color: var(--ta-ink-3); line-height: 1.5; max-width: 860px; }

.ta-staffsplit__scroll {
    background: var(--ta-surface);
    border: 1px solid var(--ta-border-strong);
    border-radius: 4px;
    overflow: auto;
    max-height: calc(100vh - 48px);
}

.ta-staffsplit__table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.ta-staffsplit__table td,
.ta-staffsplit__table th { border-bottom: 1px solid #ecece7; vertical-align: middle; }
.ta-staffsplit__table .ss-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-staffsplit__table .ss-person { border-left: 1px solid #ecece7; padding: 7px 10px; min-width: 96px; }
.ta-staffsplit__table .ss-person.is-on { background: var(--ta-accent-tint); }

.ta-staffsplit__table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--ta-surface-alt, #f7f7f4);
    border-bottom: 1px solid var(--ta-border-strong);
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ta-muted); font-weight: 600; text-align: left; padding: 10px 14px;
}
.ta-staffsplit__table thead th.ss-person { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ta-ink); padding: 6px; white-space: nowrap; }
.ta-staffsplit__table .ss-act { position: sticky; left: 0; z-index: 1; background: var(--ta-surface); padding: 9px 16px; min-width: 260px; }
.ta-staffsplit__table .ss-rest { position: sticky; right: 0; z-index: 1; background: var(--ta-surface); padding: 7px 14px; border-left: 1px solid var(--ta-border-strong); min-width: 150px; }
.ta-staffsplit__table thead .ss-act,
.ta-staffsplit__table thead .ss-rest { z-index: 4; background: var(--ta-surface-alt, #f7f7f4); }
.ta-staffsplit__table .ss-add { border-left: 1px solid #ecece7; width: 44px; padding: 6px 8px; }
.ta-staffsplit__table .ss-code { font-size: 12px; color: var(--ta-muted-2); font-variant-numeric: tabular-nums; }
.ta-staffsplit__table .ss-title { line-height: 1.3; }
.ta-staffsplit__table .ss-sws { padding: 9px 14px; font-weight: 600; }

.ss-cell { display: flex; align-items: center; gap: 7px; }
.ss-cell input[type=checkbox],
.ss-cell input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--ta-accent); cursor: pointer; flex: none; }
.ss-input {
    width: 60px; box-sizing: border-box; padding: 5px 7px; text-align: right;
    border: 1px solid var(--ta-border-strong); border-radius: 3px;
    font-size: 13.5px; font-variant-numeric: tabular-nums; background: var(--ta-surface);
}
.ss-input.is-manual { font-weight: 700; }
.ss-input:disabled { background: var(--ta-readonly-bg); color: var(--ta-ink-2); }
.ss-value { display: inline-block; margin-left: 23px; width: 60px; box-sizing: border-box; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }

.ss-name { border: 1px solid transparent; background: none; padding: 4px 6px; border-radius: 3px; font-weight: 600; cursor: text; text-align: left; }
.ss-name:hover:not(:disabled) { border-color: var(--ta-border-strong); background: var(--ta-surface); }
.ss-name:disabled { cursor: default; color: inherit; }
.ss-name-input { width: 110px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--ta-accent); border-radius: 3px; font-weight: 600; }
.ss-icon {
    width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: none; border-radius: 3px; padding: 0; cursor: pointer;
}
.ss-icon--delete { color: var(--ta-over-text); opacity: 0; }
.ss-person:hover .ss-icon--delete,
.ss-icon--delete:focus { opacity: 1; }
.ss-icon--delete:hover { background: var(--ta-over-bg); }
.ss-icon--reset { color: var(--ta-accent); border-color: var(--ta-border-strong); background: var(--ta-surface); opacity: 0; }
tr:hover .ss-icon--reset,
.ss-icon--reset:focus { opacity: 1; }
.ss-addbtn { width: 30px; height: 30px; border: 1px dashed #b9b9b2; background: var(--ta-surface); border-radius: 3px; font-size: 18px; line-height: 1; color: var(--ta-accent); cursor: pointer; }
.ss-addbtn:hover { border-color: var(--ta-accent); border-style: solid; }

.ss-status {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 3px; white-space: nowrap;
}
.ss-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-status--done { background: var(--ta-done-bg); color: var(--ta-done-text); }
.ss-status--left { background: var(--ta-left-bg); color: var(--ta-left-text); }
.ss-status--over { background: var(--ta-over-bg); color: var(--ta-over-text); }
.ss-restcell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ss-section td { background: var(--ta-accent-tint-3); border-bottom-color: #d4dce8; padding: 12px 16px 10px; }
.ss-section .ss-rest { background: var(--ta-accent-tint-3); text-align: right; }
.ss-section__title { position: sticky; left: 16px; display: inline-block; font-family: var(--ta-serif); font-size: 18px; font-weight: 600; color: var(--ta-accent-hover); }
.ss-banner td { padding: 0; }
.ss-banner__body { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 10px 12px; padding: 10px 16px; max-width: 860px; box-sizing: border-box; font-size: 13.5px; line-height: 1.45; }
.ss-banner--open td { background: var(--ta-caution-tint); border-bottom-color: var(--ta-caution-border); color: var(--ta-caution-strip-text); }
.ss-banner--changed td { background: var(--ta-left-bg); border-bottom-color: var(--ta-left-border); color: var(--ta-left-text); }
.ss-banner__body > i, .ss-banner__body > button { flex: none; }
.ss-banner--changed button { border: 1px solid #e0b98a; background: var(--ta-surface); padding: 4px 10px; border-radius: 3px; font-size: 12.5px; font-weight: 600; color: var(--ta-left-text); cursor: pointer; }

.ss-thesis .ss-act { background: #fcfcfa; padding: 7px 16px 7px 34px; }
.ss-thesis td { background: #fcfcfa; border-bottom-color: var(--ta-border-light); }
.ss-thesis .ss-person.is-on { background: var(--ta-accent-tint); }
.ss-thesis .ss-rest { background: #fcfcfa; }
.ss-kind { font-size: 12px; color: var(--ta-muted-2); margin-left: 8px; }

.ss-sum td { background: var(--ta-surface-alt, #f7f7f4); font-weight: 700; padding: 10px; }
.ss-sum .ss-act, .ss-sum .ss-rest, .ss-target .ss-act, .ss-target .ss-rest { background: var(--ta-surface-alt, #f7f7f4); }
.ss-target td { background: var(--ta-surface-alt, #f7f7f4); color: var(--ta-muted); padding: 6px 10px; border-bottom: 2px solid var(--ta-border-strong); }
.ss-target .ss-input { margin-left: 23px; }
.ss-capnote { display: block; margin: 4px 0 0 23px; font-size: 12px; font-weight: 600; color: var(--ta-left-text); }

.ta-staffsplit__table tfoot td { position: sticky; bottom: auto; background: var(--ta-surface-alt, #f7f7f4); padding: 8px 10px; color: var(--ta-muted); }
.ta-staffsplit__table tfoot .ss-total td { background: var(--ta-ink); color: #fff; font-weight: 700; padding: 11px 10px; border-left-color: var(--ta-ink-2); }
.ta-staffsplit__table tfoot .ss-total .ss-act,
.ta-staffsplit__table tfoot .ss-total .ss-rest { background: var(--ta-ink); }
.ta-staffsplit__table tfoot .ss-act, .ta-staffsplit__table tfoot .ss-rest { background: var(--ta-surface-alt, #f7f7f4); }
.ss-delta { display: inline-block; margin-left: 23px; min-width: 60px; box-sizing: border-box; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 7px; border-radius: 3px; }
.ss-delta--ok { background: var(--ta-done-bg); color: var(--ta-done-text); }
.ss-delta--below { background: var(--ta-over-bg); color: var(--ta-over-text); }
.ss-empty td { padding: 14px 16px; color: var(--ta-muted); }
.ta-staffsplit__table tfoot td.ss-act,
.ss-sum td.ss-act,
.ss-target td.ss-act { padding-left: 16px; padding-right: 16px; }