/* PROTOTYPE — pieofmind.work home on the landing-A stage. Only h-* classes live here; the stage, nav, rail and
   copy overlays come from /prototype/landing/a-base.css, the 012 primitives from pa-ui.css. */

.h-root .a-spacer { height: 180vh; }
.h-root .a-spacer[data-ch="hero"] { height: 130vh; }
.h-root .a-spacer[data-ch="stuck"] { height: 200vh; }
.h-root .a-spacer[data-ch="join"] { height: 150vh; }

/* long chapters: overlay never taller than the viewport, scrolls inside (Lenis lets go via data-lenis-prevent) */
.h-root .a-copy--left, .h-root .a-copy--right { max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; padding: 4px 6px 4px 0; }
.h-root .a-copy--left::-webkit-scrollbar, .h-root .a-copy--right::-webkit-scrollbar { display: none; }
.h-w560 { max-width: 560px !important; } .h-w600 { max-width: 600px !important; } .h-w620 { max-width: 620px !important; }
.h-w640 { max-width: 640px !important; } .h-w660 { max-width: 660px !important; }
.h-root .a-copy h2.h-h2s { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.14; letter-spacing: -.02em; }
.h-root .a-copy p + p { margin-top: 12px; }
.h-p { font-size: 15.5px !important; }
.h-note { font-family: var(--pa-font-mono); font-size: var(--pa-fs-sm) !important; color: var(--pa-ink-3) !important; margin-top: 16px !important; max-width: 60ch !important; }
.h-link { display: inline-block; margin-top: 16px; padding: 6px 0; color: var(--pa-link); text-decoration: none; font-size: var(--pa-fs-md); border-bottom: 1px solid color-mix(in oklch, var(--pa-link) 40%, transparent); }
.h-link:hover { border-color: var(--pa-link); }
.h-left { justify-content: flex-start; margin-top: 20px; }

/* ── hero ── */
.h-trinity { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px !important; max-width: none !important; }
.h-trinity span { font: var(--pa-fs-xs) var(--pa-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pa-ink-2);
  padding: 5px 10px; border-radius: var(--pa-r-pill); border: var(--pa-bw) solid var(--pa-line); background: var(--pa-tint-1); }
.h-trinity span:nth-child(2) { color: var(--pa-link); border-color: color-mix(in oklch, var(--pa-link) 40%, transparent); }
.h-wordmark { font-size: clamp(64px, 8.4vw, 136px); }
.h-wordmark i { font-style: normal; color: var(--pa-ink-3); font-weight: 600; }
.h-sub { font-size: clamp(18px, 1.8vw, 24px) !important; color: var(--pa-ink) !important; font-weight: 600; margin: 18px auto 0 !important; max-width: 40ch !important; text-wrap: balance; }
.h-root .a-hero-sub { margin: 10px auto 18px !important; }
.h-acr { display: flex; gap: 4px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.h-acr span { display: flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: var(--pa-r-s); background: var(--pa-tint-1); border: var(--pa-bw) solid var(--pa-line); font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.h-acr b { font: 700 var(--pa-fs-md) var(--pa-font-mono); color: var(--pa-link); }
.h-proof { margin: 18px auto 0 !important; font-size: var(--pa-fs-sm) !important; color: var(--pa-ink-3) !important; max-width: 70ch !important; }

/* ── reframe: crossed-out belief → real reason ── */
.h-no { color: var(--pa-ink-3) !important; text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--pa-st-error) 70%, transparent); text-decoration-thickness: 1.5px; }
.h-yes { color: var(--pa-ink) !important; margin-top: 4px !important; }
.h-mono { margin: 18px 0; padding: 14px 16px; display: grid; gap: 6px; border-radius: var(--pa-r-m); }
.h-mono span { font: var(--pa-fs-sm) var(--pa-font-mono); color: var(--pa-ink-3); }
.h-mono span:last-child { color: var(--pa-st-attention); }

/* ── gap: 2 ruts ── */
.h-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.h-path { padding: 16px; border-radius: var(--pa-r-m); }
.h-path b { display: block; font: 600 var(--pa-fs-xs) var(--pa-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pa-st-attention); margin-bottom: 10px; }
.h-path--deep b { color: var(--pa-st-error); }
.h-path ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h-path li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: var(--pa-fs); line-height: 1.45; color: var(--pa-ink-2); }
.h-path em { font: normal var(--pa-fs-sm) var(--pa-font-mono); color: var(--pa-ink-3); }
.h-path li:last-child { color: var(--pa-ink); }

/* ── pipoo ── */
.h-seq { display: flex; gap: 6px; margin: 18px 0; }
.h-seq span { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--pa-r-m); background: var(--pa-float-bg); border: var(--pa-bw) solid var(--pa-line); }
.h-seq b { font: 800 26px var(--pa-font-ui); color: var(--pa-link); }
.h-seq i { font-style: normal; font-size: var(--pa-fs-xs); color: var(--pa-ink-2); }
.h-seq span:first-child, .h-seq span:last-child { border-color: color-mix(in oklch, var(--pa-link) 45%, transparent); }

/* ── human × AI: who owns which step ── */
.h-map { margin: 18px 0 0; padding: 4px; border-radius: var(--pa-r-m); display: grid; gap: 2px; }
.h-map > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: var(--pa-r-s); --own: var(--pa-link); }
.h-map > div:hover { background: var(--pa-tint-2); }
.h-own--shared { --own: var(--pa-ink) !important; }
.h-own--ai { --own: var(--pa-st-attention) !important; }
.h-map .k b { font: 700 var(--pa-fs-md) var(--pa-font-mono); color: var(--own); margin-right: 6px; }
.h-map .k i { font-style: normal; font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.h-map .who { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--own); }
.h-map .d { font-size: var(--pa-fs); color: var(--pa-ink-2); line-height: 1.45; }

/* ── self-diagnosis ── */
.h-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 18px 0 10px; border-radius: var(--pa-r-m); background: var(--pa-tint-1); border: var(--pa-bw) solid var(--pa-line); }
.h-tabs button { font: 500 var(--pa-fs) var(--pa-font-ui); color: var(--pa-ink-2); background: none; border: 0; padding: 7px 14px; border-radius: var(--pa-r-s); cursor: pointer; transition: background var(--pa-dur-1) var(--pa-ease), color var(--pa-dur-1); }
.h-tabs button:hover { color: var(--pa-ink); }
.h-tabs button.on { background: var(--pa-accent); color: var(--pa-on-accent); }
.h-diag { padding: 4px; border-radius: var(--pa-r-m); display: grid; gap: 2px; }
.h-diag[hidden] { display: none; }
.h-diag details { border-radius: var(--pa-r-s); }
.h-diag details[open] { background: var(--pa-tint-1); }
.h-diag summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; font-size: var(--pa-fs-md); color: var(--pa-ink); border-radius: var(--pa-r-s); }
.h-diag summary::-webkit-details-marker { display: none; }
.h-diag summary:hover { background: var(--pa-tint-2); }
.h-diag summary b { font: 700 var(--pa-fs-md) var(--pa-font-mono); color: var(--pa-link); width: 14px; flex: none; }
.h-diag summary::after { content: "+"; margin-left: auto; font-family: var(--pa-font-mono); color: var(--pa-ink-3); }
.h-diag details[open] summary::after { content: "−"; }
.h-diag .q { margin: 0 12px 0 38px !important; font-size: var(--pa-fs) !important; color: var(--pa-ink-2) !important; font-style: italic; }
.h-diag dl { margin: 4px 12px 12px 38px; display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: var(--pa-fs); line-height: 1.45; }
.h-diag dt { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); padding-top: 2px; }
.h-diag dd { margin: 0; color: var(--pa-ink-2); }
.h-diag dd.fix { color: var(--pa-ink); }

/* ── sofa: before / after ── */
.h-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h-cmp > div { padding: 14px 16px; border-radius: var(--pa-r-m); display: grid; gap: 8px; align-content: start; }
.h-cmp em { font: normal var(--pa-fs-xs) var(--pa-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--pa-ink-3); }
.h-cmp b { font-weight: 500; font-size: var(--pa-fs-lg); line-height: 1.45; color: var(--pa-ink-2); }
.h-cmp small { font-size: var(--pa-fs-sm); color: var(--pa-ink-3); line-height: 1.4; }
.h-cmp > .on { border-color: color-mix(in oklch, var(--pa-link) 50%, transparent); }
.h-cmp > .on em { color: var(--pa-link); }
.h-cmp > .on b { color: var(--pa-ink); }
.h-flow { margin-top: 10px; padding: 4px; border-radius: var(--pa-r-m); display: grid; gap: 2px; }
.h-flow > div { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 12px; padding: 9px 12px; border-radius: var(--pa-r-s); font-size: var(--pa-fs); line-height: 1.4; }
.h-flow > div:hover { background: var(--pa-tint-2); }
.h-flow .k b { font: 700 var(--pa-fs-md) var(--pa-font-mono); color: var(--pa-link); margin-right: 6px; }
.h-flow .k i { font-style: normal; font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.h-flow .qq { color: var(--pa-ink-3); }
.h-flow .d { color: var(--pa-ink); }

/* ── applications ── */
.h-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.h-apps > div { padding: 16px; border-radius: var(--pa-r-m); display: grid; gap: 8px; align-content: start; transition: border-color var(--pa-dur-2) var(--pa-ease), transform var(--pa-dur-2) var(--pa-ease); }
.h-apps > div:hover { border-color: color-mix(in oklch, var(--pa-link) 45%, transparent); transform: translateY(-2px); }
.h-apps em { font: normal var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-link); }
.h-apps small { border-top: 0 !important; padding-top: 0 !important; }
.h-apps b { font-size: var(--pa-fs-lg); font-weight: 600; color: var(--pa-ink); }
.h-apps span { font-size: var(--pa-fs); line-height: 1.5; color: var(--pa-ink-2); }
.h-apps small { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); padding-top: 8px; border-top: var(--pa-bw) solid var(--pa-line); }

/* ── KALIX numbers ── */
.h-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 4px; }
.h-stats > div { padding: 14px 16px; border-radius: var(--pa-r-m); background: var(--pa-float-bg); border: var(--pa-bw) solid var(--pa-line); display: grid; gap: 4px; }
.h-stats b { font-size: 40px; font-weight: 700; letter-spacing: -.04em; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
.h-stats span { font-size: var(--pa-fs-sm); color: var(--pa-ink-3); line-height: 1.4; }

/* ── join ── */
.h-join { display: grid; gap: 10px; margin-top: 4px; }
.h-join > div { padding: 18px; border-radius: var(--pa-r-l); display: grid; gap: 10px; justify-items: start; }
.h-join b { font-size: var(--pa-fs-lg); font-weight: 600; color: var(--pa-ink); }
.h-join span { font-size: var(--pa-fs); line-height: 1.5; color: var(--pa-ink-2); }
.h-join .h-link { margin-top: 0; font-size: var(--pa-fs); }
/* QR = the code cropped out of the Zalo share card (public/prototype/home/zalo-qr.png), kept square with its quiet zone */
.h-zalo { grid-template-columns: 148px 1fr; align-items: center; gap: 18px !important; }
.h-zalo img { width: 148px; height: 148px; object-fit: contain; border-radius: var(--pa-r-s); background: #fff; padding: 6px; image-rendering: auto; }
.h-zalo > div { display: grid; gap: 6px; justify-items: start; }
.h-zalo .pa-btn { margin-top: 6px; }
.h-zalo small { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.h-close { margin-top: 20px !important; font-size: var(--pa-fs-lg) !important; font-weight: 600; color: var(--pa-ink) !important; }

@media (max-width: 860px) and (max-height: 500px) {
  .h-wordmark { font-size: 48px !important; }
  .h-trinity { display: none !important; }
  .h-root .a-copy--left, .h-root .a-copy--right { max-height: calc(100svh - 84px) !important; }
}
@media (max-width: 860px) {
  .h-root .a-copy--left, .h-root .a-copy--right { max-height: calc(100svh - 236px); padding: 18px; }
  .h-root .a-copy h2 { font-size: 24px; margin: 6px 0 12px; }
  .h-root .a-copy p { font-size: 14.5px; }
  .h-root .a-copy--hero { padding-bottom: 6vh; }
  .h-wordmark { font-size: 64px; }
  .h-sub { font-size: 17px !important; }
  .h-proof, .h-acr { display: none; }
  .h-root .a-copy h2.h-h2s { font-size: 22px; }
  .h-paths, .h-cmp { grid-template-columns: 1fr; }
  /* phone: compact versions of the card-heavy chapters so each fits its panel */
  .h-apps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .h-apps > div { padding: 12px; gap: 4px; }
  .h-apps b { font-size: 15.5px; }
  .h-apps small { font-size: 11px; line-height: 1.4; }
  .h-path { padding: 12px; }
  .h-path b { margin-bottom: 6px; }
  .h-path ol { gap: 5px; }
  .h-path li { font-size: 13px; line-height: 1.4; }
  .h-paths { gap: 8px; }
  .h-tabs { margin: 10px 0 8px; }
  .h-diag summary { padding: 8px 10px; font-size: 13.5px; }
  .h-cmp > div { padding: 12px 14px; }
  .h-cmp b { font-size: 15px !important; }
  .h-join > div { padding: 14px; gap: 8px; }
  .h-close { margin-top: 12px !important; font-size: 16px !important; }
  .h-map > div { grid-template-columns: 80px 1fr; }
  .h-map .d { grid-column: 1 / -1; }
  .h-flow > div { grid-template-columns: 80px 1fr; }
  .h-flow .d { grid-column: 2; }
  .h-diag dl { grid-template-columns: 1fr; margin-left: 12px; }
  .h-diag .q { margin-left: 12px !important; }
  .h-stats b { font-size: 30px; }
  .h-zalo { grid-template-columns: 112px 1fr; gap: 14px !important; }
  .h-zalo img { width: 112px; height: 112px; padding: 4px; }
}
@media (max-width: 380px) {
  .h-zalo { grid-template-columns: 96px 1fr; }
  .h-zalo img { width: 96px; height: 96px; }
  .h-join .h-link { font-size: 13px; }
}