/* ====================================================================
   PHILLIPS ACADEMY SUMMER SESSION (Andover Summer) - tenant skin
   Deploys to: Z:\pcrfiles\PhillipsAcademySS\style\css\website07292026.css
   Master pages already reference this filename; edit in place.

   Pattern: thin tenant file over the shared Poly base (same look and feel
   as the demo site). The base consumes the --school-* / --serif / --sans
   tokens, so the re-theme is a token swap plus a few small overrides.
   Do NOT edit the Poly base (shared across tenants).

   Palette: andover.edu's own brand tokens (verified 2026-09-30), which
   also match the Andover Summer banner used as the logo:
     --blue #0031a7 / #00319c (the site's most used color), --dkblue #001d64,
     --yellow #ffd926, --abbotBlue #44b8f3.
   Type: headings keep the demo's display serif (Cormorant Garamond, from
   the base). Body text is Raleway, the Google font the school's old portal
   used (andover.edu's own fonts, Miller and Benton Sans, are not Google fonts).
   ==================================================================== */

@import url("https://webapps.pcrsoft.com/Clue/ApplicationFiles/Poly/Style/css/website07292026.css");
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

/* This :root loads after the base's :root (imports come first), same
   specificity, so these values win. Token names keep the base's
   "navy/gold" vocabulary; values are Andover. */
:root {
  /* Chrome: Andover blue */
  --school-navy:        #00319c;   /* utility bar, L1 nav, buttons, headings */
  --school-navy-2:      #0031a7;   /* lifted Andover blue for hovers/fills   */
  --school-navy-deep:   #001d64;   /* andover.edu dark blue: footer band      */

  /* Accent: Andover yellow */
  --school-gold:        #ffd926;   /* nav underlines, rules, active state on blue */
  --school-gold-soft:   #fff7d1;   /* pale yellow tint: halos, fills          */
  --school-gold-dark:   #8a6d00;   /* readable dark gold on light surfaces (5:1 on white) */

  /* Surfaces and neutrals: the base's values */
  --warm-cream:         #fdfcf8;
  --ink:                #14202e;
  --muted:              #5a6b7c;
  --line:               #e3e8ee;
  --bg:                 #fafbfc;
  --shadow-sm:          0 1px 2px rgba(0,29,100,0.05);
  --shadow-md:          0 4px 16px rgba(0,29,100,0.08);
  --shadow-lg:          0 12px 40px rgba(0,29,100,0.14);
  --radius:             8px;
  --radius-lg:          14px;
  --container-max:      1320px;

  /* Type: display serif stays the base's; body is Raleway */
  --sans:               'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-body:            16px;
  --fs-sm:              13px;
  --fs-xs:              12px;
  --fs-micro:           10.5px;
  --lh-body:            1.8;
  --lh-tight:           1.5;

  /* Icon recolor filters, regenerated for the colors above (black icon to
     --school-navy #00319c and to --school-gold-dark #8a6d00). If either color
     changes, regenerate the matching chain. */
  --school-navy-filter:      brightness(0) saturate(100%) invert(13%) sepia(59%) saturate(4831%) hue-rotate(218deg) brightness(95%) contrast(108%);
  --school-gold-dark-filter: brightness(0) saturate(100%) invert(30%) sepia(92%) saturate(1804%) hue-rotate(42deg) brightness(95%) contrast(101%);

  /* Tokens of the base's older layer (gbwebsite.css): body in Raleway, content
     headings in the display serif instead of that layer's Lustria, and the
     legacy colors in Andover blue for any content that still refers to them. */
  --common-font:        'Raleway', Arial, Helvetica, sans-serif;
  --title-font:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --color1:             #00319c;
  --color2:             #00319c;
}

/* Content headings inside widget text. The migrated text keeps its words
   but not its old inline sizes, so headings fall back to the legacy layer's
   h1 (48px on a fixed 36px line, which overlaps when a heading wraps).
   h1/h2 are true headings: the display serif at body-content scale.
   h3/h4 often wrap whole paragraphs in this school's content (the old portal
   showed them as 16px bold blue text), so they use the body font, bold, as
   the demo does for emphasis inside content. Line spacing scales with size. */
.textContent h1, .textContent h2, .textContent h3, .textContent h4 {
    color: var(--school-navy) !important;
    line-height: 1.3 !important;
}
.textContent h1, .textContent h2 {
    font-family: var(--serif) !important;
    font-weight: 600 !important;
}
.textContent h3, .textContent h4 {
    font-family: var(--sans) !important;
    font-weight: 700 !important;
}
.textContent h1 { font-size: 30px !important; }
.textContent h2 { font-size: 24px !important; }
.textContent h3 { font-size: 17px !important; }
.textContent h4 { font-size: 16px !important; }

/* Logo menu: the logo link is a one-level menu; never show list bullets. */
.logoLink ul, .logoLink li { list-style: none !important; }

/* Links inside content headings. The base draws heading links in the display
   serif at 28px, so a link inside a bold h3 sentence (an email address,
   "click here", a portal link) balloons mid-line. Links keep their heading's
   font; color and underline still mark them as links. */
.textContent h1 a, .textContent h2 a, .textContent h3 a, .textContent h4 a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* Status pills (the enrollment forms list): the base caps them at 280px
   with an ellipsis, which cuts longer calls to action ("Forms Not
   Completed-Click Here To Submit" read "...Click Here To .."). Lift the cap
   to the cell's width. The cell is a column flexbox, which would stretch an
   uncapped pill across the whole row, so the pill keeps its own width. */
.status-grid a.status-pill, .status-grid .status-pill {
    align-self: flex-start !important;
    max-width: 100% !important;
}

/* Clickable Text widgets (the program choices on the Select Program pages).
   Each is a Text widget with a Navigate Url, so the whole text is clickable.
   The old portal drew them as full-width blue buttons through a class that
   the no-inline-styling clean-up removed, which left them looking like plain
   text. Draw them as the theme's buttons. */
.textContent span[onclick] > div {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--school-navy);
    color: #ffffff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .02em;
    transition: background-color .15s ease, color .15s ease;
}
.textContent span[onclick]:hover > div {
    background: var(--school-navy-deep);
    color: var(--school-gold);
}

/* ==========================================================================
   Andover portal v2 (2026-10-16)
   Blue frame, deep-blue header band with the crest and a sunlight layer,
   white main menu, ivory page, hairline cards, joined right-column groups,
   navy footer. Replaces the "Elevated header" block and the old header and
   footer logo rules.
   --serif and --sans are already defined above (Cormorant Garamond and
   Raleway), so they are not repeated here.
   ========================================================================== */
:root {
  --blue-frame: #0a3592;
  --band: linear-gradient(180deg, #0c3a9e 0%, #0a3592 25%, #092d81 45%, #062873 60%, #022161 80%, #001b57 100%);
  --ivory:      #fbfaf6;
  --hair:       #e8e4d8;
  --hair-2:     #efece4;
  --brass:      #c9a646;
  --gold:       #ffd600;
  --gold-soft:  #f3d77a;
  --navy:       #00319c;
  --navy-deep:  #001d64;
  --ink-navy:   #0b1f4d;
}

/* ---- Frame and page ---------------------------------------------------- */
body,
.styledDivision {
  background-color: var(--ivory);
}
.styledDivision {
  border: 12px solid var(--blue-frame);
  border-bottom: 0;
  overflow-x: clip;                 /* base title rows run a few px wider than the framed page */
}
@media (max-width: 767.98px) {
  .styledDivision { border-width: 6px 6px 0; }
}

/* Admin and Content links (signed-in staff only). From 1200px they sit at the
   far left of the utility strip from 1025px (where the desktop menu starts).
   Below that the utility links wrap and centre,
   so the admin links get their own 28px strip above them; it only exists when
   the links are on the page. The base sizes them with !important (padding,
   type), so they sit in the cascade layer; each box is the strip's height with
   its text centred on the same line as the other strip links. */
@layer andover-beats-id {
  a.AdminLinks {
    top: 12px !important;           /* the frame's 12px; the strip starts there */
    margin: 0 0 0 20px !important;  /* the master adds 6px on top at 1280px and below; 20px clears the frame */
    height: 32px !important;
    padding: 0 8px !important;
    line-height: 32px !important;
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
    color: rgba(255, 255, 255, .6) !important;
  }
  a.AdminLinks:hover {
    color: #ffffff !important;
  }
  @media (max-width: 1024.98px) {
    a.AdminLinks {
      height: 28px !important;
      line-height: 28px !important;
    }
  }
  @media (max-width: 767.98px) {
    a.AdminLinks { top: 6px !important; }   /* the frame is 6px here */
  }
}
@media (max-width: 1024.98px) {
  body:has(a.AdminLinks) .styledDivision {
    padding-top: 28px;
    background: linear-gradient(#001b57, #001b57) 0 0 / 100% 28px no-repeat, var(--ivory);
  }
}/* ---- Header band ------------------------------------------------------- */
.headerwrapper {
  position: relative;
  isolation: isolate;               /* keeps the sunlight blend inside the band */
  height: 96px;
  overflow: hidden;
  background: var(--band);
  border-bottom: 0;
}
.headerwrapper::after {             /* gold-to-brass bottom edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 214, 0, .95), rgba(201, 166, 70, .6) 35%, rgba(201, 166, 70, .25));
  z-index: 3;
}
.headerwrapper > .t-container,
.headerwrapper .HeaderRow {
  height: 100%;
}
.headerwrapper .HeaderRow {
  flex-wrap: nowrap;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent !important; /* beats base white header row */
  box-shadow: none;
  border-bottom: 0;
}
.headerwrapper .LogoColomn {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* Crest: the banner cropped to its crest panel. The image sits on ::before so
   the edge mask does not also clip the sunlight layer on ::after. */
.headerwrapper .logoLink {
  position: relative;
  background: none;
}
/* The base sizes the slot with ID-weighted !important rules
   (#LogoColomn .logoLink), which no class selector can outrank. An
   !important declaration inside a cascade layer beats an unlayered
   !important whatever its specificity. */
@layer andover-beats-id {
  .headerwrapper .logoLink {
    width: 139px !important;
    max-width: none !important;
    height: 80px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .headerwrapper .logoLink:hover {
    opacity: 1 !important;          /* base hover fades and scales the logo; the crest stays put */
    transform: none !important;
  }
  .headerwrapper .LogoColomn {          /* base centres the header columns with auto margins */
    margin: 0 !important;
  }
  @media (min-width: 1200px) {
    .headerwrapper .QuickLinksColumn {   /* base: #QuickLinksColumn margin 0, padding 24px 0 */
      margin: 0 0 0 10px !important;
      padding: 0 0 0 26px !important;
    }
  }
  @media (max-width: 991.98px) {
    .headerwrapper .LogoColomn {
      display: flex !important;     /* base stacks the column below 900px */
      align-items: center !important;
      height: 100% !important;      /* base drops the row's flexbox below 769px */
      text-align: left !important;
    }
    .headerwrapper .logoLink {
      width: 104px !important;
      height: 60px !important;
    }
  }
}
.headerwrapper .logoLink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/banner_11192021.png) -4px -11px / 400px 100px no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 64% 70% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 70% at 50% 50%, #000 70%, transparent 100%);
  pointer-events: none;
}
/* The crest's invisible menu: Home covers the crest. */
.headerwrapper .logoLink > ul.noprint {
  position: absolute;
  inset: 0;
  z-index: 4;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.headerwrapper .logoLink > ul.noprint > li:first-child,
.headerwrapper .logoLink > ul.noprint > li:first-child > a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Sunlight: grain, warm glow and faint rays centred on the crest's sun. */
.headerwrapper .logoLink::after {
  content: "";
  position: absolute;
  left: 71px;
  top: 36px;
  width: 1800px;
  height: 1800px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(255, 200, 40, .14) 0, rgba(255, 200, 40, .045) 130px, transparent 360px),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .04) 0deg 1deg, transparent 1deg 6deg);
  /* The spec's mask ends at .35 at 900px, the layer's own edge, which drew a
     hard vertical seam across the band; it now fades to clear by 900px. */
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, .5) 0 46px, #000 70px, rgba(0, 0, 0, .6) 300px, rgba(0, 0, 0, .35) 820px, transparent 900px);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, .5) 0 46px, #000 70px, rgba(0, 0, 0, .6) 300px, rgba(0, 0, 0, .35) 820px, transparent 900px);
}
@media (prefers-reduced-motion: no-preference) {
  .headerwrapper .logoLink::after { animation: av-sunlight-in 2.4s ease-out both; }
}
@keyframes av-sunlight-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Divider and two serif lines beside the crest, desktop only. */
@media (min-width: 1200px) {
  .headerwrapper .QuickLinksColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    text-align: left !important;    /* base right-aligns this column */
    background: linear-gradient(180deg, transparent, var(--brass) 25%, var(--brass) 75%, transparent) 0 50% / 1px 46px no-repeat;
  }
  .headerwrapper .QuickLinksColumn::before {
    content: "PHILLIPS ACADEMY";
    font-family: var(--serif);
    font-weight: 600;
    font-size: 23px;
    line-height: 1;
    letter-spacing: .2em;
    color: #ffffff;
    white-space: nowrap;
  }
  .headerwrapper .QuickLinksColumn::after {
    content: "Andover, Massachusetts\00A0\00A0\00B7\00A0\00A0 Founded 1778"; /* the space ends the escape */
    margin-top: 8px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
  }
}

/* ---- Utility links: a 32px strip above the band (from 1025px) ----------- */
/* Laying them over the band is not robust: on the Family pages the base puts
   a student switcher in the header's right column, right where the links
   would sit. So they keep their own strip. */
.LoginsLayout {
  background-color: #001b57 !important;  /* beats base utility-bar navy */
  border-bottom: 0 !important;           /* beats base white hairline */
}
@media (min-width: 1025px) {
  .LoginsLayout {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    overflow: hidden;
  }
  .LoginsLayout > .t-container {
    width: 100%;
  }
  .LoginsLayout .Logins ul.noprint > li {
    vertical-align: top !important;      /* beats base baseline alignment */
  }
  .LoginsLayout .Logins ul.noprint {
    margin: 0 !important;                /* beats base strip spacing */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultNodeCss,
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultSelectedNodeCss {
    position: relative;
    font-size: 10.5px !important;        /* beats base utility link type */
    font-weight: 600 !important;         /* same reason */
    letter-spacing: .2em !important;     /* same reason */
    line-height: 32px !important;        /* same reason */
    height: 32px !important;             /* same reason: the base box was 38px, text pinned 3px high */
    padding-top: 0 !important;           /* same reason */
    padding-bottom: 0 !important;        /* same reason */
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8) !important; /* beats base utility link colour */
    transition: color .3s ease;
  }
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultNodeCss::after,
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultSelectedNodeCss::after {
    content: "";
    position: absolute;
    left: 12px;                          /* the link's own side padding */
    right: 12px;
    bottom: 8px;
    height: 1px;
    background: var(--gold-soft);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
  }
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultNodeCss:hover,
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultSelectedNodeCss:hover {
    color: #ffffff !important;           /* same reason */
  }
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultNodeCss:hover::after,
  .LoginsLayout .Logins ul.noprint > li > a.MenuDefaultSelectedNodeCss:hover::after {
    transform: scaleX(1);
  }
}
/* ---- Logout ------------------------------------------------------------- */
/* Plain white text with a permanent gold-soft underline and a hairline divider
   before it; replaces the old white pill. Two renders: the plain a.Logout sits
   at the right end of the utility strip from 1200px, and a.ButtonNoFloat.Logout
   sits in the mobile menu bar below that. The base styles both with
   !important, so this sits in the cascade layer. :not(:empty) everywhere: the
   base hides the empty anonymous render, and a layered rule must not undo it. */
@layer andover-beats-id {
  a.Logout:not(:empty),
  a.ButtonNoFloat.Logout:not(:empty) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    font-family: var(--sans) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gold-soft) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 5px !important;
  }
  a.Logout:not(:empty)::before,
  a.ButtonNoFloat.Logout:not(:empty)::before {
    content: "" !important;
    display: inline-block !important;
    width: 1px !important;
    height: 14px !important;
    margin-right: 14px !important;
    vertical-align: middle !important;
    background: rgba(255, 255, 255, .3) !important;
  }
  a.Logout:not(:empty):hover,
  a.ButtonNoFloat.Logout:not(:empty):hover {
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
  }

  /* Mobile menu bar: one 32px row centred on the bar, beside the menu button */
  a.ButtonNoFloat.Logout:not(:empty) {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    top: 1px !important;
    margin: 0 !important;
  }

  /* Utility strip, from 1025px: the last item of the link row. The legacy Poly
     layer (website02112021.css) hides this render at 1280px and below, leaving it
     to the mobile bar, but the Poly base hides the mobile bar above 1024px, so
     1025-1280px had no Logout at all; shown here until the Poly base is fixed.
     Same 32px line as the links, its right edge on the container's content edge
     (where the links ended before), and the links make room for it. */
  @media (min-width: 1025px) {
    a.Logout:not(.ButtonNoFloat):not(:empty) {
      display: block !important;      /* see the note above: the legacy Poly layer hides it at 1280px and below */
      top: 0 !important;
      right: calc(max(0px, (100% - 1200px) / 2) + 15px) !important; /* the strip container is capped at 1200px up to 1280px */
      height: 32px !important;
      line-height: 32px !important;
      margin: 0 !important;
    }
    body:has(a.Logout:not(.ButtonNoFloat):not(:empty)) .LoginsLayout .Logins ul.noprint {
      padding-right: 72px !important;  /* Logout's box: divider, 14px gap, text */
    }
  }
  @media (min-width: 1281px) {
    a.Logout:not(.ButtonNoFloat):not(:empty) {
      right: calc(max(0px, (100% - 1280px) / 2) + 15px) !important; /* and at 1280px above that */
    }
  }
}
/* ---- Page title ornament: brass line, diamond, brass line ----------- */
.PageTitleLabelRow::after {
  width: 80px;
  height: 9px;
  margin-top: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='9'%3E%3Cpath d='M0 4.5h34M46 4.5h34' stroke='%23c9a646'/%3E%3Crect x='37.5' y='2' width='5' height='5' transform='rotate(45 40 4.5)' fill='%23c9a646'/%3E%3C/svg%3E") center / 80px 9px no-repeat; /* --brass, inlined in the SVG */
}

/* ---- Pay: stays gold ---------------------------------------------------- */
/* The base styles Pay with !important behind an ID-weighted :not(#__never__),
   so this uses the same cascade layer as the crest sizing above. */
@layer andover-beats-id {
  input[type="submit"][value="Pay" i] {
    background: var(--gold) !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: var(--navy-deep) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    padding: 11px 22px !important;
    box-shadow: 0 8px 18px -10px rgba(138, 109, 0, .7) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }
  input[type="submit"][value="Pay" i]:hover {
    background: var(--gold) !important;   /* stays gold on hover */
    border-color: var(--gold) !important;
    color: var(--navy-deep) !important;
    transform: translateY(-1px) !important;
  }
}

/* ---- Components: menu, sub-menu, title, cards, table, right column ----- */
/* The Poly base styles every one of these with !important, some behind
   higher-specificity selectors (.RadDockZone .ButtonFloat..., the dock's
   Telerik skin). Each rule below therefore sits in the cascade layer and
   marks its declarations !important: a layered !important beats an
   unlayered !important whatever its specificity, and a layered normal
   declaration would lose to the base's normal ones. */
@layer andover-beats-id {

  /* Main menu: white row, ink-navy links, gold underline from the centre */
  .menuwrapper > div {
    background: linear-gradient(180deg, #ffffff, #fdfcf8) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
  }
  .menuwrapper {
    box-shadow: none !important;
  }
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint {
    height: 62px !important;
    gap: 52px !important;
    align-items: stretch !important;
  }
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li {
    padding: 0 !important;
  }
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li > a {
    display: flex !important;
    align-items: center !important;
    height: 62px !important;
    padding: 0 !important;
    background: none !important;
    color: var(--ink-navy) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: 50% !important;
    bottom: 0 !important;
    width: auto !important;
    height: 2px !important;
    background: var(--menu-indicator) !important;   /* 2026-11-06: was var(--gold), 1.38:1 on the white bar */
    transform: none !important;
    transition: left .28s ease, right .28s ease !important;
  }
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li > a.MenuDefaultSelectedNodeCss::after,
  .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li > a:hover::after {
    left: 0 !important;
    right: 0 !important;
  }

  /* Sub-menu: ivory row, grey links, brass underline from the centre */
  .Submenuwrapper:has(a) {
    background: var(--ivory) !important;
    border-bottom: 1px solid var(--hair) !important;
  }
  .Submenuwrapper .SubmenuColumn,
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .Submenuwrapper .SubmenuColumn::before {
    content: none !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    height: 44px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 18px !important;
    background: none !important;
    color: #5d6876 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    transition: color .2s ease !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: 50% !important;
    bottom: 10px !important;
    width: auto !important;
    height: 1px !important;
    background: var(--brass) !important;
    transform: none !important;
    transition: left .28s ease, right .28s ease !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a:hover {
    color: var(--navy-deep) !important;
  }
  /* Current page (PCR 2026-11-06, (MS)2 Applicant Info 78474): navy, semibold and a resting underline,
     so the selected step stands out from the grey links (the grey above overrode the base's navy). */
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a.MenuDefaultSelectedNodeCss {
    color: var(--navy-deep) !important;
    font-weight: 600 !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a.MenuDefaultSelectedNodeCss::after {
    left: 18px !important;          /* the text's own width inside the 18px padding */
    right: 18px !important;
    height: 2px !important;         /* 2026-11-06: the current line was the 1px brass hover line, 2.23:1 */
    background: var(--submenu-current-indicator) !important;
  }
  .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a:hover::after {
    left: 18px !important;          /* the text's own width inside the 18px padding */
    right: 18px !important;
  }

  /* Page title */
  .PageTitleLabelColumn h1 {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    font-size: 54px !important;
    line-height: 1.1 !important;
    color: var(--navy-deep) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Cards (Telerik docks) */
  .RadDock.RadDock_Telerik {
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 0 rgba(0, 29, 100, .03), 0 18px 36px -28px rgba(0, 29, 100, .28) !important;
    overflow: hidden !important;
  }
  .RadDock.RadDock_Telerik:hover {
    box-shadow: 0 1px 0 rgba(0, 29, 100, .03), 0 18px 36px -28px rgba(0, 29, 100, .28) !important;
    transform: none !important;
  }
  .RadDock.RadDock_Telerik tr.rdTop > td.rdCenter {
    padding: 22px 26px 16px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--hair-2) !important;
    background: none !important;
  }
  .RadDock.RadDock_Telerik .rdTitleBar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .RadDock.RadDock_Telerik .rdTitleBar > span,
  .RadDock.RadDock_Telerik .rdTitleBar > span > span {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    color: var(--navy-deep) !important;
    margin: 0 !important;
    height: auto !important;
  }
  .RadDock.RadDock_Telerik .rdCommands a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid var(--hair) !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    transition: border-color .2s ease !important;
  }
  .RadDock.RadDock_Telerik .rdCommands a:hover {
    border-color: var(--brass) !important;
  }
  .RadDock.RadDock_Telerik .rdContent {
    padding: 18px 26px 24px !important;
    background: #ffffff !important;
  }

  /* Statement-style tables: dock grids whose rows carry a right-aligned money
     column (the amount cell has align="right"). */
  .RadDock table.DataWebControlStyle:has(td[align="right"]) th {
    background: none !important;
    padding: 0 10px 10px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    color: #6b7280 !important;   /* 2026-11-06: was #8a93a0, 3.11:1 on white; now 4.83:1 */
  }
  .RadDock table.DataWebControlStyle:has(td[align="right"]) td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    background: none !important;
    border-bottom: 1px solid var(--hair-2) !important;
    font-variant-numeric: tabular-nums !important;
  }
  .RadDock table.DataWebControlStyle:has(td[align="right"]) tr > :nth-child(2),
  .RadDock table.DataWebControlStyle:has(td[align="right"]) tr > :nth-child(3) {
    text-align: right !important;
  }
  .RadDock table.DataWebControlStyle:has(td[align="right"]) tr:last-child > td {
    font-weight: 600 !important;
    color: var(--navy-deep) !important;
    border-bottom: 0 !important;
  }
  .RadDock table.DataWebControlStyle:has(td[align="right"]) tr.AlternatingRowStyle,
  .RadDock table.DataWebControlStyle:has(td[align="right"]) tr.AlternatingRowStyle > td {
    background: none !important;
  }

  /* Empty state ("No invitations."): a dock grid with no header row. */
  .RadDock .GridViewWrap table.DataWebControlStyle:not(:has(th)),
  .RadDock .GridViewWrap table.DataWebControlStyle:not(:has(th)) tr,
  .RadDock .GridViewWrap table.DataWebControlStyle:not(:has(th)) td {
    background: none !important;
  }
  .RadDock .GridViewWrap table.DataWebControlStyle:not(:has(th)) td {
    padding: 18px 0 !important;
    border: 0 !important;
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-size: 19px !important;
    color: #5f6875 !important;   /* 2026-11-06: was #7a8492, 3.79:1 on white; now 5.64:1 */
    text-align: center !important;
  }

  /* The rows' shared container carries a 20px margin on every side but the
     column's full width, so it overran the column by 20px (the old 5px page
     scroll at 1070px). Side margins go. */
  div:has(> .ButtonFloat.quickAction),
  div:has(> .ButtonFloat.listActions) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Right column, "Concierge panel" (v3): Quick actions are one navy panel
     matching the header band; Forms is one quiet white card. All six rows are
     sibling boxes in one container, so each group is drawn as one surface by
     squaring inner corners and closing the gaps.

     Panel heights are fixed so the band gradient runs continuously across the
     rows: the label is 46px and each link row 54px (+1px separator), so the
     panel is 100 + 55 + 55 = 210px. The gradient is sized to that 210px and
     each row shows its own slice. (The spec's 100% 300% assumed three equal
     rows; the label makes the first row about twice as tall, which leaves a
     visible seam.) */

  /* Shared row frame */
  .ButtonFloat.quickAction,
  .ButtonFloat.listActions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: box-shadow .2s ease, background-color .2s ease !important;
  }
  .ButtonFloat.quickAction:hover,
  .ButtonFloat.listActions:hover {
    padding: 0 !important;          /* base hover shifts list rows right */
    transform: none !important;
  }

  /* Labels, on the first row of each group (.Admissions and .enroll here) */
  .ButtonFloat.quickAction:not(.ButtonFloat.quickAction ~ .ButtonFloat.quickAction)::before,
  .ButtonFloat.listActions:not(.ButtonFloat.listActions ~ .ButtonFloat.listActions)::before {
    content: "QUICK ACTIONS" !important;
    display: block !important;
    order: -1 !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 22px 24px 12px !important;
    border: 0 !important;
    font-family: var(--sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .24em !important;
    line-height: 12px !important;
    color: #f3d77a !important;
  }
  .ButtonFloat.listActions:not(.ButtonFloat.listActions ~ .ButtonFloat.listActions)::before {
    content: "FORMS" !important;
    padding: 20px 24px 10px !important;
    color: #c9a646 !important;
  }

  /* Row links: take the free width; the chevron sits at the right */
  .ButtonFloat.quickAction > a,
  .ButtonFloat.listActions > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;  /* fixed row heights keep the panel gradient continuous */
    text-overflow: ellipsis !important;
    background: none !important;
  }

  /* Old icon halo goes; the icon itself is redrawn on a::before */
  .ButtonFloat.quickAction > a::after,
  .ButtonFloat.listActions > a::after,
  .ButtonFloat.quickAction:hover > a::after,
  .ButtonFloat.listActions:hover > a::after {
    content: none !important;
    display: none !important;
  }
  .ButtonFloat.quickAction > a::before,
  .ButtonFloat.listActions > a::before,
  .ButtonFloat.quickAction:hover > a::before,
  .ButtonFloat.listActions:hover > a::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 24px !important;
    transform: translateY(-50%) !important;
    background-image: none !important;
    filter: none !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  /* Chevron: mask-drawn, pushed to the right */
  .ButtonFloat.quickAction::after,
  .ButtonFloat.listActions::after {
    content: "" !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 24px 0 8px !important;
    font-size: 0 !important;
    opacity: 1 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  }

  /* --- Concierge panel: the three quick actions --- */
  /* Every layer is sized to the whole 210px panel and each row shows its own
     slice (--av-y), so the band and the sunlight (grain, warm glow and faint
     rays, screened over the band) run across the rows with no step. Sunlight
     on the first row alone stopped at its lower edge and read as a seam. */
  .ButtonFloat.quickAction {
    --av-y: 0px;
    --av-panel:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E") 0 var(--av-y) / 180px 180px repeat border-box,
      radial-gradient(circle at 88% -10px, rgba(255, 200, 40, .16), transparent 60%) 0 var(--av-y) / 100% 210px no-repeat border-box,
      repeating-conic-gradient(from 0deg at 88% -10px, rgba(255, 255, 255, .035) 0 1deg, transparent 1deg 6deg) 0 var(--av-y) / 100% 210px no-repeat border-box,
      linear-gradient(180deg, #0c3a9e 0%, #0a3592 25%, #092d81 45%, #062873 60%, #022161 80%, #001b57 100%) 0 var(--av-y) / 100% 210px no-repeat border-box;
    border: 0 !important;
    background: var(--av-panel) !important;
    background-blend-mode: screen, screen, screen, normal !important;
  }
  .ButtonFloat.quickAction ~ .ButtonFloat.quickAction {
    border-top: 1px solid rgba(255, 255, 255, .12) !important; /* separator */
  }
  .ButtonFloat.quickAction.store {
    --av-y: -100px;
  }
  .ButtonFloat.quickAction.donate {
    --av-y: -155px;
    background:
      linear-gradient(90deg, rgba(255, 214, 0, .9), rgba(201, 166, 70, .25)) 0 100% / 100% 1px no-repeat border-box,
      var(--av-panel) !important;
    background-blend-mode: normal, screen, screen, screen, normal !important;
  }  .ButtonFloat.quickAction:not(.ButtonFloat.quickAction ~ .ButtonFloat.quickAction) {
    border-radius: 4px 4px 0 0 !important;
  }
  .ButtonFloat.quickAction:not(:has(~ .ButtonFloat.quickAction)) {
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 22px 40px -26px rgba(0, 29, 100, .65) !important;
  }
  .ButtonFloat.quickAction:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .06) !important;
  }
  .ButtonFloat.quickAction:not(:has(~ .ButtonFloat.quickAction)):hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .06), 0 22px 40px -26px rgba(0, 29, 100, .65) !important;
  }
  .ButtonFloat.quickAction > a,
  .ButtonFloat.quickAction > a:visited,
  .ButtonFloat.quickAction:hover > a {
    padding: 14px 0 14px 60px !important; /* 24px inset + 22px icon + 14px gap */
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    font-size: 21px !important;
    line-height: 26px !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
  }
  .ButtonFloat.quickAction > a::before,
  .ButtonFloat.quickAction:hover > a::before {
    width: 22px !important;
    height: 22px !important;
    background-color: #f3d77a !important;
  }
  .ButtonFloat.quickAction.Admissions > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M9 15l2 2 4-4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M9 15l2 2 4-4'/%3E%3C/svg%3E") !important;
  }
  .ButtonFloat.quickAction.store > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") !important;
  }
  .ButtonFloat.quickAction.donate > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18M12 9v12M12 9c-1.5-3-5-3-5-1s3 1 5 1c2 0 5 1 5-1s-3.5-2-5 1'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18M12 9v12M12 9c-1.5-3-5-3-5-1s3 1 5 1c2 0 5 1 5-1s-3.5-2-5 1'/%3E%3C/svg%3E") !important;
  }
  .ButtonFloat.quickAction::after {
    background-color: rgba(255, 255, 255, .55) !important;
    transition: transform .25s ease, background-color .25s ease !important;
  }
  .ButtonFloat.quickAction:hover::after {
    background-color: #f3d77a !important;
    transform: translateX(4px) !important;
  }

  /* Narrow columns (216px at 1024): 24px insets push "Apply Online" past the
     row, so the panel insets drop to 18px there; the type stays 21px. */
  div:has(> .ButtonFloat.quickAction) {
    container-type: inline-size;
  }
  @container (max-width: 240px) {
    .ButtonFloat.quickAction > a,
    .ButtonFloat.quickAction > a:visited,
    .ButtonFloat.quickAction:hover > a {
      padding-left: 52px !important;  /* 18px inset + 22px icon + 12px gap */
    }
    .ButtonFloat.quickAction > a::before,
    .ButtonFloat.quickAction:hover > a::before {
      left: 18px !important;
    }
    .ButtonFloat.quickAction::after {
      margin-right: 18px !important;
    }
    .ButtonFloat.quickAction:not(.ButtonFloat.quickAction ~ .ButtonFloat.quickAction)::before {
      padding-left: 18px !important;
      padding-right: 18px !important;
    }
  }
  /* --- Forms: one quiet white card --- */
  .ButtonFloat.listActions,
  .ButtonFloat.listActions:hover {
    border: 1px solid #e8e4d8 !important;
    border-top: 1px solid #efece4 !important;   /* row separator */
    border-bottom: 0 !important;
  }
  .ButtonFloat.listActions {
    background: #ffffff !important;
  }
  .ButtonFloat.listActions:hover {
    background: #fbfaf6 !important;
  }
  .ButtonFloat.listActions:not(.ButtonFloat.listActions ~ .ButtonFloat.listActions) {
    margin-top: 22px !important;                /* gap below the navy panel */
    border-top-color: #e8e4d8 !important;
    border-radius: 4px 4px 0 0 !important;
  }
  .ButtonFloat.listActions:not(:has(~ .ButtonFloat.listActions)) {
    border-bottom: 1px solid #e8e4d8 !important;
    border-radius: 0 0 4px 4px !important;
  }
  .ButtonFloat.listActions:not(.ButtonFloat.listActions ~ .ButtonFloat.listActions):not(:has(~ .ButtonFloat.listActions)) {
    border-radius: 4px !important;              /* a group of one keeps all four corners */
  }
  .ButtonFloat.listActions > a,
  .ButtonFloat.listActions > a:visited,
  .ButtonFloat.listActions:hover > a {
    padding: 12px 0 12px 56px !important;       /* 24px inset + 18px icon + 14px gap */
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #1a2233 !important;
    white-space: normal !important;   /* long form names wrap; only the navy panel needs fixed heights */
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .ButtonFloat.listActions > a::before,
  .ButtonFloat.listActions:hover > a::before {
    width: 18px !important;
    height: 18px !important;
    background-color: #00319c !important;
  }
  .ButtonFloat.listActions.enroll > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E") !important;
  }
  .ButtonFloat.listActions.report > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E") !important;
  }
  /* The second .report (Health and Medical Forms) */
  .ButtonFloat.listActions.report ~ .ButtonFloat.listActions.report > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z'/%3E%3Cpath d='M12 10v5M9.5 12.5h5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z'/%3E%3Cpath d='M12 10v5M9.5 12.5h5'/%3E%3C/svg%3E") !important;
  }
  .ButtonFloat.listActions::after {
    background-color: #b4bac3 !important;
    transition: transform .25s ease, background-color .25s ease !important;
  }
  .ButtonFloat.listActions:hover::after {
    background-color: #001d64 !important;
    transform: translateX(3px) !important;
  }

  /* The base cuts every transition to near zero for reduced motion. The
     layered transitions above outrank that rule, so they repeat it here,
     with the same selectors so they win over the ones above. */
  @media (prefers-reduced-motion: reduce) {
    .menuwrapper .MenuColumn .menuDefaultNavWrapper > ul.noprint > li > a::after,
    .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a,
    .Submenuwrapper .SubmenuColumn .menuDefaultNavWrapper > ul.noprint > li > a::after,
    .RadDock.RadDock_Telerik .rdCommands a,
    .ButtonFloat.quickAction,
    .ButtonFloat.listActions,
    .ButtonFloat.quickAction::after,
    .ButtonFloat.listActions::after,
    input[type="submit"][value="Pay" i] {
      transition: none !important;
    }
  }}

/* ---- Footer ------------------------------------------------------------ */
.FooterLayout {
  box-sizing: border-box;           /* keeps the 40px side padding inside the frame */
  padding: 26px 40px;
  background:
    linear-gradient(90deg, rgba(201, 166, 70, .25), rgba(255, 214, 0, .9) 50%, rgba(201, 166, 70, .25)) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, #022161, #001b57) !important; /* beats base footer fill */
}
/* The crest's wrapper also holds the school name and address. The crest and
   the two added lines share the first rows; the name and address run
   full width beneath them. */
.FooterLayout .FooterLogoColumnCenter > div:has(> .logoLinkFooter) {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 18px;
}
.FooterLayout .FooterLogoColumnCenter > div:has(> .logoLinkFooter) > .logoLinkFooter {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.FooterLayout .FooterLogoColumnCenter > div:has(> .logoLinkFooter) > div:not(.logoLink) {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 16px;
}
.FooterLayout .FooterLogoColumnCenter > div:has(> .logoLinkFooter)::before {
  content: "PHILLIPS ACADEMY";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .2em;
  color: #ffffff;
  text-align: left;
}
.FooterLayout .FooterLogoColumnCenter > div:has(> .logoLinkFooter)::after {
  content: "ANDOVER, MASSACHUSETTS";
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .75);
  text-align: left;
}
.FooterLayout .logoLink.logoLinkFooter {
  position: relative;
  width: 104px !important;          /* beats base 120px crest slot (!important) */
  max-width: 104px !important;      /* same reason */
  height: 60px !important;          /* same reason */
  min-height: 60px !important;      /* same reason */
  background: none !important;      /* same reason: the image moves to ::before */
  filter: none !important;          /* base white-knockout filter would blank the crest */
  opacity: 1 !important;            /* same reason */
}
.FooterLayout .logoLink.logoLinkFooter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/banner_11192021.png) -3px -8px / 300px 75px no-repeat;
  /* The header's 64% x 70% mask leaves the sides ~70% opaque, which shows as a
     box on the darker footer navy; closest-side fades to clear at the edge. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 70%, transparent 100%);
  pointer-events: none;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .headerwrapper { height: 72px; }
  .headerwrapper .logoLink::before {
    background-position: -3px -8px;
    background-size: 300px 75px;
  }
  .headerwrapper .logoLink::after {
    left: 53px;                     /* the sun, scaled by .75 */
    top: 27px;
  }
}

/* Application Forms lists on phones (PCR 2026-10-28, PA (MS)2 test V9): the list buttons ("Start",
   "I/We do NOT wish to enroll", "Download signed agreement") wrap inside a fixed width so the
   agreements list fits a phone instead of scrolling sideways and hiding the buttons.
   2026-11-07: the contract list (.contract-invitations) is left out. The Clue base main10282026.css now lays it
   out on phones itself (one line per student, buttons wrap below) and sizes buttons border-box there, so this
   78px cut "Download signed agreement" 27px (32px glyph padding left 28px for the text) and stacked the
   decline label five lines high (Maria: "fix the PA download button on phones too"). */
@media screen and (max-width: 768px) {
  .GridViewWrap:not(.contract-invitations) td input[type="submit"] {
    white-space: normal !important;  /* the base pins submit buttons to nowrap */
    width: 78px !important;          /* the base pins 16px side padding with !important: 78 + 32 = 110px button */
    height: auto !important;         /* let a wrapped label grow the button */
    line-height: 1.25 !important;    /* the base sets line-height 1 on submit buttons */
    padding-top: 6px !important;     /* the base sets 0 vertical padding */
    padding-bottom: 6px !important;
  }
}

/* Application Form step list (PCR 2026-10-28, PA (MS)2 test): each finished step's checkmark floats
   left and is taller than its row, so every next step was pushed 22px further right (a staircase).
   Clear the float on steps that carry a checkmark, and give the current step the same 18px text
   inset as the finished steps. */
li.MenuDefaultCss:has(> .checkmark) {
  clear: left;
}
li.MenuDefaultCss:has(> .checkmark) > a.MenuDefaultSelectedNodeCss {
  padding-left: 18px !important;  /* the base pins 0 padding on the selected node */
}

/* Page titles on phones (PCR 2026-10-28): long titles ("Permissions and Privacy") ran edge to edge at
   40px with 40px side padding on the title span. Smaller title and no side padding at 768px and below.
   In the andover-beats-id layer so it beats the base's unlayered !important title size. */
@layer andover-beats-id {
  @media screen and (max-width: 768px) {
    .PageTitleLabelColumn h1,
    .PageTitleLabelColumn h1 span {
      font-size: clamp(28px, 9vw, 40px) !important;
      line-height: 1.15 !important;
    }
    .PageTitleLabelColumn h1 span {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

/* Application Form step list, current step (PCR 2026-10-28): lay the current step out as a 51px flex
   row like the finished steps, so its checkmark (when it was finished before) sits beside the label. */
li.MenuDefaultCss:has(> .checkmark) > a.MenuDefaultSelectedNodeCss {
  display: flex !important;        /* the base pins the selected node to inline */
  align-items: center !important;
  min-height: 51px !important;     /* the finished steps' row height */
}

/* Application Form radio options (Zoho 33784, 2026-11-06): the Clue base floats every .inputDiv at 50% for
   label + input pairs. A radio option has no label, so it sat in half the column and the next widget's
   heading (Essential Study Skills) wrapped up beside it. Full width, and the row holds its own float. */
.formDiv:not(:has(> .formLabel)):has(> .inputDiv.radioOptionDiv) {
  display: flow-root;
}
.formDiv:not(:has(> .formLabel)) > .inputDiv.radioOptionDiv {
  float: none;
  width: 100%;
}

/* ---- Menu role tokens (PCR 2026-11-06, css-pairs.mjs) ----------------------------------------
   This sheet draws its own white main-menu bar and ivory sub-menu (layer andover-beats-id), so the
   tokens below describe them for the pair check; the bar colours themselves come from the layer.
   Fixed: the current/hover main-menu line was #FFD600 on white (1.38:1) and the sub-menu current line
   1px brass (2.23:1); both are now Andover dark gold --school-gold-dark (4.79:1), the sub-menu one 2px.
   The Poly base reads these (website07292026.css section 1b, with the @pair table). Rerun
   app-lanes\css-pairs.mjs --only "<this school>" after changing any colour here. */
:root {
  --menu-bg-top:                 #ffffff;
  --menu-bg:                     #fdfcf8;
  --menu-bg-bottom:              #fdfcf8;
  --menu-text:                   var(--ink-navy);
  --menu-text-hover:             var(--ink-navy);
  --menu-current-text:           var(--ink-navy);
  --menu-current-bg:             transparent;
  --menu-indicator:              var(--school-gold-dark);
  --submenu-bg:                  var(--ivory);
  --submenu-text:                #5d6876;
  --submenu-text-hover:          var(--navy-deep);
  --submenu-current-text:        var(--navy-deep);
  --submenu-indicator:           var(--brass);
  --submenu-current-indicator:   var(--school-gold-dark);
}