/* ══════════════════════════════════════════════════════════════════════════
   Student pages — the ONE definition every student route consumes.

   The Attendance page established the system; this sheet is where it now
   lives, so /dashboard, /internship, /post-internship, /profile and
   /change-request (and Attendance itself) read the same numbers instead of
   each carrying a copy that drifts.

   What is defined here, once:
     · tokens        — the palette, radius, shadow and the two gutters
     · the column    — one page column, a 20px rhythm, no card margins
     · the card      — white, 1px #E8ECF1, radius 16, the two-layer shadow,
                       padding 16/20 (.stu-card)
     · the card head — 44x44 radius-13 #0A4A7A tile with a white glyph,
                       15.5/600 title, 13 muted sub-line, one pill on the right
     · the hairline  — #EEF1F5, inset inside the card padding
     · label/value   — 11/600 uppercase .07em #6B7686 over 13.5/500 #0F1B2D
     · the title row — h1 26/700 -.02em + muted subtitle, 40-high outline
                       buttons on the right
     · responsive    — 1100 collapses two-column rows, 640 tightens gutters

   Loading order: this sheet is last, so it wins over every earlier copy. It
   is scoped to [data-role="3"] .stu-page: no admin page, table or modal can
   be reached from here.

   The Attendance page's own layer (attendance-page.css) keeps only what is
   specific to it — the punch row, Today card internals, permissions, map —
   and its selectors are listed as aliases below wherever a shared pattern
   replaces one.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
    --stu-surface:      #FFFFFF;
    --stu-border:       #E8ECF1;
    --stu-text:         #0F1B2D;
    --stu-muted:        #5B6779;
    --stu-label:        #6B7686;
    --stu-hair:         #EEF1F5;
    --stu-primary:      #0A66A8;
    --stu-primary-hi:   #085A94;
    --stu-tile:         #0A4A7A;
    --stu-success:      #0B6B3A;
    --stu-success-bg:   #E6F5EC;
    --stu-warning:      #8A4B00;
    --stu-warning-bg:   #FFF1D6;
    --stu-danger:       #B42318;
    --stu-danger-bg:    #FDE8E8;
    --stu-info-bg:      #E6F1FA;
    --stu-neutral:      #4A5568;
    --stu-neutral-bg:   #EEF2F6;
    --stu-radius:       16px;
    --stu-shadow:       0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .04);
    --stu-shadow-green: 0 6px 16px rgba(30, 158, 69, .22);
    /* the two gutters: the column's step and the card's inner padding */
    --stu-gap:          20px;
    --stu-pad-y:        16px;
    --stu-pad-x:        20px;
    /* the top bar's height, so the page column and the bar agree */
    --stu-bar-h:        60px;
}

/* ── The shell: page surface and top bar, on any student page ───────────── */

body:has(.stu-page) { background: #F5F7FA; }

body:has(.stu-page) .navbar {
    height: var(--stu-bar-h);
    min-height: var(--stu-bar-h);
    /* the shell's .page padding is 24px, so the bar lines up with the cards
       below it: 260 sidebar + 24 padding on the left, 24 on the right */
    margin: 12px 24px 0 calc(var(--tblr-sidebar-width, 260px) + 24px);
    width: auto;
    padding: 0 12px 0 10px;
    gap: 10px;
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: 14px;
    box-shadow: var(--stu-shadow);
}
body.sidebar-collapsed:has(.stu-page) .navbar {
    margin-left: 96px;
    width: auto;
}
body:has(.stu-page) .navbar-page-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--stu-text);
    letter-spacing: -.01em;
}
body:has(.stu-page) .navbar-toggle-btn,
body:has(.stu-page) .navbar-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--stu-muted);
    font-size: 14px;
}
body:has(.stu-page) .navbar-toggle-btn:hover,
body:has(.stu-page) .navbar-icon-btn:hover { background: var(--stu-neutral-bg); color: var(--stu-text); }

/* refresh │ avatar + name + role */
body:has(.stu-page) .navbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid var(--stu-hair);
}
body:has(.stu-page) .navbar-user .avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
    background: linear-gradient(135deg, #0A66A8, #0A4A7A);
}
body:has(.stu-page) .navbar-user .user-name { font-size: 13px; font-weight: 600; color: var(--stu-text); }
body:has(.stu-page) .navbar-user .user-role { font-size: 11.5px; color: var(--stu-muted); text-transform: capitalize; }

@media (max-width: 767px) {
    body:has(.stu-page) .navbar { margin: 8px 16px 0; width: auto; padding: 0 10px; }
    body:has(.stu-page) .navbar-user .user-info { display: none; }
}

/* ── The column ─────────────────────────────────────────────────────────── */

[data-role="3"] #main-content .stu-page {
    display: flex;
    flex-direction: column;
    gap: var(--stu-gap);
}

/* The shell gives every .card a 24px bottom margin. In this column the gap
   above already spaces them, and inside a grid that margin sat *inside* the
   grid area — a row measured 404 for two 380 cards, leaving a dead band under
   both. */
[data-role="3"] #main-content .stu-page .card,
[data-role="3"] #main-content .stu-page .stu-card { margin: 0; }

/* ── Title row ──────────────────────────────────────────────────────────── */

[data-role="3"] #main-content .stu-title-row,
[data-role="3"] #main-content .att-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
}
[data-role="3"] #main-content .stu-title-row .page-header { margin: 0; }
/* The heading is one component: 26/700, -.02em, with one muted line under it,
   on every student page — inside a title row (where actions sit beside it) or
   on its own. */
[data-role="3"] #main-content .stu-page .page-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--stu-text);
    margin: 0;
}
[data-role="3"] #main-content .stu-page .page-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--stu-muted);
}

[data-role="3"] #main-content .stu-title-actions,
[data-role="3"] #main-content .att-title-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Page-level actions: 40 high, outline, icon on the left. */
[data-role="3"] #main-content .stu-btn.btn,
[data-role="3"] #main-content .att-btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 14px;
    background: var(--stu-surface);
    border: 1px solid #E1E6EC;
    border-radius: 10px;
    box-shadow: none;
    color: var(--stu-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
[data-role="3"] #main-content .stu-btn.btn i,
[data-role="3"] #main-content .att-btn.btn i {
    font-size: 15px;
    color: var(--stu-muted);
}
[data-role="3"] #main-content .stu-btn.btn:hover,
[data-role="3"] #main-content .att-btn.btn:hover {
    background: #F7F9FB;
    border-color: #D3DAE3;
    color: var(--stu-text);
}
[data-role="3"] #main-content .stu-btn.btn:disabled { opacity: .55; }

/* ── The card ───────────────────────────────────────────────────────────── */

[data-role="3"] #main-content .stu-page .stu-card {
    display: block;
    padding: var(--stu-pad-y) var(--stu-pad-x);
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
    overflow: hidden;
}
/* A card whose content must run to its own edge (a table, a map, a list of
   rows that carries its own inset) keeps the shell and moves the gutter into
   its header and body. Same numbers, one definition. */
[data-role="3"] #main-content .stu-page .stu-card.is-bleed { padding: 0; }
[data-role="3"] #main-content .stu-page .stu-card.is-bleed > .stu-card-head,
[data-role="3"] #main-content .stu-page .stu-card.is-bleed > .stu-card-body { padding: var(--stu-pad-y) var(--stu-pad-x); }
[data-role="3"] #main-content .stu-page .stu-card.is-bleed > .stu-card-head { padding-bottom: 14px; }
[data-role="3"] #main-content .stu-page .stu-card.is-bleed > .stu-hair { margin: 0 var(--stu-pad-x); }

/* Cards rendered by a page's own script keep the shell but lose the shell's
   older 12px corner and border colour. */
[data-role="3"] #main-content .stu-page > .card.card {
    border-radius: var(--stu-radius);
    border: 1px solid var(--stu-border);
    box-shadow: var(--stu-shadow);
}

/* ── Card header: tile, title over a sub-line, one pill ─────────────────── */

[data-role="3"] #main-content .stu-card-head,
[data-role="3"] #main-content .att-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
[data-role="3"] #main-content .stu-card-tile,
[data-role="3"] #main-content .att-card-tile {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: var(--stu-tile);
    color: #FFFFFF;
    font-size: 19px;
}
[data-role="3"] #main-content .stu-card-heading,
[data-role="3"] #main-content .att-card-heading { flex: 1; min-width: 0; }
[data-role="3"] #main-content .stu-card-title,
[data-role="3"] #main-content .att-card-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--stu-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* one line each: a longer pill ("Non-working day") must not wrap the title and
   grow the header, which would move the whole card — and the row — under it */
[data-role="3"] #main-content .stu-card-sub,
[data-role="3"] #main-content .att-card-sub {
    font-size: 13px;
    line-height: 1.35;
    color: var(--stu-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* actions that sit beside the pill in a card head */
[data-role="3"] #main-content .stu-card-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* ── The hairline ───────────────────────────────────────────────────────── */

[data-role="3"] #main-content .stu-hair {
    height: 1px;
    margin: 12px 0;
    background: var(--stu-hair);
}
/* The Attendance page's bleed cards keep their own inset hairline (.att-hair,
   margin 0 20px) because their shell carries no padding; it reads the same
   colour token, so the two can never disagree on the line itself. */

/* ── Pills: one shape, a 6px dot in currentColor ────────────────────────── */

[data-role="3"] #main-content .stu-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 4px 11px 4px 9px;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
[data-role="3"] #main-content .stu-pill-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}
[data-role="3"] #main-content .stu-pill-success { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content .stu-pill-warning { background: var(--stu-warning-bg); color: var(--stu-warning); }
[data-role="3"] #main-content .stu-pill-danger  { background: var(--stu-danger-bg);  color: var(--stu-danger); }
[data-role="3"] #main-content .stu-pill-info    { background: var(--stu-info-bg);    color: var(--stu-primary); }
[data-role="3"] #main-content .stu-pill-neutral { background: var(--stu-neutral-bg); color: var(--stu-neutral); }

/* ── Label over value ───────────────────────────────────────────────────── */

/* The one pair: an 11/600 uppercase label over a 13.5/500 value. The identity
   band, the deployment row and the dashboard's figures all read from these
   three rules. */
[data-role="3"] #main-content .stu-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
[data-role="3"] #main-content .stu-field-k,
[data-role="3"] #main-content .stu-stat-k {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stu-label);
}
[data-role="3"] #main-content .stu-field-v {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--stu-text);
}

/* ── Figures: one line of numbers, each behind a hairline ───────────────── */

[data-role="3"] #main-content .stu-figures {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
[data-role="3"] #main-content .stu-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0 18px;
    border-left: 1px solid var(--stu-hair);
    line-height: 1.2;
}
[data-role="3"] #main-content .stu-figure:first-child { border-left: 0; padding-left: 0; }
[data-role="3"] #main-content .stu-figure:last-child { padding-right: 0; }
[data-role="3"] #main-content .stu-figure-v {
    font-size: 20px;
    font-weight: 700;
    color: var(--stu-text);
    font-variant-numeric: tabular-nums;
}
[data-role="3"] #main-content .stu-figure.is-pending .stu-figure-v { color: var(--stu-warning); }

/* ── Progress: one track, one fill, the fraction at its right ───────────── */

[data-role="3"] #main-content .stu-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
[data-role="3"] #main-content .stu-progress-track {
    flex: 1 1 auto;
    height: 6px;
    min-width: 0;
    border-radius: 999px;
    background: var(--stu-hair);
    overflow: hidden;
}
[data-role="3"] #main-content .stu-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--stu-primary);
    transition: width .4s ease;
}

/* ── Forms inside a card: the same label tone, no double gutter ─────────── */

[data-role="3"] #main-content .stu-page .form-group { margin-bottom: 14px; }
[data-role="3"] #main-content .stu-page .form-group:last-of-type { margin-bottom: 16px; }
[data-role="3"] #main-content .stu-page .form-label {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--stu-label);
}
[data-role="3"] #main-content .stu-page .card > .card-body { padding: 0; }

/* A two-up field row inside a form card. */
[data-role="3"] #main-content .stu-page .stu-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

/* ── Shared sub-components: the identity band (student + HTE) ───────────── */

[data-role="3"] #main-content .stu-identity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 16px;
    margin: 0;
}
[data-role="3"] #main-content .stu-id-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: var(--stu-pad-y) var(--stu-pad-x);
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
}
[data-role="3"] #main-content .stu-id-head { gap: 12px; }
[data-role="3"] #main-content .stu-id-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    background: linear-gradient(135deg, #0A66A8, #0A4A7A);
}
[data-role="3"] #main-content .stu-hte-avatar {
    border-radius: 13px;
    background: var(--stu-tile);
    font-size: 19px;
}
[data-role="3"] #main-content .stu-id-name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--stu-text);
    line-height: 1.3;
}
[data-role="3"] #main-content .stu-id-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--stu-muted);
}
[data-role="3"] #main-content .stu-id-panel .stu-pill { padding: 4px 11px 4px 9px; }
[data-role="3"] #main-content .stu-id-divider {
    height: 1px;
    background: var(--stu-hair);
    margin: 12px 0;
}
[data-role="3"] #main-content .stu-id-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
}
[data-role="3"] #main-content .stu-id-fields .stu-field {
    /* basis auto, not 0: the schedule needs more room than MOA, and an equal
       split ellipsised it ("Mon–Thu · 7:00 AM–6:…") */
    flex: 1 1 auto;
}
[data-role="3"] #main-content .stu-id-fields .stu-field + .stu-field {
    border-left: 1px solid var(--stu-hair);
    padding-left: 24px;
}
[data-role="3"] #main-content .stu-id-fields .stu-field-v {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Shared sub-components: the summary strip under the band ────────────── */

[data-role="3"] #main-content .stu-page .stu-strip { display: block; }
[data-role="3"] #main-content .stu-page .stu-stats { display: flex; }
[data-role="3"] #main-content .stu-page .stu-stat-v {
    font-size: 20px;
    font-weight: 700;
    color: var(--stu-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
[data-role="3"] #main-content .stu-page .stu-bar { margin-top: 14px; }
[data-role="3"] #main-content .stu-page .stu-bar-label {
    margin-bottom: 6px;
    font-size: 12.5px;
    color: var(--stu-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Shared sub-components: document cards ─────────────────────────────── */

[data-role="3"] #main-content .stu-page .doc-cards { gap: 16px; }
[data-role="3"] #main-content .stu-page .doc-card {
    display: flex;
    flex-direction: column;
    padding: var(--stu-pad-y) var(--stu-pad-x);
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
/* the status accent that used to be a 4px left border is the pill's tone now:
   the card keeps one border, one radius, one shadow in every state */
[data-role="3"] #main-content .stu-page .doc-card.is-approved,
[data-role="3"] #main-content .stu-page .doc-card.is-provisional,
[data-role="3"] #main-content .stu-page .doc-card.is-rejected,
[data-role="3"] #main-content .stu-page .doc-card.is-pending,
[data-role="3"] #main-content .stu-page .doc-card.is-empty,
[data-role="3"] #main-content .stu-page .doc-card.is-locked {
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    background: var(--stu-surface);
    box-shadow: var(--stu-shadow);
}
[data-role="3"] #main-content .stu-page .doc-card:hover {
    border-color: #D3DAE3;
    box-shadow: var(--stu-shadow);
}
[data-role="3"] #main-content .stu-page .doc-card.is-locked { background: #FAFBFC; }
[data-role="3"] #main-content .stu-page .doc-card-header,
[data-role="3"] #main-content .stu-page .doc-card .stu-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: none;
    border: 0;
}
[data-role="3"] #main-content .stu-page .doc-card-index {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: var(--stu-tile);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[data-role="3"] #main-content .stu-page .doc-card-heading { min-width: 0; }
[data-role="3"] #main-content .stu-page .doc-card-name {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--stu-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-role="3"] #main-content .stu-page .doc-card-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--stu-muted);
}
[data-role="3"] #main-content .stu-page .doc-card-body { padding: 0; }
[data-role="3"] #main-content .stu-page .doc-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
}

/* ── Page actions row: a wizard's own previous/next, at the column's foot ── */

[data-role="3"] #main-content .stu-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
[data-role="3"] #main-content .stu-btn-primary.btn {
    background: var(--stu-primary);
    border-color: var(--stu-primary);
    color: #FFFFFF;
    font-weight: 600;
}
[data-role="3"] #main-content .stu-btn-primary.btn i { color: #FFFFFF; }
[data-role="3"] #main-content .stu-btn-primary.btn:hover:not(:disabled) {
    background: var(--stu-primary-hi);
    border-color: var(--stu-primary-hi);
    color: #FFFFFF;
}
[data-role="3"] #main-content .stu-btn.btn:disabled { cursor: not-allowed; }

/* An alert is a band like any other in the column: no double margin under it. */
[data-role="3"] #main-content .stu-page .alert { margin-bottom: 0; }

/* A section root keeps the same 20px step inside itself, so a partial refresh
   of that section does not need to know how the column is spaced. */
[data-role="3"] #main-content .stu-page #student-docs-root {
    display: flex;
    flex-direction: column;
    gap: var(--stu-gap);
}

/* Dialog hosts carry no box of their own, or the column's 20px gap would add
   an empty band under the last card. */
[data-role="3"] #main-content .stu-page #doc-modal-root { display: contents; }

/* The waitlist is a grid of student panels: the same 16px gutter as the band. */
[data-role="3"] #main-content .stu-page .waitlist-cards { gap: 16px; }

/* The deployment panel's grid becomes a row of label/value pairs, the same
   pattern as every other band (no box of its own inside the card). */
[data-role="3"] #main-content #student-deployment-root .datagrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
[data-role="3"] #main-content #student-deployment-root .datagrid-item {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border: 0;
}
[data-role="3"] #main-content #student-deployment-root .datagrid-item + .datagrid-item {
    border-left: 1px solid var(--stu-hair);
    padding-left: 24px;
}
[data-role="3"] #main-content #student-deployment-root .datagrid-title {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stu-label);
}
[data-role="3"] #main-content #student-deployment-root .datagrid-content {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--stu-text);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    [data-role="3"] #main-content .stu-identity { grid-template-columns: minmax(0, 1fr); }
    [data-role="3"] #main-content .stu-title-row,
    [data-role="3"] #main-content .att-title-row { align-items: flex-start; }
}

@media (max-width: 640px) {
    :root { --stu-pad-x: 16px; }

    [data-role="3"] #main-content .stu-title-row,
    [data-role="3"] #main-content .att-title-row { flex-direction: column; align-items: stretch; }
    [data-role="3"] #main-content .stu-title-row .page-title,
    [data-role="3"] #main-content .att-title-row .page-title { font-size: 22px; }
    [data-role="3"] #main-content .stu-title-actions .stu-btn.btn,
    [data-role="3"] #main-content .att-title-actions .att-btn.btn { flex: 1 1 100%; }

    [data-role="3"] #main-content .stu-card-head,
    [data-role="3"] #main-content .att-card-head { flex-wrap: wrap; row-gap: 10px; }
    [data-role="3"] #main-content .stu-card-head > .stu-pill { margin-left: 58px; }

    [data-role="3"] #main-content .stu-id-fields { flex-direction: column; gap: 10px; }
    [data-role="3"] #main-content .stu-id-fields .stu-field + .stu-field {
        border-left: 0;
        border-top: 1px solid var(--stu-hair);
        padding-left: 0;
        padding-top: 10px;
    }
    [data-role="3"] #main-content .stu-figures { gap: 10px 0; }
    [data-role="3"] #main-content .stu-figure { padding: 0 12px; }
    [data-role="3"] #main-content .stu-figure-v { font-size: 17px; }
}