/* ─────────────────────────────────────────────────────────────────────
   Sample 4 — The Firm (boutique-law-firm tone)
   References lifted (with attribution):
   • Cravath, Swaine & Moore (cravath.com): named outcome AS the hero
     headline; no decorative chrome; two-tier nav; Recent News list
     grammar applied here as "Recent matters" / "Recent students."
   • Sullivan & Cromwell (sullcrom.com): exact 6-item primary nav —
     Lawyers / Practices / Insights / About / Careers / Alumni →
     About / Services / Outcomes / Insights / Contact / Sign In.
     Institutional-numeric voice in subhead.
   • Foster + Partners: services rendered as a typeset Expertise band,
     not as a card grid; principal named in the hero copy itself.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --s4-paper:        #FAF6EC;     /* cream / ivory ground */
  --s4-paper-2:      #F4EFE1;     /* slightly deeper cream for bands */
  --s4-rule:         #1F2740;     /* hairline rule — same family as accent */
  --s4-rule-soft:    rgba(31, 39, 64, 0.18);
  --s4-rule-hair:    rgba(31, 39, 64, 0.10);
  --s4-ink:          #15161A;     /* deep ink body */
  --s4-ink-deep:     #0E1116;     /* near-black for display */
  --s4-ink-mid:      #3A3F4D;     /* subdued body */
  --s4-mute:         #6B7184;     /* metadata, dates */
  --s4-accent:       #172248;     /* deep navy — the one accent */
  --s4-accent-hover: #0F1B3D;
  --s4-display:      "Source Serif 4", "EB Garamond", "Plantin", Georgia, serif;
  --s4-text:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --s4-max:          1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--s4-paper);
  color: var(--s4-ink);
  font-family: var(--s4-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a.s4-link {
  color: var(--s4-accent);
  border-bottom: 1px solid var(--s4-rule-soft);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
a.s4-link:hover { border-bottom-color: var(--s4-accent); color: var(--s4-accent-hover); }

/* ── Preview badge ───────────────────────────────────────────────── */
.s4-badge {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 200;
  background: var(--s4-accent);
  color: #F2EAD3;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 1px;
  box-shadow: 0 6px 18px rgba(15, 27, 61, 0.22);
}

/* ── Container ───────────────────────────────────────────────────── */
.s4-wrap {
  max-width: var(--s4-max);
  margin: 0 auto;
  padding: 0 36px;
}
.s4-wrap-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 720px) {
  .s4-wrap, .s4-wrap-narrow { padding: 0 22px; }
}

/* ── Top nav (two-tier — Cravath move) ───────────────────────────── */
.s4-topbar {
  border-bottom: 1px solid var(--s4-rule-hair);
  background: var(--s4-paper);
}
.s4-topbar-inner {
  max-width: var(--s4-max);
  margin: 0 auto;
  padding: 14px 36px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.s4-mark {
  font-family: var(--s4-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
}
.s4-mark em {
  font-style: italic;
  font-weight: 400;
  color: var(--s4-accent);
}
.s4-mark-sub {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  margin-left: 14px;
  border-left: 1px solid var(--s4-rule-soft);
  padding-left: 14px;
  font-weight: 500;
}

/* primary nav row */
.s4-nav-primary {
  border-top: 1px solid var(--s4-rule-hair);
  border-bottom: 1px solid var(--s4-rule-soft);
  background: var(--s4-paper);
}
.s4-nav-primary-inner {
  max-width: var(--s4-max);
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.s4-nav-primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}
.s4-nav-primary li {
  display: flex;
}
.s4-nav-primary a {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--s4-ink);
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.s4-nav-primary a:hover {
  border-bottom-color: var(--s4-accent);
  color: var(--s4-accent);
}
.s4-nav-primary a.is-current {
  border-bottom-color: var(--s4-accent);
  color: var(--s4-accent);
}
.s4-nav-signin {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
}
.s4-nav-signin a:hover { color: var(--s4-accent); }

@media (max-width: 920px) {
  .s4-nav-primary a { padding: 14px 14px; font-size: 12px; }
  .s4-nav-signin { padding-left: 10px; }
}
@media (max-width: 680px) {
  .s4-topbar-inner { flex-wrap: wrap; }
  .s4-nav-primary ul { flex-wrap: wrap; }
  .s4-nav-primary a { padding: 12px 12px; font-size: 11.5px; }
  .s4-nav-signin { display: none; }
}

/* Language switcher inside the primary nav signin slot */
.s4-nav-langswitch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.s4-lang-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease;
}
.s4-lang-btn:hover { color: var(--s4-accent); }
.s4-lang-btn.is-active {
  color: var(--s4-accent);
  font-weight: 600;
}
.s4-lang-sep {
  color: var(--s4-rule-soft);
  font-size: 11px;
  font-weight: 300;
}

/* Flash messages — typeset banner above main */
.s4-flash {
  background: var(--s4-paper);
  border-bottom: 1px solid var(--s4-rule-soft);
  padding: 12px 0;
}
.s4-flash-item {
  padding: 10px 14px;
  border-left: 3px solid var(--s4-accent);
  background: var(--s4-paper-2);
  font-family: var(--s4-text);
  font-size: 14px;
  color: var(--s4-ink);
  margin-bottom: 6px;
  line-height: 1.5;
}
.s4-flash-item:last-child { margin-bottom: 0; }
.s4-flash-error    { border-left-color: #6E2233; color: #6E2233; }
.s4-flash-success  { border-left-color: #2F5742; color: #2F5742; }
.s4-flash-warning  { border-left-color: #8C5A1F; color: #8C5A1F; }

/* ── Hero — descriptive positioning + sliding admissions roll ────── */
.s4-hero {
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
  margin-bottom: 22px;
}
.s4-hero-eyebrow .s4-eyebrow-bar {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--s4-accent);
  vertical-align: middle;
  margin-right: 12px;
  position: relative;
  top: -2px;
}

/* Sliding admissions roll — full-bleed strip between eyebrow and headline.
   Single ink color, generous gap, edges fade to paper via mask. */
.s4-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--s4-rule-soft);
  border-bottom: 1px solid var(--s4-rule-soft);
  padding: 24px 0;
  margin-bottom: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.s4-marquee-track {
  display: flex;
  align-items: baseline;
  gap: 36px;
  width: max-content;
  animation: s4-marquee-scroll 90s linear infinite;
}
.s4-marquee:hover .s4-marquee-track { animation-play-state: paused; }
.s4-marquee-item {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  flex: 0 0 auto;
}
.s4-marquee-name {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
}
.s4-marquee-sep {
  flex: 0 0 auto;
  font-family: var(--s4-display);
  font-size: 22px;
  color: var(--s4-rule-strong, #b3a890);
  user-select: none;
}
@keyframes s4-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .s4-marquee-track { animation: none; }
  .s4-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
  }
}
@media (max-width: 720px) {
  .s4-marquee { padding: 18px 0; margin-bottom: 40px; }
  .s4-marquee-name { font-size: 18px; }
  .s4-marquee-sep { font-size: 16px; }
  .s4-marquee-track { gap: 24px; }
}

.s4-hero-claim {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
  margin: 0 0 28px;
  max-width: 26ch;
}
.s4-hero-claim em {
  font-style: italic;
  color: var(--s4-accent);
  font-weight: 400;
}
.s4-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--s4-ink-mid);
  max-width: 56ch;
  margin: 0 0 40px;
}

/* The single quiet primary CTA — text + arrow, not a marketing block */
.s4-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 22px;
  background: var(--s4-accent);
  color: #F2EAD3;
  font-family: var(--s4-text);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--s4-accent);
  border-radius: 1px;
  transition: background .18s ease, color .18s ease;
}
.s4-cta:hover { background: var(--s4-accent-hover); }
.s4-cta-arrow { display: inline-block; transition: transform .18s ease; }
.s4-cta:hover .s4-cta-arrow { transform: translateX(3px); }

/* Quiet inline CTA used inside body sections */
.s4-cta-quiet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--s4-text);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--s4-accent);
  border-bottom: 1px solid var(--s4-accent);
  padding: 0 0 6px;
}
.s4-cta-quiet:hover { color: var(--s4-accent-hover); border-bottom-color: var(--s4-accent-hover); }

/* ── Recent matters / Recent students — list grammar (Cravath) ──── */
.s4-recent {
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-section-label h2 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  margin: 0;
  color: var(--s4-ink-deep);
}
.s4-section-label h2 em {
  font-style: italic;
  color: var(--s4-accent);
  font-weight: 400;
  margin-right: 6px;
}
.s4-recent-more {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-section-label .s4-section-meta {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
}

.s4-list-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 90px;
  align-items: baseline;
  gap: 28px;
  padding: 22px 0 20px;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-list-row:first-of-type { border-top: none; padding-top: 6px; }
.s4-list-date {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
}
.s4-list-headline {
  font-family: var(--s4-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
}
.s4-list-headline em { font-style: italic; color: var(--s4-accent); }
.s4-list-detail {
  font-family: var(--s4-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--s4-ink-mid);
}
.s4-list-tag {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
  text-align: right;
}
@media (max-width: 760px) {
  .s4-list-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .s4-list-tag { text-align: left; }
}

/* ── Services band — typeset list (Foster's Expertise) ──────────── */
.s4-services {
  padding: 80px 0 88px;
  background: var(--s4-paper-2);
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-services-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-services-head h2 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-services-head p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--s4-ink-mid);
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 760px) {
  .s4-services-head { grid-template-columns: 1fr; gap: 16px; }
}

.s4-service {
  display: grid;
  grid-template-columns: 60px 320px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-service:last-of-type { border-bottom: 1px solid var(--s4-rule-hair); }
.s4-service-num {
  font-family: var(--s4-display);
  font-size: 18px;
  font-style: italic;
  color: var(--s4-accent);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.s4-service-title {
  font-family: var(--s4-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
}
.s4-service-desc {
  font-family: var(--s4-text);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--s4-ink-mid);
}
@media (max-width: 820px) {
  .s4-service { grid-template-columns: 1fr; gap: 6px; }
}

.s4-services-cta {
  margin-top: 42px;
  text-align: left;
}

/* ── Outcomes / proof section — text-led, no cards ───────────────── */
.s4-outcomes {
  padding: 80px 0 76px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-outcome {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding: 38px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-outcome:first-of-type { border-top: 1px solid var(--s4-rule-soft); }
.s4-outcome-meta {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
  line-height: 1.7;
}
.s4-outcome-meta strong {
  display: block;
  font-family: var(--s4-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s4-accent);
  margin-bottom: 6px;
}
.s4-outcome-body p {
  font-family: var(--s4-display);
  font-size: 22px;
  line-height: 1.45;
  color: var(--s4-ink-deep);
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.s4-outcome-body p:last-child { margin-bottom: 0; }
.s4-outcome-body p.s4-outcome-foot {
  font-family: var(--s4-text);
  font-size: 14px;
  color: var(--s4-ink-mid);
  font-style: normal;
}
@media (max-width: 820px) {
  .s4-outcome { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Principal section — the homepage bio ────────────────────────── */
.s4-principal {
  padding: 88px 0 96px;
  background: var(--s4-paper);
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-principal-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-principal-head .s4-principal-label {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
}
.s4-principal-head h2 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--s4-ink-deep);
}
.s4-principal-head h2 em { font-style: italic; color: var(--s4-accent); }

.s4-principal-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
}
@media (max-width: 880px) {
  .s4-principal-head, .s4-principal-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Principal photo (homepage bio section) — sits above the credentials */
.s4-principal-photo {
  margin: 0 0 22px;
  max-width: 320px;
}
.s4-principal-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  filter: grayscale(15%);
  box-shadow: 0 1px 0 var(--s4-rule-soft), 0 8px 24px rgba(20, 24, 36, 0.06);
}
@media (max-width: 880px) {
  .s4-principal-photo { max-width: 240px; margin: 0 auto 18px; }
}

.s4-principal-cred {
  border-top: 1px solid var(--s4-rule-soft);
  padding-top: 18px;
}
.s4-principal-cred dt {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
  margin-top: 14px;
}
.s4-principal-cred dt:first-of-type { margin-top: 0; }
.s4-principal-cred dd {
  margin: 4px 0 0;
  font-family: var(--s4-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
}

.s4-principal-body p {
  font-family: var(--s4-display);
  font-size: 19px;
  line-height: 1.66;
  color: var(--s4-ink);
  margin: 0 0 18px;
  font-weight: 400;
}
.s4-principal-body p:last-of-type { margin-bottom: 28px; }

/* ── Insights / FAQ teaser ───────────────────────────────────────── */
.s4-insights {
  padding: 70px 0 80px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-insights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 820px) {
  .s4-insights-row { grid-template-columns: 1fr; gap: 28px; }
}
.s4-insights-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-insights-item:first-of-type { border-top: 1px solid var(--s4-rule-soft); }
.s4-insights-q {
  font-family: var(--s4-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--s4-ink-deep);
  font-weight: 400;
}
.s4-insights-a {
  font-family: var(--s4-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--s4-ink-mid);
  margin-top: 6px;
}
.s4-insights-tag {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
  padding-top: 4px;
}

/* ── Footer CTA — same primary CTA, third placement ─────────────── */
.s4-footcta {
  padding: 90px 0 84px;
  background: var(--s4-paper-2);
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-footcta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: end;
}
.s4-footcta h2 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--s4-ink-deep);
  max-width: 22ch;
}
.s4-footcta h2 em { font-style: italic; color: var(--s4-accent); }
.s4-footcta p {
  font-family: var(--s4-text);
  font-size: 15px;
  line-height: 1.65;
  color: var(--s4-ink-mid);
  max-width: 52ch;
  margin: 0;
}
.s4-footcta .s4-footcta-action {
  text-align: right;
}
@media (max-width: 760px) {
  .s4-footcta-grid { grid-template-columns: 1fr; gap: 24px; }
  .s4-footcta .s4-footcta-action { text-align: left; }
}

/* ── Page footer ─────────────────────────────────────────────────── */
.s4-footer {
  background: var(--s4-paper);
  padding: 56px 0 38px;
}
.s4-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--s4-rule-hair);
}
.s4-footer h6 {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin: 0 0 14px;
}
.s4-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.s4-footer li {
  font-family: var(--s4-text);
  font-size: 14px;
  color: var(--s4-ink);
  margin: 0 0 8px;
}
.s4-footer li a:hover { color: var(--s4-accent); }
.s4-footer-mark {
  font-family: var(--s4-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
  margin-bottom: 12px;
}
.s4-footer-mark em { font-style: italic; color: var(--s4-accent); font-weight: 400; }
.s4-footer-blurb {
  font-family: var(--s4-text);
  font-size: 13px;
  line-height: 1.65;
  color: var(--s4-ink-mid);
  max-width: 38ch;
}
.s4-footer-fine {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--s4-mute);
}
@media (max-width: 820px) {
  .s4-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 540px) {
  .s4-footer-grid { grid-template-columns: 1fr; }
  .s4-footer-fine { flex-direction: column; gap: 8px; }
}

/* ──────────────────────────────────────────────────────────────────
   ABOUT PAGE — long-form principal biography
   ──────────────────────────────────────────────────────────────── */
.s4-about-hero {
  padding: 84px 0 36px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-about-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
}
@media (max-width: 880px) {
  .s4-about-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}
.s4-about-portrait {
  margin: 0;
  max-width: 280px;
  justify-self: end;
}
.s4-about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  filter: grayscale(15%);
  box-shadow: 0 1px 0 var(--s4-rule-soft), 0 8px 24px rgba(20, 24, 36, 0.06);
}
@media (max-width: 880px) {
  .s4-about-portrait { max-width: 220px; justify-self: start; }
}
.s4-about-eyebrow {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
  margin-bottom: 22px;
}
.s4-about-title {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--s4-ink-deep);
  max-width: 22ch;
  margin: 0 0 22px;
}
.s4-about-title em { font-style: italic; color: var(--s4-accent); }
.s4-about-deck {
  font-family: var(--s4-display);
  font-size: 21px;
  line-height: 1.55;
  color: var(--s4-ink-mid);
  max-width: 60ch;
  margin: 0;
  font-style: italic;
}

.s4-about-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-about-meta div { font-family: var(--s4-text); }
.s4-about-meta dt {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 6px;
}
.s4-about-meta dd {
  margin: 0;
  font-family: var(--s4-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
}
@media (max-width: 760px) {
  .s4-about-meta { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

.s4-about-body {
  padding: 64px 0 80px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-about-body .s4-prose {
  max-width: 70ch;
  margin: 0 auto;
}
.s4-about-body .s4-prose p {
  font-family: var(--s4-display);
  font-size: 20px;
  line-height: 1.72;
  color: var(--s4-ink);
  margin: 0 0 20px;
}
.s4-dropcap::first-letter {
  font-family: var(--s4-display);
  font-size: 5em;
  float: left;
  line-height: 0.86;
  margin: 0.06em 0.10em 0 0;
  color: var(--s4-accent);
  font-weight: 400;
  font-style: italic;
}
/* Korean text — suppress the English-style dropcap. CJK characters look
   awkward when rendered 5x larger as a free-standing initial: the stroke
   weight and proportions are designed for body-size, not display-size. */
html[lang^="ko"] .s4-dropcap::first-letter {
  font-size: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  color: inherit;
  font-style: inherit;
}
.s4-section-rule {
  width: 60px;
  height: 1px;
  background: var(--s4-accent);
  margin: 38px 0;
}
.s4-prose-h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 36px 0 16px;
}

.s4-about-pull {
  font-family: var(--s4-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--s4-accent);
  margin: 30px 0 30px;
  padding-left: 22px;
  border-left: 2px solid var(--s4-accent);
}

/* ──────────────────────────────────────────────────────────────────
   SERVICES PAGE — numbered practice areas (I, II, III, IV)
   ──────────────────────────────────────────────────────────────── */
.s4-pa-hero {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-pa-title {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--s4-ink-deep);
  max-width: 18ch;
  margin: 14px 0 22px;
}
.s4-pa-title em { font-style: italic; color: var(--s4-accent); }
.s4-pa-deck {
  font-family: var(--s4-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--s4-ink-mid);
  max-width: 58ch;
  margin: 0;
}

.s4-pa-list { padding: 24px 0 56px; }

.s4-pa {
  display: grid;
  grid-template-columns: 96px 1fr 280px;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--s4-rule-soft);
  align-items: start;
}
.s4-pa:last-of-type { border-bottom: 1px solid var(--s4-rule-soft); }
.s4-pa-num {
  font-family: var(--s4-display);
  font-size: 56px;
  font-style: italic;
  color: var(--s4-accent);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.s4-pa-main h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.008em;
  color: var(--s4-ink-deep);
  margin: 0 0 18px;
  line-height: 1.15;
}
.s4-pa-main p {
  font-family: var(--s4-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--s4-ink-mid);
  margin: 0 0 14px;
  max-width: 58ch;
}
.s4-pa-side {
  border-left: 1px solid var(--s4-rule-soft);
  padding-left: 24px;
}
.s4-pa-side h6 {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin: 0 0 12px;
}
.s4-pa-side ul { list-style: none; margin: 0 0 18px; padding: 0; }
.s4-pa-side li {
  font-family: var(--s4-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--s4-ink);
  padding: 10px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pa-side li:first-child { border-top: none; padding-top: 0; }
.s4-pa-side li span {
  display: block;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--s4-mute);
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.5;
}
.s4-pa-tiers li.s4-pa-tier-rec em {
  font-family: var(--s4-text);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
  font-style: normal;
  margin-left: 8px;
  border-bottom: 1px solid var(--s4-accent);
  padding-bottom: 1px;
}
.s4-pa-pricing {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--s4-mute);
  font-style: italic;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--s4-rule-hair);
}

/* Operating policies — closing band, four typeset blocks */
.s4-policies {
  padding: 70px 0 80px;
  background: var(--s4-paper-2);
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 30px;
}
@media (max-width: 920px) {
  .s4-policy-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 540px) {
  .s4-policy-grid { grid-template-columns: 1fr; }
}
.s4-policy {
  border-top: 1px solid var(--s4-rule-soft);
  padding-top: 18px;
}
.s4-policy-label {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.s4-policy-title {
  font-family: var(--s4-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin-bottom: 12px;
}
.s4-policy p {
  font-family: var(--s4-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--s4-ink-mid);
  margin: 0;
}
@media (max-width: 920px) {
  .s4-pa { grid-template-columns: 64px 1fr; gap: 24px; }
  .s4-pa-num { font-size: 40px; }
  .s4-pa-side {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--s4-rule-soft);
    padding: 20px 0 0;
  }
}

/* ──────────────────────────────────────────────────────────────────
   INSIGHTS PAGE — FAQ as always-visible Q&A blocks (list grammar)
   ──────────────────────────────────────────────────────────────── */
.s4-faq {
  padding: 60px 0 56px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-qa {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  padding: 28px 0;
  border-top: 1px solid var(--s4-rule-hair);
  align-items: start;
}
.s4-qa:first-of-type { border-top: 1px solid var(--s4-rule-soft); }
.s4-q {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-a p {
  font-family: var(--s4-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--s4-ink-mid);
  margin: 0 0 14px;
}
.s4-a p:last-child { margin-bottom: 0; }
.s4-a a.s4-link {
  font-family: var(--s4-text);
  color: var(--s4-accent);
}
@media (max-width: 820px) {
  .s4-qa { grid-template-columns: 1fr; gap: 12px; }
}

/* ──────────────────────────────────────────────────────────────────
   CONTACT PAGE — two-column: context left, form right
   ──────────────────────────────────────────────────────────────── */
.s4-contact {
  padding: 64px 0 84px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 940px) {
  .s4-contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

.s4-contact-block {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--s4-rule-hair);
}
.s4-contact-block:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.s4-contact-block-label {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 14px;
}
.s4-contact-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.s4-contact-steps li {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-contact-steps li:first-child { border-top: none; padding-top: 0; }
.s4-step-num {
  font-family: var(--s4-display);
  font-style: italic;
  font-size: 22px;
  color: var(--s4-accent);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.s4-step-title {
  font-family: var(--s4-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.s4-step-sub {
  font-family: var(--s4-text);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--s4-ink-mid);
}
.s4-contact-email {
  display: inline-block;
  font-family: var(--s4-display);
  font-size: 18px;
  font-style: italic;
  color: var(--s4-accent);
  border-bottom: 1px solid var(--s4-rule-soft);
  padding-bottom: 2px;
}
.s4-contact-meta {
  margin-top: 10px;
  font-family: var(--s4-text);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--s4-mute);
}
.s4-contact-portal p {
  font-family: var(--s4-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--s4-ink-mid);
  margin: 0 0 12px;
  max-width: 38ch;
}

/* Form — hairlines on cream paper, no shadows */
.s4-form {
  padding: 32px 36px 32px;
  border: 1px solid var(--s4-rule-soft);
  background: var(--s4-paper);
}
.s4-form-head {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-form-head h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0 0 4px;
}
.s4-form-head p {
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-mute);
  margin: 0;
}
.s4-form-row { margin-bottom: 18px; }
.s4-form-row label {
  display: block;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.s4-form-req { color: var(--s4-accent); margin-left: 2px; }
.s4-form-row input[type="text"],
.s4-form-row input[type="email"],
.s4-form-row select,
.s4-form-row textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--s4-rule-soft);
  background: transparent;
  padding: 10px 0;
  font-family: var(--s4-display);
  font-size: 16px;
  color: var(--s4-ink-deep);
  outline: none;
  transition: border-color .18s ease;
  border-radius: 0;
  font-weight: 400;
}
.s4-form-row textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
  font-size: 15px;
  font-family: var(--s4-text);
}
.s4-form-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--s4-mute) 50%),
                    linear-gradient(135deg, var(--s4-mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px),
                       calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
.s4-form-row input:focus,
.s4-form-row select:focus,
.s4-form-row textarea:focus {
  border-bottom-color: var(--s4-accent);
}
.s4-form-row input::placeholder,
.s4-form-row textarea::placeholder {
  color: var(--s4-mute);
  font-style: italic;
  opacity: 1;
}
.s4-form-actions {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-form-actions .s4-cta {
  border: none;
  cursor: pointer;
  font-family: var(--s4-text);
}
.s4-form-fine {
  margin: 12px 0 0;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--s4-mute);
  font-style: italic;
}
@media (max-width: 600px) {
  .s4-form { padding: 22px 22px 24px; }
}

/* ──────────────────────────────────────────────────────────────────
   PORTAL PAGE — admissions dossier (tabular, hairlines, no cards)
   ──────────────────────────────────────────────────────────────── */
.s4-portal-shell {
  background: var(--s4-paper);
  min-height: 100vh;
}
.s4-portal-bar {
  border-bottom: 1px solid var(--s4-rule-soft);
  background: var(--s4-paper);
}
.s4-portal-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.s4-portal-mark {
  font-family: var(--s4-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
}
.s4-portal-mark em { font-style: italic; color: var(--s4-accent); font-weight: 400; }
.s4-portal-mark-sub {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  margin-left: 12px;
  border-left: 1px solid var(--s4-rule-soft);
  padding-left: 12px;
  font-weight: 500;
}
.s4-portal-user {
  font-family: var(--s4-text);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--s4-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}
.s4-portal-user .s4-portal-user-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
}
.s4-portal-user .s4-portal-mono {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--s4-accent);
  color: #F2EAD3;
  border-radius: 50%;
  font-family: var(--s4-display);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
}

.s4-portal-tabs {
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-portal-tabs-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  gap: 0;
}
.s4-portal-tabs a {
  font-family: var(--s4-text);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-ink-mid);
  padding: 14px 22px;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.s4-portal-tabs a.is-current {
  color: var(--s4-accent);
  border-bottom-color: var(--s4-accent);
}

.s4-portal-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 38px 36px 80px;
}

.s4-portal-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--s4-rule-soft);
  margin-bottom: 30px;
}
.s4-portal-head h1 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: -0.008em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-portal-head h1 em { font-style: italic; color: var(--s4-accent); }
.s4-portal-head-meta {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
}

.s4-portal-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
}
@media (max-width: 940px) {
  .s4-portal-grid { grid-template-columns: 1fr; gap: 28px; }
}

.s4-portal-section {
  margin-bottom: 36px;
}
.s4-portal-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s4-rule-soft);
  margin-bottom: 14px;
}
.s4-portal-section-head h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
}
.s4-portal-section-head .meta {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 500;
}

.s4-dossier {
  width: 100%;
  border-collapse: collapse;
}
.s4-dossier th, .s4-dossier td {
  text-align: left;
  padding: 14px 12px 14px 0;
  font-family: var(--s4-text);
  font-size: 13.5px;
  border-bottom: 1px solid var(--s4-rule-hair);
  vertical-align: baseline;
}
.s4-dossier th {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  border-bottom: 1px solid var(--s4-rule-soft);
  padding-bottom: 10px;
}
.s4-dossier td.s4-d-name {
  font-family: var(--s4-display);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  font-weight: 400;
}
.s4-dossier td.s4-d-name small {
  display: block;
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}
.s4-d-tier {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.s4-d-tier.is-reach   { color: #6E2233; }
.s4-d-tier.is-match   { color: var(--s4-accent); }
.s4-d-tier.is-likely  { color: #2F5742; }
.s4-d-num {
  font-family: var(--s4-display);
  font-style: italic;
  font-size: 18px;
  color: var(--s4-ink-deep);
}
.s4-dossier-group-row td {
  border-bottom: none;
  padding-top: 26px;
  padding-bottom: 6px;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
}

.s4-portal-aside {
  border-left: 1px solid var(--s4-rule-soft);
  padding-left: 28px;
}
.s4-portal-aside h4 {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin: 0 0 12px;
}
.s4-aside-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--s4-rule-hair);
}
.s4-aside-block:first-of-type { border-top: 1px solid var(--s4-rule-soft); }
.s4-aside-headline {
  font-family: var(--s4-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  line-height: 1.35;
}
.s4-aside-meta {
  display: block;
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.s4-aside-section { margin-bottom: 36px; }

.s4-note {
  font-family: var(--s4-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--s4-ink);
  font-style: italic;
  padding: 18px 0;
  border-top: 1px solid var(--s4-rule-soft);
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-note .from {
  display: block;
  font-style: normal;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  margin-top: 10px;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   PORTAL PLATFORM — separate-platform surface (.s4-pp-*)

   Architecture: own DOCTYPE template (portal_base.html), own chrome,
   no marketing nav. Brand DNA preserved (cream sidebar + navy accent
   + Source Serif 4 display) but the working area shifts to white
   ground and denser app rhythm — so the portal reads as the firm's
   workshop, not the storefront.
   ──────────────────────────────────────────────────────────────── */

/* Body uses white ground for the working area; sidebar carries cream */
.s4-pp-body {
  background: #FFFFFF;
  color: var(--s4-ink);
  font-family: var(--s4-text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.s4-pp-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}
@media (max-width: 880px) {
  .s4-pp-shell { grid-template-columns: 64px 1fr; }
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.s4-pp-sidebar {
  background: var(--s4-paper);
  border-right: 1px solid var(--s4-rule-soft);
  padding: 22px 0 22px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.s4-pp-mark {
  display: block;
  padding: 0 22px 22px;
  border-bottom: 1px solid var(--s4-rule-soft);
  font-family: var(--s4-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
  text-decoration: none;
  margin-bottom: 14px;
}
.s4-pp-mark em {
  font-style: italic;
  font-weight: 400;
  color: var(--s4-accent);
}
.s4-pp-mark-sub {
  display: block;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 880px) {
  .s4-pp-mark { padding: 0 0 14px; text-align: center; font-size: 18px; }
  .s4-pp-mark em { display: block; }
  .s4-pp-mark-sub { display: none; }
}

.s4-pp-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  gap: 1px;
}
.s4-pp-sidebar-foot {
  padding: 14px 12px 0;
  border-top: 1px solid var(--s4-rule-soft);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Sidebar section labels (portal nav grouping — additive, theming via vars) */
.s4-pp-navgroup {
  padding: 15px 12px 4px;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
}
.s4-pp-navgroup:first-child { padding-top: 2px; }
.s4-pp-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--s4-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--s4-ink-mid);
  text-decoration: none;
  border-radius: 1px;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.s4-pp-link i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  color: var(--s4-mute);
  transition: color .15s ease;
}
.s4-pp-link:hover {
  background: rgba(31, 39, 64, 0.05);
  color: var(--s4-ink-deep);
}
.s4-pp-link:hover i { color: var(--s4-ink); }
.s4-pp-link.is-current,
.s4-pp-link.active {
  background: var(--s4-accent);
  color: #F2EAD3;
}
.s4-pp-link.is-current i,
.s4-pp-link.active i { color: #F2EAD3; }
/* Sign-out button is a <button> styled as a sidebar link */
.s4-pp-signout-form { margin: 0; padding: 0; }
.s4-pp-link.s4-pp-signout {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.s4-pp-link.s4-pp-signout:hover {
  background: rgba(110, 34, 51, 0.08);
  color: #6E2233;
}
.s4-pp-link.s4-pp-signout:hover i { color: #6E2233; }
.s4-pp-link-tag {
  margin-left: auto;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  background: var(--s4-paper-2);
  color: var(--s4-ink);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--s4-rule-soft);
}
.s4-pp-link.is-current .s4-pp-link-tag {
  background: rgba(242, 234, 211, 0.18);
  border-color: rgba(242, 234, 211, 0.3);
  color: #F2EAD3;
}
.s4-pp-link-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s4-accent);
  flex-shrink: 0;
}
.s4-pp-link.is-current .s4-pp-link-dot { background: #F2EAD3; }
@media (max-width: 880px) {
  .s4-pp-nav, .s4-pp-sidebar-foot { padding-left: 6px; padding-right: 6px; }
  .s4-pp-link { justify-content: center; padding: 11px 8px; }
  .s4-pp-link span { display: none; }
  .s4-pp-link i { width: auto; }
  .s4-pp-link-tag, .s4-pp-link-dot { display: none; }
  .s4-pp-navgroup { display: none; }
}

/* ── App column (right of sidebar) ──────────────────────────────── */
.s4-pp-app {
  background: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.s4-pp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 36px 16px;
  border-bottom: 1px solid var(--s4-rule-soft);
  background: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 10;
}
.s4-pp-crumb {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.s4-pp-pagetitle {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.008em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-pp-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.s4-pp-iconbtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--s4-rule-soft);
  color: var(--s4-ink-mid);
  cursor: pointer;
  border-radius: 1px;
  font-size: 14px;
  position: relative;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.s4-pp-iconbtn:hover {
  background: var(--s4-paper);
  color: var(--s4-ink-deep);
  border-color: var(--s4-accent);
}
.s4-pp-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s4-accent);
  border: 1.5px solid #FFFFFF;
}
.s4-pp-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--s4-rule-soft);
  margin-left: 4px;
}
.s4-pp-user-name {
  font-family: var(--s4-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.s4-pp-user-meta {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-top: 2px;
}
.s4-pp-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--s4-accent);
  color: #F2EAD3;
  font-family: var(--s4-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .s4-pp-topbar { padding: 14px 18px; flex-wrap: wrap; gap: 14px; }
  .s4-pp-pagetitle { font-size: 22px; }
  .s4-pp-user > div { display: none; }
}

/* Main work area — white ground, dense rhythm */
.s4-pp-main {
  flex: 1;
  padding: 28px 36px 56px;
  background: #FFFFFF;
}
@media (max-width: 720px) {
  .s4-pp-main { padding: 22px 18px 44px; }
}
/* Legacy portal content carries its own .container/.row/.col Bootstrap layout —
   give it a wider canvas and reset our padding so the inner Bootstrap grid
   handles spacing. Otherwise we'd double up. */
.s4-pp-main-legacy {
  padding: 0;
  background: #FFFFFF;
}
.s4-pp-main-legacy > .container,
.s4-pp-main-legacy > .container-fluid {
  padding-top: 28px;
  padding-bottom: 56px;
}

/* Portal flash messages — inside the app shell, not full-width */
.s4-pp-flash {
  padding: 12px 36px 0;
  background: #FFFFFF;
}
.s4-pp-flash-item {
  padding: 10px 14px;
  border-left: 3px solid var(--s4-accent);
  background: var(--s4-paper-2);
  font-family: var(--s4-text);
  font-size: 14px;
  color: var(--s4-ink);
  margin-bottom: 6px;
  line-height: 1.5;
}
.s4-pp-flash-item:last-child { margin-bottom: 0; }
.s4-pp-flash-error    { border-left-color: #6E2233; color: #6E2233; }
.s4-pp-flash-success  { border-left-color: #2F5742; color: #2F5742; }
.s4-pp-flash-warning  { border-left-color: #8C5A1F; color: #8C5A1F; }

/* Body classes — switch ground based on chrome.
   sample4.css's unscoped body styles target the public site (cream paper).
   Override for portal/dashboard to keep them white-ground. */
body.ae-portal, body.ae-desk {
  background: #FFFFFF;
  font-family: var(--s4-text);
  color: var(--s4-ink);
}

/* ── Dashboard stat row ─────────────────────────────────────────── */
.s4-pp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 920px) {
  .s4-pp-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .s4-pp-stats { grid-template-columns: 1fr; }
}
.s4-pp-stat {
  border: 1px solid var(--s4-rule-soft);
  padding: 16px 18px 18px;
  background: #FFFFFF;
}
.s4-pp-stat-label {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.s4-pp-stat-value {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.01em;
  color: var(--s4-ink-deep);
  line-height: 1;
  margin-bottom: 12px;
}
.s4-pp-stat-detail {
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.s4-pp-pill {
  font-family: var(--s4-text);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 1px;
  border: 1px solid var(--s4-rule-soft);
}
.s4-pp-pill.is-reach   { color: #6E2233; border-color: rgba(110, 34, 51, 0.4); }
.s4-pp-pill.is-match   { color: var(--s4-accent); border-color: rgba(23, 34, 72, 0.4); }
.s4-pp-pill.is-likely  { color: #2F5742; border-color: rgba(47, 87, 66, 0.4); }

/* ── Two-column work grid ───────────────────────────────────────── */
.s4-pp-workgrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}
@media (max-width: 1080px) {
  .s4-pp-workgrid { grid-template-columns: 1fr; }
}
.s4-pp-col-main, .s4-pp-col-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Panel — generic working surface ────────────────────────────── */
.s4-pp-panel {
  border: 1px solid var(--s4-rule-soft);
  background: #FFFFFF;
  padding: 20px 22px 22px;
}
.s4-pp-panel-tight { padding: 16px 18px 18px; }
.s4-pp-panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s4-rule-soft);
  margin-bottom: 14px;
}
.s4-pp-panel-head h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-pp-panel-meta {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
}
.s4-pp-panel-link {
  margin-left: auto;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.s4-pp-panel-link:hover { border-bottom-color: var(--s4-accent); }
.s4-pp-panel-link i { font-size: 11px; margin-left: 3px; }

/* Note from counsel — pulled accent treatment */
.s4-pp-note {
  border-left: 3px solid var(--s4-accent);
  padding-left: 22px;
}
.s4-pp-note p {
  font-family: var(--s4-display);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: var(--s4-ink);
  margin: 0;
}

/* Right rail event blocks */
.s4-pp-event {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-event:first-of-type { border-top: none; padding-top: 2px; }
.s4-pp-event-date {
  background: var(--s4-paper);
  border: 1px solid var(--s4-rule-soft);
  text-align: center;
  padding: 4px 0 5px;
  border-radius: 1px;
}
.s4-pp-event-mo {
  font-family: var(--s4-text);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
}
.s4-pp-event-day {
  font-family: var(--s4-display);
  font-size: 18px;
  color: var(--s4-ink-deep);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.s4-pp-event-title {
  font-family: var(--s4-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
}
.s4-pp-event-sub {
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  margin-top: 1px;
}

/* Right rail request blocks */
.s4-pp-request {
  padding: 10px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-request:first-of-type { border-top: none; padding-top: 2px; }
.s4-pp-request-title {
  font-family: var(--s4-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--s4-ink-deep);
  letter-spacing: -0.005em;
}
.s4-pp-request-sub {
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  margin-top: 1px;
}
.s4-pp-aside-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--s4-rule-soft);
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-accent);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.s4-pp-aside-cta:hover {
  border-style: solid;
  background: var(--s4-paper);
}
.s4-pp-aside-cta i { font-size: 13px; }

/* Tighten dossier table inside the panel */
.s4-pp-panel .s4-dossier th,
.s4-pp-panel .s4-dossier td {
  padding: 11px 10px 11px 0;
  font-size: 13px;
}
.s4-pp-panel .s4-dossier td.s4-d-name {
  font-size: 14px;
}
.s4-pp-panel .s4-dossier td.s4-d-name small {
  font-size: 10.5px;
}

/* List-page subhead — meta sentence on the left, action link on the right */
.s4-pp-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s4-rule-soft);
  margin-bottom: 22px;
}
.s4-pp-subhead-meta {
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-mute);
  margin: 0;
  max-width: 60ch;
}

/* Default vertical rhythm for stacked panels (when not in a workgrid col) */
.s4-pp-panel + .s4-pp-panel {
  margin-top: 22px;
}

/* ── s4-pp-section — section wrapper used in SGMOS student templates ─ */
.s4-pp-section {
  /* Intentionally unstyled — used as a semantic grouping wrapper only */
}

/* ── stat-card — lightweight card surface used in SGMOS templates ─── */
.stat-card {
  background: #fff;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
}
html[data-theme="dark"] .s4-pp-app .stat-card,
html[data-theme="dark"] .stat-card {
  background: #181C24 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .stat-card strong,
html[data-theme="dark"] .stat-card strong {
  color: #ECE7DA;
}
/* Override inline child colors that bleed through on dark stat-cards */
html[data-theme="dark"] .stat-card span,
html[data-theme="dark"] .stat-card p,
html[data-theme="dark"] .stat-card td,
html[data-theme="dark"] .stat-card a {
  color: #DCD8CC !important;
}
html[data-theme="dark"] .stat-card a:hover {
  color: #E07A3C !important;
}
/* Keep explicit status colors (green done, red overdue, amber estimate) */
html[data-theme="dark"] .stat-card span[style*="color:#28a745"],
html[data-theme="dark"] .stat-card span[style*="color:#dc3545"],
html[data-theme="dark"] .stat-card span[style*="color:#856404"] {
  color: inherit !important;
}

/* ── Form inputs inside panels — dark mode ── */
html[data-theme="dark"] .s4-pp-panel input,
html[data-theme="dark"] .s4-pp-panel select,
html[data-theme="dark"] .s4-pp-panel textarea {
  background: #1e2535;
  border-color: rgba(255,255,255,0.18) !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-panel input::placeholder,
html[data-theme="dark"] .s4-pp-panel textarea::placeholder {
  color: #6b7184;
}
html[data-theme="dark"] .s4-pp-panel input:focus,
html[data-theme="dark"] .s4-pp-panel select:focus,
html[data-theme="dark"] .s4-pp-panel textarea:focus {
  border-color: #E07A3C !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(224,122,60,.2);
}

/* ── sgmos-student-card — student grid card on SGMOS consultant dashboard ── */
.sgmos-student-card {
  display: block;
  background: #fff;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  padding: .85rem 1rem;
  text-decoration: none;
  color: #1B2A4A;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sgmos-student-card:hover {
  border-color: #E07A3C;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  color: #1B2A4A;
}
.sgmos-student-card strong { color: #1B2A4A; }
.sgmos-student-card .sgmos-muted { font-size: .82rem; color: #888; margin-top: .2rem; }
html[data-theme="dark"] .sgmos-student-card {
  background: #1e2535;
  border-color: rgba(255,255,255,0.10);
  color: #e0e4ec;
}
html[data-theme="dark"] .sgmos-student-card:hover {
  border-color: #E07A3C;
}
html[data-theme="dark"] .sgmos-student-card strong { color: #e0e4ec; }
html[data-theme="dark"] .sgmos-student-card .sgmos-muted { color: #9aa0b0; }

/* Empty-state inside a panel */
.s4-pp-empty {
  text-align: center;
  padding: 32px 22px 28px;
}
.s4-pp-empty h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0 0 8px;
}
.s4-pp-empty p {
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-mute);
  margin: 0;
}

/* Inline tag inside dossier cells (e.g. "Manual" badge in My Colleges) */
.s4-d-tag {
  display: inline-block;
  font-family: var(--s4-text);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  vertical-align: middle;
}

/* ── Essay row (inside .s4-pp-panel on essays page) ──────────────── */
.s4-pp-essay {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--s4-rule-hair);
  text-decoration: none;
  color: inherit;
  transition: padding-left .15s ease;
}
.s4-pp-essay:first-of-type { border-top: none; padding-top: 4px; }
.s4-pp-essay:hover { padding-left: 4px; }
.s4-pp-essay-main { flex: 1; min-width: 0; }
.s4-pp-essay-title {
  font-family: var(--s4-display);
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  line-height: 1.3;
}
.s4-pp-essay-school,
.s4-pp-essay-subtitle {
  font-family: var(--s4-text);
  font-size: 13px;
  font-weight: 400;
  color: var(--s4-mute);
  letter-spacing: 0;
}
.s4-pp-essay-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--s4-text);
  font-size: 11.5px;
  color: var(--s4-mute);
}
.s4-pp-essay-sep { color: var(--s4-rule-strong, #b3a890); }
.s4-pp-essay-feedback { color: var(--s4-accent); }
.s4-pp-essay-date {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--s4-mute);
  flex-shrink: 0;
}
.s4-pp-essay-arrow {
  font-size: 12px;
  color: var(--s4-mute);
  flex-shrink: 0;
  transition: color .15s ease;
}
.s4-pp-essay:hover .s4-pp-essay-arrow { color: var(--s4-accent); }

/* Status pills for essays (extends .ae-pill family) */
.ae-pill-essay-not_started { background: #f3f4f6; color: #6b7280; }
.ae-pill-essay-drafting    { background: #dbeafe; color: #1e40af; }
.ae-pill-essay-reviewing   { background: #ffedd5; color: #c2410c; }
.ae-pill-essay-finalized   { background: #dcfce7; color: #166534; }

/* ── Course Plan grade columns ───────────────────────────────────── */
.s4-pp-grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) {
  .s4-pp-grade-grid { grid-template-columns: 1fr; }
}
.s4-pp-grade-col {
  border-left: 1px solid var(--s4-rule-soft);
  padding-left: 16px;
}
.s4-pp-grade-col-label {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 12px;
}
.s4-pp-course-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.s4-pp-course {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-course:first-child { border-top: none; padding-top: 0; }
.s4-pp-course-main { flex: 1; min-width: 0; }
.s4-pp-course-name {
  font-family: var(--s4-display);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  line-height: 1.3;
}
.s4-pp-course-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
}
.s4-pp-course-grade { color: var(--s4-ink-mid); font-weight: 500; }
.s4-pp-course-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.s4-pp-inline-form { margin: 0; }
.s4-pp-iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--s4-mute);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.s4-pp-iconlink:hover {
  color: var(--s4-accent);
  border-color: var(--s4-rule-soft);
}
.s4-pp-iconlink-danger:hover {
  color: #6E2233;
  border-color: rgba(110, 34, 51, 0.3);
}
.s4-pp-empty-line {
  font-family: var(--s4-text);
  font-size: 12px;
  font-style: italic;
  color: var(--s4-mute);
  margin: 0 0 10px;
}
.s4-pp-thin-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.s4-pp-thin-link:hover { border-bottom-color: var(--s4-accent); }

/* ── Card-grid pages (Activities, Essays, Projects, Classes) ─────── */
.s4-pp-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.s4-pp-card {
  display: flex;
  flex-direction: column;
}
.s4-pp-card.is-primary {
  border-color: var(--s4-accent);
  box-shadow: inset 4px 0 0 var(--s4-accent);
  padding-left: 22px;
}
.s4-pp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.s4-pp-card-title h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0;
  line-height: 1.25;
}
.s4-pp-card-tag {
  display: inline-block;
  font-family: var(--s4-text);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-accent);
  padding: 0 0 6px;
}
.s4-pp-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.s4-pp-card-meta {
  font-family: var(--s4-text);
  font-size: 11.5px;
  color: var(--s4-mute);
  margin-top: 6px;
}
.s4-pp-card-role {
  font-family: var(--s4-text);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--s4-accent);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.s4-pp-card-text {
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-ink-mid);
  margin: 8px 0 0;
  line-height: 1.55;
}
.s4-pp-card-foot {
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--s4-mute);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--s4-rule-hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.s4-pp-card-meta-inline { color: var(--s4-mute); }
.s4-pp-card-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--s4-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.s4-pp-card-meta-link:hover { border-bottom-color: var(--s4-accent); }

/* Status pills — broader coverage for project & service-request states */
.ae-pill-status-planning   { background: #f3f4f6; color: #6b7280; }
.ae-pill-status-active     { background: #dbeafe; color: #1e40af; }
.ae-pill-status-submitted  { background: #ffedd5; color: #c2410c; }
.ae-pill-status-paused     { background: #f3f4f6; color: #6b7280; }

/* ── FullCalendar re-skin (used on student & consultant calendar) ─── */
.s4-pp-app .fc {
  font-family: var(--s4-text);
}
.s4-pp-app .fc .fc-toolbar-title {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
}
.s4-pp-app .fc .fc-button {
  background: transparent;
  border: 1px solid var(--s4-rule-soft);
  color: var(--s4-ink-mid);
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 1px !important;
  text-shadow: none;
  box-shadow: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.s4-pp-app .fc .fc-button:hover {
  background: var(--s4-paper);
  color: var(--s4-ink-deep);
  border-color: var(--s4-accent);
}
.s4-pp-app .fc .fc-button-primary:not(:disabled).fc-button-active,
.s4-pp-app .fc .fc-button-primary:not(:disabled):active {
  background: var(--s4-accent);
  border-color: var(--s4-accent);
  color: #F2EAD3;
}
.s4-pp-app .fc .fc-daygrid-day-number,
.s4-pp-app .fc .fc-list-day-text,
.s4-pp-app .fc .fc-list-day-side-text {
  font-size: 12px;
  color: var(--s4-ink);
  font-weight: 400;
}
.s4-pp-app .fc .fc-col-header-cell-cushion {
  font-size: 10px;
  font-weight: 600;
  color: var(--s4-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 8px 4px;
}
.s4-pp-app .fc .fc-day-today {
  background: var(--s4-paper) !important;
}
.s4-pp-app .fc-event {
  border-radius: 1px !important;
  font-size: 11px !important;
  cursor: pointer;
  border: none !important;
  padding: 1px 4px !important;
}
.s4-pp-app .fc-list-event:hover td { background: var(--s4-paper); }
.s4-pp-app .fc table,
.s4-pp-app .fc th,
.s4-pp-app .fc td {
  border-color: var(--s4-rule-soft);
}

/* Calendar legend below the grid */
.s4-pp-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--s4-rule-soft);
  font-family: var(--s4-text);
  font-size: 11px;
  color: var(--s4-mute);
  letter-spacing: 0.04em;
}
.s4-pp-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.s4-pp-cal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  flex-shrink: 0;
}
.s4-pp-cal-dot.is-meeting   { background: #172248; }
.s4-pp-cal-dot.is-deadline  { background: #6E2233; }
.s4-pp-cal-dot.is-test      { background: #5A4A8C; }
.s4-pp-cal-dot.is-visit     { background: #2F5742; }
.s4-pp-cal-dot.is-interview { background: #1F5C6E; }
.s4-pp-cal-dot.is-task      { background: #8C5A1F; }

/* ── Modal — restrained dialog for event detail / similar ─────────── */
.s4-pp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 22, 0.55);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.s4-pp-modal-overlay.open { display: flex; }
.s4-pp-modal {
  background: #FFFFFF;
  border: 1px solid var(--s4-rule-soft);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  animation: s4ModalIn .18s ease;
}
@keyframes s4ModalIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.s4-pp-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 10px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-pp-modal-head h3 {
  font-family: var(--s4-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0;
}
.s4-pp-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--s4-mute);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.s4-pp-modal-close:hover { color: var(--s4-ink-deep); }
.s4-pp-modal-body {
  padding: 16px 22px 22px;
}
.s4-pp-modal-tag {
  display: inline-block;
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.s4-pp-modal-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-ink);
  margin-bottom: 10px;
}
.s4-pp-modal-row i {
  color: var(--s4-accent);
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
}

/* ── Message thread (student & consultant messaging) ───────────── */
.s4-pp-thread {
  max-height: 540px;
  overflow-y: auto;
  padding: 8px 4px 12px;
}
.s4-pp-msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  max-width: 78%;
}
.s4-pp-msg.is-mine {
  align-self: flex-end;
  margin-left: auto;
  align-items: flex-end;
}
.s4-pp-msg.is-theirs {
  align-self: flex-start;
}
.s4-pp-msg-bubble {
  font-family: var(--s4-text);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--s4-ink);
  background: var(--s4-paper);
  border: 1px solid var(--s4-rule-soft);
  padding: 10px 14px;
}
.s4-pp-msg.is-mine .s4-pp-msg-bubble {
  background: var(--s4-accent);
  color: #F2EAD3;
  border-color: var(--s4-accent);
}
.s4-pp-msg-meta {
  font-family: var(--s4-text);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--s4-mute);
  margin-top: 4px;
}
.s4-pp-msg-sep { color: var(--s4-rule-strong, #b3a890); margin: 0 4px; }

.s4-pp-compose {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--s4-rule-soft);
}
.s4-pp-compose-input {
  flex: 1;
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-ink);
  background: #FFFFFF;
  border: 1px solid var(--s4-rule-soft);
  padding: 10px 12px;
  resize: vertical;
  min-height: 60px;
}
.s4-pp-compose-input:focus { outline: none; border-color: var(--s4-accent); }
.s4-pp-compose-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--s4-accent);
  border: 1px solid var(--s4-accent);
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #F2EAD3;
  cursor: pointer;
  transition: background .15s ease;
  flex-shrink: 0;
  align-self: stretch;
}
.s4-pp-compose-send:hover { background: var(--s4-accent-hover); }

/* Career-results panel meta row */
.s4-pp-career-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--s4-text);
  font-size: 12px;
  color: var(--s4-mute);
  padding-top: 12px;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-career-meta strong {
  font-weight: 600;
  color: var(--s4-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}

/* Per-grade notes panel — replaces the warm-beige .grade-notes-panel */
.s4-pp-notes {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--s4-rule-soft);
}
.s4-pp-notes-label {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin-bottom: 10px;
}
.s4-pp-notes-input {
  width: 100%;
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-ink);
  background: var(--s4-paper);
  border: 1px solid var(--s4-rule-soft);
  padding: 10px 12px;
  resize: vertical;
  display: block;
}
.s4-pp-notes-input:focus {
  outline: none;
  border-color: var(--s4-accent);
}
.s4-pp-notes-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--s4-rule-soft);
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-accent);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.s4-pp-notes-save:hover {
  border-color: var(--s4-accent);
  background: var(--s4-paper);
}

/* ─────────────────────────────────────────────────────────────────────
   Dark mode — scoped to portal & dashboard surfaces only, controlled
   by the user toggle in the topbar (sets html[data-theme="dark"] from
   localStorage). Falls back to OS preference on first visit via the
   inline init script in base.html. Public marketing site stays cream
   paper regardless. The cream sidebar stays as a parchment column
   against the dark working area.
   ───────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body.ae-portal,
html[data-theme="dark"] body.ae-desk {
  background: #0F1216;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app {
  background: #0F1216;
}
html[data-theme="dark"] .s4-pp-main,
html[data-theme="dark"] .s4-pp-main-legacy,
html[data-theme="dark"] .s4-pp-flash {
  background: #0F1216;
}
html[data-theme="dark"] .s4-pp-topbar {
  background: #11141A;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* Sidebar — darken for dark mode (light-mode keeps the cream paper). */
html[data-theme="dark"] .s4-pp-sidebar {
  background: #11141A;
  border-right-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-mark {
  color: #ECE7DA;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-mark em {
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-mark-sub {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-link {
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-link i {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-pp-link:hover i {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-pp-sidebar-foot {
  border-top-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-link.s4-pp-signout:hover {
  background: rgba(212, 154, 168, 0.12);
  color: #D49AA8;
}
html[data-theme="dark"] .s4-pp-link.s4-pp-signout:hover i {
  color: #D49AA8;
}
html[data-theme="dark"] .s4-pp-link-tag {
  background: #1F242E;
  color: #B5BAC9;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .s4-pp-link-dot {
  background: #9CACD0;
}
html[data-theme="dark"] .s4-pp-pagetitle,
html[data-theme="dark"] .s4-pp-user-name,
html[data-theme="dark"] .s4-pp-stat-value,
html[data-theme="dark"] .s4-pp-panel-head h3,
html[data-theme="dark"] .s4-pp-event-title,
html[data-theme="dark"] .s4-pp-event-day,
html[data-theme="dark"] .s4-pp-request-title {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-pp-crumb,
html[data-theme="dark"] .s4-pp-user-meta,
html[data-theme="dark"] .s4-pp-stat-label,
html[data-theme="dark"] .s4-pp-panel-meta,
html[data-theme="dark"] .s4-pp-stat-detail,
html[data-theme="dark"] .s4-pp-event-sub,
html[data-theme="dark"] .s4-pp-request-sub {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-stat,
html[data-theme="dark"] .s4-pp-panel {
  background: #181C24;
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-event,
html[data-theme="dark"] .s4-pp-request {
  border-top-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .s4-pp-event-date {
  background: #1F242E;
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-event-mo,
html[data-theme="dark"] .s4-pp-panel-link,
html[data-theme="dark"] .s4-pp-aside-cta {
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-aside-cta {
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .s4-pp-aside-cta:hover {
  background: #1F242E;
}
html[data-theme="dark"] .s4-pp-pill {
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .s4-pp-pill.is-reach   { color: #D49AA8; border-color: rgba(212, 154, 168, 0.45); }
html[data-theme="dark"] .s4-pp-pill.is-match   { color: #9CACD0; border-color: rgba(156, 172, 208, 0.45); }
html[data-theme="dark"] .s4-pp-pill.is-likely  { color: #A8C9B6; border-color: rgba(168, 201, 182, 0.45); }
html[data-theme="dark"] .s4-pp-flash-error    { color: #D49AA8; border-left-color: #C58895; }
html[data-theme="dark"] .s4-pp-flash-success  { color: #A8C9B6; border-left-color: #88B59C; }
html[data-theme="dark"] .s4-pp-flash-warning  { color: #D8B68C; border-left-color: #C2A077; }

/* ── Legacy .ae-* surfaces — fallback while pages still use the old
   design system (preferences, course plan, activities, etc.). Remapping
   the surface variables flips every .ae-card, .ae-table, .ae-stat-card,
   .ae-list-item, etc. without touching their per-rule definitions. ─── */
html[data-theme="dark"] .s4-pp-app {
  --ae-bg:          #0F1216;
  --ae-bg-light:    #1F242E;
  --ae-bg-card:     #181C24;
  --ae-border:      rgba(255, 255, 255, 0.10);
  --ae-text:        #DCD8CC;
  --ae-muted:       #8E94A6;
  --ae-shadow:      none;
  --ae-shadow-sm:   none;
  --ae-shadow-lg:   none;
}

/* Places .ae-* uses navy as TEXT color (not background) — needs lifting
   off the dark card so it stays readable. */
html[data-theme="dark"] .s4-pp-app .ae-stat-card-num,
html[data-theme="dark"] .s4-pp-app .ae-event-day,
html[data-theme="dark"] .s4-pp-app .ae-section-header,
html[data-theme="dark"] .s4-pp-app .ae-text-primary,
html[data-theme="dark"] .s4-pp-app .ae-link {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-pp-app .ae-link:hover {
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .ae-empty-icon,
html[data-theme="dark"] .s4-pp-app .ae-stat-card-icon {
  color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .s4-pp-app .ae-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .s4-pp-app .ae-row-notes td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Form controls — Bootstrap defaults force white. Invert inside the
   portal chrome when dark. */
html[data-theme="dark"] .s4-pp-app input[type="text"],
html[data-theme="dark"] .s4-pp-app input[type="email"],
html[data-theme="dark"] .s4-pp-app input[type="password"],
html[data-theme="dark"] .s4-pp-app input[type="number"],
html[data-theme="dark"] .s4-pp-app input[type="search"],
html[data-theme="dark"] .s4-pp-app input[type="date"],
html[data-theme="dark"] .s4-pp-app input[type="url"],
html[data-theme="dark"] .s4-pp-app input[type="tel"],
html[data-theme="dark"] .s4-pp-app textarea,
html[data-theme="dark"] .s4-pp-app select,
html[data-theme="dark"] .s4-pp-app .form-control,
html[data-theme="dark"] .s4-pp-app .form-select {
  background: #181C24;
  color: #ECE7DA;
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .s4-pp-app input::placeholder,
html[data-theme="dark"] .s4-pp-app textarea::placeholder,
html[data-theme="dark"] .s4-pp-app .form-control::placeholder {
  color: #6B7184;
  opacity: 1;
}
html[data-theme="dark"] .s4-pp-app .form-label,
html[data-theme="dark"] .s4-pp-app label {
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .form-text,
html[data-theme="dark"] .s4-pp-app .text-muted {
  color: #8E94A6 !important;
}

/* Bootstrap modal & dropdown — used in a few legacy flows. */
html[data-theme="dark"] .s4-pp-app .modal-content,
html[data-theme="dark"] .s4-pp-app .dropdown-menu {
  background: #181C24;
  border-color: rgba(255, 255, 255, 0.10);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .dropdown-item {
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .dropdown-item:hover,
html[data-theme="dark"] .s4-pp-app .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #ECE7DA;
}

/* ── Per-template inline-styled page shells ───────────────────────────
   Calendar / Classes / Essays / Projects each inject their own CSS in
   {% block extra_head %} hard-coding #F0F2F7 page grounds and #fff
   cards. Override here so their templates need no edits. */
html[data-theme="dark"] .cal-page,
html[data-theme="dark"] .cls-page,
html[data-theme="dark"] .essay-page,
html[data-theme="dark"] .proj-page {
  background: #0F1216 !important;
}
html[data-theme="dark"] .cal-header,
html[data-theme="dark"] .cal-card,
html[data-theme="dark"] .ev-modal,
html[data-theme="dark"] .cls-header,
html[data-theme="dark"] .cls-card,
html[data-theme="dark"] .session-row,
html[data-theme="dark"] .essay-header,
html[data-theme="dark"] .essay-card,
html[data-theme="dark"] .proj-header,
html[data-theme="dark"] .proj-card,
html[data-theme="dark"] .msg-thread,
html[data-theme="dark"] .msg-student,
html[data-theme="dark"] .msg-compose {
  background: #181C24 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .essay-new-btn {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #B5BAC9 !important;
}
html[data-theme="dark"] .grade-notes-panel {
  background: #181C24 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .grade-notes-panel textarea {
  background: #1F242E !important;
  color: #ECE7DA !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Legacy portal-frame (.pf-*) — used in several older templates ─── */
html[data-theme="dark"] .s4-pp-app .pf-topbar,
html[data-theme="dark"] .s4-pp-app .pf-tabnav,
html[data-theme="dark"] .s4-pp-app .pf-stat-card,
html[data-theme="dark"] .s4-pp-app .pf-col-row,
html[data-theme="dark"] .s4-pp-app .pf-msg,
html[data-theme="dark"] .s4-pp-app .pf-input,
html[data-theme="dark"] .s4-pp-app .pf-input-text,
html[data-theme="dark"] .s4-pp-app .pf-input-select,
html[data-theme="dark"] .s4-pp-app .pf-msg-bubble.haech {
  background: #181C24 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .pf-notif,
html[data-theme="dark"] .s4-pp-app .pf-event-date,
html[data-theme="dark"] .s4-pp-app .pf-msg-input {
  background: #1F242E !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app .pf-event-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .s4-pp-app .pf-col-bar,
html[data-theme="dark"] .s4-pp-app .pf-essay-bar {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ── Pastel pills — keep semantic hue, dark-tinted background ──────── */
html[data-theme="dark"] .s4-pp-app .ae-pill-success,
html[data-theme="dark"] .s4-pp-app .ae-pill-likely,
html[data-theme="dark"] .s4-pp-app .ae-pill-status-completed,
html[data-theme="dark"] .s4-pp-app .ae-bucket-likely,
html[data-theme="dark"] .s4-pp-app .ae-bucket-likely-bg {
  background: rgba(168, 201, 182, 0.15);
  color: #A8C9B6;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-primary,
html[data-theme="dark"] .s4-pp-app .ae-pill-match,
html[data-theme="dark"] .s4-pp-app .ae-pill-status-in_progress,
html[data-theme="dark"] .s4-pp-app .ae-bucket-match,
html[data-theme="dark"] .s4-pp-app .ae-bucket-match-bg {
  background: rgba(156, 172, 208, 0.15);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-reach,
html[data-theme="dark"] .s4-pp-app .ae-bucket-reach,
html[data-theme="dark"] .s4-pp-app .ae-bucket-reach-bg {
  background: rgba(212, 154, 168, 0.15);
  color: #D49AA8;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-muted,
html[data-theme="dark"] .s4-pp-app .ae-pill-status-cancelled,
html[data-theme="dark"] .s4-pp-app .ae-pill-level-regular,
html[data-theme="dark"] .s4-pp-app .ae-pill-level-other,
html[data-theme="dark"] .s4-pp-app .ae-pill-essay-not_started {
  background: rgba(255, 255, 255, 0.06);
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-status-pending {
  background: rgba(216, 182, 140, 0.15);
  color: #D8B68C;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-status-active {
  background: rgba(156, 172, 208, 0.15);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-status-submitted {
  background: rgba(216, 182, 140, 0.15);
  color: #D8B68C;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-status-planning,
html[data-theme="dark"] .s4-pp-app .ae-pill-status-paused {
  background: rgba(255, 255, 255, 0.06);
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-essay-drafting {
  background: rgba(156, 172, 208, 0.15);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-essay-reviewing {
  background: rgba(216, 182, 140, 0.15);
  color: #D8B68C;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-essay-finalized {
  background: rgba(168, 201, 182, 0.15);
  color: #A8C9B6;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-level-honors {
  background: rgba(125, 195, 230, 0.15);
  color: #7DC3E6;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-level-ap {
  background: rgba(178, 145, 215, 0.15);
  color: #B291D7;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-level-ib {
  background: rgba(220, 130, 175, 0.15);
  color: #DC82AF;
}
html[data-theme="dark"] .s4-pp-app .ae-pill-level-de {
  background: rgba(150, 195, 175, 0.15);
  color: #96C3AF;
}
html[data-theme="dark"] .s4-pp-app .ae-bucket-name {
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-app .ae-badge-count {
  background: rgba(255, 255, 255, 0.10);
  color: #B5BAC9;
}

/* ── Score bars, message bubbles ─────────────────────────────────── */
html[data-theme="dark"] .s4-pp-app .ae-score-bar {
  background: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-app .ae-score-fill {
  background: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .ae-message-theirs .ae-message-bubble {
  background: #1F242E;
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-pp-app .ae-icon-btn.text-danger:hover {
  background: rgba(212, 154, 168, 0.15);
}
html[data-theme="dark"] .s4-pp-app .ae-table thead tr th {
  background: #14181F;
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-app .ae-grade-label {
  color: #ECE7DA;
}

/* ── Bootstrap utility classes used inline in templates ──────────── */
html[data-theme="dark"] .s4-pp-app .bg-white {
  background-color: #181C24 !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .bg-light {
  background-color: #1F242E !important;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .alert {
  background-color: #181C24;
  border-color: rgba(255, 255, 255, 0.10);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .alert-warning {
  background-color: rgba(216, 182, 140, 0.10);
  border-color: rgba(216, 182, 140, 0.30);
  color: #D8B68C;
}
html[data-theme="dark"] .s4-pp-app .alert-danger {
  background-color: rgba(212, 154, 168, 0.10);
  border-color: rgba(212, 154, 168, 0.30);
  color: #D49AA8;
}
html[data-theme="dark"] .s4-pp-app .alert-success {
  background-color: rgba(168, 201, 182, 0.10);
  border-color: rgba(168, 201, 182, 0.30);
  color: #A8C9B6;
}
html[data-theme="dark"] .s4-pp-app .alert-info {
  background-color: rgba(156, 172, 208, 0.10);
  border-color: rgba(156, 172, 208, 0.30);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .badge {
  background-color: rgba(255, 255, 255, 0.10);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-app .nav-tabs .nav-link {
  color: #B5BAC9;
  border-color: transparent;
}
html[data-theme="dark"] .s4-pp-app .nav-tabs .nav-link:hover {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .s4-pp-app .nav-tabs .nav-link.active {
  background: #181C24;
  color: #ECE7DA;
  border-color: rgba(255, 255, 255, 0.10) rgba(255, 255, 255, 0.10) #181C24;
}
html[data-theme="dark"] .s4-pp-app .input-group-text {
  background: #1F242E;
  border-color: rgba(255, 255, 255, 0.18);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .progress {
  background-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .s4-pp-app .list-group-item {
  background: #181C24;
  color: #DCD8CC;
  border-color: rgba(255, 255, 255, 0.10);
}

/* Inline-styled "Manual" badge in match_results.html
   (style="background:#F3F4F6;color:#6B7280") — match via attr selector. */
html[data-theme="dark"] .s4-pp-app [style*="#F3F4F6"] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #B5BAC9 !important;
}

/* ── Bootstrap .table (used in consultant student list, several others)
   Bootstrap's .table sets per-cell white backgrounds via CSS variables
   on .table itself. Remap them inside .s4-pp-app when dark. */
html[data-theme="dark"] .s4-pp-app .table {
  --bs-table-bg: transparent;
  --bs-table-color: #DCD8CC;
  --bs-table-border-color: rgba(255, 255, 255, 0.10);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: #DCD8CC;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: #ECE7DA;
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-app .table > :not(caption) > * > * {
  background-color: transparent;
  color: #DCD8CC;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-app .table thead th {
  color: #B5BAC9;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ── Career-survey inline styles (career_survey.html <style> block).
   Per-section card and dark-navy headings/labels read terribly in dark
   mode. Override the surface and the dark-navy text. */
html[data-theme="dark"] .s4-pp-app .ae-survey-section {
  background: #181C24 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .s4-pp-app .ae-survey-section-title,
html[data-theme="dark"] .s4-pp-app .ae-cs-label,
html[data-theme="dark"] .s4-pp-app .ae-goal-label,
html[data-theme="dark"] .s4-pp-app .ae-pref-slider-wrap label {
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app .ae-section-hint {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-app .ae-cs-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .s4-pp-app .ae-cs-end {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-app .ae-cs-untouched.ae-cs-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #8E94A6 !important;
}
html[data-theme="dark"] .s4-pp-app .ae-cs-badge,
html[data-theme="dark"] .s4-pp-app .ae-slider-badge {
  background: #1F242E !important;
  color: #ECE7DA !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* ── Preferences inline-styled .ae-section-header — light-blue band that
   stayed bright. (Authented.css also defines a distinct .ae-section-header
   without background; the inline rule in preferences.html overrides it.) */
html[data-theme="dark"] .s4-pp-app .ae-section-header {
  background: #14181F !important;
  color: #ECE7DA !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .s4-pp-app .ae-slider-label {
  color: #8E94A6;
}

/* Dark mode for the new subhead / empty-state / dossier-tag tokens */
html[data-theme="dark"] .s4-pp-subhead {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s4-pp-subhead-meta,
html[data-theme="dark"] .s4-pp-empty p,
html[data-theme="dark"] .s4-d-tag {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-empty h3 {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-dossier th,
html[data-theme="dark"] .s4-dossier td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .s4-dossier th {
  color: #8E94A6;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .s4-dossier td.s4-d-name {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-dossier td.s4-d-name small,
html[data-theme="dark"] .s4-dossier small {
  color: #8E94A6;
}
html[data-theme="dark"] .s4-d-num {
  color: #ECE7DA;
}
html[data-theme="dark"] .s4-d-tier.is-reach   { color: #D49AA8; }
html[data-theme="dark"] .s4-d-tier.is-match   { color: #9CACD0; }
html[data-theme="dark"] .s4-d-tier.is-likely  { color: #A8C9B6; }

/* Course Plan dark */
html[data-theme="dark"] .s4-pp-grade-col { border-left-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-grade-col-label,
html[data-theme="dark"] .s4-pp-course-meta,
html[data-theme="dark"] .s4-pp-empty-line,
html[data-theme="dark"] .s4-pp-notes-label { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-course-name { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-course-grade { color: #B5BAC9; }
html[data-theme="dark"] .s4-pp-course { border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .s4-pp-iconlink { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-iconlink:hover {
  color: #9CACD0;
  border-color: rgba(255,255,255,0.18);
}
html[data-theme="dark"] .s4-pp-iconlink-danger:hover {
  color: #D49AA8;
  border-color: rgba(212,154,168,0.30);
}
html[data-theme="dark"] .s4-pp-thin-link { color: #9CACD0; }
html[data-theme="dark"] .s4-pp-thin-link:hover { border-bottom-color: #9CACD0; }
html[data-theme="dark"] .s4-pp-notes { border-top-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-notes-input {
  background: #1F242E;
  color: #ECE7DA;
  border-color: rgba(255,255,255,0.18);
}
html[data-theme="dark"] .s4-pp-notes-input:focus { border-color: #9CACD0; }
html[data-theme="dark"] .s4-pp-notes-save {
  border-color: rgba(255,255,255,0.18);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-notes-save:hover {
  background: #1F242E;
  border-color: #9CACD0;
}

/* Card-grid dark */
html[data-theme="dark"] .s4-pp-card-title h3 { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-card-tag { color: #9CACD0; }
html[data-theme="dark"] .s4-pp-card-meta,
html[data-theme="dark"] .s4-pp-card-foot { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-card-role { color: #9CACD0; }
html[data-theme="dark"] .s4-pp-card-text { color: #DCD8CC; }
html[data-theme="dark"] .s4-pp-card-foot { border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .s4-pp-card.is-primary {
  border-color: rgba(156,172,208,0.40);
  box-shadow: inset 4px 0 0 #9CACD0;
}

/* Essay rows dark */
html[data-theme="dark"] .s4-pp-essay { border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .s4-pp-essay-title { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-essay-school,
html[data-theme="dark"] .s4-pp-essay-subtitle,
html[data-theme="dark"] .s4-pp-essay-meta,
html[data-theme="dark"] .s4-pp-essay-date,
html[data-theme="dark"] .s4-pp-essay-arrow { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-essay-feedback { color: #9CACD0; }
html[data-theme="dark"] .s4-pp-essay:hover .s4-pp-essay-arrow { color: #9CACD0; }

/* FullCalendar dark */
html[data-theme="dark"] .s4-pp-app .fc .fc-toolbar-title { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-app .fc .fc-button {
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  color: #B5BAC9;
}
html[data-theme="dark"] .s4-pp-app .fc .fc-button:hover {
  background: rgba(255,255,255,0.04);
  color: #ECE7DA;
  border-color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-app .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-theme="dark"] .s4-pp-app .fc .fc-button-primary:not(:disabled):active {
  background: #9CACD0;
  border-color: #9CACD0;
  color: #0F1216;
}
html[data-theme="dark"] .s4-pp-app .fc .fc-daygrid-day-number,
html[data-theme="dark"] .s4-pp-app .fc .fc-list-day-text,
html[data-theme="dark"] .s4-pp-app .fc .fc-list-day-side-text { color: #DCD8CC; }
html[data-theme="dark"] .s4-pp-app .fc .fc-col-header-cell-cushion { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-app .fc .fc-day-today { background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] .s4-pp-app .fc table,
html[data-theme="dark"] .s4-pp-app .fc th,
html[data-theme="dark"] .s4-pp-app .fc td { border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-app .fc-list-event:hover td { background: rgba(255,255,255,0.04); }

html[data-theme="dark"] .s4-pp-cal-legend {
  border-top-color: rgba(255,255,255,0.10);
  color: #8E94A6;
}

html[data-theme="dark"] .s4-pp-modal {
  background: #181C24;
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .s4-pp-modal-head h3 { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-modal-head { border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-modal-close { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-modal-close:hover { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-modal-tag { color: #9CACD0; }
html[data-theme="dark"] .s4-pp-modal-row { color: #DCD8CC; }
html[data-theme="dark"] .s4-pp-modal-row i { color: #9CACD0; }

/* Messages dark */
html[data-theme="dark"] .s4-pp-msg-bubble {
  background: #1F242E;
  color: #ECE7DA;
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .s4-pp-msg.is-mine .s4-pp-msg-bubble {
  background: #9CACD0;
  color: #0F1216;
  border-color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-msg-meta { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-compose { border-top-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-compose-input {
  background: #1F242E;
  color: #ECE7DA;
  border-color: rgba(255,255,255,0.18);
}
html[data-theme="dark"] .s4-pp-compose-input:focus { border-color: #9CACD0; }
html[data-theme="dark"] .s4-pp-compose-send {
  background: #9CACD0;
  border-color: #9CACD0;
  color: #0F1216;
}
html[data-theme="dark"] .s4-pp-compose-send:hover { background: #B5BAC9; }

html[data-theme="dark"] .s4-pp-career-meta {
  border-top-color: rgba(255,255,255,0.10);
  color: #8E94A6;
}
html[data-theme="dark"] .s4-pp-career-meta strong { color: #DCD8CC; }

/* Consultant action bar dark */
html[data-theme="dark"] .s4-pp-actionbar { border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-action {
  border-color: rgba(255,255,255,0.18);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-action:hover {
  background: rgba(255,255,255,0.04);
  border-color: #9CACD0;
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-action-primary {
  background: #9CACD0;
  border-color: #9CACD0;
  color: #0F1216;
}
html[data-theme="dark"] .s4-pp-action-primary:hover {
  background: #B5BAC9;
  border-color: #B5BAC9;
  color: #0F1216;
}
html[data-theme="dark"] .s4-pp-action-badge { background: #D49AA8; color: #0F1216; }

/* Tabs dark */
html[data-theme="dark"] .s4-pp-tabs { border-bottom-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .s4-pp-tab { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-tab:hover { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-tab.active {
  color: #9CACD0;
  border-bottom-color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-tab-count {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #DCD8CC;
}
html[data-theme="dark"] .s4-pp-tab.active .s4-pp-tab-count {
  background: #9CACD0;
  border-color: #9CACD0;
  color: #0F1216;
}

/* Pref grid dark */
html[data-theme="dark"] .s4-pp-pref { border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .s4-pp-pref dt { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-pref dd { color: #ECE7DA; }
html[data-theme="dark"] .s4-pp-formrow > label,
html[data-theme="dark"] .s4-pp-formrow > label small,
html[data-theme="dark"] .s4-pp-formhint { color: #8E94A6; }

html[data-theme="dark"] .s4-pp-topic { border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .s4-pp-topic-check { color: #8E94A6; }
html[data-theme="dark"] .s4-pp-topic-check .bi-check-circle-fill { color: #A8C9B6; }
html[data-theme="dark"] .s4-pp-topic-text { color: #DCD8CC; }
html[data-theme="dark"] .s4-pp-topic-text.is-covered { color: #6B7184; }

/* ── Consultant action bar (student detail) ───────────────────── */
.s4-pp-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s4-rule-soft);
}
.s4-pp-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--s4-rule-soft);
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.s4-pp-action:hover {
  border-color: var(--s4-accent);
  color: var(--s4-accent);
  background: var(--s4-paper);
}
.s4-pp-action-primary {
  background: var(--s4-accent);
  border-color: var(--s4-accent);
  color: #F2EAD3;
}
.s4-pp-action-primary:hover {
  background: var(--s4-accent-hover);
  border-color: var(--s4-accent-hover);
  color: #F2EAD3;
}
.s4-pp-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  background: #6E2233;
  color: #F2EAD3;
  border-radius: 1px;
  font-size: 10px;
  letter-spacing: 0;
}

.s4-pp-subhead-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Tabbed nav (student-detail tabs) ───────────────────────────── */
.s4-pp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--s4-rule-soft);
  margin-bottom: 22px;
  padding: 0;
  list-style: none;
}
.s4-pp-tab-li {
  margin: 0;
  padding: 0;
}
.s4-pp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-mute);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.s4-pp-tab:hover { color: var(--s4-ink-deep); }
.s4-pp-tab.active {
  color: var(--s4-accent);
  border-bottom-color: var(--s4-accent);
}
.s4-pp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--s4-paper-2);
  border: 1px solid var(--s4-rule-soft);
  border-radius: 1px;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--s4-ink);
}
.s4-pp-tab.active .s4-pp-tab-count {
  background: var(--s4-accent);
  border-color: var(--s4-accent);
  color: #F2EAD3;
}

/* Bootstrap tab-pane active fade — keep its showing logic, override colors */
.tab-pane.fade.show.active { animation: none; }

/* ── Preferences read-only grid (student-detail prefs tab) ───────── */
.s4-pp-prefgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
@media (max-width: 600px) {
  .s4-pp-prefgrid { grid-template-columns: 1fr; }
}
.s4-pp-pref {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-pref:first-child,
.s4-pp-pref:nth-child(2) { border-top: none; padding-top: 0; }
.s4-pp-pref dt {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s4-mute);
  font-weight: 600;
  margin: 0 0 4px;
}
.s4-pp-pref dd {
  font-family: var(--s4-display);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--s4-ink-deep);
  margin: 0;
}

/* ── Form rows used by consultant career assessment + similar forms ─ */
.s4-pp-formrow {
  margin-bottom: 18px;
}
.s4-pp-formrow > label {
  display: block;
  font-family: var(--s4-text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--s4-mute);
  margin-bottom: 6px;
}
.s4-pp-formrow > label small {
  font-family: var(--s4-text);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--s4-mute);
  font-weight: 400;
  margin-left: 6px;
}
.s4-pp-formhint {
  font-family: var(--s4-text);
  font-size: 11.5px;
  color: var(--s4-mute);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Syllabus topics inside class_detail right rail */
.s4-pp-topic {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--s4-rule-hair);
}
.s4-pp-topic:first-of-type { border-top: none; padding-top: 4px; }
.s4-pp-topic-check {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--s4-mute);
  flex-shrink: 0;
  transition: color .15s ease;
}
.s4-pp-topic-check .bi-check-circle-fill { color: #2F5742; }
.s4-pp-topic-text {
  flex: 1;
  font-family: var(--s4-text);
  font-size: 13px;
  color: var(--s4-ink);
  line-height: 1.4;
}
.s4-pp-topic-text.is-covered {
  text-decoration: line-through;
  color: var(--s4-mute);
}

/* Theme toggle button — sits in the topbar */
.s4-pp-themetoggle {
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.s4-pp-themetoggle .bi-sun { display: none; }
html[data-theme="dark"] .s4-pp-themetoggle .bi-moon { display: none; }
html[data-theme="dark"] .s4-pp-themetoggle .bi-sun  { display: inline-block; }
html[data-theme="dark"] .s4-pp-iconbtn {
  border-color: rgba(255, 255, 255, 0.18);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-iconbtn:hover {
  background: #1F242E;
  color: #ECE7DA;
}

/* ── Portal language switcher (mirrors public s4-nav-langswitch but
   tuned for the portal topbar's denser height + dark mode). */
.s4-pp-lang-form { display: none; }
.s4-pp-langswitch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--s4-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--s4-ink-mid);
}
.s4-pp-lang-btn {
  background: transparent;
  border: 1px solid var(--s4-rule-soft);
  color: var(--s4-ink-mid);
  font: inherit;
  padding: 5px 10px;
  border-radius: 1px;
  cursor: pointer;
  line-height: 1.1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.s4-pp-lang-btn:hover {
  background: var(--s4-paper);
  color: var(--s4-ink-deep);
  border-color: var(--s4-accent);
}
.s4-pp-lang-btn.is-active {
  background: var(--s4-accent);
  color: #F2EAD3;
  border-color: var(--s4-accent);
}
.s4-pp-lang-sep {
  color: var(--s4-mute);
  font-size: 11px;
}
html[data-theme="dark"] .s4-pp-lang-btn {
  border-color: rgba(255, 255, 255, 0.18);
  color: #9CACD0;
}
html[data-theme="dark"] .s4-pp-lang-btn:hover {
  background: #1F242E;
  color: #ECE7DA;
  border-color: rgba(255, 255, 255, 0.32);
}
html[data-theme="dark"] .s4-pp-lang-btn.is-active {
  background: var(--s4-accent);
  color: #F2EAD3;
  border-color: var(--s4-accent);
}
html[data-theme="dark"] .s4-pp-lang-sep { color: #6B7384; }

/* ── Mobile topbar: stack the right-side controls so the new lang
   switcher doesn't push past the viewport edge. */
@media (max-width: 720px) {
  .s4-pp-topbar-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .s4-pp-lang-btn { padding: 4px 8px; font-size: 11px; }
  .s4-pp-user { padding-left: 6px; }
}
@media (max-width: 540px) {
  .s4-pp-topbar-right { width: 100%; }
}

/* ── SGMOS dark-mode overrides for inline-hex panels.
   "Attention needed" banners (#fff3cd), "AI Review" / "Mentor" feedback
   cards (#f0f7ff / #f6fff0), and "Tag mismatch" pills (#fff8e6) were
   coded with hardcoded light colors in the template. Override via attribute
   selectors so we don't need to refactor every template right now. */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff3cd"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff3cd"] {
  background: rgba(245, 197, 66, 0.10) !important;
  border-color: rgba(245, 197, 66, 0.42) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff3cd"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background: #fff3cd"] strong {
  color: #F4D08A !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#f0f7ff"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f0f7ff"] {
  background: rgba(118, 156, 220, 0.10) !important;
  border-left-color: #769CDC !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#f0f7ff"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background: #f0f7ff"] strong,
html[data-theme="dark"] .s4-pp-app [style*="color:#2c4a85"],
html[data-theme="dark"] .s4-pp-app [style*="color: #2c4a85"] {
  color: #A8C0E4 !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#f6fff0"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f6fff0"] {
  background: rgba(120, 170, 120, 0.10) !important;
  border-left-color: #88B59C !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#f6fff0"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background: #f6fff0"] strong,
html[data-theme="dark"] .s4-pp-app [style*="color:#3a6d3a"],
html[data-theme="dark"] .s4-pp-app [style*="color: #3a6d3a"] {
  color: #A8C9B6 !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff8e6"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff8e6"] {
  background: rgba(240, 198, 116, 0.14) !important;
  border-color: rgba(240, 198, 116, 0.45) !important;
  color: #F4D08A !important;
}
/* Generic light-gray status text (#666 / #888) used inside dark panels for
   metadata like timestamps reads as nearly invisible in dark mode. */
html[data-theme="dark"] .s4-pp-app [style*="color:#666"],
html[data-theme="dark"] .s4-pp-app [style*="color: #666"],
html[data-theme="dark"] .s4-pp-app [style*="color:#888"],
html[data-theme="dark"] .s4-pp-app [style*="color: #888"] {
  color: #9aa0b0 !important;
}

/* ── Career-survey overflow fix.
   Long high-end labels ("Entrepreneurial", "Behind the scenes") plus a
   fixed 88px reservation pushed the slider track + badge past the right
   edge of the rounded card. Cap labels with overflow-wrap, let the
   slider shrink fully (min-width:0), and contain the rounded section. */
.ae-survey-section { overflow: hidden; }
.ae-cs-row { min-width: 0; }
.ae-cs-range { min-width: 0; flex: 1 1 0; }
.ae-cs-end { min-width: 0; word-break: break-word; hyphens: auto; }
@media (max-width: 1100px) {
  .ae-slider-grid { column-gap: 24px; }
  .ae-cs-end { width: 72px; font-size: 0.66rem; }
  .ae-cs-badge { width: 26px; font-size: 0.74rem; }
}
@media (max-width: 880px) {
  .ae-cs-end { width: 60px; }
}

/* ─────────────────────────────────────────────────────────────────────
   COMPREHENSIVE DARK-MODE OVERRIDES FOR INLINE BRIGHT STYLES
   ─────────────────────────────────────────────────────────────────────
   The portal templates (sgmos/, student/, consultant/) carry many
   inline `style="background:#xxx"` and `style="color:#xxx"` values
   that were authored for light mode only. In dark mode those pale
   panels glare white and dark inline text becomes nearly invisible.
   Rather than refactor every template, we target the inline styles
   directly with [style*="..."] attribute selectors. Use the trailing
   `;` (or surrounding space) so short hex codes like `#fff` and
   `#eef` don't match longer codes (`#fff3cd`, `#eef0f5`).
   ───────────────────────────────────────────────────────────────── */

/* === White / near-white backgrounds (selects, popovers, nested cards) === */
/* `<select style="...background:#fff;">` in My Colleges outcome picker
   reads as a solid white box in dark mode. Same for the parent-portal
   URL display + copy button, and the consultant SGMOS nested round
   cards. Match the 3-char `#fff;` with its terminating semicolon so
   we don't collide with longer hex codes. */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff;"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff;"],
html[data-theme="dark"] .s4-pp-app [style*="background:#FFF;"],
html[data-theme="dark"] .s4-pp-app [style*="background:#ffffff"],
html[data-theme="dark"] .s4-pp-app [style*="background: #ffffff"] {
  background: var(--s4-bg-elev-1, #1d2230) !important;
  color: #ECE7DA !important;
  border-color: rgba(236, 231, 218, 0.16) !important;
}
html[data-theme="dark"] .s4-pp-app select[style*="background:#fff;"],
html[data-theme="dark"] .s4-pp-app select[style*="background: #fff;"] {
  background: #232838 !important;
  color: #ECE7DA !important;
  border-color: rgba(236, 231, 218, 0.22) !important;
}

/* === Pale red backgrounds (error / overdue panels) === */
/* `#fff5f5` flash panel + essay-edit error card, `#fdecea` OVERDUE pill */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff5f5"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff5f5"],
html[data-theme="dark"] .s4-pp-app [style*="background:#fdecea"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fdecea"] {
  background: rgba(220, 53, 69, 0.14) !important;
  border-color: rgba(220, 53, 69, 0.45) !important;
  color: #F2B8BD !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff5f5"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background: #fff5f5"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background:#fdecea"] strong,
html[data-theme="dark"] .s4-pp-app [style*="color:#dc3545"],
html[data-theme="dark"] .s4-pp-app [style*="color: #dc3545"] {
  color: #F2B8BD !important;
}

/* === Pale amber / orange backgrounds (TASK pill, direction notes) === */
/* `#fff7ec` TASK pill, `#fff8f0` direction-note callout (parent template
   reuses this for "Direction:" italic blocks in student + consultant) */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff7ec"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff7ec"] {
  background: rgba(224, 122, 60, 0.16) !important;
  color: #F4C49A !important;
  border-color: rgba(224, 122, 60, 0.42) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff8f0"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff8f0"] {
  background: rgba(224, 122, 60, 0.12) !important;
  border-left-color: #E07A3C !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff8f0"] em,
html[data-theme="dark"] .s4-pp-app [style*="background: #fff8f0"] em,
html[data-theme="dark"] .s4-pp-app [style*="color:#8C5A1F"],
html[data-theme="dark"] .s4-pp-app [style*="color: #8C5A1F"],
html[data-theme="dark"] .s4-pp-app [style*="color:#856404"],
html[data-theme="dark"] .s4-pp-app [style*="color: #856404"] {
  color: #F4C49A !important;
}

/* === Pinkish / pale-warning textarea bg (#fff9f9) === */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff9f9"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff9f9"] {
  background: #232838 !important;
  color: #ECE7DA !important;
  border-color: rgba(236, 231, 218, 0.22) !important;
}

/* === Pale blue backgrounds (latest round panels, info banners, R# pills) === */
/* `#fafbff` open round-details, `#e8f4fd` info banner, `#eef;` short R# pill */
html[data-theme="dark"] .s4-pp-app [style*="background:#fafbff"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fafbff"] {
  background: rgba(118, 156, 220, 0.08) !important;
  border-color: rgba(118, 156, 220, 0.32) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#e8f4fd"],
html[data-theme="dark"] .s4-pp-app [style*="background: #e8f4fd"] {
  background: rgba(118, 156, 220, 0.14) !important;
  border-color: rgba(118, 156, 220, 0.45) !important;
  color: #A8C0E4 !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#eef;"],
html[data-theme="dark"] .s4-pp-app [style*="background: #eef;"] {
  background: rgba(118, 156, 220, 0.18) !important;
  color: #A8C0E4 !important;
}

/* === Pale gray backgrounds (table headers, log/preview boxes) === */
/* `#fafbfc` nested-round container, `#fafafa` batch-create scroll box,
   `#fafaf7` essay preview, `#f8f8f8` codex log, `#f8f9fa` table header,
   `#f8f9fb` mentor file-area, `#e9ecef` count pills, `#f0f0f0` category,
   `#eee;` progress bar track. */
html[data-theme="dark"] .s4-pp-app [style*="background:#fafbfc"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fafbfc"],
html[data-theme="dark"] .s4-pp-app [style*="background:#fafafa"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fafafa"],
html[data-theme="dark"] .s4-pp-app [style*="background:#fafaf7"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fafaf7"],
html[data-theme="dark"] .s4-pp-app [style*="background:#f8f8f8"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f8f8f8"],
html[data-theme="dark"] .s4-pp-app [style*="background:#f8f9fa"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f8f9fa"],
html[data-theme="dark"] .s4-pp-app [style*="background:#f8f9fb"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f8f9fb"] {
  background: rgba(236, 231, 218, 0.04) !important;
  color: #ECE7DA !important;
  border-color: rgba(236, 231, 218, 0.14) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#e9ecef"],
html[data-theme="dark"] .s4-pp-app [style*="background: #e9ecef"],
html[data-theme="dark"] .s4-pp-app [style*="background:#f0f0f0"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f0f0f0"] {
  background: rgba(236, 231, 218, 0.10) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#eee;"],
html[data-theme="dark"] .s4-pp-app [style*="background: #eee;"] {
  background: rgba(236, 231, 218, 0.14) !important;
}

/* === Hard-coded dark foreground colors in inline styles === */
/* Many templates set `color:#1B2A4A` (navy) or `color:#555` (charcoal)
   on text that sits on a panel — on dark backgrounds these read as
   nearly invisible. Override to the portal's light-on-dark text color
   so headers + body copy remain legible. */
html[data-theme="dark"] .s4-pp-app [style*="color:#1B2A4A"],
html[data-theme="dark"] .s4-pp-app [style*="color: #1B2A4A"],
html[data-theme="dark"] .s4-pp-app [style*="color:#1b2a4a"],
html[data-theme="dark"] .s4-pp-app [style*="color: #1b2a4a"] {
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#222"],
html[data-theme="dark"] .s4-pp-app [style*="color: #222"],
html[data-theme="dark"] .s4-pp-app [style*="color:#333"],
html[data-theme="dark"] .s4-pp-app [style*="color: #333"],
html[data-theme="dark"] .s4-pp-app [style*="color:#444"],
html[data-theme="dark"] .s4-pp-app [style*="color: #444"],
html[data-theme="dark"] .s4-pp-app [style*="color:#555"],
html[data-theme="dark"] .s4-pp-app [style*="color: #555"] {
  color: #D8D3C7 !important;
}
/* Wine-red action buttons (essay_edit, project_edit, edit_event) use
   inline `color:#6E2233` on top of a dark-mode panel and become almost
   invisible. Lift to the lighter rose tone already used elsewhere
   (e.g. .s4-pp-action-badge in dark mode at line ~3749). */
html[data-theme="dark"] .s4-pp-app [style*="color:#6E2233"],
html[data-theme="dark"] .s4-pp-app [style*="color: #6E2233"],
html[data-theme="dark"] .s4-pp-app [style*="color:#6e2233"],
html[data-theme="dark"] .s4-pp-app [style*="color: #6e2233"] {
  color: #D49AA8 !important;
  border-color: rgba(212, 154, 168, 0.42) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#999"],
html[data-theme="dark"] .s4-pp-app [style*="color: #999"] {
  color: #8b91a1 !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#0F1216"],
html[data-theme="dark"] .s4-pp-app [style*="color: #0F1216"] {
  color: #ECE7DA !important;
}
/* Amber-dark text used on amber-tint panels (#7a4a00, #a86b00, #b07a00)
   covered already for `#a86b00` via existing #fff8e6 rule, but `#7a4a00`
   on `#fff8e6` and `#b07a00` italics on the round summary need their
   own bump. */
html[data-theme="dark"] .s4-pp-app [style*="color:#7a4a00"],
html[data-theme="dark"] .s4-pp-app [style*="color: #7a4a00"],
html[data-theme="dark"] .s4-pp-app [style*="color:#b07a00"],
html[data-theme="dark"] .s4-pp-app [style*="color: #b07a00"] {
  color: #F4D08A !important;
}

/* === Borders that draw the eye in light mode but glow in dark === */
/* `border:1px solid #eee;` separators on individual rows turn into
   bright white hairlines. Keep them subtle. */
html[data-theme="dark"] .s4-pp-app [style*="border:1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border: 1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border:1px solid #ccc"],
html[data-theme="dark"] .s4-pp-app [style*="border: 1px solid #ccc"],
html[data-theme="dark"] .s4-pp-app [style*="border:1px solid #dee2e6"],
html[data-theme="dark"] .s4-pp-app [style*="border: 1px solid #dee2e6"] {
  border-color: rgba(236, 231, 218, 0.18) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="border:1px solid #e6e8ee"],
html[data-theme="dark"] .s4-pp-app [style*="border: 1px solid #e6e8ee"] {
  border-color: rgba(236, 231, 218, 0.14) !important;
}
/* Directional borders (border-top / border-bottom / border-left /
   border-right). Templates use these for row dividers and table
   header underlines; in dark mode they read as bright glowing lines.
   Match each directional variant + a hex color so we cover the whole
   palette without over-matching. */
html[data-theme="dark"] .s4-pp-app [style*="border-bottom:1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border-bottom: 1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border-top:1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border-top: 1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border-left:1px solid #eee"],
html[data-theme="dark"] .s4-pp-app [style*="border-right:1px solid #eee"] {
  border-color: rgba(236, 231, 218, 0.18) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="border-bottom:2px solid #dee2e6"],
html[data-theme="dark"] .s4-pp-app [style*="border-bottom: 2px solid #dee2e6"],
html[data-theme="dark"] .s4-pp-app [style*="border-top:2px solid #dee2e6"],
html[data-theme="dark"] .s4-pp-app [style*="border-bottom:1px solid #dee2e6"],
html[data-theme="dark"] .s4-pp-app [style*="border-bottom: 1px solid #dee2e6"] {
  border-color: rgba(236, 231, 218, 0.22) !important;
}
html[data-theme="dark"] .s4-pp-app [style*="border-bottom:1px solid #e6e8ee"],
html[data-theme="dark"] .s4-pp-app [style*="border-top:1px solid #e6e8ee"] {
  border-color: rgba(236, 231, 218, 0.14) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ROUND-2 ADDITIONS: consultant-side bright backgrounds we missed
   ─────────────────────────────────────────────────────────────────────
   The consultant SGMOS tab (student_detail.html), the mentor feedback
   form, the direction-note form, and several student-side pages render
   feedback rows + warning badges using inline pastel backgrounds that
   weren't in the round-1 list:
     #f0f7ff  pale blue   — LLM/AI feedback row
     #f6fff0  pale green  — mentor feedback row
     #fff8e6  pale yellow — tag-mismatch / action-required badge
     #fff3cd  pale yellow — "Attention needed" alert + estimate pill
   Plus the small medium-gray text colors (#666, #888) used heavily in
   summaries and meta labels, which read as nearly invisible on a dark
   panel. Match the full 7-char hex so we don't collide with #fff8f0
   (already overridden) or #fff (3-char).
   ───────────────────────────────────────────────────────────────── */

/* Pale blue LLM feedback row */
html[data-theme="dark"] .s4-pp-app [style*="background:#f0f7ff"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f0f7ff"] {
  background: rgba(118, 156, 220, 0.10) !important;
  border-color: rgba(118, 156, 220, 0.42) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#2c4a85"],
html[data-theme="dark"] .s4-pp-app [style*="color: #2c4a85"] {
  color: #A8C0E4 !important;
}

/* Pale green mentor feedback row */
html[data-theme="dark"] .s4-pp-app [style*="background:#f6fff0"],
html[data-theme="dark"] .s4-pp-app [style*="background: #f6fff0"] {
  background: rgba(96, 161, 96, 0.10) !important;
  border-color: rgba(96, 161, 96, 0.42) !important;
  color: #ECE7DA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#3a6d3a"],
html[data-theme="dark"] .s4-pp-app [style*="color: #3a6d3a"] {
  color: #B5D8A8 !important;
}

/* Pale yellow tag-mismatch / action-required badge */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff8e6"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff8e6"] {
  background: rgba(240, 198, 116, 0.12) !important;
  border-color: rgba(240, 198, 116, 0.45) !important;
  color: #F4D08A !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#a86b00"],
html[data-theme="dark"] .s4-pp-app [style*="color: #a86b00"] {
  color: #F4D08A !important;
}

/* Pale yellow "Attention needed" alert + estimate pill */
html[data-theme="dark"] .s4-pp-app [style*="background:#fff3cd"],
html[data-theme="dark"] .s4-pp-app [style*="background: #fff3cd"] {
  background: rgba(255, 193, 7, 0.10) !important;
  border-color: rgba(255, 193, 7, 0.42) !important;
  color: #F4D08A !important;
}
html[data-theme="dark"] .s4-pp-app [style*="background:#fff3cd"] strong,
html[data-theme="dark"] .s4-pp-app [style*="background: #fff3cd"] strong {
  color: #F4D08A !important;
}

/* Medium-gray meta labels (#666, #888). Used everywhere for small
   secondary text. Lift to a readable light gray on dark panels. */
html[data-theme="dark"] .s4-pp-app [style*="color:#666"],
html[data-theme="dark"] .s4-pp-app [style*="color: #666"] {
  color: #A5ABBA !important;
}
html[data-theme="dark"] .s4-pp-app [style*="color:#888"],
html[data-theme="dark"] .s4-pp-app [style*="color: #888"] {
  color: #9398A8 !important;
}

/* Inline `background: var(--s4-paper)` (and `--s4-paper-2`) read as
   bright cream in dark mode because the CSS variables themselves are
   not redefined under html[data-theme="dark"]. Most rule-based usages
   of these variables sit inside classes (.s4-pp-panel etc.) that have
   explicit dark-mode background overrides, so those are fine. The
   inline usages aren't covered by anything — student_detail's parent/
   guardian <details>, the invite-link URL box, and the workgrid card
   text panel all stay cream. Catch them with a substring selector. */
html[data-theme="dark"] .s4-pp-app [style*="background: var(--s4-paper)"],
html[data-theme="dark"] .s4-pp-app [style*="background:var(--s4-paper)"],
html[data-theme="dark"] .s4-pp-app [style*="background: var(--s4-paper-2"],
html[data-theme="dark"] .s4-pp-app [style*="background:var(--s4-paper-2"] {
  background: var(--s4-bg-elev-1, #1d2230) !important;
  color: #ECE7DA !important;
  border-color: rgba(236, 231, 218, 0.16) !important;
}