/* =====================================================================
   GAMIFY · TUTORIAL — the look of the first start walkthrough (tutorial.js).
   Every colour, radius and font is a skin.css variable, so it follows
   light, night and the four table skins. Text always sits on a panel or a
   card (--panel-bg with --panel-ink), never on the sky: that keeps 4.5 to 1
   in every skin, The Parlor's cream included.
   Two parts: the welcome screen, and the coach card that rides over the real
   app for the rest. Every line of text wraps inside its box.
   Motion: the welcome fades up 12px over 400ms and the one thing to tap
   pulses. All of it stops under reduced motion.
   ===================================================================== */
html.tut-open{overflow:hidden}
.tut{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;gap:12px;overflow-y:auto;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 120% at 50% 0%,var(--bg2),var(--bg1) 70%);color:var(--panel-ink);font-family:var(--font)}
.tut[hidden]{display:none}
.tut > *{width:min(100%,520px);margin-left:auto;margin-right:auto}

/* ---- welcome ---- */
.tut-top{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}
.tut-skip{min-height:44px;padding:0 16px;border:1px solid var(--pill-edge);border-radius:var(--radius-pill);background:var(--back-btn-bg);color:var(--back-btn-ink);
  box-shadow:0 2px 6px var(--shadow);font:inherit;font-weight:800;cursor:pointer}
.tut-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0}
.tut-in{animation:tutUp .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes tutUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tut-card{display:flex;flex-direction:column;gap:12px;padding:28px 20px;background:var(--panel-bg);color:var(--panel-ink);
  border:1px solid var(--choice-edge);border-radius:var(--radius-lg);box-shadow:0 14px 34px var(--shadow);align-items:center;text-align:center}
.tut-card h2{margin:0;font-size:1.5rem;font-weight:900;line-height:1.2;outline:none;overflow-wrap:anywhere}
.tut-line{margin:0;font-weight:700;color:var(--panel-muted);overflow-wrap:anywhere}
.tut-art svg{display:block;width:min(100%,260px);height:auto;overflow:visible}
.tut-art-card{fill:var(--card-face);stroke:var(--choice-edge);stroke-width:1.5}
.tut-art-good{fill:var(--good-deep)}
.tut-art-sun{fill:var(--accent2)}
.tut-art-cloud{fill:color-mix(in oklab,var(--panel-ink) 10%,var(--panel-bg))}
.tut-float{animation:tutFloat 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tut-float--b{animation-delay:-2s}
.tut-float--c{animation-delay:-4s}
@keyframes tutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tut-foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px}
.tut-go{width:100%;min-height:56px;border:0;border-radius:calc(var(--radius) + 4px);cursor:pointer;font:inherit;font-size:1.1rem;font-weight:900;
  background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 45%,var(--accent2)));color:var(--btn-ink);box-shadow:0 6px 16px var(--shadow)}
.tut-go:active{transform:scale(.98)}

/* ---- the one thing to tap ---- */
.tut-guide{outline:3px solid var(--accent) !important;outline-offset:4px;animation:tutGuide 1.3s ease-out infinite !important}
@keyframes tutGuide{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 75%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
:is(.tut-skip,.tut-go,.tut-co-skip,.tut-co-btn,.tut-ai-toggle):focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- the coach card, over the real app ---- */
.tut-coach{position:fixed;z-index:45;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:520px;
  max-height:min(52vh,420px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px;box-sizing:border-box;
  background:var(--panel-bg);color:var(--panel-ink);border:1px solid var(--choice-edge);border-radius:var(--radius);box-shadow:0 12px 30px var(--shadow);
  font-family:var(--font);animation:tutUp .35s cubic-bezier(.2,.7,.3,1) both}
.tut-coach[hidden]{display:none}
.tut-co-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tut-co-step{font-size:.72rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--panel-muted)}
.tut-co-skip{min-height:44px;padding:0 6px;border:0;background:none;color:var(--panel-ink);font:inherit;font-weight:800;font-size:.85rem;text-decoration:underline;cursor:pointer}
.tut-co-text{margin:0;font-weight:800;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.tut-co-btns{display:flex;flex-wrap:wrap;gap:8px}
.tut-co-btns:empty,.tut-co-extra:empty{display:none}
.tut-co-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;border:1.5px solid var(--choice-edge);border-radius:var(--radius-pill);
  background:var(--card-face);color:var(--card-ink);font:inherit;font-weight:800;font-size:.9rem;text-decoration:none;cursor:pointer}
.tut-co-btn svg{width:16px;height:16px;flex:0 0 auto}
.tut-co-btn.is-primary{border:0;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 45%,var(--accent2)));color:var(--btn-ink)}
.tut-co-btns .is-primary{flex:1 1 auto}
.tut-ai-toggle{min-height:44px;width:100%;display:flex;align-items:center;gap:8px;padding:0 12px;border:1.5px dashed var(--choice-edge);border-radius:var(--radius);
  background:transparent;color:var(--panel-ink);font:inherit;font-weight:800;font-size:.9rem;text-align:left;cursor:pointer}
.tut-ai-toggle svg{width:16px;height:16px;flex:0 0 auto}
.tut-ai-toggle span{min-width:0;overflow-wrap:anywhere}
.tut-ai{display:flex;flex-direction:column;gap:8px;margin-top:8px;font-size:.88rem;font-weight:600}
.tut-ai p{margin:0;overflow-wrap:anywhere}
.tut-ai-prompt{padding:10px 12px;border-radius:var(--radius);background:var(--card-face);color:var(--card-ink);border:1px solid var(--choice-edge);font-weight:700}
.tut-ai-row{display:flex;flex-wrap:wrap;gap:8px}
/* the page keeps its last button clear of the card */
html.tut-coaching .screen{padding-bottom:calc(96px + min(52vh,420px))}

/* PC: the card sits beside the left rail instead of over the tab bar */
@media (min-width:900px){
  .tut-coach{left:160px;right:32px;bottom:24px;max-width:640px;margin:0}
  html.tut-coaching .screen{padding-bottom:calc(32px + min(52vh,420px))}
}

/* ---- reduced motion: instant swaps, a still outline on the target ---- */
@media (prefers-reduced-motion:reduce){
  .tut-in,.tut-float,.tut-coach{animation:none}
  .tut-guide{animation:none !important}
}