/* Article page upgrade (7 Oct 2026) */
.ap-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1180px) { .ap-wrap.has-toc { grid-template-columns: minmax(0, 1fr) 230px; } }
.ap-toc { position: sticky; top: calc(var(--nav-h, 80px) + 24px); align-self: start; font-size: .86rem; border-left: 1px solid rgba(255,255,255,.08); padding-left: 1rem; }
.ap-toc b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: .6rem; }
.ap-toc a { display: block; color: #94a3b8; text-decoration: none; padding: .3rem 0; line-height: 1.35; border-left: 2px solid transparent; margin-left: calc(-1rem - 1px); padding-left: calc(1rem - 1px); }
.ap-toc a:hover { color: #e6edf3; }
.ap-toc a.on { color: #00ff88; border-left-color: #00ff88; }
@media (max-width: 1179px) { .ap-toc { display: none; } }

.ap-brief { margin: 0 0 2rem; padding: 1.2rem 1.3rem; border-radius: 14px; border: 1px solid rgba(0,255,136,.3);
  background: linear-gradient(135deg, rgba(0,255,136,.07), rgba(139,211,255,.04)); }
.ap-brief .k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #00ff88; }
.ap-brief p { margin: .45rem 0 .8rem; color: #e6edf3; line-height: 1.6; font-size: 1.02rem; }
.ap-brief ol { margin: 0; padding-left: 1.2rem; color: #94a3b8; font-size: .92rem; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 3), auto); column-gap: 2rem; }
.ap-brief li { margin: .2rem 0; break-inside: avoid; }
.ap-brief li a { color: #cbd5e1; text-decoration: none; }
.ap-brief li a:hover { color: #00ff88; }
@media (max-width: 700px) { .ap-brief ol { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }

.blog-content.ap { max-width: 74ch; }
.blog-content.ap h2 { counter-increment: aph; display: flex; gap: .7rem; align-items: baseline; scroll-margin-top: calc(var(--nav-h, 80px) + 24px); }
.blog-content.ap { counter-reset: aph; }
.blog-content.ap h2:not(#article-sources h2)::before { content: counter(aph, decimal-leading-zero); font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: #00ff88; font-weight: 600; }
.blog-content.ap > h2:first-of-type + p { font-size: 1.12rem; color: #e6edf3; }
.ap-cite { display: inline-flex; gap: .2rem; margin-left: .3rem; vertical-align: super; font-size: .68rem; }
.ap-cite a { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .25em; border-radius: 5px; background: rgba(139,211,255,.12);
  color: #8bd3ff !important; text-decoration: none !important; font-weight: 700; line-height: 1; }
.ap-cite a:hover { background: rgba(139,211,255,.25); }
#article-sources li:target { background: rgba(0,255,136,.08); border-radius: 6px; }

/* building blocks the new writer can use */
.blog-content .nm-short { margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-left: 3px solid #00ff88; background: rgba(0,255,136,.05); border-radius: 0 12px 12px 0; }
.blog-content .nm-short b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #00ff88; margin-bottom: .4rem; }
.blog-content .nm-short ul { margin: 0; padding-left: 1.1rem; }
.blog-content .nm-scene { font-size: 1.08rem; line-height: 1.7; color: #e6edf3; border-left: 2px solid rgba(255,255,255,.15); padding-left: 1rem; }
.blog-content .nm-scene em.lbl { display: block; font-style: normal; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: .3rem; }
.blog-content .nm-checklist { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .5rem; }
.blog-content .nm-checklist li { position: relative; padding: .6rem .8rem .6rem 2.3rem; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.02); }
.blog-content .nm-checklist li::before { content: ""; position: absolute; left: .8rem; top: .85rem; width: .9rem; height: .9rem; border: 2px solid #00ff88; border-radius: 4px; }
.blog-content .nm-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .93rem; }
.blog-content .nm-table-wrap { overflow-x: auto; }
.blog-content .nm-table th { text-align: left; color: #94a3b8; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.12); padding: .6rem .7rem; background: none; }
.blog-content .nm-table td { padding: .6rem .7rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; background: none !important; }
.blog-content .nm-code { position: relative; margin: 1rem 0 1.4rem; }
.blog-content .nm-code pre { margin: 0; padding: 1rem 1.1rem; border-radius: 10px; background: #05080c; border: 1px solid rgba(255,255,255,.08); overflow-x: auto; font-size: .86rem; line-height: 1.55; }
.blog-content .nm-code .lang { position: absolute; top: .45rem; right: 4.6rem; font: .7rem 'JetBrains Mono', monospace; color: #64748b; text-transform: uppercase; }
.blog-content .nm-code button { position: absolute; top: .4rem; right: .5rem; font-size: .75rem; padding: .25rem .6rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: #0d131b; color: #cbd5e1; cursor: pointer; }
.blog-content .nm-callout { margin: 1.2rem 0 1.4rem; padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid rgba(255,196,107,.4); background: rgba(255,196,107,.06); }
.blog-content .nm-callout b { display: block; color: #ffc46b; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.blog-content .nm-pull { margin: 1.8rem 0; padding: 0 0 0 1.2rem; border-left: 3px solid #00ff88; font-size: 1.3rem; line-height: 1.45; color: #f2f4f7; font-weight: 600; background: none; }

/* ties to the rest of the site */
.ap-ties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin: 2rem 0 0; }
.ap-tie { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.15rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: #111a24; color: inherit; text-decoration: none; }
a.ap-tie:hover, a.ap-tie:focus-visible { border-color: #00ff88; outline: none; }
.ap-tie .k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #00ff88; }
.ap-tie b { font-size: 1rem; line-height: 1.35; color: #f2f4f7; }
.ap-tie span { color: #94a3b8; font-size: .88rem; line-height: 1.5; }
.ap-tie .go { margin-top: auto; padding-top: .3rem; color: #8bd3ff; font-weight: 700; font-size: .86rem; }
.ap-tie .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; box-shadow: 0 0 10px currentColor; }
.ap-tie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.ap-tie ul a { color: #e6edf3; text-decoration: none; font-size: .9rem; line-height: 1.4; }
.ap-tie ul a:hover { color: #00ff88; }
.ap-tie[hidden] { display: none; }
#article-sources li[hidden] { display: none; }
#article-sources ol[data-note]::after { content: attr(data-note); display: block; margin-top: .4rem; color: #64748b; font-size: .82rem; }
.ap-apply a { color: #00ff88 !important; font-weight: 700; }
.ap-cite-row { font-size: .85rem; color: #94a3b8; margin: -.4rem 0 1.2rem; }