/* Reading components: numbered sections, callouts, approaches, quiz, hero. Works in both themes.
 *
 * Authoring (inside a post body):
 *   <aside class="co co-what"><b>What is X?</b><p>...</p></aside>
 *     kinds: co-what, co-short (the short answer), co-learn (ul = checklist), co-radar (where it gets hard),
 *            co-tip, co-watch, co-slip (where it goes wrong), co-below (out of scope, ul), co-pattern, co-real (in the real code), co-try
 *   <div class="board"><b>On the board so far</b><pre>plain text</pre></div>
 *   <details class="ap ap-naive"><summary>Write straight to main</summary><p>...</p></details>   (ap-naive | ap-solid | ap-best)
 *   <div class="quiz" data-answer="2"><p>Question?</p><ol><li>A</li><li>B</li><li>C</li><li>D</li></ol><div class="quiz__why">Why B is right.</div></div>
 *     data-answer is 1-based.
 */
.post { counter-reset: sec; }
.post > h2 { display: flex; align-items: baseline; gap: 14px; padding-top: 1.3em; border-top: 1px solid var(--line); }
.post > h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); flex: none; font: 600 15px/1 var(--mono); color: var(--accent); }
.toc ol { counter-reset: tsec; }
.toc li.l2 > a::before { counter-increment: tsec; content: counter(tsec, decimal-leading-zero) "  "; font: 500 11px/1 var(--mono); color: var(--muted); white-space: pre; }

/* callouts */
.co { --c: #8b95ff; margin: 1.8em 0; padding: 16px 18px; border: 1px solid color-mix(in oklab, var(--c) 40%, var(--line)); border-radius: 14px; background: color-mix(in oklab, var(--c) 7%, var(--surface)); font-size: 16px; line-height: 1.65; }
.co > b:first-child { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.co > b:first-child::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in oklab, var(--c) 22%, transparent) var(--ico, none) center/14px no-repeat; }
.co p { margin: .5em 0 0; max-width: none; }
.co > b + p { margin-top: 0; }
.co ul, .co ol { margin: .4em 0 0; padding-left: 1.2em; }
.co li { margin: .3em 0; }
.co-what { --c: #8b95ff; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.co-short { --c: #8b95ff; border-left-width: 4px; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13V9M9 2h6'/%3E%3C/svg%3E"); }
.co-short p { color: var(--ink); }
.co-learn { --c: #3ddc97; background: var(--surface); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc97' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.co-learn ul { list-style: none; padding: 0; }
.co-learn li { position: relative; padding-left: 26px; }
.co-learn li::before { content: ""; position: absolute; left: 0; top: .34em; width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid #3ddc97; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc97' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat; }
.co-radar { --c: #8b95ff; background: var(--surface); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95ff' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E"); }
.co-tip { --c: #3ddc97; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc97' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9V16h7v-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.co-watch { --c: #ff9f43; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.co-slip { --c: #ff5d6c; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5d6c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.co-below { --c: #7b86a0; background: var(--surface); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b86a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E"); }
.co-below ul { font-size: 15px; }
.co-below li::marker { color: #ff7a1a; }
.co-pattern { --c: #b18cff; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b18cff' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.co-real { --c: #5b8cff; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b8cff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E"); }
.co-try { --c: #ff7a1a; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11-3-3L5 16z'/%3E%3C/svg%3E"); }

/* on the board so far */
.board { margin: 1.8em 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.board > b { display: flex; align-items: center; gap: 9px; padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.board > b::before { content: ""; width: 18px; height: 18px; border-radius: 6px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95ff' stroke-width='2.4'%3E%3Crect x='4' y='5' width='16' height='12' rx='2'/%3E%3Cpath d='M9 21h6'/%3E%3C/svg%3E") center/12px no-repeat; }
.post .board pre { margin: 0; padding: 14px 16px; background: var(--code-bg); color: var(--code-ink); font: 400 13px/1.7 var(--mono); overflow-x: auto; white-space: pre; border: 0; border-radius: 0; }

/* naive / solid / chosen approaches */
.ap { margin: .8em 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ap summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 620; font-size: 15.5px; color: var(--ink); }
.ap summary::-webkit-details-marker { display: none; }
.ap summary::before { flex: none; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; }
.ap summary::after { content: "+"; margin-left: auto; color: var(--muted); font: 400 20px/1 var(--mono); }
.ap[open] summary::after { content: "\2212"; }
.ap > :not(summary) { margin-left: 16px; margin-right: 16px; }
.ap[open] { padding-bottom: 8px; }
.ap-naive summary::before { content: "Naive"; color: #ff5d6c; background: rgb(255 93 108 / .12); }
.ap-solid summary::before { content: "Better"; color: #ff9f43; background: rgb(255 159 67 / .14); }
.ap-best summary::before { content: "Chosen"; color: #2fbf80; background: rgb(61 220 151 / .14); }
.ap-naive { border-color: rgb(255 93 108 / .35); } .ap-solid { border-color: rgb(255 159 67 / .38); } .ap-best { border-color: rgb(61 220 151 / .45); }

/* quiz */
.quiz { margin: 1.4em 0; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--surface); }
.quiz > p:first-child { margin: 0 0 12px; font-weight: 620; color: var(--ink); max-width: none; }
.quiz > p:first-child::before { content: "Question"; display: block; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.post .quiz ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: opt; }
.post .quiz li { margin: 0; padding: 0; }
.quiz li button { counter-increment: opt; width: 100%; text-align: left; display: flex; gap: 12px; align-items: flex-start; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.quiz li button::before { content: counter(opt, upper-alpha); flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 600 12px/1 var(--mono); background: var(--surface-2); color: var(--muted); }
.quiz li button:hover:not([disabled]) { border-color: var(--accent); }
.quiz li button[disabled] { cursor: default; }
.quiz li button.is-right { border-color: #3ddc97; background: rgb(61 220 151 / .1); color: var(--ink); }
.quiz li button.is-right::before { background: #3ddc97; color: #0b0c0e; }
.quiz li button.is-wrong { border-color: #ff5d6c; background: rgb(255 93 108 / .08); }
.quiz li button.is-wrong::before { background: #ff5d6c; color: #0b0c0e; }
.quiz__why { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.quiz.is-done .quiz__why { display: block; }
.quiz__show { margin-top: 10px; font: 600 13px/1 var(--font); color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.quiz-score { font: 600 13px/1.4 var(--mono); color: var(--muted); margin: 1em 0 0; }

/* isometric hero, generated at build time from the post's "hero" spec */
.post-hero { margin: 32px 0 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #0c0e15; }
.post-hero svg { display: block; width: 100%; height: auto; }
.card__cover--hero { background: #0c0e15; overflow: hidden; }
.card__cover--hero svg { width: 100%; height: 100%; display: block; }