@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Big+Shoulders+Display:wght@800&family=Courier+Prime:wght@400;700&display=swap");

/* Prompters Anonymous — components. Plain HTML + these classes; no framework.
   Load tokens.css first. Light comes from the top left: highlights on top and
   left edges, thickness and shadow on the right and bottom. Only pressable
   things and chips get depth. Cards stay flat. */

/* ---------- base ---------- */
.pa { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 27px; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); }
.pa-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.pa-stack { display: grid; gap: var(--space-4); padding: var(--space-4); }
.pa-label { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pa-hl { color: var(--amber-text); }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.pa-btn, .pa-install__copy, .pa-resource__link, a):focus-visible { outline: var(--stroke-strong) solid var(--focus); outline-offset: 2px; }

/* ---------- Button ---------- */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform var(--motion-press) ease-out, box-shadow var(--motion-press) ease-out;
}
.pa-btn--primary { background: var(--amber); color: var(--on-amber); box-shadow: var(--shadow-key); }
.pa-btn--primary:active { transform: translate(2px, 2px); box-shadow: var(--shadow-key-pressed); }
.pa-btn--secondary { background: var(--bg-raised); color: var(--ink); box-shadow: inset 0 0 0 var(--stroke-strong) var(--ink), var(--shadow-raised); }
.pa-btn--secondary:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 var(--stroke-strong) var(--ink); }
.pa-btn--quiet { background: transparent; color: var(--amber-text); padding-inline: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- InstallCommand ---------- */
.pa-install { display: grid; gap: var(--space-2); max-width: 720px; min-width: 0; }
.pa-install__box { display: flex; align-items: stretch; background: var(--bg-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-raised); min-width: 0; }
.pa-install__cmd { flex: 1; min-width: 0; overflow-x: auto; margin: 0; padding: var(--space-4); font-family: var(--font-mono); font-size: 16px; line-height: 24px; white-space: pre; color: var(--ink); }
.pa-install__sign { color: var(--ink-muted); user-select: none; }
.pa-install__copy {
  flex: none; margin: var(--space-2); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: var(--amber); color: var(--on-amber); box-shadow: var(--shadow-key); cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--motion-press) ease-out, box-shadow var(--motion-press) ease-out;
}
.pa-install__copy:active { transform: translate(2px, 2px); box-shadow: var(--shadow-key-pressed); }
.pa-install__copy[data-copied="true"] { background: var(--success); color: var(--bg); box-shadow: none; transform: translate(2px, 2px); }
.pa-install__note { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- StepCard ---------- */
.pa-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-6); background: var(--bg-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-md); max-width: 560px; min-width: 0; }
.pa-step__chip { grid-row: span 3; width: 72px; height: auto; }
.pa-step__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; color: var(--ink-muted); }
.pa-step__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.pa-step__body { margin: 0; font-size: 15px; line-height: 23px; max-width: 60ch; }
.pa-step__status { display: inline-flex; align-items: center; gap: var(--space-1); }
.pa-step__status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.pa-step[data-status="current"] { background: var(--amber-soft); border: var(--stroke-strong) solid var(--amber); }
.pa-step[data-status="current"] .pa-step__status { color: var(--amber-text); }
.pa-step[data-status="done"] .pa-step__status { color: var(--success); }
.pa-step[data-status="later"] { background: transparent; border-style: dashed; }
.pa-step[data-status="later"] .pa-step__chip { filter: grayscale(1); opacity: 0.35; }
.pa-step[data-status="later"] .pa-step__title { color: var(--ink-muted); }

/* ---------- Ladder ---------- */
.pa-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.pa-ladder__phase { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.pa-ladder__head { display: grid; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: var(--stroke-strong) solid var(--ink); }
.pa-ladder__metal { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.pa-ladder__metal::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--metal); box-shadow: inset -2px -2px 0 rgba(0,0,0,0.25), inset 1px 1px 0 rgba(255,255,255,0.5); }
.pa-ladder__phase[data-metal="aluminum"] { --metal: var(--metal-aluminum); }
.pa-ladder__phase[data-metal="copper"]   { --metal: var(--metal-copper); }
.pa-ladder__phase[data-metal="silver"]   { --metal: var(--metal-silver); }
.pa-ladder__phase[data-metal="brass"]    { --metal: var(--metal-brass); }
.pa-ladder__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.pa-ladder__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.pa-ladder__step { display: grid; grid-template-columns: 2.2em 1fr; gap: var(--space-2); align-items: baseline; padding: var(--space-2); border-bottom: var(--stroke-hair) solid var(--rule); }
.pa-ladder__n { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.pa-ladder__t { font-size: 15px; line-height: 23px; }
.pa-ladder__step[data-status="done"] .pa-ladder__n { color: var(--success); }
.pa-ladder__step[data-status="done"] .pa-ladder__t { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.pa-ladder__step[data-status="current"] { background: var(--amber-soft); border-radius: var(--radius-sm); }
.pa-ladder__step[data-status="current"] .pa-ladder__n, .pa-ladder__step[data-status="current"] .pa-ladder__t { color: var(--amber-text); font-weight: 700; }

/* ---------- Chip ---------- */
.pa-chip { margin: 0; display: inline-grid; justify-items: center; gap: var(--space-2); }
.pa-chip__img { display: block; width: var(--chip-size, 160px); height: auto; }
.pa-chip__caption { color: var(--ink-muted); text-align: center; }
.pa-chip[data-locked="true"] .pa-chip__img { filter: grayscale(1) brightness(0.6); opacity: 0.4; }
.pa-chip[data-earned="true"] { perspective: 700px; }
.pa-chip[data-earned="true"] .pa-chip__img { animation: pa-chip-earn var(--motion-award) cubic-bezier(.2,.9,.25,1.15) both; transform-origin: 50% 50%; }
@keyframes pa-chip-earn {
  0%   { transform: translateY(-28px) rotateY(-200deg) scale(.85); opacity: 0; }
  55%  { transform: translateY(2px) rotateY(10deg) scale(1.02); opacity: 1; }
  100% { transform: none; }
}

/* ---------- ResourceCard ---------- */
.pa-resource { display: grid; gap: var(--space-2); padding: var(--space-6); max-width: 420px; min-width: 0; background: var(--bg-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-md); }
.pa-resource__top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; color: var(--ink-muted); }
.pa-resource__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.pa-resource__by { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.pa-resource__why { margin: 0; font-size: 15px; line-height: 23px; }
.pa-resource__foot { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--rule); }
.pa-resource__link { color: var(--amber-text); font-weight: 700; text-underline-offset: 3px; justify-self: start; }
.pa-resource__disclosure { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.pa-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); border: var(--stroke-hair) solid currentColor; }
.pa-tag--affiliate { color: var(--amber-text); background: var(--amber-soft); }
.pa-tag--free { color: var(--success); }

/* ---------- TerminalBlock ---------- */
.pa-term { max-width: 760px; min-width: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--term-bg); color: var(--term-fg); border: var(--stroke-hair) solid var(--rule); }
.pa-term__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--stroke-hair) solid var(--rule); color: var(--ansi-08-bright-black); font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.pa-term__dots { display: inline-flex; gap: 6px; }
.pa-term__dots i { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--rule); }
.pa-term__body { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 15px; line-height: 22px; white-space: pre; }
.pa-a1 { color: var(--ansi-01-red); } .pa-a2 { color: var(--ansi-02-green); } .pa-a3 { color: var(--ansi-03-yellow); }
.pa-a6 { color: var(--ansi-06-cyan); } .pa-a8 { color: var(--ansi-08-bright-black); }
.pa-a11 { color: var(--ansi-11-bright-yellow); font-weight: 700; } .pa-a15 { color: var(--ansi-15-bright-white); font-weight: 700; }
.pa-b { font-weight: 700; }
.pa-cursor { display: inline-block; width: 0.6em; background: var(--ansi-03-yellow); color: transparent; animation: pa-blink 1.06s steps(1) infinite; }
@keyframes pa-blink { 50% { opacity: 0; } }

/* ---------- Testimonial ---------- */
.pa-quote { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-6); max-width: 560px; min-width: 0; background: var(--bg-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-md); }
.pa-quote__text { margin: 0; font-size: 21px; line-height: 31px; text-wrap: pretty; }
.pa-quote__text::before { content: "\201C"; color: var(--amber-text); } .pa-quote__text::after { content: "\201D"; color: var(--amber-text); }
.pa-quote__who { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-family: var(--font-mono); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.pa-quote__who img { width: 40px; height: auto; }
.pa-quote__name { color: var(--ink); font-weight: 700; }
.pa-quote__sample { color: var(--danger); }

/* ---------- ShareCard ---------- */
.pa-share { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-6); align-items: center; padding: var(--space-6); max-width: 640px; min-width: 0; background: var(--bg-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-md); }
.pa-share__chip { width: 140px; height: auto; }
.pa-share__body { display: grid; gap: var(--space-2); min-width: 0; }
.pa-share__eyebrow { color: var(--amber-text); }
.pa-share__head { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.pa-share__line { margin: 0; font-size: 15px; line-height: 23px; }
.pa-share__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
@media (max-width: 520px) { .pa-share { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- SocialCard (Open Graph, 1200 × 630) ---------- */
.pa-og { position: relative; width: 1200px; height: 630px; overflow: hidden; background: var(--bg); color: var(--ink); display: grid; grid-template-columns: 1fr 440px; }
.pa-og__words { display: grid; align-content: space-between; padding: 72px 0 64px 80px; }
.pa-og__eyebrow { font-family: var(--font-mono); font-size: 28px; line-height: 34px; color: var(--amber-text); }
.pa-og__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 124px; line-height: 0.9; text-transform: uppercase; text-wrap: balance; }
.pa-og__foot { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 26px; line-height: 32px; color: var(--ink-muted); }
.pa-og__foot img { width: 44px; height: auto; }
.pa-og__art { display: grid; place-items: center; background: var(--bg-raised); border-left: var(--stroke-hair) solid var(--rule); }
.pa-og__art img { width: 340px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .pa-cursor, .pa-chip[data-earned="true"] .pa-chip__img { animation: none; }
  .pa-btn, .pa-install__copy { transition: none; }
}