/* pages/trainer/skin-views.css — ember re-skin: Today and Library.
   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. */
/* ---- Today: the hero loses its boxed card, per the mockup ---- */
.shellui .dayhead{
  background:none;border:0;border-bottom:1px solid color-mix(in srgb, var(--pl-line) 50%, transparent);
  border-radius:0;padding:4px 0 40px;margin-bottom:34px;
}
.shellui .dh-kicker{letter-spacing:.3em;font-size:10px;font-weight:900}
.shellui .dayhead h2{font-size:34px;font-weight:700;letter-spacing:-.02em}
.shellui .dh-sub{font-size:15px;line-height:1.65;max-width:32rem}
.shellui .dh-date b{font-size:24px;font-weight:900;letter-spacing:-.01em}
.shellui .dh-date span{
  display:block;margin-top:6px;font-size:10px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pl-mute);
}
:root[lang="hi"] .shellui .dh-date span{text-transform:none;letter-spacing:.04em;font-size:11px}

/* the path/rail split: 3/5 + 2/5 like the mockup */
.shellui .todaygrid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:44px}
.shellui .pathhead{
  border-bottom:1px solid var(--pl-line);padding-bottom:14px;margin-bottom:20px;
}
.shellui .pathhead h3{
  font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
}
.shellui .pathhead span{letter-spacing:.2em;font-size:10px;font-weight:900}
:root[lang="hi"] .shellui .pathhead h3{text-transform:none;letter-spacing:.04em;font-size:14px}

/* path steps: icon | name+desc | right-aligned minutes + items */
.shellui .pstep{
  align-items:center;border-radius:24px;padding:22px 24px;margin-bottom:16px;
  background:color-mix(in srgb, var(--pl-card) 85%, transparent);
}
.shellui .pstep:hover{border-color:color-mix(in srgb, var(--pl-accent) 40%, transparent)}
.shellui .pstep .pico{
  width:56px;height:56px;border-radius:16px;
  background:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-accent) 20%, transparent);
  color:var(--pl-accent);font-size:20px;
}
.shellui .pstep .pico svg{width:22px;height:22px}
.shellui .pstep b{font-size:17px;font-weight:700}
.shellui .pstep .pdesc{font-size:13.5px;margin-top:4px}
.shellui .pstep .pbody{flex:1;min-width:0}
.pstat{flex:none;text-align:right}
.pstat b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.pstat b i{font-style:normal;font-size:10px;font-weight:700;color:var(--pl-mute);margin-left:3px;letter-spacing:.08em}
.pstat span{
  display:block;margin-top:4px;font-size:9.5px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pl-mute);white-space:nowrap;
}
.pstat .ok{color:var(--pl-good)}
:root[lang="hi"] .pstat span{text-transform:none;letter-spacing:.02em;font-size:10.5px}
.shellui .pchip{border-radius:5px;background:color-mix(in srgb, var(--pl-accent) 20%, transparent);color:var(--pl-accent)}

/* rail: goals as a checklist card, milestones as chips, streak + progress */
.shellui .railcard{
  border:1px solid var(--pl-line);border-radius:22px;padding:20px;
  background:color-mix(in srgb, var(--pl-card) 85%, transparent);
}
.railhead{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--pl-line);padding-bottom:14px;margin:2px 0 16px;
}
.railhead .railk{margin-bottom:0;font-size:12px;letter-spacing:.2em;font-weight:900}
.railhead i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--pl-accent)}
:root[lang="hi"] .railhead .railk{letter-spacing:.04em;font-size:13px}
.shellui .goal i{border-radius:50%;width:19px;height:19px;border-width:2px}
.shellui .goal.done i{background:color-mix(in srgb, var(--pl-accent) 12%, transparent);border-color:var(--pl-accent);color:var(--pl-accent-deep)}
.shellui .goal.done span{color:var(--pl-mute);text-decoration:none}
.shellui .goal{font-size:12.5px;font-weight:700}
.shellui .goal:hover span{color:var(--pl-accent)}
.shellui .wgoal{
  border:1px solid var(--pl-line);border-radius:14px;padding:12px 14px;margin-bottom:10px;
  background:color-mix(in srgb, var(--pl-card) 85%, transparent);
  font-size:12px;color:color-mix(in srgb, var(--pl-ink) 80%, transparent);
}
.shellui .wgoal i{background:var(--pl-accent);margin-top:7px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tbig{font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tbig i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-mute);margin-left:6px}
:root[lang="hi"] .tbig i{text-transform:none;letter-spacing:.02em}
.ticon{
  width:46px;height:46px;flex:none;border-radius:13px;
  background:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-accent) 20%, transparent);
  color:var(--pl-accent);display:flex;align-items:center;justify-content:center;
}
.ticon svg{width:20px;height:20px}
.tclick{width:100%;text-align:left;margin:0;color:inherit;font:inherit;cursor:pointer;transition:border-color .15s}
.tclick:hover{border-color:color-mix(in srgb, var(--pl-accent) 40%, transparent)}
.tclick:focus-visible{outline:2px solid var(--pl-accent);outline-offset:2px}
.tclick .railk,.tclick .tbig{display:block}
.tclick .ppbar{display:block}
.tclick .ppbar i{display:block}
.shellui .tipcard{
  background:color-mix(in srgb, var(--pl-accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-accent) 25%, transparent);
  color:var(--pl-ink);border-radius:18px;
}
.shellui .tipcard b{color:var(--pl-accent)}
.shellui .tipcard .wgoal-note{color:color-mix(in srgb, var(--pl-ink) 85%, transparent)}

/* ---- Library ---- */
.shellui .libline{letter-spacing:.35em;color:var(--pl-accent);margin-bottom:22px}
:root[lang="hi"] .shellui .libline{letter-spacing:.06em}
.shellui .kgrid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.shellui .kcell{
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:16px;padding:20px 6px 14px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.shellui .kcell:hover{
  border-color:var(--pl-accent);transform:translateY(-2px);
  box-shadow:0 0 20px color-mix(in srgb, var(--pl-accent) 20%, transparent);
}
.shellui .kcell.sel{
  border-color:var(--pl-accent);
  background:color-mix(in srgb, var(--pl-accent) 5%, var(--pl-surface));
  box-shadow:inset 0 0 0 1px var(--pl-accent);
}
.shellui .kcell.known{border-color:color-mix(in srgb, var(--pl-good) 55%, transparent)}
.shellui .kcell .c{font-size:32px;font-weight:700}
.shellui .kcell .r{margin-top:8px;font-weight:900}
.shellui .libgrid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:28px}
.shellui .libside{top:16px}
.shellui .ldetail{
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:24px;padding:26px 22px;
}
.ld-box{
  width:120px;height:120px;margin:16px auto 6px;border-radius:22px;
  background:color-mix(in srgb, var(--pl-card) 90%, transparent);
  border:2px solid var(--pl-accent);
  box-shadow:0 0 30px color-mix(in srgb, var(--pl-accent) 10%, transparent);
  display:flex;align-items:center;justify-content:center;
}
.shellui .ld-char{font-size:64px;margin:0;line-height:1;cursor:zoom-in}
.shellui .ld-read{font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-top:14px}
:root[lang="hi"] .shellui .ld-read{text-transform:none}
.ld-status{
  margin-top:6px;font-size:10px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pl-accent);
}
:root[lang="hi"] .ld-status{text-transform:none;letter-spacing:.03em}
.shellui .ld-usage{border-radius:14px;margin-bottom:8px}
.shellui .ld-add{
  background:var(--pl-ink);border:0;color:var(--pl-base);border-radius:14px;
  padding:15px;font-size:12px;letter-spacing:.06em;
  transition:background .15s,color .15s;
}
.shellui .ld-add:hover{background:var(--pl-accent);color:var(--pl-onaccent)}