/* ============================================================================
   build.css — Baker University Slate branding
   ----------------------------------------------------------------------------
   This is the production stylesheet pasted into Slate's Branding Editor AND
   the stylesheet the staging page loads. One file, no flattening step, so the
   two can never drift apart.

   It contains no image references, which is what makes that possible: the only
   asset (the logo) is an <img> in the markup, not a CSS background.

   Structure (cascade order):
     1. Design tokens
     2. Minimal reset          — deliberately scoped; see the note in that section
     3. Base typography
     4. Layout                 — the Slate content region
     5. Components             — site-header, site-footer
     6. Slate UI overrides     — elements Slate renders itself

   Retuning brand color, type or spacing means editing tokens in section 1.
   Everything below reads from them.
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------
   The design Baker approved on 2026-10-13: gradient header, solid orange
   footer, brand-orange buttons with black labels, black replacing navy
   throughout.

   Every value here has been checked for contrast, and the notes record which
   ones were constrained by that rather than chosen freely. Full table in
   README.md; the two that matter most:

     black        on Baker Orange #F4771D  =  7.5:1   buttons, footer, tabs
     white        on Baker Orange #F4771D  =  2.8:1   — fails AA, not used
     Baker Orange on white                 =  2.8:1   — fails AA, never text
     Autumn Maple #BC421B on white         =  5.34:1  links in content
   ============================================================================ */

:root {

    /* Brand */
    --color-orange:       #F4771D;   /* Cadmium Orange — header, footer, accents */
    --color-orange-deep:  #BC421B;   /* Autumn Maple — primary call to action */
    --color-black:        #000000;   /* replaces navy everywhere it appeared */
    --color-white:        #FFFFFF;
    --color-tint:         #F2F2F2;   /* neutral hover surface */

    /* Surfaces & text */
    --color-text-body:    var(--color-black);
    --color-text-heading: var(--color-black);
    --color-text-on-dark: var(--color-black);
    /* The header and footer are themed separately so each can carry the text
       colour its own background needs. */
    --color-text-on-header: var(--color-text-on-dark);
    --color-text-on-footer: var(--color-text-on-dark);
    --color-link:         var(--color-orange-deep);
    --color-bg-page:      var(--color-white);
    --color-bg-header:    var(--color-orange);
    --color-bg-footer:    var(--color-orange);
    /* Buttons. Brand orange with a black label, as Baker asked on 2026-10-11. */
    --color-button-bg:    var(--color-orange);
    --color-button-text:  var(--color-black);
    /* Header gradient, approved 2026-10-13. Sampled across the top of Baker's
       BU26-BG-TIBC-O-9X6-Gradient artwork (2026-10-05), amber to red. */
    --gradient-header: linear-gradient(90deg,
        #FE9401 0%, #FD8F05 12.5%, #FA890A 25%, #F47D0F 37.5%, #E66011 50%,
        #D8440F 62.5%, #CA290A 75%, #C21404 87.5%, #BE0601 100%);
    --color-divider:      rgba(0, 0, 0, 0.3);

    /* Interactive edges. WCAG 1.4.11 wants 3:1 against the adjacent colour for
       control borders and focus indicators, so these are not decorative values:
         #595959 on white  =  7.0:1
         black   on white  = 21.0:1
         black   on orange =  7.5:1
       A light grey hairline or an orange focus ring would both fail — orange on
       white is only 2.8:1. */
    --color-border-input: #595959;
    --color-focus-ring:   var(--color-black);

    /* Typography — both families are Google Fonts and match the brand guide. */
    --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
    --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Type scale */
    --fz-display:   3rem;
    --fz-h1:        2.25rem;
    --fz-h2:        1.75rem;
    --fz-h3:        1.25rem;
    --fz-body:      1.125rem;    /* 18px — the site's body size */
    --fz-ui:        1rem;        /* 16px — footer links, utility text */
    --fz-lede:      1.25rem;     /* 20px — intro paragraph under a page title */
    --fz-small:     0.875rem;
    --fz-legal:     0.8125rem;

    --lh-tight:     1.15;
    --lh-snug:      1.35;
    --lh-normal:    1.667;   /* 30px on 18px, as the site sets it */

    --letter-spacing-label: 0.06em;

    /* Spacing */
    --space-2xs:  0.25rem;
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   1.5rem;
    --space-lg:   2.5rem;
    --space-xl:   4rem;
    --space-2xl:  5rem;

    /* Layout */
    --max-width-content:  1280px;
    --max-width-form:     780px;   /* forms, events, decision letters */
    --max-width-wide:     1120px;  /* checklist/portal pages with a sidebar */
    --content-pad-x:      1.25rem;
    --content-pad-x-lg:   2.5rem;

    --header-height:      96px;
    --header-height-sm:   72px;
    --logo-height:        52px;
    --logo-height-sm:     40px;

    /* Rounded, not square — buttons and tabs are pills, inputs take the
       softened radius. */
    --radius-pill:        9999px;
    --radius-sm:          8px;
    --transition-fast:    150ms ease;
}


/* ============================================================================
   2. MINIMAL RESET (scoped on purpose)
   ----------------------------------------------------------------------------
   A full modern reset is too aggressive for Slate. Universal `margin: 0` and
   `list-style: none` break Slate's own form rendering, checklist and menus,
   which we do not control and cannot re-style exhaustively. This is the safe
   subset: box-sizing, media defaults, motion preferences, and a screen-reader
   utility that doubles as an alias for Slate's own .fsStyleSROnly.
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.site-header svg,
.site-footer svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.visually-hidden,
.fsStyleSROnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard users must be able to jump past the header on every Slate page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* One visible focus treatment for everything, including Slate's own controls.
   The :focus rule is the fallback; :focus-visible then removes the ring for
   mouse users in browsers that support it. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* One ring colour works everywhere here: black is 21:1 on the white content
   area and 7.5:1 on the orange bands, both well clear of the 3:1 that WCAG
   1.4.11 requires of a focus indicator. An orange ring would have failed on
   white at 2.8:1. */


/* ============================================================================
   3. BASE TYPOGRAPHY
   ============================================================================ */

body {
    margin: 0;
    background-color: var(--color-bg-page);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: var(--fz-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings inside Slate content get the serif treatment, matching the site.
   Scoped to #content and our own chrome so Slate's UI chrome is left alone. */
#content h1,
#content h2,
#content h3,
.slate-form-area__heading h1 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    font-weight: 400;
    line-height: var(--lh-tight);
}

#content h1,
.slate-form-area__heading h1 {
    font-size: clamp(2rem, 1.6rem + 1.4vw, var(--fz-h1));
}

#content h2 {
    font-size: var(--fz-h2);
}

#content h3 {
    font-size: var(--fz-h3);
}


/* ============================================================================
   4. LAYOUT — the Slate content region
   ----------------------------------------------------------------------------
   Slate injects every page it renders (forms, events, portal pages, the
   application checklist, decision letters) inside #content. This wrapper gives
   all of them the same width, padding and vertical rhythm.

   build.xslt's inline <style> — which is Slate's own, kept verbatim — also sets
   #content { padding: 15px }. We layer on top of that rather than fight it.
   ============================================================================ */

.container,
.site-header__inner,
.site-footer__inner,
.slate-form-area__inner {
    width: 100%;
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--content-pad-x);
}

@media (min-width: 1024px) {
    .container,
    .site-header__inner,
    .site-footer__inner,
    .slate-form-area__inner {
        padding-inline: var(--content-pad-x-lg);
    }
}

.slate-form-area {
    background-color: var(--color-bg-page);
    padding-block: var(--space-xl);
    min-height: 55vh;
}

/* The wrapper is the same container as the header and footer, so Slate content
   starts on the same left gutter as the logo — which is how bakeru.edu lines up
   its own interior pages. The reading measure is applied to #content inside it
   rather than by centering a narrower wrapper, which would leave the content
   floating off the chrome's grid. */

/* Slate's own inline <style> in build.xslt sets #content { padding: 15px }.
   Rather than fight it, override it deterministically so all gutters come from
   the wrapper and staging matches production to the pixel. */
.slate-form-area #content {
    padding: 0;
}

.slate-form-area__heading,
.slate-form-area #content {
    max-width: var(--max-width-form);
}

/* Checklist and portal pages render a #side / #main two-column layout, subtabs
   or a fixed table. At the form measure those get cramped, so widen when one is
   present. Browsers without :has() keep the form measure — tighter than ideal,
   never broken. */
.slate-form-area #content:has(#side),
.slate-form-area #content:has(ul.subtabs),
.slate-form-area #content:has(table.fixed) {
    max-width: var(--max-width-wide);
}

.slate-form-area__heading {
    margin-bottom: var(--space-lg);
}

.slate-form-area__lede {
    color: var(--color-text-body);
    font-size: var(--fz-lede);
    line-height: var(--lh-snug);
    margin-top: var(--space-xs);
    max-width: 62ch;
}


/* ============================================================================
   5. COMPONENTS — site-header
   ----------------------------------------------------------------------------
   Orange bar, logo only. The live site's mega-menu is deliberately not ported:
   it depends on the site's JavaScript, weighs ~166KB of markup on its own, and
   every link in it leads away from the form the applicant is in the middle of.
   ============================================================================ */

.site-header {
    background-color: var(--color-bg-header);
    position: relative;
    z-index: 10;
}

/* Gradient header. The logo sits on the amber end, where black is 9.2:1; the
   red end carries no content, which is the only reason this works — black on
   #BE0601 is ~3.2:1 and would fail for anything placed there. The footer stays
   solid orange for the same reason: its text spans the full width. Solid
   orange stays underneath as the fallback colour. */
.site-header {
    background-image: var(--gradient-header);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--header-height);
}

/* The brand link wraps only an image, so it normally shows no text — but if
   the logo ever fails to load, the alt text must still be legible on the band
   rather than falling back to the browser's default link blue. */
.site-header a,
.site-header a:link,
.site-header a:visited {
    color: var(--color-text-on-header);
    text-decoration: none;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity var(--transition-fast);
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    opacity: 0.8;
}

.site-header__logo {
    height: var(--logo-height);
    width: auto;
}

@media (max-width: 640px) {
    .site-header__inner {
        min-height: var(--header-height-sm);
    }
    .site-header__logo {
        height: var(--logo-height-sm);
    }
}


/* ============================================================================
   5. COMPONENTS — site-footer
   ----------------------------------------------------------------------------
   Mirrors bakeru.edu's footer: brand + social, contact, utility links, the
   non-discrimination statement, and a legal row. Flat orange, no background
   image — which is why this stylesheet has no url() references at all.
   ============================================================================ */

.site-footer {
    background-color: var(--color-bg-footer);
    color: var(--color-text-on-footer);
    font-size: var(--fz-ui);
    line-height: var(--lh-snug);
}

.site-footer__inner {
    padding-block: var(--space-xl) var(--space-lg);
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
    color: var(--color-text-on-footer);
    text-decoration: none;
}

/* Text colour never changes on hover — one value per band is the only one with
   reliable contrast on it. Only the underline changes state. */
.site-footer a:hover,
.site-footer a:focus-visible {
    text-decoration: underline;
}

.site-footer__top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    align-items: start;
}

/* ---- Brand + social ---- */

.site-footer__brand {
    display: inline-flex;
    line-height: 0;
}

.site-footer__logo {
    height: var(--logo-height);
    width: auto;
}

.site-footer__social-label {
    margin: var(--space-md) 0 var(--space-xs);
    font-size: var(--fz-ui);
}

.site-footer__social ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-text-on-footer);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* The icons sit on the orange band, so they are black at rest — a white icon
   would be 2.8:1 against orange and fail WCAG 1.4.11's 3:1 for non-text. On
   hover the pair inverts to an orange glyph in a black disc, 7.5:1. */
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    background-color: var(--color-black);
    color: var(--color-orange);
    text-decoration: none;
}

/* ---- Contact ---- */

.site-footer__contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-md);
}

.site-footer__contact li {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.site-footer__contact-label {
    font-weight: 700;
}

.site-footer__contact a {
    text-decoration: underline;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    text-decoration: none;
}

/* ---- Utility links ---- */

.site-footer__utility ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-md);
}

.site-footer__utility a {
    font-weight: 700;
}

/* List links are discrete targets, not inline prose, so give them enough
   height to satisfy WCAG 2.5.8 (24px minimum) on touch screens. */
.site-footer__utility a,
.site-footer__legal a,
.site-footer__contact a {
    display: inline-block;
    padding-block: 4px;
}

/* ---- Statement + legal ---- */

.site-footer__statement {
    margin: var(--space-xl) 0 var(--space-lg);
    font-size: var(--fz-small);
    font-style: italic;
    line-height: var(--lh-snug);
    max-width: 90ch;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-divider);
}

.site-footer__copyright {
    margin: 0;
    font-size: var(--fz-small);
}

.site-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fz-small);
}

.site-footer__legal a {
    font-weight: 600;
    text-decoration: underline;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    text-decoration: none;
}


/* ============================================================================
   6. SLATE UI OVERRIDES
   ----------------------------------------------------------------------------
   Rules below style elements Slate renders itself, not our chrome: forms, the
   application and financial aid checklists, the file uploader, the application
   menu sidebar, event registration, decision letters.

   Most of these are carried over from the standard Slate build.css and
   recolored to Baker's palette. They are known fixes for Slate's own markup, so
   if a future Slate release breaks one, comment it out rather than deleting it
   — that keeps the history of why it existed.

   Reconciled against Baker's previous build.css (in /reference) on
   2026-10-13: every Slate UI rule their instance relied on is carried here.
   ============================================================================ */

/* Links inside Slate content, and in Slate's #global bar (the signed-in name
   and Logout link above the content): Autumn Maple, underlined, going black on
   hover. Without the #global selectors, Logout falls back to browser blue.

   Cadmium Orange is 2.8:1 on white and can never be a text colour. Autumn
   Maple is 5.34:1 and passes, so it carries the orange direction into the body
   copy without failing. The underline stays on at rest: colour alone is never
   the only thing marking a link (WCAG 1.4.1). */
#content a,
#content a:link,
#content a:visited,
#global a,
#global a:link,
#global a:visited {
    color: var(--color-link);
    text-decoration: underline;
}

#content a:hover,
#content a:active,
#content a:focus-visible,
#global a:hover,
#global a:active,
#global a:focus-visible {
    color: var(--color-black);
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Content rhythm and structural helpers.

   Slate ships its own stylesheet that gives #content its vertical rhythm, its
   horizontal subtab row and the floated #side / #main pair. We restate the
   structural essentials here for two reasons: the staging page has no Slate
   stylesheet behind it, so without these the client would review a page that
   does not resemble the real thing; and if a Slate release changes those
   defaults, our chrome keeps its shape.
   ---------------------------------------------------------------------------- */

#content p,
#content ul:not(.subtabs):not(.cr):not(.tabs),
#content ol,
#content table {
    margin-block: 0 var(--space-md);
}

#content h2 {
    margin-block: var(--space-lg) var(--space-sm);
}

#content h3 {
    margin-block: var(--space-md) var(--space-xs);
}

/* Slate marks radio/checkbox lists with .cr and expects them unbulleted. */
#content ul.cr,
#content li.cr {
    list-style: none;
}

#content ul.cr {
    margin: 0;
    padding: 0;
}

#content li.cr {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 32px;
}

/* Native radios and checkboxes render at 13px; scale them up so the control
   itself is a reasonable target, not just its label. */
#content .form_question input[type=radio],
#content .form_question input[type=checkbox] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-orange-deep);
}

/* Subtabs are a horizontal row of pills, not a bulleted list. */
#content ul.subtabs,
#content ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0 0 20px;
}

/* Readable defaults for Slate's data tables (checklists, decision summaries). */
#content table {
    border-collapse: collapse;
    width: 100%;
}

#content th,
#content td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border-input);
    text-align: left;
    vertical-align: top;
}

#content thead th {
    font-weight: 700;
    color: var(--color-text-heading);
    border-bottom-width: 2px;
}

/* Slate's application landing page ("Returning users" / "First-time users")
   uses a table.fixed purely for its two-column layout: each cell is an <h2>
   followed by a line wrapped in <b>. That is layout, not data, so it gets no
   row rule or cell inset (keeping the headings on the content's left edge),
   and the line under each heading reads at body weight rather than bold.
   Scoped to cells that contain an <h2>, so data tables are untouched.
   Browsers without :has() keep the rule and inset — cosmetic only. */
#content table.fixed td:has(> h2) {
    border-bottom: 0;
    padding-left: 0;
}

#content table.fixed td > h2 + b {
    font-weight: inherit;
}

/* Slate floats the portal sidebar; keep that here so staging matches. */
#side,
#main {
    float: left;
}

#content::after,
.slate-form-area__inner::after {
    content: "";
    display: table;
    clear: both;
}

/* Slate's form controls inherit inconsistent fonts and sizes from its own
   stylesheet; normalize them to Baker's body face. */
input,
button,
textarea,
select,
optgroup,
option,
input[type=password],
input[type=text],
input[type=email],
input[type=tel],
input:not([type]) {
    font-family: inherit !important;
    font-size: 100%;
}

/* Slate's form questions put the label inline with the control, which leaves a
   ragged column of inputs at different left edges. Stacking the label above the
   field lines every control up and gives the labels room to wrap on a phone. */
#content .form_question {
    margin-bottom: var(--space-sm);
}

#content .form_question > label {
    display: block;
    margin-bottom: var(--space-2xs);
}

/* Radio and checkbox options keep their inline label — the control belongs
   beside its text, not above it. */
#content .form_question li.cr > label,
#content .form_question label.inline {
    display: inline;
    margin-bottom: 0;
}

#content .form_question input[type=text],
#content .form_question input[type=password],
#content .form_question input[type=email],
#content .form_question input[type=tel],
#content .form_question input:not([type]),
#content .form_question textarea,
#content .form_question select {
    width: 100%;
    max-width: 32rem;
}

#content input[type=text],
#content input[type=password],
#content input[type=email],
#content input[type=tel],
#content input:not([type]),
#content textarea,
#content select {
    padding: 8px 10px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-text-body);
    max-width: 100%;
}

/* Slate marks required fields with .required — make that visible, not just
   conveyed by color. */
#content .form_question label .required,
#content .required {
    color: var(--color-black);
    font-weight: 700;
}

#content .form_label,
#content .form_question > label {
    font-weight: 500;
}

#content legend {
    max-width: 100%;   /* IE/Edge legend wrapping */
    font-family: var(--font-heading);
    font-size: var(--fz-h3);
    color: var(--color-text-heading);
}

#content fieldset {
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    /* Browsers give fieldset a default 2px inline margin, which knocks it off
       the left gutter the heading and chrome share. */
    margin: 0 0 var(--space-md);
}

/* Buttons — pill shaped, brand orange fill with a black label (7.5:1), hover
   inverts to black with an orange label (also 7.5:1).

   Baker asked for brand orange with black text on 2026-10-11. Autumn Maple
   (#BC421B) was their earlier answer to white text failing on brand orange;
   a black label solves the same problem. (If the buttons ever go back to
   Maple, the label must be white: black on Maple is 3.93:1 and fails AA.) */
button.default,
button[type=button],
button[type=submit],
#content input[type=submit] {
    padding: 12px 32px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

button.default:hover,
button[type=button]:hover,
button[type=submit]:hover,
#content input[type=submit]:hover,
button.default:focus-visible,
button[type=button]:focus-visible,
button[type=submit]:focus-visible {
    background-color: var(--color-black);
    color: var(--color-orange);   /* 7.5:1 on black */
}

/* Mobile: Slate's inputs default to fixed pixel widths that overflow. */
@media screen and (max-width: 600px) {
    button,
    textarea,
    input[type=password],
    input[type=text],
    input[type=email],
    input[type=tel],
    input:not([type]),
    div.form_question:not([class*="form_birthdate"]) select {
        width: 100%;
    }
}

/* iOS: stop the mega-wide Slate tables from scrolling the whole page sideways. */
#page {
    overflow-x: hidden;
}

/* Decision-letter confetti canvas sits above page content. */
body > canvas {
    z-index: 500;
}

/* Slate's #global area (sign in / sign out links, floated right by the inline
   <style> in build.xslt). Spacing carried forward from Baker's previous
   build.css so the links don't run together. */
#global li {
    margin-right: 14px !important;
}

/* Portfolio / file uploader */
.plupload_filelist_footer {
    height: 43px !important;
}

ul.tabs li a {
    height: 30px;
    font-size: var(--fz-small);
    border-radius: var(--radius-pill);
}

.slide {
    height: auto !important;
    width: auto !important;
}

/* Application and Financial Aid checklist subtabs */
#content ul.subtabs {
    padding-bottom: 20px;
}

/* Pills, matching the buttons — the client asked for rounded, not square. */
#content ul.subtabs li a,
#content ul.subtabs li a:link,
#content ul.subtabs li a:visited {
    font-size: var(--fz-small);
    color: var(--color-black);
    padding: 10px 20px;
    border: 2px solid var(--color-black);
    border-radius: var(--radius-pill);
    text-decoration: none;
}

/* The selected tab is Cadmium Orange with a black label, 7.5:1. It now
   matches the buttons; the tabs stay smaller and sit in a row of outlined
   pills, which is what tells them apart from a call to action. */
#content ul.subtabs li a.selected {
    background-color: var(--color-orange) !important;
    color: var(--color-black) !important;
    border-color: var(--color-orange);
    font-weight: 700;
}

#content ul.subtabs li a:hover,
#content ul.subtabs li.selected a:hover {
    background-color: var(--color-black) !important;
    color: var(--color-orange) !important;
    border-color: var(--color-black);
    transition: all 170ms;
}

/* Application menu sidebar */
#side {
    width: 22%;
    box-sizing: border-box;
}

#main {
    width: 78%;
}

div#menu {
    width: auto;
}

div#menu {
    padding-right: var(--space-md);
}

div#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div#menu ul li {
    margin-bottom: var(--space-2xs);
}

#content div#menu ul li a,
#content div#menu ul li a:link,
#content div#menu ul li a:visited {
    color: var(--color-black);
    text-decoration: none;
}

div#menu ul li a {
    display: block;
    width: 100%;
    min-width: 100px;
    padding: 8px 12px;
    border-left: 3px solid transparent;
    font-size: var(--fz-ui);
    font-weight: 500;
    overflow-wrap: break-word;
    text-decoration: none;
}

#content div#menu ul li a:hover,
#content div#menu ul li a:focus-visible {
    background-color: var(--color-tint);
    border-left-color: var(--color-orange);
    text-decoration: none;
}

#content div#menu ul li a.selected {
    background-color: var(--color-tint);
    border-left-color: var(--color-orange-deep);
    color: var(--color-orange-deep);
    font-weight: 700;
}

/* Slate's #side/#main are floated at fixed percentages; stack them on small
   screens so checklist pages stay usable on a phone. */
/* Below 900px the 22% sidebar is too narrow for Slate's menu labels, which
   wrap to three lines. Stack instead. */
@media only screen and (max-width: 899px) {
    #side,
    #main {
        width: 100%;
        float: none;
    }
    div#menu {
        padding-right: 0;
        margin-bottom: var(--space-md);
    }
}

/* Tables: Slate uses table.fixed with colgroups that do not reflow.

   The stock Slate fix stacks every cell into its own block row. That stops the
   overflow, but Slate's markup carries no per-cell labels, so a checklist
   collapses into an unlabelled run of values. Scrolling the table instead keeps
   each value under its column heading. Swap the two blocks if a client ever
   prefers the stacked behavior. */
@media only screen and (max-width: 480px) {
    #content table.fixed {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #content table.fixed > colgroup > col {
        display: none;
    }
    #content table.fixed th,
    #content table.fixed td {
        white-space: nowrap;
    }
}

/* Older event landing pages */
@media only screen and (min-width: 768px) {
    .register_datepicker_container {
        flex-direction: column-reverse !important;
        flex-wrap: wrap-reverse;
        width: 65%;
    }
    #register_events {
        width: 80% !important;
        margin: auto;
        padding-top: 25px;
    }
    .register_datepicker_sidebar {
        width: 80% !important;
        margin: auto;
    }
    #elp-txt_wrapper {
        float: left;
        width: 35%;
    }
}

/* Print: drop the chrome, keep the content (applicants print checklists and
   decision letters). */
@media print {
    .site-header,
    .site-footer,
    .skip-link {
        display: none !important;
    }
    .slate-form-area {
        padding-block: 0;
    }
    .slate-form-area__inner {
        max-width: none;
    }
}