/* Pillar pages: detailed pillar content (js/pages/pillar.js) and the
   schematic pillar figures (js/pillar-visuals.js). The figures reuse the
   robot's drafting classes from components.css (.robot-line, .robot-draw,
   .robot-dim, .robot-chalk, .robot-float, .robot-ping); everything here is
   prefixed pp- (page) or pf- (figure). Tokens only. */

/* ===== Schematic pillar figures ===== */
.pf { display: block; width: 100%; height: auto; overflow: visible; }
.pf-fig { fill: var(--draft-dim); font-family: var(--font-mono); font-size: 9px; }
.pf-note { fill: var(--draft-dim); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; }
.pf-leader { fill: none; stroke: var(--draft-dim); stroke-width: 1; }
.pf .robot-dim { fill: none; }
.pf-leader-dot { fill: var(--draft-dim); }
.pf-dash { stroke-dasharray: 3 4; }
.pf-hatch line, .pf-ticks line { stroke: var(--draft-dim); stroke-width: 1; }
.pf-route { fill: none; stroke: var(--draft); stroke-width: 1.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.pf-notes { opacity: 0; animation: pfFade 0.6s ease forwards 1.7s; }
.pf-pop, .pf-fadein { opacity: 0; animation: pfFade 0.5s ease forwards; animation-delay: var(--d, 0s); }
.pf-pop.robot-ping { animation: robotPing 2.6s infinite; animation-delay: var(--d, 0s); }
@keyframes pfFade { to { opacity: 1; } }

/* The one gentle loop per figure */
.pf-flow { fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 11; opacity: 0;
    animation: pfFade 0.5s ease forwards 2.2s, pfFlow 1.3s linear infinite 2.2s; }
@keyframes pfFlow { to { stroke-dashoffset: -14; } }
.pf-spin { transform-box: fill-box; transform-origin: center; animation: pfSpin var(--spin, 30s) linear infinite; }
.pf-spin-rev { animation-direction: reverse; }
@keyframes pfSpin { to { transform: rotate(360deg); } }
.pf-sway { animation: pfSway 6.5s ease-in-out infinite alternate 2s; }
@keyframes pfSway { from { transform: rotate(-9deg); } to { transform: rotate(12deg); } }
.pf-twinkle { animation: pfTwinkle 3.4s ease-in-out infinite 2.2s; }
@keyframes pfTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.16) rotate(10deg); } }
.pf-scan { stroke: var(--chalk); stroke-width: 1.5; opacity: 0; animation: pfScan 4.8s ease-in-out infinite alternate 2s; }
@keyframes pfScan { from { opacity: 0.5; transform: translateY(0); } to { opacity: 0.5; transform: translateY(170px); } }

@media (prefers-reduced-motion: reduce) {
    .pf-flow, .pf-scan { display: none; }
    .pf-spin, .pf-sway, .pf-twinkle { animation: none; }
    .pf-notes, .pf-pop, .pf-fadein, .pf-pop.robot-ping { animation: none; opacity: 1; }
}

/* Mini figures: static icons in the map, the navigation cards */
.pf-mini { width: 100%; height: 100%; overflow: hidden; }
.pf-mini * { animation: none !important; }
.pf-mini .robot-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
.pf-mini .pf-pop, .pf-mini .pf-fadein { opacity: 1; }
.pf-mini .pf-flow, .pf-mini .pf-scan, .pf-mini .pf-leader, .pf-mini .pf-hatch,
.pf-mini .pf-ticks, .pf-mini .robot-dim { display: none; }
.pf-mini .robot-line, .pf-mini .pf-route { vector-effect: non-scaling-stroke; stroke-width: 1.4; }

/* ===== Hero ===== */
@media (min-width: 900px) { .pp-hero .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.pp-tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1875rem, 0.8vw + 1rem, 1.5rem); line-height: 1.3;
    color: var(--chalk); margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: 620px; }
.pp-hero .hero-sub { margin-bottom: var(--s5); }
.pp-jump { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.pp-jump[hidden] { display: none; }
.pp-jump a { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.9375rem; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px dashed var(--draft-faint); padding: 2px 0; }
.pp-jump a::before { content: "\2193"; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--chalk); }
.pp-jump a:hover { color: var(--draft); text-decoration: none; border-bottom-color: var(--draft); }
.pp-figure { justify-self: center; width: min(300px, 72vw); }
@media (max-width: 899px) { .pp-figure { width: min(250px, 64vw); margin-top: var(--s2); } }

/* Header map slot: the compact AI Transformation Architecture
   (js/architecture.js, styled in css/architecture.css) */
.pp-sheets { position: relative; z-index: 2; margin-top: var(--s7); padding-top: var(--s4); border-top: 1px dashed var(--draft-faint); }
@media (max-width: 759px) { .pp-sheets { margin-top: var(--s6); } }
/* Reserved while the figure draws (no header jump, QA review 8 Oct 2026). */
.pp-figure:empty { min-height: 300px; }
@media (max-width: 899px) { .pp-figure:empty { min-height: 250px; } }

/* ===== Shared bits ===== */
.pp-label { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s3); line-height: 1.4; }

/* ===== A: What it is ===== */
.pp-split { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .pp-split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s8); align-items: start; } }
.pp-lead { font-size: 1.25rem; line-height: 1.55; color: var(--text); max-width: 680px; margin-bottom: var(--s4); }
.pp-body { color: var(--text-muted); max-width: 680px; }
.pp-what-main .pp-label { margin-top: var(--s6); }
.pp-covers { list-style: none; display: grid; gap: var(--s4) var(--s5); }
@media (min-width: 600px) { .pp-covers { grid-template-columns: 1fr 1fr; } }
.pp-covers li { border-top: 2px solid var(--draft); padding-top: var(--s3); display: grid; gap: 2px; }
.pp-covers strong { font-family: var(--font-display); font-size: 1.0625rem; color: var(--draft); line-height: 1.3; }
.pp-covers span { color: var(--text-muted); font-size: 0.9375rem; }
.pp-contrast { display: grid; gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 600px) { .pp-contrast { grid-template-columns: 1fr 1fr; } }
.pp-contrast > div { border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s4); background: var(--field-raised); }
.pp-contrast > div .pp-label { margin: 0 0 var(--s2); display: flex; align-items: center; gap: var(--s2); }
.pp-contrast > div .pp-label::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--draft); flex: none; }
.pp-contrast-strong .pp-label::before { background: var(--draft); }
.pp-contrast-weak { border-style: dashed !important; background: transparent !important; }
.pp-contrast p { font-size: 0.9375rem; color: var(--text); }
.pp-insight { margin-top: var(--s6); border-left: 3px solid var(--chalk); padding: var(--s1) 0 var(--s1) var(--s5); max-width: 680px; }
.pp-what-main .pp-insight .pp-label { margin-top: 0; color: var(--chalk); }
.pp-insight p { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--draft); }

.pp-panel { position: relative; background: var(--field-raised); border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s5); }
.pp-panel::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px;
    border-top: 2px solid var(--chalk); border-left: 2px solid var(--chalk); }
.pp-panel + .pp-panel { margin-top: var(--s4); }
.pp-key-q { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.35; color: var(--draft); margin-bottom: var(--s5); }
.pp-questions { list-style: none; counter-reset: ppq; display: grid; gap: var(--s3); }
.pp-questions li { counter-increment: ppq; display: grid; grid-template-columns: 30px minmax(0, 1fr); font-size: 0.9375rem; line-height: 1.5; }
.pp-questions li::before { content: "Q" counter(ppq); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--chalk); padding-top: 3px; }
.pp-panel-hk p { font-size: 0.9375rem; color: var(--text); }
.pp-panel-link { display: inline-block; margin-top: var(--s3); font-weight: 700; font-size: 0.9375rem; }
@media (min-width: 960px) { .pp-what-aside { position: sticky; top: calc(var(--nav-h) + var(--s4)); } }

/* ===== B: Who it involves (task force as a drafted org chart) ===== */
.pp-org { margin-top: var(--s5); }
.pp-org-root { display: inline-grid; gap: 2px; border: 1.5px solid var(--chalk); border-radius: var(--r-card); padding: var(--s3) var(--s5); background: var(--field-deep); }
.pp-org-root .mono { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk); }
.pp-org-root strong { font-family: var(--font-display); font-size: 1.1875rem; color: var(--draft); line-height: 1.25; }
.pp-org-roles { list-style: none; position: relative; margin-left: 18px; padding-left: 26px; }
.pp-org-role { position: relative; padding-top: var(--s3); }
.pp-org-role::before { content: ""; position: absolute; left: -26px; top: 0; bottom: 0; border-left: 1px solid var(--draft-dim); }
.pp-org-role:last-child::before { bottom: auto; height: calc(var(--s3) + 24px); }
.pp-org-role::after { content: ""; position: absolute; left: -26px; top: calc(var(--s3) + 24px); width: 26px; border-top: 1px solid var(--draft-dim); }
.pp-role { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); align-items: baseline;
    background: rgba(23, 70, 111, 0.55); border: 1px solid var(--draft-faint); border-radius: var(--r-card); padding: var(--s3) var(--s4); height: 100%; }
.pp-role-idx { grid-row: span 2; font-size: 0.75rem; color: var(--chalk); }
.pp-role strong { color: var(--draft); font-size: 1rem; line-height: 1.35; }
.pp-role-does { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
@media (min-width: 1000px) {
    .pp-org { display: grid; justify-items: center; }
    .pp-org-roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); width: 100%; margin: 0; padding: 32px 0 0; }
    .pp-org-roles::before { content: ""; position: absolute; top: 16px; left: calc(10% - 6.4px); right: calc(10% - 6.4px); border-top: 1px solid var(--draft-dim); }
    .pp-org-roles::after { content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 1px solid var(--draft-dim); }
    .pp-org-role { padding-top: 0; }
    .pp-org-role::before, .pp-org-role:last-child::before { left: 50%; top: -16px; bottom: auto; height: 16px; }
    .pp-org-role::after { display: none; }
    .pp-role { grid-template-columns: 1fr; align-content: start; padding: var(--s4); }
    .pp-role-idx { grid-row: auto; }
}

/* ===== C: What to do first ===== */
.pp-start { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .pp-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s8); } }
.pp-steps { list-style: none; display: grid; gap: var(--s5); }
.pp-steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.pp-steps li:not(:last-child)::before { content: ""; position: absolute; left: 24px; top: 48px; bottom: calc(-1 * var(--s5)); border-left: 1px dashed var(--draft-dim); }
.pp-step-num { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--draft); border-radius: var(--r-card);
    font-size: 1rem; font-weight: 700; color: var(--draft); background: var(--field-raised); }
.pp-steps li:first-child .pp-step-num { border-color: var(--chalk); color: var(--chalk); background: var(--chalk-tint); }
.pp-steps strong { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; color: var(--draft); margin-top: 2px; }
.pp-steps p { color: var(--text-muted); font-size: 0.9375rem; }
.pp-pitfalls { list-style: none; border-top: 1px dashed var(--draft-faint); }
.pp-pitfalls li { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: var(--s3) 0; border-bottom: 1px dashed var(--draft-faint); font-size: 0.9375rem; line-height: 1.5; }
.pp-pitfalls li::before { content: "\00D7"; width: 20px; height: 20px; display: grid; place-items: center; margin-top: 1px;
    font-family: var(--font-mono); font-weight: 700; font-size: 0.9375rem; line-height: 1; color: var(--pencil-red); background: var(--pencil-red-tint); border-radius: var(--r-card); }
.pp-quote { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px dashed var(--draft-faint); max-width: 880px; }
.pp-quote blockquote { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: -0.01em; color: var(--draft); }
.pp-quote blockquote::before { content: "\201C"; color: var(--chalk); margin-right: 2px; }
.pp-quote blockquote::after { content: "\201D"; color: var(--chalk); margin-left: 2px; }
.pp-quote figcaption { margin-top: var(--s3); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* ===== D: How it connects (the schematic map) ===== */
.pp-role-plate { display: grid; gap: var(--s1); max-width: 780px; margin-bottom: var(--s7); padding: var(--s4) var(--s5);
    border: 1px solid var(--draft-dim); border-radius: var(--r-card); background: rgba(12, 46, 81, 0.5); }
.pp-role-plate .mono { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk); }
.pp-role-plate strong { font-family: var(--font-display); font-size: 1.1875rem; color: var(--draft); }
.pp-role-plate p { color: var(--text-muted); }

.pp-map { position: relative; display: grid; gap: var(--s5); padding-left: 26px; }
.pp-wires { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 0; max-width: none; }
.pp-wire { fill: none; stroke: var(--draft-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-wire-peer { stroke-dasharray: 4 5; }
.pp-wire-head { fill: none; stroke: var(--draft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-wire-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: robotDraw 0.8s ease forwards; animation-delay: var(--d, 0s); }
.pp-wire-fade { opacity: 0; animation: pfFade 0.4s ease forwards; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
    .pp-wire-draw { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
    .pp-wire-fade { animation: none; opacity: 1; }
}
.pp-lane { position: relative; z-index: 1; display: grid; gap: var(--s3); align-content: center; min-width: 0; }
.pp-lane-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.pp-node { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: center;
    padding: var(--s3); border: 1px solid var(--draft-faint); border-radius: var(--r-card); background: var(--field-deep); color: var(--text); }
a.pp-node:hover { text-decoration: none; border-color: var(--draft); }
a.pp-node:hover::after { content: ""; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 2px solid var(--chalk); border-left: 2px solid var(--chalk); }
a.pp-node:hover .pf-mini .robot-line:not(.robot-chalk) { stroke: var(--chalk); }
.pp-node-fig { width: 44px; height: 44px; display: block; }
.pp-node-body { min-width: 0; }
.pp-node-name { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--draft); }
.pp-node-name .mono { font-size: 0.75rem; color: var(--chalk); margin-right: 6px; }
.pp-node-why { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }
.pp-node-end { border-style: dashed; background: rgba(12, 46, 81, 0.5); }
.pp-lane-along .pp-node { border-style: dashed; }
.pp-along-row { display: grid; gap: var(--s3); }
.pp-self { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s2); padding: var(--s5) var(--s4);
    text-align: center; border: 1.5px solid var(--chalk); border-radius: var(--r-card); background: var(--field-deep); }
.pp-self-fig { width: 84px; height: 84px; display: block; }
.pp-self-tag { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chalk); }
.pp-self strong { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; color: var(--draft); }
.pp-map-note { margin-top: var(--s5); }
@media (min-width: 900px) {
    .pp-map { padding-left: 0; grid-template-columns: minmax(0, 1fr) minmax(180px, 210px) minmax(0, 1fr);
        grid-template-areas: "up self down" "along along along"; column-gap: 76px; row-gap: var(--s7); align-items: center; }
    .pp-lane-up { grid-area: up; }
    .pp-self { grid-area: self; }
    .pp-lane-down { grid-area: down; }
    .pp-lane-along { grid-area: along; }
    .pp-along-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin-top: var(--s5); }
    .pp-along-row .pp-node { width: min(300px, 100%); }
}

/* ===== Go further ===== */
.pp-more { align-items: stretch; }
.pp-scale { display: grid; gap: 6px; margin: var(--s1) 0 var(--s2); }
.pp-scale-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pp-scale-bar i { display: block; height: 10px; border: 1px solid var(--draft-dim); border-radius: 1px; }
.pp-scale-bar i:nth-child(2) { background: var(--draft-faint); }
.pp-scale-bar i:nth-child(3) { background: var(--draft-dim); }
.pp-scale-bar i:nth-child(4) { background: var(--draft); opacity: 0.8; }
.pp-scale-bar i:nth-child(5) { background: var(--chalk); border-color: var(--chalk); }
.pp-scale-ends { display: flex; justify-content: space-between; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pp-case-list { list-style: none; border-top: 1px dashed var(--draft-faint); }
.pp-case-list li { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px dashed var(--draft-faint); }
.pp-case-title { font-weight: 700; color: var(--draft); line-height: 1.35; }
a.pp-case-title { color: var(--link); }
.pp-case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pp-case-signin { padding: 0; font-size: 0.875rem; }
.pp-case-note { font-size: 0.875rem; color: var(--text-muted); }
.pp-nav { margin-top: var(--s7); }
.pp-navcard { padding-right: calc(var(--s5) + 56px); min-height: 104px; justify-content: center; }
.pp-navcard-fig { position: absolute; right: var(--s4); top: 50%; width: 48px; height: 48px; transform: translateY(-50%); }
.pp-assess .badge { align-self: flex-start; }
@media (max-width: 899px) {
    .pp-self { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: var(--s4); row-gap: 2px; padding: var(--s4); }
    .pp-self-fig { width: 64px; height: 64px; grid-row: span 2; }
    .pp-self-tag { align-self: end; }
    .pp-self strong { align-self: start; }
}