/* Profile and stats (step 10, profile.js). Colours come from the theme tokens in style.css. */

/* ---------- avatar: initials in a coloured circle; the theme sets lightness and the letters' colour ---------- */
:root { --av-s: 50%; --av-l: 40%; --av-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --av-s: 62%; --av-l: 72%; --av-ink: #111317; } }
:root[data-theme='dark'] { --av-s: 62%; --av-l: 72%; --av-ink: #111317; }
:root[data-theme='calm'] { --av-s: 30%; --av-l: 38%; --av-ink: #fbf6ec; }

.avatar {
  --size: 40px;
  flex: none; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center;
  background: hsl(var(--av-h, 222) var(--av-s) var(--av-l)); color: var(--av-ink);
  font-size: calc(var(--size) * 0.4); font-weight: 750; line-height: 1; letter-spacing: 0.01em; user-select: none;
}
.avatar.sm { --size: 30px; }
.avatar.lg { --size: 68px; }
.avatar.blank { background: var(--surface-2); color: var(--ink-2); }
.avatar.blank .i { width: 56%; height: 56%; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- G6: the profile button on every page, with the streak and its flame ---------- */
.pf-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; height: 44px; padding: 0 7px; border-radius: 22px; color: var(--ink-2);
}
.pf-btn:hover { background: var(--surface-2); }
.pf-btn[aria-current='page'] { background: var(--surface-2); }
.pf-btn.has-streak { padding-left: 9px; }
.pf-streak { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .topbar .pf-btn { min-width: 40px; padding: 0 5px; } .topbar .pf-btn.has-streak { padding-left: 6px; } }
/* Phones, pages with a title: room for the title next to the profile button. The theme stays in Settings and on the
   home page's header; the language chip keeps its letters. */
@media (max-width: 400px) {
  .topbar-in.has-title .theme-btn { display: none; }
  .topbar-in.has-title .lang-chip { padding: 0 8px; }
  .topbar-in.has-title .lang-chip .i { display: none; }
}

/* Six sizes, day 2 to day 7 (--fs 0 … 5), then it stays; it also fills in a little more each day. */
.flame { --fs: 0; flex: none; display: inline-grid; place-items: center; width: calc(13px + var(--fs) * 1.5px); height: calc(13px + var(--fs) * 1.5px); color: var(--warn); }
.flame .i { width: 100%; height: 100%; fill: currentColor; fill-opacity: calc(0.18 + var(--fs) * 0.1); stroke-width: 2.2; }
.pf-stat .flame { width: calc(17px + var(--fs) * 2px); height: calc(17px + var(--fs) * 2px); margin-right: 2px; }
.pf-stat b .flame .i { width: 100%; height: 100%; color: var(--warn); }
:root[data-motion='on'] .flame .i { transform-origin: 50% 90%; animation: flame-flicker 2.8s ease-in-out infinite; }
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.04, 0.97) rotate(-2deg); }
  70% { transform: scale(0.98, 1.04) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { :root:not([data-motion='on']) .flame .i { animation: none; } }

/* ---------- G6: Mastered on the word card ---------- */
.wc-mastered {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 11px 4px 8px; border-radius: 99px;
  background: var(--good-soft); color: var(--good); font-size: 13.5px; font-weight: 650;
}
.wc-mastered .i { width: 18px; height: 18px; }
.wc-stats .wc-passes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.wc-passes-label { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.wc-pass {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px;
  border: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
}
.wc-pass > i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.wc-pass .i { width: 14px; height: 14px; }
.wc-pass.on { border-color: transparent; background: var(--good-soft); color: var(--good); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Settings: the row at the top */
.pf-row {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 16px; color: var(--ink);
}
.pf-row:hover { background: var(--surface-2); }
.pf-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pf-row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row-text small { font-size: 13px; color: var(--ink-2); }
.pf-row > .i { color: var(--ink-3); }

/* ---------- page ---------- */
.profile { max-width: 760px; }
.pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.pf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pf-name { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.pf-name.muted { font-size: 18px; font-weight: 600; }
.pf-who p { margin: 0 0 6px; }
.pf-private { flex-basis: 100%; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); }

.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .pf-stats:not(.two) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 380px) { .pf-stats.three { gap: 8px; } .pf-stats.three .pf-stat { padding: 10px 9px; } }
.pf-stat { min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pf-stat b { display: flex; align-items: center; gap: 4px; font-size: 26px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-stat b .i { width: 22px; height: 22px; color: var(--ink-3); }
.pf-stat.hot b .i { color: var(--warn); }
.pf-stat.good b { color: var(--good); }
.pf-stat.pf-min b { align-items: baseline; flex-wrap: wrap; row-gap: 0; column-gap: 3px; }
@media (max-width: 380px) { .pf-stats.three .pf-stat b { font-size: 22px; } }
.pf-stat b .pf-unit { font-size: 14px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }

.pf-stat span.pf-nw { display: inline; white-space: nowrap; }
/* (i) after a stat's label, and its popover (infoButton in profile.js). The tap area is larger than the icon. */
.info-btn {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: -2px 0 0 4px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); vertical-align: middle; cursor: pointer;
}
.info-btn::before { content: ''; position: absolute; inset: -11px; }
.info-btn .i { width: 16px; height: 16px; }
.info-btn:hover, .info-btn[aria-expanded='true'] { color: var(--accent); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-stat span.info-pop, .info-pop {
  position: fixed; z-index: 40; display: block; width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18); font-size: 13.5px; font-weight: 450; line-height: 1.45; text-align: left;
  overflow-wrap: break-word; white-space: normal; letter-spacing: normal; text-transform: none; outline: none;
}
.info-pop::before {
  content: ''; position: absolute; top: -6px; left: calc(var(--arrow, 50%) - 6px); width: 10px; height: 10px;
  background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg);
}
.info-pop.above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
:root[data-motion='on'] .info-pop { animation: info-in 0.14s ease-out; }
@keyframes info-in { from { opacity: 0; transform: translateY(-3px); } }
:root[data-text='large'] .info-pop { font-size: 15.5px; }
:root[data-text='large'] .info-btn, :root[data-text='large'] .info-btn .i { width: 18px; height: 18px; }
.pf-stat span { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.pf-sub { margin: 18px 0 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); }

/* ---------- calendar: 12 week columns, Monday at the top ---------- */
.cal { --cell: minmax(0, 1fr); --gap: 3px; max-width: 440px; }
.cal-months { position: relative; height: 1.4em; margin-left: calc(2.6em + 6px); font-size: 12px; color: var(--ink-3); }
.cal-months span { position: absolute; left: calc(var(--w) * (100% + var(--gap)) / 12); white-space: nowrap; }
.cal-months span.end { left: auto; right: calc(var(--r) * (100% + var(--gap)) / 12); }
.cal-body { display: flex; gap: 6px; }
.cal-wd {
  flex: none; width: 2.6em; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); row-gap: var(--gap);
  font-size: 11px; line-height: 1; color: var(--ink-3);
}
.cal-wd span { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.cal-wd span:nth-child(1) { grid-row: 1; }
.cal-wd span:nth-child(2) { grid-row: 3; }
.cal-wd span:nth-child(3) { grid-row: 5; }
.cal-grid {
  flex: 1; min-width: 0; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, auto); grid-template-columns: repeat(12, var(--cell)); gap: var(--gap);
}
.cal-day {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px;
  background: var(--surface-2); cursor: pointer;
}
.cal-day.l1 { background: color-mix(in srgb, var(--good) 34%, var(--surface-2)); }
.cal-day.l2 { background: color-mix(in srgb, var(--good) 55%, var(--surface-2)); }
.cal-day.l3 { background: color-mix(in srgb, var(--good) 78%, var(--surface-2)); }
.cal-day.l4 { background: var(--good); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cal-day.future { visibility: hidden; cursor: default; }
.cal-day[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); position: relative; z-index: 1; }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; }
.cal-info { margin: 0; min-height: 1.5em; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); }
.cal-legend .cal-day { width: 11px; height: 11px; aspect-ratio: auto; cursor: default; border-radius: 3px; }
.cal-legend .cal-day:first-of-type { margin-left: 4px; }
.cal-legend .cal-day:last-of-type { margin-right: 4px; }

/* ---------- per book ---------- */
.pf-books { list-style: none; margin: 0; padding: 0; }
.pf-book { display: block; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 0; }
.pf-books li:first-child .pf-book { border-top: 0; padding-top: 2px; }
.pf-book:hover { background: var(--surface-2); border-radius: 10px; }
.pf-book-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pf-book-top b { min-width: 0; overflow-wrap: anywhere; }
.pf-book-top span { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-book .pbar { display: flex; }
.pf-book-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-book-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- weakest words ---------- */
.pf-weak-note { margin: -6px 0 6px; }
.pf-weak { margin-bottom: 14px; }
.pf-weak li { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); }
.pf-weak li:first-child { border-top: 0; }
.pf-weak .word { flex: 1; min-width: 0; border-top: 0; cursor: default; }
.pf-weak .word:hover { background: none; }
.pf-weak .word-tr { display: flex; flex-direction: column; align-items: flex-end; }
.pf-rec { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-weak .icon-btn.sm { color: var(--accent); }
.pf-wait { display: grid; place-items: center; min-height: 80px; }

#pf-name-form .modal-actions { flex-wrap: wrap; }

/* ---------- deleting the account (step 12) ---------- */
.pf-del { border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.pf-del .muted { margin: 0 0 14px; }
.pf-del-warn { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 12px; border-radius: 12px;
  background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.pf-del-warn .i { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.pf-del-who { margin: 0 0 14px; overflow-wrap: anywhere; }
.pf-del-field > span { display: block; }
.pf-del-field b { color: var(--ink); overflow-wrap: anywhere; }
#pf-del-form .modal-actions { flex-wrap: wrap; }
.pf-del-link { margin-top: 4px; }

/* ---------- Large text ---------- */
:root[data-text='large'] .pf-stat span, :root[data-text='large'] .pf-book-top span, :root[data-text='large'] .pf-book-meta,
:root[data-text='large'] .pf-row-text small, :root[data-text='large'] .pf-rec { font-size: 15px; }
:root[data-text='large'] .pf-stat b { font-size: 28px; }
:root[data-text='large'] .pf-streak, :root[data-text='large'] .wc-pass, :root[data-text='large'] .wc-passes-label { font-size: 15px; }
:root[data-text='large'] .wc-mastered { font-size: 15px; }
:root[data-text='large'] .pf-name { font-size: 24px; }
:root[data-text='large'] .pf-sub, :root[data-text='large'] .cal-info { font-size: 16px; }
:root[data-text='large'] .cal-months, :root[data-text='large'] .cal-legend { font-size: 13.5px; }
:root[data-text='large'] .cal-wd { font-size: 12.5px; }
:root[data-text='large'] .word-ko b { font-size: 20px; }