/* pages/trainer/profile.css — the Profile screen's layout (wireframe 22a).
   Layout only: every surface is a kit primitive (.p-bx .p-pill .p-tag
   .p-bar .p-gbtn) and every colour a --play-* token (decision 0008).
   Loads last in the trainer's page layer so it wins over the ember skin. */

.pf{display:flex;flex-direction:column;gap:12px;font-family:var(--play-display);color:var(--play-ink)}

/* Identity row: face · name + email · exam pill. */
.pf-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-face{position:relative;flex:none}
.pf-face .av-face{box-shadow:0 5px 0 var(--play-edge)}
.pf-change{position:absolute;bottom:-6px;right:-8px;font-size:.7rem;padding:1px 8px}
.pf-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-namerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pf-name{font-size:1.65rem;font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.pf-mail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.85rem;font-weight:700}
.pf-mail .p-pill{font-size:.7rem}
.pf-exam{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto}
.pf-exam .p-pill{font-size:.8rem}

/* Inline name editor — replaces the name until saved or cancelled. */
.pf-nameform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pf-input{
  border:2px solid var(--play-ink);border-radius:999px;padding:3px 12px;
  background:var(--play-card);color:var(--play-ink);font:inherit;min-width:0;width:12em;max-width:100%;
}

/* Stat row: five cells, wrapping to a 2–3 column grid on narrow screens. */
.pf-stats{display:flex;gap:10px;flex-wrap:wrap}
.pf-stat{flex:1 1 92px;text-align:center;padding:9px 6px;min-width:0}
.pf-stat b{display:block;font-size:1.4rem;line-height:1.15}
.pf-stat .p-tag{font-size:.65rem;display:block;white-space:normal}

/* Map card + side column. */
.pf-grid{display:grid;grid-template-columns:1fr 260px;gap:12px;align-items:stretch}
.pf-h{display:flex;align-items:center;gap:8px}
.pf-h::after{content:"";flex:1;border-top:2px solid var(--play-track)}
.pf-regions{display:flex;gap:8px;margin-top:8px;text-align:center}
.pf-region{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:stretch}
.pf-glyph{font-family:var(--jp);font-size:1.4rem;line-height:1.2}
.pf-region b{font-size:.7rem;line-height:1.15}
.pf-region .p-bar{height:8px}
.pf-region .p-tag{font-size:.65rem}
.pf-nudge{display:flex;align-items:center;gap:8px;margin-top:10px;border-top:2px dashed var(--play-track);padding-top:8px}
.pf-nudge .p-says{flex:1;min-width:0}
.pf-nudge .p-bub{font-size:.9rem}
.pf-link{white-space:nowrap;font-size:.75rem;cursor:pointer;background:none;border:0;padding:6px 0;font-family:inherit;color:var(--play-ink);text-decoration:underline;text-underline-offset:3px}
/* Ink, not --play-link: the link token measures 4.43:1 on the card in light theme. */

.pf-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.pf-row>.p-tag{flex:1;min-width:0}
.pf-row .p-pill{font-size:.7rem}
.pf-select{
  border:2px solid var(--play-ink);border-radius:999px;padding:1px 10px;
  background:var(--play-card);color:var(--play-ink);font:inherit;font-size:.75rem;max-width:100%;
}
.pf-sync{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pf-sync>b{flex:1;min-width:0;font-size:.85rem}
.pf-sync .p-ic{width:22px;height:22px;font-size:.7rem}
.pf-actions{display:flex;gap:6px}
.pf-actions .p-gbtn{flex:1;font-size:.8rem;padding:6px 8px}
.pf-band{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}
.pf-band .p-ic{width:24px;height:24px;font-size:.7rem}
.pf-band>span:last-child{flex:1;min-width:0}
/* .p-soft paints its text in --play-mute, a caption colour that fails AA for
   reading text in light theme (#135). These three carry sentences. */
.pf-note{font-size:.85rem;margin:0}
.pf-band,.pf-note,.p-soft.pf-sync{color:var(--play-ink)}

/* Kit pills used as controls: buttons don't inherit fonts by default, and
   the kit has no focus ring for pills, tags or the tanuki nudge link. */
.pf button.p-pill,.pf button.p-tag{font:inherit;cursor:pointer;line-height:inherit}
.pf button.p-pill{font-family:var(--play-display)}
.pf button.p-tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;padding:6px 4px;margin:-6px 0}
.pf button:focus-visible,.pf select:focus-visible,.pf input:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* Devanagari must never be uppercased (docs/bugs.md #60 family). */
:root[lang="hi"] .pf .p-tag,:root[lang="hi"] .pf button.p-tag{text-transform:none;letter-spacing:0}

@media (max-width:899px){
  .pf-grid{grid-template-columns:1fr}
  .pf-exam{margin-left:0;align-items:flex-start;flex-basis:100%}
}
@media (max-width:480px){
  .pf-regions{flex-wrap:wrap}
  .pf-region{flex:1 1 40%}
  .pf-nudge{flex-wrap:wrap}
}

/* The courses card (decision 0019): one row per added course — glyph, name,
   the open one's pill, then its derived progress. Colours are the kit's. */
.pf-courses{display:flex;flex-direction:column;gap:8px}
.pf-course{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center}
.pf-course .pf-glyph{grid-row:1/4;font-size:22px;line-height:1}
.pf-course b{font-size:1rem}
.pf-course .p-pill{justify-self:end;font-size:.78rem}
.pf-course .p-bar{grid-column:2/4}
.pf-course .p-tag{grid-column:2/4}
.pf-course-more{margin:2px 0 0}
:root[lang="hi"] .pf-course .p-tag,:root[lang="hi"] .pf-course-more{text-transform:none;letter-spacing:0}