/* pages/trainer/skin-progress.css — ember re-skin: Plan & Progress, quiz cards, session, toast.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- Plan & Progress ---- */
.pphero{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:34px;
}
.pphero .ppk{
  font-size:11px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;
  color:var(--pl-accent);margin-bottom:10px;
}
:root[lang="hi"] .pphero .ppk{text-transform:none;letter-spacing:.05em;font-size:12px}
.pphero h2{font-size:42px;font-weight:900;letter-spacing:-.03em;margin:0}
.ppfacts{display:flex;align-items:center;gap:22px}
.ppfact{text-align:right}
.ppfact span{
  display:block;font-size:9.5px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pl-mute);margin-bottom:4px;
}
:root[lang="hi"] .ppfact span{text-transform:none;letter-spacing:.03em}
.ppfact b{font-size:17px;font-weight:700}
.ppfact b.em{color:var(--pl-accent)}
.ppfact-sep{width:1px;height:38px;background:var(--pl-line)}

.pptoprow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;margin-bottom:34px}
.ppmastery{
  position:relative;overflow:hidden;
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:32px;padding:36px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.ppmastery::before{
  content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;
  border-radius:50%;background:color-mix(in srgb, var(--pl-accent) 5%, transparent);
  filter:blur(64px);pointer-events:none;
}
.ppmastery>*{position:relative}
.ppmastery h3{margin:0 0 12px;font-size:19px;font-weight:700;color:var(--pl-ink);text-transform:none;letter-spacing:0}
.ppmastery p{margin:0;font-size:13.5px;color:var(--pl-mute);line-height:1.6;max-width:20rem}
.ppmastery .btn{margin-top:20px}
.ppring{position:relative;width:200px;height:200px;flex:none}
.ppring svg{position:absolute;inset:0;width:100%;height:100%}
.ppring .track{stroke:color-mix(in srgb, var(--pl-accent) 10%, transparent)}
.ppring .arc{
  stroke:var(--pl-accent);
  filter:drop-shadow(0 0 15px color-mix(in srgb, var(--pl-accent) 50%, transparent));
  transition:stroke-dashoffset 1s;
}
.ppring .in{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.ppring .in b{font-size:40px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ppring .in b i{font-style:normal;font-size:18px;font-weight:700;margin-left:2px}
.ppring .in span{
  margin-top:8px;font-size:9.5px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pl-mute);
}
:root[lang="hi"] .ppring .in span{text-transform:none;letter-spacing:.04em}
.ppretention{
  background:color-mix(in srgb, var(--pl-card) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:32px;padding:28px;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;
}
.ppretention .railk{letter-spacing:.2em}
.ppretention .big{font-size:36px;font-weight:900;letter-spacing:-.02em}
.ppretention .big i{font-style:normal;font-size:16px;font-weight:700;color:var(--pl-accent);margin-left:2px}
.ppretention p{margin:8px 0 0;font-size:12px;color:var(--pl-mute);line-height:1.6}
.ppspark{height:72px;margin-top:16px;opacity:.6}
.ppspark svg{width:100%;height:100%;display:block}
.ppspark .line{fill:none;stroke:var(--pl-accent);stroke-width:2}
.ppspark .fill{fill:color-mix(in srgb, var(--pl-accent) 6%, transparent);stroke:none}

.ppsec{
  font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pl-mute);margin:0 0 20px;
}
:root[lang="hi"] .ppsec{text-transform:none;letter-spacing:.04em;font-size:13px}
.ppcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:34px}
.ppcat{
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:22px;padding:20px;
  transition:border-color .15s;
}
.ppcat:hover{border-color:color-mix(in srgb, var(--pl-accent) 40%, transparent)}
.ppcat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ppcat .glyph{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  color:var(--pl-accent);font-size:14px;font-weight:900;
  border:1px solid color-mix(in srgb, var(--pl-accent) 20%, transparent);
}
.ppcat .top i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--pl-mute);font-variant-numeric:tabular-nums}
.ppcat h4{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--pl-ink);text-transform:none;letter-spacing:0}
.ppcat .ppbar{height:4px}
.ppcat .pct{
  display:block;margin-top:6px;font-size:9px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pl-mute);
}

.pphm{
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:32px;padding:32px;margin-bottom:34px;
}
.pphm-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.pphm i{
  width:14px;height:14px;border-radius:3px;font-style:normal;
  background:color-mix(in srgb, var(--pl-line) 40%, transparent);
}
.pphm i.l1{background:color-mix(in srgb, var(--pl-accent) 20%, transparent)}
.pphm i.l2{background:color-mix(in srgb, var(--pl-accent) 40%, transparent)}
.pphm i.l3{background:color-mix(in srgb, var(--pl-accent) 70%, transparent)}
.pphm i.l4{background:var(--pl-accent)}
.pphm i.today{
  box-shadow:0 0 15px color-mix(in srgb, var(--pl-accent) 50%, transparent),
             0 0 0 2px color-mix(in srgb, var(--pl-ink) 10%, transparent);
}
.pphm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-mute);
}
:root[lang="hi"] .pphm-foot{text-transform:none;letter-spacing:.02em;font-size:11px}
.pphm-foot b{color:var(--pl-accent);font-weight:900}
.pphm-scale{display:flex;align-items:center;gap:10px}
.pphm-scale span{display:flex;gap:5px}
.pphm-scale i{width:10px;height:10px;border-radius:2px;font-style:normal}

.ppactivity{
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:32px;padding:28px;margin-bottom:34px;
}
.shellui .ppdays{height:120px;gap:4px}
.shellui .ppday{background:color-mix(in srgb, var(--pl-line) 40%, transparent);border-radius:3px}
.shellui .ppday i{border-radius:3px}

/* the plan + roadmap cards keep their structure, on the new surfaces */
.shellui .ppplan{
  border-color:color-mix(in srgb, var(--pl-accent) 40%, var(--pl-line));
  box-shadow:0 0 20px color-mix(in srgb, var(--pl-accent) 10%, transparent);
}

/* ---- Quiz menu cards ---- */
.shellui .g2>.card{border-radius:20px;padding:20px;transition:border-color .15s}
.shellui .g2>.card:hover{border-color:color-mix(in srgb, var(--pl-accent) 45%, transparent)}

/* ---- session surfaces: geometry only, palette flows from the remap ---- */
.shellui .fc,.shellui .teach{border-radius:24px}
.shellui .card{border-radius:18px}
.shellui .gr0,.shellui .gr1,.shellui .gr2,.shellui .gr3{color:var(--pl-onaccent)}
.shellui .pill.on{color:var(--pl-onaccent)}
.shellui .sx-chip.on{color:var(--pl-onaccent)}
.shellui .pchip{color:var(--pl-accent)}
.shellui .ld-chip{color:var(--pl-onaccent)}

/* ---- toast: the confirmations the footer note used to carry ---- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  max-width:min(30rem, calc(100vw - 32px));
  background:var(--pl-card);border:1px solid var(--pl-line);border-radius:14px;
  padding:12px 20px;font-size:13px;color:var(--pl-ink);
  box-shadow:0 18px 50px var(--pl-shadow);
}
#toast[hidden]{display:none}
@media(max-width:899px){ #toast{bottom:70px} }

/* The data card's destructive action reads as destructive without shouting.
   background:none is load-bearing — `.btn.danger` (style.css) paints a solid
   fill, which with a danger-coloured label rendered red text on red. */
.shellui .btn.ghost.danger{
  background:none;border-color:var(--pl-danger);color:var(--pl-danger);
}
.shellui .btn.ghost.danger:hover{background:color-mix(in srgb, var(--pl-danger) 12%, transparent)}

/* ---- scrollbars, per the mockup ---- */
.shellui ::-webkit-scrollbar{width:6px;height:6px}
.shellui ::-webkit-scrollbar-track{background:transparent}
.shellui ::-webkit-scrollbar-thumb{background:var(--pl-line);border-radius:10px}
.shellui ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--pl-ink) 20%, transparent)}


/* ---- the trophy room (wireframe 1n) ----------------------------------- *
 * The board's own primitives, scoped to the Progress view so .bx .pill .bar
 * .fill .tag cannot reach the trainer's other screens. Measured off the
 * board: .bx 2px/12px/10px, .pill 2px/999px/1px 12px, .bar 14px with a 2px
 * outline, .tag 12px at .06em in the display voice.
 */
.shellui .trophy .bx{
  border:2px solid var(--play-ink);border-radius:12px;padding:10px;
  background:var(--play-card);color:var(--play-ink);
}
.shellui .trophy .bx.is-paper{background:var(--play-paper)}
.shellui .trophy .tag{
  font-family:var(--play-display);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--play-mute);
}
:root[lang="hi"] .shellui .trophy .tag{text-transform:none;letter-spacing:0}
.shellui .trophy .pill{
  display:inline-block;border:2px solid var(--play-ink);border-radius:999px;
  padding:1px 12px;background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.8rem;white-space:nowrap;
}
button.pill{cursor:pointer}
.shellui .trophy .bar{
  height:14px;border:2px solid var(--play-ink);border-radius:999px;
  background:var(--play-card);overflow:hidden;display:block;
}
.shellui .trophy .fill{display:block;height:100%;background:var(--play-accent);border-radius:999px}

/* row 1 — the ring, the title and the streak */
.tr-level{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* The ring is the kit's own .p-ring — a conic track whose --p is the real
   share of the current level earned (decision 0017). Only the stack inside
   it is shaped here; the two-quadrant mock ring this replaced was an
   unscoped .tr-ring rule that also leaked onto the Today trail's ring. */
.tr-level .p-ring{flex:none}
.tr-level .p-ring>span{gap:2px;padding:10px}
.tr-lv{font-family:var(--play-display);font-size:1.9rem;font-weight:700;line-height:1}
.tr-lvmeta{flex:1;min-width:200px;display:flex;flex-direction:column;gap:5px}
.tr-lvtitle{font-family:var(--play-display);font-size:1.25rem}
.tr-streak{text-align:center;padding:10px 16px}
.tr-streak b{display:block;font-family:var(--play-display);font-size:1.5rem}

/* row 2 — the garden and the wanted posters */
.tr-row{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;margin-top:12px}
.tr-garden,.tr-wanted{display:flex;flex-direction:column;gap:6px}
.shellui .trophy .gd-row{display:flex;text-align:center;gap:6px}
.shellui .trophy .gd-col{flex:1;display:flex;flex-direction:column;gap:2px}
.shellui .trophy .gd-plant{font-size:1.35rem;line-height:1}
.tr-cap{opacity:.8}
.shellui .trophy .wr{display:flex;align-items:center;gap:8px}
.shellui .trophy .wr-g{font-size:1.25rem}
.shellui .trophy .wr-m{flex:1}

/* row 3 — thirty real days */
.tr-quilt{margin-top:12px;display:flex;flex-direction:column;gap:10px;padding:12px}
.q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.q-rule{flex:1;border-top:2px dashed var(--play-track);min-width:20px}
.q-body{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.q-grid{display:flex;flex-direction:column;gap:6px}
.q-row{display:flex;gap:6px;align-items:flex-start}
.q-dow{width:22px;text-align:center;font-size:.6rem}
.q-cell{
  width:22px;height:22px;border:2px solid var(--play-ink);border-radius:2px;
  background:var(--play-card);flex:none;
}
.q-cell.is-full{background:var(--play-accent)}
.q-cell.is-part{background:var(--play-accent-soft)}
.q-cell.is-rest{border-color:var(--play-soft);background:var(--play-lock)}
.q-cell.is-future{border-style:dashed;border-color:var(--play-soft);background:none}
.q-cell.is-pad{border:0;background:none}
/* Today breaks the grid, so the calendar has one hero instead of thirty
   equal marks. */
.q-today{
  width:40px;height:40px;margin:-9px -9px 0;border-width:3px;border-radius:3px;
  box-shadow:0 5px 0 var(--play-edge);display:flex;align-items:center;
  justify-content:center;font-size:1.15rem;z-index:1;position:relative;
}
.q-side{flex:1;min-width:190px;display:flex;flex-direction:column;gap:8px}
.q-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.q-key{display:inline-flex;align-items:center;gap:4px}
.q-key .q-cell{width:14px;height:14px}
.q-says{display:flex;align-items:center;gap:8px;padding:6px 10px}
.q-says .p-tanu{color:var(--play-ink);flex:none}
.q-note{font-size:.85rem;flex:1}
.q-pills{display:flex;gap:6px;flex-wrap:wrap}
.tr-more{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

@media (max-width:760px){
  .tr-row{grid-template-columns:1fr}
}
@media (max-width:480px){
  /* Seven columns of 22px plus gaps do not fit 320px; the quilt shrinks
     rather than scrolling sideways. */
  .q-cell{width:16px;height:16px}
  .q-dow{width:16px}
  .q-row{gap:4px}
  .q-today{width:30px;height:30px;margin:-7px -7px 0;font-size:.9rem}
  .q-key .q-cell{width:12px;height:12px}
}