/* ════════════════════════════════════════════════════════════════
   RAYZ VERIFIED — changemaker learning platform
   Foundation iridescent design language (synced with the
   Changemaker Guide + rayz.space)
   ════════════════════════════════════════════════════════════════ */
:root {
  --topbar-h: 70px;
  /* The staging banner is fixed to the top and pushes the topbar down. Anything
     that sticks *below* the topbar has to allow for it, or it parks underneath
     the topbar and its contents get clipped. Zero everywhere except staging. */
  --banner-h: 0px;
  --stick-below-bar: calc(var(--banner-h) + var(--topbar-h) + 1px);
  --ink: #0c1622;
  --ink-2: #1a2432;
  --ink-deep: #0a0c14;
  --mid: rgba(12,22,34,0.64);
  --faint: rgba(12,22,34,0.46);
  --line: rgba(12,22,34,0.09);
  --line-strong: rgba(12,22,34,0.18);
  --grad: linear-gradient(102deg,#f4f1e7 0%,#d8c7f5 46%,#aeb9f1 100%);
  --grad-soft: linear-gradient(102deg,rgba(244,241,231,0.58) 0%,rgba(216,199,245,0.26) 46%,rgba(174,185,241,0.22) 100%);
  --grad-text: linear-gradient(102deg,#0c1622 0%,#6b5e95 48%,#4f6fb3 100%);
  --fill: linear-gradient(105deg,#efe7fb 0%,#d7ccf6 34%,#bcc2f2 66%,#e9e3fb 100%);
  --on-fill: #0b0d13;
  --lilac: #d8c7f5;
  --peri: #aeb9f1;
  --plum: #6b5e95;
  --blue: #4f6fb3;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 28px 84px -70px rgba(12,22,34,0.34);
  --font-head: "Satoshi", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num: "DM Sans", "Inter", sans-serif;
  --font-label: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Kept only for text a person copies out by hand, character by character:
     the two-step key and a certificate serial. Nothing decorative uses it.
     No webfont: this is whatever the device already has. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* overflow-x:hidden turns html/body into a scroll container, which silently kills
   position:sticky on the top bar and the reader bar. overflow-x:clip does the same
   job without creating one; the hidden line stays first as the fallback. */
/* On the root only, not on body. The root's overflow is propagated to the
   viewport, so this still prevents a horizontal scrollbar, but body is left as a
   plain non-clipping box. Safari jitters position:sticky elements inside a
   clipping ancestor, and body was one. 19 Aug. */
html { overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink-2);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
button { font-family: var(--font-body); }

h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.08; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); letter-spacing: -0.05em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.045em; }
h3 { font-size: 1.14rem; letter-spacing: -0.03em; line-height: 1.3; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.grad-line {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; padding-bottom: .12em;
  /* headings run negative letter-spacing, which shortens the inline-block by that
     much on the last glyph too — background-clip:text then shaves its right edge
     off. Pad the paint box so the final letter is drawn in full. */
  padding-right: .1em;
}

/* Kicker: small caps + gradient dash */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(12,22,34,0.58);
}
.kicker::before {
  content: ""; width: 22px; height: 2px; border-radius: 999px;
  background: var(--grad); flex: 0 0 auto;
}
.kicker.on-dark { color: rgba(255,255,255,0.62); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid rgba(12,22,34,0.14);
  padding: 12px 24px; cursor: pointer; background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, opacity .22s;
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: 0 18px 42px -30px rgba(12,22,34,0.7);
}
.btn.primary:hover { background: #101f30; }
.btn.iridescent { background: var(--fill); border-color: transparent; color: var(--on-fill); }
.btn.iridescent:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.small { padding: 8px 16px; font-size: .82rem; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--mid); }
.btn.ghost:hover { color: var(--ink); border-color: transparent; transform: none; }
.btn.danger:hover { border-color: #b04a5a; color: #b04a5a; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px); /* Safari needs the prefix */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  height: var(--topbar-h); display: flex; align-items: center; gap: 18px;
}
/* Phones: the destinations scroll sideways, but the wordmark and your photo stay
   pinned. The whole bar used to scroll, which meant Sign out and Settings were off
   the right edge until you dragged the bar - fine when they were behind a ⋮⋮ button
   nobody used, not fine now that the account menu is the only way to sign out. */
@media (max-width: 820px) {
  .topbar-inner { gap: 10px; }
  .topbar-inner > *, .topnav button, .wordmark, .acct-wrap, .acct-btn, .topbar .avatar { flex: none; }
  .topnav {
    flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrollbar: touch;
    scrollbar-width: none; gap: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav button { white-space: nowrap; }
  .topbar .spacer { display: none; }
}
/* the ACADEMY pill is decoration; on a small phone the destinations need the room */
@media (max-width: 600px) { .wordmark .vp { display: none; } }
.wordmark {
  font-family: var(--font-head); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.04em; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 10px; background: none; border: 0;
}
.wordmark img { height: 42px; width: auto; display: block; }
.wordmark .vp {
  font-family: var(--font-label); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plum);
  border: 1px solid rgba(107,94,149,.4); border-radius: 999px; padding: 2px 8px;
  transform: translateY(-2px);
}
.topbar .spacer { flex: 1; }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav button {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  letter-spacing: -0.01em; color: var(--mid); padding: 8px 13px; border-radius: 999px;
  transition: color .2s, background .2s;
}
.topnav button:hover { color: var(--ink); }
.topnav button.active { color: var(--ink); background: rgba(216,199,245,0.24); }
.topnav .topnav-journey { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.beta-chip {
  font-family: var(--font-label); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--plum); padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent; line-height: 1.4;
}
.avatar {
  width: 34px; height: 34px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--fill); color: var(--on-fill);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Shell ── */
.shell { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.view { padding: 48px 0 110px; }

/* ════════════════════════ AUTH ════════════════════════ */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }
.auth-hero {
  background: var(--ink-deep); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 46px 52px; color: #fff;
}
.auth-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 12%, rgba(174,185,241,0.26) 0%, transparent 46%),
    radial-gradient(circle at 8% 88%, rgba(216,199,245,0.20) 0%, transparent 44%),
    radial-gradient(circle at 45% 55%, rgba(244,241,231,0.07) 0%, transparent 55%);
}
.auth-hero > * { position: relative; }
.auth-hero .wordmark { color: #fff; }
.auth-hero h1 { color: #fff; margin-top: 18px; }
.auth-hero h1 .grad-line {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
}
.auth-hero .lede { margin-top: 18px; color: rgba(255,255,255,0.66); max-width: 42ch; font-size: 1.02rem; }
.auth-points { list-style: none; margin-top: 30px; display: grid; gap: 0; }
.auth-points li {
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: .92rem; color: rgba(255,255,255,0.72); display: flex; gap: 12px; align-items: baseline;
}
.auth-points .n { font-family: var(--font-label); font-size: .68rem; color: var(--lilac); }
.auth-foot { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 28px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { margin-top: 10px; }
.auth-card .sub-lede { margin-top: 10px; color: var(--mid); font-size: .95rem; }
.field { margin-top: 16px; }
.field label {
  display: block; font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: rgba(174,185,241,0.9); box-shadow: 0 0 0 3px rgba(174,185,241,0.22); }
.auth-actions { margin-top: 24px; display: grid; gap: 12px; }
.auth-swap { margin-top: 20px; font-size: .88rem; color: var(--mid); text-align: center; }
.auth-swap button { border: 0; background: none; cursor: pointer; color: var(--ink); font-weight: 700; font-size: .88rem; }
.auth-error {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(176,74,90,0.07); border: 1px solid rgba(176,74,90,0.25);
  color: #8f3d4b; font-size: .88rem; display: none;
}
.auth-error.show { display: block; }
.auth-note {
  margin-top: 16px; padding: 14px 18px; border-radius: 14px;
  background: var(--grad-soft); border: 1px solid rgba(174,185,241,0.24);
  font-size: .9rem; color: var(--ink-2); display: none;
}
.auth-note.show { display: block; }

/* ════════════════════════ PENDING ════════════════════════ */
.pending-wrap { min-height: calc(100vh - var(--topbar-h)); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.pending-card { max-width: 560px; text-align: center; }
.pending-orb {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 28px;
  background: var(--fill); position: relative;
  animation: orbFloat 4.5s ease-in-out infinite;
  box-shadow: 0 30px 70px -40px rgba(107,94,149,0.55);
}
.pending-orb::after {
  content: ""; position: absolute; inset: 26px;
  border-radius: 50%; background: #fff;
}
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.pending-card h1 { margin-top: 6px; }
.pending-card p { margin-top: 16px; color: var(--mid); }
.pending-card .btn { margin-top: 26px; }

/* ════════════════════════ HOME ════════════════════════ */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.home-head h1 { margin-top: 10px; }
.overall {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow);
}
.overall .num { font-family: var(--font-num); font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.overall span { font-size: .82rem; color: var(--mid); }
.ring { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring .bg { stroke: rgba(12,22,34,0.08); }
.ring .fg { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }

.course-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .course-grid { grid-template-columns: 1fr; } }
.ccard {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid rgba(12,22,34,0.07); border-radius: 20px;
  background: #fff; padding: 26px 28px 24px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display: block; width: 100%;
}
.ccard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--fill); opacity: 0; transition: opacity .5s var(--ease);
}
.ccard > * { position: relative; z-index: 1; }
.ccard:hover { border-color: rgba(174,185,241,0.6); box-shadow: 0 26px 54px -34px rgba(12,22,34,0.30); }
.ccard:hover::before { opacity: .5; }
.ccard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ccard h3 { font-size: 1.45rem; margin-top: 12px; }
.ccard .desc { margin-top: 8px; font-size: .89rem; color: var(--mid); line-height: 1.55; }
.ccard .meta { margin-top: 16px; display: flex; align-items: center; gap: 14px; font-size: .8rem; color: var(--faint); }
.ccard .meta .num { color: var(--ink); font-weight: 600; }
.ccard .bar { margin-top: 14px; height: 5px; border-radius: 99px; background: rgba(12,22,34,0.07); overflow: hidden; }
.ccard .bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .8s var(--ease); }
.renew-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; border: 1px solid transparent;
}
.renew-chip.ok { background: #e2f6e7; color: #1f7a45; border-color: rgba(31,122,69,0.25); }
.renew-chip.soon { background: #fdf3e0; color: #96660f; border-color: rgba(150,102,15,0.3); }
.renew-chip.overdue { background: #fbe4e8; color: #a83a4a; border-color: rgba(168,58,74,0.3); }

.done-chip {
  font-family: var(--font-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  background: #e2f6e7; color: #1f7a45; border: 1px solid rgba(31,122,69,0.25); border-radius: 999px; padding: 4px 11px;
}
.mrow .done-chip { margin-left: 10px; vertical-align: 2px; padding: 2px 9px; }
.mrow-link {
  margin-left: 10px; font-size: .78rem; color: var(--plum); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-weight: 600;
}
.mrow-link:hover { color: var(--blue); }
.ccard-badge svg { width: 100%; height: 100%; display: block; }
.ccard-badge {
  position: absolute; top: 20px; right: 22px; width: 66px; height: 66px; z-index: 1;
  transition: transform .3s var(--ease), filter .3s, opacity .3s;
}
.ccard-badge.ghost { filter: grayscale(1); opacity: .35; }
.ccard:hover .ccard-badge { transform: scale(1.05); }
.ccard:hover .ccard-badge.ghost { filter: grayscale(.4); opacity: .7; }
.ccard .ccard-top, .ccard h3 { padding-right: 76px; }
.ccard .badge-line { margin-top: 12px; font-size: .8rem; color: var(--mid); }
.ccard .badge-line strong { color: var(--plum); }
.badge-line { font-size: .8rem; }

/* badge lightbox */
.blb {
  position: fixed; inset: 0; z-index: 300; cursor: zoom-out;
  background: rgba(6, 9, 16, 0.9); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: blbIn .3s var(--ease);
}
@keyframes blbIn { from { opacity: 0; } to { opacity: 1; } }
.blb-inner { text-align: center; padding: 30px; max-width: 560px; cursor: default; }
.blb-medal { width: min(72vw, 420px); height: min(72vw, 420px); margin: 0 auto; animation: blbPop .5s var(--ease); }
.blb-medal img, .blb-medal svg { width: 100% !important; height: 100% !important; }
.blb-medal.ghost { filter: grayscale(1); opacity: .5; }
@keyframes blbPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.blb-inner .kicker { margin-top: 18px; }
.blb-inner h2 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: 10px; }
.blb-inner p { color: rgba(255,255,255,0.65); margin-top: 10px; font-size: .95rem; line-height: 1.6; }
.blb-close { margin-top: 20px; }
.ccard-badge, .ph-badge { cursor: zoom-in; }
.bghost { filter: grayscale(1); opacity: .45; transition: filter .3s, opacity .3s; }
.bghost:hover { filter: grayscale(.5); opacity: .8; }

/* course page: the badge you are working towards */
.badge-target {
  display: flex; align-items: center; gap: 18px;
  border: 1.5px solid transparent; border-radius: 20px; padding: 18px 24px 18px 18px;
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad) border-box;
  box-shadow: var(--shadow);
}
.badge-target .medal { flex: none; }
.badge-target .bt-name { display: block; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; margin-top: 4px; color: var(--ink); }
.badge-target .bt-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.badge-target .bt-meta .num { font-size: .8rem; color: var(--ink); }
.badge-target .bt-sub { display: block; margin-top: 6px; font-size: .78rem; color: var(--mid); }
.badge-target.earned .bt-sub { color: var(--plum); }

.org-logo-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.org-logo-thumb { height: 34px; max-width: 130px; object-fit: contain; object-position: left; }

/* profile header: always-visible badge row */
.ph-badges { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ph-badge { display: inline-flex; width: 38px; height: 38px; }
.ph-badge img, .ph-badge svg { width: 100% !important; height: 100% !important; }
.ph-badge.ghost { filter: grayscale(1); opacity: .3; }
.ph-count { margin-left: 6px; font-size: .8rem; color: var(--mid); }
.ph-count .num { color: var(--ink); font-weight: 600; }

.mand-chip {
  font-family: var(--font-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(216,199,245,0.28); color: var(--plum); border-radius: 999px; padding: 4px 11px;
}

/* Badge shelf */
.badge-shelf { margin-top: 54px; border-radius: 24px; background: var(--ink-deep); padding: 34px 38px 38px; position: relative; overflow: hidden; }
.badge-shelf::before {
  content: ""; position: absolute; top: -120px; right: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,199,245,0.30), transparent 62%); pointer-events: none;
}
.badge-shelf h2 { color: #fff; margin-top: 10px; }
.badge-shelf .bs-sub { color: rgba(255,255,255,0.6); margin-top: 8px; font-size: .92rem; }
.badge-row { margin-top: 26px; display: flex; gap: 26px; flex-wrap: wrap; position: relative; }
.badge {
  width: 132px; text-align: center;
}
.badge .medal { width: 96px; height: 96px; margin: 0 auto; position: relative; }
.medal img, .medal svg { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.badge.locked .medal { opacity: .22; filter: grayscale(1); }
.badge .b-name { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: .84rem; letter-spacing: -0.02em; color: #fff; }
.badge.locked .b-name { color: rgba(255,255,255,0.38); }
.badge .b-date { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.44); margin-top: 3px; }

/* ════════════════════════ COURSE ════════════════════════ */
.crumb { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin-bottom: 24px; }
.crumb button { border: 0; background: none; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink); letter-spacing: -0.01em; }
.crumb button:hover { color: var(--plum); }
.course-head { margin-top: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.course-head h1 { margin-top: 10px; max-width: 16ch; }
.course-head .lede { margin-top: 14px; color: var(--mid); max-width: 52ch; }

.mod-list { margin-top: 40px; display: grid; gap: 0; }
.mrow {
  display: flex; align-items: center; gap: 20px; text-align: left;
  width: 100%; background: none; border: 0; border-top: 1px solid var(--line);
  padding: 20px 14px; cursor: pointer; position: relative; overflow: hidden;
  transition: color .4s var(--ease);
  isolation: isolate;
}
.mrow:last-child { border-bottom: 1px solid var(--line); }
.mrow::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill); transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease);
}
@media (hover:hover) {
  .mrow:not(.locked):hover::before { transform: scaleY(1); }
  .mrow:not(.locked):hover .m-title, .mrow:not(.locked):hover .m-tag { color: var(--on-fill); }
}
.mrow .m-n { font-family: var(--font-label); font-size: .72rem; color: var(--faint); width: 26px; flex: 0 0 auto; }
.mrow .m-body { flex: 1; min-width: 0; }
.mrow .m-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.03em; color: var(--ink); transition: color .3s; }
.mrow .m-tag { display: block; font-size: .84rem; color: var(--mid); margin-top: 2px; transition: color .3s; }
.mrow .m-mins { font-family: var(--font-num); font-size: .8rem; color: var(--faint); flex: 0 0 auto; }
.m-state { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.m-state.done { background: #e2f6e7; color: #1f7a45; border: 1px solid rgba(31,122,69,0.25); }
.m-state.go { border: 1.5px solid var(--ink); color: var(--ink); }
.m-state.lock { border: 1px solid var(--line-strong); color: var(--faint); }
.m-state svg { width: 15px; height: 15px; }
.mrow.locked { cursor: default; }
.mrow.locked .m-title { color: var(--faint); }
.mrow.locked .m-tag { color: rgba(12,22,34,0.34); }
.draft-dot {
  display: inline-block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #8f6a2e; background: rgba(244,241,231,0.9);
  border: 1px solid rgba(143,106,46,0.28); border-radius: 999px; padding: 1px 8px; margin-left: 8px;
  vertical-align: 2px;
}

/* ════════════════════════ MODULE READER ════════════════════════ */
/* Solid white, and deliberately no backdrop-filter.

   It had blur(10px) over a 94%-opaque white, which is a lot of machinery for 6%
   of transparency nobody could see. The cost was real: a backdrop-filter forces
   its own compositing layer that re-samples everything behind it on every scroll
   frame, and this bar sits edge to edge with the topbar, which has its own
   blur(12px). Two abutting blur layers shimmered while scrolling. George called
   it "the whole bar is shaking", 19 Aug.

   Measuring found nothing, because nothing moves: the bar is pinned to the same
   pixel on every frame. It was a paint artifact, not a layout one. Solid white removes
   the layer and the artifact with it, and looks the same. */
.reader-top {
  position: sticky; top: var(--stick-below-bar); z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: 0 -24px; padding: 12px 24px;
}
.reader-top-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.reader-top .rt-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-head); font-weight: 700; font-size: .9rem; letter-spacing: -0.02em; color: var(--ink); }
.reader-top .rt-count { font-family: var(--font-num); font-size: .78rem; color: var(--faint); }
.rt-bar { height: 4px; border-radius: 99px; background: rgba(12,22,34,0.07); overflow: hidden; flex: 0 0 120px; }
.rt-bar i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .5s var(--ease); }

.reader { max-width: 720px; margin: 0 auto; padding-top: 40px; }
.reader .kicker { margin-bottom: 12px; }
.reader h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
.reader .r-tagline { margin-top: 14px; font-size: 1.06rem; color: var(--mid); }
.rsec-title { margin-top: 44px; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.04em; }
.reader .blocks { margin-top: 8px; }
.reader .blocks p { margin-top: 18px; }
.reader .blocks h3 { margin-top: 30px; font-size: 1.18rem; }
.reader .blocks ul { margin-top: 16px; padding-left: 2px; list-style: none; }
.reader .blocks ul li { position: relative; padding: 6px 0 6px 26px; color: var(--ink-2); }
.reader .blocks ul li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 10px; height: 3px; border-radius: 99px; background: var(--grad);
}
.reader blockquote {
  margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--lilac);
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.45;
}
.rcallout { margin: 26px 0; padding: 18px 22px; border-radius: 16px; font-size: .94rem; }
.rcallout .tag { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 7px; }
.rcallout.reflect { background: var(--grad-soft); border: 1px solid rgba(174,185,241,0.24); }
.rcallout.reflect .tag { color: var(--plum); }
.rcallout.activity { background: #fff; border: 1px dashed rgba(12,22,34,0.28); }
.rcallout.activity .tag { color: var(--ink); }
.rcallout.tip { background: rgba(244,241,231,0.55); border: 1px solid rgba(12,22,34,0.08); }
.rcallout.tip .tag { color: #8f6a2e; }
.rcallout.key {
  background: var(--ink-deep); color: rgba(255,255,255,0.88); border: 0; border-radius: 18px;
  background-image: radial-gradient(circle at 88% 10%, rgba(174,185,241,0.22) 0%, transparent 46%);
}
.rcallout.key .tag { color: var(--lilac); }
.rcallout .c-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; display: block; margin-bottom: 4px; }
/* a callout that carries a list, because a worked example and a dashboard
   snapshot are lists, and reading one as a run-on paragraph is a chore */
.rcallout .c-lead { margin-bottom: 10px; }
.rcallout .c-items { margin: 0; padding: 0; list-style: none; }
/* the marker and the indent come from `.reader .blocks ul li`, which is more
   specific and is the house style for a list. All this adds is the separator
   between rows, so a row with a status chip cannot be misread as two. */
.rcallout .c-items li { border-top: 1px solid rgba(12,22,34,.07); }
.rcallout .c-items li:first-child { border-top: 0; }
.rcallout .c-items b { font-weight: 700; color: var(--ink); }
.rcallout.key .c-items li { color: rgba(255,255,255,.88); }
.rcallout.key .c-items b { color: #fff; }
.rcallout .c-foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(12,22,34,.07); }
.rcallout .c-state {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-family: var(--font-label); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: rgba(12,22,34,.07); color: var(--mid);
}
.rcallout .c-state.ok { background: #e2f6e7; color: #1f7a45; }
.rcallout .c-state.warn { background: rgba(233,169,124,.3); color: #8f5326; }
/* the dark Key idea callout needs its own rules, the light ones vanish on it */
.rcallout.key .c-items li, .rcallout.key .c-foot { border-color: rgba(255,255,255,.14); }
.rcallout.key .c-state { background: rgba(255,255,255,.14); color: rgba(255,255,255,.86); }
.rcallout.key .c-state.ok { background: rgba(127,201,165,.28); color: #cdeedd; }
.rcallout.key .c-state.warn { background: rgba(233,169,124,.3); color: #f5d9c4; }
.rtable { width: 100%; border-collapse: collapse; margin: 24px 0 6px; font-size: .89rem; }
.rtable th {
  text-align: left; font-family: var(--font-label); font-weight: 400; font-size: 9.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--line-strong);
}
.rtable td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--mid); }
.rtable td:first-child { font-weight: 600; color: var(--ink); }

.reader-nav { margin-top: 52px; display: flex; justify-content: space-between; gap: 14px; }

/* ════════════════════════ QUIZ ════════════════════════ */
.quiz-frame { margin-top: 46px; padding: 2px; border-radius: 22px; background: var(--grad); }
.quiz-card { background: #fff; border-radius: 20px; padding: 30px 32px 34px; }
@media (max-width: 560px) { .quiz-card { padding: 24px 20px 28px; } }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; }
.quiz-head .tag { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--plum); }
.quiz-prog { font-family: var(--font-num); font-size: .82rem; font-weight: 600; color: var(--faint); }
.quiz-card h3 { margin-top: 16px; font-size: 1.28rem; }
.q-opts { margin-top: 18px; display: grid; gap: 10px; }
.q-opts button {
  text-align: left; padding: 14px 18px;
  border: 1.5px solid var(--line-strong); border-radius: 13px;
  background: #fff; cursor: pointer; font-size: .95rem; color: var(--ink);
  transition: border-color .15s, background .15s, transform .1s;
}
.q-opts button:hover:not(:disabled) { border-color: rgba(174,185,241,0.85); background: rgba(216,199,245,0.13); transform: translateY(-1px); }
.q-opts button:disabled { cursor: default; color: var(--mid); }
.q-opts button.selected { border-color: var(--ink); background: rgba(216,199,245,0.2); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 3px rgba(174,185,241,0.2); }
.q-opts button.right { border-color: var(--peri); background: rgba(174,185,241,0.2); color: var(--ink); font-weight: 600; }
.q-opts button.right::after { content: "  ✓"; color: var(--plum); font-weight: 800; }
.q-opts button.wrong { border-color: var(--line-strong); background: rgba(12,22,34,0.04); }
.q-opts button.wrong::after { content: "  ✕"; color: var(--faint); font-weight: 800; }
.q-why { margin-top: 14px; font-size: .92rem; color: var(--mid); }
.quiz-card .btn { margin-top: 18px; }
.q-result { text-align: center; padding: 12px 0 4px; }
.q-result .big { font-family: var(--font-num); font-weight: 700; font-size: 3rem; color: var(--ink); }
.q-result .big .of { font-size: 1.3rem; color: var(--faint); font-weight: 500; }
.q-result h3 { margin-top: 6px; font-size: 1.5rem; }
.q-result p { margin-top: 10px; color: var(--mid); font-size: .95rem; }
.q-result .btn { margin-top: 22px; }

/* Passing a module used to read like a receipt: a number, then "Module complete."
   Passing is the moment the whole module was for, so it gets a seal that draws
   itself, the person's name, and the module they just passed said out loud. The
   score drops to a chip, because by then it is the detail and not the headline. */
.q-result.won { padding-top: 4px; }
.qr-seal { position: relative; width: 92px; margin: 0 auto 4px; }
.qr-seal svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(12,22,34,.12)); animation: qrPop .55s var(--ease) both; }
.qr-tick { stroke-dasharray: 46; stroke-dashoffset: 46; animation: qrDraw .5s var(--ease) .3s forwards; }
@keyframes qrPop { 0% { transform: scale(.55); opacity: 0; } 62% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes qrDraw { to { stroke-dashoffset: 0; } }
.qr-spark { position: absolute; color: var(--peri); opacity: 0; animation: qrSpark 1.5s var(--ease) forwards; }
.qr-spark.s1 { left: -14px; top: 6px; font-size: 1.1rem; animation-delay: .42s; }
.qr-spark.s2 { right: -12px; top: 26px; font-size: .8rem; color: var(--lilac); animation-delay: .56s; }
.qr-spark.s3 { right: 4px; top: -12px; font-size: 1rem; animation-delay: .68s; }
@keyframes qrSpark {
  0%   { opacity: 0; transform: scale(.4) translateY(6px); }
  40%  { opacity: .95; transform: scale(1.1) translateY(-2px); }
  100% { opacity: .55; transform: scale(1) translateY(0); }
}
.q-result.won h3 { margin-top: 12px; font-size: 1.85rem; }
.q-result .qr-mod { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }
.q-result .qr-mod strong { color: var(--ink); }
.qr-score {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 16px;
  padding: 7px 8px 7px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
}
.qr-score strong { font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.qr-score span { font-size: .88rem; color: var(--faint); }
/* The tick and this chip were green, which is the Academy's colour for a finished
   row in a list but fights the pastel ring the moment it sits inside one. The seal
   is one family now: gradient ring, plum tick, plum chip. */
.qr-score em {
  font-style: normal; font-family: var(--font-label); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plum); background: rgba(216,199,245,.3);
  border: 1px solid rgba(174,185,241,.55);
  border-radius: 999px; padding: 4px 10px; margin-left: 4px; align-self: center;
}
@media (prefers-reduced-motion: reduce) {
  .qr-seal svg, .qr-spark { animation: none; opacity: 1; }
  .qr-tick { stroke-dashoffset: 0; animation: none; }
}
.pass-note { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 14px; display: block; }

/* ════════════════════════ CELEBRATION ════════════════════════ */
.celebrate {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,20,0.86); backdrop-filter: blur(8px);
  animation: fadeIn .4s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.celebrate-card { text-align: center; padding: 30px; max-width: 460px; position: relative; }
.celebrate-card .medal { width: 168px; height: 168px; margin: 0 auto; animation: medalIn 1s var(--ease); }
@keyframes medalIn { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.celebrate-card .kicker { margin-top: 26px; }
.celebrate-card h2 { color: #fff; margin-top: 12px; font-size: 2.1rem; }
.celebrate-card p { color: rgba(255,255,255,0.68); margin-top: 12px; }
.celebrate-card .btn { margin-top: 28px; }
.spark { position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0; }
.spark path { fill: url(#sparkGrad); }
.celebrate .spark { animation: sparkFly 1.4s var(--ease) forwards; }
@keyframes sparkFly {
  0% { opacity: 0; transform: translate(0,0) scale(.4) rotate(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); }
}

/* ════════════════════════ PROFILE ════════════════════════ */
.profile-head { display: flex; align-items: center; gap: 22px; margin-top: 8px; flex-wrap: wrap; }
.profile-head .avatar { width: 72px; height: 72px; font-size: 1.5rem; cursor: default; }
.profile-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.profile-head .p-org { color: var(--mid); margin-top: 4px; }
.stat-strip { margin-top: 34px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
@media (max-width: 640px) { .stat-strip { grid-template-columns: 1fr 1fr; } }
.stat-strip > div { padding: 18px 20px; border-left: 1px solid var(--line); }
.stat-strip > div:first-child { border-left: 0; }
@media (max-width: 640px) { .stat-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); } .stat-strip > div:nth-child(4) { border-top: 1px solid var(--line); } }
.stat-strip strong { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; color: var(--ink); display: block; }
.stat-strip span { font-size: .78rem; color: var(--mid); }

/* ════════════════════════ PERSONALISED JOURNEY ════════════════════════ */

/* journey hero */
/* ── the recommendations, in the Academy's own light language ──
   This used to be a dark gradient hero with floating stars, shimmering chips and a
   large tilted badge. It read as a different product to the dashboard sitting one
   click away, so it is now built from the same off-white cards, hairline rules and
   ink type as everything else. */
.jr-open { margin-top: 26px; max-width: 74ch; }
.jr-open h1 { margin-top: 12px; font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
/* The ✦ marks everything AI-shaped across the Academy, so it belongs in the title
   of the one page that is entirely AI-shaped. Sized off the heading rather than
   fixed, so it holds its proportion as the title scales down on a phone. */
.ai-star {
  display: inline-block; margin-left: .28em; vertical-align: .34em;
  font-size: .52em; line-height: 1;
  background: linear-gradient(125deg, #6b5e95 0%, #8f8ac9 45%, #aeb9f1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aiStar 4.5s ease-in-out infinite;
}
@keyframes aiStar {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: .85; }
  50%      { transform: rotate(12deg) scale(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ai-star { animation: none; } }
.jr-lede { margin-top: 14px; color: var(--mid); font-size: 1rem; line-height: 1.65; }

.jr-bar { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jrb-count { font-size: .9rem; color: var(--ink-2); }
.jrb-count strong { font-size: 1.05rem; }
.jrb-track { flex: 1; min-width: 140px; max-width: 300px; height: 6px; border-radius: 99px; background: rgba(12,22,34,0.08); overflow: hidden; }
.jrb-track i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .6s var(--ease); }
.jrb-mins { font-size: .82rem; color: var(--faint); }
.jr-cta { margin-top: 22px; }

/* the three steps, before they commit half an hour to it */
.jr-steps { margin-top: 30px; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .jr-steps { grid-template-columns: 1fr; } }
.jr-step {
  position: relative; overflow: hidden; min-height: 216px;
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 22px; background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
/* small, quiet, and in the same hand as the tool cards */
.jrs-art {
  position: absolute; right: -8px; bottom: -8px; z-index: 0; pointer-events: none;
  width: 104px; display: block; transform: rotate(-5deg); transform-origin: bottom right;
}
.jrs-art svg { width: 100%; height: auto; display: block; }
.jr-step > .jrs-n, .jr-step > strong, .jr-step > span:not(.jrs-art) { position: relative; z-index: 1; }
.jrs-n {
  width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: .72rem; font-weight: 700; margin-bottom: 6px;
}
.jr-step strong { font-family: var(--font-head); font-size: 1rem; letter-spacing: -0.02em; }
.jr-step > span:not(.jrs-art) { font-size: .86rem; color: var(--mid); line-height: 1.55; max-width: 26ch; }

.jr-go { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.jr-note { font-size: .84rem; color: var(--faint); }

/* a run that did not finish says so, rather than quietly asking for all 38 again */
.jr-trouble {
  margin-top: 24px; display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px 20px;
  background: rgba(233,169,124,0.09);
}
.jrt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c8763a; margin-top: 6px; }
.jr-trouble strong { font-family: var(--font-head); font-size: .98rem; letter-spacing: -0.02em; }
.jr-trouble p { margin-top: 4px; font-size: .88rem; color: var(--mid); line-height: 1.55; }

/* what is already working */
.jr-strengths { margin-top: 34px; border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px 24px; background: #fff; }
@media (max-width: 600px) { .jr-strengths { padding: 22px 20px 18px; } }
.jr-strengths h2 { margin-top: 10px; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.jr-sub { margin-top: 8px; font-size: .89rem; color: var(--mid); max-width: 60ch; }
.jrs-list { margin-top: 16px; }
.jrs-row { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); align-items: baseline; }
.jrs-row span:last-child { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.jrs-num { font-family: var(--font-label); font-size: .7rem; color: var(--plum); flex: none; }

/* section headings, same shape as the Policy Library's */
.jr-head { margin-top: 42px; }
.jr-head h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.jr-head p { margin-top: 8px; font-size: .9rem; color: var(--mid); max-width: 66ch; line-height: 1.6; }
.jr-next-head { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--line); }

/* and then what: where each thread carries on */
.jr-next { margin-top: 20px; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .jr-next { grid-template-columns: 1fr; } }
.jrn-card {
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  transition: border-color .2s, transform .2s;
}
.jrn-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.jrn-course { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--plum); }
.jrn-card strong { font-family: var(--font-head); font-size: 1.02rem; letter-spacing: -0.03em; line-height: 1.3; }
.jrn-why { font-size: .86rem; color: var(--mid); line-height: 1.55; }
.jrn-left { margin-top: auto; padding-top: 8px; font-size: .78rem; color: var(--faint); }


.bq-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.14); overflow: hidden; }
.bq-track i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .6s var(--ease); }

/* the trail */
.trail { margin-top: 22px; max-width: 760px; }
.tstop {
  display: flex; gap: 20px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 18px 10px; position: relative;
  border-radius: 16px; transition: background .25s;
}
.tstop:hover { background: rgba(216,199,245,0.09); }
.tstop.t-end { cursor: default; }
.tstop.t-end:hover { background: none; }
.tstop .t-line {
  position: absolute; left: 32px; top: 58px; bottom: -18px; width: 2px;
  background: linear-gradient(180deg, rgba(174,185,241,0.55), rgba(216,199,245,0.25));
}
.tstop:last-child .t-line { display: none; }
.tstop .t-dot {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(107,94,149,0.4); background: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  font-size: .82rem; font-weight: 700; color: var(--plum);
}
.tstop.done .t-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.tstop.done .t-dot svg { width: 16px; height: 16px; }
.tstop .t-medal { border: 0; background: none; width: 54px; height: 54px; }
.tstop .t-body { flex: 1; min-width: 0; }
.tstop .t-course { display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--plum); }
.tstop .t-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.03em; color: var(--ink); margin-top: 3px; }
.tstop.done .t-title { color: var(--mid); }
.tstop .t-reason { display: block; font-size: .87rem; color: var(--mid); margin-top: 4px; max-width: 60ch; }
.tstop .m-state { margin-top: 6px; }

/* rayz pick chip in course lists */
.jr-chip {
  display: inline-block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--plum); background: rgba(216,199,245,0.22);
  border: 1px solid rgba(174,185,241,0.45); border-radius: 999px; padding: 1px 8px; margin-left: 8px;
  vertical-align: 2px;
}

/* ── Generation progress bar (policy + journey veils) ── */
.gen-bar {
  margin: 26px auto 0; max-width: 340px; height: 7px; border-radius: 999px;
  background: rgba(12,22,34,0.08); overflow: hidden;
}
.gen-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--grad); transition: width .45s var(--ease);
}
.gen-pct { display: block; margin-top: 10px; font-size: .78rem; color: var(--mid); letter-spacing: .04em; }

/* ── Profile: module-by-module progress ── */
.pc-block { border-top: 1px solid var(--line); }
.pc-block:last-child { border-bottom: 1px solid var(--line); }
.pc-head {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: none; border: 0; padding: 14px 4px; text-align: left;
  font-family: var(--font-body); transition: background .2s;
}
.pc-head:hover { background: rgba(12,22,34,0.015); }
.pc-head .medal { width: 34px; height: 34px; flex: none; display: block; }
.pc-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: .98rem; color: var(--ink); }
.pc-bar {
  margin-left: auto; flex: none; width: 74px; height: 5px; border-radius: 999px;
  background: rgba(12,22,34,0.08); overflow: hidden;
}
.pc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.pc-count { font-size: .78rem; color: var(--mid); flex: none; min-width: 62px; text-align: right; white-space: nowrap; }
.pc-count.full { color: #1f7a45; font-weight: 600; }
.pc-chev { flex: none; width: 17px; height: 17px; color: var(--faint); transition: transform .28s var(--ease); }
.pc-chev svg { width: 100%; height: 100%; display: block; }
.pc-block.open .pc-chev { transform: rotate(180deg); }
.pc-head:hover .pc-chev { color: var(--plum); }
.pm-grid { display: none; padding: 2px 4px 18px; flex-wrap: wrap; gap: 8px; }
.pc-block.open .pm-grid { display: flex; }
@media (max-width: 560px) {
  .pc-bar { width: 46px; }
  .pc-head { gap: 9px; padding: 13px 2px; }
}
.pm {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-body); font-size: .8rem; color: var(--mid);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; background: #fff;
  transition: transform .2s var(--ease), border-color .2s, color .2s, box-shadow .2s;
}
.pm:hover { transform: translateY(-1px); border-color: rgba(174,185,241,0.7); color: var(--ink); box-shadow: 0 10px 26px -20px rgba(12,22,34,0.45); }
.pm.done {
  color: var(--ink);
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent;
}
.pm-tick { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; flex: none; }
.pm-tick:empty { width: 8px; height: 8px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.pm-tick svg { width: 14px; height: 14px; color: #1f7a45; }
.pm .jr-chip { margin-left: 4px; padding: 1px 6px; }

/* ── Completed-module state in the reader ── */
.rt-done {
  flex: none; font-size: .72rem; font-weight: 600; color: #1f7a45;
  background: #e2f6e7; border: 1px solid rgba(31,122,69,0.25);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.reader-done {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 16px; border-radius: 14px;
  background: #e2f6e7; border: 1px solid rgba(31,122,69,0.25);
}
.reader-done .rd-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #1f7a45; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.reader-done .rd-text { font-size: .88rem; color: #175c36; flex: 1; min-width: 220px; line-height: 1.55; }
.reader-done .btn { flex: none; }

/* safeguarding policy builder: training-first gate */
.gate-list { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.gate-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  font-size: .92rem; color: var(--mid); border-top: 1px solid var(--line);
}
.gate-row:first-child { border-top: 0; }
.gate-row.done { color: var(--ink); }
.gate-row .gr-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700;
  border: 1.5px solid var(--line-strong); color: #1f7a45;
}
.gate-row.done .gr-tick { background: #e2f6e7; border-color: rgba(31,122,69,0.25); }

/* acknowledgement before generating any policy */
.ack-line {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 30px;
  padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 14px;
  font-size: .84rem; color: var(--mid); line-height: 1.55; cursor: pointer;
}
.ack-line input { margin-top: 3px; accent-color: var(--plum); width: 15px; height: 15px; flex: none; cursor: pointer; }

/* ── The Policy Library ── */
.plib-use { margin-top: 12px; color: var(--mid); font-size: .92rem; max-width: 66ch; line-height: 1.6; }
.plib-tools { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.plib-tools .dir-search {
  flex: 1; min-width: 220px; max-width: 420px; padding: 11px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink); outline: none; background: #fff;
}
.plib-tools .dir-search:focus { border-color: rgba(174,185,241,0.9); }
.plib-count { font-family: var(--font-num); font-size: .9rem; color: var(--faint); font-weight: 600; margin-left: 4px; }
.plib-form { display: block; margin-top: 8px; font-size: .78rem; color: var(--plum); font-weight: 600; }
.plib-none { margin-top: 22px; color: var(--faint); font-size: .9rem; }

/* the two documents you get */
.pd-you-get { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.pd-you-get > span { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pd-you-get > div { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pd-you-get strong { font-family: var(--font-head); font-size: .92rem; color: var(--ink); }
.pd-you-get div span { font-size: .8rem; color: var(--mid); }

/* policy / participant form tabs */
.pd-tabs { display: flex; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.pd-tabs button {
  border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: var(--mid);
  padding: 9px 16px; border-radius: 999px; transition: all .2s var(--ease);
}
.pd-tabs button:hover { color: var(--ink); }
.pd-tabs button.on { color: var(--ink); border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border-width: 2px; }
.pd-hint { margin-top: 12px; font-size: .84rem; color: var(--mid); }

/* the blanks to fill in: click them where they sit in the document */
.fillbar {
  position: sticky; top: var(--stick-below-bar); z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 18px; border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  box-shadow: 0 14px 34px -26px rgba(12,22,34,0.5);
}
.fb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); flex: none; }
.fb-text { font-size: .86rem; color: var(--mid); flex: 1; min-width: 200px; }
.fb-text strong { color: var(--ink); }
.fb-hint { color: var(--faint); }
@media (max-width: 620px) { .fb-hint { display: none; } }
.fb-done { font-size: .84rem; font-weight: 600; color: #1f7a45; }

/* the chip sitting in the sentence */
.fchip {
  display: inline; border: 0; cursor: pointer; padding: 1px 7px; margin: 0 1px;
  font-family: inherit; font-size: .94em; line-height: inherit; text-align: left;
  border-radius: 5px; background: rgba(216,199,245,0.35); color: var(--plum);
  border-bottom: 1.5px dashed rgba(107,94,149,0.7);
  transition: background .15s, color .15s;
}
.fchip:hover { background: rgba(216,199,245,0.75); color: var(--ink); }
.fchip.filled {
  background: none; color: var(--ink); font-weight: 700; padding: 1px 2px;
  border-bottom: 1.5px solid rgba(12,22,34,0.12);
}
.fchip.filled:hover { background: rgba(216,199,245,0.35); }

/* the inline editor that replaces it */
.fchip-edit { position: relative; display: inline-block; }
.fchip-tag {
  position: absolute; bottom: calc(100% + 6px); left: 0; white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 9px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 10px 24px -14px rgba(12,22,34,0.7); pointer-events: none; z-index: 5;
}
.fchip-input {
  font-family: var(--font-body); font-size: .94em; color: var(--ink);
  padding: 2px 8px; border-radius: 6px; outline: none;
  border: 1.5px solid var(--plum); background: #fff;
  box-shadow: 0 0 0 3px rgba(216,199,245,0.4);
}

@media print {
  .fchip { background: none; color: #000; border-bottom: 1px solid #999; padding: 0 22px 0 2px; }
  .fchip.filled { border-bottom: 0; padding: 0; }
  .fchip-tag { display: none; }
}


.plib-first {
  margin-top: 26px; border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 24px 22px; background: #fff; box-shadow: var(--shadow);
}
.pf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-top: 14px; }
.pf-steps > div { display: flex; gap: 10px; align-items: flex-start; }
.pf-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.pf-steps p { font-size: .84rem; color: var(--mid); line-height: 1.55; margin: 0; }
.pf-steps strong { color: var(--ink); }
.plib-rev { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
.plib-rev.ok { background: #e2f6e7; color: #1f7a45; border: 1px solid rgba(31,122,69,0.25); }
.plib-rev.soon { background: #fdf3e0; color: #96660f; border: 1px solid rgba(150,102,15,0.3); }
.plib-rev.due { background: #fdecea; color: #b3261e; border: 1px solid rgba(179,38,30,0.3); }
.plib-head { margin-top: 36px; }
.plib-head h2 { letter-spacing: -0.03em; }
.plib-head p { margin-top: 6px; color: var(--mid); font-size: .92rem; }
.plib-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.plib-card {
  text-align: left; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s;
}
.plib-card:hover { transform: translateY(-2px); border-color: rgba(174,185,241,0.7); }
.plib-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plib-need {
  font-family: var(--font-label); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
}
.plib-need.essential { background: #e2f6e7; color: #1f7a45; border: 1px solid rgba(31,122,69,0.25); }
.plib-need.recommended { background: rgba(174,185,241,0.18); color: var(--blue); border: 1px solid rgba(79,111,179,0.25); }
.plib-need.situational { background: rgba(12,22,34,0.05); color: var(--mid); border: 1px solid var(--line-strong); }
.plib-done { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #1f7a45; }
.plib-card h3 { margin-top: 10px; font-size: 1.05rem; letter-spacing: -0.03em; }
.plib-card p { margin-top: 6px; font-size: .84rem; color: var(--mid); line-height: 1.55; flex: 1; }
.plib-card .plib-go { margin-top: 12px; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: .88rem; }
.plib-card.ready { border-color: rgba(31,122,69,0.3); }

/* ── Policy Library home: progress, alert, suggestion, owned cards ── */
.plib-prog { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pp-label { font-size: .92rem; color: var(--mid); }
.pp-label strong { font-family: var(--font-num); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.pp-track {
  flex: 1; min-width: 120px; max-width: 260px; height: 6px; border-radius: 999px;
  background: rgba(12,22,34,0.08); overflow: hidden;
}
.pp-track i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .6s var(--ease); }
.pp-help {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.pp-help:hover { color: var(--plum); }

.plib-alert {
  width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding: 14px 18px; border-radius: 16px;
  border: 1px solid rgba(179,38,30,0.28); background: #fdf4f3;
  font-family: var(--font-body); font-size: .88rem; color: var(--ink); line-height: 1.55;
  transition: border-color .25s, background .25s;
}
.plib-alert:hover { border-color: rgba(179,38,30,0.5); background: #fdecea; }
.plib-alert > span:nth-child(2) { flex: 1; }
.plib-alert strong { font-family: var(--font-head); }
.pa-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b3261e;
  box-shadow: 0 0 0 0 rgba(179,38,30,0.45); animation: paPulse 2.2s infinite;
}
@keyframes paPulse { 70% { box-shadow: 0 0 0 7px rgba(179,38,30,0); } 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0); } }

.plib-suggest {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin-top: 18px; padding: 24px 26px 22px; border-radius: 20px;
  background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.plib-suggest:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(12,22,34,0.09); }
.ps-tag { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.plib-suggest h3 { margin-top: 8px; font-size: 1.25rem; letter-spacing: -0.03em; }
.plib-suggest p { margin-top: 7px; font-size: .9rem; color: var(--mid); line-height: 1.6; max-width: 62ch; }
.ps-go { display: inline-block; margin-top: 14px; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: .92rem; }

.pmini {
  flex: none; width: 26px; height: 32px; border-radius: 4px; background: #fff;
  border: 1px solid var(--line-strong); padding: 6px 5px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 3px;
}
.pmini i { display: block; height: 1.5px; border-radius: 1px; background: rgba(12,22,34,0.2); }
.pmini i:nth-child(1) { width: 65%; background: rgba(12,22,34,0.42); }
.pmini i:nth-child(4) { width: 45%; }

.plib-grid.owned-grid { grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 12px; }
.plib-card.owned { flex-direction: row; align-items: center; gap: 13px; padding: 16px 18px; }
.plib-card.owned h3 { margin-top: 0; font-size: .97rem; }
.pc-main { flex: 1; min-width: 0; display: block; }
.pc-meta { display: block; margin-top: 4px; font-size: .78rem; color: var(--faint); }
.pc-go { flex: none; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: .86rem; }
.plib-card .plib-go.quiet { color: var(--mid); transition: color .2s; }
.plib-card:hover .plib-go.quiet { color: var(--plum); }
.plib-card.owned:hover .pmini { border-color: rgba(174,185,241,0.9); }

.mi-line { margin-top: 10px; font-size: .88rem; color: var(--mid); line-height: 1.6; max-width: 64ch; }

/* ── Dashboard ── */
.ph-hint { font-size: .8rem; color: var(--faint); margin-top: 8px; max-width: 46ch; line-height: 1.5; }
.dash-prog { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.dash-prog .pp-track { flex: none; width: 180px; }
.dp-stat { font-size: .92rem; color: var(--mid); }
.dp-stat strong { font-family: var(--font-num); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.dp-stat.quiet { font-size: .84rem; color: var(--faint); }
.dp-stat.quiet strong { font-size: .95rem; color: var(--mid); }

.resume {
  display: block; width: 100%; text-align: left; margin-top: 22px;
  padding: 26px 30px 24px; border-radius: 22px; cursor: pointer;
  background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.resume:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(12,22,34,0.1); }
.resume.done { cursor: default; }
.resume.done:hover { transform: none; box-shadow: var(--shadow); }
.rs-tag { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.rs-title {
  display: block; margin-top: 9px; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1.25;
}
.rs-meta { display: block; margin-top: 7px; font-size: .86rem; color: var(--mid); }
.rs-go { display: inline-block; margin-top: 16px; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: .95rem; }
.resume.done .rs-go { cursor: pointer; }

.dash-links { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlink {
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px 18px;
  box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s;
}
.dlink:hover { border-color: rgba(174,185,241,0.7); box-shadow: 0 18px 38px -26px rgba(12,22,34,0.24); }
.dl-main { flex: 1; min-width: 0; display: block; }
.dl-main strong { display: block; font-family: var(--font-head); font-size: .97rem; letter-spacing: -0.02em; color: var(--ink); }
.dl-main span { display: block; margin-top: 4px; font-size: .78rem; color: var(--faint); }
.dlink .al-minis { margin-top: 0; flex: none; gap: 6px; }
.dlink .al-mini { width: 52px; padding: 6px 6px; }
.dlink .al-mini img, .dlink .al-mini svg { width: 15px; height: 15px; right: 4px; bottom: 4px; }
.dlink .al-mini .am-line { height: 2px; margin-top: 3px; }
.dlink .al-mini .am-line.b { height: 3px; margin-top: 4px; }
.dl-go { flex: none; font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: 1rem; }

.dash-mods { margin-top: 40px; }
.dash-mods h2 { letter-spacing: -0.03em; }
.dm-sub { margin: 8px 0 16px; font-size: .88rem; color: var(--mid); max-width: 60ch; line-height: 1.55; }

.sig-card .fb-scale { gap: 6px; }
.sig-card .fb-opt { flex: 1; min-width: 0; padding: 10px 6px; border-radius: 12px; }
.sig-card .fb-opt .fb-face { font-size: 1.5rem; }
.sig-card .fb-opt .fb-lbl { font-size: .66rem; }
#fbs-note, #fb-comment {
  width: 100%; max-width: 520px; padding: 12px 14px; min-height: 70px; resize: vertical;
  border: 1.5px solid var(--line-strong); border-radius: 14px;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink); outline: none;
}
#fbs-note:focus, #fb-comment:focus { border-color: rgba(174,185,241,0.9); }

@media (max-width: 700px) {
  .dash-links { grid-template-columns: 1fr; }
  .dlink .al-minis { display: none; }
  .dash-prog { gap: 10px 12px; }
  .dash-prog .pp-track { width: 100%; order: 3; }
  .resume { padding: 22px 22px 20px; }
}

@media (max-width: 560px) {
  .plib-alert { align-items: flex-start; }
  .plib-alert .pc-go { display: none; }
  .plib-card.owned { gap: 11px; padding: 15px 16px; }
  .plib-card.owned .pc-go { font-size: .8rem; }
}

/* ── Feedback widget ── */
.fb-scale { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.fb-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff;
  padding: 10px 16px; min-width: 74px; transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.fb-opt:hover { transform: translateY(-2px); border-color: rgba(174,185,241,0.8); }
.fb-opt.picked { border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border-width: 2px; }
.fb-opt .fb-num { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.fb-opt .fb-face { font-size: 1.55rem; line-height: 1.2; filter: grayscale(1) opacity(.75); transition: filter .2s, transform .2s var(--ease); }
.fb-opt:hover .fb-face, .fb-opt.picked .fb-face { filter: none; transform: scale(1.12); }
.fb-opt .fb-lbl { font-size: .72rem; color: var(--mid); }

/* ── Certificates shelf ── */
.cert-shelf { margin-top: 46px; border: 1px solid var(--line); border-radius: 24px; padding: 30px 34px 34px; box-shadow: var(--shadow); }
.cert-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cert-card:hover { border-color: rgba(174,185,241,0.6); box-shadow: 0 22px 48px -30px rgba(12,22,34,0.32); }
.cert-card .medal { flex: 0 0 auto; width: 64px; height: 64px; }
.cert-card-body { flex: 1; min-width: 0; }
.cert-card .cc-title { display: block; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-size: .98rem; }
.cert-card .cc-date { display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.cert-card .cc-go { font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--plum); flex: 0 0 auto; }

/* avatar edit */
.avatar-edit { position: relative; overflow: visible !important; }
.avatar-edit > img { position: absolute; inset: 0; }
.av-cam {
  position: absolute; right: -4px; bottom: -4px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 12px; border: 2px solid #fff;
}

/* ════════════════════════ ADMIN ════════════════════════ */
.admin-tabs { margin-top: 30px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.admin-tabs button {
  border: 0; background: none; cursor: pointer; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: -0.01em;
  color: var(--mid); padding: 12px 16px;
}
.admin-tabs button.active { color: var(--ink); }
.admin-tabs button.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--grad); border-radius: 99px; }
.admin-tabs .count { font-family: var(--font-num); font-size: .74rem; background: rgba(216,199,245,0.3); color: var(--plum); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.admin-body { margin-top: 26px; }
.atable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.atable th { text-align: left; font-family: var(--font-label); font-weight: 400; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-strong); }
.atable td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--mid); }
.atable td:first-child { color: var(--ink); font-weight: 600; }
.atable .sub { display: block; font-size: .78rem; color: var(--faint); font-weight: 400; }
.chip { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.chip.pending { background: rgba(244,241,231,0.9); color: #8f6a2e; border: 1px solid rgba(143,106,46,0.25); }
.chip.approved { background: rgba(174,185,241,0.18); color: var(--blue); border: 1px solid rgba(79,111,179,0.25); }
.chip.rejected { background: rgba(12,22,34,0.05); color: var(--faint); border: 1px solid var(--line); }
.chip.admin { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.mini-bar { width: 120px; height: 5px; border-radius: 99px; background: rgba(12,22,34,0.07); overflow: hidden; display: inline-block; vertical-align: middle; }
.mini-bar i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.empty-state { padding: 46px 0; text-align: center; color: var(--faint); font-size: .92rem; }

/* Toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 24px;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: -0.01em;
  z-index: 300; opacity: 0; transition: transform .4s var(--ease), opacity .4s;
  box-shadow: 0 24px 60px -24px rgba(12,22,34,0.6);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.loading-veil { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.think-star { width: 26px; height: 26px; color: var(--plum); animation: rzThink 1.1s linear infinite; }
@keyframes rzThink { 0% { transform: rotate(0) scale(1); opacity: .45; } 50% { transform: rotate(180deg) scale(1.2); opacity: 1; } 100% { transform: rotate(360deg) scale(1); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .think-star, .pending-orb, .celebrate-card .medal, .spark { animation: none; }
}

/* ── Safeguarding policy document ── */
.policy-doc {
  margin-top: 30px; border: 1px solid var(--line); border-radius: 20px;
  padding: 46px 52px 40px; box-shadow: var(--shadow); background: #fff;
}
@media (max-width: 640px) { .policy-doc { padding: 28px 22px; } }
.pol-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.policy-doc h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-top: 26px; }
.policy-doc h3 { font-size: 1.2rem; margin-top: 30px; }
.policy-doc h4 { font-size: 1.02rem; margin-top: 22px; font-family: var(--font-head); letter-spacing: -0.02em; }
.policy-doc p { margin-top: 12px; font-size: .95rem; }
.policy-doc ul { margin: 12px 0 0 2px; list-style: none; }
.policy-doc ul li { position: relative; padding: 4px 0 4px 24px; font-size: .93rem; color: var(--ink-2); }
.policy-doc ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 9px; height: 3px; border-radius: 99px; background: var(--grad); }
.policy-doc hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.pol-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* ── Adoption block at the foot of a policy ── */
.adopt-block { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.adopt-h { font-size: 1.1rem !important; margin-top: 0 !important; letter-spacing: -0.02em; }
.adopt-intro { margin-top: 8px !important; font-size: .9rem !important; color: var(--mid); }
.adopt-sig { margin-top: 26px; max-width: 460px; }
.adopt-sig.second { margin-top: 30px; }
.sig-mark { display: block; max-height: 62px; max-width: 100%; width: auto; margin: 0 0 2px 6px; }
.sig-print-line { display: block; height: 46px; }
.sig-base { display: block; border-bottom: 1px solid var(--line-strong); }
.adopt-meta { display: block; margin-top: 8px; font-size: .78rem; color: var(--faint); }
.adopt-hint { display: block; margin-top: 6px; font-size: .76rem; color: var(--faint); font-style: italic; }
.adopt-sign {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 4px 0 6px 4px;
  font-family: var(--font-body); font-size: .88rem; color: var(--plum);
  background: rgba(216,199,245,0.16); border: 1.5px dashed rgba(107,94,149,0.5);
  border-radius: 10px; padding: 8px 16px; transition: background .2s, border-color .2s;
}
.adopt-sign:hover { background: rgba(216,199,245,0.32); border-color: var(--plum); }
.adopt-sign + .sig-print-line { display: none; }
.adopt-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.adopt-links button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .76rem; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.adopt-links button:hover { color: var(--plum); }

/* ── The signature sheet ── */
.sig-veil {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10,12,20,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: sigIn .22s var(--ease);
}
@keyframes sigIn { from { opacity: 0 } to { opacity: 1 } }
.sig-card {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 24px; padding: 28px 30px 26px; box-shadow: 0 40px 90px rgba(10,12,20,0.35);
}
.sig-x {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: #fff; color: var(--faint); cursor: pointer;
  font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sig-x:hover { color: var(--ink); background: rgba(12,22,34,0.04); }
.sig-card h2 { margin-top: 8px; font-size: 1.45rem; letter-spacing: -0.03em; }
.sig-sub { margin-top: 8px; font-size: .86rem; color: var(--mid); line-height: 1.55; }
.sig-tabs { display: flex; gap: 6px; margin-top: 20px; }
.sig-tabs button {
  flex: 1; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--mid);
  transition: border-color .2s, color .2s, background .2s;
}
.sig-tabs button.on { color: var(--ink); border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border-width: 2px; }
.sig-stage { position: relative; margin-top: 16px; height: 150px; }
.sig-pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-stage .sig-base { position: absolute; left: 0; right: 0; bottom: 26px; border-bottom: 1px solid var(--line-strong); }
.sig-ph {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  font-size: .78rem; color: var(--faint); pointer-events: none;
}
.sig-preview {
  position: absolute; left: 6px; right: 6px; bottom: 34px;
  font-size: 2.6rem; line-height: 1.1; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sig-preview.empty { color: rgba(12,22,34,0.22); }
.sig-tools { display: flex; justify-content: flex-end; margin-top: 6px; }
.sig-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sig-fields .field { display: block; }
.sig-fields span { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.sig-fields input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink); outline: none; background: #fff;
}
.sig-fields input:focus { border-color: rgba(174,185,241,0.9); }
.sig-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sig-legal { margin-top: 16px; font-size: .74rem; color: var(--faint); line-height: 1.6; }
@media (max-width: 480px) {
  .sig-card { padding: 24px 20px 22px; }
  .sig-fields { grid-template-columns: 1fr; }
}

@media print {
  .adopt-sign { display: none !important; }
  .adopt-sign + .sig-print-line { display: block !important; }
  .sig-veil { display: none !important; }
}
@media print {
  body * { visibility: hidden; }
  .policy-doc, .policy-doc * { visibility: visible; }
  .policy-doc { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
  .no-print { display: none !important; }
  .topbar, .toast { display: none !important; }
}

.small-print {
  font-size: .72rem; line-height: 1.6; color: var(--faint);
  border-top: 1px solid var(--line); padding-top: 12px; max-width: 60ch;
}

/* ── question help ── */
.i-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; vertical-align: 2px;
  border: 1px solid rgba(107,94,149,0.45); background: rgba(216,199,245,0.18);
  color: var(--plum); font-family: var(--font-label); font-size: 10px; font-style: italic;
  cursor: pointer; margin-left: 6px; transition: background .2s, transform .15s;
}
.i-btn:hover { background: rgba(216,199,245,0.4); transform: scale(1.1); }
.i-btn.open { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-help {
  margin: 0 0 10px; padding: 12px 16px; border-radius: 12px;
  background: var(--grad-soft); border: 1px solid rgba(174,185,241,0.24);
  font-size: .85rem; color: var(--ink-2); line-height: 1.6;
}
.q-help .q-eg {
  display: block; margin-top: 6px; font-family: var(--font-label);
  font-size: .72rem; color: var(--plum);
}

/* ── Dashboard top: header + compact journey card side by side ── */
.dash-top { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; margin-top: 8px; }
.dash-top .profile-head { margin-top: 0; }


/* quiz score chips: celebratory, not gradey */
.score-chip {
  margin-left: 8px; font-size: .72rem; font-weight: 600; color: var(--mid);
  background: rgba(12,22,34,0.05); border-radius: 999px; padding: 2px 9px; vertical-align: 2px;
}
.score-chip.perfect { background: #fdf6dd; color: #96660f; border: 1px solid rgba(150,102,15,0.28); }
.pm-score { margin-left: 7px; font-size: .7rem; color: var(--faint); font-weight: 600; }
.pm-score.perfect { color: #96660f; }

/* ── avatar corner bubble: organisation logo ── */
.av-org {
  position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px;
  border-radius: 6px; background: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(12,22,34,0.25); overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--plum);
}
.av-org img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit { position: relative; }

/* ── dashboard: link to the wall ── */
.awards-link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; text-align: left; cursor: pointer; background: #fff;
  transition: transform .25s var(--ease), border-color .25s;
}
.awards-link:hover { transform: translateY(-2px); border-color: rgba(174,185,241,0.7); }
.awards-link .al-go { font-family: var(--font-head); font-weight: 700; color: var(--plum); white-space: nowrap; }
/* very small certificate thumbnails inside the link card */
.al-minis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.al-mini {
  position: relative; width: 98px; aspect-ratio: 1.9; flex: none;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 10px 20px -14px rgba(12,22,34,0.4);
  padding: 9px 10px; overflow: hidden;
}
.al-mini::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(12,22,34,0.09); border-radius: 4px; pointer-events: none; }
.al-mini .am-mono { display: block; width: 42%; height: 2px; border-radius: 2px; background: rgba(107,94,149,0.4); }
.al-mini .am-line { display: block; height: 3px; border-radius: 2px; background: rgba(12,22,34,0.13); margin-top: 4px; width: 90%; }
.al-mini .am-line.b { width: 58%; height: 5px; background: rgba(12,22,34,0.55); margin-top: 6px; }
.al-mini img, .al-mini svg { position: absolute; right: 7px; bottom: 6px; width: 24px; height: 24px; }
.al-more { font-size: .78rem; font-weight: 600; color: var(--faint); }

/* ── the wall (Certificates page) ── */
.awards-hero { position: relative; padding: 8px 0 6px; }
.awards-hero h1 { margin-top: 0; }
.awards-hero .lede { margin-top: 12px; color: var(--mid); }
.aw-star { position: absolute; color: var(--peri); opacity: .7; animation: awFloat 5s var(--ease) infinite alternate; }
.aw-star.s1 { right: 8%; top: 6px; font-size: 1.5rem; }
.aw-star.s2 { right: 16%; top: 66px; font-size: .9rem; animation-delay: 1.2s; }
.aw-star.s3 { right: 4%; top: 96px; font-size: 1.1rem; color: var(--lilac); animation-delay: 2.2s; }
@keyframes awFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.cert-grid2 { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aw-foot { margin-top: 34px; }
.pd-gen { margin-top: 10px; font-size: .78rem; color: var(--faint); }
h1 .mand-chip { vertical-align: middle; margin-left: 10px; }
@media (max-width: 860px) { .cert-grid2 { grid-template-columns: 1fr; } }
.cert-card2 {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; background: #fff; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cert-card2:hover { transform: translateY(-3px); border-color: rgba(174,185,241,0.7); box-shadow: 0 30px 70px -50px rgba(12,22,34,0.45); }

/* miniature certificate */
.cert-thumb { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
.ct-frame {
  position: relative; background: #fff; padding: 18px 20px 16px;
  aspect-ratio: 1.9; overflow: hidden; display: flex; flex-direction: column;
}
.ct-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ct-logo { height: 18px; max-width: 70px; object-fit: contain; object-position: left; }
.ct-mono { font-family: var(--font-label); font-size: 6.5px; letter-spacing: .14em; color: rgba(12,22,34,0.45); }
.ct-kicker { font-family: var(--font-label); font-size: 5.5px; letter-spacing: .14em; color: rgba(12,22,34,0.4); margin-top: 12px; }
.ct-name { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; font-size: 1.15rem; color: var(--ink); margin-top: 3px; line-height: 1.1; }
.ct-sub { font-size: 7.5px; color: rgba(12,22,34,0.55); margin-top: 5px; }
.ct-course { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: .8rem; color: var(--ink); margin-top: 1px; }
.ct-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; }
.ct-date { font-size: 7.5px; font-weight: 600; color: var(--ink); }
.ct-medal { position: absolute; right: 12px; top: 34%; width: 26%; }
.ct-medal svg { width: 100%; height: auto; display: block; }
.cert-card2-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; }
.cert-card2-body .cc-title { display: block; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-size: .95rem; }
.cert-card2-body .cc-date { display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.cert-card2-body .cc-go { font-family: var(--font-head); font-weight: 700; color: var(--plum); font-size: .9rem; white-space: nowrap; }

/* ── Dylan: your direct line ── */
.dylan-card {
  display: flex; gap: 26px; align-items: center; text-decoration: none;
  margin-top: 34px; padding: 26px 30px; border-radius: 22px; position: relative; overflow: hidden;
  background: var(--ink-deep); border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.dylan-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 88% 10%, rgba(174,185,241,0.28) 0%, transparent 46%),
    radial-gradient(circle at 10% 95%, rgba(216,199,245,0.18) 0%, transparent 44%);
}
.dylan-card > * { position: relative; }
.dylan-card:hover { transform: translateY(-3px); box-shadow: 0 34px 80px -50px rgba(12,22,34,0.75); }
.dc-photo { width: 92px; height: 92px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); }
.dylan-card h3 { color: #fff; font-size: 1.3rem; margin-top: 8px; }
.dylan-card p { color: rgba(255,255,255,0.66); font-size: .9rem; margin-top: 6px; max-width: 58ch; line-height: 1.6; }
.dc-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--fill); color: var(--on-fill); border-radius: 999px; padding: 10px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
}
.dylan-card.compact { padding: 20px 24px; margin-top: 40px; }
.dylan-card.compact .dc-photo { width: 66px; height: 66px; }
.dylan-card.compact h3 { font-size: 1.1rem; margin-top: 4px; }
.dylan-card.compact p { font-size: .82rem; }
.dylan-card.compact .dc-btn { margin-top: 10px; padding: 8px 16px; font-size: .82rem; }
@media (max-width: 640px) { .dylan-card { flex-direction: column; align-items: flex-start; } }

/* ── Google Translate pill ── */
/* mirrors the Ask Dylan fab on the other side: same size, radius, shadow, hover label */
#gt-pill {
  position: fixed; left: 18px; bottom: 18px; z-index: 220;
  width: 52px; height: 52px; border-radius: 10px; background: #fff;
  border: 1px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px -14px rgba(12,22,34,0.55);
  transition: transform .25s var(--ease);
}
#gt-pill:hover { transform: translateY(-2px) scale(1.04); }
#gt-pill > svg { width: 22px !important; height: 22px !important; }
#gt-pill::after {
  /* the hover label, mirroring the Ask Dylan pill on the other side */
  content: 'Translate'; position: absolute; left: calc(100% + 10px);
  background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  box-shadow: 0 12px 30px -16px rgba(12,22,34,0.6);
  opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s var(--ease);
  pointer-events: none; white-space: nowrap;
}
#gt-pill:hover::after { opacity: 1; transform: none; }
/* Our own tile until Google's dropdown exists. The button is what asks for the
   widget; once .ready it steps aside and the real <select> takes the whole tile. */
#gt-go {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; appearance: none;
}
#gt-pill.ready #gt-go { display: none; }
#gt-pill:not(.ready) #google_translate_element { display: none; }
#gt-pill.loading { opacity: .55; pointer-events: none; }
#google_translate_element { position: absolute; inset: 0; overflow: hidden; }
#google_translate_element .goog-te-gadget { font-size: 0 !important; color: transparent !important; line-height: 1; height: 100%; }
#google_translate_element .goog-te-gadget a { display: none !important; }
#google_translate_element .goog-te-gadget > span:not(:has(select)) { display: none !important; }
#google_translate_element .goog-te-gadget .goog-te-combo {
  /* the real dropdown, stretched invisibly over the tile so a tap opens it */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
  opacity: 0; border: 0; outline: none; cursor: pointer;
}
#google_translate_element img, #google_translate_element .goog-logo-link { display: none; }
iframe.goog-te-banner-frame, .goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
font[style] { background: none !important; box-shadow: none !important; } /* Google's highlight spans */

@media print { #gt-pill { display: none !important; } }

/* ── Ask Dylan: sticky support line ── */
#dylan-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 230; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
#dylan-fab img {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 14px 36px -14px rgba(12,22,34,0.55); border: 2px solid #fff;
  transition: transform .25s var(--ease);
}
#dylan-fab:hover img { transform: translateY(-2px) scale(1.04); }
.df-label {
  background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  box-shadow: 0 12px 30px -16px rgba(12,22,34,0.6);
  opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s;
}
#dylan-fab:hover .df-label, #dylan-fab.unseen .df-label { opacity: 1; transform: none; }
.df-dot {
  position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: #6ed49a; border: 2.5px solid #fff;
}
.df-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(110,212,154,0.5); animation: dylanLive 2.4s ease-out infinite;
}
@keyframes dylanLive {
  0% { transform: scale(0.65); opacity: 0.9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .df-dot::after { animation: none; display: none; } }

#dylan-panel {
  position: fixed; right: 18px; bottom: 82px; z-index: 230; width: min(92vw, 350px);
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 40px 90px -40px rgba(12,22,34,0.5); overflow: hidden;
  display: flex; flex-direction: column;
}
.dp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink-deep); }
.dp-head img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.dp-ava { position: relative; flex: none; }
.dp-ava .dp-dot {
  position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: #6ed49a; border: 2px solid var(--ink-deep);
}
.dp-head strong { display: block; color: #fff; font-family: var(--font-head); font-size: .95rem; letter-spacing: -0.01em; }
.dp-head span { font-size: .72rem; color: rgba(255,255,255,0.6); }
#dp-close { margin-left: auto; border: 0; background: none; color: rgba(255,255,255,0.6); font-size: 1.3rem; cursor: pointer; line-height: 1; }
#dp-close:hover { color: #fff; }
.dp-body { padding: 14px 16px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.dp-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: .86rem; line-height: 1.5; }
.dp-msg.dylan { background: rgba(216,199,245,0.22); color: var(--ink-2); border-bottom-left-radius: 4px; align-self: flex-start; }
.dp-msg.me { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.dp-input { display: flex; gap: 8px; padding: 0 16px 12px; align-items: flex-end; }
.dp-input textarea {
  flex: 1; resize: none; padding: 10px 13px; border: 1.5px solid var(--line-strong); border-radius: 13px;
  font-family: var(--font-body); font-size: .88rem; color: var(--ink); outline: none;
}
.dp-input textarea:focus { border-color: rgba(174,185,241,0.9); }
.dp-wa { display: block; text-align: center; padding: 9px 0 12px; font-size: .74rem; color: var(--plum); text-decoration: underline; text-underline-offset: 2px; }
@media print { #dylan-fab, #dylan-panel { display: none !important; } }

/* Google banner: never let it cover the nav */
body > .skiptranslate { display: none !important; }
html { margin-top: 0 !important; }

.mm-scoreline { margin-top: 10px; font-size: .84rem; color: var(--mid); }
.mm-scoreline strong { color: #96660f; }

/* ── the account menu, hanging off your photo ──
   This used to be a ⋮⋮ "More" button sitting in the nav. Nine dots do not read as
   a menu, and what was behind them was never navigation: it was Settings, feedback,
   Org Admin and Sign out. It hangs off the avatar now, where people already look. */
.acct-wrap { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: none; border: 0; padding: 3px; border-radius: 10px; cursor: pointer;
  color: var(--faint); transition: background .15s, color .15s;
}
.acct-btn:hover { background: rgba(216,199,245,0.24); color: var(--ink); }
.acct-btn .acct-chev { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.acct-btn.open { color: var(--ink); background: rgba(216,199,245,0.24); }
.acct-btn.open .acct-chev { transform: rotate(180deg); }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(90vw, 296px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 36px 80px -40px rgba(12,22,34,0.5); padding: 6px; z-index: 240;
  animation: mmIn .16s var(--ease);
}
@keyframes mmIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.mm-kicker {
  display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); padding: 8px 10px 6px;
}
.acct-menu .mm-item {
  font-weight: 400; letter-spacing: 0; color: var(--ink);
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 6px;
  font-family: var(--font-body); transition: background .12s;
}
.acct-menu .mm-item:hover { background: rgba(216,199,245,0.22); }
.mm-ico { flex: none; width: 26px; height: 26px; border-radius: 6px; background: rgba(216,199,245,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--plum); }
.mm-ico svg { width: 14px; height: 14px; }
.mm-body { min-width: 0; }
.acct-menu .mm-body strong { display: block; font-family: var(--font-head); font-size: .86rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.acct-menu .mm-body span { display: block; font-size: .74rem; color: var(--mid); line-height: 1.4; margin-top: 1px; }
.mm-div { height: 1px; background: var(--line); margin: 6px 10px; }
.acct-menu .mm-item.quiet { align-items: center; }
.acct-menu .mm-item.quiet .mm-ico { background: rgba(12,22,34,0.05); color: var(--mid); }
.acct-menu .mm-item.quiet .mm-body strong { color: var(--mid); font-weight: 600; }

/* ---------- two-step verification ---------- */
.mfa-card { max-width: 480px; }
.mfa-load { padding: 30px 0; text-align: center; }
.mfa-load h2 { margin-top: 6px; }
.mfa-card h3 { margin-top: 6px; font-size: 1.05rem; letter-spacing: -0.02em; }
.mfa-list { margin: 18px 0 0; padding: 0; list-style: none; }
.mfa-list li {
  position: relative; padding: 8px 0 8px 26px; font-size: .86rem;
  color: var(--ink-2); line-height: 1.55;
}
.mfa-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--grad);
}
.mfa-qr {
  margin-top: 18px; display: flex; justify-content: center; align-items: center;
  padding: 16px; background: #fff; border: 1px solid var(--line-strong); border-radius: 18px;
}
.mfa-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.mfa-qr .qr-svg svg { display: block; width: 100%; height: 100%; }
/* if the square will not load, the typed key is the whole answer, so say so plainly */
.mfa-noqr { margin: 0; font-size: .86rem; color: var(--mid); max-width: 34ch; text-align: center; line-height: 1.55; }
.mfa-manual { margin-top: 14px; }
.mfa-manual summary {
  cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--plum);
  list-style: none; padding: 4px 0;
}
.mfa-manual summary::-webkit-details-marker { display: none; }
.mfa-manual summary::before { content: "＋ "; }
.mfa-manual[open] summary::before { content: "－ "; }
.mfa-manual p { font-size: .8rem; color: var(--mid); margin-top: 6px; }
.mfa-secret {
  margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fbfaf7; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
}
.mfa-secret code {
  /* Typed into an authenticator by hand, so the glyphs have to be unambiguous:
     zero against O, one against l. This is the one place on the learner side
     that still wants a monospace face. */
  flex: 1; min-width: 160px; font-family: var(--font-mono); font-size: .84rem;
  letter-spacing: .06em; color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.mfa-step2 { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.mfa-code { display: flex; gap: 8px; margin-top: 14px; }
.mfa-d {
  flex: 1; min-width: 0; height: 56px; text-align: center;
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--ink);
  border: 1.6px solid var(--line-strong); border-radius: 13px; background: #fff; outline: none;
  font-variant-numeric: tabular-nums; transition: border-color .16s, box-shadow .16s;
}
.mfa-d:focus { border-color: var(--peri); box-shadow: 0 0 0 3px rgba(174,185,241,.3); }
.mfa-tick {
  width: 46px; height: 46px; border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.mfa-tick svg { width: 24px; height: 24px; color: var(--ink); }
.mfa-warn {
  margin-top: 18px; background: #fbfaf7; border: 1px solid var(--line);
  border-left: 3px solid var(--peri); border-radius: 0 14px 14px 0; padding: 14px 16px;
}
.mfa-warn.quiet { border-left-color: var(--line-strong); }
.mfa-warn strong { font-size: .88rem; }
.mfa-warn p { margin-top: 5px; font-size: .82rem; color: var(--mid); line-height: 1.6; }
.mfa-on {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; font-weight: 700; color: #1f7a45;
  background: rgba(31,122,69,0.1); border-radius: 999px; padding: 8px 15px;
}
.mfa-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f7a45; }
.mfa-wrap { grid-template-columns: 1fr; }
.mfa-wrap .auth-panel { max-width: 460px; margin: 0 auto; }
@media (max-width: 520px) {
  .mfa-code { gap: 6px; }
  .mfa-d { height: 50px; font-size: 1.2rem; border-radius: 11px; }
  .mfa-qr img { width: 168px; height: 168px; }
}
.mfa-mark { display: inline-flex; margin-bottom: 18px; }
.ex-note { margin-top: 16px; font-size: .78rem; color: var(--faint); line-height: 1.6; }

/* ---------- settings ---------- */
.set-view { max-width: 720px; }
.set-lede { margin-top: 10px; color: var(--mid); font-size: .95rem; }
.set-sec {
  margin-top: 26px; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 24px 26px 22px; box-shadow: var(--shadow);
}
.set-sec h2 { font-size: 1.15rem; letter-spacing: -0.02em; }
.set-sub { margin-top: 7px; font-size: .87rem; color: var(--mid); line-height: 1.6; max-width: 62ch; }
.set-note { margin-top: 14px; font-size: .8rem; color: var(--faint); line-height: 1.65; }
.set-note a { color: var(--plum); text-decoration: underline; text-underline-offset: 2px; }
.set-hint { display: block; margin-top: 6px; font-size: .76rem; color: var(--faint); line-height: 1.5; }

.set-photos {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 16px;
  align-items: center; margin-top: 20px;
}
.set-photos .avatar { width: 62px; height: 62px; font-size: 1.1rem; overflow: hidden; }
.set-photo-text { display: flex; flex-direction: column; gap: 3px; }
.set-photo-text strong { font-size: .92rem; }
.set-photo-text span { font-size: .8rem; color: var(--faint); line-height: 1.5; }
.set-logo {
  width: 62px; height: 62px; border-radius: 14px; cursor: pointer;
  border: 1.6px dashed var(--line-strong); background: #fbfaf7;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 1.3rem; padding: 6px; transition: border-color .18s;
}
.set-logo:hover { border-color: var(--peri); }
.set-logo.has { border-style: solid; border-color: var(--line); background: #fff; }
.set-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.set-sec form { margin-top: 20px; }
.set-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.set-saved { font-size: .82rem; font-weight: 700; color: #1f7a45; }

.set-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.set-sec h2 + .set-row, .set-sub + .set-row, .set-sec > .set-row:first-child { border-top: 0; padding-top: 6px; }
.set-row-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.set-row-body strong { font-size: .95rem; }
.set-row-body span { font-size: .82rem; color: var(--faint); line-height: 1.55; overflow-wrap: anywhere; }
.set-pill {
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.set-pill.on { background: rgba(31,122,69,0.1); color: #1f7a45; }
.set-sec form[hidden] { display: none; }

@media (max-width: 620px) {
  .set-sec { padding: 20px 18px 18px; border-radius: 18px; }
  .set-photos { grid-template-columns: auto 1fr; gap: 12px; }
  .set-row { align-items: flex-start; }
  .set-row .btn { width: 100%; }
}

/* ── a roster question: one row per person ──────────────────────
   "Who is on your team and what does each person actually do" is a list, and a
   single blank box gets prose: two names and a shrug. Rows ask for the names and
   the jobs, which is what the question is actually scored on. */
.roster { margin-top: 4px; }
.ros-row {
  display: grid; grid-template-columns: 22px 1fr 1.5fr auto; gap: 10px;
  align-items: end; margin-top: 10px;
}
/* the column headings are stated once, on the first row, not on every one */
.ros-row + .ros-row { margin-top: 8px; }
.ros-n { color: var(--faint); font-size: .78rem; padding-bottom: 12px; }
.ros-f { display: block; min-width: 0; }
.ros-f > span {
  display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.ros-f input {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: .93rem; color: var(--ink); outline: none; background: #fff;
}
.ros-f input:focus { border-color: var(--plum); }
.ros-x {
  background: none; border: 0; cursor: pointer; font-size: .74rem; font-weight: 700;
  color: var(--faint); padding: 12px 2px; opacity: 0; transition: opacity .18s, color .18s;
}
.ros-row:hover .ros-x, .ros-x:focus { opacity: 1; }
@media (hover: none) { .ros-x { opacity: 1; } }
.ros-x:hover { color: #b3261e; }

.ros-add {
  margin-top: 12px; background: none; border: 0; cursor: pointer; display: inline-flex;
  align-items: center; gap: 9px; font-family: var(--font-body); font-size: .86rem;
  font-weight: 600; color: var(--mid); padding: 4px 0;
}
.ros-add i {
  font-style: normal; width: 22px; height: 22px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; border: 1.5px dashed var(--line-strong); color: var(--faint);
}
.ros-add:hover { color: var(--ink); }
.ros-add:hover i { border-color: var(--plum); color: var(--plum); }

.ros-note { display: block; margin-top: 18px; }
.ros-note > span {
  display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.ros-note textarea {
  width: 100%; padding: 12px 14px; min-height: 68px; resize: vertical;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: .93rem; color: var(--ink); outline: none;
}
@media (max-width: 620px) {
  .ros-row { grid-template-columns: 22px 1fr auto; }
  .ros-f.wide { grid-column: 2 / -1; }
}

/* the few tones the builder uses that the Academy palette does not name */
.toc-scope{
  --green:#1f7a45; --green-bg:#e2f6e7;
  --amber:#a2542a; --amber-bg:rgba(233,169,124,.3);
  --leaf:rgba(127,201,165,.34); --sky:rgba(174,185,241,.38);
}

/* ══════════ TRACKING IMPACT: the theory of change builder ══════════
   Lifted from the prototype George signed off, scoped under .toc so none of it
   can reach the rest of the Academy. */
/* ── the spine: the chain, drawn ─────────────────────────── */
.toc-scope .stage{padding:34px 0 90px}
.toc-scope .stage-head{max-width:60ch}
.toc-scope .stage-lede{margin-top:12px;color:var(--mid);font-size:1rem;line-height:1.65}

.toc-scope .spine{margin-top:34px;position:relative}
.toc-scope .link{position:relative;padding-left:56px;padding-bottom:8px}
/* the connector: solid behind you, dashed ahead of you */
.toc-scope .link::before{content:"";position:absolute;left:19px;top:34px;bottom:-10px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line-strong) 0 4px,transparent 4px 9px)}
.toc-scope .link.done::before{background:var(--grad)}
.toc-scope .link:last-child::before{display:none}
/* the node */
.toc-scope .node{position:absolute;left:0;top:8px;width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#fff;border:2px solid var(--line-strong);
  font-family:var(--font-label);font-size:.8rem;font-weight:700;color:var(--faint);z-index:2;
  transition:.3s var(--ease)}
.toc-scope .link.active .node{border-color:transparent;background:var(--fill);color:var(--on-fill);
  box-shadow:0 0 0 5px rgba(216,199,245,.34)}
.toc-scope .link.done .node{border-color:transparent;background:var(--ink);color:#fff}
.toc-scope .node svg{width:18px;height:18px}

.toc-scope .card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;
  box-shadow:var(--shadow);transition:.3s var(--ease)}
.toc-scope .link.ahead .card{background:transparent;border-style:dashed;box-shadow:none;padding:16px 20px}
.toc-scope .link.ahead .card .c-q{color:var(--faint)}
.toc-scope .link.done .card{padding:16px 20px;cursor:pointer}
.toc-scope .link.done .card:hover{border-color:var(--line-strong)}

.toc-scope .c-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:8px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;border-radius:5px;color:var(--ink)}
.toc-scope .t-do{background:var(--leaf)}
.toc-scope .t-count{background:var(--leaf)}
.toc-scope .t-change{background:var(--amber-bg)}
.toc-scope .t-know{background:var(--amber-bg)}
.toc-scope .t-adds{background:var(--sky)}
.toc-scope .c-q{margin-top:9px;font-size:1.14rem;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.toc-scope .link.done .c-q{font-size:.84rem;font-weight:600;color:var(--faint);letter-spacing:0;margin-top:6px}
.toc-scope .c-help{margin-top:8px;font-size:.88rem;color:var(--mid);line-height:1.6;max-width:56ch}
.toc-scope .c-jargon{margin-top:10px;font-size:.78rem;color:var(--faint);line-height:1.55}
.toc-scope .c-jargon b{color:var(--plum);font-weight:700}

/* a completed link reads back as their own words */
.toc-scope .c-answer{margin-top:7px;font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.toc-scope .c-answer-sub{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.toc-scope .chipl{font-size:.76rem;font-weight:600;background:rgba(12,22,34,.045);border-radius:999px;padding:5px 11px;color:var(--ink-2)}
.toc-scope .c-edit{float:right;font-size:.76rem;color:var(--plum);font-weight:700}

/* ── the worked example, collapsed by default ────────────── */
.toc-scope .eg{margin-top:16px;background:#fbfaf7;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.toc-scope .eg summary{list-style:none;cursor:pointer;padding:11px 15px;font-size:.83rem;font-weight:700;
  color:var(--plum);display:flex;align-items:center;gap:9px;user-select:none}
.toc-scope .eg summary::-webkit-details-marker{display:none}
.toc-scope .eg summary:hover{background:rgba(216,199,245,.16)}
.toc-scope .eg-chev{display:inline-flex;transition:transform .2s var(--ease)}
.toc-scope .eg-chev svg{width:13px;height:13px}
.toc-scope .eg[open] .eg-chev{transform:rotate(90deg)}
.toc-scope .eg[open] summary{border-bottom:1px solid var(--line)}
.toc-scope .eg-body{padding:14px 16px 16px;border-left:3px solid var(--peri)}
.toc-scope .eg-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.toc-scope .eg-org{font-size:.79rem;color:var(--faint);line-height:1.5}
.toc-scope .eg-org b{color:var(--ink);font-weight:700;font-size:.85rem}
.toc-scope .eg-top button{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;font-size:.75rem;
  color:var(--plum);font-weight:700;white-space:nowrap}
.toc-scope .eg-top button:hover{text-decoration:underline;text-underline-offset:2px}
.toc-scope .eg-answer{margin-top:11px;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.toc-scope .eg-list{margin:11px 0 0;padding:0;list-style:none}
.toc-scope .eg-list li{margin-top:8px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.toc-scope .eg-list b{font-weight:700}
.toc-scope .eg-list span{display:block;font-size:.75rem;color:var(--faint);margin-top:2px}

/* an outcome and the reason it happens, stacked so the pair reads as one thing */
.toc-scope .prows { margin-top: 16px; }
.toc-scope .prow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.toc-scope .prow + .prow { border-top: 1px solid var(--line); }
.toc-scope .prow .row-n { margin-top: 12px; }
.toc-scope .prow-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.toc-scope .prow .row-x { margin-top: 8px; }
.toc-scope .prow-why { font-size: .9rem; color: var(--mid); }

/* ── inputs ──────────────────────────────────────────────── */
.toc-scope .ta{width:100%;margin-top:16px;min-height:86px;resize:vertical;font-family:var(--font-head);font-size:1rem;
  line-height:1.6;color:var(--ink);border:1.5px solid var(--line-strong);border-radius:14px;
  padding:14px 16px;outline:none;background:#fff;transition:border-color .18s}
.toc-scope .ta:focus{border-color:var(--peri);box-shadow:0 0 0 3px rgba(174,185,241,.22)}
.toc-scope .ta::placeholder{color:var(--faint)}
.toc-scope .c-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.toc-scope .c-count{font-size:.78rem;color:var(--faint)}

/* ── a plain list, for activities ────────────────────────── */
.toc-scope .rows{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.toc-scope .row{display:flex;align-items:center;gap:11px}
.toc-scope .row-n{flex:none;width:22px;font-family:var(--font-label);font-size:.72rem;color:var(--faint);text-align:right}
.toc-scope .row-in{flex:1;min-width:0;font-family:var(--font-head);font-size:.96rem;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:11px;padding:11px 13px;outline:none;background:#fff;
  transition:border-color .16s}
.toc-scope .row-in:focus{border-color:var(--peri);box-shadow:0 0 0 3px rgba(174,185,241,.2)}
.toc-scope .row-in::placeholder{color:var(--faint)}
.toc-scope .row-freq{flex:none;font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:11px;padding:11px 30px 11px 12px;background:#fff;
  cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 10L12 14.5 16.5 10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px}
.toc-scope .row-freq:focus{border-color:var(--peri)}
.toc-scope .row-x{flex:none;background:none;border:0;cursor:pointer;font-size:.74rem;font-weight:700;color:var(--faint);
  padding:6px 2px;opacity:0;transition:opacity .18s,color .18s}
.toc-scope .row:hover .row-x, .toc-scope .row-x:focus{opacity:1}
@media(hover:none){.toc-scope .row-x{opacity:1}}
.toc-scope .row-x:hover{color:#b3261e}

/* ── outputs, grouped under the activity they evidence ───── */
.toc-scope .grp{margin-top:18px;padding-left:14px;border-left:2px solid var(--leaf)}
.toc-scope .grp.grp-all{border-left-color:var(--line-strong);border-left-style:dashed}
.toc-scope .grp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toc-scope .grp-n{flex:none;width:21px;height:21px;border-radius:6px;background:var(--leaf);display:flex;
  align-items:center;justify-content:center;font-family:var(--font-label);font-size:.68rem;font-weight:700;color:var(--ink)}
.toc-scope .grp.grp-all .grp-n{background:rgba(12,22,34,.06);color:var(--faint)}
.toc-scope .grp-h b{font-size:.93rem;letter-spacing:-.01em}
.toc-scope .grp.grp-all .grp-h b{color:var(--mid);font-weight:600}
.toc-scope .grp-f{font-family:var(--font-label);font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.toc-scope .grp-c{margin-left:auto;font-family:var(--font-label);font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.toc-scope .grp-note{margin:8px 0 0;font-size:.83rem;line-height:1.55;color:var(--mid);max-width:46ch}
/* the second half of a merged link: the same card, one step down */
.toc-scope .c-sub{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.toc-scope .c-q.sub{font-size:1.02rem}
.toc-scope .eg-sub{margin:16px 0 0;font-family:var(--font-label);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.toc-scope .grp .mech{margin-top:11px}
.toc-scope .grp .mech-add{margin-top:9px;font-size:.82rem}

/* ── the reporting mechanic: one small question at a time ── */
.toc-scope .mech{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.toc-scope .mech-h{padding:13px 16px;background:#fbfaf7;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toc-scope .mech-h b{font-size:.95rem}
.toc-scope .mech-h .num{font-family:var(--font-label);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.toc-scope .mech-h .rm{margin-left:auto;background:none;border:0;cursor:pointer;font-size:.74rem;color:var(--faint);
  font-weight:700;padding:4px}
.toc-scope .mech-h .rm:hover{color:#b3261e}
.toc-scope .mq{padding:15px 16px;border-top:1px solid var(--line)}
.toc-scope .mq:first-of-type{border-top:0}
.toc-scope .mq-q{font-size:.9rem;font-weight:700}
.toc-scope .mq-hint{margin-top:5px;font-size:.78rem;color:var(--faint);line-height:1.55}
.toc-scope .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.toc-scope .picks{margin-top:12px;padding:11px 13px;background:rgba(216,199,245,.18);border-radius:12px}
.toc-scope .picks-k{font-family:var(--font-label);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
.toc-scope .picks .chips{margin-top:8px}
.toc-scope .chip.pick{border-style:dashed}
.toc-scope .chip{border:1.5px solid var(--line-strong);background:#fff;border-radius:999px;padding:8px 14px;
  font-size:.82rem;font-weight:600;cursor:pointer;color:var(--ink-2);transition:.16s var(--ease)}
.toc-scope .chip:hover{border-color:var(--ink)}
.toc-scope .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.toc-scope .mini{width:100%;margin-top:10px;font-family:var(--font-head);font-size:.95rem;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:11px;padding:11px 13px;outline:none}
.toc-scope .mini:focus{border-color:var(--peri)}
.toc-scope .mech-add{margin-top:12px;background:none;border:0;cursor:pointer;font-size:.85rem;font-weight:700;
  color:var(--faint);display:flex;align-items:center;gap:9px;padding:6px 0}
.toc-scope .mech-add:hover{color:var(--plum)}
.toc-scope .mech-add i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:6px;border:1.4px dashed currentColor;font-style:normal;font-size:.74rem}
.toc-scope .mech-said{margin-top:12px;font-size:.84rem;color:var(--mid);line-height:1.6;
  background:rgba(216,199,245,.2);border-radius:12px;padding:12px 14px}
.toc-scope .mech-said b{color:var(--ink)}

/* ── the read back ───────────────────────────────────────── */
.toc-scope .read{margin-top:36px;background:#fff;border:1px solid var(--line-strong);border-radius:24px;
  padding:30px 32px;box-shadow:0 20px 50px -40px rgba(12,22,34,.5)}
.toc-scope .read-s{margin-top:16px;font-size:clamp(1.1rem,2.3vw,1.35rem);line-height:1.62;font-weight:600;letter-spacing:-.02em}
.toc-scope .read-s em{font-style:normal;background:rgba(216,199,245,.42);border-radius:5px;padding:2px 5px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.toc-scope .read-note{margin-top:18px;font-size:.85rem;color:var(--mid);line-height:1.65}

/* the five column table, generated from their chain */
.toc-scope .toc5{display:grid;grid-template-columns:repeat(5,1fr);margin-top:20px;background:#fff;
  border:1px solid var(--line-strong);border-radius:16px;overflow:hidden}
.toc-scope .tc-h{font-family:var(--font-label);font-size:8px;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  padding:11px 6px;border-bottom:1px solid var(--line-strong);font-weight:700}
.toc-scope .tc{border-right:1px solid var(--line)}
.toc-scope .tc:last-child{border-right:0}
.toc-scope .tc-b{padding:8px}
.toc-scope .tc-i{font-size:.78rem;line-height:1.45;padding:9px 10px;border-radius:9px;margin-bottom:6px}
.toc-scope .tc1 .tc-i{background:rgba(12,22,34,.045)}
.toc-scope .tc2 .tc-i{background:rgba(216,199,245,.3)}
.toc-scope .tc3 .tc-i{background:var(--leaf)}
.toc-scope .tc4 .tc-i{background:var(--amber-bg)}
.toc-scope .tc5 .tc-i{background:var(--sky)}
.toc-scope .tc-i b{display:block;font-weight:700;margin-bottom:2px}
.toc-scope .tc-todo{width:100%;text-align:left;background:none;border:1.4px dashed var(--line-strong);border-radius:9px;
  padding:10px 11px;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--ink-2);line-height:1.45}
.toc-scope .tc-todo:hover{border-color:var(--peri);background:rgba(216,199,245,.14)}
.toc-scope .tc-todo span{display:block;margin-top:5px;font-weight:400;color:var(--faint);font-size:.74rem}

/* ── changes overview ────────────────────────────────────── */
.toc-scope .chains{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.toc-scope .chain-row{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;
  box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.toc-scope .chain-row.todo{background:transparent;border-style:dashed;box-shadow:none}
.toc-scope .chain-n{font-family:var(--font-label);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  flex-basis:100%}
.toc-scope .chain-t{flex:1;min-width:200px;font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.toc-scope .chain-mini{flex-basis:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.toc-scope .chain-mini i{font-style:normal;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:999px;color:var(--ink)}
.toc-scope .chain-mini i.a{background:var(--leaf)}
.toc-scope .chain-mini i.b{background:var(--amber-bg)}
.toc-scope .chain-mini i.c{background:var(--sky)}
.toc-scope .chain-mini u{text-decoration:none;color:var(--faint);font-size:.8rem}

.toc-scope .foot{margin-top:34px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toc-scope .hint{font-size:.82rem;color:var(--faint);line-height:1.6;max-width:62ch;margin-top:14px}

@media(max-width:720px){
  .toc-scope .row{flex-wrap:wrap}
  .toc-scope .row-in{flex:1 1 100%;order:1}
  .toc-scope .row-n{order:0}
  .toc-scope .row-freq{order:2;flex:1 1 auto}
  .toc-scope .row-x{order:3}
  .toc-scope .shell{padding:0 16px}
  .toc-scope .top-in{padding:12px 16px}
  .toc-scope .link{padding-left:44px}
  .toc-scope .node{width:32px;height:32px;font-size:.7rem}
  .toc-scope .node svg{width:15px;height:15px}
  .toc-scope .link::before{left:15px;top:28px}
  .toc-scope .card{padding:18px 17px;border-radius:17px}
  .toc-scope .read{padding:22px 19px;border-radius:19px}
  .toc-scope .toc5{grid-template-columns:1fr;border-radius:14px}
  .toc-scope .tc{border-right:0;border-bottom:1px solid var(--line)}
  .toc-scope .tc-h{text-align:left;padding:10px 12px}
}

/* ══════════ TOOLS ══════════ */
.tools-lede { margin-top: 14px; font-size: 1rem; color: var(--mid); line-height: 1.65; max-width: 70ch; }
.tool-grid { margin-top: 30px; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .tool-grid { grid-template-columns: 1fr; } }
.tool {
  position: relative; overflow: hidden; min-height: 226px;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 26px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tool:hover { border-color: var(--line-strong); box-shadow: 0 22px 46px -30px rgba(12,22,34,0.26); }
.tool.soon { cursor: default; background: rgba(12,22,34,.02); }
.tool.soon:hover { border-color: var(--line); box-shadow: none; }
.tool > .chip { align-self: flex-start; }
.tool h3 { font-size: 1.18rem; letter-spacing: -0.03em; margin-top: 6px; }
.tool p { font-size: .9rem; color: var(--mid); line-height: 1.6; max-width: 30ch; }
.tl-foot { margin-top: auto; padding-top: 16px; padding-right: 96px; }
.tl-go { font-size: .86rem; font-weight: 700; color: var(--plum); }
.tl-go.quiet { color: var(--faint); font-weight: 600; }

/* a drawing of the thing in the bottom corner, half off the card. A shield says
   "security", a signed page with a seal says what a policy actually is, which is
   the difference between an icon and an illustration. It sits under the words and
   leans in when the card is under the cursor. */
.tl-art {
  position: absolute; right: -12px; bottom: -12px; z-index: 0; pointer-events: none;
  width: 148px; display: block; transform: rotate(-6deg); transform-origin: bottom right;
  transition: transform .35s var(--ease);
}
.tl-art svg { width: 100%; height: auto; display: block; }
.tool:hover .tl-art { transform: rotate(-3deg) translate(-4px, -6px); }
.tool > .chip, .tool h3, .tool p, .tl-foot { position: relative; z-index: 1; }

/* the gate: what it is, what you get, then the price */
.iget { margin-top: 30px; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .iget { grid-template-columns: 1fr; } }
.iget-card {
  position: relative; overflow: hidden; min-height: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.iget-card strong { position: relative; z-index: 1; font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.iget-card > span:not(.iget-art) { position: relative; z-index: 1; font-size: .88rem; color: var(--mid); line-height: 1.6; max-width: 30ch; }
/* a picture of the thing, half off the corner. It is a drawing, not an icon:
   a bar chart glyph says "chart", a small dashboard says what they will have. */
.iget-art {
  position: absolute; right: -10px; bottom: -8px; z-index: 0; pointer-events: none;
  width: 130px; display: block; transform: rotate(-5deg); transform-origin: bottom right;
}
.iget-art svg { width: 100%; height: auto; display: block; }

.igate { margin-top: 30px; }
.igate-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.igate-head h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.igate-mins { font-size: .86rem; color: var(--faint); }
.igate .mod-list { margin-top: 18px; }

/* the locked builder: visible, described, and out of reach. Behind glass rather
   than hidden, because a gate that only lists homework is a chore and a gate that
   shows what the homework buys is an invitation. */
.ilock {
  position: relative; margin-top: 34px; border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 26px 26px; overflow: hidden;
  background: linear-gradient(180deg, rgba(216,199,245,.16) 0%, rgba(251,251,252,.6) 62%);
}
.ilock-head { display: flex; gap: 18px; align-items: flex-start; }
.ilock-head h3 { font-size: 1.14rem; letter-spacing: -0.03em; }
.ilock-head p { margin-top: 8px; font-size: .9rem; color: var(--mid); line-height: 1.6; max-width: 62ch; }
.ilock-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--plum); background: #fff; border: 1px solid var(--peri); border-radius: 999px; padding: 5px 11px;
}
.ilock-chip svg { width: 12px; height: 12px; }
/* the chain, greyed to about a third: readable, plainly not yours yet */
.ilock-chain {
  margin-top: 22px; display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr);
  filter: grayscale(1); opacity: .42; user-select: none;
}
@media (max-width: 780px) { .ilock-chain { grid-template-columns: repeat(2, 1fr); } }
.ilc { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 14px; }
.ilc-n { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: .66rem; font-weight: 700; color: var(--faint); }
.ilc-body { min-width: 0; }
.ilc-tag { display: inline-block; font-family: var(--font-label); font-size: 8px; letter-spacing: .13em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 5px; color: var(--ink);
  background: rgba(12,22,34,.07); }
.ilc-q { display: block; margin-top: 7px; font-family: var(--font-head); font-weight: 700;
  font-size: .88rem; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); }
.ilock-foot { display: block; margin-top: 16px; font-family: var(--font-label); font-size: 8.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }

/* ══════════ THE CHECK-IN ══════════ */
.ci { max-width: 640px; margin: 0 auto; padding-top: 8px; }
.ci-top { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.ci-x { background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: .84rem; font-weight: 700; color: var(--faint); padding: 4px 0; }
.ci-x:hover { color: var(--ink); }
.ci-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(12,22,34,.08); overflow: hidden; }
.ci-track i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .35s var(--ease); }
.ci-count { font-size: .8rem; color: var(--faint); white-space: nowrap; }
.ci h1 { margin-top: 10px; font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
.ci-help { margin-top: 10px; font-size: .92rem; color: var(--mid); line-height: 1.6; }
.ci-in {
  width: 100%; margin-top: 26px; padding: 14px 4px; border: 0; border-bottom: 2px solid var(--line-strong);
  font-size: clamp(2.6rem, 9vw, 4rem); font-weight: 700; letter-spacing: -0.04em; color: var(--ink);
  outline: none; background: none;
}
.ci-in:focus { border-bottom-color: var(--plum); }
.ci-last { margin-top: 12px; font-size: .88rem; color: var(--mid); }
.ci-chips { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ci-chip {
  border: 1.5px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 9px 18px;
  font-family: var(--font-num); font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.ci-chip:hover { border-color: var(--plum); background: rgba(216,199,245,.16); }
.ci-moment {
  width: 100%; margin-top: 22px; padding: 14px 16px; min-height: 110px; resize: vertical;
  border: 1.5px solid var(--line-strong); border-radius: 14px;
  font-family: var(--font-body); font-size: .98rem; color: var(--ink); outline: none;
}
.ci-acts { margin-top: 26px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ci-done { text-align: center; padding-top: 40px; }
.ci-done .ci-acts { justify-content: center; }
.ci-done .ci-help { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ══════════ THE TABLE ══════════ */
.ti-view { max-width: 1100px; }
.ti-head { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
.ti-sub { margin-top: 8px; font-size: .9rem; color: var(--mid); max-width: 58ch; line-height: 1.6; }
.ti-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-nudge {
  margin-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 14px 18px;
  background: rgba(233,169,124,.10); font-size: .89rem; color: var(--ink-2);
}
.tn-dot { width: 9px; height: 9px; border-radius: 50%; background: #c8763a; flex: none; }
.ti-nudge .btn { margin-left: auto; }

.ti-scroll { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
table.ti { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.ti th, table.ti td { padding: 11px 12px; text-align: right; white-space: nowrap; }
.ti-corner, .ti-name { text-align: left !important; position: sticky; left: 0; background: #fff; z-index: 2; min-width: 230px; }
.ti thead th { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line); font-weight: 700; }
.ti-m.now { color: var(--plum); }
.ti-total-h { position: sticky; right: 0; background: #fff; }
.ti-group th { text-align: left !important; padding-top: 20px; border-bottom: 1px solid var(--line); }
.ti-g-title { font-family: var(--font-head); font-weight: 700; font-size: .98rem; letter-spacing: -0.02em; color: var(--ink); }
.ti-g-sub { font-family: var(--font-label); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-left: 10px; }
.ti-label { display: block; font-weight: 600; color: var(--ink-2); white-space: normal; }
.ti-meta { display: block; font-size: .74rem; color: var(--faint); margin-top: 2px; white-space: normal; }
.ti-kind { margin-left: 8px; border: 0; background: rgba(12,22,34,.05); border-radius: 999px;
  padding: 2px 8px; font-family: var(--font-label); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid); cursor: pointer; }
.ti-kind:hover { background: var(--grad); color: var(--ink); }
.ti-cell { cursor: pointer; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.ti-cell:hover { outline: 2px solid var(--plum); outline-offset: -2px; }
.ti-cell.empty span { color: var(--faint); }
.ti-total { position: sticky; right: 0; background: #fff; font-weight: 700; border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ti-edit { width: 100%; border: 0; background: none; text-align: right; font: inherit; font-weight: 700; color: var(--ink); outline: none; }
.ti-add td { padding-top: 6px; padding-bottom: 14px; text-align: left !important; }
.ti-add-btn { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--mid); }
.ti-add-btn i { font-style: normal; width: 20px; height: 20px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; border: 1.5px dashed var(--line-strong); color: var(--faint); }
.ti-add-btn:hover { color: var(--ink); }
.ti-add-btn:hover i { border-color: var(--plum); color: var(--plum); }
.ti-foot { margin-top: 16px; font-size: .78rem; color: var(--faint); line-height: 1.6; }
.ti-more { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--plum); }
/* On a phone the name column was 230px of a 390px screen, so two months showed
   and the total was off the edge. Give the months the room instead. */
@media (max-width: 700px) {
  .ti-total, .ti-total-h { position: static; }
  .ti-meta { display: none; }
  .ti-corner, .ti-name { min-width: 128px; max-width: 140px; }
  .ti-label { font-size: .82rem; line-height: 1.3; }
  table.ti { font-size: .82rem; }
  table.ti th, table.ti td { padding: 9px 8px; }
  .ti-g-sub { display: none; }
  .ti-g-title { font-size: .88rem; }
}

/* ══════════ THE DASHBOARD ══════════ */
.db-cover { margin-top: 18px; border-radius: 26px; overflow: hidden; position: relative; background: var(--d-deep); min-height: 340px; display: flex; }
.db-cover-art { position: absolute; inset: 0; opacity: .9; }
.db-cover-art.art-1 { background: radial-gradient(circle at 78% 18%, var(--d-accent) 0%, transparent 52%), radial-gradient(circle at 12% 88%, var(--d-ink) 0%, transparent 55%), var(--d-deep); }
.db-cover-art.art-2 { background: conic-gradient(from 210deg at 70% 30%, var(--d-ink), var(--d-mid), var(--d-accent), var(--d-ink)); }
.db-cover-art.art-3 { background: linear-gradient(115deg, var(--d-deep) 0%, var(--d-ink) 45%, var(--d-mid) 72%, var(--d-accent) 100%); }
.db-cover-art.art-4 { background: repeating-linear-gradient(125deg, var(--d-deep) 0 42px, var(--d-ink) 42px 84px), radial-gradient(circle at 80% 20%, var(--d-accent) 0%, transparent 60%); }
.db-cover-in { position: relative; padding: 40px 44px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
@media (max-width: 600px) { .db-cover-in { padding: 28px 22px; } .db-cover { min-height: 280px; } }
.db-org { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.db-period { font-family: var(--font-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 4px; }
.db-big { display: block; margin-top: 22px; font-size: clamp(3.4rem, 13vw, 6.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .92; }
.db-big-label { display: block; margin-top: 8px; font-size: 1rem; color: rgba(255,255,255,.86); max-width: 40ch; }
.db-bar { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.db-sec { margin-top: 46px; }
.db-sec h2 { margin-top: 10px; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.db-note { margin-top: 14px; font-size: .85rem; color: var(--mid); max-width: 62ch; line-height: 1.6; }

.casc { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.casc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.casc-bar { height: 58px; border-radius: 12px; display: flex; align-items: center; padding: 0 18px; min-width: 90px; }
.casc-bar .num { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.casc-label { font-size: .95rem; color: var(--ink-2); }

.yr { margin-top: 22px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 190px; }
.yr-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.yr-v { font-family: var(--font-num); font-size: .68rem; color: var(--mid); }
.yr-bar { width: 100%; background: var(--d-mid); border-radius: 6px 6px 0 0; min-height: 3px; }
.yr-col.best .yr-bar { background: var(--d-ink); }
.yr-col.gap .yr-bar { height: 100% !important; min-height: 0; border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(12,22,34,.05) 0 5px, transparent 5px 10px); }
.yr-m { font-family: var(--font-label); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.db-out { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.db-out-label { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.03em; max-width: 60ch; }
.db-out-nums { margin-top: 16px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.db-num .num { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; color: var(--d-ink); display: block; }
.db-num-l { display: block; font-size: .88rem; color: var(--ink-2); margin-top: 2px; }
.db-num-k { display: block; font-family: var(--font-label); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.dbspark { display: block; margin-top: 10px; width: 120px; height: 28px; }
.db-aim p { margin-top: 12px; font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); max-width: 56ch; font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; }
.db-mom { margin: 16px 0 0; padding: 16px 20px; border-left: 3px solid var(--d-accent); background: rgba(12,22,34,.02); border-radius: 0 14px 14px 0; }
.db-mom p { font-size: .98rem; color: var(--ink-2); line-height: 1.6; }
.db-mom cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* customise */
.db-field { margin-top: 20px; }
.db-field > label { display: block; font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.db-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.db-preset { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-strong);
  background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .84rem; cursor: pointer; }
.db-preset i { width: 26px; height: 14px; border-radius: 999px; background: linear-gradient(100deg, var(--a), var(--b)); }
.db-preset:hover { border-color: var(--plum); }
.db-two { display: flex; gap: 14px; flex-wrap: wrap; }
.db-two label { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.db-two input[type=color] { width: 100%; height: 42px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: none; cursor: pointer; padding: 3px; }
.db-arts { display: flex; gap: 8px; flex-wrap: wrap; }
.db-art { width: 60px; height: 42px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  --d-ink:#6b5e95; --d-accent:#aeb9f1; --d-mid:#8b8cbf; --d-deep:#302a43; }
.db-art.on { border-color: var(--ink); }
.db-art.art-1 { background: radial-gradient(circle at 78% 18%, var(--d-accent) 0%, transparent 52%), radial-gradient(circle at 12% 88%, var(--d-ink) 0%, transparent 55%), var(--d-deep); }
.db-art.art-2 { background: conic-gradient(from 210deg at 70% 30%, var(--d-ink), var(--d-mid), var(--d-accent), var(--d-ink)); }
.db-art.art-3 { background: linear-gradient(115deg, var(--d-deep) 0%, var(--d-ink) 45%, var(--d-mid) 72%, var(--d-accent) 100%); }
.db-art.art-4 { background: repeating-linear-gradient(125deg, var(--d-deep) 0 12px, var(--d-ink) 12px 24px); }
.db-prev { margin-top: 22px; border-radius: 16px; padding: 18px; background: rgba(12,22,34,.03);
  display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.dp-a, .dp-b, .dp-c { flex: 1; border-radius: 8px 8px 0 0; }
.dp-a { height: 76%; background: var(--d-ink); }
.dp-b { height: 48%; background: var(--d-mid); }
.dp-c { height: 88%; background: var(--d-accent); }
.dp-t { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); align-self: flex-start; }
#db-lead { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  font-family: var(--font-body); font-size: .92rem; background: #fff; color: var(--ink); }

/* a dashboard row for something an admin has not released yet */
.dlink.locked { background: rgba(12,22,34,.02); }
.dlink.locked strong, .dlink.locked .dl-main span { color: var(--faint); }
.dlink.locked .dl-go { width: 17px; color: var(--faint); }
.dlink.locked .dl-go svg { width: 100%; height: auto; display: block; }

/* ══════════ THE JOURNEY BADGE ══════════
   Oversized, tilted, and running off the right edge of the page, because it is
   the reward for the thing this page is asking them to start. The iridescence is
   in the badge itself: no card, no glow behind it. */
.jr-open-badged { position: relative; max-width: none; min-height: 318px; }
.jr-open-badged .jr-open-words { max-width: 58ch; position: relative; z-index: 1; }

.jr-badge {
  position: absolute; top: -58px; right: -88px; z-index: 0;
  width: 344px; display: block; text-decoration: none;
}
/* The tilt lives on the svg, not the anchor, so the caption below can stay level
   instead of being dragged through the same perspective and coming out skewed. */
.jr-badge .bdg-svg {
  display: block; width: 100%; height: auto;
  transform: perspective(1000px) rotateX(8deg) rotateY(-17deg) rotate(-21deg);
  transform-origin: 58% 50%;
  transition: transform .5s var(--ease);
  filter: drop-shadow(0 30px 40px rgba(12,22,34,.26)) drop-shadow(0 7px 11px rgba(12,22,34,.12));
}
/* the highlight that travels across the face, so it reads as polished rather than printed */
.bdg-shine { animation: bdgSweep 6s cubic-bezier(.4,0,.2,1) infinite; }
/* a badge you have not earned yet does not get to twinkle at you */
.bghost .bdg-shine, .ghost .bdg-shine, .locked .bdg-shine { animation: none; opacity: 0; }
@keyframes bdgSweep {
  0%        { transform: translateX(0);     opacity: 0; }
  9%        { opacity: 1; }
  46%       { opacity: 1; }
  60%, 100% { transform: translateX(152px); opacity: 0; }
}
/* not earned yet: the same badge, with the colour drained out of it and no shine */
.jr-badge:not(.won) .bdg-svg {
  filter: saturate(.14) opacity(.46) drop-shadow(0 18px 26px rgba(12,22,34,.08));
}
.jr-badge:not(.won) .bdg-shine { animation: none; opacity: 0; }
a.jr-badge:hover .bdg-svg {
  transform: perspective(1000px) rotateX(4deg) rotateY(-8deg) rotate(-15deg) scale(1.05);
}

/* the caption sits under the badge and reads level */
.jr-badge .jrb-cap {
  position: absolute; left: 10px; bottom: 34px;
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.jr-badge.won .jrb-cap { color: var(--plum); font-weight: 700; border-color: var(--peri); }

/* it is allowed off the side of the page, but never onto a scrollbar */
.shell { overflow-x: clip; }

/* Except where the shell contains a sticky bar. Safari jitters a position:sticky
   element by a pixel on every scroll frame when an ancestor clips its overflow;
   Chromium does not, which is why six separate measurements here found the bar
   perfectly still while George watched it shake. Reported 19 Aug.

   The clip above exists so the journey badge can hang off the side without
   summoning a horizontal scrollbar. The reader and the policy builder have no
   badge, so those shells have nothing to clip and can simply not clip. Anything
   that fails to understand :has() keeps the old behaviour, which is the bug but
   not a worse one. */
.shell:has(.reader-top), .shell:has(.fillbar) { overflow-x: visible; }

@media (max-width: 1140px) {
  .jr-badge { width: 288px; right: -66px; top: -40px; }
  .jr-badge .jrb-cap { bottom: 28px; left: 6px; }
  .jr-open-badged { min-height: 264px; }
}
@media (max-width: 900px) {
  .jr-badge { position: static; width: 200px; margin: 0 0 30px 10px; }
  .jr-badge .bdg-svg { transform: perspective(900px) rotateY(-11deg) rotate(-12deg); }
  a.jr-badge:hover .bdg-svg { transform: perspective(900px) rotateY(-6deg) rotate(-8deg) scale(1.04); }
  .jr-badge .jrb-cap { position: static; display: inline-block; margin-top: 12px; }
  .jr-open-badged { min-height: 0; }
  .jr-open-badged .jr-open-words { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-badge .bdg-svg, a.jr-badge:hover .bdg-svg { transition: none; }
  .bdg-shine { animation: none; }
}

/* the accordions that took the wall of copy off this page */
.jr-more { margin-top: 14px; }
.jr-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 700; color: var(--plum); user-select: none;
}
.jr-more > summary::-webkit-details-marker { display: none; }
.jr-more > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.jr-more[open] > summary::before { transform: rotate(45deg); }
.jr-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.jr-more > p { margin-top: 10px; font-size: .92rem; color: var(--mid); line-height: 1.65; max-width: 68ch; }
.jr-more > p + p { margin-top: 10px; }
.jr-more-block { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }

/* the small illustration that leads each dashboard row, in the same hand as the
   Tools cards: quiet at rest, tilting in when the row is under the cursor */
.dl-art {
  flex: none; width: 46px; display: block; align-self: center;
  transform: rotate(-4deg); transform-origin: center;
  transition: transform .3s var(--ease), filter .3s var(--ease);
  filter: saturate(.55);
}
.dl-art svg { width: 100%; height: auto; display: block; }
.dlink:hover .dl-art { transform: rotate(0deg) scale(1.06); filter: saturate(1); }
.dlink.locked .dl-art { filter: grayscale(1) opacity(.45); }
.dlink.locked:hover .dl-art { transform: rotate(-4deg); filter: grayscale(1) opacity(.45); }
@media (max-width: 520px) { .dl-art { width: 38px; } }

/* ══════════ SUGGEST A TOOL ══════════
   Down the same pipe as Ask Dylan, so there is no second inbox to remember. */
.tl-ask {
  margin-top: 34px; padding: 26px 28px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--grad-soft);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: start;
}
@media (max-width: 820px) { .tl-ask { grid-template-columns: 1fr; gap: 18px; } }
.tl-ask h2 { font-size: 1.1rem; letter-spacing: -0.03em; }
.tl-ask p { margin-top: 8px; font-size: .9rem; color: var(--mid); line-height: 1.6; max-width: 44ch; }
.tl-ask textarea {
  width: 100%; resize: vertical; min-height: 70px; padding: 12px 14px;
  font-family: var(--font-body); font-size: .92rem; line-height: 1.55; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.tl-ask textarea:focus { outline: none; border-color: var(--peri); box-shadow: 0 0 0 3px rgba(174,185,241,.24); }
.tl-ask-act { margin-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tl-ask-note { font-size: .84rem; color: var(--faint); }
.tl-ask-note.ok { color: var(--green, #1f7a45); font-weight: 600; }
.tl-ask-note.warn { color: #a2542a; }

/* ══════════ SITE FOOTER ══════════
   One quiet line at the bottom of every page. The legal pages have to be reachable
   from inside the Academy, not only from an email. The bottom padding is generous
   because the Ask Dylan and Translate pills are fixed to the bottom corners and
   would otherwise sit on top of these links. */
.site-foot { border-top: 1px solid var(--line); margin-top: 64px; background: #fff; }
.sf-in {
  max-width: 1180px; margin: 0 auto; padding: 24px 28px 82px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.sf-in > span { font-size: .78rem; color: var(--faint); }
.sf-in nav { display: flex; gap: 22px; flex-wrap: wrap; }
.sf-in a { font-size: .78rem; color: var(--mid); text-decoration: none; }
.sf-in a:hover { color: var(--plum); text-decoration: underline; }
@media (max-width: 620px) { .sf-in { flex-direction: column; align-items: flex-start; gap: 12px; } }
@media print { .site-foot { display: none !important; } }

/* Safeguarding recognised from before the Academy. Deliberately not styled as a
   won badge: the gate is open, the course is not finished, and the copy has to hold
   both of those at once without the person thinking they have a certificate. */
.sg-prior {
  margin-top: 16px; max-width: 66ch; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  background: var(--grad-soft); font-size: .88rem; color: var(--ink-2); line-height: 1.6;
}
.sg-prior strong { display: block; color: var(--ink); font-family: var(--font-head); letter-spacing: -0.02em; }
.sg-prior .sgp-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: #e2f6e7; color: #1f7a45; display: flex; align-items: center; justify-content: center;
}
.sg-prior .sgp-tick svg { width: 13px; height: 13px; }

/* ══════════ hover: nothing about a card's box changes ══════════
   George, three times: hovering a card made the others "glitch", then "vibrate",
   and on the Academy it was the top two specifically while the bottom two were fine.

   I could not reproduce it here, and I tried hard: every card's box sampled at rest
   and while hovering each one in turn, at nine viewport heights, on all three grids;
   the neighbouring card diffed pixel by pixel; the hover state polled every frame at
   the card edges to catch a hover-on-hover-off loop; and the rect sampled every frame
   through the whole transition looking for oscillation. All clean, every time.

   So rather than keep guessing at a mechanism I cannot see, the geometry is gone. A
   card's box is now identical hovered and not hovered: the lift is expressed as a
   deeper shadow and a stronger border instead of translateY. That removes the entire
   class of problem at once - no hover boundary can move out from under a cursor and
   retrigger, no transform can promote a layer and force the rest of the grid to
   re-rasterise, and nothing can feed back into layout. The badge scales but no longer
   rotates, because rotating a raster image re-rasterises it on every frame.

   verify-dash asserts the box is byte-identical hovered and not, so this cannot creep
   back in the next time someone adds a nice lift. */

/* ── staging banner ──
   Drawn from the STAGING flag in config.js rather than a div hand-patched into a
   zip, so the live site and the staging site now ship byte-identical HTML and CSS.
   Before the repo, forgetting to patch it was how a staging build could look
   exactly like production. */
html.is-staging body::before {
  content: 'Staging \00b7 a copy for testing. Nothing here is real.';
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: #a2542a; color: #fff; text-align: center;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 10px;
}
html.is-staging { --banner-h: 24px; }
html.is-staging body { padding-top: var(--banner-h); }
html.is-staging .topbar { top: var(--banner-h); }
@media print { html.is-staging body::before { display: none; } }

/* ── figures ──
   Space Mono lined every digit up for free, because every glyph was the same
   width. Inter's default figures are proportional: a 1 is narrower than a 0, so
   numbers in a column drift out of line and a changing counter jitters as it
   counts. Tabular figures are the same thing mono gave us, without the mono.
   Applied only where digits sit in a column or change in place, not to running
   prose, where proportional figures read better. */
.num, .n, .m-n, .f-n, .jrs-num, .row-n, .chain-n, .db-num-k, .mrow .m-n,
.atable th, .atable td, .ti th, .ti td, .cert-card .cc-date, .badge .b-date,
.gen-pct, .bq-track + .num, .pace-lbl + .num {
  font-variant-numeric: tabular-nums;
}