/* ============================================================
   proverbs-study.css — the Path of Mastery study hall.
   Dark celestial, kin to the Proverb Pond: moonlit ink, brass and
   gold, calligraphy set large. Mobile-first (works at 390px), and
   every motion is guarded by prefers-reduced-motion at the foot.
   Emitted page: /proverbs/study/. Owned by generate-proverb-study.mjs.
   ============================================================ */

.ps-wrap{max-width:900px;margin:0 auto;padding:0 20px 80px}

/* ---- breadcrumb + hero ---- */
.ps-crumb{margin:14px 0 6px;font-size:.85rem;color:var(--muted,#9a9bb0)}
.ps-crumb a{color:var(--brass-bright,#efe2b4);text-decoration:none}
.ps-crumb a:hover{text-decoration:underline}
.ps-hero{padding:26px 0 6px;max-width:70ch}
.ps-eyebrow{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;color:var(--brass-bright,#efe2b4);margin:0 0 10px}
.ps-hero h1{font-family:var(--font-display,"Fraunces",serif);font-weight:560;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.05;margin:0 0 14px;color:var(--moon,#f5ecd2)}
.ps-hero p{color:var(--body,#c8c9de);font-size:1.05rem;line-height:1.6;margin:0 0 8px}
.ps-hero .ps-zhbrand{font-family:"Ma Shan Zheng","Noto Serif SC",serif;color:var(--brass,#d6c18c)}
.ps-hero-link{margin:6px 0 0;font-size:.9rem}
.ps-hero-link a{color:var(--brass-bright,#efe2b4);text-decoration:none}
.ps-hero-link a:hover{text-decoration:underline}

/* ---- mode tabs ---- */
.ps-modes{display:flex;gap:8px;margin:30px 0 22px;flex-wrap:wrap;
  border-bottom:1px solid rgba(214,193,140,.16);padding-bottom:0}
.ps-mode{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;
  color:var(--muted,#9a9bb0);background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 6px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.ps-mode:hover{color:var(--moon,#f5ecd2)}
.ps-mode.is-on{color:var(--brass-bright,#efe2b4);border-bottom-color:var(--brass,#d6c18c)}

/* ---- panes ---- */
.ps-pane{display:none}
.ps-pane.is-on{display:block}
.ps-pane[hidden]{display:none}
.ps-pane-head{margin:0 0 20px;max-width:64ch}
.ps-pane-head h2{font-family:var(--font-display,"Fraunces",serif);font-weight:560;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--moon,#f5ecd2);margin:0 0 8px}
.ps-pane-head p{color:var(--muted,#9a9bb0);line-height:1.6;margin:0}

/* ---- theme chips ---- */
.ps-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px}
.ps-chip{font-size:.76rem;color:var(--body,#c8c9de);background:rgba(214,193,140,.05);border:1px solid rgba(214,193,140,.22);
  border-radius:999px;padding:6px 12px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.ps-chip:hover{border-color:var(--brass,#d6c18c);color:var(--moon,#f5ecd2)}
.ps-chip.is-on{background:var(--brass,#d6c18c);border-color:var(--brass,#d6c18c);color:#0a1526;font-weight:600}

/* ---- shared speaker button (kin to .pv-say) ---- */
.ps-say{flex:0 0 auto;display:inline-grid;place-items:center;width:2rem;height:2rem;padding:0;border-radius:50%;
  border:1px solid rgba(214,193,140,.4);background:rgba(214,193,140,.08);color:var(--brass-bright,#efe2b4);cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.ps-say:hover{background:rgba(214,193,140,.2);transform:scale(1.08)}
.ps-say-lg{width:2.4rem;height:2.4rem}
.ps-say.is-saying{animation:ps-pulse 1s ease-in-out infinite}
@keyframes ps-pulse{0%{box-shadow:0 0 0 0 rgba(214,193,140,.45)}70%{box-shadow:0 0 0 10px rgba(214,193,140,0)}100%{box-shadow:0 0 0 0 rgba(214,193,140,0)}}

/* ---- shared calligraphy line ---- */
.ps-card-zh,.ps-med-zh,.ps-quiz-zh{font-family:"Ma Shan Zheng","Noto Serif SC",serif;color:var(--moon,#f5ecd2);
  letter-spacing:.05em;display:flex;justify-content:center;align-items:center;gap:.12em;flex-wrap:wrap;margin:0}
.ps-card-zh ruby rt,.ps-med-zh ruby rt,.ps-quiz-zh ruby rt{font-family:"Inter",system-ui,sans-serif;font-size:.3em;color:var(--brass-bright,#efe2b4);font-weight:500}
.ps-card-zh .cx-punct,.ps-med-zh .cx-punct,.ps-quiz-zh .cx-punct{opacity:.5}
.ps-card-pinyin,.ps-med-pinyin,.ps-quiz-pinyin{font-family:"Space Mono",ui-monospace,monospace;color:var(--brass-bright,#efe2b4);letter-spacing:.06em}

/* ==================== FLASHCARDS ==================== */
.ps-card{position:relative;margin:0 auto;max-width:560px;min-height:300px;perspective:1400px;cursor:pointer;outline:none}
.ps-card:focus-visible{box-shadow:0 0 0 3px rgba(214,193,140,.4);border-radius:22px}
.ps-card-inner{position:relative;width:100%;min-height:300px;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.ps-card.is-flipped .ps-card-inner{transform:rotateY(180deg)}
.ps-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:34px 28px;border-radius:22px;border:1px solid rgba(214,193,140,.22);
  background:radial-gradient(130% 90% at 50% 0%,#10203a 0%,#0a1526 48%,#070d18 100%);
  box-shadow:0 30px 80px -44px rgba(0,0,0,.9),inset 0 0 90px rgba(8,16,30,.6)}
.ps-card-front{gap:18px}
.ps-card-back{transform:rotateY(180deg);justify-content:flex-start;gap:8px;overflow:auto;
  background:linear-gradient(180deg,rgba(20,22,40,.92),rgba(12,14,26,.94))}
.ps-card-eyebrow{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;color:var(--brass-bright,#efe2b4);margin:0}
.ps-card-zh{font-size:clamp(2.4rem,10vw,4.2rem);line-height:1.5}
.ps-card-tools{display:flex;align-items:center;gap:14px}
.ps-flip-hint{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:var(--muted,#9a9bb0)}
.ps-card-pinyin{font-size:.95rem;margin:2px 0 4px}
.ps-card-lit{color:var(--muted,#9a9bb0);font-style:italic;margin:2px 0}
.ps-card-mean{color:var(--body,#c8c9de);margin:8px 0 0;font-size:1rem;line-height:1.55;max-width:44ch}
.ps-card-soul{color:var(--moon,#f5ecd2);font-family:var(--font-display,"Fraunces",serif);font-style:italic;font-size:1.14rem;line-height:1.5;margin:14px 0 0;max-width:42ch}
.ps-card-animal{margin:16px 0 0;color:var(--brass-bright,#efe2b4);text-decoration:none;font-size:.82rem}
.ps-card-animal:hover{text-decoration:underline}

/* marked ring on the card frame */
.ps-card[data-mark="known"] .ps-card-face{border-color:rgba(120,200,150,.55);box-shadow:0 30px 80px -44px rgba(0,0,0,.9),inset 0 0 90px rgba(8,16,30,.6),0 0 0 1px rgba(120,200,150,.28)}
.ps-card[data-mark="learning"] .ps-card-face{border-color:rgba(232,178,120,.6);box-shadow:0 30px 80px -44px rgba(0,0,0,.9),inset 0 0 90px rgba(8,16,30,.6),0 0 0 1px rgba(232,178,120,.3)}

/* mark buttons */
.ps-card-mark{display:flex;gap:12px;justify-content:center;margin:20px 0 6px}
.ps-mark{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;
  border-radius:999px;padding:11px 18px;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.ps-mark-learning{color:var(--brass-bright,#efe2b4);background:rgba(232,178,120,.1);border:1px solid rgba(232,178,120,.4)}
.ps-mark-learning:hover{background:rgba(232,178,120,.2)}
.ps-mark-known{color:#0a1526;background:linear-gradient(180deg,#efe2b4,#d6c18c);border:1px solid transparent;box-shadow:0 12px 30px -14px rgba(214,193,140,.7)}
.ps-mark-known:hover{transform:translateY(-2px)}

/* card nav row */
.ps-card-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 2px}
.ps-nav-btn{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;
  color:var(--body,#c8c9de);background:rgba(214,193,140,.06);border:1px solid rgba(214,193,140,.24);border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color .2s,color .2s}
.ps-nav-btn:hover{border-color:var(--brass,#d6c18c);color:var(--moon,#f5ecd2)}
.ps-card-count{margin:0;min-width:6.5em;text-align:center;font-family:"Space Mono",ui-monospace,monospace;font-size:.76rem;color:var(--brass-bright,#efe2b4);letter-spacing:.04em}

/* card foot: shuffle / tally / reset */
.ps-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px auto 0;max-width:560px;padding-top:16px;border-top:1px solid rgba(214,193,140,.14)}
.ps-ghost{font-size:.74rem;color:var(--muted,#9a9bb0);background:none;border:0;cursor:pointer;text-decoration:underline;font-family:"Space Mono",ui-monospace,monospace;letter-spacing:.04em}
.ps-ghost:hover{color:var(--moon,#f5ecd2)}
.ps-tally{margin:0;font-family:"Space Mono",ui-monospace,monospace;font-size:.74rem;color:var(--brass-bright,#efe2b4);letter-spacing:.03em}

/* ==================== THE PATH ==================== */
.ps-progress{height:4px;border-radius:999px;background:rgba(214,193,140,.14);overflow:hidden;margin:0 0 8px}
.ps-progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#d6c18c,#efe2b4);transition:width .5s ease}
.ps-progress-label{margin:0 0 22px;font-family:"Space Mono",ui-monospace,monospace;font-size:.72rem;color:var(--brass-bright,#efe2b4);letter-spacing:.06em}
.ps-med{max-width:640px;margin:0 auto;padding:34px 32px 28px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(20,22,40,.72),rgba(12,14,26,.72));border:1px solid rgba(214,193,140,.22);
  backdrop-filter:blur(6px);opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s}
.ps-med.is-in{opacity:1;transform:none}
.ps-med-eyebrow{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--brass-bright,#efe2b4);margin:0 0 14px}
.ps-med-zh{font-size:clamp(2.4rem,9vw,4rem);line-height:1.5}
.ps-med-tools{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 0}
.ps-med-pinyin{font-size:.9rem}
.ps-med-mean{color:var(--body,#c8c9de);margin:16px auto 0;max-width:52ch;font-size:1.02rem;line-height:1.55}
.ps-med-soul{color:var(--moon,#f5ecd2);font-family:var(--font-display,"Fraunces",serif);font-size:1.24rem;line-height:1.5;font-style:italic;margin:16px auto 4px;max-width:48ch}
.ps-med-prompt{margin:22px auto 0;max-width:52ch;padding:18px 20px;border-radius:14px;text-align:left;
  background:rgba(214,193,140,.06);border-left:3px solid var(--brass,#d6c18c)}
.ps-med-prompt-label{display:block;font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--brass-bright,#efe2b4);margin:0 0 8px}
.ps-med-prompt p{margin:0;color:var(--moon,#f5ecd2);line-height:1.6;font-size:1rem}
.ps-med-animal{display:inline-block;margin:20px 0 0;color:var(--brass-bright,#efe2b4);text-decoration:none;font-size:.82rem}
.ps-med-animal:hover{text-decoration:underline}
.ps-med-nav{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.ps-med-restart{display:block;margin:18px auto 0}

/* ==================== THE QUIZ ==================== */
.ps-quiz{max-width:640px;margin:0 auto;padding:32px 30px 28px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(20,22,40,.72),rgba(12,14,26,.72));border:1px solid rgba(214,193,140,.22);backdrop-filter:blur(6px)}
.ps-quiz-eyebrow{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--brass-bright,#efe2b4);margin:0 0 14px}
.ps-quiz-zh{font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.5}
.ps-quiz-tools{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 0}
.ps-quiz-pinyin{font-size:.9rem}
.ps-quiz-ask{font-family:"Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--muted,#9a9bb0);margin:20px 0 14px}
.ps-quiz-opts{display:grid;gap:10px;text-align:left}
.ps-quiz-opt{font-size:.95rem;line-height:1.5;color:var(--body,#c8c9de);background:rgba(214,193,140,.05);border:1px solid rgba(214,193,140,.22);
  border-radius:14px;padding:14px 16px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;text-align:left}
.ps-quiz-opt:hover:not(:disabled){border-color:var(--brass,#d6c18c);color:var(--moon,#f5ecd2)}
.ps-quiz-opt:disabled{cursor:default}
.ps-quiz-opt.is-right{border-color:rgba(120,200,150,.7);background:rgba(120,200,150,.14);color:var(--moon,#f5ecd2)}
.ps-quiz-opt.is-wrong{border-color:rgba(224,122,110,.7);background:rgba(224,122,110,.12);color:var(--moon,#f5ecd2)}
.ps-quiz-feedback{min-height:1.4em;margin:16px 0 0;font-family:var(--font-display,"Fraunces",serif);font-style:italic;font-size:1.06rem;color:var(--muted,#9a9bb0)}
.ps-quiz-feedback.is-right{color:#a9dcbd}
.ps-quiz-feedback.is-wrong{color:#e6b8a8}
.ps-quiz-next{margin:18px auto 0}
.ps-quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:640px;margin:22px auto 0;padding-top:16px;border-top:1px solid rgba(214,193,140,.14)}
.ps-quiz-score{margin:0;font-family:"Space Mono",ui-monospace,monospace;font-size:.76rem;color:var(--brass-bright,#efe2b4);letter-spacing:.03em}

/* ==================== explore + footer ==================== */
.ps-explore{margin:52px 0 0;padding:24px;border-radius:16px;border:1px solid rgba(214,193,140,.18);background:rgba(12,14,26,.5)}
.ps-explore h2{font-family:var(--font-display,"Fraunces",serif);font-weight:560;color:var(--moon,#f5ecd2);margin:0 0 8px;font-size:1.3rem}
.ps-explore p{color:var(--body,#c8c9de);line-height:1.6;margin:0;max-width:70ch}
.ps-explore a{color:var(--brass-bright,#efe2b4)}
.ps-foot{margin-top:40px}
.ps-foot .pf-disc{color:var(--muted,#9a9bb0);font-size:.85rem;max-width:80ch}

/* ==================== mobile (390px first) ==================== */
@media (max-width:640px){
  .ps-wrap{padding:0 16px 64px}
  .ps-modes{gap:2px}
  .ps-mode{padding:10px 4px 12px;font-size:.66rem}
  .ps-card,.ps-card-inner{min-height:280px}
  .ps-card-face{padding:26px 20px}
  .ps-card-mark{flex-direction:column}
  .ps-mark{width:100%}
  .ps-card-nav{gap:10px}
  .ps-med,.ps-quiz{padding:26px 20px 24px}
  .ps-med-nav{flex-direction:column}
  .ps-med-nav .ps-nav-btn,.ps-med-nav .ps-mark{width:100%}
}

/* ==================== reduced motion ==================== */
@media (prefers-reduced-motion:reduce){
  .ps-card-inner{transition:none}
  .ps-med{transition:none;opacity:1;transform:none}
  .ps-progress-bar{transition:none}
  .ps-say.is-saying{animation:none}
  .ps-mark-known:hover{transform:none}
  .ps-say:hover{transform:none}
}