/* Money Script quiz, restyled onto the Margin site tokens (site.css).
   The four script colors are the quiz's own; everything else maps to the site. */
/* Script colors live on :root because the quiz script reads them from the document element. */
:root { --avoid: #4F5BB0; --worship: #9E6F17; --status: #B23A55; --vigil: #1F7F79; }
@media (prefers-color-scheme: dark) {
  :root { --avoid: #A9B1F2; --worship: #E6BC5C; --status: #F08CA2; --vigil: #6CCFC6; }
}
.quiz-page {
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-block: 2rem 4.5rem;
}
.quiz-page .eyebrow { font-weight: 600; font-size: 0.85rem; color: var(--red); }
.quiz-page .qmeta, .quiz-page .kbd { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.quiz-page .resnav { top: 0; margin-inline: 0; padding-inline: 0; font-size: 0.85rem; font-weight: 600; }
.quiz-coach { border-top: 3px solid var(--red); padding-top: 1.25rem; display: grid; gap: 0.75rem; }
.wrap { max-width: 44rem; margin: 0 auto; display: grid; gap: 2.5rem; }
.stack { display: grid; gap: 1rem; }
:where(.quiz-page) h1, :where(.quiz-page) h2, :where(.quiz-page) h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.1; }
:where(.quiz-page) h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); letter-spacing: -0.01em; }
:where(.quiz-page) h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
:where(.quiz-page) h3 { font-size: 1.4rem; }
.eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0; color: var(--muted); }
.lede { font-size: 1.15rem; max-width: 36rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
:where(.quiz-page) a { color: inherit; text-underline-offset: 3px; }
:where(.quiz-page) button { font: inherit; color: inherit; cursor: pointer; }
:where(.quiz-page) input:focus-visible + label, :where(.quiz-page) summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; display: inline-block; }

.mast { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; }
.mast .serial { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0; }

.btn { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 0.8rem 1.4rem; border-radius: 2px; font-weight: 600; }
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); }
.linkbtn { background: none; border: none; padding: 0.25rem 0; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* intro */
.rosette { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; display: block; margin: 0 auto; }
.hero-art .rosette { max-width: 320px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.chapters li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.chapters .num { font-family: var(--display); font-size: 1.3rem; }
.chapters .t { font-weight: 600; }
.chapters .d { color: var(--muted); font-size: 0.93rem; display: block; font-weight: 400; }
.chapters .c { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

/* quiz */
.segbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.seg { height: 3px; background: var(--rule); position: relative; overflow: hidden; }
.seg > span { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width .25s ease; }
.qmeta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qtext { font-family: var(--display); font-size: clamp(1.6rem, 4.8vw, 2.3rem); line-height: 1.2; min-height: 4.8em; display: flex; align-items: flex-end; text-wrap: balance; }
.qtext.short { min-height: 0; }
.scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.scale button { border: 1px solid var(--rule); background: var(--surface); border-radius: 2px; padding: 0.9rem 0 0.8rem; font-family: var(--mono); font-size: 1.05rem; transition: border-color .15s, background .15s; }
.scale button:hover { border-color: var(--ink); }
.scale button[aria-pressed="true"], .opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scale-ends { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); gap: 1rem; margin-top: 0.5rem; }
.opts { display: grid; gap: 0.5rem; }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .opts.two { grid-template-columns: 1fr; } }
.opt { text-align: left; border: 1px solid var(--rule); background: var(--surface); border-radius: 2px; padding: 0.85rem 1rem; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--ink); }
.opt .k { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.opt[aria-pressed="true"] .k { color: var(--paper); opacity: 0.7; }
.opt .sub { display: block; font-size: 0.85rem; opacity: 0.75; }
.chosen { font-size: 0.95rem; min-height: 1.6em; color: var(--muted); }
.qnav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kbd { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
@media (max-width: 480px) { .kbd { display: none; } }

/* chapter interstitial */
.chap { display: grid; gap: 1.1rem; padding-block: 1rem; }
.chap .roman { font-family: var(--display); font-size: clamp(5rem, 22vw, 9rem); line-height: 0.9; }
.chap .rosette { max-width: 160px; margin: 0; }

/* results */
.resnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: var(--paper); border-bottom: 1px solid var(--rule); margin-inline: -20px; padding: 0.6rem 20px; overflow-x: auto; white-space: nowrap; display: flex; gap: 1.1rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; scrollbar-width: none; }
.resnav a { text-decoration: none; color: var(--muted); }
.resnav a:hover { color: var(--ink); }

.note-card { background: var(--card); color: var(--on-accent); padding: clamp(1.25rem, 5vw, 2.25rem); display: grid; gap: 1.1rem; position: relative; overflow: hidden; border-radius: 3px; }
.note-card .frame { position: absolute; inset: 10px; border: 1px solid currentColor; opacity: 0.35; pointer-events: none; border-radius: 2px; }
.note-card .top { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0; opacity: 0.85; position: relative; }
.note-card .art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: center; position: relative; }
.note-card .paper { margin: 0; background: var(--surface); padding: 10px 10px 6px; border-radius: 2px; display: grid; gap: 4px; transform: rotate(1.2deg); box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.note-card .paper figcaption { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .note-card .art { grid-template-columns: 1fr; } .note-card .paper { max-width: 260px; justify-self: center; } }
.archetype { font-family: var(--display); font-size: clamp(2.6rem, 9vw, 3.8rem); line-height: 0.98; text-wrap: balance; }
.note-card .line { font-size: 1.05rem; line-height: 1.5; }
.note-card .serials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; border-top: 1px solid currentColor; padding-top: 0.8rem; position: relative; }
.note-card .serials > div { display: grid; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0; opacity: 0.9; min-width: 0; }
.note-card .serials b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; text-transform: none; }

.section-head { display: grid; gap: 0.4rem; }
.aha-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.aha { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.aha svg { width: 2.6rem; height: 2.6rem; }
.aha .tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0; color: var(--muted); }
.aha h3 { font-size: 1.35rem; margin: 0.15rem 0 0.4rem; }
.aha .src { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }

.bars { display: grid; gap: 1.1rem; }
.bar, .axis { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 2.6rem; gap: 0.9rem; align-items: center; }
.bar .lab { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.bar .val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.track { position: relative; height: 0.7rem; background: var(--surface); border: 1px solid var(--rule); }
.track .fill { position: absolute; inset: 0 auto 0 0; }
.track .tick { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--rule); }
.axis .ticks { position: relative; height: 1.2rem; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.axis .ticks span { position: absolute; transform: translateX(-50%); }
@media (max-width: 520px) { .bar, .axis { grid-template-columns: 6rem minmax(0, 1fr) 2.2rem; gap: 0.6rem; } .bar .lab { font-size: 0.92rem; } }

.habits { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.habit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); align-items: center; }
.habit .name { font-weight: 600; }
.habit .read { grid-column: 1 / -1; font-size: 0.92rem; color: var(--muted); }
.pips { display: flex; gap: 4px; }
.pips i { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid var(--muted); display: block; }
.pips i.on { background: var(--ink); border-color: var(--ink); }
.habit.good .pips i.on { background: var(--vigil); border-color: var(--vigil); }
.habit.flag .name::after { content: "Watch"; margin-left: 0.5rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0; padding: 0.1rem 0.4rem; border: 1px solid var(--status); color: var(--status); border-radius: 2px; vertical-align: 2px; }

.ledger { display: grid; gap: 0.55rem; }
.ledger div { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ledger dt { color: var(--muted); white-space: nowrap; font-size: 0.95rem; }
.ledger .lead { flex: 1; border-bottom: 1px dotted var(--rule); min-width: 1rem; transform: translateY(-4px); }
.ledger dd { margin: 0; font-weight: 600; text-align: right; }
.rewrite { border: 1px solid var(--rule); background: var(--surface); padding: 1.4rem; display: grid; gap: 0.7rem; border-radius: 2px; }
.rewrite .old { font-family: var(--display); font-size: 1.45rem; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--status); }
.rewrite .new { font-family: var(--display); font-size: 1.65rem; line-height: 1.2; }

.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 680px) { .plan { grid-template-columns: 1fr; } }
.plan .col { display: grid; gap: 0.6rem; align-content: start; }
.plan h4 { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0; color: var(--muted); font-weight: 500; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ink); }
.task { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.97rem; }
.task input { width: 1.1rem; height: 1.1rem; margin: 0.25rem 0 0; accent-color: var(--ink); }
.task input:checked + label { color: var(--muted); text-decoration: line-through; }

.dials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { border: 1px solid var(--ink); padding: 0.35rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.move { border-left: 3px solid var(--ink); padding-left: 1rem; display: grid; gap: 0.35rem; }
.move .step { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; color: var(--muted); }
.move strong { font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }

details.script { border-top: 1px solid var(--rule); padding: 1rem 0; }
details.script:last-child { border-bottom: 1px solid var(--rule); }
details.script summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; list-style: none; }
details.script summary::-webkit-details-marker { display: none; }
details.script summary h3 { display: flex; align-items: center; gap: 0.6rem; }
details.script summary::after { content: "+"; font-family: var(--mono); color: var(--muted); }
details.script[open] summary::after { content: "–"; }
.dd { display: grid; gap: 0.9rem; padding-top: 0.9rem; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cols h4 { margin: 0 0 0.3rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0; color: var(--muted); font-weight: 500; }
ul.clean { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }
.experts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 600px) { .experts { grid-template-columns: 1fr; } }
.expert { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.expert .who { font-family: var(--display); font-size: 1.35rem; line-height: 1.15; }
.expert .work { font-size: 0.85rem; color: var(--muted); font-style: italic; }
.expert .try { border-top: 1px dashed var(--rule); padding-top: 0.6rem; font-size: 0.95rem; }
.expert .try b { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0; font-weight: 500; color: var(--muted); display: block; }
.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); align-content: end; }
.calc .in { display: flex; align-items: center; gap: 0.4rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.2rem; color: var(--ink); font-family: var(--mono); }
.calc input { border: none; background: transparent; color: var(--ink); font-family: var(--display); font-size: 1.6rem; width: 100%; min-width: 0; padding: 0; }
.calc input:focus { outline: none; }
.calc .in:focus-within { border-color: var(--focus); }
.calc-out { display: grid; gap: 0.25rem; }
.calc-out .big { font-family: var(--display); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.foot { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: grid; gap: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.foot ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.toast { font-size: 0.9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
html:has(.quiz-page) { scroll-behavior: smooth; }
:where(.quiz-page) section[id] { scroll-margin-top: 3.5rem; }