/* Shared theme for every page: easier-to-read light mode, and a dark mode (switch at the bottom-left, remembers the choice,
   follows the device setting until you choose). Loaded after each page's own styles so it can lift contrast without rewriting them. */

/* ---- light mode: fine print was too faint; page background tinted so white cards stand out ---- */
:root {
  --text-muted: #566C82; --muted: #566C82;
  --text-mid: #34495F; --mid: #34495F;
  --off-white: #EEF2F6; --off: #EEF2F6;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main .card, .center .card { box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 8px 22px rgba(13,27,42,.05); }

/* ---- dark mode: the page is drawn normally, then flipped. Photos, video and embedded pages are flipped back; the logo flips with the page. ---- */
html[data-theme="dark"] { background: #EEE8DF; filter: invert(.9) hue-rotate(180deg) contrast(.96); color-scheme: dark; }
html[data-theme="dark"] img:not([src*="LOGO"]):not([src*="favicon"]):not([src*="apple-touch"]),
html[data-theme="dark"] video, html[data-theme="dark"] iframe, html[data-theme="dark"] canvas,
html[data-theme="dark"] [style*="background-image"],
html[data-theme="dark"] .keep-color { filter: invert(1) hue-rotate(180deg) contrast(1.04); } /* .keep-color: rich colour panels that should stay as designed */

/* ---- the switch ---- */
#theme-switch { position: fixed; left: 12px; bottom: 78px; z-index: 9999; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(13,27,42,.25); background: #0D1B2A; color: #fff; font: 700 17px/1 'DM Sans', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; padding: 0; opacity: .85; }
#theme-switch:hover { opacity: 1; }
.gn #theme-switch.docked { position: static; flex: none; width: 34px; height: 34px; margin-left: 8px; font-size: 15px; background: transparent; color: #E9EEF4; border: 1px solid rgba(231,205,134,.35); box-shadow: none; opacity: 1; }
@media (max-width: 1260px) { .gn .gn-top a:not(.gn-b) { padding-left: 7px; padding-right: 7px; } }
.gn #theme-switch.docked:hover { border-color: rgba(231,205,134,.7); background: rgba(231,205,134,.08); }
@media (max-width: 640px) { #theme-switch { width: 34px; height: 34px; font-size: 15px; left: 8px; bottom: 84px; } }
@media print { #theme-switch { display: none; } html[data-theme="dark"] { filter: none; background: #fff; } }

/* ---- HCOS headings (Option A, 2026-10-14): one scale on every staff page.
   A section heading is the serif with a teal rule under it; a sub-section is small teal capitals; a page title is the
   larger serif. In dark mode the rule and the sub-sections turn the gold from the logo (they opt out of the page's colour
   flip, the same way the nav does, so it is the exact gold). Left alone: the client's own page (.client-ui), the plan
   preview (.pv, which shows the Word document's own look), the Results dashboards (dz-*), and popups. ---- */
html.hcos-type:not(.client-ui) h1:not(:is(.pv, .dz, [class*="dz-"], .skp, .gn) *) { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #0D1B2A; }
html.hcos-type:not(.client-ui) :is(.card h2, .card .sec-h h3, h2.hc-sec):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *) {
  font: 700 23px/1.2 'Cormorant Garamond', serif; color: #0D1B2A; letter-spacing: 0; text-transform: none;
}
html.hcos-type:not(.client-ui) :is(.card h2, .card .sec-h h3, h2.hc-sec):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *)::after {
  content: ""; display: block; height: 2px; margin-top: 6px; border-radius: 2px; background: #2A9E9E;
}
html.hcos-type:not(.client-ui) :is(.card h3, .colhead, .box h3, .hc-sub, .mp-h, .mv-cap-h, .upd-h, .tut-h, .wg-h, .rep-h, .refhead, .pane-h, .g-h, .rsp-sec, .afg h4):not(.sec-h h3):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *) {
  font: 700 12.5px/1.4 'DM Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #1E7A7A; margin-top: 16px; margin-bottom: 6px;
}
html.hcos-type[data-theme="dark"]:not(.client-ui) :is(.card h2, .card .sec-h h3, h2.hc-sec):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *)::after {
  background: #D8B45E; filter: invert(1) hue-rotate(180deg) contrast(1.04);
}
html.hcos-type[data-theme="dark"]:not(.client-ui) :is(.card h3, .colhead, .box h3, .hc-sub, .mp-h, .mv-cap-h, .upd-h, .tut-h, .wg-h, .rep-h, .refhead, .pane-h, .g-h, .rsp-sec, .afg h4):not(.sec-h h3):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *) {
  color: #D8B45E; filter: invert(1) hue-rotate(180deg) contrast(1.04);
}
/* an (i) inside a gold sub-heading: flipped back again so it matches every other (i) on the dark page */
html.hcos-type[data-theme="dark"]:not(.client-ui) :is(.card h3, .colhead, .box h3, .hc-sub, .mp-h, .mv-cap-h, .upd-h, .tut-h, .wg-h, .rep-h, .refhead, .pane-h, .g-h, .rsp-sec, .afg h4):not(.sec-h h3) :is(.i, .ip, .tip, [data-tip], button, .btn, .badge, .tag) {
  filter: invert(1) hue-rotate(180deg) contrast(1.04);
}

/* "Show 12 more" under a long list (SOWCList.more in theme.js); "Show fewer" in its place once open */
.lk-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 6px 12px; border: 1.5px solid #CFE6E6; border-radius: 999px; background: #F1FAFA; color: #1E7A7A; font: 600 13px/1.3 'DM Sans', system-ui, sans-serif; }
.lk-more > summary::-webkit-details-marker { display: none; }
.lk-more > summary::before { content: '▾'; font-size: 12px; }
.lk-more[open] > summary::before { content: '▴'; }
.lk-more .lk-c, .lk-more[open] .lk-o { display: none; }
.lk-more[open] .lk-c { display: inline; }
.lk-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 6px 12px; border: 1.5px solid #CFE6E6; border-radius: 999px; background: #F1FAFA; color: #1E7A7A; font: 600 13px/1.3 'DM Sans', system-ui, sans-serif; }
tr[data-lkh] { display: none; }

/* ---- HCOS type (2026-10-15): readability first. Inside the HCOS (html.hcos-type, set by theme.js) every heading is
   Plus Jakarta Sans and everything else is Inter, so a heading never blends into the text under it. Left alone: the plan
   preview (.pv, the Word document's own look), the editor's monospace, and code. The public website is not touched. ---- */
/* the wordmark and any brand lettering keep their own face (brand assets are never restyled) */
html.hcos-type :where(body, body *:not(.pv, .pv *, code, pre, kbd, samp, #ed, .mono, .gn-wm, .gn-wm *, [class*="brand"], [class*="brand"] *, [class*="logo"], [class*="logo"] *, [class*="wordmark"], [class*="wordmark"] *)) {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
html.hcos-type :where(h1, h2, h3, h4, h5, h6):not(:where(.pv *, [class*="brand"] *, [class*="logo"] *)) {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.01em;
}
html.hcos-type body { font-feature-settings: 'cv11', 'ss01'; color: #1A2F4A; }
/* page titles: one size, heavy, clearly the top of the page */
html.hcos-type :where(h1):not(:where(.pv *)) { font-size: 28px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #0D1B2A; letter-spacing: -0.02em; }
/* section headings (Option A): bolder and a touch smaller than the serif was, still with the rule under them */
html.hcos-type:not(.client-ui) :is(.card h2, .card .sec-h h3, h2.hc-sec):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn, .sh) *) {
  font-size: 21px !important; font-weight: 800 !important; letter-spacing: -0.015em;
}
/* sub-section labels: small teal capitals stay, in the body face */
html.hcos-type:not(.client-ui) :is(.card h3, .colhead, .box h3, .hc-sub, .mp-h, .mv-cap-h, .upd-h, .tut-h, .wg-h, .rep-h, .refhead, .pane-h, .g-h, .rsp-sec, .afg h4):not(.sec-h h3):not(:is(.pv, .dz, [class*="dz-"], .skp, .gn) *) {
  font-weight: 700 !important; letter-spacing: 0.07em !important; font-size: 12.5px !important;
}
/* the Results dashboards: section titles stand out from their summaries */
html.hcos-type .dz :where(h3) { font-size: 17px; font-weight: 700; color: #0D1B2A; }
/* fine print no smaller than 13px */
html.hcos-type :where(.hint, .dz-sub, .tile-meta, .tf-h) { font-size: 13px; }