/* LexyBooster · Soft Card — icons, tap targets, empty / day-zero / error states
 * Load AFTER soft-card.css and BEFORE soft-card-overrides.css.
 * Depends on the --sc-* tokens from soft-card.css.
 */

/* ─────────────────────────────────────────────── icons */

.sc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;          /* size lives here, never on width/height */
  line-height: 0;
  color: inherit;           /* currentColor drives the stroke */
  flex: 0 0 auto;
  vertical-align: -0.15em;
}
.sc-icon-svg { display: block; width: 1em; height: 1em; }

.sc-icon-sm { font-size: 16px; }
.sc-icon-lg { font-size: 24px; }
.sc-icon-xl { font-size: 32px; }

/* Any container that used to hold an emoji glyph renders the SVG at its own size. */
.stat-icon .sc-icon-svg,
.streak-icon .sc-icon-svg,
.goal-icon .sc-icon-svg,
.list-icon .sc-icon-svg,
.meta-icon .sc-icon-svg,
.reward-icon .sc-icon-svg,
.achievement-icon .sc-icon-svg,
.empty-icon .sc-icon-svg,
.error-icon .sc-icon-svg,
.stats-icon .sc-icon-svg,
.avatar-icon .sc-icon-svg,
.timer-icon .sc-icon-svg,
.landing-feature-icon .sc-icon-svg,
.fm-feature-icon .sc-icon-svg,
.fm-pro-icon .sc-icon-svg,
.theme-icon .sc-icon-svg,
.theme-icon-nav .sc-icon-svg {
  width: 1em;
  height: 1em;
}

/* Headings that carry a leading icon keep it optically aligned with the text. */
.sc-title-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-title-icon > .sc-icon { color: var(--sc-accent); }

/* ── Safety net.
 * Pure CSS cannot match an emoji codepoint, so this collapses leftover text
 * inside the known icon slots instead of "all emoji everywhere" — which would
 * also wipe the flag glyphs in the language pickers, and those are intentional.
 * Remove the body class once `grep` over the UI slots comes back empty. */
.sc-no-emoji .stat-icon,
.sc-no-emoji .streak-icon,
.sc-no-emoji .goal-icon,
.sc-no-emoji .list-icon,
.sc-no-emoji .meta-icon,
.sc-no-emoji .reward-icon,
.sc-no-emoji .empty-icon,
.sc-no-emoji .error-icon,
.sc-no-emoji .stats-icon,
.sc-no-emoji .avatar-icon,
.sc-no-emoji .timer-icon,
.sc-no-emoji .landing-feature-icon,
.sc-no-emoji .fm-feature-icon,
.sc-no-emoji .fm-pro-icon,
.sc-no-emoji .theme-icon,
.sc-no-emoji .theme-icon-nav {
  font-size: 0;
}
.sc-no-emoji .stat-icon .sc-icon,
.sc-no-emoji .streak-icon .sc-icon,
.sc-no-emoji .goal-icon .sc-icon,
.sc-no-emoji .list-icon .sc-icon,
.sc-no-emoji .reward-icon .sc-icon,
.sc-no-emoji .error-icon .sc-icon,
.sc-no-emoji .stats-icon .sc-icon,
.sc-no-emoji .avatar-icon .sc-icon,
.sc-no-emoji .landing-feature-icon .sc-icon,
.sc-no-emoji .fm-feature-icon .sc-icon,
.sc-no-emoji .fm-pro-icon .sc-icon,
.sc-no-emoji .theme-icon .sc-icon,
.sc-no-emoji .theme-icon-nav .sc-icon { font-size: 20px; }
.sc-no-emoji .meta-icon .sc-icon,
.sc-no-emoji .timer-icon .sc-icon { font-size: 16px; }
.sc-no-emoji .empty-icon .sc-icon { font-size: 28px; }
/* The achievement mark may still legitimately be a DB emoji — leave it alone. */

/* ─────────────────────────────────────────────── tap targets */

/* 44×44 hit area, 36px visual circle, negative margin so nothing shifts. */
.sc-icon-btn {
  width: 44px;
  height: 44px;
  margin: -4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-ink-soft);
  border-radius: var(--sc-r-pill);
  -webkit-tap-highlight-color: transparent;
}
.sc-icon-btn > span {
  width: 36px;
  height: 36px;
  /* Never outgrow the button: another class may shrink it (.audio-btn-small did,
     to 28px) and a fixed 36px circle then spills onto whatever sits above. */
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--sc-r-pill);
  background: var(--sc-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
}
.sc-icon-btn:hover > span { background: var(--sc-accent-soft); color: var(--sc-accent); }
.sc-icon-btn:active > span { transform: scale(0.94); }
.sc-icon-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.sc-icon-btn-plain > span { background: transparent; }
.sc-icon-btn-accent > span { background: var(--sc-accent-soft); color: var(--sc-accent); }

/* For buttons that can't be re-laid-out: widen the hit area, keep the box. */
.sc-tap { position: relative; }
.sc-tap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .sc-icon-btn > span,
  .sc-icon-btn:active > span { transition: none; transform: none; }
}

/* ─────────────────────────────────────────────── empty states */

.sc-empty {
  max-width: 340px;
  margin: 0 auto;
  padding: 32px 20px 40px;
  text-align: center;
  color: var(--sc-ink);
}
.sc-empty-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--sc-accent-soft);
  color: var(--sc-accent);
  display: grid;
  place-items: center;
}
.sc-empty-mark .sc-icon { font-size: 28px; }
.sc-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.sc-empty p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sc-muted);
}
.sc-empty-actions { display: flex; flex-direction: column; gap: 10px; }

/* A broken section is not an empty one — it gets the warm mark. */
.sc-empty.is-broken .sc-empty-mark {
  background: color-mix(in srgb, var(--sc-warm) 16%, transparent);
  color: var(--sc-warm);
}

/* ─────────────────────────────────────────────── day zero */

.sc-ghost-ring {
  width: 148px;
  height: 148px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px dashed var(--sc-line);
  display: grid;
  place-items: center;
  color: var(--sc-accent);
}
.sc-ghost-ring .sc-icon { font-size: 40px; }

/* ── the real thing: same 148px circle, but it fills ────────────────────── */

.sc-goal-card { text-align: center; }

.sc-goal-ring {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto;
}
.sc-goal-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* 0% starts at 12 o'clock, not 3 */
}
.sc-goal-ring circle {
  fill: none;
  stroke-width: 8;
}
.sc-goal-ring-track { stroke: var(--sc-line); }
.sc-goal-ring-fill {
  stroke: var(--sc-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-goal-ring.is-done .sc-goal-ring-fill { stroke: var(--sc-accent); }

.sc-goal-ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 2px;
}
.sc-goal-ring-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}
.sc-goal-ring-of {
  font-size: 13px;
  color: var(--sc-muted);
}
.sc-goal-caption {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--sc-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sc-goal-ring-fill { transition: none; }
}

.sc-dayzero-title {
  margin: 16px 0 4px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.sc-dayzero-sub {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--sc-muted);
}
.sc-dayzero-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sc-line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sc-ink-soft);
  text-align: center;
}
.sc-dayzero-cta { margin-top: 16px; }

.sc-ghost-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding: 0 4px;
}
.sc-ghost-bars > i {
  flex: 1;
  align-self: flex-end;
  height: 42%;
  border-radius: 6px 6px 3px 3px;
  border: 1px dashed var(--sc-line);
  background: transparent;
}
/* Uneven on purpose — a row of identical bars reads as a loading skeleton. */
.sc-ghost-bars > i:nth-child(2) { height: 58%; }
.sc-ghost-bars > i:nth-child(3) { height: 34%; }
.sc-ghost-bars > i:nth-child(4) { height: 66%; }
.sc-ghost-bars > i:nth-child(5) { height: 48%; }
.sc-ghost-bars > i:nth-child(6) { height: 30%; }
.sc-ghost-bars > i:nth-child(7) { height: 54%; }
.sc-ghost-bars > i.is-today {
  border-style: solid;
  border-color: transparent;
  background: var(--sc-accent-soft);
}
.sc-ghost-bars-labels {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--sc-muted);
}
.sc-ghost-bars-labels > span { flex: 1; text-align: center; }

/* ─────────────────────────────────────────────── errors: three levels */

/* 1 — banner. Work continues, we are fixing it in the background. */
.sc-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  border-left: 3px solid var(--sc-warm);
  box-shadow: var(--sc-shadow-sm);
  font-size: 13px;
  line-height: 1.45;
  color: var(--sc-ink);
}
.sc-banner > .sc-icon { color: var(--sc-warm); font-size: 18px; margin-top: 1px; }
.sc-banner-text { flex: 1; }
.sc-banner-inline { margin: 0 0 10px; }
.sc-banner.is-resolved { border-left-color: var(--sc-accent); }
.sc-banner.is-resolved > .sc-icon { color: var(--sc-accent); }

/* Warm carries the signal; the action label stays ink so 13px keeps its contrast
 * (#C77A2A on white is 3.36:1 — fine for a stroke, not for small text). */
.sc-error-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-error-action > .sc-icon { color: var(--sc-warm); font-size: 15px; text-decoration: none; }

/* 2 — section block. One region failed, the rest of the screen still works. */
.sc-error-block {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--sc-r-md);
  background: var(--sc-surface-alt);
  border: 1px dashed var(--sc-line);
}
.sc-error-block > .sc-icon { color: var(--sc-warm); font-size: 22px; margin-top: 2px; }
.sc-error-block-body { flex: 1; min-width: 0; }
.sc-error-block-body h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.sc-error-block-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sc-muted); }

/* 3 — dead end. Only when the user genuinely cannot do anything else. */
.sc-dead-end {
  max-width: 340px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}
.sc-dead-end-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--sc-danger) 14%, transparent);
  color: var(--sc-danger);
  display: grid;
  place-items: center;
}
.sc-dead-end-mark .sc-icon { font-size: 28px; }
.sc-dead-end h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.sc-dead-end p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--sc-muted); }
.sc-dead-end-actions { display: flex; flex-direction: column; gap: 10px; }

/* ─────────────────────────────────────────────── streak lost — heavy, not punished */

.sc-streak-lost { text-align: center; padding: 24px 20px; }
.sc-streak-lost-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--sc-surface-alt);
  color: var(--sc-muted);
  display: grid;
  place-items: center;
}
.sc-streak-lost-mark .sc-icon { font-size: 32px; }
.sc-streak-lost h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.sc-streak-lost > p { margin: 0 0 18px; font-size: 14px; color: var(--sc-muted); }
.sc-kept {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  text-align: center;
}
.sc-kept > div {
  background: var(--sc-surface-alt);
  border-radius: var(--sc-r-md);
  padding: 12px 8px;
}
.sc-kept .v { font-size: 19px; font-weight: 700; line-height: 1; color: var(--sc-ink); }
.sc-kept .l { font-size: 11px; color: var(--sc-muted); margin-top: 5px; }

/* ─────────────────────────────────────────────── mobile nav icons
 * These buttons take their label from i18n via textContent and are rendered at
 * font-size: 0 with the visible label in ::after. An <i> child would be wiped on
 * every language switch, so the icon is masked onto ::before instead — same
 * geometry as the JS set, still tinted by currentColor.
 */
#homeBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.4L12 3.4l8.4 7v9.2a1.6 1.6 0 0 1-1.6 1.6H5.2a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3Cpath d='M9.4 21.2v-7h5.2v7'/%3E%3C/svg%3E"); }
#importBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v11'/%3E%3Cpath d='M7.6 10.2L12 14.6l4.4-4.4'/%3E%3Cpath d='M4.6 17v2a1.6 1.6 0 0 0 1.6 1.6h11.6a1.6 1.6 0 0 0 1.6-1.6v-2'/%3E%3C/svg%3E"); }
#wordListsBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 4.6a1.6 1.6 0 0 1 1.6-1.6H19v18H6.8a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3Cpath d='M5.2 17.4h13.6'/%3E%3Cpath d='M8.6 7.2h6.6'/%3E%3C/svg%3E"); }
#studyBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h4l10.1-10.1a2.4 2.4 0 0 0-3.4-3.4L5.2 16z'/%3E%3Cpath d='M13.6 7.2l3.2 3.2'/%3E%3C/svg%3E"); }
#reviewBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 11.4a8.4 8.4 0 0 0-14.4-4.6L3.6 9'/%3E%3Cpath d='M3.8 12.6a8.4 8.4 0 0 0 14.4 4.6l2.2-2.2'/%3E%3Cpath d='M3.6 4.4V9h4.6'/%3E%3Cpath d='M20.4 19.6V15h-4.6'/%3E%3C/svg%3E"); }
#leaderboardBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.8h9V8a4.5 4.5 0 0 1-9 0z'/%3E%3Cpath d='M7.5 5.4H4.8v1.2a3.4 3.4 0 0 0 3.4 3.4'/%3E%3Cpath d='M16.5 5.4h2.7v1.2a3.4 3.4 0 0 1-3.4 3.4'/%3E%3Cpath d='M12 12.5v3.7'/%3E%3Cpath d='M8.6 20.2h6.8l-.8-4H9.4z'/%3E%3C/svg%3E"); }
#statsBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 20.2h15.6'/%3E%3Cpath d='M7 20.2V11'/%3E%3Cpath d='M12 20.2V5.4'/%3E%3Cpath d='M17 20.2v-5.6'/%3E%3C/svg%3E"); }
#settingsNavBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.2 14.6a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2v.2a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H2.8a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.2-2.9l-.1-.1A2 2 0 1 1 6.8 3.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V2.6a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1h.2a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
#userMenuBtn { --sc-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.2 14.6a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2v.2a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H2.8a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.2-2.9l-.1-.1A2 2 0 1 1 6.8 3.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V2.6a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1h.2a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }

/* Mobile only. On desktop the nav is a single row of text labels: a
 * `display: block` ::before there stacks the icon ABOVE the label, turning
 * every item two-storey, and #moreNavBtn (no --sc-nav-icon) stays one-storey
 * and falls out of the row. Keep the icons where the labels are hidden. */
@media (max-width: 768px) {
  #homeBtn::before,
  #importBtn::before,
  #wordListsBtn::before,
  #studyBtn::before,
  #reviewBtn::before,
  #leaderboardBtn::before,
  #statsBtn::before,
  #settingsNavBtn::before,
  #userMenuBtn::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--sc-nav-icon) center / 22px 22px no-repeat;
    mask: var(--sc-nav-icon) center / 22px 22px no-repeat;
  }
}

/* ─────────────────────────────────────────────── narrow screens */

@media (max-width: 400px) {
  .sc-empty, .sc-dead-end { padding-left: 16px; padding-right: 16px; }
  .sc-ghost-ring { width: 128px; height: 128px; }
  .sc-kept .v { font-size: 17px; }
}