/* CertaRounds — Profile screen styles (src/screens/profile.js) + the pickers/sheets it shares
   with Settings (pf-days, pf-rest, pf-sheet). Semantic tokens only (COMPONENTS.md §2). */

/* ---------- Page ---------- */
.pf-head { margin-bottom: 0; }
.pf-section { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pf-section > .section-header { margin: 0; }
.pf-note { font-size: var(--fs-15); color: var(--text-2); line-height: var(--lh-body); }

/* The identity card switches layout on the width of its column, not the viewport. */
.pf, .pf-col { container-type: inline-size; }
/* Two columns from 1024 (R2: a one-column 1024–1199 band left the header card ~65 % empty). */
@media (min-width: 1024px) {
  .pf { display: flex; flex-direction: column; gap: var(--sp-6); }
  .pf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) {
  .pf-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); }
}

/* ---------- Identity ---------- */
/* Avatar beside the name block; the compact "Edit profile" pill closes the name block. */
.pf-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sp-4);
}
.pf-id__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-id__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.pf-id__name {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  overflow-wrap: break-word;
}
.pf-id__name.is-empty { color: var(--text-2); }
.pf-id__level { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-accent); }
.pf-id__add { font-size: var(--fs-15); min-height: 32px; }
.pf-id__meta { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--text-2); line-height: 1.4; }
.pf-id__meta .icon { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.pf-id__meta.is-warning, .pf-id__meta.is-warning .icon { color: var(--warning); }

/* Exam countdown on the card's right side — only when the card has room for it. */
.pf-id__aside { display: none; }
@container (min-width: 520px) {
  .pf-id { column-gap: var(--sp-5); align-items: center; }
}
@container (min-width: 540px) {
  .pf-id { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pf-id__aside {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 150px; padding-left: var(--sp-5);
    border-left: 1px solid var(--divider);
    align-self: stretch; justify-content: center;
  }
  .pf-id__aside-gem { margin-bottom: 6px; display: inline-flex; }
  .pf-id__aside-label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .pf-id__aside-value { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-accent); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pf-id__aside-value.is-empty { color: var(--text-2); font-size: var(--fs-20); }
  .pf-id__aside-sub { font-size: var(--fs-13); color: var(--text-2); }
  .pf-id__aside-add { font-size: var(--fs-13); min-height: 32px; }
}
@media (min-width: 1024px) {
  .pf-id__avatar { --av: 88px; }
  .pf-id__name { font-size: var(--fs-30); }
  .pf-id__body { gap: 6px; }
  .pf-id__meta { font-size: var(--fs-15); }
  .pf-id__meta .icon { margin-top: 2px; }
}
/* 1024–1199: the main column is ~400px — a smaller avatar and title keep the card compact. */
@container (max-width: 459px) {
  .pf-id__avatar { --av: 64px; }
  .pf-id__name { font-size: var(--fs-24); }
  .pf-id__meta { font-size: var(--fs-13); }
}

/* ---------- Progress (StatCards) ---------- */
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.pf-stats .stat-card { --card-p: 14px 12px 14px 14px; min-width: 0; }
.pf-stats .stat-card__value { font-size: var(--fs-24); }
/* The widget caption clamps to 2 lines with overflow:hidden — here it must never cut anything
   (R3 P1: the "Building" pill was clipped at 360; the two-part "Seen" caption can take 3 lines). */
.pf-stats .stat-card__caption { font-size: var(--fs-12); display: block; -webkit-line-clamp: none; overflow: visible; }
.pf-stats .stat-card__caption .status-pill { margin-top: 2px; max-width: 100%; }
/* "of 5,286 questions" / "934 answers" — two parts, each kept whole where it fits. */
.pf-cap2 { display: flex; flex-direction: column; }
.pf-cap2 > span { white-space: nowrap; }                /* "5,000 answers" stays one line (R4) */
@media (min-width: 1024px) {
  .pf-stats { gap: var(--sp-4); }
  .pf-stats .stat-card { --card-p: 18px 16px 18px 18px; }
  .pf-stats .stat-card__value { font-size: var(--fs-30); }
}
/* Narrow cards (phones, and the ~400px main column at 1024–1199): 3-up stays (R2 P1: no
   2 + 1 wrap), with compact padding; every label is one word, so they share one line. */
@container (max-width: 459px) {
  .pf-stats { gap: var(--sp-2); }
  .pf-stats .stat-card { --card-p: 12px 10px 12px 12px; }
  .pf-stats .stat-card__gem { margin-bottom: 6px; }
  .pf-stats .stat-card__gem svg { width: 28px; height: 28px; }
  .pf-stats .stat-card__label { font-size: var(--fs-13); line-height: 1.3; }
  .pf-stats .stat-card__value { font-size: var(--fs-20); }
  /* The pill keeps its icon and its cap: tighter padding in a narrow card. */
  .pf-stats .stat-card__caption .status-pill { height: 26px; padding: 0 9px; font-size: var(--fs-12); gap: 4px; }
}
/* R4: the pill keeps its trend icon at 390 (status never rests on colour + word alone); only the
   ~80px cards of a 360 phone tighten it further — smaller icon, gap and type, still with its cap. */
@container (max-width: 339px) {
  .pf-stats .stat-card__caption .status-pill { padding: 0 7px 0 6px; gap: 3px; font-size: 11px; }
  .pf-stats .stat-card__caption .status-pill .icon { width: 12px; height: 12px; }
  .pf-stats .stat-card__caption { font-size: 11px; }
}
/* In an ~84px card "questions" is implied by the label "Seen"; keep the caption to two lines. */
@container (max-width: 459px) {
  .pf-cap2__q { display: none; }
}
@container (min-width: 460px) and (max-width: 559px) {
  .pf-stats { gap: var(--sp-3); }
  .pf-stats .stat-card { --card-p: 14px 12px 14px 14px; }
  .pf-stats .stat-card__value { font-size: var(--fs-24); }
}

/* ---------- List cards (plan, links) ---------- */
.pf-list-card .list-row { min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
.pf-list-card .list-row__sub { color: var(--text-2); }
.pf-tok { white-space: nowrap; }                         /* meta breaks only between tokens (D16) */
/* The header card shows the countdown from 540px: the exam row then keeps just the date. */
@container (min-width: 540px) { .pf-dte { display: none; } }

/* ---------- Milestones ---------- */
.pf-ms-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.pf-ms-list { display: flex; flex-direction: column; }
.pf-ms-list > li + li { border-top: 1px solid var(--divider); }
.pf-ms { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; min-height: 56px; }
.pf-ms__gem { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); }
.pf-ms__gem.is-locked svg { filter: grayscale(1); opacity: .45; }
.pf-ms__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-ms__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.pf-ms__sub { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf-ms__body .progress { margin-top: 6px; width: 100%; }
.pf-ms--next .pf-ms__title { color: var(--text); }
/* Sentence-case sub-heading (R2: no all-caps eyebrows against sentence-case section titles). */
.pf-ms-h {
  margin-top: var(--sp-3);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.pf-more { align-self: flex-start; margin-top: var(--sp-1); min-height: 44px; }

/* ---------- Shared: day toggles, rest days, sheets ---------- */
/* Training level: the design system's ChipGroup, with 44px targets in the sheet. */
.pf-levels .chip { height: 40px; padding: 0 16px; font-size: var(--fs-15); }

/* Study days — the icon sheet's week widget: a check circle (study) or a dashed moon (rest),
   the day label under it; the whole column is the ≥ 44px target. */
.pf-days { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 0; max-width: 460px; }
.pf-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; min-width: 44px;
  padding: 4px 0;
  border-radius: 14px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.pf-day__label { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.pf-day__mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-3); border: 1.5px dashed var(--border-control);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.pf-day[aria-pressed="true"] { color: var(--text-strong); }
.pf-day[aria-pressed="true"] .pf-day__label { font-weight: var(--fw-semibold); }
.pf-day[aria-pressed="true"] .pf-day__mark { background: var(--primary); color: var(--primary-fg); border: 1.5px solid var(--primary); }
.pf-day:hover { background: var(--surface-hover); }
.pf-day:active { background: var(--surface-pressed); }
.pf-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 360: seven 44px columns need 308px — let the row use the card's side padding. */
@media (max-width: 379px) { .pf-days { margin: 0 -8px; } }

.pf-rest { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pf-rest__chip { height: 36px; }
.pf-rest__chip .chip__remove { width: 28px; height: 28px; position: relative; }
.pf-rest__chip .chip__remove::after { content: ""; position: absolute; inset: -8px; }
.pf-rest__chip .chip__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pf-rest__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
/* The Add button sits right against the date (R3: it floated mid-row at 1440). */
.pf-rest__form .pf-date { flex: 0 1 360px; min-width: 0; }
.pf-rest__add { flex: 0 0 auto; min-height: 44px; }
/* R4: an outline "Add" sized to its label — not a second full-width CTA under the selects. */

/* Captions under a control (smaller than the row's own description). */
.pf-caption { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }

/* App-format date field: Month · Day · Year selects. */
.pf-date { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-date > legend { padding: 0; margin-bottom: 6px; }
.pf-date__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.2fr); gap: var(--sp-2); max-width: 360px; }
/* In the exam sheet the date row spans the field width (R4: two right edges). */
.pf-sheet > .pf-date .pf-date__row { max-width: none; }
.pf-date.is-disabled .field__label { color: var(--text-3); }
.pf-date .field__error { margin-top: 6px; }
.pf-date .select__input { width: 100%; min-height: 44px; padding-left: 10px; padding-right: 30px; font-size: var(--fs-15); }
.pf-date .select__chev { right: 8px; width: 16px; height: 16px; }

.pf-sheet { padding-bottom: var(--sp-2); }
.pf-sheet__h { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.pf-sheet .segmented { width: 100%; display: grid; }
.pf-sheet-foot { display: flex; gap: var(--sp-3); justify-content: flex-end; width: 100%; }
@media (max-width: 767px) { .pf-sheet-foot .btn { flex: 1 1 0; } }

.pf-readout { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); }
.pf-readout[hidden] { display: none; }
.pf-readout__title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); }
.pf-readout__text { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; line-height: 1.45; }

/* Long names (up to 60 characters) step down a size instead of running five lines deep. */
.pf-id__name.is-long { font-size: var(--fs-20); }
@media (min-width: 1024px) { .pf-id__name.is-long { font-size: var(--fs-24); } }
/* Over ~40 characters (a 59-character name ran five lines at 360): one more step down. */
.pf-id__name.is-xlong { font-size: var(--fs-17); line-height: 1.25; }
@media (min-width: 1024px) { .pf-id__name.is-xlong { font-size: var(--fs-20); } }