/* ============================================================================
   SAN ANDREAS STATE HIGHWAY PATROL - department micro-site skin
   Ported from the approved sashp-home.html mockup (palette sampled from
   mshp.dps.missouri.gov): navy masthead, lemon-yellow wordmark and rules,
   uppercase section headings between double rules, and full-bleed card grids.

   EVERY rule is namespaced under .sashp, and every class the mockup invented
   carries an shp- prefix on top of that. Two separate problems:
     - style.css already defines .wrap, .skip, .seal, .navtoggle, .cardgrid,
       .rule, .legal and .footgrid, so an unscoped copy of the mockup would
       repaint the whole site;
     - .rule in particular is the RULEBOOK block on /rules and would have put a
       22px margin under every hairline in the section headings, and .badge and
       .contact have already bitten SAMPD by catching the shared roster badges
       and the footer's contact column. Prefixing this skin's own class names
       means neither direction can happen again.
   Only the class names the SHARED views need are left unprefixed: hub.ejs
   supplies .pagebanner and .tabwrap, apply-form.ejs supplies .careers,
   .formcard, .applycard, .slotopt and friends.

   style.css is still loaded here: the roster, duty and manage tabs reuse its
   tables, cards, badges and forms.

   LIGHT AND DARK. Unlike the other four skins, this mockup was drawn dark: a
   near-black page with white and yellow on it. That is kept as the DARK theme
   almost literally. Light mode is the constructed half, and it is built the
   same way the other skins' dark halves were - by splitting each brand colour
   into a FILL token and an INK token. The navy chrome and the yellow card
   underbars are fills; they sit on their own dark ground and never move. The
   yellow used as TEXT or as a hairline cannot survive a white page (#ffe200 on
   white measures 1.2:1) so it has an ink counterpart that goes dark olive-gold
   in light and back to lemon in dark.
   ============================================================================ */

.sashp {
  /* ---- Brand fills. Identical in both themes. ---- */
  --shp-navy: #1c2a4d;        /* masthead, page banner, stats strip */
  --shp-navy-foot: #22315a;   /* footer */
  --shp-navy-hover: #2a3b66;  /* dropdown row hover */
  --shp-navy-edge: #35447a;   /* hairlines drawn ON navy */
  --shp-yellow: #ffe200;      /* card underbars, seal ring, wordmark, nav hover */
  --shp-yellow-dim: #d8be00;  /* pressed / hover state of a yellow fill */

  /* ---- Brand ink. The same yellow doing a text job. Flipped in dark. ----
     --shp-gold-ink is body-sized text (6.4:1 on white), --shp-rule is the
     6px double rule beside a section heading and the tile underbar on a light
     ground, which is a non-text object and needs 3:1 (4.3:1 on white). */
  --shp-gold-ink: #6e6000;
  --shp-rule: #8a7900;
  --shp-head-ink: #1c2a4d;    /* section headings: navy in light, yellow in dark */

  /* ---- Surfaces. Every one of these flips. ---- */
  --shp-page: #ffffff;
  --shp-band: #f4f5f7;        /* the alternating full-width section band */
  --shp-surface: #ffffff;     /* form card, tables, ladder panels */
  --shp-panel: #111418;       /* the Become a Trooper panel: deep in BOTH themes,
                                 because its yellow heading and grey body copy
                                 are drawn for a dark ground */
  --shp-ink: #1b1f24;         /* headings and table text on a light surface */
  --shp-body: #454b52;        /* body copy (8.8:1 on white) */
  --shp-line: #dcdfe4;
  --shp-field: #c9cccd;
  --shp-input: #ffffff;
  --shp-zebra: #fafafa;

  --shp-shadow: rgba(0,0,0,.45);
  --shp-focus: rgba(28,42,77,.18);

  /* Inline form feedback: pale field with dark ink in light, inverted in dark. */
  --shp-fail-bg: #fdecec;
  --shp-fail-line: #f0c2c2;
  --shp-fail-edge: #b3231f;
  --shp-fail-ink: #7e241f;
  --shp-ok-bg: #eaf2ea;
  --shp-ok-line: #bfd9c2;
  --shp-ok-edge: #2e6b4b;
  --shp-ok-ink: #24513a;

  --shp-font: 'Open Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Placeholder art for the tiles. Every one is a dark gradient with a scrim
     and white caption over it, so they read as photographs and are correct
     against a light OR a dark page. Swap any of them for a FiveManage
     screenshot with url('...') and nothing else has to change. */
  --shp-recruit: linear-gradient(100deg,#0b0b0b 0%,#1a1a1a 55%,#0e0e0e 100%);
  --shp-f1: linear-gradient(140deg,#12203a,#2c4a7a);
  --shp-f2: linear-gradient(140deg,#3a3524,#8a7d4e);
  --shp-f3: linear-gradient(140deg,#2b3340,#5c6675);
  --shp-p1: linear-gradient(140deg,#1d3350,#3f6aa0);
  --shp-p2: linear-gradient(140deg,#2c3a3f,#5e7378);
  --shp-p3: linear-gradient(140deg,#24455e,#4f8099);
  --shp-p4: linear-gradient(140deg,#3d4a5c,#7d8ea3);
  --shp-p5: linear-gradient(140deg,#4a3f2c,#8a7550);
  --shp-p6: linear-gradient(140deg,#1f1f1f,#4d4d4d);
  --shp-p7: linear-gradient(140deg,#3a4a2c,#6f8250);
  --shp-p8: linear-gradient(140deg,#233046,#48607f);
  --shp-p9: linear-gradient(140deg,#3c3c2a,#78784f);
  --shp-p10: linear-gradient(140deg,#2f3a4a,#61738c);
  --shp-p11: linear-gradient(140deg,#2a2a2a,#585858);
  --shp-p12: linear-gradient(140deg,#1a3a45,#3d7286);
  --shp-b1: linear-gradient(140deg,#2e3a2c,#66795c);
  --shp-b2: linear-gradient(140deg,#4a3050,#8a5c94);
  --shp-b3: linear-gradient(140deg,#4a4030,#8a7a5c);
  --shp-b4: linear-gradient(140deg,#22304a,#46608c);
}

body.sashp {
  background: var(--shp-page); color: var(--shp-body);
  font-family: var(--shp-font); font-size: 16px; line-height: 1.6;
}
.sashp h1, .sashp h2, .sashp h3, .sashp h4, .sashp h5 {
  margin: 0; color: var(--shp-ink); font-weight: 700; line-height: 1.2;
}
.sashp a { color: var(--shp-gold-ink); text-decoration: none; }
.sashp a:hover { text-decoration: underline; }
.sashp img { max-width: 100%; display: block; }
/* Full bleed, like the rest of the site. The mockup's 1220px cap left dead
   margins on a wide screen; .narrow is what the reading-width pages use. */
.sashp .wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 1.6vw, 44px); width: 100%; }
.sashp .narrow { max-width: 1400px; margin: 0 auto; }
.sashp :focus-visible { outline: 3px solid var(--shp-rule); outline-offset: 3px; }
.sashp .skip {
  position: absolute; left: -9999px; background: var(--shp-yellow); color: #1a1a1a;
  padding: 10px 18px; font-weight: 700; z-index: 999;
}
.sashp .skip:focus { left: 0; top: 0; }

/* ============================================================================
   1. MASTHEAD
   ============================================================================ */
.sashp .shp-mast { background: var(--shp-navy); position: sticky; top: 0; z-index: 80; }
.sashp .shp-mast .wrap {
  display: flex; align-items: center; gap: 24px; min-height: 68px; flex-wrap: wrap;
}
.sashp .shp-brand { display: flex; align-items: center; gap: 16px; flex: none; }
.sashp .shp-brand:hover { text-decoration: none; }
.sashp .shp-seal {
  width: 82px; height: 82px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #39527f, #16233f 68%);
  border: 3px solid var(--shp-yellow); color: var(--shp-yellow);
  display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: .56rem; line-height: 1.2; padding: 8px; margin: -7px 0;
}
/* Real logo art: keep the circular footprint, drop the plate and the ring. The
   backing that replaces them is set once at the foot of this file, next to the
   note explaining why the artwork needs it. */
.sashp .shp-seal.has-logo { border: 0; }
.sashp .shp-seal img { width: 100%; height: 100%; object-fit: contain; }
.sashp .shp-wordmark {
  color: var(--shp-yellow); font-weight: 800; font-size: 1.28rem; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.1; max-width: 15ch;
}

.sashp .nav { display: flex; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 24px; align-items: center; }
.sashp .nav > li { position: relative; }
.sashp .nav > li > a {
  display: block; color: #fff; font-weight: 700; font-size: .86rem; letter-spacing: .03em;
  text-transform: uppercase; padding: 22px 0;
}
.sashp .nav > li > a:hover,
.sashp .nav > li:focus-within > a,
.sashp .nav > li.active > a { color: var(--shp-yellow); text-decoration: none; }
.sashp .nav .shp-caret { font-size: .5rem; margin-left: 5px; vertical-align: middle; }
/* Named shp-sub, not sub. SADT called this .sub and the hero headline on its
   home page happens to carry a span.sub too, which the dropdown rule then hid
   outright. Prefixing removes the whole class of that mistake. */
.sashp .shp-sub {
  position: absolute; top: 100%; left: -16px; min-width: 250px; background: var(--shp-navy);
  border-top: 3px solid var(--shp-yellow); list-style: none; margin: 0; padding: 6px 0;
  opacity: 0; visibility: hidden; transition: .13s; box-shadow: 0 12px 26px var(--shp-shadow); z-index: 80;
}
.sashp .nav > li:hover .shp-sub, .sashp .nav > li:focus-within .shp-sub { opacity: 1; visibility: visible; }
.sashp .shp-sub a {
  display: block; color: #fff; font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; padding: 11px 18px; line-height: 1.3;
}
.sashp .shp-sub a:hover { background: var(--shp-navy-hover); color: var(--shp-yellow); text-decoration: none; }

.sashp .navtoggle {
  display: none; background: none; border: 0; color: #fff; font: inherit; font-weight: 700;
  font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  padding: 18px 0; margin-left: auto;
}

/* Account cluster. Sits on the navy bar in both themes, so unlike the other
   skins its ink is white here and never changes. */
.sashp .shp-acct { display: flex; align-items: center; gap: 12px; flex: none; font-size: .82rem; }
.sashp .shp-acct a { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sashp .shp-acct a:hover { color: var(--shp-yellow); text-decoration: none; }
.sashp .shp-acct .btn-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff;
  font-family: var(--shp-font); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.sashp .shp-acct .btn-link:hover { color: var(--shp-yellow); }
/* style.css already styles .theme-toggle, but for the main site's teal topbar.
   The geometry is restated here so the button matches the uppercase links
   beside it rather than the main site's larger control. */
.sashp .theme-toggle {
  width: 30px; height: 30px; flex: none; border: 0; padding: 0; border-radius: 3px;
  background: none; color: #fff; display: grid; place-items: center; cursor: pointer;
}
.sashp .theme-toggle:hover { color: var(--shp-yellow); }
.sashp .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
/* Both icons ship in the markup and only the one matching the active theme is
   shown, so the button carries both states with no JS class juggling. */
.sashp .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .sashp .theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .sashp .theme-toggle .ico-sun { display: none; }

/* ============================================================================
   2. RECRUIT PANEL
   The wrapper is the page; the panel inside it is deep in both themes.
   ============================================================================ */
.sashp .shp-recruitwrap { background: var(--shp-page); padding: 44px 0 56px; }
.sashp .shp-recruit {
  background: var(--shp-recruit); background-size: cover; background-position: center;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 300px;
  border: 1px solid var(--shp-panel);
}
.sashp .shp-recruit .shp-photo {
  align-self: stretch; background: linear-gradient(120deg,#151515,#2c2c2c);
  background-size: cover; background-position: center; min-height: 300px;
}
.sashp .shp-recruit .shp-copy { padding: 36px 42px; text-align: center; }
.sashp .shp-recruit h2 {
  color: var(--shp-yellow); font-size: 1.85rem; text-transform: uppercase; letter-spacing: .01em;
}
.sashp .shp-recruit p { color: #c9ccd2; margin: 20px auto 0; max-width: 460px; font-size: 1.02rem; }
.sashp .shp-outline {
  display: inline-block; border: 2px solid var(--shp-yellow); color: var(--shp-yellow);
  font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 30px; margin-top: 26px; text-decoration: underline; text-underline-offset: 3px;
}
.sashp .shp-outline:hover { background: var(--shp-yellow); color: #1a1a1a; text-decoration: underline; }

/* ============================================================================
   3. STATS STRIP
   A thin navy band, so it keeps its brand fill in both themes. Real counts, not
   the mockup's decoration.
   ============================================================================ */
.sashp .shp-stats { background: var(--shp-navy); padding: 26px 0; }
.sashp .shp-stats .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.sashp .shp-stat {
  flex: 1 1 170px; min-width: 170px; max-width: 280px; text-align: center; padding: 0 22px;
  border-left: 1px solid var(--shp-navy-edge); color: #fff;
}
.sashp .shp-stat:first-child { border-left: 0; }
.sashp .shp-stat .shp-num {
  color: var(--shp-yellow); font-size: 2.4rem; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sashp .shp-stat .shp-cap {
  font-size: .8rem; margin-top: 6px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: #cdd5e6;
}

/* ============================================================================
   4. FEATURE TILES
   ============================================================================ */
.sashp .shp-features { padding: 44px 0 10px; }
.sashp .shp-featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sashp .shp-feat {
  position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center;
  border-bottom: 5px solid var(--shp-yellow); display: flex; align-items: flex-end; justify-content: center;
}
.sashp .shp-feat:nth-child(1) { background-image: var(--shp-f1); }
.sashp .shp-feat:nth-child(2) { background-image: var(--shp-f2); }
.sashp .shp-feat:nth-child(3) { background-image: var(--shp-f3); }
.sashp .shp-feat::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.12) 45%, transparent 70%);
}
.sashp .shp-feat span {
  position: relative; z-index: 2; color: #fff; font-size: 2.05rem; font-weight: 600;
  letter-spacing: .01em; text-transform: uppercase; padding: 0 16px 16px; text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.sashp .shp-feat:hover { text-decoration: none; }
.sashp .shp-feat:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.1) 100%);
}

/* ============================================================================
   5. SECTION HEADINGS - uppercase, double rule either side
   ============================================================================ */
.sashp .shp-sechead { display: flex; align-items: center; gap: 26px; margin: 66px 0 34px; }
.sashp .shp-sechead h2 {
  color: var(--shp-head-ink); font-size: 2.05rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.sashp .shp-sechead .shp-rule {
  flex: 1; height: 6px; border-top: 2px solid var(--shp-rule); border-bottom: 2px solid var(--shp-rule);
}

/* ============================================================================
   6. CARD GRIDS
   ============================================================================ */
.sashp .shp-cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sashp .shp-tcard {
  position: relative; aspect-ratio: 16/11; background-size: cover; background-position: center;
  border-bottom: 5px solid var(--shp-yellow); display: flex; align-items: flex-end;
  justify-content: center; overflow: hidden;
}
.sashp .shp-tcard::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 42%, transparent 68%);
}
.sashp .shp-tcard span {
  position: relative; z-index: 2; color: #fff; font-size: 1.02rem; font-weight: 600;
  letter-spacing: .01em; text-transform: uppercase; text-align: center;
  padding: 0 12px 12px; line-height: 1.25;
}
.sashp .shp-tcard:hover { text-decoration: none; }
.sashp .shp-tcard:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.12) 100%);
}
.sashp .shp-p1 { background-image: var(--shp-p1); }
.sashp .shp-p2 { background-image: var(--shp-p2); }
.sashp .shp-p3 { background-image: var(--shp-p3); }
.sashp .shp-p4 { background-image: var(--shp-p4); }
.sashp .shp-p5 { background-image: var(--shp-p5); }
.sashp .shp-p6 { background-image: var(--shp-p6); }
.sashp .shp-p7 { background-image: var(--shp-p7); }
.sashp .shp-p8 { background-image: var(--shp-p8); }
.sashp .shp-p9 { background-image: var(--shp-p9); }
.sashp .shp-p10 { background-image: var(--shp-p10); }
.sashp .shp-p11 { background-image: var(--shp-p11); }
.sashp .shp-p12 { background-image: var(--shp-p12); }
.sashp .shp-b1 { background-image: var(--shp-b1); }
.sashp .shp-b2 { background-image: var(--shp-b2); }
.sashp .shp-b3 { background-image: var(--shp-b3); }
.sashp .shp-b4 { background-image: var(--shp-b4); }
.sashp .shp-gridpad { padding-bottom: 70px; }

/* ============================================================================
   7. MISSION + COMMAND
   ============================================================================ */
.sashp .shp-mission { background: var(--shp-band); padding: 70px 0; }
.sashp .shp-missiongrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.sashp .shp-quote { border-left: 5px solid var(--shp-rule); padding-left: 26px; }
.sashp .shp-quote p {
  margin: 0; color: var(--shp-head-ink); font-size: 1.55rem; line-height: 1.4; font-weight: 600;
}
.sashp .shp-mission p { margin: 0 0 18px; }
.sashp .shp-mission p:last-child { margin-bottom: 0; }

.sashp .shp-command { padding: 66px 0 78px; }
.sashp .shp-cmdgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 8px; }
.sashp .shp-cmd {
  background: var(--shp-surface); border: 1px solid var(--shp-line);
  border-bottom: 4px solid var(--shp-rule); padding: 22px 24px;
}
.sashp a.shp-cmd { display: block; }
.sashp a.shp-cmd:hover { text-decoration: none; border-color: var(--shp-rule); }
.sashp .shp-cmd strong { display: block; color: var(--shp-ink); font-size: 1.06rem; }
.sashp .shp-cmd span {
  display: block; margin-top: 5px; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--shp-gold-ink);
}
.sashp .shp-empty { color: var(--shp-body); font-style: italic; }

/* ============================================================================
   8. FOOTER
   ============================================================================ */
.sashp .shp-footer { background: var(--shp-navy-foot); padding: 52px 0 0; font-size: 1rem; }
.sashp .shp-footgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; align-items: start; padding-bottom: 40px; }
.sashp .shp-footer h3 {
  color: #fff; font-size: 1.32rem; font-weight: 600; margin-bottom: 18px;
  text-decoration: underline; text-underline-offset: 4px;
}
.sashp .shp-footer ul { list-style: none; margin: 0; padding: 0; }
.sashp .shp-footer li { margin-bottom: 7px; }
.sashp .shp-footer a { color: #dfe3ea; }
.sashp .shp-footer a:hover { color: var(--shp-yellow); }
.sashp .shp-footsocials { display: flex; gap: 18px; margin-top: 22px; align-items: center; }
.sashp .shp-footsocials a { color: #fff; display: grid; place-items: center; }
.sashp .shp-footsocials a:hover { color: var(--shp-yellow); }
.sashp .shp-footsocials svg { width: 22px; height: 22px; fill: currentColor; }
.sashp .shp-footsocials img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sashp .shp-footseal { width: 84px; height: 84px; margin-top: 18px; }
.sashp .shp-footseal img { width: 100%; height: 100%; object-fit: contain; }
.sashp .shp-legal {
  border-top: 1px solid var(--shp-navy-edge); padding: 18px 0; font-size: .87rem; color: #c3cbdd;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sashp .shp-legal a { color: #dfe3ea; }

/* ============================================================================
   9. SHARED PAGE FURNITURE
   The standard hub tabs (roster / duty / manage), the shared application form,
   and this skin's own careers, contact and messages pages.
   ============================================================================ */
.sashp .pagebanner {
  background: var(--shp-navy); padding: 52px 0; text-align: center;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.6px, transparent 1.6px);
  background-size: 28px 28px; border-bottom: 5px solid var(--shp-yellow);
}
.sashp .pagebanner h1 {
  color: #fff; font-size: 3rem; letter-spacing: .01em; text-transform: uppercase;
}
.sashp .tabwrap { margin: 0; padding: 48px clamp(16px, 1.6vw, 44px) 88px; }

.sashp .careers, .sashp .shp-page { padding: 62px 0 84px; }
.sashp .careers h2, .sashp .shp-page h2 { font-size: 1.9rem; margin-bottom: 16px; }
.sashp .careers p, .sashp .shp-page p { margin: 0 0 18px; }
.sashp .lede { font-size: 1.06rem; margin-bottom: 30px; }

.sashp .btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--shp-navy); color: #fff;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 28px; border: 0; border-radius: 0; min-height: 0;
  font-family: var(--shp-font); width: max-content; transition: .15s; cursor: pointer;
}
.sashp .btn:hover { background: var(--shp-navy-hover); color: var(--shp-yellow); text-decoration: none; }
.sashp .btn.gold { background: var(--shp-yellow); color: #1a1a1a; }
.sashp .btn.gold:hover { background: var(--shp-yellow-dim); color: #1a1a1a; }

.sashp .laddergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin: 28px 0 34px; }
.sashp .ladder { background: var(--shp-band); border-bottom: 4px solid var(--shp-rule); padding: 24px 26px 28px; }
.sashp .ladder h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--shp-head-ink); margin-bottom: 14px;
}
.sashp .ladder ol { margin: 0; padding-left: 20px; }
.sashp .ladder li { margin-bottom: 7px; font-size: .97rem; }

.sashp .pdtable { width: 100%; border-collapse: collapse; background: var(--shp-surface); font-size: 1rem; }
.sashp .pdtable thead th {
  background: var(--shp-navy); color: #fff; text-align: left; padding: 13px 18px;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
.sashp .pdtable tbody td { border-bottom: 1px solid var(--shp-line); padding: 14px 18px; color: var(--shp-ink); vertical-align: top; }
.sashp .pdtable tbody tr:nth-child(even) td { background: var(--shp-zebra); }

/* Contact page. Named shp-contact, not contact: SAMPD's `.sampd .contact`
   also catches the footer's contact column, and this skin does not repeat it. */
.sashp .shp-contact { padding: 62px 0 84px; }
.sashp .shp-warning {
  background: var(--shp-navy); color: #fff; border-left: 6px solid var(--shp-yellow);
  padding: 26px 30px; margin: 0 auto 36px; max-width: 1000px;
}
.sashp .shp-warning h3 { color: var(--shp-yellow); font-size: 1.14rem; margin-bottom: 10px; letter-spacing: .02em; text-transform: uppercase; }
.sashp .shp-warning p { margin: 0 0 10px; font-size: 1rem; color: #dfe3ea; }
.sashp .shp-warning p:last-child { margin-bottom: 0; }
.sashp .shp-warning strong { color: #fff; }

.sashp .formcard {
  background: var(--shp-surface); border: 1px solid var(--shp-line); border-top: 4px solid var(--shp-rule);
  padding: 34px 32px; max-width: 1000px; margin: 0 auto;
}
.sashp .formcard .field { margin-bottom: 22px; display: block; }
.sashp .formcard .field label {
  display: block; font-weight: 700; color: var(--shp-ink); font-size: .88rem;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px;
}
.sashp .req { color: var(--shp-fail-edge); }
.sashp .formcard input[type=text], .sashp .formcard input[type=tel],
.sashp .formcard input[type=email], .sashp .formcard select, .sashp .formcard textarea {
  width: 100%; border: 1px solid var(--shp-field); background: var(--shp-input); font: inherit;
  font-size: 1rem; color: var(--shp-ink); padding: 11px 13px; border-radius: 2px;
  font-family: var(--shp-font);
}
.sashp .formcard input:focus, .sashp .formcard select:focus, .sashp .formcard textarea:focus {
  outline: none; border-color: var(--shp-navy); box-shadow: 0 0 0 2px var(--shp-focus);
}
.sashp .formcard textarea { min-height: 130px; resize: vertical; }
.sashp .formcard select {
  appearance: none; height: 45px; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--shp-head-ink) 50%),
                    linear-gradient(135deg, var(--shp-head-ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.sashp .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sashp .submit {
  background: var(--shp-navy); color: #fff; border: 0; font-family: var(--shp-font);
  font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 14px 40px; cursor: pointer; transition: .15s;
}
.sashp .submit:hover { background: var(--shp-navy-hover); color: var(--shp-yellow); }
.sashp .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sashp .form-fail {
  background: var(--shp-fail-bg); border: 1px solid var(--shp-fail-line);
  border-left: 4px solid var(--shp-fail-edge); color: var(--shp-fail-ink);
  padding: 12px 16px; margin: 0 0 22px; font-size: .98rem;
}
.sashp .form-sent {
  background: var(--shp-ok-bg); border: 1px solid var(--shp-ok-line);
  border-left: 4px solid var(--shp-ok-edge); color: var(--shp-ok-ink);
  padding: 12px 16px; margin: 0 0 22px; font-size: .98rem;
}

/* Shared application form, rendered in this chrome. SASHP does not take
   applications today (its intake is by invitation), but the form is styled
   anyway so enabling the module is a one-switch change, not a redesign. */
.sashp .applycard { max-width: 1000px; margin: 0 auto; }
.sashp .apply-head {
  display: flex; align-items: center; gap: 18px; margin-bottom: 26px;
  padding-bottom: 22px; border-bottom: 1px solid var(--shp-line);
}
.sashp .apply-logo { width: 66px; height: 66px; object-fit: contain; flex: none; }
.sashp .apply-code { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--shp-gold-ink); text-transform: uppercase; }
.sashp .apply-name { font-size: 1.5rem; margin-top: 2px; }
.sashp .slotpick { border: 0; margin: 0 0 24px; padding: 0; }
.sashp .slotpick legend { font-weight: 700; color: var(--shp-ink); font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.sashp .slotopt {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--shp-field); padding: 14px 16px; margin-bottom: 10px; background: var(--shp-surface);
}
.sashp .slotopt:hover { border-color: var(--shp-navy); }
.sashp .slotopt.on { border-color: var(--shp-navy); box-shadow: 0 0 0 2px var(--shp-focus); }
.sashp .slotopt input { accent-color: var(--shp-navy); width: 17px; height: 17px; margin: 3px 0 0; flex: none; }
.sashp .slotopt span { display: flex; flex-direction: column; gap: 3px; }
.sashp .slotopt strong { color: var(--shp-ink); font-size: 1rem; }
.sashp .slotopt small { color: var(--shp-body); font-size: .9rem; line-height: 1.45; }
.sashp .slotopt input:disabled + span strong,
.sashp .slotopt input:disabled + span small { opacity: .6; }

/* ============================================================================
   10. RESPONSIVE
   ============================================================================ */
@media (max-width: 1300px) {
  .sashp .nav { gap: 15px; }
  .sashp .nav > li > a { font-size: .76rem; }
  .sashp .shp-wordmark { font-size: 1.05rem; }
  .sashp .shp-seal { width: 68px; height: 68px; font-size: .5rem; }
}
@media (max-width: 1040px) {
  .sashp .navtoggle { display: block; }
  .sashp .nav {
    display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding-bottom: 12px; border-top: 1px solid var(--shp-navy-edge);
  }
  .sashp .nav.open { display: flex; }
  .sashp .nav > li > a { padding: 13px 0; border-bottom: 1px solid var(--shp-navy-edge); }
  .sashp .shp-sub {
    position: static; opacity: 1; visibility: visible; box-shadow: none; border-top: 0;
    border-left: 3px solid var(--shp-yellow); padding: 0 0 6px;
  }
  .sashp .shp-acct { order: 4; margin-left: auto; }
  .sashp .shp-mast { position: static; }
  .sashp .shp-mast .wrap { padding-top: 10px; padding-bottom: 6px; }
  .sashp .shp-featgrid { grid-template-columns: 1fr; }
  .sashp .shp-cardgrid { grid-template-columns: 1fr 1fr; }
  .sashp .shp-recruit { grid-template-columns: 1fr; }
  .sashp .shp-footgrid { grid-template-columns: 1fr 1fr; }
  .sashp .shp-missiongrid { grid-template-columns: 1fr; gap: 32px; }
  .sashp .shp-stat { border-left: 0; padding: 14px 18px; text-align: left; }
}
@media (max-width: 620px) {
  .sashp .shp-cardgrid { grid-template-columns: 1fr; }
  .sashp .shp-footgrid { grid-template-columns: 1fr; }
  .sashp .shp-sechead h2 { font-size: 1.5rem; white-space: normal; }
  .sashp .shp-feat span { font-size: 1.5rem; }
  .sashp .shp-wordmark { font-size: .95rem; }
  .sashp .pagebanner h1 { font-size: 2rem; }
  .sashp .duo { grid-template-columns: 1fr; }
  .sashp .shp-quote p { font-size: 1.24rem; }
}

/* ============================================================================
   DARK THEME - and the note on which half of this skin is the "designed" one

   The theme is stamped as a concrete data-theme on <html> by the inline script
   in partials/sashp-head, which runs before this file paints, so there is no
   white flash and the CSS only ever has to look at one attribute. The OS
   preference is NOT a second branch here; that script already resolves it.

   This block is where the mockup's own palette comes back. sashp-home.html was
   drawn on #1a1a1a with white and #ffe200 on top of it, so DARK is the design
   as delivered and light is the half that had to be constructed. The values
   below are the mockup's, with one deliberate change: the page is #171c21
   rather than #1a1a1a and the band is #1c2229. Those are style.css's dark
   neutrals, and this skin loads style.css too - the roster, duty and manage
   tabs are the main site's cards and tables rendered inside SASHP chrome, so a
   different near-black here would show a seam every time somebody moved between
   the Home tab and the Roster tab.

   The brand does not move. Navy #1c2a4d and the yellow FILLS were already
   correct against a near-black page, so the masthead, footer, stats strip, page
   banner, buttons and card underbars are identical in both themes. Only the
   surfaces and the INK tokens flip.
   ============================================================================ */
:root[data-theme="dark"] body.sashp {
  color-scheme: dark;         /* native selects, scrollbars and the caret follow */

  /* Ink. The yellow goes back to lemon: #ffe200 measures 13.2:1 on the page and
     12.0:1 on the #1c2229 band, against 6.4:1 for the dark-olive light-mode
     counterpart on white. Headings follow it, which is what makes the dark half
     read as the mockup rather than as a recoloured light page. */
  --shp-gold-ink: #ffe200;
  --shp-rule: #ffe200;
  --shp-head-ink: #ffe200;

  /* Surfaces, matching style.css exactly so the hub tabs do not seam. */
  --shp-page: #171c21;
  --shp-band: #1c2229;
  --shp-surface: #1c2229;
  --shp-panel: #0f1317;       /* the recruit panel recesses BELOW the page rather
                                 than rising above it, so it still reads as a
                                 separate object without going lighter than the
                                 art inside it */
  --shp-ink: #f1f4f7;
  --shp-body: #c9ccd2;        /* the mockup's own body grey: 10.7:1 on the page */
  --shp-line: #2b343d;
  --shp-field: #3a4650;
  --shp-input: #151a1f;       /* fields recess below the card instead of matching it */
  --shp-zebra: #212932;

  /* A .45 black shadow does nothing on #171c21; the dropdown gets a real
     hairline below instead. The focus glow is restated because navy is a poor
     ring colour once the page around it is dark. */
  --shp-shadow: rgba(0,0,0,.65);
  --shp-focus: rgba(255,226,0,.26);

  /* Form feedback inverted: dark tinted field, light ink. */
  --shp-fail-bg: #3a2124;
  --shp-fail-line: #5b2e33;
  --shp-fail-edge: #e8736c;
  --shp-fail-ink: #efb9b9;    /* 8.65:1 on the field */
  --shp-ok-bg: #1c2f26;
  --shp-ok-line: #2f5240;
  --shp-ok-edge: #4d9b74;
  --shp-ok-ink: #a8dcbd;      /* 9.19:1 on the field */
}

/* --- The four things a variable cannot carry --- */

/* The dropdown is the same navy as the bar it drops out of. In light it is
   separated by a shadow, which a dark page swallows, so it needs a real
   hairline with the yellow rule kept on top. Gated to the desktop breakpoint:
   below 1040px the submenu is flattened into the mobile nav and given a yellow
   LEFT rule instead, and boxing it would undo that. */
@media (min-width: 1041px) {
  :root[data-theme="dark"] .sashp .nav .shp-sub {
    border: 1px solid var(--shp-navy-edge); border-top: 3px solid var(--shp-yellow);
  }
}

/* The recruit panel is #0f1317 inside a #171c21 page: a 1.14:1 step, which is
   an edge you can only just see. In light its border was the panel colour
   itself against white and needed nothing more. Here the border does the work. */
:root[data-theme="dark"] .sashp .shp-recruit { border-color: var(--shp-line); }

/* The seal art is a dark navy disc on transparency. At the 82px masthead size
   its rim is about 2px, and the masthead is navy in BOTH themes, so this is not
   actually a dark-mode problem - it is a permanent one, handled once here for
   the header copy. The footer copy sits on the lighter footer navy and the rim
   carries it. NOT a CSS filter: inverting would wreck the artwork. */
.sashp .shp-seal.has-logo { background: rgba(255,255,255,.08); border-radius: 50%; padding: 4px; }

/* Deliberately NOT touched: every .shp-tcard, .shp-feat and the recruit panel's
   own art. Those gradients are dark in both themes with a scrim and white
   caption over them, so they read as photographs either way and re-tinting
   would make the same tile look different for no reason. Same for the masthead,
   stats strip, page banner and footer: each is a brand fill that does not move,
   so its ink does not either.

   style.css paints .card / .widget / .table in dark for the roster, duty and
   manage tabs, which is exactly what is wanted - those tabs are meant to be the
   main site's components inside SASHP chrome. The one thing it does NOT cover
   is .tabwrap, which has no background of its own and falls through to
   body.sashp above. Nothing to add; noted so nobody goes looking for it. */