/* Shared styles for the standalone tool pages (pathways.html, quiz.html). Depends on nocturne.css tokens. */
body.page { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif); line-height: 1.55; }
.page-wrap { max-width: 880px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 72px; }
.page-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.page-top .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading, inherit); font-weight: 600; font-size: 17px; color: var(--color-text); text-decoration: none; }
.page-top .brand i { color: var(--color-accent); font-size: 18px; }
.page-top nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.page-top nav a { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); text-decoration: none; padding: 7px 10px; border-radius: 7px; }
.page-top nav a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.page-top nav a[aria-current="page"] { color: var(--color-accent-200, #d2cefd); background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.page h1 { font-size: clamp(25px, 3vw, 33px); letter-spacing: -0.02em; margin: 26px 0 6px; }
.page .lede { margin: 0 0 18px; font-size: 15px; max-width: 64ch; color: color-mix(in srgb, var(--color-text) 74%, transparent); text-wrap: pretty; }
.page .eyebrow { font-family: var(--font-heading, inherit); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.page .teaching { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #fcd9a8; border: 1px dashed rgba(252,217,168,.55); border-radius: 6px; padding: 5px 10px; margin: 4px 0 18px; }
.page .card { background: var(--color-surface); border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md, 10px); padding: 18px 20px; box-shadow: var(--shadow-sm, none); }
.page .btn { font: inherit; font-size: 14px; color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent); border: 1px solid var(--color-neutral-800); border-radius: 9px; padding: 10px 14px; cursor: pointer; text-align: left; transition: background .12s ease, border-color .12s ease; }
.page .btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: var(--color-accent-700, #5b4fb0); }
.page .btn.primary { color: var(--color-accent-200, #d2cefd); background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent-700, #5b4fb0); }
.page .btn.small { font-size: 12.5px; padding: 6px 10px; }
.page .btn[aria-pressed="true"] { color: var(--color-accent-200, #d2cefd); box-shadow: inset 0 0 0 1px var(--color-accent); border-color: var(--color-accent); }
.page .btn:disabled { opacity: .45; cursor: default; }
.page a.view-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-accent-200, #d2cefd); text-decoration: none; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--color-accent-700, #5b4fb0); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.page a.view-link:hover { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.page a.view-link code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.06em; opacity: .75; }
.page .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page .muted { color: var(--color-neutral-500, #8a8d99); font-size: 13px; }
.page .note { margin-top: 36px; padding: 14px 16px; border: 1px solid var(--color-neutral-800); border-radius: 8px; font-size: 12.5px; color: var(--color-neutral-500, #8a8d99); }
.page .note a { color: var(--color-accent); }
.page :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--color-neutral-800); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--color-neutral-500, #8a8d99); }
@media (max-width: 600px) { .page-top nav { margin-left: 0; width: 100%; } .page .card { padding: 14px 14px; } }
.page .skip { position: absolute; left: 8px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--color-accent); color: #161826; font-size: 13px; text-decoration: none; }
.page .skip:focus { top: 8px; }