/* ==========================================================================
   OSCE Atlas — design polish layer
   --------------------------------------------------------------------------
   Loaded LAST, after guide-typography.css. It keeps the sage identity, the
   fonts (Lora + Instrument Sans) and every feature; it only refines spacing,
   consistency and the dark theme. Delete the <link> to this file in
   index.html to get the previous look back exactly.

   Selectors are prefixed with `html body` (and use !important only where an
   earlier stylesheet already forces the same property with !important).
   ========================================================================== */

/* ---------- 0. shared tokens ---------------------------------------------- */
/* declared on body (not :root) so var(--bg2) etc. resolve per theme */
html body {
  --ap-r: 16px;                 /* card radius */
  --ap-r-sm: 10px;              /* control radius */
  --ap-card-bg: var(--bg2);
  --ap-card-bdr: var(--bdr);
  --ap-card-shadow: 0 1px 2px rgba(38, 51, 46, .04), 0 2px 8px rgba(38, 51, 46, .04);
  --ap-card-shadow-hover: 0 2px 4px rgba(38, 51, 46, .05), 0 12px 28px rgba(38, 51, 46, .10);
  --ap-header: #2f5a50;
  --ap-ease: cubic-bezier(.22, .61, .36, 1);
  --ap-col: 980px;              /* topic reading column, matches .sg-embed */
}
html body[data-theme="dark"] {
  --ap-card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --ap-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .45);
  --ap-header: #14211c;
}

/* ==========================================================================
   1. HEADER
   ========================================================================== */
html body .nav,
html body[data-theme="dark"] .nav {
  background: var(--ap-header) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 6px 20px rgba(20, 40, 34, .14) !important;
  gap: 18px;
}
html body[data-theme="dark"] .nav {
  border-bottom-color: var(--bdr) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important;
}

/* logo lock-up: mark + wordmark + tagline */
html body .nav .logo { gap: 11px; align-items: center; }
html body .nav .logo-mark img {
  width: 40px !important;
  height: 40px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)) !important;
}
html body .nav .logo-ribbon {
  top: auto;
  bottom: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  animation: none;
  box-shadow: 0 0 0 2px var(--ap-header), 0 1px 3px rgba(0, 0, 0, .3);
}
html body .nav .logo-ribbon svg { width: 11px; height: 11px; stroke-width: 2.8; }
html body .nav .logo span[style*="font-size:20px"] {
  font-family: var(--serif);
  font-size: 19px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
html body .nav .logo span[style*="font-size:10px"] {
  margin-top: 3px;
  font-family: var(--font) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, .62) !important;
}

/* search: translucent field on the dark bar, solid when focused */
html body .nav .search-wrap input {
  height: 40px;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
html body .nav .search-wrap input::placeholder { color: rgba(255, 255, 255, .58) !important; }
html body .nav .search-wrap svg { color: rgba(255, 255, 255, .62) !important; z-index: 1; }
html body .nav .search-wrap input:hover { background: rgba(255, 255, 255, .14) !important; }
html body .nav .search-wrap input:focus {
  background: #fff !important;
  border-color: #fff !important;
  color: #1f2a26 !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16) !important;
}
html body .nav .search-wrap input:focus::placeholder { color: #7a8a83 !important; }
html body .nav .search-wrap:focus-within svg { color: #5c6b64 !important; }
html body[data-theme="dark"] .nav .search-wrap input:focus {
  background: #1a2722 !important;
  border-color: #36514a !important;
  color: #e6eee9 !important;
}
html body[data-theme="dark"] .nav .search-wrap:focus-within svg { color: #a9c5bb !important; }

/* Search results dropdown — bug fix. The header redefines the colour tokens
   (white text, 10%-white surfaces) for its own subtree, and the dropdown lives
   inside it, so results were see-through with near-invisible titles. Give the
   dropdown the page's own tokens back. */
html body .nav .live-results {
  --tx: #26332e; --tx2: #2f5a50; --tx3: #5c6b64;
  --ac: #3f7568; --ach: #2f5a50; --acl: #dceae4;
  --bg2: #ffffff; --bg3: #e8f0eb; --bdr: #d6e3dd; --bdr2: #a9c5bb;
  background: #fff !important;
  color: var(--tx);
  border: 1px solid var(--bdr) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(38, 51, 46, .10), 0 30px 64px rgba(38, 51, 46, .16) !important;
}
html body[data-theme="dark"] .nav .live-results {
  --tx: #e6eee9; --tx2: #a9c5bb; --tx3: #86a197;
  --ac: #8fbfb1; --ach: #b0d4c8; --acl: #1c2e29;
  --bg2: #16211d; --bg3: #121b18; --bdr: #25352f; --bdr2: #36514a;
  background: #16211d !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 30px 64px rgba(0, 0, 0, .5) !important;
}

/* mode switch + theme button share one quiet pill style */
html body .nav .mode-seg {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  padding: 3px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body .nav .mode-seg-btn {
  border-radius: 9px !important;
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 600 !important;
}
html body .nav .mode-seg-btn:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
html body .nav .mode-seg-btn.on,
html body .nav .mode-seg-btn.on:hover {
  background: #fff !important;
  color: #2f5a50 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22) !important;
}
html body[data-theme="dark"] .nav .mode-seg-btn.on,
html body[data-theme="dark"] .nav .mode-seg-btn.on:hover {
  background: #3f7568 !important;
  color: #fff !important;
}
html body .nav .nbtn,
html body .nav .menu-btn {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .88) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body .nav .nbtn:hover,
html body .nav .menu-btn:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
html body .nav .nbtn:focus-visible,
html body .nav .mode-seg-btn:focus-visible,
html body .nav .menu-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

/* ==========================================================================
   2. SIDEBAR
   ========================================================================== */
html body .sidebar { padding: 14px 10px 24px !important; }

html body .sidebar .sb-item {
  min-height: 38px;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
  align-items: center;
  border-radius: var(--ap-r-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx2);
  transition: background .14s, color .14s;
}
html body .sidebar .sb-item:hover { background: var(--bg3) !important; color: var(--tx); }
html body .sidebar .sb-item.active,
html body[data-theme="dark"] .sidebar .sb-item.active {
  background: color-mix(in srgb, var(--ac) 12%, transparent) !important;
  color: var(--ach) !important;
  font-weight: 650 !important;
  box-shadow: inset 3px 0 0 var(--ac) !important;
}
html body[data-theme="dark"] .sidebar .sb-item.active { color: var(--ac) !important; }
html body .sidebar .sb-item.sb-profile { color: var(--tx3); }

html body .sidebar .sb-label {
  padding: 18px 12px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: var(--tx3) !important;
  border-top: 1px solid var(--bdr);
  margin-top: 10px !important;
}
html body .sidebar .sb-sub {
  margin: 0 !important;
  padding: 14px 12px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--tx3) !important;
  opacity: .85;
}

/* filter + expand/collapse */
html body #fa-sb-tools { padding: 4px 4px 10px; }
html body #fa-sb-filter {
  height: 38px;
  background: var(--bg) !important;
  border-color: var(--bdr) !important;
  border-radius: var(--ap-r-sm) !important;
}
html body[data-theme="dark"] #fa-sb-filter { background: var(--bg3) !important; }
html body .fa-sb-btns button {
  height: 30px;
  background: transparent !important;
  border-color: var(--bdr) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  color: var(--tx3) !important;
}
html body .fa-sb-btns button:hover { color: var(--ac) !important; border-color: var(--ac) !important; background: var(--bg3) !important; }

/* body-system accordion */
html body #fa-acc { padding: 0 0 20px !important; }
html body .fa-cat { margin-bottom: 1px; }
html body .fa-cat-head {
  min-height: 38px;
  padding: 7px 8px 7px 12px !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  color: var(--tx2) !important;
  border-radius: var(--ap-r-sm) !important;
  line-height: 1.3;
}
html body .fa-cat-head:hover { background: var(--bg3) !important; color: var(--tx) !important; }
html body .fa-cat.fa-open > .fa-cat-head {
  background: color-mix(in srgb, var(--ac) 9%, transparent) !important;
  color: var(--ach) !important;
}
html body[data-theme="dark"] .fa-cat.fa-open > .fa-cat-head { color: var(--ac) !important; }
html body .fa-cat-dot { width: 7px !important; height: 7px !important; }
html body .fa-cat-label { flex: 1 1 auto; min-width: 0; }
html body .fa-cat-count {
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--tx3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
html body .fa-cat.fa-open > .fa-cat-head .fa-cat-count { color: var(--ac) !important; background: none !important; }
/* chevron drawn in CSS instead of the ▶ glyph */
html body .fa-cat-chev {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent;
  border-radius: 7px;
  opacity: .6;
}
html body .fa-cat-chev::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 -5px;
  border-right: 1.75px solid var(--tx2);
  border-bottom: 1.75px solid var(--tx2);
  transform: rotate(-45deg);
}
html body .fa-cat.fa-open > .fa-cat-head .fa-cat-chev::before { border-color: var(--ac); }
html body .fa-cat-chev:hover { background: color-mix(in srgb, var(--tx) 7%, transparent) !important; }

html body .fa-cat-inner { padding: 2px 0 8px 10px !important; }
html body .fa-topic {
  padding: 7px 10px 7px 14px !important;
  font-size: 12.75px !important;
  line-height: 1.35 !important;
  color: var(--tx3) !important;
  border-left: 1.5px solid var(--bdr) !important;
  border-radius: 0 8px 8px 0;
}
html body .fa-topic:hover { color: var(--tx) !important; background: var(--bg3) !important; }
html body .fa-topic.fa-active {
  color: var(--ach) !important;
  font-weight: 600 !important;
  border-left-color: var(--ac) !important;
  background: color-mix(in srgb, var(--ac) 8%, transparent) !important;
}
html body[data-theme="dark"] .fa-topic.fa-active { color: var(--ac) !important; }

/* ==========================================================================
   3. HOME DASHBOARD
   ========================================================================== */
html body .dh-hi { letter-spacing: -.015em; }
html body .dh-sub { font-weight: 500; }

/* the four cards along the top read as one set */
html body .dh-focus.dh-quad { gap: 16px !important; }
html body .dh-focus.dh-quad > .dh-card,
html body .dh-focus.dh-quad > .plhp {
  display: flex !important;
  flex-direction: column;
  padding: 20px !important;
  background: var(--ap-card-bg) !important;
  border: 1px solid var(--ap-card-bdr) !important;
  border-radius: var(--ap-r) !important;
  box-shadow: var(--ap-card-shadow) !important;
  text-align: left !important;
}

/* one heading style for all four */
html body .dh-card-h,
html body .dh-progress-lbl,
html body .plhp-title {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px !important;
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--tx) !important;
  line-height: 1.3 !important;
}
html body .dh-card-h .dh-dot,
html body .dh-progress-lbl::before,
html body .plhp-title::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent);
}
html body .plhp-hdr { margin: 0 !important; padding: 0 !important; border: 0 !important; }

html body .dh-create-copy,
html body .plhp-empty p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--tx3) !important;
  text-align: left !important;
  margin: 0 0 16px !important;
}
html body .plhp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  flex: 1 1 auto;
  padding: 0 !important;
  text-align: left !important;
}
html body .plhp-empty > svg,
html body .plhp-empty > .plhp-empty-ico { display: none !important; }

/* the primary action sits at the foot of each card */
html body .dh-create-btn,
html body .plhp-empty .plhp-btn { margin-top: auto !important; }
html body .dh-pill,
html body .plhp-btn {
  height: 36px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: auto !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, transform .15s;
}
html body .dh-pill.solid,
html body .plhp-btn.pw-primary {
  background: var(--accent, #3f7568) !important;
  border: 1px solid var(--accent, #3f7568) !important;
  color: #fff !important;
}
html body .dh-pill.solid:hover,
html body .plhp-btn.pw-primary:hover { background: var(--ach) !important; border-color: var(--ach) !important; }
html body[data-theme="dark"] .dh-pill.solid:hover,
html body[data-theme="dark"] .plhp-btn.pw-primary:hover { background: #4c8073 !important; border-color: #4c8073 !important; }
html body .dh-pill:not(.solid) {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--tx2) !important;
}
html body .dh-pill:not(.solid):hover { border-color: var(--bdr2) !important; color: var(--tx) !important; }

/* progress card */
html body .dh-progress-big {
  font-family: var(--serif) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  line-height: 1.1 !important;
}
html body .dh-progress-sub2 { font-size: 13px !important; color: var(--tx3) !important; }
html body .dh-progress-bar { height: 8px !important; margin: 14px 0 0 !important; border-radius: 99px !important; background: color-mix(in srgb, var(--tx) 8%, transparent) !important; }
html body .dh-progress-link { margin-top: auto !important; padding-top: 12px; }
html body .dh-progress-link a { font-size: 13px !important; font-weight: 600 !important; color: var(--ac) !important; }

/* tools card: quiet list rows with a chevron */
html body .dh-tools .dh-actions { gap: 6px !important; }
html body .dh-act {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 40px;
  padding: 0 34px 0 14px !important;
  background: var(--bg) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--ap-r-sm) !important;
  box-shadow: none !important;
  text-align: left;
  transition: border-color .15s, background .15s;
}
html body[data-theme="dark"] .dh-act { background: var(--bg3) !important; }
html body .dh-act b { font-size: 13.5px !important; font-weight: 600 !important; color: var(--tx) !important; }
html body .dh-act::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.75px solid var(--tx3);
  border-top: 1.75px solid var(--tx3);
  transform: rotate(45deg);
  transition: transform .15s var(--ap-ease), border-color .15s;
}
html body .dh-act:hover { border-color: var(--ac) !important; background: color-mix(in srgb, var(--ac) 6%, var(--bg2)) !important; }
html body .dh-act:hover::after { border-color: var(--ac); transform: translateX(2px) rotate(45deg); }

/* section heading + body-systems grid share the dashboard's full width */
html body .home-section-title {
  max-width: none !important;
  margin: 40px 0 14px !important;
  padding: 0 !important;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--tx) !important;
}
html body .sys-grid.professional-systems {
  max-width: none !important;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 12px !important;
}

/* body-system card: colour dot, title, count, arrow — left aligned */
html body .sys-card.professional-card {
  position: relative;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  min-height: 112px !important;
  padding: 16px 36px 16px 18px !important;
  text-align: left !important;
  background: var(--ap-card-bg) !important;
  border: 1px solid var(--ap-card-bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--ap-card-shadow) !important;
  transition: transform .18s var(--ap-ease), box-shadow .18s, border-color .18s !important;
}
html body .sys-card.professional-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 18px;
  left: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sys, var(--ac)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sys, var(--ac)) 16%, transparent);
  opacity: 1 !important;
  inset: 18px auto auto 18px;
}
html body .sys-card.professional-card::after { display: none !important; }
html body .sys-card.professional-card .card-copy { text-align: left !important; width: 100%; }
html body .sys-card.professional-card h3 {
  margin: 0 0 3px !important;
  font-family: var(--font) !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  color: var(--tx) !important;
  text-align: left !important;
}
html body .sys-card.professional-card p {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  text-align: left !important;
  opacity: 1 !important;
}
html body .sys-card.professional-card .card-arrow {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 16px !important;
  bottom: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--tx3) !important;
  opacity: .7;
  transition: transform .18s var(--ap-ease), color .18s, opacity .18s;
}
html body .sys-card.professional-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--sys, var(--ac)) 45%, var(--bdr)) !important;
  box-shadow: var(--ap-card-shadow-hover) !important;
}
html body .sys-card.professional-card:hover .card-arrow {
  color: var(--sys, var(--ac)) !important;
  opacity: 1;
  transform: translateX(3px);
}
html body .sys-card.professional-card:focus-visible {
  outline: 2px solid var(--ac) !important;
  outline-offset: 2px;
}

/* readiness dashboard matches the cards above */
html body .topic-tracker-card.readiness-dashboard {
  max-width: none !important;
  margin-top: 36px !important;
  border: 1px solid var(--ap-card-bdr) !important;
  border-radius: 18px !important;
  box-shadow: var(--ap-card-shadow) !important;
  background: var(--ap-card-bg) !important;
}

/* daily tip: calmer, no gradient wash */
html body #fa-tip {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-left: 3px solid var(--ac) !important;
  box-shadow: var(--ap-card-shadow) !important;
}

/* ==========================================================================
   4. TOPIC PAGES
   The header block lines up with the 980px reading column underneath.
   ========================================================================== */
html body #mainContent:has(> .sg-embed) > :is(.back, .tp-title, #atTopicMeta, .at-listen-wrap, .tp-cat, .topic-tools, .topic-conf-row) {
  max-width: var(--ap-col);
  margin-left: max(0px, calc((100% - var(--ap-col)) / 2)) !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

html body #mainContent .back {
  height: 34px;
  margin-bottom: 26px !important;
  padding: 0 14px 0 12px !important;
  gap: 6px;
  align-items: center;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: border-color .15s, color .15s;
}
html body #mainContent .back:hover { border-color: var(--ac) !important; color: var(--ac) !important; }

html body #mainContent .tp-title {
  padding-left: 0 !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}
html body #mainContent .tp-title::before { display: none !important; }

html body #atTopicMeta { margin-top: 8px !important; font-size: 12.5px !important; color: var(--tx3) !important; gap: 4px 14px; flex-wrap: wrap; }

/* the category already shows in the back link and the guide kicker */
html body #mainContent:has(.sg-kicker-embed) > .tp-cat { display: none !important; }

/* one toolbar row: Listen + the topic tools */
html body .at-listen-wrap { margin: 20px 0 0 !important; }
html body #mainContent .at-listen-btn {
  height: 36px;
  padding: 0 16px 0 13px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  gap: 7px !important;
  background: var(--accent, #3f7568) !important;
  border: 1px solid var(--accent, #3f7568) !important;
  color: #fff !important;
  border-radius: 999px !important;
  transform: none !important;
}
html body #mainContent .at-listen-btn:hover { background: var(--ach) !important; border-color: var(--ach) !important; filter: none !important; }
html body[data-theme="dark"] #mainContent .at-listen-btn:hover { background: #4c8073 !important; border-color: #4c8073 !important; }
html body #mainContent .at-listen-btn.speaking {
  background: var(--bg2) !important;
  color: var(--ac) !important;
  border-color: var(--ac) !important;
}

html body #mainContent .topic-tools {
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid var(--bdr) !important;
}
html body #mainContent .topic-tools .print-sheet-btn,
html body #mainContent .topic-tools button {
  height: 36px;
  margin: 0 !important;
  padding: 0 14px 0 12px !important;
  gap: 7px !important;
  align-items: center;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s, color .15s, background .15s;
}
html body #mainContent .topic-tools button:hover {
  border-color: var(--ac) !important;
  color: var(--ac) !important;
  background: color-mix(in srgb, var(--ac) 5%, var(--bg2)) !important;
}

/* confident / needs-work: a light strip, not a boxed panel */
html body #mainContent .topic-conf-row.tm-row,
html body #mainContent .topic-conf-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px !important;
  margin-top: 18px !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #mainContent .topic-conf-row .conf-btn {
  height: 34px;
  margin: 0 !important;
  padding: 0 14px 0 11px !important;
  gap: 7px;
  align-items: center;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  background: transparent !important;
  border: 1px dashed var(--bdr2) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html body #mainContent .topic-conf-row .conf-btn:hover { border-style: solid !important; border-color: var(--ac) !important; color: var(--ac) !important; }
html body #mainContent .topic-conf-row .conf-btn.conf-yes {
  border: 1px solid var(--gn) !important;
  background: var(--gnl) !important;
  color: var(--gn) !important;
}
html body[data-theme="dark"] #mainContent .topic-conf-row .conf-btn.conf-yes { background: color-mix(in srgb, var(--gn) 18%, transparent) !important; color: #8fd0a6 !important; }
html body #mainContent .topic-conf-row .conf-btn.nw-yes {
  border: 1px solid var(--am) !important;
  background: var(--aml) !important;
  color: #8a5a00 !important;
}
html body[data-theme="dark"] #mainContent .topic-conf-row .conf-btn.nw-yes { background: color-mix(in srgb, var(--am) 16%, transparent) !important; color: #f0c56a !important; }
html body #mainContent .topic-conf-row .conf-hint { font-size: 12px !important; color: var(--tx3) !important; font-weight: 500 !important; }

/* guide body: a little more air between numbered sections */
html body .sg-wrap.sg-embed .sg-sec { scroll-margin-top: 84px; }
html body .sg-wrap .sg-sec-n {
  min-width: 28px;
  height: 26px;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
}
html body .sg-wrap .sg-glance { border-radius: 14px !important; }

/* ==========================================================================
   5. REVISION HUB
   ========================================================================== */
html body .revhub-wrap { max-width: 1120px; padding: 4px 0 40px; }
html body .revhub-hero {
  padding: 28px 30px !important;
  background: color-mix(in srgb, var(--ac) 7%, var(--bg2)) !important;
  border: 1px solid color-mix(in srgb, var(--ac) 18%, var(--bdr)) !important;
  border-radius: 20px !important;
  margin-bottom: 30px !important;
}
html body .revhub-kicker { display: none; }
html body .revhub-title {
  margin: 0 0 8px !important;
  font-family: var(--serif) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--tx);
}
html body .revhub-sub { font-size: 15px !important; color: var(--tx2); opacity: 1 !important; }
html body .revhub-hero-ico {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--ac) !important;
  opacity: 1 !important;
}
html body .revhub-hero-ico svg { width: 30px !important; height: 30px !important; }

html body .revhub-section-title {
  margin: 0 0 12px !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: var(--tx3);
  opacity: 1 !important;
}
html body .revhub-section-title.revhub-2 { margin-top: 34px !important; }
html body .revhub-grid { gap: 14px !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }

/* each tool keeps its own colour, used for the badge and hover — no side stripe */
.revhub-card { --rk: var(--ac); }
.revhub-card.revhub-quiz     { --rk: #0284c7; }
.revhub-card.revhub-daily    { --rk: #3c8b58; }
.revhub-card.revhub-stations { --rk: #d97706; }
.revhub-card.revhub-game     { --rk: #6366f1; }
.revhub-card.revhub-kit      { --rk: #6366f1; }
.revhub-card.revhub-topicday { --rk: #0f766e; }
.revhub-card.revhub-blur     { --rk: #6366f1; }
.revhub-card.revhub-maps     { --rk: #0d9488; }
.revhub-card.revhub-match    { --rk: #db2777; }
.revhub-card.revhub-roulette { --rk: #d97706; }

html body .revhub-card {
  min-height: 168px;
  padding: 20px 20px 46px !important;
  gap: 8px !important;
  background: var(--ap-card-bg) !important;
  border: 1px solid var(--ap-card-bdr) !important;
  border-radius: var(--ap-r) !important;
  box-shadow: var(--ap-card-shadow) !important;
  transition: transform .18s var(--ap-ease), box-shadow .18s, border-color .18s !important;
}
html body .revhub-card::before { display: none !important; }
html body .revhub-card::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 15px;
  line-height: 1;
  color: var(--tx3);
  opacity: .7;
  transition: transform .18s var(--ap-ease), color .18s, opacity .18s;
}
html body .revhub-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--rk) 45%, var(--bdr)) !important;
  box-shadow: var(--ap-card-shadow-hover) !important;
}
html body .revhub-card:hover::after { color: var(--rk); opacity: 1; transform: translateX(3px); }
html body .revhub-card:focus-visible { outline: 2px solid var(--ac) !important; outline-offset: 2px; }
html body .revhub-card-badge {
  padding: 3px 9px !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
  background: color-mix(in srgb, var(--rk) 12%, transparent) !important;
  color: color-mix(in srgb, var(--rk) 78%, #000) !important;
}
html body[data-theme="dark"] .revhub-card-badge {
  background: color-mix(in srgb, var(--rk) 20%, transparent) !important;
  color: color-mix(in srgb, var(--rk) 55%, #fff) !important;
}
html body .revhub-card-t {
  font-family: var(--serif);
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--tx);
}
html body .revhub-card-s { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--tx3); opacity: 1 !important; }

/* ==========================================================================
   6. SMALL SHARED DETAILS
   ========================================================================== */
/* consistent focus ring for keyboard users */
html body #mainContent button:focus-visible,
html body .sidebar [role="button"]:focus-visible,
html body .sidebar button:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* icons injected by atlas-polish.js */
.ap-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* footer: a touch more breathing room */
html body .credit-footer { padding: 44px 24px 40px !important; }

/* Daily Random 10: start button joins the sage palette (was near-black) */
html body .d10-start,
html body[data-theme="dark"] .d10-start {
  background: var(--accent, #3f7568) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html body .d10-start:hover { background: var(--ach) !important; }
html body[data-theme="dark"] .d10-start:hover { background: #4c8073 !important; }

/* numeracy sidebar counts match the body-system counts */
html body .sidebar .sb-item .cnt {
  margin-left: auto;
  padding: 0 !important;
  min-width: 0 !important;
  background: none !important;
  color: var(--tx3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
html body .sidebar .sb-item.active .cnt { color: var(--ac) !important; }

/* ==========================================================================
   7. PHONE
   ========================================================================== */
@media (max-width: 760px) {
  html body .nav { gap: 10px; }
  html body .nav .logo-mark img { width: 34px !important; height: 34px !important; }
  html body .nav .logo span[style*="font-size:20px"] { font-size: 18px !important; }
  html body .nav .logo span[style*="font-size:10px"] { font-size: 8.5px !important; letter-spacing: .12em !important; }

  html body .home-section-title { margin: 30px 0 12px !important; font-size: 20px !important; }
  html body .sys-grid.professional-systems {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body .sys-card.professional-card { min-height: 104px !important; padding: 14px 34px 14px 14px !important; }
  html body .sys-card.professional-card::before { inset: 15px auto auto 15px; }
  html body .sys-card.professional-card h3 { font-size: 13.5px !important; }
  html body .sys-card.professional-card .card-arrow { right: 12px !important; bottom: 12px !important; }

  html body .dh-focus.dh-quad > .dh-card,
  html body .dh-focus.dh-quad > .plhp { padding: 18px !important; }

  html body #mainContent .back { margin-bottom: 18px !important; }
  html body #mainContent .topic-tools button { height: 34px; padding: 0 12px 0 10px !important; font-size: 12.5px !important; }

  html body .revhub-hero { padding: 22px !important; }
  html body .revhub-title { font-size: 28px !important; }
  html body .revhub-card { min-height: 0; }
  html body .revhub-hero-ico { display: none !important; }
}


/* ##########################################################################
   PART 2 — BOLDER REFRESH
   Same sage identity, more presence: a hero with your progress, body-system
   icons, a contents rail on guides, a stronger type scale. Works with the
   markup js/atlas-polish.js adds (.ap-* classes). Comes after part 1 on
   purpose so it wins where the two overlap.
   ########################################################################## */

/* ---------- shared icon defaults ---------- */
.ap-sys-ico, .ap-tp-ico, .ap-hdr-ico, .ap-tool-ico { display: grid !important; place-items: center; line-height: 0; }
.ap-sys-ico svg, .ap-cat-ico svg, .ap-tp-ico svg, .ap-hdr-ico svg, .ap-tool-ico svg,
.ap-stat svg, .ap-toc svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   8. HOME HERO — sage panel with a contour-map texture and your stats
   ========================================================================== */
html body #atDashHero .dh-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px 28px !important;
  margin: 0 0 20px !important;
  padding: 34px 36px 30px !important;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(120% 160% at 88% -10%, #55897b 0%, #2f5a50 46%, #24473e 100%) !important;
  box-shadow: 0 1px 2px rgba(20, 40, 34, .10), 0 22px 44px -18px rgba(20, 40, 34, .45);
}
html body #atDashHero .dh-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("atlas-contours.svg") center / cover no-repeat;
  pointer-events: none;
}
html body[data-theme="dark"] #atDashHero .dh-head {
  background: radial-gradient(120% 160% at 88% -10%, #2c4d43 0%, #1b302a 48%, #15251f 100%) !important;
  box-shadow: 0 0 0 1px #25352f, 0 22px 44px -18px rgba(0, 0, 0, .6);
}
html body #atDashHero .dh-head > :first-child { grid-column: 1; min-width: 0; }
html body #atDashHero .dh-head-btns { grid-column: 2; margin: 0 !important; align-self: start; }

html body .ap-kicker {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
html body #atDashHero .dh-hi {
  text-wrap: balance;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(30px, 3.3vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}
html body #atDashHero .dh-sub {
  margin: 10px 0 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .8) !important;
}
html body #atDashHero .dh-head .dh-pill:not(.solid) {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
}
html body #atDashHero .dh-head .dh-pill:not(.solid):hover { background: rgba(255, 255, 255, .18) !important; }
html body #atDashHero .dh-head .dh-pill.solid {
  background: #fff !important;
  border-color: #fff !important;
  color: #24473e !important;
}
html body #atDashHero .dh-head .dh-pill.solid:hover { background: #e7f2ed !important; border-color: #e7f2ed !important; }
html body[data-theme="dark"] #atDashHero .dh-head .dh-pill.solid { background: #8fbfb1 !important; border-color: #8fbfb1 !important; color: #0f1613 !important; }
html body #atDashHero .dh-head .dh-pill:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* stat tiles */
html body .ap-hero-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
html body .ap-stat {
  padding: 14px 16px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html body .ap-stat-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
}
html body .ap-stat-top svg { width: 15px; height: 15px; flex: 0 0 auto; }
html body .ap-stat-n {
  margin: 8px 0 11px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
}
html body .ap-stat-n small {
  margin-left: 3px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
}
html body .ap-stat-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
html body .ap-stat-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #bfe3d3; }
html body .ap-stat-bar-empty { visibility: hidden; }
html body .ap-stat.is-warn .ap-stat-n { color: #ffd98f; }
html body .ap-stat.is-hot .ap-stat-top svg { color: #ffb37a; }

/* the four cards below the hero lift a little more */
html body .dh-focus.dh-quad > .dh-card,
html body .dh-focus.dh-quad > .plhp { border-radius: 18px !important; }

/* section heading with a quiet count */
html body .home-section-title {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 44px 0 16px !important;
  font-size: 26px !important;
}
html body .ap-sec-meta {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tx3);
}

/* ==========================================================================
   9. BODY-SYSTEM CARDS — icon tile, round arrow, confidence bar
   ========================================================================== */
html body .sys-grid.professional-systems {
  grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)) !important;
  gap: 14px !important;
}
html body .sys-card.professional-card {
  min-height: 156px !important;
  padding: 18px 18px 24px !important;
  border-radius: 18px !important;
}
html body .sys-card.professional-card::before { display: none !important; }
html body .ap-sys-ico {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 44px;
  height: 44px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 13px;
  color: var(--sys, var(--ac));
  background: color-mix(in srgb, var(--sys, var(--ac)) 11%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--sys, var(--ac)) 20%, transparent);
  transition: transform .2s var(--ap-ease), background .2s;
}
html body[data-theme="dark"] .ap-sys-ico { background: color-mix(in srgb, var(--sys, var(--ac)) 16%, var(--bg2)); }
html body .sys-card.professional-card h3 { font-size: 15.5px !important; margin-bottom: 4px !important; }
html body .sys-card.professional-card .card-arrow {
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bdr);
  font-size: 14px !important;
  opacity: 1;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ap-ease);
}
html body .sys-card.professional-card:hover {
  background: color-mix(in srgb, var(--sys, var(--ac)) 4%, var(--bg2)) !important;
  transform: translateY(-3px) !important;
}
html body .sys-card.professional-card:hover .card-arrow {
  background: var(--sys, var(--ac));
  border-color: var(--sys, var(--ac));
  color: #fff !important;
  transform: none;
}
html body .sys-card.professional-card:hover .ap-sys-ico { transform: scale(1.06) rotate(-3deg); }
html body .ap-sys-bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sys, var(--ac)) 14%, transparent);
  overflow: hidden;
}
html body .ap-sys-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sys, var(--ac)); }

/* system page header gets the same tile, larger */
html body #mainContent > .sys-header[data-ap] { display: flex !important; align-items: center; gap: 18px; }
html body .ap-hdr-ico {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 18px;
  color: var(--sys, var(--ac));
  background: color-mix(in srgb, var(--sys, var(--ac)) 11%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--sys, var(--ac)) 22%, transparent);
}

/* ==========================================================================
   10. SIDEBAR ICONS (replace the colour dots)
   ========================================================================== */
html body .fa-cat-head .fa-cat-dot { display: none !important; }
html body .ap-cat-ico {
  flex: 0 0 auto;
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--cat, var(--tx3));
  opacity: .85;
  transition: opacity .15s, transform .15s var(--ap-ease);
}
html body .fa-cat-head:hover .ap-cat-ico,
html body .fa-cat.fa-open > .fa-cat-head .ap-cat-ico { opacity: 1; transform: scale(1.08); }

/* ==========================================================================
   11. TOPIC PAGES — bigger title with system tile, contents rail
   ========================================================================== */
html body #mainContent > .tp-title {
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(30px, 3.3vw, 44px) !important;
  line-height: 1.08 !important;
}
html body .ap-tp-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 13px;
  box-sizing: border-box;
  border-radius: 16px;
  color: var(--sys, var(--ac));
  background: color-mix(in srgb, var(--sys, var(--ac)) 11%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--sys, var(--ac)) 22%, transparent);
}
html body[data-theme="dark"] .ap-tp-ico,
html body[data-theme="dark"] .ap-hdr-ico { background: color-mix(in srgb, var(--sys, var(--ac)) 16%, var(--bg2)); }
html body .sg-wrap .sg-sec-h { font-size: 22px !important; }

/* sticky needs a non-scrolling ancestor chain: clip instead of hidden (no visual change) */
html body.view-topic,
html body.view-topic #mainContent {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* the rail itself (narrow screens: a collapsible card above the guide) */
html body .ap-toc {
  margin: 0 0 28px;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  background: var(--bg2);
  box-shadow: var(--ap-card-shadow);
  overflow: hidden;
}
html body .ap-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
html body .ap-toc-head svg { width: 17px; height: 17px; color: var(--ac); }
html body .ap-toc-title { flex: 1 1 auto; }
html body .ap-toc-pct { font-size: 12px; font-weight: 600; color: var(--tx3); font-variant-numeric: tabular-nums; }
html body .ap-toc-chev {
  width: 7px;
  height: 7px;
  margin: 0 4px 3px 4px;
  border-right: 1.75px solid var(--tx3);
  border-bottom: 1.75px solid var(--tx3);
  transform: rotate(45deg);
  transition: transform .2s var(--ap-ease);
}
html body .ap-toc.open .ap-toc-chev { transform: rotate(225deg); margin-bottom: -3px; }
html body .ap-toc-track { height: 2px; background: var(--bdr); }
html body .ap-toc-track i,
html body #ap-read-progress i {
  display: block;
  height: 100%;
  background: var(--ac);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
html body .ap-toc-list { display: none; margin: 0; padding: 8px 8px 10px; list-style: none; }
html body .ap-toc.open .ap-toc-list { display: block; }
html body .ap-toc-list li { margin: 0; padding: 0; list-style: none; }
html body .ap-toc-list li::before, html body .ap-toc-list li::marker { content: none; }
html body .ap-toc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tx2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
html body .ap-toc-item:hover { background: var(--bg3); color: var(--tx); }
html body .ap-toc-item.on { color: var(--ach); font-weight: 600; background: color-mix(in srgb, var(--ac) 9%, transparent); }
html body[data-theme="dark"] .ap-toc-item.on { color: var(--ac); }
html body .ap-toc-n {
  flex: 0 0 auto;
  min-width: 18px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
html body .ap-toc-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-2px);
}
html body .ap-toc-item.on .ap-toc-n { color: var(--ac); }
html body .ap-toc-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .ap-toc-top { display: none; }
html body .ap-toc-item:focus-visible,
html body .ap-toc-head:focus-visible,
html body .ap-toc-top:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }

/* wide screens: a sticky rail beside the guide */
@media (min-width: 1280px) {
  html body #mainContent:has(> .ap-toc) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 232px;
    column-gap: 48px;
    align-items: start;
  }
  html body #mainContent:has(> .ap-toc) > * { grid-column: 1; min-width: 0; }
  html body #mainContent:has(> .ap-toc) > :is(.back, .tp-title, #atTopicMeta, .at-listen-wrap, .tp-cat, .topic-tools, .topic-conf-row, .sg-wrap) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body #mainContent:has(> .ap-toc) > .back { justify-self: start; }
  html body #mainContent > .ap-toc {
    grid-column: 2;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--nav-h, 64px) + 24px);
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--nav-h, 64px) - 48px);
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  html body .ap-toc-head {
    min-height: 0;
    padding: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx3);
    pointer-events: none;
  }
  html body .ap-toc-head svg, html body .ap-toc-chev { display: none; }
  html body .ap-toc-track { margin: 0 0 8px; border-radius: 99px; overflow: hidden; }
  html body .ap-toc-list {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
    border-left: 1px solid var(--bdr);
    scrollbar-width: thin;
  }
  html body .ap-toc-item {
    margin-left: -1px;
    padding: 7px 10px 7px 14px;
    font-size: 13px;
    color: var(--tx3);
    border-left: 2px solid transparent;
    border-radius: 0 9px 9px 0;
  }
  html body .ap-toc-item.on { border-left-color: var(--ac); }
  html body .ap-toc-top {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 0 12px 0 9px;
    height: 32px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tx2);
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: 999px;
    cursor: pointer;
  }
  html body .ap-toc-top svg { width: 15px; height: 15px; }
  html body .ap-toc-top:hover { border-color: var(--ac); color: var(--ac); }
}

/* reading progress line under the header */
#ap-read-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  z-index: 95;
  height: 3px;
  display: none;
  pointer-events: none;
  background: transparent;
}
html.ap-reading body.view-topic #ap-read-progress { display: block; }
html body #ap-read-progress i { background: linear-gradient(90deg, var(--accent, #3f7568), #7fbaa7); }

@media print {
  .ap-toc, #ap-read-progress, .ap-hero-stats { display: none !important; }
  html body #mainContent,
  html body #mainContent:has(> .ap-toc) { display: block !important; }
}

/* system page: topic rows with aligned bookmark + round arrow */
html body .topic-grid { gap: 10px !important; }
html body .topic-grid > .topic-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px 12px 20px !important;
  border-radius: 14px !important;
  background: var(--ap-card-bg) !important;
  border: 1px solid var(--ap-card-bdr) !important;
  box-shadow: var(--ap-card-shadow) !important;
  cursor: pointer;
  transition: transform .18s var(--ap-ease), box-shadow .18s, border-color .18s !important;
}
html body .topic-grid > .topic-card h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--tx) !important;
}
html body .topic-grid > .topic-card .tc-pl-icon {
  position: static !important;
  order: 2;
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
html body .topic-grid > .topic-card .tc-pl-icon:hover { background: var(--bg3) !important; color: var(--ac) !important; }
html body .topic-grid > .topic-card .arr {
  order: 3;
  flex: 0 0 auto;
  position: static !important;
  display: grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--bdr) !important;
  background: transparent !important;
  color: var(--tx3) !important;
  font-size: 14px !important;
  transition: background .18s, color .18s, border-color .18s;
}
html body .topic-grid > .topic-card:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--ac) 40%, var(--bdr)) !important;
  box-shadow: var(--ap-card-shadow-hover) !important;
}
html body .topic-grid > .topic-card:hover .arr { background: var(--ac) !important; border-color: var(--ac) !important; color: #fff !important; }
html body[data-theme="dark"] .topic-grid > .topic-card:hover .arr { color: #0f1613 !important; }

/* ==========================================================================
   12. REVISION HUB — hero matches home, an icon for each tool
   ========================================================================== */
html body .revhub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 36px !important;
  border: 0 !important;
  border-radius: 24px !important;
  color: #fff;
  background: radial-gradient(120% 160% at 88% -10%, #55897b 0%, #2f5a50 46%, #24473e 100%) !important;
  box-shadow: 0 1px 2px rgba(20, 40, 34, .10), 0 22px 44px -18px rgba(20, 40, 34, .45);
}
html body .revhub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("atlas-contours.svg") center / cover no-repeat;
}
html body[data-theme="dark"] .revhub-hero {
  background: radial-gradient(120% 160% at 88% -10%, #2c4d43 0%, #1b302a 48%, #15251f 100%) !important;
  box-shadow: 0 0 0 1px #25352f, 0 22px 44px -18px rgba(0, 0, 0, .6);
}
html body .revhub-title { color: #fff !important; font-size: clamp(30px, 3.3vw, 44px) !important; }
html body .revhub-sub { color: rgba(255, 255, 255, .8) !important; }
html body .revhub-hero-ico {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}

html body .revhub-card { padding-top: 20px !important; min-height: 184px; }
html body .ap-tool-ico {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 13px;
  color: color-mix(in srgb, var(--rk) 85%, #000);
  background: color-mix(in srgb, var(--rk) 11%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--rk) 20%, transparent);
  transition: transform .2s var(--ap-ease);
}
html body[data-theme="dark"] .ap-tool-ico {
  color: color-mix(in srgb, var(--rk) 60%, #fff);
  background: color-mix(in srgb, var(--rk) 18%, var(--bg2));
}
html body .revhub-card:hover .ap-tool-ico { transform: scale(1.06) rotate(-3deg); }
html body .revhub-card-t { font-size: 20px !important; margin-top: 4px; }

/* ==========================================================================
   13. MOTION — gentle, and off for people who ask for less
   ========================================================================== */
@keyframes apRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html body .ap-hero-stats .ap-stat { animation: apRise .5s var(--ap-ease) both; }
html body .ap-hero-stats .ap-stat:nth-child(2) { animation-delay: .05s; }
html body .ap-hero-stats .ap-stat:nth-child(3) { animation-delay: .10s; }
html body .ap-hero-stats .ap-stat:nth-child(4) { animation-delay: .15s; }
html body .ap-stat-bar i, html body .ap-sys-bar i { animation: apGrow .9s var(--ap-ease) both .15s; transform-origin: 0 50%; }
@keyframes apGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  html body .ap-hero-stats .ap-stat, html body .ap-stat-bar i, html body .ap-sys-bar i { animation: none !important; }
  html body .sys-card.professional-card:hover,
  html body .revhub-card:hover { transform: none !important; }
  html body .sys-card.professional-card:hover .ap-sys-ico,
  html body .revhub-card:hover .ap-tool-ico { transform: none; }
}

/* ==========================================================================
   14. PART 2 ON SMALLER SCREENS
   ========================================================================== */
@media (max-width: 1100px) {
  html body .ap-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html body #atDashHero .dh-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px 20px !important;
    border-radius: 20px;
  }
  html body #atDashHero .dh-head-btns { grid-column: 1; justify-content: flex-start; }
  html body .ap-hero-stats { gap: 10px; margin-top: 4px; }
  html body .ap-stat { padding: 12px 13px; border-radius: 14px; }
  html body .ap-stat-n { font-size: 26px; margin: 6px 0 9px; }
  html body .home-section-title { font-size: 22px !important; margin: 32px 0 12px !important; }

  html body .sys-grid.professional-systems { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .sys-card.professional-card { min-height: 138px !important; padding: 14px 14px 20px !important; }
  html body .ap-sys-ico { top: 14px; left: 14px; width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
  html body .sys-card.professional-card .card-arrow { top: 14px !important; right: 14px !important; width: 26px !important; height: 26px !important; }
  html body .ap-sys-bar { left: 14px; right: 14px; bottom: 10px; }
  html body .sys-card.professional-card h3 { font-size: 14px !important; }

  html body .ap-tp-ico { width: 42px; height: 42px; padding: 10px; border-radius: 13px; }
  html body #mainContent > .tp-title { gap: 12px; }
  html body .ap-hdr-ico { width: 48px; height: 48px; padding: 12px; border-radius: 14px; }

  html body .revhub-hero { padding: 24px 20px !important; }
  html body .revhub-card { min-height: 0; }
}

/* phone header: drop the tagline so logo, mode switch and theme share one row
   (it still wraps to the old layout on very narrow screens) */
@media (max-width: 520px) {
  html body .nav .logo span[style*="font-size:10px"] { display: none !important; }
  html body .nav .logo { flex: 1 1 auto; gap: 9px; }
}
@media (max-width: 380px) {
  html body .nav { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  html body .nav .logo { gap: 7px; }
  html body .nav .logo-mark img { width: 30px !important; height: 30px !important; }
  html body .nav .logo span[style*="font-size:20px"] { font-size: 17px !important; }
  html body .nav .mode-seg-btn { padding-left: 8px !important; padding-right: 8px !important; }
}