/* Paheli Time: buttons, feedback states and layout.
   Part 1 (this block, every width) is the single button system for the riddle studio: one primary (brand teal, white text), one secondary (white, teal outline and text),
   feedback badges and progress tiles that carry an icon as well as a colour, and a night variant. Tokens follow docs/design-system.md.
   Part 2 (inside the >=1000px query) is the desktop layout; it only sizes and places things, it does not colour them.
   overrides/prem/prem.css used to force every .pz-btn to teal with !important (dark text on teal for ghost buttons) and turned a correct answer into a green-teal face; that block now only applies to Rasoi's cook mode.
   DOM (built by studio2.js): .pz-studio.s2-studio > .s2-bar, #pzmode.pz-mode, #pzscore.pz-score, #pzdeck.pz-deck (> .pz-card.cur), .pz-dots (> i), .pz-nav */

/* ---- 1a. tokens (day) ---- */
.pz,.pz-studio{--pz-accent:#145C63;--pz-accent-hover:#0F474D;--pz-on-accent:#fff;--pz-tint:rgba(20,92,99,.08);--pz-hover-tint:rgba(20,92,99,.12);--pz-sec-ink:#145C63;--pz-surface:#fff;--pz-opt-ink:#3A4654;--pz-opt-ring:rgba(22,32,44,.14);--pz-off-bg:#E4E7EB;--pz-off-ink:#56606D;--pz-brass:#8A5F1A;--pz-cur-ring:rgba(20,92,99,.30);--pz-dot-idle:#B5BAC2;--pz-ok:#2F7A4F;--pz-ok-ink:#1F5E3B;--pz-ok-bg:#EAF4EE;--pz-miss:#B4652A;--pz-miss-ink:#8A4A1C;--pz-miss-bg:#FBEFE2}

/* ---- 1b. primary and secondary buttons ---- */
.pz-studio .pz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;font:600 15px/1.1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s,box-shadow .15s,transform .12s cubic-bezier(.2,.7,.2,1)!important}
.pz-studio .pz-btn:not(.ghost){background:var(--pz-accent);color:var(--pz-on-accent);box-shadow:none}
.pz-studio .pz-btn.ghost{background:var(--pz-surface);color:var(--pz-sec-ink);box-shadow:inset 0 0 0 1.5px var(--pz-sec-ink)}
/* on the answer face (deep teal): primary is a white pill, secondary a white outline */
.pz-studio .pz-back .pz-btn:not(.ghost){background:#fff;color:#0F474D}
.pz-studio .pz-back .pz-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
@media (hover:hover){
  .pz-studio .pz-btn:not(.ghost):not(:disabled):hover{background:var(--pz-accent-hover)}
  .pz-studio .pz-btn.ghost:not(:disabled):hover{background:var(--pz-hover-tint)}
  .pz-studio .pz-back .pz-btn:not(.ghost):not(:disabled):hover{background:#DDEBEC;color:#0F474D}
  .pz-studio .pz-back .pz-btn.ghost:not(:disabled):hover{background:rgba(255,255,255,.16)}
  .pz-studio .pz-btn.rg-mag:hover{transform:none!important}
}
.pz-studio .pz-btn:not(:disabled):active{transform:scale(.97)!important}
.pz-studio .pz-nav .pz-btn:disabled{background:var(--pz-off-bg);color:var(--pz-off-ink);box-shadow:none;opacity:1;cursor:not-allowed}
.pz-studio :is(.pz-btn,.pz-mode button,.s2-back):focus-visible{outline:3px solid #E8590C;outline-offset:2px}
.pz-studio .s2-back{width:44px;height:44px;min-height:44px}
/* the card under the pointer must not tilt or lift: the buttons move while you aim at them */
.pz-studio .pz-card.rg-tilt.rg-on,.pz-studio .pz-card.rg-tilt.rg-on:hover{transform:none;box-shadow:none}
.pz-studio .pz-card.rg-tilt::after{display:none}

/* ---- 1c. riddle-set choice (intro and studio): selected = teal tint + 2px teal ring + teal text ---- */
.pz-mode button{color:var(--pz-opt-ink);background:transparent;box-shadow:none;transition:background-color .15s,color .15s,box-shadow .15s}
.pz-mode button[aria-pressed="true"]{background:var(--pz-tint);color:var(--pz-sec-ink);box-shadow:inset 0 0 0 2px var(--pz-accent)}
@media (hover:hover){.pz-mode button[aria-pressed="false"]:hover{background:var(--pz-hover-tint)}}

/* ---- 1d. text that was brass gold (2.8:1) now uses the brass ink token ---- */
.pz .pz-kick,.pz-studio .pz-n,.pz-studio .pz-score{color:var(--pz-brass)!important}

/* ---- 1e. feedback: a badge with an icon and words (the colour is a second cue, never the only one) ---- */
.pz-studio .pz-res{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:700 16px/1 Inter,system-ui,sans-serif;background:#fff;color:#1F5E3B}
.pz-studio .pz-card.ok .pz-res::before{content:"\2713";font-weight:800}
.pz-studio .pz-card.miss .pz-res{background:var(--pz-miss-bg);color:var(--pz-miss-ink)}
.pz-studio .pz-card.miss .pz-res::before{content:"\21BA";font-weight:800}

/* ---- 1f. progress dots (phone): filled green = guessed, hollow amber ring = not this time ---- */
.pz-dots i{box-sizing:border-box;width:10px;height:10px;border:2px solid transparent;background:var(--pz-dot-idle)}
.pz-dots i.ok{background:var(--pz-ok);border-color:var(--pz-ok)}
.pz-dots i.miss{background:transparent;border-color:var(--pz-miss)}
.pz-dots i.cur{background:var(--pz-accent);border-color:var(--pz-accent);transform:scale(1.35)}
.pz-dots i.cur.ok{background:var(--pz-ok);border-color:var(--pz-ok)}
.pz-dots i.cur.miss{background:transparent;border-color:var(--pz-miss)}

/* ---- 1g. night (same saved choice as the site; set by paheli/theme.js, studio only) ---- */
html[data-pz-theme="dark"] .pz-studio{color-scheme:dark;--ink:#E9EEF2;--muted:#9BA8B5;--line:#263341;color:#E9EEF2;--pz-accent:#4FB3C4;--pz-accent-hover:#6BC6D4;--pz-on-accent:#0B1218;--pz-tint:rgba(79,179,196,.16);--pz-hover-tint:rgba(79,179,196,.22);--pz-sec-ink:#7FCBD8;--pz-surface:#18222D;--pz-opt-ink:#DCE4EA;--pz-opt-ring:#34445A;--pz-off-bg:#243140;--pz-off-ink:#97A5B3;--pz-brass:#E0A06A;--pz-cur-ring:rgba(79,179,196,.45);--pz-dot-idle:#4A5B6E;--pz-ok:#6CC08F;--pz-ok-ink:#9BDDB5;--pz-ok-bg:#16281F;--pz-miss:#E0A06A;--pz-miss-ink:#F2BE91;--pz-miss-bg:#2A2118}
html[data-pz-theme="dark"] .pz-studio.s2-studio{background:#0F1720!important}
html[data-pz-theme="dark"] .pz-studio .s2-back{background:#18222D;color:#E9EEF2;box-shadow:0 0 0 1px #34445A}
html[data-pz-theme="dark"] .pz-studio .s2-title{color:#E9EEF2}
html[data-pz-theme="dark"] .pz-studio .pz-mode{background:#18222D;box-shadow:inset 0 0 0 1px #34445A}
html[data-pz-theme="dark"] .pz-studio .pz-front{background:#18222D;border-color:#263341;box-shadow:none}
html[data-pz-theme="dark"] .pz-studio .pz-cnt{color:#B7C3CE}
html[data-pz-theme="dark"] .pz-studio .pz-dots i.cur:not(.ok):not(.miss){background:var(--pz-accent);border-color:var(--pz-accent)}
/* the answer face is already dark teal: keep its white/outline buttons and light badges in night mode too */

@media (prefers-reduced-motion:reduce){.pz-studio .pz-btn,.pz-mode button{transition:none!important}.pz-studio .pz-btn:not(:disabled):active{transform:none!important}}

@media (min-width:1000px){

/* ---- intro page (only reached with ?intro=1): wider, bigger type ---- */
main.pz{max-width:1240px;padding:12px 40px 64px}
main.pz .pz-hero{padding:56px 64px;border-radius:32px}
main.pz .pz-hero h1{font-size:clamp(48px,5vw,72px)}
main.pz .pz-hero p{font-size:18px;max-width:62ch}
main.pz .pz-links{margin-top:36px}

/* ---- studio: left sidebar (set picker, score, progress) + large stage ---- */
.pz-studio.s2-studio{display:grid;grid-template-columns:clamp(264px,24vw,340px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:28px;row-gap:0;align-items:stretch;padding:14px 32px 24px!important}
.pz-studio.s2-studio>.s2-bar{grid-column:1/-1;grid-row:1;margin-bottom:14px}
.pz-studio.s2-studio::before{content:"";grid-column:1;grid-row:2/6;background:#FBF9F4;border:1px solid rgba(22,32,44,.10);border-radius:22px;box-shadow:0 1px 0 rgba(22,32,44,.04),0 14px 34px -26px rgba(22,32,44,.3)}
html[data-pz-theme="dark"] .pz-studio.s2-studio::before{background:#18222D;border-color:#263341;box-shadow:none}

.pz-studio.s2-studio>.pz-mode{grid-column:1;grid-row:2;align-self:start;justify-self:stretch;display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;max-width:none;margin:24px 22px 0;padding:0;border-radius:0;background:none;box-shadow:none}
html[data-pz-theme="dark"] .pz-studio.s2-studio>.pz-mode{background:none;box-shadow:none}
.pz-studio.s2-studio .pz-mode::before{content:"Riddle set";font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 2px 6px}
.pz-studio.s2-studio .pz-mode button{position:relative;width:100%;min-height:48px;padding:0 44px 0 20px;border-radius:999px;text-align:left;font-size:15px;white-space:normal;background:var(--pz-surface);color:var(--pz-opt-ink);box-shadow:inset 0 0 0 1px var(--pz-opt-ring)}
.pz-studio.s2-studio .pz-mode button[aria-pressed="true"]{background:var(--pz-tint);color:var(--pz-sec-ink);box-shadow:inset 0 0 0 2px var(--pz-accent)}
.pz-studio.s2-studio .pz-mode button[aria-pressed="true"]::after{content:"\2713";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-weight:800}
@media (hover:hover){.pz-studio.s2-studio .pz-mode button[aria-pressed="false"]:hover{background:var(--pz-hover-tint)}}

.pz-studio.s2-studio>.pz-score{grid-column:1;grid-row:3;align-self:start;margin:20px 22px 0;padding:12px 14px;border-radius:14px;background:var(--pz-surface);box-shadow:inset 0 0 0 1px var(--pz-opt-ring);text-align:left;font-size:16px}

.pz-studio.s2-studio>.pz-dots{grid-column:1;grid-row:4;align-self:start;justify-content:flex-start;gap:8px;margin:20px 22px 22px;min-height:0}
.pz-studio.s2-studio .pz-dots::before{content:"Progress";flex:0 0 100%;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pz-studio.s2-studio .pz-dots::after{content:"\2713  guessed    \21BA  not this time";white-space:pre;flex:0 0 100%;font:500 12.5px/1.4 Inter,system-ui,sans-serif;color:var(--muted);margin-top:6px}
.pz-studio.s2-studio .pz-dots{counter-reset:pzd}
.pz-studio.s2-studio .pz-dots i{counter-increment:pzd;width:36px;height:36px;border:0;border-radius:12px;display:grid;place-items:center;background:var(--pz-surface);box-shadow:inset 0 0 0 1px var(--pz-opt-ring);color:var(--pz-opt-ink);font:600 14px/1 Inter,system-ui,sans-serif;font-style:normal;transform:none}
.pz-studio.s2-studio .pz-dots i::before{content:counter(pzd)}
.pz-studio.s2-studio .pz-dots i.ok{background:var(--pz-ok-bg);color:var(--pz-ok-ink);box-shadow:inset 0 0 0 2px var(--pz-ok)}
.pz-studio.s2-studio .pz-dots i.ok::before{content:"\2713";font-weight:800}
.pz-studio.s2-studio .pz-dots i.miss{background:var(--pz-miss-bg);color:var(--pz-miss-ink);box-shadow:inset 0 0 0 2px var(--pz-miss)}
.pz-studio.s2-studio .pz-dots i.miss::before{content:"\21BA";font-weight:800}
.pz-studio.s2-studio .pz-dots i.cur:not(.ok):not(.miss){background:var(--pz-accent);color:var(--pz-on-accent);box-shadow:0 0 0 3px var(--pz-cur-ring)}
.pz-studio.s2-studio .pz-dots i.cur.ok{box-shadow:inset 0 0 0 2px var(--pz-ok),0 0 0 3px var(--pz-cur-ring)}
.pz-studio.s2-studio .pz-dots i.cur.miss{box-shadow:inset 0 0 0 2px var(--pz-miss),0 0 0 3px var(--pz-cur-ring)}

/* stage: the card fills the area to the right of the sidebar */
.pz-studio.s2-studio>.pz-deck{grid-column:2;grid-row:2/5;position:relative;display:block;width:100%;max-width:1180px;justify-self:center;margin:0;min-height:0}
.pz-studio.s2-studio .pz-card.cur{position:absolute;inset:0;height:auto;min-height:0}
.pz-studio.s2-studio .pz-front,.pz-studio.s2-studio .pz-back{border-radius:22px;padding:40px clamp(32px,5vw,88px);overflow:auto}
.pz-studio.s2-studio .pz-front{align-items:center;text-align:center;justify-content:safe center;background:#FBF9F4;border:1px solid rgba(22,32,44,.10);box-shadow:0 1px 0 rgba(22,32,44,.04),0 18px 40px -24px rgba(22,32,44,.28)}
html[data-pz-theme="dark"] .pz-studio.s2-studio .pz-front{background:#18222D;border-color:#263341;box-shadow:none}
.pz-studio.s2-studio .pz-n{font-size:13px}
.pz-studio.s2-studio .pz-q{font-size:clamp(24px,3.6vh + 6px,40px);line-height:1.35;max-width:38ch;margin:14px 0 8px}
.pz-studio.s2-studio .pz-q:lang(hi){font-size:clamp(24px,3.2vh + 6px,36px);line-height:1.7}
.pz-studio.s2-studio .pz-m{font-size:17px;max-width:52ch}
.pz-studio.s2-studio .pz-hint{font-size:15px}
.pz-studio.s2-studio .pz-front .pz-row{justify-content:center;margin-top:28px;padding-top:0}
.pz-studio.s2-studio .pz-back{justify-content:safe center}
.pz-studio.s2-studio .pz-emoji{font-size:clamp(64px,11vh,120px)}
.pz-studio.s2-studio .pz-a{font-size:clamp(30px,5vh + 8px,56px);max-width:24ch}
.pz-studio.s2-studio .pz-a.sm{font-size:clamp(24px,3.4vh + 6px,36px);max-width:40ch}
.pz-studio.s2-studio .pz-ae{font-size:clamp(16px,2vh + 4px,22px)}
.pz-studio.s2-studio .pz-res{font-size:20px;min-height:52px;padding:0 28px}
.pz-studio.s2-studio .pz-front .pz-btn,.pz-studio.s2-studio .pz-back .pz-btn{min-height:52px;padding:0 28px;font-size:16px}

/* previous / next under the stage */
.pz-studio.s2-studio>.pz-nav{grid-column:2;grid-row:5;width:100%;max-width:1180px;justify-self:center;margin:18px 0 0;gap:14px}
.pz-studio.s2-studio .pz-nav .pz-btn{flex:0 0 auto;min-width:156px;min-height:52px;font-size:16px}
.pz-studio.s2-studio .pz-cnt{flex:1;font-size:15px}
}