@charset "UTF-8";
/* ============================================================================
   SMU PUBLIC — "HORIZON"  ·  Design system for the logged-out experience
   ----------------------------------------------------------------------------
   Loaded ONLY from the anonymous branch of Views/Shared/_Layout.cshtml.
   Every rule is scoped under `.smu-public` (set on <body> in that branch only),
   so nothing here can reach the authenticated application.
   Loads after Bootstrap 3, so equal-specificity rules win.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   SCALE — the whole logged-out experience was taken down to 0.92 of its
   original size in one pass: the --smu-t-* ramp, every literal font-size, the
   button and field padding, and the larger --smu-s* steps. The small spacing
   steps (s1..s4) and the radii were left alone; at 4-16px they were already
   minimal, and shrinking the corners would have changed the shape language
   rather than the size. If this needs tuning again, move all of it together —
   the field-row button in 14.5b derives its box height from .form-control's
   padding and line-height, so those two must stay in step.
   ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------- 1. TOKENS */
.smu-public {
    /* — Brand ------------------------------------------------------------- */
    --smu-abyss:      #061126;  /* hero ground, deepest                       */
    --smu-deep:       #14336B;  /* inherited institutional teal               */
    --smu-teal:       #1F4F9C;
    --smu-accent:     #2F6FDB;  /* interactive accent on dark                 */
    --smu-accent-ink: #1D4F9E;  /* same accent, legible on light              */
    --smu-gold:       #5E6E86;  /* numerals, editorial marks                  */

    /* — Light surfaces ---------------------------------------------------- */
    --smu-paper:      #F6F8FB;
    --smu-surface:    #FFFFFF;
    --smu-raise:      #EFF3F9;
    --smu-sunk:       #E8EDF5;

    /* — Ink (all ≥ 4.6:1 on --smu-paper) ---------------------------------- */
    --smu-ink:        #0A1424;
    --smu-ink-2:      #2E3A4F;
    --smu-ink-3:      #56637A;
    --smu-on-dark:    #F0F4FB;
    --smu-on-dark-2:  rgba(240,244,251,.74);
    --smu-on-dark-3:  rgba(240,244,251,.56);

    /* — Lines ------------------------------------------------------------- */
    --smu-line:       #DFE5EE;
    --smu-line-2:     #CAD3E0;
    --smu-line-dark:  rgba(255,255,255,.14);

    /* — Brand mark (Views/Shared/Public/_SmuLogoMark.cshtml) --------------- */
    --smu-logo-tile:  #14336B;
    --smu-logo-glyph: #FFFFFF;

    /* — Type -------------------------------------------------------------- */
    --smu-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --smu-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --smu-t-xs:   9.5px;
    --smu-t-sm:   11px;
    --smu-t-base: 13px;
    --smu-t-md:   14px;
    --smu-t-lg:   15px;
    --smu-t-h4:   clamp(14.5px, 1.27vw, 17px);
    --smu-t-h3:   clamp(17px, 1.69vw, 21px);
    --smu-t-h2:   clamp(23px, 2.88vw, 37.5px);
    --smu-t-h1:   clamp(30.5px, 5.58vw, 77.5px);

    /* — Spacing (4px base) ------------------------------------------------ */
    --smu-s1: 4px;   --smu-s2: 8px;   --smu-s3: 12px;  --smu-s4: 16px;
    --smu-s5: 20px;  --smu-s6: 27px;  --smu-s7: 40px;  --smu-s8: 53px;
    --smu-s9: 81px;  --smu-s10: 107px;

    /* — Radius ------------------------------------------------------------ */
    --smu-r-sm: 8px;  --smu-r-md: 12px;  --smu-r-lg: 18px;
    --smu-r-xl: 24px; --smu-r-pill: 999px;

    /* — Elevation --------------------------------------------------------- */
    --smu-e1: 0 1px 2px rgba(8,20,45,.05), 0 1px 1px rgba(8,20,45,.04);
    --smu-e2: 0 4px 12px -2px rgba(8,20,45,.08), 0 2px 4px -2px rgba(8,20,45,.05);
    --smu-e3: 0 18px 38px -16px rgba(8,20,45,.20), 0 6px 14px -8px rgba(8,20,45,.10);
    --smu-e-dark: 0 30px 60px -28px rgba(0,0,0,.85);

    /* — Motion ------------------------------------------------------------ */
    --smu-ease: cubic-bezier(.22,.7,.28,1);
    --smu-fast: 140ms;
    --smu-mid:  260ms;
    --smu-slow: 460ms;

    /* — Layout ------------------------------------------------------------ */
    --smu-max: 1280px;
    --smu-gut: 26px;
}

/* Breakpoints used throughout (documented, CSS has no custom media vars):
   xs 0–479 · sm 480–767 · md 768–1023 · lg 1024–1279 · xl 1280–1599 · 2xl 1600+ */

/* ------------------------------------------------------------ 2. FOUNDATION */
.smu-public {
    font-family: var(--smu-font);
    font-size: var(--smu-t-base);
    line-height: 1.6;
    color: var(--smu-ink-2);
    background: var(--smu-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    /* No overflow-x here on purpose: any overflow value on <body> makes it a
       scroll container and silently breaks `position: sticky` on the nav.
       Horizontal overflow is prevented at the source instead (the hero media
       is inset, not oversized, and every grid collapses by breakpoint). */

    /* Sticky footer. On a short page — sign-in, a search with no results yet,
       a one-line notice — the footer used to stop wherever the content ended
       and leave a band of empty page below it. The body is a flex column and
       <main> absorbs the slack, so the footer rests on the bottom of the
       viewport when content is short and is pushed down normally when it is
       not. Nothing here creates a scroll container, so the sticky nav above
       is unaffected. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The chrome keeps its natural height; only <main> grows.
   `flex-shrink: 0` on main is the important half: without it, a page taller
   than the viewport would have its main squeezed back to fit 100vh instead of
   overflowing, which silently clips long forms. */
.smu-public > .smu-topline,
.smu-public > .smu-nav,
.smu-public > .smu-footer { flex: none; }
.smu-public > .smu-main { flex: 1 0 auto; }

.smu-public h1, .smu-public h2, .smu-public h3,
.smu-public h4, .smu-public h5, .smu-public h6 {
    font-family: var(--smu-font);
    color: var(--smu-ink);
    letter-spacing: -.022em;
    line-height: 1.18;
    margin: 0;
}

.smu-public a { color: var(--smu-accent-ink); text-decoration: none; }
.smu-public a:hover, .smu-public a:focus { color: var(--smu-deep); text-decoration: none; }

.smu-public *:focus-visible {
    outline: 2px solid var(--smu-accent-ink);
    outline-offset: 3px;
    border-radius: 3px;
}
.smu-public .smu-hero *:focus-visible,
.smu-public .smu-nav.is-over *:focus-visible {
    outline-color: #8FB8FF;
}

/* width:100% matters — the shell is a flex item inside the hero body, and a
   flex item without it shrinks to its content instead of filling the row. */
.smu-shell { width: 100%; max-width: var(--smu-max); margin: 0 auto; padding: 0 var(--smu-gut); }

.smu-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--smu-deep); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--smu-r-sm) 0; font-weight: 600;
}
.smu-skip:focus { left: 0; color: #fff; }


/* Geometric icon set — one stroke language everywhere */
.smu-public .smu-i { fill: none; stroke: currentColor; stroke-width: 1.75;
                     stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------- 3. TOP LINE */
.smu-topline {
    background: var(--smu-abyss);
    color: var(--smu-on-dark-2);
    font-size: var(--smu-t-xs);
    letter-spacing: .01em;
    position: relative;
    z-index: 60;
}
.smu-topline .smu-shell {
    display: flex; align-items: center; gap: var(--smu-s5);
    min-height: 33px; flex-wrap: wrap;
}
.smu-topline a { color: var(--smu-on-dark-2); }
.smu-topline a:hover { color: #fff; }
.smu-topline .smu-tl-item { display: inline-flex; align-items: center; gap: 7px; }
.smu-topline .smu-tl-right { margin-left: auto; display: flex; align-items: center; gap: var(--smu-s3); }

.smu-lang {
    display: inline-flex; align-items: center;
    border: 1px solid var(--smu-line-dark);
    border-radius: var(--smu-r-pill);
    overflow: hidden;
}
.smu-lang a {
    padding: 4px 12px; font-weight: 600; font-size: 9px;
    letter-spacing: .06em; text-transform: uppercase;
    transition: background var(--smu-fast) var(--smu-ease), color var(--smu-fast);
}
.smu-lang a:hover { background: rgba(255,255,255,.1); color: #fff; }
.smu-lang a + a { border-left: 1px solid var(--smu-line-dark); }

/* ----------------------------------------------------------- 4. NAVIGATION */
.smu-nav {
    position: sticky; top: 0; z-index: 50;
    transition: background var(--smu-mid) var(--smu-ease),
                border-color var(--smu-mid), box-shadow var(--smu-mid);
    background: var(--smu-surface);
    border-bottom: 1px solid var(--smu-line);
}
/* Translucent while sitting over the dark hero */
.smu-nav.is-over {
    background: rgba(6,17,38,.30);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom-color: rgba(255,255,255,.10);
}
.smu-nav.is-solid { box-shadow: var(--smu-e2); }

.smu-nav .smu-shell {
    display: flex; align-items: center; gap: var(--smu-s2);
    min-height: 57px;
}

/* The mark is the vector lockup from Views/Shared/Public/_SmuLogoMark.cshtml,
   which carries the SMU wordmark and the descriptor, so the brand adds only
   the campus name. It is recoloured through --smu-logo-* rather than swapped
   for a second artwork, so one mark serves the light bar, the dark hero the
   nav floats over, and the dark theme. */
.smu-brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; position: relative; }
.smu-brand .smu-logo { display: inline-flex; align-items: center; gap: 11px; }
.smu-brand .smu-logo__mark { width: 30px; height: 30px; flex: none; display: block; }
.smu-brand .smu-logo__tile { fill: var(--smu-logo-tile); }
.smu-brand .smu-logo__glyph { fill: var(--smu-logo-glyph); }
.smu-brand .smu-logo__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.smu-brand .smu-logo__name {
    font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
    color: var(--smu-ink);
}
.smu-brand .smu-logo__sub {
    margin-top: 4px; font-size: 8px; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; line-height: 1.2; color: var(--smu-ink-3); white-space: nowrap;
}

/* Over the hero the nav is transparent, so the mark and both text rows have to
   read on the photograph instead of on the bar. */
.smu-nav.is-over .smu-brand .smu-logo__name { color: #fff; }
.smu-nav.is-over .smu-brand .smu-logo__sub { color: rgba(255,255,255,.72); }
/* a deep-teal tile sinks into the photograph, so it brightens and the glyph
   goes dark — the same inversion the dark theme makes */
.smu-nav.is-over .smu-brand { --smu-logo-tile: var(--smu-accent); --smu-logo-glyph: var(--smu-abyss); }

.smu-brand .smu-brand-sub {
    font-weight: 600; font-size: 9px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--smu-ink-3);
    padding-left: 12px; border-left: 1px solid var(--smu-line-2); line-height: 1.1;
}
.smu-nav.is-over .smu-brand .smu-brand-sub { color: rgba(255,255,255,.72); border-left-color: rgba(255,255,255,.24); }

.smu-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.smu-menu > li { position: relative; }
.smu-menu > li > a, .smu-menu > li > button {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 14px/1 var(--smu-font); color: var(--smu-ink-2);
    background: none; border: 0; cursor: pointer;
    padding: 10px 13px; border-radius: var(--smu-r-sm);
    transition: background var(--smu-fast), color var(--smu-fast);
}
.smu-menu > li > a:hover, .smu-menu > li > button:hover,
.smu-menu > li.is-open > button { background: var(--smu-raise); color: var(--smu-ink); }
.smu-nav.is-over .smu-menu > li > a,
.smu-nav.is-over .smu-menu > li > button { color: rgba(255,255,255,.82); }
.smu-nav.is-over .smu-menu > li > a:hover,
.smu-nav.is-over .smu-menu > li > button:hover,
.smu-nav.is-over .smu-menu > li.is-open > button { background: rgba(255,255,255,.12); color: #fff; }

.smu-caret { transition: transform var(--smu-fast) var(--smu-ease); }
.smu-menu > li.is-open .smu-caret { transform: rotate(180deg); }

/* Grouped dropdown — replaces the old 15-link horizontal menu */
.smu-drop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
    min-width: 290px; padding: var(--smu-s2);
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e3);
    /* Both menus now carry a description per item, so the panel can grow past
       a short viewport; cap it and let it scroll rather than clip. */
    max-height: calc(100vh - 130px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--smu-fast) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease), visibility var(--smu-fast);
    list-style: none; margin: 0;
}
.smu-menu > li.is-open > .smu-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.smu-drop li { margin: 0; }
.smu-drop a {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 12px; border-radius: var(--smu-r-sm);
    color: var(--smu-ink); font-size: 12px; font-weight: 500;
    transition: background var(--smu-fast);
}
.smu-drop a:hover { background: var(--smu-raise); }
.smu-drop a .smu-i { margin-top: 2px; color: var(--smu-accent-ink); }
.smu-drop a small { display: block; font-weight: 400; font-size: 10.5px; color: var(--smu-ink-3); margin-top: 1px; }
.smu-drop-sep { height: 1px; background: var(--smu-line); margin: var(--smu-s2) 6px; }

/* Login — the one dominant action in the bar */
.smu-login {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--smu-deep); color: #fff !important;
    font: 600 14px/1 var(--smu-font);
    padding: 11px 20px; border-radius: var(--smu-r-pill);
    margin-left: var(--smu-s3);
    transition: transform var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid), background var(--smu-fast);
}
.smu-login:hover { background: #1A428A; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(20,51,107,.7); }
.smu-nav.is-over .smu-login { background: #fff; color: var(--smu-abyss) !important; }
.smu-nav.is-over .smu-login:hover { background: #fff; box-shadow: 0 8px 22px -8px rgba(255,255,255,.5); }

/* The drawer and its scrim exist in the DOM at all sizes but only ever
   materialise below the 899px breakpoint. */
.smu-navpanel, .smu-navscrim { display: none; }

/* Mobile trigger */
.smu-burger {
    display: none; width: 42px; height: 42px; border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-sm); background: transparent; cursor: pointer;
    align-items: center; justify-content: center; color: var(--smu-ink);
}
.smu-nav.is-over .smu-burger { border-color: rgba(255,255,255,.28); color: #fff; }
.smu-burger span { display: block; width: 17px; height: 1.7px; background: currentColor; border-radius: 2px; position: relative; transition: var(--smu-fast); }
.smu-burger span:before, .smu-burger span:after {
    content: ""; position: absolute; left: 0; width: 17px; height: 1.7px;
    background: currentColor; border-radius: 2px; transition: var(--smu-fast) var(--smu-ease);
}
.smu-burger span:before { top: -5.5px; }
.smu-burger span:after  { top:  5.5px; }
.smu-burger[aria-expanded="true"] span { background: transparent; }
.smu-burger[aria-expanded="true"] span:before { top: 0; transform: rotate(45deg); }
.smu-burger[aria-expanded="true"] span:after  { top: 0; transform: rotate(-45deg); }

/* ----------------------------------------------------------------- 5. HERO */
.smu-hero {
    position: relative; overflow: hidden;
    background: var(--smu-abyss);
    color: var(--smu-on-dark);
    margin-top: -68px;            /* nav floats over the hero */
    padding-top: 68px;
    min-height: 640px;
    display: flex; flex-direction: column;
}
.smu-hero-media {
    position: absolute; inset: -8% 0 0; z-index: 0;
    background-position: center 38%; background-size: cover; background-repeat: no-repeat;
    filter: saturate(.62) contrast(1.04);
    will-change: transform;
}
/* The scrim is weighted to the LEFT, not just downward. All of the hero's
   copy lives in the left column, and a purely vertical scrim left the
   headline sitting on whatever the photograph happened to be doing there —
   in this case a bright classroom window. The horizontal pass gives the text
   near-solid ground while the right half of the image stays open, so the
   photograph still reads as a photograph. */
.smu-hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6,17,38,.95) 0%, rgba(6,17,38,.86) 30%,
                             rgba(6,17,38,.52) 56%, rgba(6,17,38,.30) 78%,
                             rgba(6,17,38,.52) 100%),
      linear-gradient(180deg, rgba(6,17,38,.80) 0%, rgba(6,17,38,.34) 28%,
                              rgba(6,17,38,.72) 74%, var(--smu-abyss) 100%),
      radial-gradient(72% 58% at 14% 74%, rgba(47,111,219,.24), transparent 66%),
      radial-gradient(52% 44% at 88% 12%, rgba(20,51,107,.55), transparent 70%);
}
.smu-hero-grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
.smu-hero .smu-shell { position: relative; z-index: 3; }

.smu-hero-body {
    flex: 1; display: flex; align-items: center;
    padding: var(--smu-s9) 0 var(--smu-s7);
}
.smu-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    color: #8FB8FF;
}
.smu-hero-eyebrow i {
    width: 6px; height: 6px; border-radius: 50%; background: #8FB8FF; display: block;
    box-shadow: 0 0 0 0 rgba(143,184,255,.6); animation: smu-ping 2.6s var(--smu-ease) infinite;
}
@keyframes smu-ping {
    0%   { box-shadow: 0 0 0 0 rgba(143,184,255,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(143,184,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(143,184,255,0); }
}
.smu-hero h1 {
    font-size: var(--smu-t-h1);
    font-weight: 250;
    line-height: .99;
    letter-spacing: -.038em;
    color: #fff;
    margin: var(--smu-s5) 0 0;
    /* The line break is explicit in the markup, so this only guards against a
       very long translation running the full width of a wide screen. The
       emphasised line is a full clause now ("in the service of its students"),
       so the measure has to allow for it or it wraps a third time. */
    max-width: 26ch;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(6,17,38,.45);
}
.smu-hero h1 strong { font-weight: 650; }

/* The emphasised line carries the brand gradient. Guarded: without
   background-clip support the fill would stay transparent and the line would
   vanish, so the colour is only given away once we know it can be clipped. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .smu-hero h1 strong {
        background-image: linear-gradient(96deg, #FFFFFF 0%, #D6E4FF 46%, var(--smu-accent) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        /* A gradient fill cannot take a text-shadow, so the glow moves behind
           the glyphs as a soft drop-shadow on the element instead. */
        text-shadow: none;
        filter: drop-shadow(0 2px 20px rgba(6,17,38,.5));
    }
}
.smu-hero-lede {
    color: #D3DCEB;
    text-shadow: 0 1px 12px rgba(6,17,38,.5);
    font-size: var(--smu-t-lg);
    font-weight: 350;
    line-height: 1.66;
    max-width: 46ch;
    margin: var(--smu-s5) 0 var(--smu-s6);
}
.smu-hero-actions { display: flex; gap: var(--smu-s3); flex-wrap: wrap; align-items: center; }

.smu-hero-foot {
    position: relative; z-index: 3;
    border-top: 1px solid rgba(255,255,255,.12);
}
.smu-hero-foot .smu-shell {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--smu-s4); padding-top: 16px; padding-bottom: 16px;
    font-size: var(--smu-t-xs); letter-spacing: .18em; text-transform: uppercase;
    color: var(--smu-on-dark-3);
}
.smu-hero-foot em { font-style: normal; display: inline-block; animation: smu-bob 2.6s var(--smu-ease) infinite; }
@keyframes smu-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Live term banner — fed by the existing Home/CheckAfatet endpoint */
.smu-term {
    display: none; align-items: center; gap: var(--smu-s4);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-radius: var(--smu-r-lg);
    padding: 16px 20px; margin-top: var(--smu-s6);
    max-width: 620px; flex-wrap: wrap;
}
.smu-term.is-on { display: flex; }
.smu-term-ic { width: 40px; height: 40px; border-radius: var(--smu-r-md); display: grid; place-items: center;
               background: rgba(47,111,219,.16); border: 1px solid rgba(143,184,255,.3); color: #8FB8FF; }
.smu-term-txt b { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.smu-term-txt span { font-size: 10.5px; color: var(--smu-on-dark-3); }
.smu-count { display: flex; gap: 10px; margin-left: auto; }
.smu-count > div { text-align: center; min-width: 46px; }
.smu-count b { display: block; font: 600 20px/1 var(--smu-mono); color: #fff; letter-spacing: -.02em; }
.smu-count span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--smu-on-dark-3); }

/* Preliminary-results link — visibility still driven by Home/showForResult */
.smu-public .smu-results-link {
    display: none; align-items: center; gap: 10px; margin-top: var(--smu-s4);
    color: #8FB8FF; font-size: 12px; font-weight: 550;
}
.smu-results-link.is-on { display: inline-flex; }
.smu-public .smu-results-link:hover { color: #C2D8FF; }
.smu-results-link .smu-i { transition: transform var(--smu-fast) var(--smu-ease); }
.smu-results-link:hover .smu-i { transform: translateX(4px); }

/* -------------------------------------------------------------- 6. BUTTONS */
.smu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: 600 15px/1 var(--smu-font); letter-spacing: -.005em;
    padding: 15px 26px; border-radius: var(--smu-r-pill);
    border: 1px solid transparent; cursor: pointer; text-align: center;
    transition: transform var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                background var(--smu-fast), color var(--smu-fast), border-color var(--smu-fast);
}
.smu-btn .smu-i { transition: transform var(--smu-mid) var(--smu-ease); }
.smu-btn:hover .smu-i { transform: translateX(4px); }

.smu-btn-primary { background: var(--smu-accent); color: #FFFFFF !important;
                   box-shadow: 0 12px 28px -12px rgba(47,111,219,.85); }
.smu-btn-primary:hover { background: #2A63C6; color: #FFFFFF !important;
                         transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(47,111,219,.9); }

.smu-btn-ghost { background: rgba(255,255,255,.07); color: #fff !important;
                 border-color: rgba(255,255,255,.26);
                 -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.smu-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff !important; transform: translateY(-2px); }


.smu-btn-line { background: transparent; color: var(--smu-ink) !important; border-color: var(--smu-line-2); }
.smu-btn-line:hover { background: var(--smu-raise); color: var(--smu-ink) !important;
                      border-color: var(--smu-ink-3); transform: translateY(-2px); }

.smu-btn-sm { padding: 10px 18px; font-size: 11.5px; }

/* --------------------------------------------------------- 7. SECTION SHELL */
.smu-section { padding: var(--smu-s9) 0; position: relative; }
.smu-section--raise {
    background:
      radial-gradient(60% 50% at 50% 0%, rgba(20,51,107,.045), transparent 70%),
      var(--smu-raise);
    border-top: 1px solid var(--smu-line);
    border-bottom: 1px solid var(--smu-line);
}
.smu-section--dark { background: var(--smu-abyss); color: var(--smu-on-dark-2); }
.smu-section--dark h2, .smu-section--dark h3 { color: #fff; }

/* faint institutional grid, only on the raise band */
.smu-section--raise:before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
      linear-gradient(var(--smu-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--smu-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}
.smu-section--raise > .smu-shell { position: relative; }

.smu-head { margin-bottom: var(--smu-s7); max-width: 720px; }
.smu-head--split { display: flex; align-items: flex-end; justify-content: space-between;
                   gap: var(--smu-s5); max-width: none; }
.smu-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--smu-accent-ink); margin-bottom: var(--smu-s4);
}
.smu-kicker:before { content: ""; width: 22px; height: 1.5px; background: currentColor; display: block; }
.smu-section--dark .smu-kicker { color: #8FB8FF; }
.smu-head h2 { font-size: var(--smu-t-h2); font-weight: 300; letter-spacing: -.033em; }
.smu-head h2 strong { font-weight: 650; }
.smu-head p { color: var(--smu-ink-3); font-size: var(--smu-t-md); margin: var(--smu-s4) 0 0; max-width: 62ch; }
.smu-section--dark .smu-head p { color: var(--smu-on-dark-2); }

/* -------------------------------------------------- 8. QUICK ACTIONS (rail) */
.smu-quick {
    position: relative; z-index: 4;
    margin-top: calc(var(--smu-s8) * -1);
    margin-bottom: var(--smu-s8);
}
.smu-quick-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
    background: var(--smu-line);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-xl);
    overflow: hidden;
    box-shadow: var(--smu-e3);
}
.smu-public .smu-quick-item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px 20px 22px; background: var(--smu-surface);
    color: var(--smu-ink); position: relative;
    transition: background var(--smu-fast) var(--smu-ease);
}
.smu-quick-item:before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--smu-accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--smu-mid) var(--smu-ease);
}
.smu-public .smu-quick-item:hover { background: var(--smu-raise); color: var(--smu-ink); }
.smu-quick-item:hover:before { transform: scaleX(1); }
.smu-quick-item > .smu-i { color: var(--smu-accent-ink); }
.smu-quick-item .smu-quick-text { display: flex; flex-direction: column; gap: 3px; }
.smu-quick-item b { font-size: 12.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.smu-quick-item .smu-quick-text > span { font-size: 10.5px; color: var(--smu-ink-3); line-height: 1.45; }
.smu-quick-item .smu-quick-go { margin-top: auto; padding-top: 10px; color: var(--smu-accent-ink);
                                 transition: transform var(--smu-mid) var(--smu-ease); }
.smu-quick-item:hover .smu-quick-go { transform: translateX(4px); }

/* ---------------------------------------------------------- 9. BENTO GRID  */
.smu-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--smu-s4); }
.smu-bento > .smu-b-4 { grid-column: span 4; }
.smu-bento > .smu-b-3 { grid-column: span 3; }
.smu-bento > .smu-b-2 { grid-column: span 2; }

.smu-public .smu-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    padding: 26px;
    color: var(--smu-ink);
    transition: transform var(--smu-mid) var(--smu-ease),
                border-color var(--smu-mid), box-shadow var(--smu-mid);
}
.smu-card:before {
    content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity var(--smu-mid) var(--smu-ease);
    background: radial-gradient(78% 90% at 6% 0%, rgba(47,111,219,.09), transparent 66%);
}
.smu-public .smu-card:hover {
    transform: translateY(-4px);
    border-color: rgba(31,79,156,.34);
    box-shadow: var(--smu-e3);
    color: var(--smu-ink);
}
.smu-card:hover:before { opacity: 1; }
.smu-card > * { position: relative; }

.smu-card-ic {
    width: 44px; height: 44px; border-radius: var(--smu-r-md); display: grid; place-items: center;
    background: var(--smu-raise); border: 1px solid var(--smu-line);
    color: var(--smu-accent-ink); margin-bottom: var(--smu-s4);
    transition: background var(--smu-mid), color var(--smu-mid), border-color var(--smu-mid);
}
.smu-card:hover .smu-card-ic { background: var(--smu-deep); border-color: var(--smu-deep); color: #fff; }
.smu-card h3 { font-size: var(--smu-t-h4); font-weight: 620; letter-spacing: -.022em; margin-bottom: 7px; }
.smu-b-4 .smu-card h3, .smu-card--feature h3 { font-size: var(--smu-t-h3); }
.smu-card p { margin: 0; color: var(--smu-ink-3); font-size: 12px; line-height: 1.6; max-width: 46ch; }
.smu-card-go {
    margin-top: auto; padding-top: var(--smu-s5);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 620; color: var(--smu-accent-ink);
}
.smu-card-go .smu-i { transition: transform var(--smu-mid) var(--smu-ease); }
.smu-card:hover .smu-card-go .smu-i { transform: translateX(5px); }
.smu-card--feature { min-height: 250px; }
.smu-public .smu-card--tint { background: linear-gradient(160deg, #102A5C 0%, var(--smu-abyss) 100%); border-color: transparent; color: var(--smu-on-dark); }
.smu-card--tint h3 { color: #fff; }
.smu-card--tint p { color: var(--smu-on-dark-2); }
.smu-card--tint .smu-card-ic { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); color: #8FB8FF; }
.smu-card--tint:hover .smu-card-ic { background: var(--smu-accent); border-color: var(--smu-accent); color: #FFFFFF; }
.smu-card--tint .smu-card-go { color: #8FB8FF; }
.smu-public .smu-card--tint:hover { border-color: rgba(143,184,255,.35); }

/* ------------------------------------------------- 10. PUBLIC DATA BAND    */
.smu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
             border-top: 1px solid var(--smu-line-dark); border-bottom: 1px solid var(--smu-line-dark); }
.smu-public .smu-stat {
    display: flex; flex-direction: column; gap: var(--smu-s4);
    padding: var(--smu-s6) var(--smu-s5) var(--smu-s6) 0;
    color: var(--smu-on-dark); position: relative;
    transition: color var(--smu-fast);
}
.smu-stat + .smu-stat { border-left: 1px solid var(--smu-line-dark); padding-left: var(--smu-s5); }
.smu-stat:after {
    content: ""; position: absolute; left: 0; right: var(--smu-s5); bottom: -1px; height: 1px;
    background: var(--smu-accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--smu-mid) var(--smu-ease);
}
.smu-public .smu-stat:hover { color: #fff; }
.smu-stat:hover:after { transform: scaleX(1); }
.smu-stat-ic {
    width: 44px; height: 44px; border-radius: var(--smu-r-md); display: grid; place-items: center;
    background: rgba(255,255,255,.07); border: 1px solid var(--smu-line-dark); color: #8FB8FF;
    transition: background var(--smu-mid), color var(--smu-mid), border-color var(--smu-mid);
}
.smu-stat:hover .smu-stat-ic { background: var(--smu-accent); border-color: var(--smu-accent); color: #FFFFFF; }
.smu-stat-l { display: block; font-size: 13px; font-weight: 550; letter-spacing: -.012em;
              line-height: 1.35; color: inherit; }
.smu-stat-go { margin-top: auto; padding-top: var(--smu-s4); color: #8FB8FF;
               transition: transform var(--smu-mid) var(--smu-ease); }
.smu-stat:hover .smu-stat-go { transform: translateX(5px); }

/* ------------------------------------------------------ 11. RESOURCE LIST  */
.smu-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--smu-s3); }
.smu-public .smu-res-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border: 1px solid var(--smu-line); border-radius: var(--smu-r-md);
    background: var(--smu-surface); color: var(--smu-ink); font-size: 12.5px; font-weight: 550;
    transition: transform var(--smu-fast) var(--smu-ease), border-color var(--smu-fast),
                box-shadow var(--smu-mid), background var(--smu-fast);
}
.smu-public .smu-res-item:hover { transform: translateY(-2px); border-color: rgba(31,79,156,.34);
                      box-shadow: var(--smu-e2); color: var(--smu-ink); }
.smu-res-item .smu-i:first-child { color: var(--smu-accent-ink); }
.smu-res-item .smu-res-go { margin-left: auto; color: var(--smu-ink-3);
                            transition: transform var(--smu-mid) var(--smu-ease); }
.smu-res-item:hover .smu-res-go { transform: translateX(4px); color: var(--smu-accent-ink); }

/* -------------------------------------------------------------- 12. CTA    */
.smu-cta { position: relative; overflow: hidden; background: var(--smu-abyss); text-align: center; }
.smu-cta:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(56% 72% at 50% 118%, rgba(47,111,219,.30), transparent 68%),
      radial-gradient(40% 50% at 12% -10%, rgba(20,51,107,.7), transparent 70%);
}
.smu-cta .smu-shell { position: relative; padding-top: var(--smu-s9); padding-bottom: var(--smu-s9); }
.smu-cta h2 { font-size: var(--smu-t-h2); font-weight: 250; letter-spacing: -.035em; color: #fff; }
.smu-cta h2 strong { font-weight: 650; color: #8FB8FF; }
.smu-cta p { color: var(--smu-on-dark-2); font-size: var(--smu-t-md); margin: var(--smu-s4) auto var(--smu-s6); max-width: 54ch; }
.smu-cta-actions { display: flex; gap: var(--smu-s3); justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------- 13. FOOTER    */
.smu-footer { background: var(--smu-abyss); color: var(--smu-on-dark-2);
              border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; }
.smu-footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--smu-s6);
                   padding: var(--smu-s8) 0 var(--smu-s7); }
.smu-footer h4 { font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
                 color: var(--smu-on-dark-3); font-weight: 700; margin-bottom: var(--smu-s4); }
.smu-footer ul { list-style: none; margin: 0; padding: 0; }
.smu-footer li { margin-bottom: 10px; }
.smu-footer a { color: var(--smu-on-dark-2); font-size: 12px; }
.smu-footer a:hover { color: #fff; }
.smu-footer-brand img { height: 40px; width: auto; margin-bottom: var(--smu-s4); display: block; }
.smu-footer-brand p { max-width: 38ch; color: var(--smu-on-dark-3); font-size: 11.5px; line-height: 1.7; margin: 0 0 var(--smu-s4); }
.smu-footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--smu-on-dark-2); }
.smu-footer-contact .smu-i { margin-top: 3px; color: #8FB8FF; }
.smu-footer-bar { border-top: 1px solid rgba(255,255,255,.09);
                  display: flex; align-items: center; justify-content: space-between;
                  gap: var(--smu-s4); padding: var(--smu-s5) 0; flex-wrap: wrap;
                  font-size: 10.5px; color: var(--smu-on-dark-3); }

/* ==================================================== 14. SUB-PAGE SYSTEM == */
/* Everything below dresses the *inner* public pages — every logged-out screen
   that is not the homepage: application, payments, verification, diploma
   status, holidays, regulations, alumni, CVs, statistics, contact, sign-in.

   Those views were written long before Horizon and speak Bootstrap 3
   (`panel`, `form-group`, `form-control`, `btn`, `table`, `alert`). Rather
   than rewrite twenty-odd views and risk their JavaScript, that vocabulary is
   re-skinned here in Horizon's tokens. A page inherits the homepage's
   surfaces, type, spacing and motion without its own markup changing.

   Scope is `.smu-public` throughout, so none of it reaches the authenticated
   application — which keeps its original Bootstrap look untouched. */

/* ------------------------------------------------------ 14.1 PAGE SHELL -- */
.smu-main.is-bleed { display: block; }
.smu-main:not(.is-bleed) { display: block; padding: var(--smu-s7) 0 var(--smu-s9); min-height: 58vh; }
.smu-main:not(.is-bleed) > .container,
.smu-main:not(.is-bleed) > .container-fluid { background: transparent; }

/* A page-head band is flush with the nav, so it cancels the shell's top pad. */
.smu-main:not(.is-bleed) > .smu-page-head:first-child { margin-top: calc(var(--smu-s7) * -1); }

/* Public pages share the homepage's measure rather than Bootstrap's 1170px. */
.smu-public .smu-main .container { width: 100%; max-width: var(--smu-max);
                                   padding-left: var(--smu-gut); padding-right: var(--smu-gut); }

/* ------------------------------------------------------- 14.2 PAGE HEAD -- */
/* The compact relative of the homepage hero: same ground, same light, a
   fraction of the height. Gives every inner page a titled entrance. */
.smu-page-head {
    position: relative; overflow: hidden;
    background: var(--smu-abyss);
    color: var(--smu-on-dark-2);
    /* Trimmed from s8/s8 (64px). The band is an entrance, not a hero — the
       page's actual work should be near the fold. */
    padding: var(--smu-s5) 0 var(--smu-s6);
}
.smu-page-head:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(64% 70% at 10% 100%, rgba(47,111,219,.20), transparent 68%),
      radial-gradient(50% 60% at 92% 0%,   rgba(20,51,107,.60),    transparent 72%);
}
.smu-page-head:after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
.smu-page-head .smu-shell { position: relative; z-index: 2; }
.smu-page-head .smu-kicker { color: #8FB8FF; }
/* 20ch was forcing titles onto two lines — "Moduli për shpalljen e
   rezultateve" is 34 characters and broke after "e". The measure now allows a
   long title to sit on one line on a desktop; it still wraps on narrow
   screens, where the clamp has shrunk the type anyway. */
.smu-page-head h1 {
    color: #fff; font-size: clamp(23px, 2.7vw, 37px); font-weight: 300;
    letter-spacing: -.03em; margin: 0; max-width: 46ch; line-height: 1.12;
}
.smu-page-head h1 strong { font-weight: 650; }
.smu-page-head p {
    color: var(--smu-on-dark-2); font-size: var(--smu-t-md);
    font-weight: 350; line-height: 1.62; max-width: 62ch; margin: var(--smu-s4) 0 0;
}
.smu-page-head a { color: #8FB8FF; }
.smu-page-head a:hover { color: #C2D8FF; }

/* The row above the title: breadcrumb left, "back" right. */
.smu-page-head-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--smu-s4); flex-wrap: wrap; margin-bottom: var(--smu-s3);
}

/* Back — rendered by the page head, so every inner public page has a way out
   that does not depend on the browser's own chrome. */
.smu-public .smu-back {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    padding: 7px 15px 7px 12px; border-radius: var(--smu-r-pill);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--smu-on-dark) !important;
    font-size: var(--smu-t-sm); font-weight: 600; line-height: 1;
    transition: background var(--smu-fast) var(--smu-ease),
                border-color var(--smu-fast), transform var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-back:hover {
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
    color: #fff !important; transform: translateX(-2px);
}
.smu-back .fa { font-size: 14px; }

/* Breadcrumb — quiet, above the title */
.smu-crumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
    font-size: var(--smu-t-sm); color: var(--smu-on-dark-3);
}
.smu-crumb li { display: inline-flex; align-items: center; gap: 8px; }
.smu-crumb li + li:before { content: "/"; color: var(--smu-on-dark-3); }
.smu-crumb a { color: var(--smu-on-dark-2); }
.smu-crumb a:hover { color: #fff; }
.smu-crumb [aria-current="page"] { color: var(--smu-on-dark); }

/* Opt-in: the first card floats up over the band's lower edge. Only used on
   views that actually open with a card, never applied blindly.

   NO `z-index` HERE, deliberately. `position: relative` with `z-index: auto`
   does not open a stacking context, and that matters more than it looks:
   six public dialogs are declared inside `.smu-page-body` (the verification
   request and result, the payment picker, the CV and alumni details, the
   attendance detail). Bootstrap appends `.modal-backdrop` to <body> at
   z-index 1040, so the moment this element became a stacking context those
   dialogs were sealed inside it at z-index 3 — the backdrop painted over
   them and swallowed every click. The dialog looked greyed out and dead.

   The lift still works without it: both elements are positioned and the body
   comes after the band in the DOM, so it paints on top by document order. */
.smu-page-head--lift { padding-bottom: var(--smu-s9); }
.smu-page-head--lift + .container,
.smu-page-head--lift + .container-fluid,
.smu-page-head--lift + .smu-page-body,
/* …and when the page's content is wrapped in a form (Html.BeginForm), which
   then sits between the band and the body. */
.smu-page-head--lift + form > .smu-page-body:first-child { margin-top: calc(var(--smu-s8) * -1); position: relative; }

.smu-page-body { width: 100%; max-width: var(--smu-max); margin: 0 auto; padding: 0 var(--smu-gut); }

/* ---------------------------------------------------------- 14.3 CARDS --- */
/* No `overflow: hidden` anywhere here: datepickers, select2 menus and
   tooltips open out of these panels and must not be clipped. Corners are
   rounded on the children instead. */
/* `!important` on the four properties below is deliberate and defensive.
   Several legacy public views carry their own unscoped block, e.g.
   Aplikimi/Index.cshtml had
       .panel                        { border:1px solid #488fcc !important; border-radius:0 !important }
       .panel-default > .panel-heading{ color:#fff !important; background:#488fcc !important }
   Those sit in a <style> tag inside the view, so they load after this file and
   win on `!important` alone — which is where the solid blue bars came from.
   They are removed from the views this pass touches; this keeps any view that
   still has one from reintroducing them. */
.smu-public .panel {
    background: var(--smu-surface);
    border: 1px solid var(--smu-line) !important;
    border-radius: var(--smu-r-lg) !important;
    box-shadow: var(--smu-e1);
    margin-bottom: var(--smu-s5) !important;
}
/* Section header — a ruled line with an accent tick, not a filled bar. This
   is the public side's one repeated structural mark: it appears above every
   form section, every result list and every card, so the pages read as one
   document rather than a stack of coloured boxes. */
.smu-public .panel > .panel-heading {
    position: relative;
    background: transparent !important;
    border-bottom: 1px solid var(--smu-line);
    border-color: var(--smu-line);
    color: var(--smu-ink) !important; font-weight: 700;
    font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase;
    padding: 22px 24px 14px;
    border-radius: 0;
}
.smu-public .panel > .panel-heading:after {
    content: ""; position: absolute; left: 24px; bottom: -1px;
    width: 40px; height: 2px; background: var(--smu-accent-ink);
}
.smu-public .panel > .panel-heading .panel-title { font-size: inherit; font-weight: inherit; color: inherit; }
.smu-public .panel > .panel-heading .btn { text-transform: none; letter-spacing: 0; }
.smu-public .panel > .panel-body { padding: 22px; }
.smu-public .panel > .panel-footer {
    background: var(--smu-raise); border-top: 1px solid var(--smu-line);
    padding: 14px 22px; border-radius: 0 0 17px 17px;
}
/* Every Bootstrap panel flavour gets the same ruled header. The contextual
   colours (primary/info/success/warning) were applied almost at random across
   these views — the same "personal details" section is `panel-default` on one
   form and `panel-primary` on the next — so honouring them would produce the
   stack of coloured boxes this treatment exists to avoid. */
.smu-public .panel-default, .smu-public .panel-primary,
.smu-public .panel-info, .smu-public .panel-success, .smu-public .panel-warning { border-color: var(--smu-line); }
.smu-public .panel-primary > .panel-heading,
.smu-public .panel-info > .panel-heading,
.smu-public .panel-success > .panel-heading,
.smu-public .panel-warning > .panel-heading {
    background: transparent !important; border-color: var(--smu-line); color: var(--smu-ink) !important;
}

.smu-public .well {
    background: var(--smu-raise); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-md); box-shadow: none; padding: 20px;
}
.smu-public .thumbnail { border-color: var(--smu-line); border-radius: var(--smu-r-md); box-shadow: var(--smu-e1); }

/* A plain Horizon card for markup written from here on */
.smu-card-plain {
    background: var(--smu-surface); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg); box-shadow: var(--smu-e1);
    padding: var(--smu-s6); margin-bottom: var(--smu-s5);
}

/* ---------------------------------------------------------- 14.4 FORMS --- */
/* The public forms are the reason most people come here — an application, a
   payment slip, a transfer request. They get one idea, applied everywhere:

   a field is RECESSED until you touch it, then it LIFTS.

   At rest each control sits on the panel like a slot cut into paper: grey
   ground, no side borders, one hairline along the bottom. On focus it turns
   white, the hairline thickens into the accent colour, and a soft ring and
   shadow raise it off the page. Nothing blinks or slides; the whole change is
   colour and elevation, so a long form stays calm while the active field is
   never in doubt.

   It works on the markup that is already there — `.form-group`,
   `.form-control`, `<label>` — so the legacy public partials inherit it
   without being rewritten. */

/* `display` is deliberately never set on label: `.radio-inline` and
   `.checkbox-inline` are labels too, and would collapse to blocks. */
.smu-public label,
.smu-public .control-label,
.smu-public .form-label {
    font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--smu-ink-3); margin-bottom: 8px;
    transition: color var(--smu-fast) var(--smu-ease);
}
/* Radio and checkbox labels are prose, not field captions. */
.smu-public label.radio-inline, .smu-public label.checkbox-inline,
.smu-public .radio > label, .smu-public .checkbox > label,
.smu-public .smu-auth-role, .smu-public .smu-level, .smu-public .radio-custom {
    font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--smu-ink-2);
}

.smu-public .form-group { margin-bottom: var(--smu-s5); }
/* The caption answers when its own field is focused. */
.smu-public .form-group:focus-within > label,
.smu-public .form-group:focus-within > .form-label,
.smu-public .form-group:focus-within > .control-label { color: var(--smu-accent-ink); }

.smu-public .form-control {
    background: var(--smu-raise);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--smu-line-2);
    border-radius: 10px 10px 3px 3px;
    box-shadow: none; height: auto;
    padding: 9px 12px; font-size: 11.5px; line-height: 1.45;
    color: var(--smu-ink);
    transition: background var(--smu-fast) var(--smu-ease),
                border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease);
}
.smu-public .form-control:hover { border-bottom-color: var(--smu-ink-3); }
.smu-public .form-control:focus {
    background: var(--smu-surface);
    border-color: var(--smu-line);
    border-bottom: 2px solid var(--smu-accent-ink);
    padding-bottom: 8px; /* keeps the box the same height as the border grows */
    box-shadow: 0 0 0 4px rgba(47,111,219,.12),
                0 10px 24px -14px rgba(8,20,45,.45);
}
.smu-public .form-control::-webkit-input-placeholder { color: var(--smu-ink-3); opacity: .75; }
.smu-public .form-control::placeholder { color: var(--smu-ink-3); opacity: .75; }

/* Native select arrows differ per platform; one chevron for all of them. */
.smu-public select.form-control {
    height: auto; padding-right: 33px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6A67' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.smu-public select.form-control::-ms-expand { display: none; }
.smu-public textarea.form-control { min-height: 120px; resize: vertical; border-radius: 10px 10px 3px 3px; }
.smu-public .form-control[disabled], .smu-public .form-control[readonly],
.smu-public fieldset[disabled] .form-control {
    background: var(--smu-sunk); color: var(--smu-ink-3);
    border-bottom-style: dashed; cursor: not-allowed;
}

/* "Back" above a card. Replaces the house-icon + chevron links some of the
   deep pages open with, which were an inline blue anchor pair. */
.smu-backlink { margin: 0 0 var(--smu-s4); font-size: var(--smu-t-sm); }
.smu-public .smu-backlink a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 11px; border-radius: var(--smu-r-pill);
    background: var(--smu-surface); border: 1px solid var(--smu-line);
    color: var(--smu-ink-2); font-weight: 600;
    transition: border-color var(--smu-fast) var(--smu-ease),
                color var(--smu-fast), background var(--smu-fast);
}
.smu-public .smu-backlink a:hover {
    border-color: var(--smu-accent-ink); color: var(--smu-accent-ink); background: var(--smu-raise);
}

/* The row of buttons that closes a form. Replaces the `pull-right` floats the
   legacy partials used, which left the button overlapping whatever followed. */
.smu-form-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; flex-wrap: wrap;
    margin-top: var(--smu-s5); padding-top: var(--smu-s5);
    border-top: 1px solid var(--smu-line);
}
.smu-form-actions--split { justify-content: space-between; }

/* File pickers. The native control is a browser-drawn button plus a filename
   and looks different on every platform, so the field is redrawn as a slot in
   the same language as the rest and only the button part is restyled. */
.smu-public input[type="file"] {
    display: block; width: 100%;
    padding: 11px 14px;
    background: var(--smu-raise);
    border: 1.5px dashed var(--smu-line-2);
    border-radius: 10px;
    font-family: var(--smu-font); font-size: 11.5px;
    color: var(--smu-ink-2); cursor: pointer;
    transition: border-color var(--smu-fast) var(--smu-ease), background var(--smu-fast) var(--smu-ease);
}
.smu-public input[type="file"]:hover {
    border-color: var(--smu-accent-ink); background: var(--smu-sunk);
}
.smu-public input[type="file"]:focus {
    outline: none; border-style: solid; border-color: var(--smu-accent-ink);
    box-shadow: 0 0 0 4px rgba(47,111,219,.12);
}
.smu-public input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none; appearance: none;
    margin: -3px 14px -3px 0; padding: 9px 18px;
    background: var(--smu-deep); color: #fff;
    border: 0; border-radius: var(--smu-r-pill);
    font-family: var(--smu-font); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: background var(--smu-fast) var(--smu-ease);
}
.smu-public input[type="file"]:hover::-webkit-file-upload-button { background: var(--smu-accent-ink); }
.smu-public input[type="file"]::file-selector-button {
    margin: -3px 14px -3px 0; padding: 9px 18px;
    background: var(--smu-deep); color: #fff;
    border: 0; border-radius: var(--smu-r-pill);
    font-family: var(--smu-font); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: background var(--smu-fast) var(--smu-ease);
}
.smu-public input[type="file"]:hover::file-selector-button { background: var(--smu-accent-ink); }

/* Several legacy public partials wrap their validation message in <code>. */
.smu-public .panel code, .smu-public .smu-page-body code {
    display: inline-block; background: transparent; padding: 0; margin-top: 6px;
    font-family: var(--smu-font); font-size: 10.5px; font-weight: 500; color: #C0392B;
}

.smu-public .input-group-addon {
    background: var(--smu-raise); border-color: var(--smu-line-2);
    color: var(--smu-ink-3); border-radius: var(--smu-r-sm);
}
.smu-public .input-group .form-control:first-child,
.smu-public .input-group-addon:first-child { border-radius: var(--smu-r-sm) 0 0 var(--smu-r-sm); }
.smu-public .input-group .form-control:last-child,
.smu-public .input-group-addon:last-child { border-radius: 0 var(--smu-r-sm) var(--smu-r-sm) 0; }
.smu-public .input-group-btn > .btn { border-radius: 0 var(--smu-r-sm) var(--smu-r-sm) 0; }

.smu-public .radio, .smu-public .checkbox,
.smu-public .radio-inline, .smu-public .checkbox-inline { font-weight: 500; color: var(--smu-ink-2); }
.smu-public input[type="radio"], .smu-public input[type="checkbox"] { accent-color: var(--smu-accent-ink); }

/* Choice tiles. Several forms open by asking one either/or question — local
   or foreign applicant, which study level, anonymous or named — and rendered
   it as two bare radios on a line. As a row of tiles the question reads as the
   decision it is. The radio stays the control, so the existing change handlers
   and `lable-color` toggling are untouched. */
/* Tracks are capped rather than `1fr`: with only two options — local vs
   foreign applicant — `1fr` split the full panel width into two slabs several
   hundred pixels wide. Capped and packed to the start, a choice reads as a row
   of options whether there are two of them or six. */
.smu-choice {
    display: grid; gap: 12px; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
    justify-content: start;
}
@media (max-width: 479px) {
    .smu-choice { grid-template-columns: 1fr; }
}
.smu-public .smu-choice-tile {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 16px 18px;
    background: var(--smu-surface); color: var(--smu-ink);
    border: 1px solid var(--smu-line-2); border-radius: var(--smu-r-md);
    cursor: pointer; font-size: 12.5px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-choice-tile:hover {
    border-color: var(--smu-accent-ink); box-shadow: var(--smu-e2); transform: translateY(-2px);
}
/* `lable-color` is the class those pages' scripts already add to the chosen
   label, so the selected state costs no new JavaScript. */
.smu-public .smu-choice-tile.lable-color,
.smu-public .smu-choice-tile.lable-color-check {
    border-color: var(--smu-deep); box-shadow: 0 0 0 1px var(--smu-deep);
    background: var(--smu-raise);
    color: var(--smu-deep); font-size: 14.5px; font-weight: 700;
}
.smu-public .smu-choice-tile .option-input,
.smu-public .smu-choice-tile .option-input-check { float: none; margin: 0; flex: none; }

.smu-public .help-block { font-size: var(--smu-t-sm); color: var(--smu-ink-3); margin-top: 6px; }
.smu-public .has-error .form-control { border-color: #C0392B; }
.smu-public .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
.smu-public .has-error .control-label, .smu-public .has-error label,
.smu-public .has-error .help-block { color: #C0392B; }
.smu-public .field-validation-error,
.smu-public span.error { color: #C0392B; font-size: var(--smu-t-sm); font-weight: 500; }
.smu-public .validation-summary-errors {
    background: #FCF0EE; border: 1px solid #F2C6C0; border-left: 3px solid #C0392B;
    border-radius: var(--smu-r-md); padding: 14px 18px; color: #8E2A20;
}
.smu-public .validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* select2, where public views use it */
.smu-public .select2-container .select2-choice,
.smu-public .select2-container .select2-choices {
    border-color: var(--smu-line-2) !important; border-radius: var(--smu-r-sm) !important;
    background: var(--smu-surface) !important; box-shadow: none !important;
    min-height: 44px; line-height: 42px; padding-left: 13px;
}

/* Choice controls. `.option-input` is the class the legacy public partials
   already put on their radios and checkboxes, but the stylesheet that defined
   it ships only with the authenticated app — so on the public side they fell
   back to unstyled native controls. Defined here, once. */
.smu-public .option-input,
.smu-public .option-input-check {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    position: relative; flex: none; vertical-align: middle;
    width: 20px; height: 20px; margin: 0 9px 0 0;
    background: var(--smu-surface);
    border: 1.5px solid var(--smu-line-2);
    border-radius: 6px;
    cursor: pointer; outline: none;
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-fast) var(--smu-ease);
}
.smu-public .option-input.radio, .smu-public .option-input[type="radio"] { border-radius: 50%; }
.smu-public .option-input:hover,
.smu-public .option-input-check:hover { border-color: var(--smu-accent-ink); }
.smu-public .option-input:focus-visible,
.smu-public .option-input-check:focus-visible { box-shadow: 0 0 0 4px rgba(47,111,219,.16); }
.smu-public .option-input:checked,
.smu-public .option-input-check:checked { border-color: var(--smu-deep); }
.smu-public .option-input:checked:before {
    content: ""; position: absolute; inset: 3.5px;
    border-radius: inherit; background: var(--smu-deep);
}
.smu-public .option-input-check:checked:before {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid var(--smu-deep);
    border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}

/* ------------------------------------------------------- 14.4b DROPZONE -- */
/* Document verification uploads through Dropzone 3.8.4, whose default drop
   message is a fixed-size PNG sprite with its text span hidden — it rendered
   as an empty grey rectangle here and carried none of the site's language.

   Dropzone only injects that sprite when the form has no `.dz-message` of its
   own (dropzone.js:787), so the view supplies one and everything below
   dresses it, the file preview, the progress bar and the result marks. */
.smu-public .smu-dz {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; min-height: 240px; padding: 28px;
    background: var(--smu-raise);
    border: 1.5px dashed var(--smu-line-2);
    border-radius: var(--smu-r-lg);
    transition: border-color var(--smu-fast) var(--smu-ease),
                background var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease);
}
.smu-public .smu-dz:hover,
.smu-public .smu-dz.dz-drag-hover {
    border-color: var(--smu-accent-ink);
    background: var(--smu-sunk);
    box-shadow: inset 0 0 0 4px rgba(47,111,219,.07);
}

/* Our message replaces the sprite entirely. */
.smu-public .smu-dz .dz-message {
    position: static; width: auto; height: auto; margin: 0;
    background-image: none; opacity: 1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    cursor: pointer;
}
.smu-public .smu-dz .dz-message span { display: block; }
.smu-public .smu-dz.dz-started .dz-message { display: none; }

.smu-dz-ic {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 18px;
    border-radius: 50%; background: var(--smu-surface);
    color: var(--smu-deep); box-shadow: var(--smu-e1);
    transition: transform var(--smu-mid) var(--smu-ease), color var(--smu-fast);
}
.smu-public .smu-dz:hover .smu-dz-ic { transform: translateY(-3px); color: var(--smu-accent-ink); }
.smu-dz-title { font-size: var(--smu-t-lg); font-weight: 620; color: var(--smu-ink); letter-spacing: -.02em; }
.smu-dz-hint { margin-top: 8px; font-size: var(--smu-t-sm); color: var(--smu-ink-3); max-width: 46ch; }
.smu-dz-btn {
    margin-top: 20px; padding: 11px 24px;
    border-radius: var(--smu-r-pill);
    background: var(--smu-deep); color: #fff;
    font-size: 11.5px; font-weight: 600;
    transition: background var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-dz:hover .smu-dz-btn { background: var(--smu-accent-ink); }

/* File preview */
.smu-public .smu-dz .dz-preview {
    position: relative; display: flex; align-items: center; gap: 16px;
    width: 100%; max-width: 520px; min-height: 0; margin: 0; padding: 16px 18px;
    background: var(--smu-surface); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-md); box-shadow: var(--smu-e1);
}
.smu-public .smu-dz .dz-preview .dz-details {
    position: static; display: block; opacity: 1; flex: 1; min-width: 0;
    width: auto; height: auto; padding: 0; background: none; text-align: left;
}
.smu-public .smu-dz .dz-preview .dz-details .dz-filename {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--smu-ink);
}
.smu-public .smu-dz .dz-preview .dz-details .dz-size {
    display: block; margin-top: 3px; font-size: 10.5px; color: var(--smu-ink-3);
}
.smu-public .smu-dz .dz-preview .dz-details img { display: none; }
.smu-public .smu-dz .dz-preview .dz-progress {
    position: static; display: block; width: 100%; height: 4px; margin-top: 10px;
    background: var(--smu-sunk); border: 0; border-radius: var(--smu-r-pill); overflow: hidden;
}
.smu-public .smu-dz .dz-preview .dz-progress .dz-upload {
    display: block; height: 100%; background: var(--smu-accent); border-radius: inherit;
    transition: width .3s var(--smu-ease);
}
.smu-public .smu-dz .dz-preview .dz-success-mark,
.smu-public .smu-dz .dz-preview .dz-error-mark {
    position: static; display: none; flex: none;
    width: 26px; height: 26px; margin: 0; opacity: 1;
    border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700;
    align-items: center; justify-content: center; background: none;
}
.smu-public .smu-dz .dz-preview.dz-success .dz-success-mark { display: flex; background: #1E8E5A; }
.smu-public .smu-dz .dz-preview.dz-error .dz-error-mark { display: flex; background: #C0392B; }
.smu-public .smu-dz .dz-preview .dz-success-mark span,
.smu-public .smu-dz .dz-preview .dz-error-mark span { display: block; }
.smu-public .smu-dz .dz-preview .dz-error-message {
    position: static; display: none; width: 100%; padding: 0; margin-top: 8px;
    background: none; color: #C0392B; font-size: 10.5px; line-height: 1.5;
}
.smu-public .smu-dz .dz-preview.dz-error .dz-error-message { display: block; }
/* The remove button dropzoneForm's init appends to each preview */
.smu-public .smu-dz .dz-preview .btn { flex: none; align-self: center; }

/* -------------------------------------------------------- 14.5 BUTTONS --- */
.smu-public .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    vertical-align: middle;
    font: 600 14px/1 var(--smu-font); letter-spacing: -.004em;
    padding: 9px 17px; border-radius: var(--smu-r-pill);
    border: 1px solid transparent; box-shadow: none; text-shadow: none;
    white-space: nowrap;
    transition: background var(--smu-fast) var(--smu-ease),
                border-color var(--smu-fast) var(--smu-ease),
                color var(--smu-fast) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease);
}
.smu-public .btn:hover, .smu-public .btn:focus { transform: translateY(-1px); }
.smu-public .btn:active { transform: none; }
.smu-public .btn.disabled, .smu-public .btn[disabled] { opacity: .5; transform: none; box-shadow: none; }
.smu-public .btn-block { display: flex; width: 100%; }

/* Several legacy public buttons put the icon class on the BUTTON itself
   (`class="btn btn-success fa fa-check-square-o"`) rather than on a child
   <span>. The rule above is more specific than Font Awesome's own `.fa`, so
   its font shorthand replaced FontAwesome with Inter — and the glyph, which
   lives in the private-use area, rendered as an empty box. The label keeps
   Inter; only the pseudo-element that draws the glyph gets its font back. */
.smu-public .btn.fa:before,
.smu-public .btn.fas:before,
.smu-public .btn.far:before { font-family: FontAwesome; font-weight: normal; font-style: normal; }
.smu-public .btn.glyphicon:before { font-family: 'Glyphicons Halflings'; font-weight: normal; font-style: normal; }
/* An icon-on-the-button also loses the flex gap, since the glyph is a
   pseudo-element rather than a child. */
.smu-public .btn.fa, .smu-public .btn.glyphicon { font-style: normal; }
.smu-public .btn.fa:before, .smu-public .btn.glyphicon:before { margin-right: 8px; }

.smu-public .btn-primary,
.smu-public .btn-success {
    background: var(--smu-deep); border-color: var(--smu-deep); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(20,51,107,.8);
}
.smu-public .btn-primary:hover, .smu-public .btn-primary:focus,
.smu-public .btn-success:hover, .smu-public .btn-success:focus {
    background: #1A428A; border-color: #1A428A; color: #fff;
}
.smu-public .btn-info { background: var(--smu-teal); border-color: var(--smu-teal); color: #fff; }
.smu-public .btn-info:hover, .smu-public .btn-info:focus { background: #2558AC; border-color: #2558AC; color: #fff; }
.smu-public .btn-warning { background: var(--smu-gold); border-color: var(--smu-gold); color: #fff; }
.smu-public .btn-warning:hover, .smu-public .btn-warning:focus { background: #4A5A72; border-color: #4A5A72; color: #fff; }
.smu-public .btn-danger { background: #C0392B; border-color: #C0392B; color: #fff; }
.smu-public .btn-danger:hover, .smu-public .btn-danger:focus { background: #A32F23; border-color: #A32F23; color: #fff; }
.smu-public .btn-default {
    background: var(--smu-surface); border-color: var(--smu-line-2); color: var(--smu-ink);
}
.smu-public .btn-default:hover, .smu-public .btn-default:focus {
    background: var(--smu-raise); border-color: var(--smu-ink-3); color: var(--smu-ink);
}
.smu-public .btn-link { color: var(--smu-accent-ink); padding-left: 6px; padding-right: 6px; }
.smu-public .btn-link:hover { color: var(--smu-deep); }

.smu-public .btn-xs { padding: 5px 10px; font-size: 9.5px; }
.smu-public .btn-sm { padding: 7px 13px; font-size: 10.5px; }
.smu-public .btn-lg { padding: 12px 22px; font-size: 12.5px; }

.smu-public .btn-group > .btn { border-radius: 0; }
.smu-public .btn-group > .btn:first-child { border-radius: var(--smu-r-pill) 0 0 var(--smu-r-pill); }
.smu-public .btn-group > .btn:last-child  { border-radius: 0 var(--smu-r-pill) var(--smu-r-pill) 0; }
.smu-public .btn-group > .btn:hover, .smu-public .btn-group > .btn:focus { transform: none; }

/* ------------------------------------------ 14.5b A BUTTON IN A FIELD ROW  */
/* A button inside a .form-group is not a call to action floating on the page —
   it is the third control in a row of fields, and the pill made that row read
   as two unrelated shapes. It takes the input's silhouette instead: the same
   rounded shoulders over squared feet, and the same box height, derived from
   the same padding and line-height as .form-control so all three stay in
   lockstep if those change.

   .form-control carries a rule along its bottom edge that thickens to the
   accent on focus. This answers it with a rule of its own that wipes in from
   the centre, so one underline language runs the width of the row. The usual
   1px lift is dropped here: it would float this control off that baseline.

   Reached today by PublicCV/Index.cshtml and AlumniSearch/IndexOutSide.cshtml,
   the only two public views that put a button in a field row. */
.smu-public .form-group > .btn {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 3px 3px;
    padding: 9px 17px;
    font-size: 11.5px;
    line-height: 1.45;
    box-shadow: none;
}

.smu-public .form-group > .btn:after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--smu-accent);
    transform: scaleX(0);
    transition: transform var(--smu-mid) var(--smu-ease);
}

.smu-public .form-group > .btn:hover,
.smu-public .form-group > .btn:focus { transform: none; }

.smu-public .form-group > .btn:hover:after,
.smu-public .form-group > .btn:focus:after { transform: scaleX(1); }

/* the magnifier leans into the search */
.smu-public .form-group > .btn .fa { transition: transform var(--smu-mid) var(--smu-ease); }
.smu-public .form-group > .btn:hover .fa { transform: rotate(-12deg) scale(1.08); }

/* --------------------------------------------------------- 14.6 TABLES --- */
.smu-public .table {
    background: var(--smu-surface); width: 100%;
    font-size: 12px; margin-bottom: var(--smu-s5);
}
.smu-public .table > thead > tr > th {
    background: var(--smu-raise); color: var(--smu-ink);
    font-weight: 650; font-size: var(--smu-t-xs);
    letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid var(--smu-line-2); border-top: 0;
    padding: 13px 16px; vertical-align: middle;
}
.smu-public .table > tbody > tr > td,
.smu-public .table > tfoot > tr > td {
    border-top: 1px solid var(--smu-line);
    padding: 13px 16px; vertical-align: middle; color: var(--smu-ink-2);
}
.smu-public .table-striped > tbody > tr:nth-of-type(odd) { background: var(--smu-paper); }
.smu-public .table-hover > tbody > tr:hover { background: var(--smu-raise); }
.smu-public .table-bordered,
.smu-public .table-bordered > thead > tr > th,
.smu-public .table-bordered > tbody > tr > td { border-color: var(--smu-line); }
.smu-public .table-responsive {
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-lg);
    background: var(--smu-surface); overflow-x: auto;
}
.smu-public .table-responsive > .table { margin-bottom: 0; }

/* DataTables: the global initialiser in _Layout runs on public pages too, but
   the DataTables stylesheet ships only with the authenticated bundle. These
   rules stand in for it, in Horizon's vocabulary. */
.smu-public .dataTables_wrapper { padding-top: 4px; }
.smu-public .dataTables_wrapper .dataTables_filter { float: right; }
.smu-public .dataTables_wrapper .dataTables_filter input {
    background: var(--smu-surface); border: 1px solid var(--smu-line-2);
    border-radius: var(--smu-r-pill); padding: 9px 16px; margin-left: 10px;
    font-size: 12px; min-width: 220px;
}
.smu-public .dataTables_wrapper .dataTables_filter input:focus {
    outline: none; border-color: var(--smu-accent-ink);
    box-shadow: 0 0 0 3px rgba(47,111,219,.14);
}
.smu-public .dataTables_wrapper .dataTables_length select {
    background: var(--smu-surface); border: 1px solid var(--smu-line-2);
    border-radius: var(--smu-r-sm); padding: 7px 10px; margin: 0 8px;
}
.smu-public .dataTables_wrapper .dataTables_length,
.smu-public .dataTables_wrapper .dataTables_info { font-size: var(--smu-t-sm); color: var(--smu-ink-3); }
.smu-public .dataTables_wrapper .dataTables_paginate { float: right; padding-top: var(--smu-s4); }
.smu-public .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block; padding: 7px 13px; margin-left: 4px;
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-sm);
    color: var(--smu-ink-2) !important; font-size: 11.5px; cursor: pointer;
}
.smu-public .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--smu-raise); border-color: var(--smu-line-2);
}
.smu-public .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--smu-deep); border-color: var(--smu-deep); color: #fff !important;
}
.smu-public .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4; cursor: default; background: transparent;
}
.smu-public table.dataTable thead th { cursor: pointer; }

/* The row that carries "page n of m" alongside the pager. Shared, because
   three public pages render one (published theses, the thesis search and the
   regulations browser) and each had its own local copy. */
.smu-pager {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap; margin-top: var(--smu-s5);
}
.smu-pager-count { font-size: 13px; color: var(--smu-ink-3); }
.smu-public .smu-pager .pagination { margin: 0; }

.smu-public .pagination > li > a, .smu-public .pagination > li > span {
    border-color: var(--smu-line); color: var(--smu-ink-2);
}
.smu-public .pagination > li:first-child > a, .smu-public .pagination > li:first-child > span { border-radius: var(--smu-r-sm) 0 0 var(--smu-r-sm); }
.smu-public .pagination > li:last-child > a, .smu-public .pagination > li:last-child > span { border-radius: 0 var(--smu-r-sm) var(--smu-r-sm) 0; }
.smu-public .pagination > .active > a, .smu-public .pagination > .active > span,
.smu-public .pagination > .active > a:hover, .smu-public .pagination > .active > span:hover {
    background: var(--smu-deep); border-color: var(--smu-deep); color: #fff;
}

/* ------------------------------------------------- 14.7 FEEDBACK & LISTS - */
.smu-public .alert {
    background: var(--smu-surface); color: var(--smu-ink-2);
    border: 1px solid var(--smu-line); border-left-width: 3px;
    border-radius: var(--smu-r-md); box-shadow: var(--smu-e1);
    padding: 15px 18px; font-size: 12px;
}
.smu-public .alert h4, .smu-public .alert h5, .smu-public .alert b, .smu-public .alert strong { color: var(--smu-ink); }
.smu-public .alert-danger  { border-left-color: #C0392B; }
.smu-public .alert-success { border-left-color: #1E8E5A; }
.smu-public .alert-warning { border-left-color: #C77700; }
.smu-public .alert-info    { border-left-color: var(--smu-teal); }
.smu-public .alert .close { color: var(--smu-ink-3); opacity: .6; text-shadow: none; }

/* ------------------------------------------------------- 14.5c NOTICE ---- */
/* A standing note about the page itself — not a result of anything the visitor
   just did, which is what .alert is for. It carries more weight than an alert:
   a gradient rail instead of a flat border, a wash of the same hue bleeding in
   behind the text, and the category lifted out of the sentence into a label so
   the eye reads "what kind of thing is this" before the prose.

   The hue is a local variable, not --smu-gold, because that token also fills
   .btn-warning, where lightening it for the dark theme would cost the white
   label its contrast. Here it is only ever ink and a tint. */
.smu-public .smu-notice {
    --notice: #4A5A72;
    position: relative;
    display: flex; align-items: flex-start; gap: 13px;
    padding: 13px 18px 13px 17px;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e2);
    overflow: hidden;
}
:root[data-theme="dark"] .smu-public .smu-notice { --notice: #9AAAC0; }

.smu-public .smu-notice:before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--notice), transparent 140%);
}
.smu-public .smu-notice:after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 52%;
    background: linear-gradient(90deg, rgba(74,90,114,.07), transparent);
    pointer-events: none;
}
:root[data-theme="dark"] .smu-public .smu-notice:after {
    background: linear-gradient(90deg, rgba(154,170,192,.10), transparent);
}
.smu-public .smu-notice > * { position: relative; z-index: 1; }

.smu-public .smu-notice__icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--notice) 15%, transparent);
    color: var(--notice);
    font-size: 10px;
}
/* color-mix is recent; older engines get a flat tint of the same weight */
@supports not (background: color-mix(in srgb, red 15%, transparent)) {
    .smu-public .smu-notice__icon { background: rgba(74,90,114,.13); }
}

.smu-public .smu-notice__label {
    display: block;
    font-size: 9px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--notice);
    margin-bottom: 1px;
}
.smu-public .smu-notice p {
    margin: 0; font-size: 10.5px; line-height: 1.55; color: var(--smu-ink-2);
}

/* Flash messages from _Alerts. A leading icon, the message, and the dismiss
   control pulled out of the text flow so a long message never runs under it. */
.smu-public .smu-alert {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; margin-bottom: var(--smu-s5);
    background: var(--smu-surface); color: var(--smu-ink-2);
    border: 1px solid var(--smu-line); border-left-width: 3px;
    border-radius: var(--smu-r-md); box-shadow: var(--smu-e1);
    font-size: 14.5px; line-height: 1.55;
}
.smu-alert-ic { flex: none; margin-top: 2px; font-size: 17px; }
.smu-alert-body { flex: 1 1 auto; min-width: 0; }
.smu-alert-body p:last-child { margin-bottom: 0; }
.smu-public .smu-alert-x {
    flex: none; margin: -4px -4px 0 0; padding: 0;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--smu-ink-3); font-size: 19px; line-height: 1;
    opacity: 1; text-shadow: none; cursor: pointer;
    transition: background var(--smu-fast), color var(--smu-fast);
}
.smu-public .smu-alert-x:hover { background: var(--smu-sunk); color: var(--smu-ink); opacity: 1; }

.smu-public .smu-alert--success { border-left-color: #1E8E5A; }
.smu-public .smu-alert--success .smu-alert-ic { color: #1E8E5A; }
.smu-public .smu-alert--danger { border-left-color: #C0392B; }
.smu-public .smu-alert--danger .smu-alert-ic { color: #C0392B; }
.smu-public .smu-alert--warning { border-left-color: #C77700; }
.smu-public .smu-alert--warning .smu-alert-ic { color: #C77700; }
.smu-public .smu-alert--info { border-left-color: var(--smu-teal); }
.smu-public .smu-alert--info .smu-alert-ic { color: var(--smu-teal); }

/* ------------------------------------------------ 14.7c SURVEY CARDS ----- */
/* The public SEVC questionnaires. A five-column table with two empty columns
   was carrying three fields and a link; a card each says the same thing and
   gives the action somewhere to live. */
.smu-surveys { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.smu-survey {
    position: relative; display: flex; flex-direction: column;
    background: var(--smu-surface); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg); box-shadow: var(--smu-e1);
    padding: 24px; overflow: hidden;
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
.smu-survey:before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--smu-deep), var(--smu-accent));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--smu-mid) var(--smu-ease);
}
.smu-survey:hover {
    border-color: var(--smu-line-2); box-shadow: var(--smu-e3); transform: translateY(-3px);
}
.smu-survey:hover:before { transform: scaleX(1); }
.smu-survey-dates {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--smu-accent-ink);
}
.smu-public .smu-survey h3 {
    font-size: var(--smu-t-md); font-weight: 650; line-height: 1.4;
    letter-spacing: -.015em; margin: 14px 0 0; color: var(--smu-ink);
}
.smu-survey-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: auto; padding-top: 22px;
}
.smu-public .smu-survey-copy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    border: 1px solid var(--smu-line-2); border-radius: 50%;
    background: var(--smu-surface); color: var(--smu-ink-3); cursor: pointer;
    transition: background var(--smu-fast), color var(--smu-fast), border-color var(--smu-fast);
}
.smu-public .smu-survey-copy:hover {
    background: var(--smu-raise); border-color: var(--smu-accent-ink); color: var(--smu-accent-ink);
}

/* A results card holding a DataTable. The plugin injects its own length menu,
   filter box, info line and pager as siblings of the table, so they need to
   sit inside the card's padding rather than hard against its edge. */
.smu-results-card { margin-top: var(--smu-s5); }
.smu-public .smu-results-card .table-responsive { border: 0; border-radius: 0; background: transparent; }
.smu-public .smu-results-card .dataTables_wrapper { padding-top: 0; }
.smu-public .smu-doc-dl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--smu-raise); color: var(--smu-deep); font-size: 16px;
    transition: background var(--smu-fast) var(--smu-ease), color var(--smu-fast);
}
.smu-public .smu-doc-dl:hover { background: var(--smu-deep); color: #fff; }

/* ------------------------------------- 14.7d ADMISSION ANNOUNCEMENT ------ */
/* The open competition on the application page, and the rail of related links
   beside it. Everything is built on tokens, so both follow the dark theme
   without a second set of rules. */
.smu-konkurs {
    position: relative; overflow: hidden;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e1);
    padding: var(--smu-s6);
}
.smu-konkurs:before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--smu-deep), var(--smu-accent));
}
.smu-konkurs-kicker {
    display: block; margin-bottom: var(--smu-s4);
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--smu-accent-ink);
}
.smu-public .smu-konkurs-title {
    font-size: var(--smu-t-h4); font-weight: 650; line-height: 1.4;
    letter-spacing: -.015em; color: var(--smu-ink); margin: 0;
}
.smu-konkurs-deadline {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 0; font-size: 13.5px; color: var(--smu-ink-3);
}
.smu-konkurs-deadline b { color: var(--smu-ink); font-weight: 650; }
.smu-konkurs-deadline .fa { color: var(--smu-accent-ink); }
.smu-konkurs-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: var(--smu-s5); padding-top: var(--smu-s5);
    border-top: 1px solid var(--smu-line);
}
/* A closed competition keeps the button visible but inert, so the page still
   shows what the action WOULD be — an absent button reads as a broken page. */
.smu-public .smu-konkurs-actions .btn.disabled,
.smu-public .smu-konkurs-actions .btn[disabled] {
    pointer-events: none; opacity: .45; box-shadow: none;
}

/* Related links rail */
.smu-sidelinks {
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e1);
    overflow: hidden;
}
.smu-public .smu-sidelinks h2 {
    margin: 0; padding: 18px 20px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--smu-ink-3);
    border-bottom: 1px solid var(--smu-line);
}
.smu-public .smu-sidelink {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 20px; font-size: 14px; font-weight: 500;
    color: var(--smu-ink-2); border-bottom: 1px solid var(--smu-line);
    transition: background var(--smu-fast) var(--smu-ease),
                color var(--smu-fast), padding-left var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-sidelink:last-child { border-bottom: 0; }
.smu-public .smu-sidelink:hover {
    background: var(--smu-raise); color: var(--smu-deep); padding-left: 24px;
}
.smu-sidelink .fa { flex: none; font-size: 12px; opacity: .5; }
.smu-public .smu-sidelink:hover .fa { opacity: 1; }

.smu-public .list-group { border-radius: var(--smu-r-md); }
.smu-public .list-group-item {
    border-color: var(--smu-line); padding: 13px 18px;
    font-size: 12.5px; color: var(--smu-ink-2);
}
.smu-public .list-group-item:first-child { border-radius: var(--smu-r-md) var(--smu-r-md) 0 0; }
.smu-public .list-group-item:last-child  { border-radius: 0 0 var(--smu-r-md) var(--smu-r-md); }
.smu-public a.list-group-item:hover { background: var(--smu-raise); }

.smu-public .nav-tabs { border-bottom: 1px solid var(--smu-line); margin-bottom: var(--smu-s5); }
.smu-public .nav-tabs > li > a {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--smu-ink-3); font-weight: 600; font-size: 12px;
    padding: 12px 16px; margin-right: 2px; background: transparent;
}
.smu-public .nav-tabs > li > a:hover { background: transparent; border-color: transparent; color: var(--smu-ink); }
.smu-public .nav-tabs > li.active > a,
.smu-public .nav-tabs > li.active > a:hover,
.smu-public .nav-tabs > li.active > a:focus {
    background: transparent; border: 0; border-bottom: 2px solid var(--smu-accent-ink); color: var(--smu-ink);
}

/* ---------------------------------------------------------- 14.7b DIALOGS - */
/* Eleven Bootstrap 3 modals sit behind the public pages — the complaints
   form, the verification request, diploma and CV details, holiday events,
   payment confirmation. They get one shared treatment.

   The structural fix matters as much as the dress: a Bootstrap 3 dialog grows
   as tall as its content and the whole `.modal` scrolls, so on a long form
   (the verification request has seven fields) the header and the footer
   scroll away and the dialog looks headless. Here the dialog is a flex column
   capped at the viewport, the BODY scrolls, and the header and footer stay
   put. No `!important` and no override of the `display` Bootstrap's JS sets,
   so show/hide behaviour is untouched. */
.smu-public .modal { padding: 0 16px; }
.smu-public .modal-dialog {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 56px);
    margin: 28px auto;
}
.smu-public .modal-content {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;   /* honour the dialog's max-height */
    border: 0; border-radius: var(--smu-r-xl);
    background: var(--smu-surface);
    box-shadow: 0 40px 80px -24px rgba(6,17,38,.55),
                0 0 0 1px rgba(8,20,45,.06);
    overflow: hidden;
}

/* Header — a tinted band with the accent rail the panels use.

   `!important` is unavoidable here. Content/bootstrap.min.css has been patched
   in place by this project with
       .modal-header       { color:#fff !important; background:#4b4a4a !important }
       .modal-header h4    { color:#fff !important }
       .modal-header .close{ color:#fff !important }
   which the authenticated application depends on. Those beat any ordinary
   rule, so the public header stayed charcoal and — worse — the close glyph
   was white on the white close button, leaving what looked like a blank
   circle. Scoping the counter-override to `.smu-public` leaves the
   authenticated app exactly as it was. */
.smu-public .modal-header {
    position: relative; flex: none;
    min-height: 0;
    padding: 20px 56px 18px 26px;
    background: var(--smu-raise) !important;
    color: var(--smu-ink) !important;
    border-bottom: 1px solid var(--smu-line);
}
.smu-public .modal-header:before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--smu-accent-ink);
}
.smu-public .modal-header h4,
.smu-public .modal-header .modal-title {
    margin: 0; font-size: var(--smu-t-h4) !important; font-weight: 650;
    letter-spacing: -.02em; color: var(--smu-ink) !important; line-height: 1.3;
}
.smu-public .modal-header h4 .fa { color: var(--smu-accent-ink); margin-right: 8px; }
.smu-public .modal-header h4 b { font-weight: 650; }
.smu-public .modal-header .fa-2x { font-size: 1.15em; color: var(--smu-accent-ink); vertical-align: -1px; }

/* Close — a round ghost control, not a floating × */
.smu-public .modal-header .close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--smu-line-2); border-radius: 50%;
    background: var(--smu-surface); color: var(--smu-ink-3) !important;
    font-size: 16px; line-height: 1; font-weight: 400;
    opacity: 1; text-shadow: none; cursor: pointer;
    transition: background var(--smu-fast) var(--smu-ease),
                color var(--smu-fast), border-color var(--smu-fast);
}
.smu-public .modal-header .close:hover {
    background: var(--smu-deep); border-color: var(--smu-deep); color: #fff !important; opacity: 1;
}

/* Body — the only part that scrolls */
.smu-public .modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 26px;
    -webkit-overflow-scrolling: touch;
}
.smu-public .modal-body > .row:last-child > [class*="col-"] > .form-group:last-child { margin-bottom: 0; }

/* A dialog whose body is injected wholesale (the verification result) gets its
   scroll region on the wrapper instead. */
.smu-public .modal-content > .smu-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.smu-public .modal-content > .smu-modal-scroll > .modal-body { overflow: visible; }

/* A footer that carries a note rather than buttons. */
.smu-public .modal-footer.smu-modal-note {
    justify-content: flex-start;
    font-size: var(--smu-t-sm); color: var(--smu-ink-3);
}

.smu-public .modal-footer {
    flex: none; margin: 0;
    padding: 16px 26px;
    background: var(--smu-raise);
    border-top: 1px solid var(--smu-line);
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
/* The footers were written with pull-right on every button; in a flex row
   that float does nothing and the gap handles spacing instead. */
.smu-public .modal-footer .btn { float: none; margin: 0; }

/* Backdrop — deeper and softly blurred, so the dialog reads as the one live
   surface on the page. */
.smu-public .modal-backdrop { background-color: var(--smu-abyss); }
.smu-public .modal-backdrop.in {
    opacity: .58;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

/* Entrance: rise and settle, rather than Bootstrap's 25% drop. */
.smu-public .modal.fade .modal-dialog {
    transform: translate(0, 18px) scale(.985);
    transition: transform var(--smu-mid) var(--smu-ease), opacity var(--smu-mid);
    opacity: 0;
}
.smu-public .modal.in .modal-dialog { transform: none; opacity: 1; }

@media (max-width: 767px) {
    .smu-public .modal { padding: 0 10px; }
    .smu-public .modal-dialog { margin: 12px auto; max-height: calc(100vh - 24px); }
    .smu-public .modal-dialog[style*="width"] { width: auto !important; }
    .smu-public .modal-lg, .smu-public .modal-sm { width: auto; }
    .smu-public .modal-body { padding: 20px; }
    .smu-public .modal-header { padding: 18px 52px 16px 22px; }
    .smu-public .modal-footer { padding: 14px 22px; }
}

/* Empty / no-result state */
.smu-empty {
    display: block; width: 100%;
    text-align: center; padding: var(--smu-s8) var(--smu-s5);
    color: var(--smu-ink-3); font-size: var(--smu-t-md);
    background: var(--smu-surface); border: 1px dashed var(--smu-line-2);
    border-radius: var(--smu-r-lg);
}

/* ------------------------------------------------- 14.8 LEGACY HELPERS --- */
/* Still referenced by existing public views — restyled, never removed. */
.smu-public .title { border-bottom: 1px solid var(--smu-line); padding-bottom: 10px;
                     margin-bottom: var(--smu-s5); font-size: var(--smu-t-h3);
                     font-weight: 620; color: var(--smu-ink); }
.smu-public .cntr { text-align: center; }
.smu-public .projectList { }
.smu-public .services { padding: var(--smu-s6) 0; margin: var(--smu-s4) 0; }
.smu-public blockquote { border-left: 3px solid var(--smu-deep); color: var(--smu-ink-2); }
.smu-public .arrow-up { width: 0; position: relative; height: 0;
                        border-left: 25px solid transparent; border-right: 25px solid transparent;
                        border-bottom: 15px solid var(--smu-surface); padding-top: 5px; }
.smu-public .message {
    background: var(--smu-surface); padding: 14px 16px; font-size: 11.5px !important;
    color: var(--smu-ink); box-shadow: var(--smu-e1);
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-md); margin: 8px 0;
}
.smu-public .message-danger  { border-left: 3px solid #C0392B; }
.smu-public .message-success { border-left: 3px solid #1E8E5A; }
.smu-public .message-warning { border-left: 3px solid #C77700; }
.smu-public .box-heading {
    font-size: var(--smu-t-h4); font-weight: 620; color: var(--smu-ink);
    margin: 0 0 var(--smu-s4); padding-bottom: 10px; border-bottom: 1px solid var(--smu-line);
}
.smu-public .note { font-size: var(--smu-t-sm); color: var(--smu-ink-3); }

/* `isa_*` notice boxes — several public views raise notices with these.
   Re-cut as Horizon notices so they stop shouting in primary colours. */
.smu-public .isa_info, .smu-public .isa_success,
.smu-public .isa_warning, .smu-public .isa_error {
    background: var(--smu-surface); color: var(--smu-ink-2);
    border: 1px solid var(--smu-line); border-left-width: 3px;
    border-radius: var(--smu-r-md); box-shadow: var(--smu-e1);
    padding: 15px 18px; margin: var(--smu-s4) 0; font-size: 12px; text-align: left;
}
.smu-public .isa_info    { border-left-color: var(--smu-teal); }
.smu-public .isa_success { border-left-color: #1E8E5A; }
.smu-public .isa_warning { border-left-color: #C77700; }
.smu-public .isa_error   { border-left-color: #C0392B; }

/* The single-field lookup used by diploma status, payments and verification.
   Class names are the ones those views' scripts already target. */
.smu-public .flexsearch--wrapper { max-width: 640px; margin: 0 auto; }
.smu-public .flexsearch--form { position: relative; overflow: visible; }
.smu-public .flexsearch--input-wrapper { padding: 0; overflow: visible; }
.smu-public .flexsearch--input {
    box-sizing: border-box; width: 100%; max-width: 100%;
    height: 58px; margin: 0; padding: 0 64px 0 22px;
    background: var(--smu-surface); color: var(--smu-ink);
    border: 1px solid var(--smu-line-2); border-radius: var(--smu-r-pill);
    font-family: var(--smu-font); font-size: var(--smu-t-md);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    box-shadow: var(--smu-e1);
    transition: border-color var(--smu-fast) var(--smu-ease), box-shadow var(--smu-fast) var(--smu-ease);
}
.smu-public .flexsearch--input::-webkit-input-placeholder { color: var(--smu-ink-3); }
.smu-public .flexsearch--input::placeholder { color: var(--smu-ink-3); }
.smu-public .flexsearch--input:focus {
    outline: none; border-color: var(--smu-accent-ink);
    box-shadow: 0 0 0 3px rgba(47,111,219,.14);
}
.smu-public .flexsearch--submit {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; margin: 0;
    background: var(--smu-deep); color: #fff;
    border: 0; border-radius: 50%;
    font-family: var(--smu-font); font-size: 17px; line-height: 1; cursor: pointer;
    transition: background var(--smu-fast) var(--smu-ease);
}
.smu-public .flexsearch--submit:hover { background: var(--smu-accent-ink); color: #fff; }

/* -------------------------------------------------- 14.9 AUTHENTICATION -- */
/* Sign-in, two-factor, code entry, forced password change and role choice.
   These used to live outside the public shell on their own bare layout; they
   now render inside it, as one split card: institution on the left, the form
   on the right.

   Every class the existing scripts touch is preserved — `.form-peice`,
   `.switched`, `.hasError`, `.button`, `.button__text`, `.button--loading`,
   `span.error` — so no behaviour changed, only its dress. */
/* The card used to sit against the top of the page with the sticky footer
   pushed to the bottom, leaving a band of empty paper under it. Grid with
   `align-content: center` (not flex — a flex item would shrink to its content
   width and take the shell's max-width off centre) parks it in the middle of
   whatever room is left. `min()` caps the reserved height so a short window
   never gains a scrollbar just to centre something, and `min-height` can only
   grow the section, so a tall card is never clipped. */
.smu-auth {
    padding: var(--smu-s8) 0 var(--smu-s9); background: var(--smu-paper);
    display: grid; align-content: center;
    min-height: min(760px, calc(100vh - 300px));
}
.smu-auth-wrap {
    width: 100%; max-width: 1020px; margin: 0 auto;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-xl);
    box-shadow: var(--smu-e3);
    overflow: hidden;
    display: grid; grid-template-columns: 1fr 1.05fr;
}
.smu-auth-wrap--single { max-width: 620px; grid-template-columns: 1fr; }

/* — left: the institution ---------------------------------------------- */
.smu-auth-brand {
    position: relative; overflow: hidden;
    background: var(--smu-abyss); color: var(--smu-on-dark-2);
    padding: var(--smu-s8) var(--smu-s7);
    display: flex; flex-direction: column; justify-content: center; gap: var(--smu-s5);
}
.smu-auth-brand:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(70% 60% at 8% 100%, rgba(47,111,219,.24), transparent 66%),
      radial-gradient(56% 56% at 96% 4%, rgba(20,51,107,.62), transparent 72%);
}
.smu-auth-brand > * { position: relative; z-index: 2; }
.smu-auth-brand img { width: 108px; height: auto; display: block; }
.smu-auth-brand h2 {
    color: #fff; font-size: var(--smu-t-h3); font-weight: 300;
    letter-spacing: -.03em; margin: 0; max-width: 16ch;
}
.smu-auth-brand h2 strong { font-weight: 650; }
.smu-auth-brand p { color: var(--smu-on-dark-2); font-size: var(--smu-t-base); margin: 0; max-width: 34ch; }
.smu-auth-brand .smu-kicker { color: #8FB8FF; margin: 0; }
.smu-auth-brand a { color: #8FB8FF; }
.smu-auth-brand a:hover { color: #C2D8FF; }

/* — right: the form ----------------------------------------------------- */
.smu-auth-form { padding: var(--smu-s8) var(--smu-s7); display: flex; flex-direction: column; justify-content: center; }
.smu-auth-form h3 {
    font-size: var(--smu-t-h3); font-weight: 620; color: var(--smu-ink);
    margin: 0 0 var(--smu-s2); letter-spacing: -.025em;
}
.smu-auth-form .smu-auth-sub { color: var(--smu-ink-3); font-size: var(--smu-t-sm); margin: 0 0 var(--smu-s6); }

/* The two panels the sign-in page switches between */
.smu-auth .form-peice { display: block; }
.smu-auth .form-peice.switched { display: none; }

.smu-auth .form-group { margin-bottom: var(--smu-s5); position: relative; }
.smu-auth .form-group > label { display: block; }
.smu-auth .form-group > label.active { color: var(--smu-accent-ink); }
.smu-auth .form-group.hasError .form-control { border-color: #C0392B; }
.smu-auth .form-group.hasError > label { color: #C0392B; }
.smu-auth span.error { display: block; margin-top: 6px; }

.smu-auth-toggle {
    font-size: var(--smu-t-xs); font-style: normal; font-weight: 600;
    color: var(--smu-ink-3); cursor: help; user-select: none;
    position: absolute; right: 2px; top: 0;
}
.smu-auth-toggle:hover { color: var(--smu-accent-ink); }

.smu-auth-cta { display: flex; align-items: center; gap: var(--smu-s4); flex-wrap: wrap; margin-top: var(--smu-s6); }
.smu-auth-cta .switch { font-size: var(--smu-t-sm); font-weight: 600; }

/* `.button` is the sign-in submit the script drives; it becomes a spinner
   while the request is in flight. Geometry differs from `.smu-btn`, so it is
   defined outright rather than layered on top of it. */
.smu-public .smu-auth .button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 172px; min-height: 48px; padding: 14px 28px;
    background: var(--smu-deep); border: 0; border-radius: var(--smu-r-pill);
    outline: none; cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(20,51,107,.9);
    transition: background var(--smu-fast) var(--smu-ease), transform var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-auth .button:hover { background: #1A428A; transform: translateY(-1px); }
.smu-public .smu-auth .button:active { background: #0F2755; transform: none; }
.smu-public .smu-auth .button__text {
    font: 600 15px/1 var(--smu-font); color: #fff; letter-spacing: -.005em;
    transition: opacity var(--smu-fast), visibility var(--smu-fast);
}
.smu-public .smu-auth .button--loading .button__text { visibility: hidden; opacity: 0; }
.smu-public .smu-auth .button--loading:after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.28); border-top-color: #fff;
    animation: smu-auth-spin .8s linear infinite;
}
@keyframes smu-auth-spin { to { transform: rotate(1turn); } }

/* Role picker — one tile per role, the radio stays the control */
.smu-auth-roles { display: grid; gap: var(--smu-s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; }
.smu-auth-role {
    display: flex; align-items: center; gap: 12px; margin: 0;
    padding: 16px 18px; cursor: pointer; font-weight: 600;
    background: var(--smu-surface); color: var(--smu-ink);
    border: 1px solid var(--smu-line-2); border-radius: var(--smu-r-md);
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
.smu-auth-role:hover { border-color: var(--smu-accent-ink); box-shadow: var(--smu-e2); transform: translateY(-2px); }
.smu-auth-role input { margin: 0; flex: none; }

/* ─── 14.9b  ONE-TIME CODE ────────────────────────────────────────────────
   The 2FA and e-mail-code screens. Both used a single `type="number"` box:
   it carried the browser's spinner arrows (meaningless for a code), ignored
   `maxlength` (which does not apply to number inputs), and refused to hold a
   value the browser considered malformed.

   What replaces it is ONE ordinary text input — still `#CodeDigitID` /
   `#Code`, still the element the page's script reads — laid transparently
   over a row of drawn cells. Nothing intercepts the keyboard: typing,
   backspace, select-all, paste, iOS/Android SMS autofill and password
   managers all behave natively, because natively is exactly what they are.
   The cells are a rendering of `input.value`, nothing more.

   Cell count comes from the input's `maxlength`, so the same component
   serves the six-digit authenticator code and the four-digit e-mail code. */
/* `.smu-otp` carries the state classes; `.smu-otp__box` is the positioning
   context, and holds nothing but the field and the cells — so the field's
   `inset: 0` covers the cells exactly, and not the status line beneath them. */
.smu-otp__box { position: relative; }

/* Until smu-public.js has drawn the cells, the field is an ordinary centred
   code box — the shape this screen has always had. Everything below is an
   upgrade applied to `.is-ready`, so a failed script leaves a usable form
   rather than an invisible one. */
.smu-auth-code {
    letter-spacing: .5em; text-align: center;
    font-size: 22px !important; font-weight: 600;
    padding: 16px 12px !important;
}
.smu-otp__cells { display: none; }
.smu-otp.is-ready .smu-otp__cells {
    display: grid; gap: var(--smu-s2);
    grid-template-columns: repeat(var(--smu-otp-len, 6), minmax(0, 1fr));
}

/* The real field, once upgraded. Transparent rather than hidden: a hidden or
   `display:none` input cannot be focused, and `autofocus`, tap-to-type,
   one-time-code autofill and password managers all depend on focus. */
.smu-public .smu-otp.is-ready .smu-otp__field {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; border: 0; background: none; box-shadow: none;
    cursor: text; -webkit-appearance: none; appearance: none;
}
/* Safari keeps the number spinners around if the type is ever flipped back. */
.smu-public .smu-otp__field::-webkit-outer-spin-button,
.smu-public .smu-otp__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.smu-otp__cell {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 62px; min-width: 0;
    background: var(--smu-surface); color: var(--smu-ink);
    border: 1.5px solid var(--smu-line-2); border-radius: var(--smu-r-md);
    box-shadow: var(--smu-e1);
    font: 650 26px/1 var(--smu-mono);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-fast) var(--smu-ease),
                background var(--smu-fast) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
/* An empty cell is not blank — it shows where a digit will land. */
.smu-otp__cell:empty:before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: .16;
}
.smu-otp__cell.is-filled {
    border-color: var(--smu-accent-ink);
    background: var(--smu-surface);
    animation: smu-otp-pop var(--smu-fast) var(--smu-ease);
}
@keyframes smu-otp-pop { from { transform: scale(.9); } to { transform: scale(1); } }

/* The caret: drawn in the cell the selection sits in, only while focused. */
.smu-otp__cell.is-active {
    border-color: var(--smu-accent-ink);
    box-shadow: 0 0 0 4px rgba(47,111,219,.18), var(--smu-e1);
}
.smu-otp__cell.is-active:empty:before {
    width: 2px; height: 26px; border-radius: 1px; opacity: 1;
    background: var(--smu-accent-ink);
    animation: smu-otp-caret 1.06s steps(1) infinite;
}
@keyframes smu-otp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* — states the page's script drives through window.smuOtpState ---------- */
/* While the code is in flight the row pulses left to right — a staggered
   animation on the cells themselves rather than a sweeping overlay, which
   would need `overflow: hidden` on the box and would clip the focus ring. */
.smu-otp.is-busy .smu-otp__cell {
    color: var(--smu-ink-3);
    animation: smu-otp-pulse 1.05s var(--smu-ease) infinite;
}
.smu-otp.is-busy .smu-otp__cell:nth-child(2) { animation-delay: .08s; }
.smu-otp.is-busy .smu-otp__cell:nth-child(3) { animation-delay: .16s; }
.smu-otp.is-busy .smu-otp__cell:nth-child(4) { animation-delay: .24s; }
.smu-otp.is-busy .smu-otp__cell:nth-child(5) { animation-delay: .32s; }
.smu-otp.is-busy .smu-otp__cell:nth-child(6) { animation-delay: .40s; }
.smu-otp.is-busy .smu-otp__cell.is-active { box-shadow: var(--smu-e1); }
@keyframes smu-otp-pulse {
    0%, 100% { border-color: var(--smu-line-2); }
    45%      { border-color: var(--smu-accent-ink); }
}

.smu-otp.is-error .smu-otp__cell { border-color: #C0392B; color: #C0392B; }
.smu-otp.is-error .smu-otp__cells { animation: smu-otp-shake 420ms var(--smu-ease); }
@keyframes smu-otp-shake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-7px); }
    38% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

.smu-otp.is-ok .smu-otp__cell {
    border-color: var(--smu-accent-ink); color: var(--smu-accent-ink);
    box-shadow: 0 0 0 3px rgba(47,111,219,.16), var(--smu-e1);
}

/* — the line under the cells -------------------------------------------- */
.smu-otp__status {
    display: flex; align-items: center; gap: 8px;
    min-height: 20px; margin: var(--smu-s3) 0 0;
    font-size: var(--smu-t-sm); font-weight: 600; color: var(--smu-ink-3);
}
.smu-otp__status:before {
    content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--smu-line-2); border-top-color: var(--smu-accent-ink);
    animation: smu-auth-spin .7s linear infinite;
    display: none;
}
.smu-otp.is-busy .smu-otp__status:before { display: block; }
.smu-otp.is-error .smu-otp__status { color: #C0392B; }
.smu-otp.is-ok .smu-otp__status { color: var(--smu-accent-ink); }

.smu-auth-hint {
    margin: var(--smu-s2) 0 0;
    font-size: var(--smu-t-sm); color: var(--smu-ink-3);
}

/* The e-mail page's two-minute countdown, as a chip rather than loose text */
.smu-auth-count {
    display: inline-flex; align-items: center; gap: 7px;
    margin: var(--smu-s4) 0 0; padding: 5px 12px 5px 10px;
    background: var(--smu-raise); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-pill);
    font-size: var(--smu-t-sm); font-weight: 600; color: var(--smu-ink-2);
    font-variant-numeric: tabular-nums;
}
.smu-auth-count:empty { display: none; }
.smu-auth-count .fa { color: var(--smu-accent-ink); }

/* — the eyebrow above the heading --------------------------------------- */
/* `.smu-auth-form` is a column flex container, whose items stretch by default;
   without align-self the pill would run the full width of the panel. */
.smu-auth-badge {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    margin: 0 0 var(--smu-s3); padding: 5px 12px 5px 10px;
    background: rgba(47,111,219,.12);
    border: 1px solid rgba(47,111,219,.28);
    border-radius: var(--smu-r-pill);
    font-size: var(--smu-t-xs); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--smu-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
    .smu-otp__cell.is-filled,
    .smu-otp.is-error .smu-otp__cells,
    .smu-otp.is-busy .smu-otp__cell,
    .smu-otp__cell.is-active:empty:before { animation: none; }
    /* the pulse was the only signal those two carried */
    .smu-otp.is-busy .smu-otp__cell { border-color: var(--smu-accent-ink); }
}

@media (max-width: 860px) {
    .smu-auth-wrap { grid-template-columns: 1fr; }
    .smu-auth-brand { padding: var(--smu-s7) var(--smu-s6); gap: var(--smu-s4); }
    .smu-auth-brand img { width: 84px; }
    .smu-auth-form { padding: var(--smu-s7) var(--smu-s6); }
    .smu-auth { padding: var(--smu-s6) 0 var(--smu-s8); min-height: 0; }
}
@media (max-width: 420px) {
    .smu-otp__cells { gap: 6px; }
    .smu-otp__cell { height: 54px; font-size: 22px; }
}

/* -------------------------------------------------- 14.9c ERROR PAGES ---- */
/* 404 / 403 / 500, rendered by ErrorController on the same _LoginLayOut shell
   as the sign-in screens — so a visitor who mistypes a URL still lands inside
   the site, with its navigation and its way back, rather than on an IIS page.

   Same split-card geometry as .smu-auth-wrap: dark panel, light panel. It is
   not folded into .smu-auth because only the frame is shared — this one has a
   numeral where the brand sits, and the two must be free to move apart. */
.smu-err {
    padding: var(--smu-s8) 0 var(--smu-s9); background: var(--smu-paper);
    display: grid; align-content: center;
    min-height: min(720px, calc(100vh - 300px));
}
.smu-err__card {
    width: 100%; max-width: 1020px; margin: 0 auto;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-xl);
    box-shadow: var(--smu-e3);
    overflow: hidden;
    display: grid; grid-template-columns: .82fr 1.18fr;
}

/* — left: the status code ----------------------------------------------- */
.smu-err__figure {
    position: relative; overflow: hidden;
    background: var(--smu-abyss);
    padding: var(--smu-s8) var(--smu-s7);
    display: flex; align-items: center; justify-content: center;
}
.smu-err__figure:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(70% 62% at 16% 100%, rgba(31,79,156,.55), transparent 70%),
      radial-gradient(56% 56% at 96% 4%, rgba(20,51,107,.62), transparent 72%);
}
.smu-err__code {
    position: relative; z-index: 2; margin: 0;
    font: 300 clamp(70px, 10.5vw, 142px)/1 var(--smu-font);
    letter-spacing: -.055em; color: #fff;
}
/* Guarded: without background-clip the declaration block would paint the
   numeral in transparent text on a gradient that never clips to it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .smu-err__code {
        background: linear-gradient(140deg, #FFFFFF 10%, #8FB8FF 56%, var(--smu-accent) 96%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
}

/* — right: what happened, and the way out -------------------------------- */
.smu-err__body {
    padding: var(--smu-s8) var(--smu-s7);
    display: flex; flex-direction: column; justify-content: center;
}
/* a column flex container stretches its items; the rule keeps the eyebrow and
   the path chip at their own width */
.smu-err__body .smu-kicker,
.smu-err__path { align-self: flex-start; }
.smu-err__title {
    margin: 0 0 var(--smu-s3); line-height: 1.1;
    font-size: var(--smu-t-h2); font-weight: 650;
    letter-spacing: -.03em; color: var(--smu-ink);
}
.smu-err__message { margin: 0; color: var(--smu-ink-3); font-size: var(--smu-t-md); max-width: 46ch; }
/* The path the visitor actually asked for. `anywhere` because a long unbroken
   URL would otherwise widen the grid column and push the card off the shell. */
.smu-err__path {
    max-width: 100%; margin: var(--smu-s4) 0 0; padding: 7px 13px;
    background: var(--smu-raise); border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-sm);
    font: 500 12px/1.5 var(--smu-mono); color: var(--smu-ink-2);
    overflow-wrap: anywhere; word-break: break-word;
}
.smu-err__actions { display: flex; flex-wrap: wrap; gap: var(--smu-s3); margin-top: var(--smu-s6); }
.smu-err__actions .smu-btn { padding: 13px 22px; font-size: 14px; }

@media (max-width: 860px) {
    .smu-err { padding: var(--smu-s6) 0 var(--smu-s8); min-height: 0; }
    .smu-err__card { grid-template-columns: 1fr; }
    .smu-err__figure { padding: var(--smu-s7) var(--smu-s6); }
    .smu-err__body { padding: var(--smu-s7) var(--smu-s6); }
}
@media (max-width: 479px) {
    .smu-err__actions .smu-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------ 14.10 DOCS / DIRECTORY - */
/* The staff directory and the public regulations browser are sidebar
   documents: a list of sections on the left, loaded content on the right.
   They used to run on a separate third-party template with its own fonts,
   grid, jQuery and Bootstrap — a second design system inside the same site.
   The shape is kept, in Horizon's vocabulary. */
.smu-docs { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: var(--smu-s6); align-items: start; }

.smu-docs-side {
    position: sticky; top: 88px;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line);
    border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e1);
    padding: var(--smu-s5);
}
.smu-docs-side h2 {
    font-size: var(--smu-t-xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--smu-ink-3); margin: 0 0 var(--smu-s4);
}
.smu-docs-side .components { list-style: none; margin: 0; padding: 0; }
.smu-docs-side .components li + li { margin-top: 2px; }
.smu-docs-side .components > li > a,
.smu-docs-side .components ul a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: var(--smu-r-sm);
    color: var(--smu-ink-2); font-size: 12px; font-weight: 500;
    transition: background var(--smu-fast), color var(--smu-fast);
}
.smu-docs-side .components a:hover { background: var(--smu-raise); color: var(--smu-ink); }
.smu-docs-side .components li.active > a {
    background: var(--smu-deep); color: #fff; font-weight: 600;
}
.smu-docs-side .components li.active > a span { color: #fff; }
.smu-docs-side .components ul { list-style: none; margin: 2px 0 2px 14px; padding: 0 0 0 12px;
                                border-left: 1px solid var(--smu-line); }
.smu-docs-side .components ul a { font-size: 11.5px; padding: 8px 12px; }

.smu-docs-foot { margin-top: var(--smu-s5); padding-top: var(--smu-s4); border-top: 1px solid var(--smu-line);
                 text-align: center; font-size: var(--smu-t-xs); color: var(--smu-ink-3); }
.smu-docs-foot img { max-height: 26px; max-width: 26px; margin: 0 3px; vertical-align: middle; }

.smu-docs-main { min-width: 0; }

/* ------------------------------------------- 14.10b DOCUMENT BROWSER ----- */
/* The public regulations browser. It is the one page on the site that is
   purely a search surface, so it leads with the search rather than burying it:
   a dark control bar carrying the scope pills and the query field, the
   categories as a chip row beneath it, then the documents.

   Deliberately NOT named `.smu-seg` — that class already belongs to the
   verification page's tab control, and two different components under one
   name is exactly the collision that broke the navigation earlier. */
.smu-filterbar {
    position: relative; overflow: hidden;
    background: var(--smu-abyss);
    border-radius: var(--smu-r-xl);
    padding: var(--smu-s6);
    margin-bottom: var(--smu-s5);
}
.smu-filterbar:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60% 70% at 6% 100%, rgba(47,111,219,.22), transparent 66%),
      radial-gradient(50% 60% at 96% 0%,  rgba(20,51,107,.60),   transparent 72%);
}
.smu-filterbar > * { position: relative; z-index: 2; }
.smu-filterbar-label {
    display: block; margin: 0 0 var(--smu-s4);
    font-size: 11px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: #8FB8FF;
}

/* Scope pills. The radio stays the control and keeps its id, so the existing
   filter script is untouched; only the label is drawn. */
.smu-radioseg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--smu-s5); }
.smu-radioseg-pill { margin: 0; cursor: pointer; font-weight: 500; }
.smu-radioseg-pill input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.smu-public .smu-radioseg-pill > span {
    display: inline-flex; align-items: center;
    padding: 9px 18px; border-radius: var(--smu-r-pill);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: var(--smu-on-dark-2);
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
    transition: background var(--smu-fast) var(--smu-ease),
                color var(--smu-fast), border-color var(--smu-fast);
}
.smu-public .smu-radioseg-pill:hover > span { background: rgba(255,255,255,.14); color: #fff; }
.smu-public .smu-radioseg-pill input:checked + span {
    background: var(--smu-accent); border-color: var(--smu-accent);
    color: #FFFFFF; font-weight: 700;
}
.smu-public .smu-radioseg-pill input:focus-visible + span {
    outline: 2px solid #8FB8FF; outline-offset: 3px;
}

/* Category chips */
.smu-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--smu-s6); }
.smu-public .smu-cat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 15px; border-radius: var(--smu-r-pill);
    background: var(--smu-surface); border: 1px solid var(--smu-line);
    color: var(--smu-ink-2); font-size: 13px; font-weight: 600;
    transition: border-color var(--smu-fast), color var(--smu-fast), box-shadow var(--smu-mid);
}
.smu-public .smu-cat:hover { border-color: var(--smu-accent-ink); color: var(--smu-deep); box-shadow: var(--smu-e2); }
.smu-cat-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--smu-r-pill);
    background: var(--smu-sunk); color: var(--smu-ink-3);
    font-size: 11.5px; font-weight: 700;
}
.smu-public .smu-cat:hover .smu-cat-n { background: var(--smu-deep); color: #fff; }

/* Result count — the one big number on the page */
.smu-resultline {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 14px; margin-bottom: var(--smu-s5);
    border-bottom: 1px solid var(--smu-line);
}
.smu-resultline b {
    font-size: clamp(26px, 3vw, 38px); font-weight: 700;
    letter-spacing: -.03em; color: var(--smu-ink); line-height: 1;
}
.smu-resultline span {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--smu-ink-3);
}

/* One document */
.smu-public .smu-doc {
    position: relative; display: flex; align-items: flex-start; gap: var(--smu-s5);
    flex-wrap: wrap;
    background: var(--smu-surface);
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e1);
    padding: 20px 22px; margin-bottom: 12px; width: 100%;
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-doc:before {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--smu-accent-ink);
    opacity: 0; transition: opacity var(--smu-fast) var(--smu-ease);
}
.smu-public .smu-doc:hover {
    border-color: var(--smu-line-2); box-shadow: var(--smu-e3); transform: translateY(-2px);
}
.smu-public .smu-doc:hover:before { opacity: 1; }
.smu-doc-main { flex: 1 1 320px; min-width: 0; }
.smu-public .smu-doc-title {
    display: block; font-size: var(--smu-t-md); font-weight: 650;
    letter-spacing: -.015em; line-height: 1.4; color: var(--smu-ink);
}
.smu-public .smu-doc-title:hover { color: var(--smu-accent-ink); }
.smu-doc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 10px; font-size: 12px; color: var(--smu-ink-3);
}
.smu-doc-meta b { color: var(--smu-ink-3); font-weight: 600; }
.smu-public .smu-doc-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--smu-r-pill);
    background: var(--smu-raise); color: var(--smu-deep);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Language downloads */
.smu-doc-langs { display: flex; flex-wrap: wrap; gap: 7px; flex: none; }
.smu-public .smu-lang-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: var(--smu-r-pill);
    background: var(--smu-surface); border: 1px solid var(--smu-line-2);
    color: var(--smu-ink-2);
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    transition: background var(--smu-fast) var(--smu-ease), color var(--smu-fast), border-color var(--smu-fast);
}
.smu-public .smu-lang-btn:hover { background: var(--smu-deep); border-color: var(--smu-deep); color: #fff; }
.smu-public .smu-lang-btn--primary { background: var(--smu-deep); border-color: var(--smu-deep); color: #fff; }
.smu-public .smu-lang-btn--primary:hover { background: var(--smu-accent-ink); border-color: var(--smu-accent-ink); color: #fff; }

/* Attachments */
.smu-public .smu-doc-more {
    flex: 0 0 100%; margin-top: 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--smu-accent-ink); cursor: pointer;
}
.smu-public .smu-doc-more:hover { color: var(--smu-deep); }
.smu-doc-more-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px;
    border-radius: var(--smu-r-pill); background: var(--smu-sunk);
    color: var(--smu-ink-2); font-size: 11px;
}
.smu-doc-subs { flex: 0 0 100%; margin-top: 6px; padding-left: 16px; border-left: 2px solid var(--smu-line); }
.smu-sub { padding: 12px 0; border-bottom: 1px dashed var(--smu-line); }
.smu-sub:last-child { border-bottom: 0; }
.smu-public .smu-sub-title { font-size: 14px; font-weight: 600; color: var(--smu-ink); }
.smu-public .smu-sub-title:hover { color: var(--smu-accent-ink); }
.smu-sub-meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px;
    font-size: 11.5px; color: var(--smu-ink-3);
}

@media (max-width: 767px) {
    .smu-filterbar { padding: var(--smu-s5); border-radius: var(--smu-r-lg); }
    .smu-public .smu-doc { padding: 18px; }
    .smu-doc-langs { width: 100%; }
}

/* Section rule used by the loaded partials in place of the old dark bar */
.smu-public .smu-docs-main .panel-heading,
.smu-docs-rule {
    background: transparent; border: 0; border-bottom: 1px solid var(--smu-line);
    border-radius: 0; padding: 0 0 12px; margin: 0 0 var(--smu-s5);
    color: var(--smu-ink); font-weight: 620; font-size: var(--smu-t-h4);
    letter-spacing: -.015em; text-align: left;
}

/* People grid — the staff directory */
.smu-people { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); margin-bottom: var(--smu-s7); }
.smu-person {
    display: block; text-align: center;
    background: var(--smu-surface); color: var(--smu-ink);
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-lg);
    box-shadow: var(--smu-e1); padding: var(--smu-s5) var(--smu-s4);
    transition: border-color var(--smu-fast) var(--smu-ease),
                box-shadow var(--smu-mid) var(--smu-ease),
                transform var(--smu-fast) var(--smu-ease);
}
.smu-public a.smu-person:hover {
    border-color: var(--smu-accent-ink); box-shadow: var(--smu-e3);
    transform: translateY(-3px); color: var(--smu-ink);
}
.smu-person img {
    width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 14px; display: block;
    border: 3px solid var(--smu-sunk);
}
.smu-public a.smu-person:hover img { border-color: rgba(47,111,219,.32); }
.smu-public .smu-person h5 { font-size: 12.5px; font-weight: 620; margin: 0; }
.smu-public .smu-person .smu-person-title { font-size: 10.5px; color: var(--smu-accent-ink); font-weight: 600; margin: 5px 0 0; }
.smu-public .smu-person p { font-size: 10.5px; color: var(--smu-ink-3); margin: 4px 0 0; }
.smu-person-mail {
    display: block; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--smu-line);
    font-size: 9.5px; color: var(--smu-ink-3); word-break: break-all;
}

@media (max-width: 900px) {
    .smu-docs { grid-template-columns: 1fr; }
    .smu-docs-side { position: static; }
}

/* -------------------------------------------- 14.11 PAGE-HEAD RESPONSIVE - */
@media (max-width: 767px) {
    .smu-page-head { padding: var(--smu-s7) 0 var(--smu-s7); }
    .smu-page-head--lift { padding-bottom: var(--smu-s9); }
    .smu-public .panel > .panel-body { padding: 18px; }
    .smu-public .dataTables_wrapper .dataTables_filter,
    .smu-public .dataTables_wrapper .dataTables_paginate { float: none; }
    .smu-public .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; margin: 8px 0 0; }
}

/* --------------------------------------------------- 15. SCROLL REVEAL     */
.smu-rev { opacity: 0; transform: translateY(18px); }
.smu-rev.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--smu-slow) var(--smu-ease), transform var(--smu-slow) var(--smu-ease);
}
.smu-rev-d1.is-in { transition-delay: 70ms; }
.smu-rev-d2.is-in { transition-delay: 140ms; }
/* If JS never runs, nothing may stay invisible */
.smu-public.no-js .smu-rev { opacity: 1; transform: none; }

/* ======================================================== 16. RESPONSIVE == */

/* ≤1279 — large laptop */
@media (max-width: 1279px) {
    .smu-public { --smu-gut: 22px; }
    .smu-quick-grid { grid-template-columns: repeat(3, 1fr); }
    .smu-quick-item:nth-child(4), .smu-quick-item:nth-child(5) { }
}

/* ≤1023 — tablet landscape / small laptop */
@media (max-width: 1023px) {
    .smu-hero { min-height: 560px; }
    .smu-hero-body { padding: var(--smu-s8) 0 var(--smu-s6); }
    .smu-bento { grid-template-columns: repeat(2, 1fr); }
    .smu-bento > .smu-b-4, .smu-bento > .smu-b-3, .smu-bento > .smu-b-2 { grid-column: span 1; }
    .smu-bento > .smu-b-4 { grid-column: span 2; }
    .smu-res { grid-template-columns: repeat(2, 1fr); }
    .smu-footer-main { grid-template-columns: 1fr 1fr; gap: var(--smu-s6); }
}

/* ≤899 — tablet portrait: the nav collapses */
@media (max-width: 899px) {
    .smu-burger { display: inline-flex; }
    .smu-menu-desktop { display: none; }
    .smu-nav .smu-shell { min-height: 60px; }
    .smu-nav .smu-login { display: none; }   /* lives in the drawer instead */
    .smu-hero { margin-top: -60px; padding-top: 60px; }

    .smu-navscrim { display: block; }
    .smu-navpanel {
        position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); z-index: 90;
        background: var(--smu-surface); border-left: 1px solid var(--smu-line);
        box-shadow: -20px 0 50px -20px rgba(8,20,45,.3);
        transform: translateX(100%); transition: transform var(--smu-mid) var(--smu-ease);
        display: flex; flex-direction: column; padding: var(--smu-s5);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .smu-navpanel.is-open { transform: none; }
    /* The drawer covers the burger, so it carries its own close control. */
    .smu-navpanel-top { display: flex; align-items: center; justify-content: space-between;
                        gap: var(--smu-s3); padding-bottom: var(--smu-s4);
                        margin-bottom: var(--smu-s3); border-bottom: 1px solid var(--smu-line); }
    .smu-navpanel-title { font-size: 9px; font-weight: 700; letter-spacing: .16em;
                          text-transform: uppercase; color: var(--smu-ink-3); }
    .smu-navclose { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
                    border: 1px solid var(--smu-line); border-radius: var(--smu-r-sm);
                    background: transparent; color: var(--smu-ink); cursor: pointer;
                    transition: background var(--smu-fast), border-color var(--smu-fast); }
    .smu-navclose:hover { background: var(--smu-raise); border-color: var(--smu-line-2); }
    .smu-navscrim {
        position: fixed; inset: 0; z-index: 85; background: rgba(6,17,38,.55);
        opacity: 0; visibility: hidden; transition: opacity var(--smu-mid), visibility var(--smu-mid);
        -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    }
    .smu-navscrim.is-open { opacity: 1; visibility: visible; }

    .smu-menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .smu-menu > li > a, .smu-menu > li > button {
        width: 100%; justify-content: space-between; color: var(--smu-ink) !important;
        font-size: 13.5px; font-weight: 550; padding: 14px 12px;
    }
    .smu-nav.is-over .smu-menu > li > a,
    .smu-nav.is-over .smu-menu > li > button { color: var(--smu-ink) !important; }
    .smu-nav.is-over .smu-menu > li > a:hover,
    .smu-nav.is-over .smu-menu > li > button:hover { background: var(--smu-raise); }

    /* Dropdowns become inline accordions on mobile. The desktop viewport cap
       is released here — the drawer already scrolls, and keeping it would nest
       a second scroller inside it. */
    .smu-drop {
        position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
        max-height: none; overflow: visible;
        border: 0; box-shadow: none; border-radius: 0; padding: 0 0 var(--smu-s3) 10px;
        margin-left: 12px; border-left: 2px solid var(--smu-line);
        display: none;
    }
    .smu-menu > li.is-open > .smu-drop { display: block; }
    .smu-login { margin: var(--smu-s5) 0 0; width: 100%; padding: 15px 20px;
                 background: var(--smu-deep) !important; color: #fff !important; }
    .smu-nav.is-over .smu-login { background: var(--smu-deep) !important; color: #fff !important; }

    .smu-topline .smu-tl-item.smu-tl-hide-sm { display: none; }
    .smu-quick { margin-top: calc(var(--smu-s7) * -1); }
    .smu-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .smu-stats { grid-template-columns: repeat(2, 1fr); }
    .smu-stat + .smu-stat { border-left: 0; padding-left: 0; }
    .smu-stat:nth-child(2n) { border-left: 1px solid var(--smu-line-dark); padding-left: var(--smu-s5); }
    .smu-head--split { flex-direction: column; align-items: flex-start; }
    .smu-section { padding: var(--smu-s8) 0; }
}

/* ≤767 — phone landscape / small tablet */
@media (max-width: 767px) {
    .smu-public { --smu-gut: 18px; }
    .smu-hero { min-height: 0; }
    .smu-hero-body { padding: var(--smu-s8) 0 var(--smu-s7); }
    .smu-hero h1 { max-width: 100%; letter-spacing: -.03em; }
    .smu-hero-lede { font-size: 13.5px; }
    .smu-hero-actions .smu-btn { flex: 1 1 100%; }
    .smu-hero-foot .smu-shell { font-size: 9px; letter-spacing: .12em; }
    .smu-bento { grid-template-columns: 1fr; gap: var(--smu-s3); }
    .smu-bento > .smu-b-4 { grid-column: span 1; }
    .smu-card { padding: 22px; }
    .smu-card--feature { min-height: 0; }
    .smu-res { grid-template-columns: 1fr; }
    .smu-footer-main { grid-template-columns: 1fr; gap: var(--smu-s6); padding-bottom: var(--smu-s6); }
    .smu-term { gap: var(--smu-s3); padding: 14px 16px; }
    .smu-count { margin-left: 0; width: 100%; }
    .smu-cta-actions .smu-btn { flex: 1 1 100%; }
}

/* ≤479 — small phones down to 320 */
@media (max-width: 479px) {
    .smu-public { --smu-gut: 15px; }
    .smu-quick-grid { grid-template-columns: 1fr; }
    .smu-quick-item { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
    .smu-quick-item .smu-quick-text { display: flex; flex-direction: column; }
    .smu-quick-item span { font-size: 10px; }
    .smu-quick-item .smu-quick-go { margin: 0 0 0 auto; padding: 0; }
    .smu-stats { grid-template-columns: 1fr; }
    .smu-stat { padding: 20px 0; }
    .smu-stat + .smu-stat { border-left: 0 !important; padding-left: 0 !important;
                             border-top: 1px solid var(--smu-line-dark); }
    .smu-topline .smu-shell { gap: var(--smu-s3); min-height: 33px; }
    .smu-brand img { height: 28px; }
    .smu-brand .smu-brand-sub { display: none; }
    .smu-section { padding: var(--smu-s7) 0; }
    .smu-footer-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ≥1600 — ultrawide: the shell stops growing, the hero does not */
@media (min-width: 1600px) {
    .smu-public { --smu-max: 1420px; --smu-gut: 40px; }
    .smu-hero { min-height: 720px; }
}
@media (min-width: 2200px) {
    .smu-public { --smu-max: 1560px; }
}

/* ---------------------------------------------------- 17. REDUCED MOTION   */
@media (prefers-reduced-motion: reduce) {
    .smu-public *, .smu-public *:before, .smu-public *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .smu-rev { opacity: 1 !important; transform: none !important; }
    .smu-hero-media { transform: none !important; }
}

/* ------------------------------------------------------------- 18. PRINT   */
@media print {
    .smu-topline, .smu-nav, .smu-navpanel, .smu-navscrim,
    .smu-hero-media, .smu-hero-scrim, .smu-hero-grain, .smu-cta { display: none !important; }
    .smu-public { background: #fff; color: #000; }
    .smu-hero, .smu-footer, .smu-section--dark { background: #fff !important; color: #000 !important; }
    .smu-hero h1, .smu-footer a { color: #000 !important; }
}

/* ============================================================================
   19. DARK THEME  ·  the logged-out experience only
   ----------------------------------------------------------------------------
   Scope: `.smu-public`, so this cannot reach the authenticated application —
   that runs a minified vendor template with thousands of inline colour styles
   and keeps its own light theme and its style1/style2/style3 switcher.

   HOW IT WORKS
   `data-theme` is written onto <html> by an inline snippet in the <head> of
   each logged-out shell (the anonymous branch of _Layout.cshtml and
   _LoginLayOut.cshtml) before first paint, so the page never flashes the wrong
   theme. Scripts/smu-theme.js is only the control; it stores the choice in
   localStorage under SMUTheme, the same key the attendance board uses, so a
   visitor who picks dark on one keeps it on the other.

   LIGHT IS THE DEFAULT here (declared as data-default-theme on <html>). The
   board is the opposite — it is a kiosk read at a distance.

   Almost everything below is a token remap. Section 1 defines ~40 tokens and
   the rest of this file reads them 770-odd times, so re-pointing the surfaces,
   the ink and the lines flips the whole site. Only the literal colours that
   were written for a pale ground need the explicit rules further down.

   The sections that are ALREADY dark in the light theme — the hero, the CTA,
   the footer, .smu-section--dark, .smu-card--tint, the top line and the
   sign-in aside — are deliberately left alone. They are built on --smu-abyss,
   which stays darker than the page ground below, so they still read as deeper
   wells rather than dissolving into the page.
   ========================================================================= */
:root[data-theme="dark"] .smu-public {
    /* — Surfaces: the light stack inverts into the brand's teal-black family,
         layered light-to-dark the same way it is layered dark-to-light ------ */
    --smu-paper:      #0A1730;  /* page ground, sits ABOVE abyss              */
    --smu-surface:    #0F2040;  /* cards, panels, modals, inputs              */
    --smu-raise:      #15294D;  /* hovered/raised surface                     */
    --smu-sunk:       #071226;  /* wells, table stripes                       */

    /* — Ink: inverted, keeping the three steps' relative contrast ---------- */
    --smu-ink:        #EEF2F9;
    --smu-ink-2:      #C4CEDF;
    --smu-ink-3:      #92A0B8;

    /* The "on light" accent has to brighten to clear 4.5:1 on the new ground;
       --smu-accent is already the bright one and is left as it is. */
    --smu-accent-ink: #8FB8FF;

    /* --smu-deep is the solid button/pill fill. On paper it read as the
       darkest thing on the page; here it has to read as the lightest, or every
       primary button sinks into its own card. */
    --smu-deep:       #2E64BE;
    --smu-teal:       #3A72CC;

    --smu-line:       rgba(255,255,255,.12);
    --smu-line-2:     rgba(255,255,255,.22);

    /* Shadow alone does not separate surfaces on a dark ground, so the
       elevations carry a hairline of light as well as the drop. */
    --smu-e1: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
    --smu-e2: 0 6px 18px -6px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.05);
    --smu-e3: 0 22px 44px -18px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.06);

    /* the vector lockup in _SmuLogoMark.cshtml */
    --smu-logo-tile:  #8FB8FF;
    --smu-logo-glyph: #061126;

    color-scheme: dark;
}

/* The nav is the one always-pale surface that is not a card: in the light
   theme it is white over the hero. It follows --smu-surface, but its shadow
   and its bottom hairline were tuned for white. */
:root[data-theme="dark"] .smu-public .smu-nav {
    border-bottom-color: rgba(255,255,255,.10);
}

/* The brand mark is vector and follows --smu-logo-*, which the token block
   above already re-points; only the campus chip beside it needs saying. */
:root[data-theme="dark"] .smu-public .smu-brand .smu-brand-sub {
    color: var(--smu-ink-3);
    border-left-color: var(--smu-line-2);
}

/* — Validation and status ------------------------------------------------- */
/* #C0392B / #1E8E5A / #C77700 were picked to clear 4.5:1 on paper, which puts
   all three below 3:1 here. They lighten, and the tinted error panel stops
   being a pale pink block on a dark page. */
:root[data-theme="dark"] .smu-public span.error,
:root[data-theme="dark"] .smu-public .has-error .help-block,
:root[data-theme="dark"] .smu-public .field-validation-error,
:root[data-theme="dark"] .smu-auth .form-group.hasError > label {
    color: #F98D80;
}
:root[data-theme="dark"] .smu-public .has-error .form-control,
:root[data-theme="dark"] .smu-auth .form-group.hasError .form-control {
    border-color: #F98D80;
}
:root[data-theme="dark"] .smu-public .validation-summary-errors {
    background: rgba(192,57,43,.14);
    border-color: rgba(249,141,128,.34);
    border-left-color: #F98D80;
    color: #FBBDB4;
}
:root[data-theme="dark"] .smu-public .alert-danger,
:root[data-theme="dark"] .smu-public .message-danger,
:root[data-theme="dark"] .smu-public .isa_error   { border-left-color: #F98D80; }
:root[data-theme="dark"] .smu-public .alert-success,
:root[data-theme="dark"] .smu-public .message-success,
:root[data-theme="dark"] .smu-public .isa_success { border-left-color: #4ADE80; }
:root[data-theme="dark"] .smu-public .alert-warning,
:root[data-theme="dark"] .smu-public .message-warning,
:root[data-theme="dark"] .smu-public .isa_warning { border-left-color: #FBBF24; }

/* Images and embeds carry their own light ground, so they flare against the
   page. A slight knock-down settles them without touching their colour. */
:root[data-theme="dark"] .smu-public .smu-person img {
    filter: brightness(.94);
}

/* ------------------------------------------------- 19.1 THE THEME CONTROL  */
/* In the top line beside the language pill. The top line is --smu-abyss in
   both themes, so this control is styled once, on dark. */
.smu-themetoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--smu-line-dark);
    border-radius: 50%;
    background: transparent;
    color: var(--smu-on-dark-2);
    font-size: 10px; line-height: 1;
    cursor: pointer;
    transition: background var(--smu-fast) var(--smu-ease),
                border-color var(--smu-fast) var(--smu-ease),
                color var(--smu-fast);
}
.smu-themetoggle:hover,
.smu-themetoggle:focus { background: rgba(255,255,255,.1); border-color: var(--smu-accent); color: #fff; }

/* light is the default here, so the moon (go dark) shows first */
.smu-themetoggle .fa-sun-o  { display: none; }
.smu-themetoggle .fa-moon-o { display: inline-block; }
:root[data-theme="dark"] .smu-themetoggle .fa-moon-o { display: none; }
:root[data-theme="dark"] .smu-themetoggle .fa-sun-o  { display: inline-block; }
/* -------------------------------- 19.2 THE MARK ON THE ALWAYS-DARK PANELS  */
/* The footer and the sign-in aside are --smu-abyss in BOTH themes, so the
   lockup is set here once rather than being themed: a bright tile with a dark
   glyph, and the wordmark in white. Placed after section 1 so it wins over the
   light defaults without !important. */
.smu-footer-brand .smu-logo,
.smu-auth-brand .smu-logo {
    --smu-logo-tile: var(--smu-accent);
    --smu-logo-glyph: var(--smu-abyss);
    display: inline-flex; align-items: center; gap: 12px;
}
.smu-footer-brand .smu-logo { margin-bottom: var(--smu-s4); }
.smu-footer-brand .smu-logo__mark,
.smu-auth-brand .smu-logo__mark { width: 40px; height: 40px; flex: none; display: block; }
.smu-footer-brand .smu-logo__tile,
.smu-auth-brand .smu-logo__tile { fill: var(--smu-logo-tile); }
.smu-footer-brand .smu-logo__glyph,
.smu-auth-brand .smu-logo__glyph { fill: var(--smu-logo-glyph); }
.smu-footer-brand .smu-logo__text,
.smu-auth-brand .smu-logo__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.smu-footer-brand .smu-logo__name,
.smu-auth-brand .smu-logo__name {
    font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff;
}
.smu-footer-brand .smu-logo__sub,
.smu-auth-brand .smu-logo__sub {
    margin-top: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; line-height: 1.2; color: var(--smu-on-dark-3); white-space: nowrap;
}
/* the aside's link colour would otherwise repaint the wordmark mint */
.smu-auth-brand a:hover .smu-logo__name { color: #fff; }

@media (max-width: 1023px) {
    .smu-auth-brand .smu-logo__mark { width: 34px; height: 34px; }
    .smu-auth-brand .smu-logo__name { font-size: 19.5px; }
}


/* ============================================================================
   20. SENTINEL  ·  the police-academy layer
   ----------------------------------------------------------------------------
   Everything above is the shared public design system, re-pointed from the
   university's teal to the academy's palette: night navy (--smu-abyss),
   white, steel grey, and one restrained patrol blue (--smu-accent) for
   action and emphasis. No gold, no red, no decorative gradients.

   This section adds the vocabulary of a security institution:

     · a condensed display face for headlines — uniform lettering, not prose
     · the Sillitoe chequer, the band police forces wear on caps and cars,
       closing the hero and the page heads and opening the footer
     · the "thin blue line" under the top line
     · the academy seal in vector: in the brand, and turning in the hero
     · shield-shaped icon plates, star kickers, numbered "unit" tiles
     · tighter radii and squared, upper-case buttons instead of soft pills
     · heavier, tinted highlight boxes for warnings and key information

   It comes last, so it wins at equal specificity.
   ========================================================================= */
.smu-public {
    --smu-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", var(--smu-font);

    --smu-hi:     #8FB8FF;   /* emphasis on dark grounds                    */
    --smu-steel:  #9AA8BD;   /* steel grey, labels on dark                  */

    /* a disciplined shape language: tighter corners throughout */
    --smu-r-md: 8px; --smu-r-lg: 10px; --smu-r-xl: 14px;

    /* the seal (Views/Shared/Public/_SmuLogoMark.cshtml) — silver rim like
       the real emblem, navy disc, white stars and book */
    --smu-logo-ring:  #7D8BA1;
    --smu-logo-tile:  #14336B;
    --smu-logo-glyph: #FFFFFF;

    /* chequer squares */
    --smu-chk-a: #FFFFFF;
    --smu-chk-b: #1F4F9C;
    --smu-chk:   6px;
}

/* --------------------------------------------------------- 20.1 THE SEAL  */
.smu-public .smu-logo__ring  { fill: var(--smu-logo-ring); }
.smu-public .smu-logo__tile  { fill: var(--smu-logo-tile); }
.smu-public .smu-logo__glyph { fill: var(--smu-logo-glyph); }
.smu-public .smu-logo__rim   { fill: none; stroke: var(--smu-logo-glyph); stroke-opacity: .3; stroke-width: .7; }
.smu-public .smu-logo__arc   { fill: var(--smu-logo-glyph); }

.smu-public .smu-logo__name {
    font-family: var(--smu-display) !important;
    font-weight: 700 !important; letter-spacing: .06em !important;
    font-size: 23px !important;
}
.smu-brand .smu-logo__mark { width: 36px; height: 36px; }

/* on navy (over the hero, the footer, the sign-in aside, the dark theme)
   the rim turns silver and the disc lifts to patrol blue */
.smu-nav.is-over .smu-brand,
.smu-footer-brand .smu-logo,
.smu-auth-brand .smu-logo {
    --smu-logo-ring: #C3CDDA; --smu-logo-tile: #1F4F9C; --smu-logo-glyph: #FFFFFF;
}
:root[data-theme="dark"] .smu-public {
    --smu-logo-ring: #C3CDDA; --smu-logo-tile: #1F4F9C; --smu-logo-glyph: #FFFFFF;
}

@media (max-width: 599px) {
    .smu-brand .smu-logo__sub { display: none; }
    .smu-brand .smu-logo__mark { width: 32px; height: 32px; }
}

/* ------------------------------------------------------ 20.2 THE CHEQUER  */
/* Three rows of squares, drawn by one conic gradient per tile — no image. */
.smu-checker {
    position: relative; z-index: 3; flex: none;
    height: calc(var(--smu-chk) * 3);
    background:
      conic-gradient(var(--smu-chk-a) 25%, var(--smu-chk-b) 0 50%, var(--smu-chk-a) 0 75%, var(--smu-chk-b) 0)
      0 0 / calc(var(--smu-chk) * 2) calc(var(--smu-chk) * 2);
}
.smu-checker--slim { height: calc(var(--smu-chk) * 2); --smu-chk-a: rgba(255,255,255,.88); --smu-chk-b: #14336B; }
.smu-checker--edge {
    position: absolute; left: 0; right: 0; bottom: 0;
    --smu-chk: 4px; height: 12px;
    /* z-index auto, not 3: on a lifted page head the first card floats up
       over this edge and has to paint above it, which it does by document
       order only while neither side sets a z-index */
    z-index: auto;
}

/* ------------------------------------------------- 20.3 TOP LINE & NAV   */
/* the thin blue line */
.smu-topline:after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--smu-accent); pointer-events: none;
}
.smu-topline .smu-tl-flag { color: var(--smu-hi); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.smu-topline .smu-tl-flag span { color: var(--smu-on-dark-2); }

.smu-public .smu-menu > li > a, .smu-public .smu-menu > li > button { font-weight: 600; letter-spacing: .01em; }

.smu-public .smu-login {
    border-radius: var(--smu-r-sm);
    font-family: var(--smu-display); font-size: 15px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--smu-abyss); padding: 11px 18px;
}
.smu-public .smu-login:hover { background: var(--smu-deep); box-shadow: 0 10px 22px -12px rgba(6,17,38,.8); }
.smu-public .smu-nav.is-over .smu-login { background: #FFFFFF; color: var(--smu-abyss) !important; }
.smu-public .smu-nav.is-over .smu-login:hover { background: #E8EDF5; box-shadow: none; }

/* ------------------------------------------------------- 20.4 BUTTONS   */
.smu-public .smu-btn {
    border-radius: var(--smu-r-sm);
    font-family: var(--smu-display); font-size: 16px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 14px 24px;
}
.smu-public .smu-btn-sm { padding: 10px 16px; font-size: 13.5px; }
.smu-public .smu-btn-primary { box-shadow: 0 10px 24px -14px rgba(47,111,219,.9); }
.smu-public .smu-btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border-color: rgba(255,255,255,.36); }
.smu-public .smu-btn-ghost:hover { background: rgba(255,255,255,.08); }
.smu-public .btn { border-radius: var(--smu-r-sm); }

/* ---------------------------------------------------- 20.5 DISPLAY TYPE  */
.smu-public .smu-hero h1,
.smu-public .smu-head h2,
.smu-public .smu-cta h2,
.smu-public .smu-page-head h1,
.smu-public .smu-auth-brand h2,
.smu-public .smu-auth-form h3,
.smu-public .smu-err__title,
.smu-public .smu-card h3 { font-family: var(--smu-display); }

.smu-public .smu-head h2,
.smu-public .smu-cta h2 {
    font-weight: 500; letter-spacing: .01em; text-transform: uppercase; line-height: 1.02;
    font-size: clamp(28px, 3.4vw, 46px);
}
.smu-public .smu-head h2 strong,
.smu-public .smu-cta h2 strong { font-weight: 700; }
.smu-public .smu-cta h2 strong { color: var(--smu-hi); }
.smu-public .smu-page-head h1 {
    font-weight: 500; letter-spacing: .005em; line-height: 1.04;
    font-size: clamp(28px, 3.2vw, 44px);
}
.smu-public .smu-page-head h1 strong { font-weight: 700; }
.smu-public .smu-err__title { font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }

/* kickers carry a star — the rank mark — instead of a rule */
.smu-public .smu-kicker { color: var(--smu-accent-ink); }
.smu-public .smu-kicker:before {
    width: 10px; height: 10px; background: currentColor;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.smu-public .smu-section--dark .smu-kicker,
.smu-public .smu-page-head .smu-kicker,
.smu-public .smu-auth-brand .smu-kicker { color: var(--smu-hi); }

/* --------------------------------------------------- 20.6 ACADEMY HERO  */
.smu-public .smu-hero--academy {
    background: linear-gradient(180deg, #0B1C40 0%, var(--smu-abyss) 100%);
    min-height: 700px;
}
/* the graduating class: a band along the bottom, fading up into the navy */
.smu-hero--academy .smu-hero-media {
    inset: auto 0 0 0; height: min(56%, 430px);
    background-position: center 26%; background-size: cover;
    filter: grayscale(1) contrast(1.12) brightness(.8);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
}
/* a cold duotone: navy shadows, steel highlights */
.smu-hero--academy .smu-hero-media:after {
    content: ""; position: absolute; inset: 0;
    background: #1B3F7E; mix-blend-mode: color; opacity: .75;
}
.smu-hero--academy .smu-hero-scrim {
    background:
      linear-gradient(90deg, rgba(6,17,38,.9) 0%, rgba(6,17,38,.64) 38%, rgba(6,17,38,.2) 68%, rgba(6,17,38,.42) 100%),
      linear-gradient(180deg, rgba(6,17,38,0) 46%, rgba(6,17,38,.3) 74%, rgba(6,17,38,.84) 100%);
}
/* a faint survey grid over the sky — structure, not ornament */
.smu-hero--academy .smu-hero-grain {
    opacity: 1;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}

.smu-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: var(--smu-s7);
}
.smu-hero-copy { min-width: 0; }

.smu-public .smu-hero--academy .smu-hero-eyebrow {
    color: var(--smu-hi); letter-spacing: .22em; font-size: 10px;
    padding: 7px 14px 7px 12px; border: 1px solid rgba(143,184,255,.3);
    border-radius: 3px; background: rgba(6,17,38,.5);
}
.smu-public .smu-hero--academy .smu-hero-eyebrow i { background: var(--smu-hi); }

.smu-public .smu-hero--academy h1 {
    font-weight: 500; text-transform: uppercase; color: #B9C6DA;
    font-size: clamp(40px, 6.2vw, 92px); line-height: .94; letter-spacing: .005em;
    max-width: 24ch; text-shadow: none;
}
/* the emphasised line is solid white, heavy — no gradient fill */
.smu-public .smu-hero--academy h1 strong,
.smu-public .smu-err__code {
    background: none !important; filter: none !important;
    -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important;
}
.smu-public .smu-hero--academy h1 strong { font-weight: 800; display: inline-block; }
.smu-public .smu-hero--academy .smu-hero-lede { color: #D3DCEB; max-width: 52ch; text-shadow: none; }

/* the three values, set like insignia */
.smu-values {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    list-style: none; margin: var(--smu-s6) 0 0; padding: 0;
    font: 700 13px/1 var(--smu-display); letter-spacing: .16em; text-transform: uppercase;
    color: var(--smu-on-dark);
}
.smu-values li { display: inline-flex; align-items: center; gap: 10px; }
.smu-values li + li:before {
    content: ""; width: 5px; height: 5px; margin-right: 12px; transform: rotate(45deg);
    background: var(--smu-accent);
}
.smu-values-ic {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgba(143,184,255,.36); color: var(--smu-hi);
}

.smu-public .smu-hero--academy .smu-term {
    background: rgba(6,17,38,.6); border-color: rgba(255,255,255,.14); border-radius: var(--smu-r-md);
    border-left: 4px solid var(--smu-accent);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.smu-public .smu-hero--academy .smu-count b { font-family: var(--smu-display); font-size: 26px; font-weight: 700; }

/* the turning seal */
.smu-hero-seal { width: clamp(260px, 29vw, 430px); aspect-ratio: 1 / 1; }
.smu-hero-seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.smu-seal-ring { fill: none; stroke: rgba(195,205,218,.5); stroke-width: 2; }
.smu-seal-ring--thin { stroke: rgba(195,205,218,.22); stroke-width: 1; }
.smu-seal-text { font: 600 17px var(--smu-display); letter-spacing: .02em; fill: rgba(214,224,238,.78); }
.smu-seal-turn { transform-box: view-box; transform-origin: 200px 200px; animation: smu-seal-turn 120s linear infinite; }
@keyframes smu-seal-turn { to { transform: rotate(360deg); } }
.smu-seal-disc { fill: rgba(20,51,107,.72); stroke: rgba(195,205,218,.32); stroke-width: 1.5; }
.smu-seal-stars polygon,
.smu-seal-book path { fill: #FFFFFF; }
.smu-seal-arc { fill: #FFFFFF; }

/* foot: place, social, scroll — with room for the quick rail to land on
   the chequer rather than on the copy */
.smu-hero--academy .smu-hero-foot { margin-bottom: calc(var(--smu-s8) - 18px); }
.smu-hero-social { display: inline-flex; align-items: center; gap: 16px; letter-spacing: .08em; }
.smu-public .smu-hero-social a { display: inline-flex; align-items: center; gap: 7px; color: var(--smu-on-dark-2); }
.smu-public .smu-hero-social a:hover { color: #FFFFFF; }
.smu-hero-social .fa { font-size: 13px; }

/* ------------------------------------------- 20.7 RAIL, CARDS, STATS  */
.smu-quick-grid { counter-reset: smu-unit; }
.smu-public .smu-quick-item { counter-increment: smu-unit; }
.smu-public .smu-quick-item:after {
    content: counter(smu-unit, decimal-leading-zero);
    position: absolute; top: 18px; right: 18px;
    font: 700 13px/1 var(--smu-display); letter-spacing: .12em; color: var(--smu-ink-3); opacity: .6;
}
.smu-public .smu-quick-item:hover:after { color: var(--smu-accent-ink); opacity: 1; }
.smu-quick-item b { font-family: var(--smu-display); font-size: 16px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* icon plates are shields */
.smu-public .smu-card-ic {
    width: 44px; height: 50px; border: 0; border-radius: 0; padding-bottom: 6px;
    background: var(--smu-sunk);
    -webkit-clip-path: polygon(50% 0, 100% 13%, 100% 56%, 50% 100%, 0 56%, 0 13%);
    clip-path: polygon(50% 0, 100% 13%, 100% 56%, 50% 100%, 0 56%, 0 13%);
}
.smu-public .smu-card:hover .smu-card-ic { background: var(--smu-deep); color: #FFFFFF; }
.smu-public .smu-card--tint .smu-card-ic { background: rgba(255,255,255,.1); color: var(--smu-hi); }
.smu-public .smu-card--tint:hover .smu-card-ic { background: var(--smu-accent); color: #FFFFFF; }
.smu-public .smu-card h3 { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: clamp(17px, 1.5vw, 21px); }
.smu-public .smu-b-4 .smu-card h3, .smu-public .smu-card--feature h3 { font-size: clamp(21px, 2vw, 27px); }
.smu-public .smu-card:before { display: none; }

/* a corner tab, like the fold on a case file */
.smu-public .smu-card:after {
    content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 24px 24px 0;
    border-color: transparent var(--smu-line-2) transparent transparent;
    transition: border-color var(--smu-mid) var(--smu-ease);
}
.smu-public .smu-card:hover:after { border-right-color: var(--smu-accent); }
.smu-public .smu-card--tint:after { border-right-color: rgba(255,255,255,.16); }
.smu-public .smu-card--tint {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='.45'%3E%3Cpath d='M12 2.8 20 6v6c0 4.6-3.2 7.9-8 9.2-4.8-1.3-8-4.6-8-9.2V6z'/%3E%3Cpath d='M12 7.6l1.3 2.7 3 .4-2.2 2.1.5 3-2.6-1.4-2.6 1.4.5-3-2.2-2.1 3-.4z'/%3E%3C/svg%3E") no-repeat right -40px center / 300px auto,
      var(--smu-abyss);
}
.smu-public .smu-card--tint .smu-card-go { color: var(--smu-hi); }

/* the dark data band: a fine diagonal — a tactical texture, barely there */
.smu-public .smu-section--dark {
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 11px),
      var(--smu-abyss);
}
.smu-public .smu-stat-l { font-family: var(--smu-display); font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.smu-public .smu-stat-ic, .smu-public .smu-stat-go { color: var(--smu-hi); }

.smu-public .smu-res-item { border-left: 3px solid var(--smu-line-2); }
.smu-public .smu-res-item:hover { border-left-color: var(--smu-accent); }

.smu-public .smu-section--raise { background: var(--smu-raise); }

/* ----------------------------------------------------- 20.8 PAGE HEAD   */
.smu-public .smu-page-head {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='.35'%3E%3Cpath d='M12 2.8 20 6v6c0 4.6-3.2 7.9-8 9.2-4.8-1.3-8-4.6-8-9.2V6z'/%3E%3Cpath d='M12 7.6l1.3 2.7 3 .4-2.2 2.1.5 3-2.6-1.4-2.6 1.4.5-3-2.2-2.1 3-.4z'/%3E%3C/svg%3E") no-repeat right 6% center / auto 150%,
      var(--smu-abyss);
    padding-bottom: calc(var(--smu-s6) + 12px);
}
.smu-public .smu-page-head:before { opacity: .5; }
.smu-public .smu-page-head a { color: var(--smu-hi); }
.smu-public .smu-page-head--lift { padding-bottom: calc(var(--smu-s9) + 12px); }
.smu-public .smu-back { border-radius: var(--smu-r-sm); }

/* ------------------------------------------------- 20.9 PANELS & FORMS  */
.smu-public .panel > .panel-heading { font-family: var(--smu-display); font-size: 14px !important; letter-spacing: .1em; }
.smu-public .panel > .panel-heading:after { background: var(--smu-accent); width: 28px; height: 3px; }
.smu-public .panel > .panel-footer { border-radius: 0 0 9px 9px; }

/* ----------------------------------------- 20.10 HIGHLIGHT BOXES        */
/* Warnings, errors and key information must be found before they are read:
   a heavier rail, a light ground of the same hue, a squared corner. */
.smu-public .alert,
.smu-public .smu-alert { border-left-width: 4px; border-radius: var(--smu-r-sm); }
.smu-public .alert-danger,  .smu-public .smu-alert--danger  { background: #FCF2F1; }
.smu-public .alert-warning, .smu-public .smu-alert--warning { background: #FDF6EC; }
.smu-public .alert-success, .smu-public .smu-alert--success { background: #F0F8F4; }
.smu-public .alert-info,    .smu-public .smu-alert--info    { background: #F0F5FD; border-left-color: var(--smu-accent); }
:root[data-theme="dark"] .smu-public .alert-danger,  :root[data-theme="dark"] .smu-public .smu-alert--danger  { background: rgba(192,57,43,.12); }
:root[data-theme="dark"] .smu-public .alert-warning, :root[data-theme="dark"] .smu-public .smu-alert--warning { background: rgba(199,119,0,.12); }
:root[data-theme="dark"] .smu-public .alert-success, :root[data-theme="dark"] .smu-public .smu-alert--success { background: rgba(30,142,90,.12); }
:root[data-theme="dark"] .smu-public .alert-info,    :root[data-theme="dark"] .smu-public .smu-alert--info    { background: rgba(47,111,219,.14); }

.smu-public .smu-notice { --notice: #1F4F9C; border-radius: var(--smu-r-sm); }
:root[data-theme="dark"] .smu-public .smu-notice { --notice: #8FB8FF; }
.smu-public .smu-notice:before { background: var(--notice); }
.smu-public .smu-notice:after { display: none; }
.smu-public .smu-notice__icon { border-radius: 50%; }
.smu-public .smu-notice__label { font-family: var(--smu-display); font-size: 12px; letter-spacing: .14em; }

/* ------------------------------------------------------ 20.11 SIGN-IN   */
.smu-public .smu-auth-brand {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='.3'%3E%3Cpath d='M12 2.8 20 6v6c0 4.6-3.2 7.9-8 9.2-4.8-1.3-8-4.6-8-9.2V6z'/%3E%3Cpath d='M12 7.6l1.3 2.7 3 .4-2.2 2.1.5 3-2.6-1.4-2.6 1.4.5-3-2.2-2.1 3-.4z'/%3E%3C/svg%3E") no-repeat right -90px bottom -60px / 420px auto,
      var(--smu-abyss);
    padding-bottom: calc(var(--smu-s8) + 18px);
}
.smu-public .smu-auth-brand:before { opacity: .45; }
.smu-auth-brand .smu-checker { position: absolute; left: 0; right: 0; bottom: 0; }
.smu-public .smu-auth-brand h2 { font-weight: 500; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.02; max-width: 18ch; }
.smu-public .smu-auth-brand h2 strong { font-weight: 700; color: #FFFFFF; }
.smu-auth-secure {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 6px 12px; border-radius: 3px;
    border: 1px solid rgba(143,184,255,.3);
    font: 700 11.5px/1 var(--smu-display); letter-spacing: .16em; text-transform: uppercase;
    color: var(--smu-hi);
}
.smu-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.smu-auth-points li { display: flex; align-items: center; gap: 10px; color: var(--smu-on-dark-2); font-size: var(--smu-t-sm); }
.smu-auth-points .smu-i { color: var(--smu-hi); }

.smu-public .smu-auth-wrap { border-top: 3px solid var(--smu-accent); }
.smu-public .smu-auth-form h3 { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(24px, 2.2vw, 30px); }
.smu-public .smu-auth .button { border-radius: var(--smu-r-sm); background: var(--smu-abyss); box-shadow: 0 12px 26px -14px rgba(6,17,38,.9); }
.smu-public .smu-auth .button:hover { background: var(--smu-deep); }
:root[data-theme="dark"] .smu-public .smu-auth .button { background: var(--smu-accent); }
.smu-public .smu-auth .button__text { font-family: var(--smu-display); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.smu-public .smu-auth-badge { border-radius: 3px; background: rgba(31,79,156,.07); border-color: rgba(31,79,156,.24); }
.smu-public .smu-auth-role { border-left: 3px solid var(--smu-line-2); }
.smu-public .smu-auth-role:hover { border-left-color: var(--smu-accent); }

/* ------------------------------------------------------ 20.12 ERRORS    */
.smu-public .smu-err__card { border-top: 3px solid var(--smu-accent); }
.smu-public .smu-err__figure {
    flex-direction: column; gap: var(--smu-s3);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 11px), var(--smu-abyss);
}
.smu-public .smu-err__figure:before { opacity: .4; }
.smu-err__tag {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border: 1px solid rgba(143,184,255,.32); border-radius: 3px;
    font: 700 12px/1 var(--smu-display); letter-spacing: .24em; color: var(--smu-hi);
}
.smu-public .smu-err__code { font-family: var(--smu-display); font-weight: 800; letter-spacing: .02em; font-size: clamp(90px, 13vw, 170px); }

/* ------------------------------------------------------ 20.13 FOOTER    */
.smu-public .smu-footer { border-top: 0; }
.smu-footer h4 { color: var(--smu-steel); font-family: var(--smu-display); font-size: 13px; letter-spacing: .18em; }
.smu-footer-contact .smu-i { color: var(--smu-hi); }
.smu-footer-social { display: flex !important; gap: 8px; margin-top: var(--smu-s2) !important; }
.smu-footer-social li { margin: 0; }
.smu-public .smu-footer-social a {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--smu-r-sm);
    color: var(--smu-on-dark-2);
    transition: border-color var(--smu-fast), color var(--smu-fast);
}
.smu-public .smu-footer-social a:hover { border-color: var(--smu-accent); color: #FFFFFF; }
.smu-footer-motto {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 12px/1 var(--smu-display); letter-spacing: .16em; text-transform: uppercase;
    color: var(--smu-on-dark-3);
}
.smu-footer-motto .smu-i { color: var(--smu-hi); }

/* ------------------------------------------------- 20.14 RESPONSIVE     */
@media (max-width: 1023px) {
    .smu-hero-grid { grid-template-columns: 1fr; }
    .smu-hero-seal { display: none; }
    .smu-public .smu-hero--academy { min-height: 620px; }
}
@media (max-width: 899px) {
    .smu-hero--academy .smu-hero-foot { margin-bottom: calc(var(--smu-s7) - 18px); }
    .smu-public .smu-nav.is-over .smu-login { background: var(--smu-abyss) !important; color: #FFFFFF !important; }
}
@media (max-width: 767px) {
    .smu-public .smu-hero--academy { min-height: 0; }
    .smu-hero--academy .smu-hero-media { height: 46%; }
    .smu-hero-social span, .smu-hero-scroll { display: none; }
    .smu-values { gap: 10px 16px; font-size: 12px; }
    .smu-footer-motto { display: none; }
}
@media (max-width: 479px) {
    .smu-values li + li:before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .smu-seal-turn { animation: none !important; }
}
@media print {
    .smu-checker, .smu-hero-seal { display: none !important; }
}

/* ----------------------------------------- 20.15 DUTY DETAIL           */
/* The second pass of police character. Every element here carries
   information or structure — a number to call, a position, a reference —
   rather than ornament, so it reads as an institution's paperwork and
   instruments, not as a costume. */

.smu-public .smu-mono { font-family: var(--smu-mono); font-weight: 500; letter-spacing: .04em; }

/* top line: police and emergency numbers, always visible */
.smu-topline .smu-tl-sos {
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--smu-on-dark);
    padding: 3px 10px 3px 8px; border: 1px solid rgba(143,184,255,.28); border-radius: 3px;
}
.smu-topline .smu-tl-sos a { color: #FFFFFF; font-family: var(--smu-mono); letter-spacing: .06em; }
.smu-topline .smu-tl-sos a:hover { color: var(--smu-hi); }
.smu-tl-sep { color: var(--smu-on-dark-3); }
.smu-tl-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: #4C8DFF; display: block;
    animation: smu-pulse 2.4s ease-out infinite;
}
@keyframes smu-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76,141,255,.6); }
    70%  { box-shadow: 0 0 0 7px rgba(76,141,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,141,255,0); }
}

/* hero foot: the academy's position, read like a dispatch fix */
.smu-hero-coord { display: inline-flex; align-items: center; gap: 10px; }
.smu-hero-coord .smu-i { color: var(--smu-hi); }
.smu-hero-coord .smu-mono { color: var(--smu-on-dark-2); letter-spacing: .08em; }
.smu-hero-place { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); }

/* the seal becomes an instrument: a graduated dial, reticle marks at the
   four bearings, and a slow radar sweep behind the disc */
.smu-hero-seal { position: relative; }
.smu-hero-seal:before {
    content: ""; position: absolute; inset: 4.5%; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(143,184,255,.26) 0deg, rgba(143,184,255,.06) 50deg, transparent 90deg, transparent 360deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 60%, #000 61%);
    mask-image: radial-gradient(circle, transparent 0 60%, #000 61%);
    animation: smu-radar 7s linear infinite;
}
@keyframes smu-radar { to { transform: rotate(360deg); } }
.smu-seal-ticks { fill: none; stroke: rgba(195,205,218,.45); stroke-width: 7; stroke-dasharray: 1.4 15.92; }
.smu-seal-reticle { fill: none; stroke: var(--smu-hi); stroke-width: 2; stroke-linecap: square; }

/* homepage sections are numbered like a training manual: § 01, § 02 … */
.smu-main.is-bleed { counter-reset: smu-sec; }
.smu-main.is-bleed .smu-section .smu-head { counter-increment: smu-sec; }
.smu-main.is-bleed .smu-section .smu-head .smu-kicker:after {
    content: "§ " counter(smu-sec, decimal-leading-zero);
    margin-left: 3px; padding-left: 12px; border-left: 1px solid currentColor;
    font-family: var(--smu-mono); font-weight: 500; letter-spacing: .1em; opacity: .75;
}

/* service cards carry a file reference above the title */
.smu-bento { counter-reset: smu-svc; }
.smu-public .smu-bento > .smu-card { counter-increment: smu-svc; }
.smu-public .smu-bento .smu-card h3:before {
    content: "AKSP-S" counter(smu-svc, decimal-leading-zero);
    display: block; margin-bottom: 8px;
    font: 500 10px/1 var(--smu-mono); letter-spacing: .2em; color: var(--smu-ink-3);
}
.smu-public .smu-bento .smu-card--tint h3:before { color: var(--smu-steel); }

/* the statistics band is a dispatch console: channel numbers and a scan */
.smu-stats { counter-reset: smu-ch; position: relative; overflow: hidden; }
.smu-public .smu-stat { counter-increment: smu-ch; }
.smu-public .smu-stat:before {
    content: "CH-" counter(smu-ch, decimal-leading-zero);
    position: absolute; top: var(--smu-s6); right: var(--smu-s5);
    font: 500 10px/1 var(--smu-mono); letter-spacing: .18em; color: var(--smu-steel); opacity: .8;
}
.smu-stats:before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 16%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(143,184,255,.07), transparent);
    animation: smu-scan-x 6s linear infinite;
}
@keyframes smu-scan-x { to { left: 110%; } }

/* the closing call: the academy's initials in stencil outline behind it */
.smu-public .smu-cta:after {
    content: "AKSP"; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
    font: 800 clamp(160px, 27vw, 430px)/1 var(--smu-display); letter-spacing: .04em;
    color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07);
    white-space: nowrap; pointer-events: none;
}
.smu-cta .smu-shell { z-index: 1; }

/* page heads: viewfinder brackets frame the title */
.smu-public .smu-page-head .smu-shell:before,
.smu-public .smu-page-head .smu-shell:after {
    content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
    border: 0 solid var(--smu-hi); opacity: .55;
}
.smu-public .smu-page-head .smu-shell:before { left: calc(var(--smu-gut) - 18px); top: -8px; border-left-width: 2px; border-top-width: 2px; }
.smu-public .smu-page-head .smu-shell:after  { right: calc(var(--smu-gut) - 18px); bottom: -10px; border-right-width: 2px; border-bottom-width: 2px; }

/* sign-in: an access terminal — status strip, and a scan along the top edge */
.smu-auth-terminal {
    display: flex; align-items: center; justify-content: space-between; gap: var(--smu-s3);
    margin: 0 0 var(--smu-s6); padding-bottom: 12px;
    border-bottom: 1px dashed var(--smu-line-2);
    font: 500 10px/1 var(--smu-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--smu-ink-3);
}
.smu-auth-terminal > span { display: inline-flex; align-items: center; gap: 8px; }
.smu-auth-terminal i {
    width: 7px; height: 7px; border-radius: 50%; background: #1E8E5A; display: block;
    box-shadow: 0 0 0 3px rgba(30,142,90,.16);
}
.smu-public .smu-auth-wrap { position: relative; }
.smu-public .smu-auth-wrap:after {
    content: ""; position: absolute; top: -3px; left: -25%; width: 25%; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #BFD5FF, transparent);
    animation: smu-scan-x 3.6s ease-in-out infinite;
}

@media (max-width: 767px) {
    .smu-hero-place { display: none; }
    .smu-public .smu-stat:before { top: 20px; right: 0; }
}
@media (max-width: 479px) {
    .smu-topline .smu-tl-sos { padding: 2px 8px 2px 6px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
    .smu-hero-seal:before, .smu-stats:before, .smu-public .smu-auth-wrap:after, .smu-tl-pulse { animation: none !important; }
    .smu-stats:before, .smu-public .smu-auth-wrap:after { display: none; }
}

/* ------------------------------------------ 20.16 THE ACADEMY'S OWN FORM */
/* Where the two public sites part ways in STRUCTURE, not only in colour.
   The university shell floats a white quick-action rail over its hero, lays
   its services out as an asymmetric bento, lists its resources in a 3-up
   grid and closes on a centred call. The academy does none of those:

     · the rail becomes a COMMAND BAR — docked, dark, channel-numbered
     · a CANDIDATE'S PATH with rank insignia is added (no university twin)
     · services become an OPERATIONS INDEX — briefing left, procedures right
     · resources become a manual's TABLE OF CONTENTS with dotted leaders
     · the closing call becomes an ENLISTMENT panel with a blank cadet ID
     · inner pages gain a FILE REFERENCE stamp and NUMBERED form sections  */

/* — command bar ------------------------------------------------------- */
.smu-hero--academy .smu-hero-foot { margin-bottom: 0; }
.smu-public .smu-quick { margin: 0; background: var(--smu-abyss); position: relative; z-index: 4; border-bottom: 1px solid rgba(255,255,255,.08); }
.smu-public .smu-quick-grid { border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 0; overflow: visible; }
.smu-public .smu-quick-item {
    background: transparent; color: var(--smu-on-dark);
    border-left: 1px solid rgba(255,255,255,.08); padding: 26px 22px 24px;
}
.smu-public .smu-quick-item:last-child { border-right: 1px solid rgba(255,255,255,.08); }
.smu-public .smu-quick-item:hover { background: rgba(255,255,255,.045); color: #FFFFFF; }
.smu-public .smu-quick-item > .smu-i { color: var(--smu-hi); }
.smu-public .smu-quick-item .smu-quick-text > span { color: var(--smu-on-dark-3); }
.smu-public .smu-quick-item .smu-quick-go { color: var(--smu-hi); }
.smu-public .smu-quick-item:after { content: "CH " counter(smu-unit, decimal-leading-zero); color: var(--smu-steel); font-family: var(--smu-mono); font-weight: 500; font-size: 10px; }
.smu-public .smu-quick-item:hover:after { color: var(--smu-hi); }

/* — the candidate's path ---------------------------------------------- */
.smu-public .smu-path { background: var(--smu-paper); }
.smu-path-steps {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--smu-s5);
}
/* the route between the insignia: a dashed line, like a marked patrol route */
.smu-path-steps:before {
    content: ""; position: absolute; left: 44px; right: 12%; top: 43px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--smu-line-2) 0 10px, transparent 10px 18px);
}
.smu-path-steps > li { position: relative; }
.smu-public .smu-path-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; color: var(--smu-ink); }
.smu-path-badge {
    position: relative; z-index: 1;
    width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%;
    background: var(--smu-surface); border: 2px solid var(--smu-line-2); box-shadow: var(--smu-e2);
    transition: background var(--smu-mid) var(--smu-ease), border-color var(--smu-mid), transform var(--smu-mid) var(--smu-ease);
}
.smu-rank { width: 46px; height: 46px; display: block; }
.smu-rank path { fill: none; stroke: var(--smu-deep); stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; transition: stroke var(--smu-mid); }
.smu-rank .smu-rank__star { fill: var(--smu-hi); stroke: none; }
.smu-path-step--final .smu-path-badge { background: var(--smu-abyss); border-color: var(--smu-accent); }
.smu-public .smu-path-step:hover .smu-path-badge { background: var(--smu-abyss); border-color: var(--smu-abyss); transform: translateY(-4px); }
.smu-public .smu-path-step:hover .smu-rank path { stroke: #FFFFFF; }
.smu-public .smu-path-step:hover .smu-rank .smu-rank__star { fill: var(--smu-hi); }
:root[data-theme="dark"] .smu-public .smu-rank path { stroke: var(--smu-hi); }
.smu-path-n { margin-top: 14px; font: 500 10px/1 var(--smu-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--smu-ink-3); }
.smu-path-n b { color: var(--smu-accent-ink); font-weight: 500; }
.smu-path-t { font: 700 20px/1.1 var(--smu-display); letter-spacing: .02em; text-transform: uppercase; color: var(--smu-ink); }
.smu-path-d { font-size: 12px; line-height: 1.55; color: var(--smu-ink-3); max-width: 32ch; }
.smu-path-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--smu-accent-ink); }
.smu-path-go .smu-i { transition: transform var(--smu-mid) var(--smu-ease); }
.smu-path-step:hover .smu-path-go .smu-i { transform: translateX(4px); }

/* — operations index --------------------------------------------------- */
.smu-ops-grid { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.6fr); gap: var(--smu-s8); align-items: start; }
.smu-ops-brief { position: sticky; top: 96px; }
.smu-ops-brief .smu-head { margin-bottom: var(--smu-s5); }
.smu-ops-note {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--smu-s5);
    padding: 16px 18px; background: var(--smu-surface); border: 1px solid var(--smu-line);
    border-left: 4px solid var(--smu-accent); border-radius: var(--smu-r-sm);
    font-size: 12px; line-height: 1.55; color: var(--smu-ink-2);
}
.smu-ops-note-ic { color: var(--smu-accent-ink); flex: none; margin-top: 1px; }
.smu-ops-list { list-style: none; margin: 0; padding: 0; counter-reset: smu-op; border-top: 2px solid var(--smu-ink); }
.smu-ops-list > li { counter-increment: smu-op; }
.smu-public .smu-ops-item {
    position: relative;
    display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) auto; align-items: center; gap: 18px;
    padding: 20px 10px 20px 0; border-bottom: 1px solid var(--smu-line); color: var(--smu-ink);
    transition: background var(--smu-fast) var(--smu-ease), padding var(--smu-mid) var(--smu-ease);
}
.smu-ops-item:before { content: "S-" counter(smu-op, decimal-leading-zero); font: 500 11px/1 var(--smu-mono); letter-spacing: .16em; color: var(--smu-ink-3); padding-left: 2px; }
.smu-ops-item:after {
    content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
    background: var(--smu-accent); transform: scaleY(0); transform-origin: top;
    transition: transform var(--smu-mid) var(--smu-ease);
}
.smu-public .smu-ops-item:hover { background: var(--smu-surface); padding-left: 14px; color: var(--smu-ink); }
.smu-ops-item:hover:after { transform: scaleY(1); }
.smu-ops-ic {
    width: 44px; height: 50px; display: grid; place-items: center; padding-bottom: 6px;
    background: var(--smu-surface); color: var(--smu-accent-ink);
    -webkit-clip-path: polygon(50% 0, 100% 13%, 100% 56%, 50% 100%, 0 56%, 0 13%);
    clip-path: polygon(50% 0, 100% 13%, 100% 56%, 50% 100%, 0 56%, 0 13%);
    transition: background var(--smu-mid), color var(--smu-mid);
}
.smu-public .smu-ops-item:hover .smu-ops-ic,
.smu-ops-item--key .smu-ops-ic { background: var(--smu-abyss); color: var(--smu-hi); }
.smu-ops-txt b { display: block; font: 700 19px/1.15 var(--smu-display); letter-spacing: .02em; text-transform: uppercase; }
.smu-ops-txt span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--smu-ink-3); }
.smu-ops-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11.5px; font-weight: 650; color: var(--smu-accent-ink); }
.smu-ops-go .smu-i { transition: transform var(--smu-mid) var(--smu-ease); }
.smu-ops-item:hover .smu-ops-go .smu-i { transform: translateX(4px); }

/* — table of contents --------------------------------------------------- */
.smu-index { list-style: none; margin: 0; padding: 0; counter-reset: smu-ix; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--smu-s8); border-top: 2px solid var(--smu-ink); }
.smu-index > li { counter-increment: smu-ix; }
.smu-public .smu-index-item { display: flex; align-items: center; gap: 14px; padding: 17px 2px; border-bottom: 1px solid var(--smu-line); color: var(--smu-ink); font-size: 13px; font-weight: 600; }
.smu-index-code { min-width: 40px; }
.smu-index-code:before { content: "R-" counter(smu-ix, decimal-leading-zero); font: 500 11px/1 var(--smu-mono); letter-spacing: .14em; color: var(--smu-ink-3); }
.smu-index-item > .smu-i:not(.smu-index-go) { color: var(--smu-accent-ink); flex: none; }
.smu-index-label { flex: none; max-width: 70%; }
.smu-index-leader { flex: 1 1 auto; min-width: 20px; border-bottom: 2px dotted var(--smu-line-2); transform: translateY(5px); }
.smu-index-go { color: var(--smu-ink-3); transition: transform var(--smu-mid) var(--smu-ease), color var(--smu-fast); }
.smu-public .smu-index-item:hover { color: var(--smu-accent-ink); }
.smu-index-item:hover .smu-index-go { color: var(--smu-accent-ink); transform: translateX(4px); }
.smu-index-item:hover .smu-index-leader { border-bottom-color: var(--smu-accent); }

/* — enlistment panel with the cadet ID --------------------------------- */
.smu-public .smu-cta--enlist { text-align: left; }
.smu-public .smu-cta--enlist:after { left: 30%; }
.smu-cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--smu-s8); align-items: center; }
.smu-public .smu-cta--enlist p { margin-left: 0; margin-right: 0; }
.smu-public .smu-cta--enlist .smu-cta-actions { justify-content: flex-start; }
.smu-public .smu-cta--enlist .smu-kicker { color: var(--smu-hi); }

.smu-idcard-wrap { display: flex; justify-content: center; }
.smu-idcard {
    position: relative; overflow: hidden;
    width: min(410px, 100%); aspect-ratio: 1.586 / 1;  /* ID-1, the size of every badge card */
    display: flex; flex-direction: column;
    background: #F3F6FA; color: #0A1424; border-radius: 14px;
    box-shadow: 0 44px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12);
    transform: rotate(-4deg); transition: transform var(--smu-slow) var(--smu-ease);
}
.smu-idcard-wrap:hover .smu-idcard { transform: rotate(0deg) translateY(-6px); }
.smu-idcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--smu-abyss); }
.smu-idcard .smu-logo { --smu-logo-ring: #C3CDDA; --smu-logo-tile: #1F4F9C; --smu-logo-glyph: #FFFFFF; display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.smu-idcard .smu-logo__mark { width: 30px; height: 30px; flex: none; display: block; }
.smu-idcard .smu-logo__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.smu-public .smu-idcard .smu-logo__name { font-size: 18px !important; color: #FFFFFF; }
.smu-idcard .smu-logo__sub { margin-top: 4px; font-size: 6.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; }
.smu-idcard-kind { font: 500 9px/1.2 var(--smu-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--smu-hi); text-align: right; }
.smu-idcard-body { flex: 1 1 auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 14px 16px 8px; align-items: start; }
.smu-idcard-photo { height: 100px; display: grid; place-items: end center; overflow: hidden; border-radius: 6px; background: #DCE3EC; border: 1px solid #CAD3E0; }
.smu-idcard-photo svg { width: 76%; fill: #9AA8BD; display: block; }
.smu-idcard-fields { margin: 0; display: grid; gap: 1px; }
.smu-idcard-fields dt { margin-top: 6px; font: 500 8.5px/1 var(--smu-mono); letter-spacing: .16em; text-transform: uppercase; color: #56637A; }
.smu-idcard-fields dt:first-child { margin-top: 0; }
.smu-idcard-fields dd { margin: 0; font: 700 15px/1.2 var(--smu-display); letter-spacing: .04em; text-transform: uppercase; color: #0A1424; }
.smu-idcard-fields dd.smu-mono { font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.smu-idcard-fields dd i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #2F6FDB; vertical-align: 1px; animation: smu-pulse 2.4s ease-out infinite; }
.smu-idcard-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.smu-idcard-chip {
    width: 36px; height: 27px; border-radius: 5px;
    background:
      linear-gradient(90deg, transparent 32%, rgba(10,20,36,.25) 32% 34%, transparent 34% 66%, rgba(10,20,36,.25) 66% 68%, transparent 68%),
      linear-gradient(0deg, transparent 46%, rgba(10,20,36,.25) 46% 54%, transparent 54%),
      linear-gradient(135deg, #D5DCE6, #9AA8BD);
}
.smu-idcard-code {
    width: 150px; height: 24px; opacity: .85;
    background: repeating-linear-gradient(90deg, #0A1424 0 2px, transparent 2px 4px, #0A1424 4px 5px, transparent 5px 8px, #0A1424 8px 11px, transparent 11px 13px);
}
.smu-idcard .smu-checker { --smu-chk: 4px; height: 12px; --smu-chk-a: #FFFFFF; --smu-chk-b: #14336B; }

/* — inner pages: file reference stamp, numbered form sections ---------- */
.smu-page-ref {
    margin-left: auto;
    font: 500 10px/1 var(--smu-mono); letter-spacing: .16em; color: var(--smu-steel);
    padding: 6px 10px; border: 1px dashed rgba(143,184,255,.32); border-radius: 3px;
}
.smu-main:not(.is-bleed) { counter-reset: smu-form; }
.smu-public .smu-main:not(.is-bleed) .panel > .panel-heading { counter-increment: smu-form; }
.smu-public .smu-main:not(.is-bleed) .panel > .panel-heading:before {
    content: counter(smu-form, decimal-leading-zero);
    display: inline-block; min-width: 26px; margin-right: 10px; padding: 5px 6px; text-align: center;
    background: var(--smu-abyss); color: #FFFFFF; border-radius: 3px;
    font: 500 10px/1 var(--smu-mono); letter-spacing: .06em; vertical-align: 1px;
}
:root[data-theme="dark"] .smu-public .smu-main:not(.is-bleed) .panel > .panel-heading:before { background: var(--smu-accent); }

/* — responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
    .smu-public .smu-quick-item { border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 1023px) {
    .smu-path-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--smu-s7); }
    .smu-path-steps:before { display: none; }
    .smu-ops-grid { grid-template-columns: 1fr; gap: var(--smu-s6); }
    .smu-ops-brief { position: static; }
    .smu-cta-grid { grid-template-columns: 1fr; }
    .smu-idcard { transform: rotate(-2deg); }
}
@media (max-width: 767px) {
    .smu-index { grid-template-columns: 1fr; }
    .smu-page-ref { display: none; }
}
@media (max-width: 599px) {
    .smu-public .smu-ops-item { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; }
    .smu-ops-item:before { display: none; }
    .smu-ops-go { grid-column: 2; }
}
@media (max-width: 479px) {
    .smu-path-steps { grid-template-columns: 1fr; }
    .smu-idcard-body { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
    .smu-idcard-photo { height: 82px; }
    .smu-idcard-code { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
    .smu-idcard { transform: none !important; }
    .smu-idcard-fields dd i { animation: none; }
}

/* ------------------------------------------ 20.17 DIRECTIVE BOXES      */
/* Every message box on the public side — `.message-*` (most forms),
   `.isa_*`, Bootstrap `.alert-*`, the flash `.smu-alert` and `.smu-notice` —
   is set as an official directive: a dark command band down the left edge
   carrying the type's mark, a chequer at its foot, and a bulletin heading
   with a dispatch code. One rule set, so a box raised by any view or by an
   AJAX partial takes it without that view changing.

   Type map (the legacy class names are used loosely, so they are mapped by
   what the boxes actually say):
     information  .message-success · .isa_info · .alert-info · .alert-default
                  .smu-notice · .smu-alert--info          shield     INF
     caution      .message-warning · .isa_warning · .alert-warning   WRN
     alert        .message-danger · .isa_error · .alert-danger       ALR
     confirmed    .smu-msg--ok · .isa_success · .alert-success       OK

   `display` is never set here: several boxes start with the `hidden`
   attribute and are revealed by script, and a display value would defeat it. */
.smu-public .message,
.smu-public .isa_info, .smu-public .isa_success, .smu-public .isa_warning, .smu-public .isa_error,
.smu-public .alert,
.smu-public .smu-notice {
    --d-band: var(--smu-abyss);
    --d-ink:  var(--smu-deep);
    --d-ic:   var(--smu-hi);
    --d-glyph: "\f132";      /* fa-shield */
    --d-tag:  "INF";
    position: relative; overflow: hidden;
    background: var(--smu-surface) !important; color: var(--smu-ink-2) !important;
    border: 1px solid var(--smu-line) !important; border-left: 0 !important;
    border-radius: var(--smu-r-sm) !important;
    box-shadow: var(--smu-e1);
    padding: 16px 20px 16px 80px !important; margin: 12px 0 18px;
    min-height: 66px;
    font-size: 12.5px !important; line-height: 1.62; text-align: left;
}
/* the command band */
.smu-public .message:before,
.smu-public .isa_info:before, .smu-public .isa_success:before, .smu-public .isa_warning:before, .smu-public .isa_error:before,
.smu-public .alert:before,
.smu-public .smu-notice:before {
    content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 58px; z-index: 0;
    background:
      conic-gradient(rgba(255,255,255,.85) 25%, transparent 0 50%, rgba(255,255,255,.85) 0 75%, transparent 0) left bottom / 8px 8px repeat-x,
      var(--d-band);
}
/* the type's mark on it */
.smu-public .message:after,
.smu-public .isa_info:after, .smu-public .isa_success:after, .smu-public .isa_warning:after, .smu-public .isa_error:after,
.smu-public .alert:after,
.smu-public .smu-notice:after {
    content: var(--d-glyph); display: block; position: absolute; left: 0; top: 17px; width: 58px; z-index: 1;
    font: normal 21px/1 FontAwesome; text-align: center; color: var(--d-ic);
    -webkit-font-smoothing: antialiased;
}

/* One format for every type, exactly as on the information box: the same
   navy band, heading and body. The type is told by the band's mark and the
   code tag alone (INF / WRN / ALR / OK). */
.smu-public .message-warning, .smu-public .isa_warning, .smu-public .alert-warning, .smu-public .smu-alert--warning {
    --d-glyph: "\f071"; --d-tag: "WRN";
}
.smu-public .message-danger, .smu-public .isa_error, .smu-public .alert-danger, .smu-public .smu-alert--danger {
    --d-glyph: "\f06a"; --d-tag: "ALR";
}
.smu-public .smu-msg--ok, .smu-public .isa_success, .smu-public .alert-success, .smu-public .smu-alert--success {
    --d-glyph: "\f00c"; --d-tag: "OK";
}

:root[data-theme="dark"] .smu-public .message,
:root[data-theme="dark"] .smu-public .isa_info, :root[data-theme="dark"] .smu-public .isa_success,
:root[data-theme="dark"] .smu-public .isa_warning, :root[data-theme="dark"] .smu-public .isa_error,
:root[data-theme="dark"] .smu-public .alert, :root[data-theme="dark"] .smu-public .smu-notice { --d-ink: #8FB8FF; }
:root[data-theme="dark"] .smu-public .message-warning, :root[data-theme="dark"] .smu-public .isa_warning,
:root[data-theme="dark"] .smu-public .alert-warning, :root[data-theme="dark"] .smu-public .alert-danger,
:root[data-theme="dark"] .smu-public .alert-success, :root[data-theme="dark"] .smu-public .alert-info { background: var(--smu-surface) !important; }

/* content sits above the band layers */
.smu-public .message > *, .smu-public .alert > *,
.smu-public .isa_info > *, .smu-public .isa_success > *, .smu-public .isa_warning > *, .smu-public .isa_error > * { position: relative; z-index: 2; }

/* the bulletin heading */
.smu-public .message > h4, .smu-public .message > h5, .smu-public .message > .box-heading,
.smu-public .alert > h4, .smu-public .alert > h5, .smu-public .smu-alert-body > h4,
.smu-public .isa_info > h4, .smu-public .isa_warning > h4, .smu-public .isa_error > h4, .smu-public .isa_success > h4 {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 9px !important; padding: 0 0 9px !important;
    border-bottom: 1px dashed var(--smu-line-2);
    font: 700 15.5px/1.2 var(--smu-display) !important; letter-spacing: .08em; text-transform: uppercase;
    color: var(--d-ink) !important;
}
.smu-public .message > h4:after, .smu-public .message > h5:after, .smu-public .message > .box-heading:after,
.smu-public .alert > h4:after, .smu-public .alert > h5:after, .smu-public .smu-alert-body > h4:after,
.smu-public .isa_info > h4:after, .smu-public .isa_warning > h4:after, .smu-public .isa_error > h4:after, .smu-public .isa_success > h4:after {
    content: "AKSP · " var(--d-tag);
    flex: none; padding: 4px 7px; border: 1px solid var(--smu-line-2); border-radius: 3px;
    font: 500 9.5px/1 var(--smu-mono); letter-spacing: .16em; color: var(--smu-ink-3);
}
.smu-public .message p, .smu-public .alert p,
.smu-public .isa_info p, .smu-public .isa_warning p, .smu-public .isa_error p, .smu-public .isa_success p { margin: 0 0 6px; color: var(--smu-ink-2); }
.smu-public .message p:last-child, .smu-public .alert p:last-child { margin-bottom: 0; }
.smu-public .message b, .smu-public .message strong { color: var(--smu-ink); }

/* boxes that bring their own icon: the band's mark replaces it */
.smu-public .isa_info > .fa:first-child, .smu-public .isa_warning > .fa:first-child,
.smu-public .isa_error > .fa:first-child, .smu-public .isa_success > .fa:first-child,
.smu-public .smu-alert .smu-alert-ic,
.smu-public .smu-notice__icon { display: none; }

/* .smu-notice: its label becomes the bulletin heading */
.smu-public .smu-notice { padding-left: 80px !important; }
.smu-public .smu-notice .smu-notice__body { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.smu-public .smu-notice__label {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--smu-line-2);
    font: 700 15px/1.2 var(--smu-display) !important; letter-spacing: .08em !important; color: var(--d-ink) !important;
}
.smu-public .smu-notice__label:after {
    content: "AKSP · " var(--d-tag);
    padding: 4px 7px; border: 1px solid var(--smu-line-2); border-radius: 3px;
    font: 500 9.5px/1 var(--smu-mono); letter-spacing: .16em; color: var(--smu-ink-3);
}
.smu-public .smu-notice p { font-size: 12.5px; }

/* flash alerts keep their dismiss control clear of the text */
.smu-public .smu-alert { padding-right: 16px !important; }
.smu-public .alert-dismissible .close { position: relative; z-index: 3; }

@media (max-width: 479px) {
    .smu-public .message, .smu-public .alert, .smu-public .smu-notice,
    .smu-public .isa_info, .smu-public .isa_success, .smu-public .isa_warning, .smu-public .isa_error { padding-left: 62px !important; }
    .smu-public .message:before, .smu-public .alert:before, .smu-public .smu-notice:before,
    .smu-public .isa_info:before, .smu-public .isa_success:before, .smu-public .isa_warning:before, .smu-public .isa_error:before { width: 44px; }
    .smu-public .message:after, .smu-public .alert:after, .smu-public .smu-notice:after,
    .smu-public .isa_info:after, .smu-public .isa_success:after, .smu-public .isa_warning:after, .smu-public .isa_error:after { width: 44px; font-size: 17px; }
    .smu-public .message > h4:after, .smu-public .message > h5:after, .smu-public .message > .box-heading:after,
    .smu-public .smu-notice__label:after { display: none; }
}

/* ------------------------------------------ 20.18 PAGE HEAD, FLUSH     */
/* The base rule pulls the page head up against the nav only when it is
   :first-child of <main>. Many views emit their own <link>/<script>/<style>
   tags before it, which left a band of paper between the nav and the head.
   This matches the head whenever nothing that RENDERS comes before it. */
/* Bootstrap modals and [hidden] blocks take no room, so they do not count. */
.smu-main:not(.is-bleed) > .smu-page-head:not(:is(div:not(.modal):not([hidden]), section:not([hidden]), form, p, ul, ol, table, h1, h2, h3, h4, aside, nav, article, header) ~ .smu-page-head) {
    margin-top: calc(var(--smu-s7) * -1);
}

/* ------------------------------------------ 20.19 THE CROSSHAIR CURSOR */
/* Public side only (scoped to .smu-public), and only where a pointer is
   precise enough for it to mean anything. Two drawn cursors, both with a
   white halo so they read on paper and on the navy bands alike, hotspot at
   the exact centre (16 16):
     · aim  — the resting crosshair
     · lock — over anything clickable: brackets close in, the ring fills
   Text fields keep the I-beam and disabled controls keep not-allowed, so
   typing, selecting and "can I press this?" stay as familiar as before.
   Each declaration falls back to a native cursor if the image fails. */
@media (pointer: fine) {
    .smu-public {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cg stroke='%23fff' stroke-width='3.6' stroke-opacity='.92'%3E%3Cpath d='M16 2.5v8M16 21.5v8M2.5 16h8M21.5 16h8'/%3E%3Ccircle cx='16' cy='16' r='6.5'/%3E%3C/g%3E%3Cg stroke='%2314336B' stroke-width='1.6'%3E%3Cpath d='M16 2.5v8M16 21.5v8M2.5 16h8M21.5 16h8'/%3E%3Ccircle cx='16' cy='16' r='6.5'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.7' fill='%232F6FDB' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair;
    }
    .smu-public a[href], .smu-public button:not(:disabled), .smu-public [role="button"],
    .smu-public label[for], .smu-public select:not(:disabled), .smu-public summary,
    .smu-public input[type="checkbox"]:not(:disabled), .smu-public input[type="radio"]:not(:disabled),
    .smu-public input[type="submit"]:not(:disabled), .smu-public input[type="button"]:not(:disabled),
    .smu-public input[type="file"]:not(:disabled),
    .smu-public .btn:not(.disabled), .smu-public [data-toggle], .smu-public [onclick],
    .smu-public .smu-auth-role, .smu-public .dropzone, .smu-public .select2-selection,
    .smu-public .select2-results__option {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cg stroke='%23fff' stroke-width='3.6' stroke-opacity='.92'%3E%3Cpath d='M4 9.5V4h5.5M22.5 4H28v5.5M28 22.5V28h-5.5M9.5 28H4v-5.5'/%3E%3Cpath d='M16 8v4M16 20v4M8 16h4M20 16h4'/%3E%3Ccircle cx='16' cy='16' r='5.5'/%3E%3C/g%3E%3Cg stroke='%232F6FDB' stroke-width='1.8'%3E%3Cpath d='M4 9.5V4h5.5M22.5 4H28v5.5M28 22.5V28h-5.5M9.5 28H4v-5.5'/%3E%3C/g%3E%3Cg stroke='%2314336B' stroke-width='1.6'%3E%3Cpath d='M16 8v4M16 20v4M8 16h4M20 16h4'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='5.5' fill='%232F6FDB' fill-opacity='.22' stroke='%232F6FDB' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.8' fill='%23fff' stroke='%2314336B' stroke-width='1'/%3E%3C/svg%3E") 16 16, pointer;
    }
    .smu-public input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    .smu-public textarea, .smu-public [contenteditable="true"] {
        cursor: text;
    }
    .smu-public :disabled, .smu-public .disabled, .smu-public [aria-disabled="true"] {
        cursor: not-allowed;
    }
    /* the password peek and similar inline helpers keep their own cue */
    .smu-public .smu-auth-toggle { cursor: help; }
}

/* ------------------------------------------ 20.20 TOASTS (toastr)      */
/* The pop-up notifications raised by toastr.error / success / info /
   warning, dressed as the same directive as the in-page boxes (20.17): white
   card, navy command band with the type's mark and a chequer at its foot,
   bulletin title with a dispatch code, the message beneath, and a patrol-
   blue countdown bar.

   toastr's stylesheet is linked AFTER this one (end of _Layout, and inside
   Login.cshtml) and forces its icon images with !important, so every rule
   here is one id deeper (.smu-public #toast-container …) to win cleanly. */
.smu-public #toast-container.toast-top-right { top: 64px; right: 16px; }
.smu-public #toast-container > .toast {
    --d-glyph: "\f132"; --d-tag: "INF";
    position: relative; overflow: hidden;
    width: 360px; max-width: calc(100vw - 32px);
    margin: 0 0 10px; padding: 14px 40px 16px 76px;
    background: var(--smu-surface) !important; background-image: none !important;
    color: var(--smu-ink-2);
    border: 1px solid var(--smu-line); border-radius: var(--smu-r-sm);
    box-shadow: 0 22px 44px -18px rgba(6,17,38,.55), 0 4px 10px -4px rgba(6,17,38,.25);
    opacity: 1; font-family: var(--smu-font);
    animation: smu-toast-in var(--smu-mid) var(--smu-ease) both;
}
.smu-public #toast-container > .toast:hover { box-shadow: 0 26px 50px -18px rgba(6,17,38,.62), 0 4px 10px -4px rgba(6,17,38,.25); opacity: 1; cursor: inherit; }
@keyframes smu-toast-in { from { transform: translateX(24px); } to { transform: none; } }

.smu-public #toast-container > .toast-error   { --d-glyph: "\f06a"; --d-tag: "ALR"; }
.smu-public #toast-container > .toast-warning { --d-glyph: "\f071"; --d-tag: "WRN"; }
.smu-public #toast-container > .toast-success { --d-glyph: "\f00c"; --d-tag: "OK"; }

/* command band + mark */
.smu-public #toast-container > .toast:before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 56px;
    background:
      conic-gradient(rgba(255,255,255,.85) 25%, transparent 0 50%, rgba(255,255,255,.85) 0 75%, transparent 0) left bottom / 8px 8px repeat-x,
      var(--smu-abyss);
}
.smu-public #toast-container > .toast:after {
    content: var(--d-glyph); position: absolute; left: 0; top: 16px; width: 56px;
    font: normal 20px/1 FontAwesome; text-align: center; color: var(--smu-hi);
}

.smu-public #toast-container .toast-title {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--smu-line-2);
    font: 700 15px/1.2 var(--smu-display); letter-spacing: .08em; text-transform: uppercase;
    color: var(--smu-deep);
}
.smu-public #toast-container .toast-title:after {
    content: "AKSP · " var(--d-tag); flex: none;
    padding: 3px 6px; border: 1px solid var(--smu-line-2); border-radius: 3px;
    font: 500 9px/1 var(--smu-mono); letter-spacing: .14em; color: var(--smu-ink-3);
}
.smu-public #toast-container .toast-message { font-size: 13px; line-height: 1.5; color: var(--smu-ink-2); word-wrap: break-word; }
.smu-public #toast-container .toast-message a { color: var(--smu-accent-ink); text-decoration: underline; }

.smu-public #toast-container .toast-close-button {
    position: absolute; top: 9px; right: 10px; z-index: 2;
    width: 24px; height: 24px; display: grid; place-items: center; float: none;
    border-radius: 3px; color: var(--smu-ink-3); opacity: 1; text-shadow: none;
    font: 400 18px/1 var(--smu-font);
}
.smu-public #toast-container .toast-close-button:hover { background: var(--smu-sunk); color: var(--smu-ink); }

.smu-public #toast-container .toast-progress {
    left: 56px; right: 0; bottom: 0; height: 3px; opacity: 1;
    background: var(--smu-accent);
}

:root[data-theme="dark"] .smu-public #toast-container > .toast { border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .smu-public #toast-container .toast-title { color: var(--smu-hi); }

@media (max-width: 479px) {
    .smu-public #toast-container.toast-top-right { top: 56px; right: 8px; left: 8px; }
    .smu-public #toast-container > .toast { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .smu-public #toast-container > .toast { animation: none; }
}