/* pages/trainer/skin-quest.css — the Today quest board and the session
   payoff screen (wireframes 1f and 1j2, decision 0015). Colours are
   --play-* tokens only; pieces come from components/playful.css. */

.qb-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.qb-card{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:14px 8px 12px;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);font-size:.95rem;cursor:pointer}
.qb-card:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--play-edge)}
.qb-card:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.qb-card.is-cur{box-shadow:0 5px 0 var(--play-edge);background:var(--play-paper)}
.qb-card.is-cur:hover{transform:none}
.qb-card.is-done{background:var(--play-lock)}
.qb-card b{font-size:1.05rem}
.qb-card .p-node{width:46px;height:46px}
.qb-card .p-node svg{width:22px;height:22px}
.qb-card .p-pill{font-size:.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.qb-go{font-size:.95rem;padding:4px 18px;pointer-events:none}

.qdone{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 18px;border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display)}
.qdone h2{margin:0;font-size:1.6rem}
.qd-tanu{width:80px;height:80px;font-size:1.1rem}
/* Boss verdict: the oni (or trophy) and the tanuki's face to it, side by side. */
.qd-duo{display:flex;align-items:center;gap:14px}
.qd-emoji{font-size:44px;line-height:1}
.qd-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.qd-next{font-size:1.1rem}

@media (max-width:700px){
  .qb-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .qb-card{transition:none}
}

/* Trophy-room extras (wireframe 1n): the garden and the wanted posters. */
.gd-row{display:flex;text-align:center}
.gd-col{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;font-family:var(--play-display)}
.gd-plant{font-size:1.6rem}
.wanted .wr{display:flex;align-items:center;gap:10px;padding:4px 0}
.wanted .wr-g{font-size:1.25rem}
.wanted .wr-m{color:var(--play-mute);font-family:var(--play-display)}

/* ---- Today, as wireframe 1f ------------------------------------------- *
   Title and the tanuki's line on one rule, the day's own progress under
   it, the four stages, then quests and chests. No side rail: 1f puts
   everything on one column, and the numbers that used to sit in the rail
   have their own screens (streak and progress on the map and in Progress,
   the week's note in the plan). */
.qb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.qb-head>b{font-family:var(--play-display);font-size:1.5rem;line-height:1.1}
.qb-says{gap:10px}
.qb-says .p-tanu{color:var(--play-ink)}
.qb-says .p-bub{margin:0;font-size:.95rem}
.qb-day{margin-bottom:12px}

.qb-bottom{display:flex;gap:10px;align-items:stretch;margin-top:10px;flex-wrap:wrap}
.qb-quests{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.qb-quest{display:flex;align-items:center;gap:10px;font-family:var(--play-display);font-size:.9rem}
.qb-quest .p-bar{flex:1;height:12px}
.qb-chests{width:190px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.qb-chestrow{font-size:1.5rem;letter-spacing:.28em;line-height:1.4}
.qb-chestnote{text-transform:none;letter-spacing:0}

@media (max-width:640px){
  .qb-chests{width:100%}
}

/* The quest rows are buttons: a ticked one can be unticked to redo that
   stage, which is what the old goal list was for. */
.qb-title{display:flex;flex-direction:column;gap:1px;min-width:0}
.qb-sub{font-family:var(--play-display);font-size:.78rem;color:var(--play-mute)}
button.qb-quest{width:100%;text-align:left;background:none;border:0;padding:2px 0;cursor:pointer;color:var(--play-ink)}
button.qb-quest:hover .p-bar{border-color:var(--play-link)}
button.qb-quest:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:8px}
.qb-quest.done{color:var(--play-mute)}
.qb-quest.done .p-fill{background:var(--play-accent)}

/* ---- Today's trail (1f, redrawn) -------------------------------------- */
.tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tr-head>b{font-family:var(--play-display);font-size:1.5rem;line-height:1.1}
.tr-sub{font-family:var(--play-display);font-size:.78rem;color:var(--play-mute)}
.tr-ring b{font-family:var(--play-display);font-size:.9rem}

/* The canvas is a percentage coordinate space: the hops are one SVG using
   the same numbers as the stops, so the path holds its shape at any width.
   non-scaling-stroke keeps the dashes from stretching with the viewBox. */
.tr-canvas{position:relative;height:290px;margin:4px 0 10px}
.tr-hops{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-hop{stroke:var(--play-soft);stroke-width:3;stroke-dasharray:7 7;stroke-linecap:round}
.tr-hop.is-walked{stroke:var(--play-ink)}
.tr-chest{position:absolute;transform:translate(-50%,-50%);font-size:1.15rem;opacity:.4}
.tr-chest.is-open{opacity:1}
.tr-stop{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:5px;white-space:nowrap}
.tr-node{width:58px;height:58px;font-size:1.5rem;cursor:pointer}
.tr-stop.is-cur .tr-node{width:74px;height:74px;font-size:1.8rem}
.tr-node:hover{transform:translateY(-2px)}
.tr-node:focus-visible{outline:3px solid var(--play-link);outline-offset:3px}
.tr-chip{font-size:.82rem;cursor:pointer;font-family:var(--play-display)}
button.tr-chip:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.tr-tanu{position:absolute;left:30%;top:2%;gap:8px}
.tr-tanu .p-tanu{color:var(--play-ink)}
.tr-tanu .p-bub{margin:0;font-size:.85rem;white-space:nowrap}
.tr-end{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.tr-end[aria-hidden="true"]{opacity:.35}
.tr-torii{font-size:1.8rem}

.tr-pebbles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tr-pebbles .p-pill{font-size:.85rem}
button.p-pill{cursor:pointer;font-family:var(--play-display)}
button.p-pill:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* No room to wind: the trail becomes the list it always was underneath. */
@media (max-width:760px){
  .tr-canvas{height:auto;display:flex;flex-direction:column;gap:12px}
  .tr-hops,.tr-chest,.tr-tanu,.tr-end{display:none}
  .tr-stop{position:static;transform:none;flex-direction:row;gap:12px;
    left:auto !important;top:auto !important}
  .tr-stop .tr-node{flex:none}
}

/* ---- inside the stages (wireframes 6a–6d) ----------------------------- */
/* One rule across all four: leave, progress, and where you are. */
.ss-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ss-top>.p-bar{flex:1}
.ls-segs{display:flex;gap:5px;flex:1}
.ls-seg{flex:1;height:10px}

/* 6a — the item alone on the left, everything explaining it on the right. */
.ls-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.ls-hero{text-align:center}
.ls-aside{display:flex;flex-direction:column;gap:10px;min-width:0}
.ls-aside .p-says{align-items:flex-start;gap:10px}
.ls-aside .p-tanu{color:var(--play-ink);flex:none}
.ls-aside .p-bub{margin:0;font-size:.85rem}
.ls-notes{display:flex;flex-direction:column;gap:8px;text-align:left}
.ss-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* 6c — the interval each grade buys, printed under it. */
.ss-grades{display:flex;gap:8px;justify-content:center;align-items:flex-start}
.ss-grade{display:flex;flex-direction:column;align-items:center;gap:3px}
.ss-grade .ivl{display:block}

@media (max-width:820px){
  .ls-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  /* four grades in two rows, not three-and-a-stray. */
  .ss-grades{flex-wrap:wrap}
  .ss-grade{flex:1 1 40%}
  .ss-grade .btn{width:100%}
}

/* ---- 10a: the learn card's two co-stars ------------------------------- */
/* Watching it drawn and drawing it yourself are the same size. The old card
   gave one a wide empty half and the other a narrow rail. */
.ls-grid.is-trace{grid-template-columns:1fr 1fr}
.ls-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.ls-step{align-self:flex-start}
.ls-stage{
  background:var(--play-paper);border:2px solid var(--play-edge);border-radius:16px;
  padding:10px;text-align:center;
}
.ls-stage .t-big{margin:0}
.ls-stage .gclip{margin:0}
/* A kanji's stroke order stands in the same slot (#228). The head goes: the
   column already says "Watch it" and the card already shows the stroke count,
   and without it the column outgrows the 212px pad beside it. */
.ls-stage .sorder{margin:0}
.ls-stage .sorder-head{display:none}
.ls-read{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ls-read b{font-size:1.2rem}
.ls-says{align-items:flex-start;gap:8px}
.ls-says .p-tanu{color:var(--play-ink);flex:none}
.ls-says .p-bub{margin:0;font-size:.85rem;text-align:left}
/* The pad matches the clip stage beside it rather than growing to the
   column: a square canvas at half the card's width would be taller than the
   screen. The stage owns the paper and the frame so the canvas itself can be
   transparent — otherwise it paints over the ghost glyph under it. */
.ls-col .sketch{margin:0;max-width:none}
.ls-col .sketch-stage{
  background:var(--play-paper);border:2px solid var(--play-edge);border-radius:16px;
  overflow:hidden;grid-template-rows:212px;
}
.ls-col .sketch-pad{
  background:none;border-width:0;border-radius:0;aspect-ratio:auto;height:100%;
}

/* One strip for everything that is not the character itself. */
.ls-strip{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ls-mix{flex:1;min-width:240px}
.ls-mix,.ls-word{display:flex;align-items:center;gap:8px;padding:6px 12px}
.ls-glyph{
  background:none;border:0;cursor:pointer;font-size:1.35rem;color:var(--play-ink);
  display:inline-flex;align-items:baseline;gap:4px;padding:0 2px;
}
.ls-glyph i{font-style:normal;font-size:.7rem;color:var(--play-mute)}
.ls-glyph:hover{color:var(--play-accent)}
.ls-glyph.is-twin{opacity:.6}
.ls-word .jp{font-size:1.15rem}

/* GOT IT waits rather than refuses while the pad is untouched — see the
   sketch:change handler for why this is a nudge and not a lock. */
.ss-foot .p-btn.is-waiting{opacity:.6}

@media (max-width:820px){
  .ls-grid.is-trace{grid-template-columns:1fr}
}