/* ==========================================================================
   AscendSAT — components
   Buttons, cards, pills, rings, badges, tabs, modals, toasts.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --sh3d: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform .12s var(--ease-out), box-shadow .12s var(--ease-out), opacity var(--t);
  box-shadow: 0 4px 0 var(--sh3d), var(--sh-xs);
  transform: translateY(0);
  user-select: none;
}
.btn:hover  { background: var(--blue-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 var(--sh3d), var(--sh-sm); }
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--sh3d);
  transition: transform var(--t-press), box-shadow var(--t-press);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--sh3d), var(--sh-xs);
}
.btn .ic { width: 16px; height: 16px; flex: none; }

.btn-lg  { padding: 16px 30px; font-size: 15.5px; border-radius: var(--r-md); }
.btn-xl  { padding: 19px 36px; font-size: 17px;   border-radius: var(--r-lg); }
.btn-sm  { padding: 10px 17px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-xs  { padding: 6px 12px;  font-size: 12px;   border-radius: var(--r-sm); }
.btn-block { display: flex; width: 100%; }
.btn-pill  { border-radius: var(--pill); }

/* Variants — each sets --sh3d to its own pressed-edge color so the chunky
   3D depth (solid shadow that collapses on :active) always matches the fill. */
.btn-indigo { background: var(--indigo); --sh3d: var(--indigo-dark); }
.btn-indigo:hover { background: var(--indigo-hover); }

.btn-green { background: var(--green); --sh3d: var(--green-dark); }
.btn-green:hover { background: var(--green-hover); }

.btn-red { background: var(--red); --sh3d: #B91C1C; }
.btn-red:hover { background: var(--red-dark); }

.btn-amber { background: var(--amber); --sh3d: var(--amber-dark); }
.btn-amber:hover { background: var(--amber-dark); }

.btn-dark { background: var(--slate-800); --sh3d: #000814; }
.btn-dark:hover { background: var(--slate-900); }

.btn-ghost {
  --sh3d: var(--slate-300);
  background: #fff;
  color: var(--slate-600);
  border-color: var(--slate-300);
  box-shadow: 0 4px 0 var(--sh3d);
}
.btn-ghost:hover { background: var(--slate-50); color: var(--slate-700); border-color: var(--slate-400); box-shadow: 0 5px 0 var(--sh3d), var(--sh-xs); }
.btn-ghost:active { background: var(--slate-100); box-shadow: 0 1px 0 var(--sh3d); }

.btn-soft {
  --sh3d: var(--blue-tint-2);
  background: var(--blue-tint);
  color: var(--blue-dark);
  box-shadow: 0 4px 0 var(--sh3d);
}
.btn-soft:hover { background: var(--blue-tint-2); color: var(--blue-dark); box-shadow: 0 5px 0 var(--sh3d); }
.btn-soft:active { background: var(--blue-tint-2); box-shadow: 0 1px 0 var(--sh3d); }

.btn-quiet {
  background: transparent; color: var(--ink-2); box-shadow: none;
}
.btn-quiet:hover { background: var(--slate-100); color: var(--ink); box-shadow: none; transform: translateY(-1px); }
.btn-quiet:active { background: var(--slate-200); transform: translateY(0) scale(.96); }

/* The premium gradient CTA — mirrors the app's "rainbow" upsell button. */
.btn-premium {
  --sh3d: #7C3AED;
  background: linear-gradient(90deg, #8B5CF6, #EC4899 55%, #F59E0B);
  background-size: 180% 100%;
  box-shadow: 0 4px 0 var(--sh3d), 0 4px 14px rgba(139, 92, 246, .32);
  position: relative;
  overflow: hidden;
}
.btn-premium:hover { background-position: 100% 0; box-shadow: 0 5px 0 var(--sh3d), 0 6px 16px rgba(139, 92, 246, .36); }
.btn-premium:active { box-shadow: 0 1px 0 var(--sh3d); }
.btn-premium::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: sheen 4.5s var(--ease) infinite;
}
@keyframes sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* Feature-list tick (plan cards) */
.ft { width: 16px; height: 16px; color: var(--blue); margin-top: 3px; stroke-width: 3; }

/* Icon-only button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--slate-500);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
  padding: 0;
}
.icon-btn:hover { background: var(--slate-50); color: var(--ink); border-color: var(--slate-300); transform: translateY(-1px); box-shadow: var(--sh-xs); }
.icon-btn:active { transform: translateY(0) scale(.92); transition-duration: .08s; box-shadow: none; }
.icon-btn.on { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-dark); }
.icon-btn svg { width: 17px; height: 17px; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card-pad { padding: 22px; }
.card-body { padding: 22px; }

/* Card with a colored title bar — the CookSAT signature block. */
.card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17.5px;
}
.card-hd.green  { background: var(--green); }
.card-hd.indigo { background: var(--indigo); }
.card-hd.purple { background: var(--purple); }
.card-hd.amber  { background: var(--amber-dark); }
.card-hd.dark   { background: var(--slate-800); }

/* Quiet variant. The coloured bar earns its weight on a card that is asking
   for something — start this, buy that. On a page that is purely a readout of
   your own numbers, four of them stacked down the page turn into noise and
   compete with the data they are labelling. */
.card-hd.plain {
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--line);
}
.card-hd.plain svg { color: var(--blue); width: 19px; height: 19px; }
.card-hd.plain .hd-link { color: var(--ink-3); }
.card-hd.plain .hd-link:hover { color: var(--blue); }
.card-hd.plain .hd-note { color: var(--ink-3); }
.card-hd .hd-link {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.card-hd .hd-link:hover { color: #fff; text-decoration: underline; }

.link-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.card-hd .hd-note {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

/* A thin dark sub-strip under a card header (mock-exam cards use this). */
.card-strip {
  background: var(--slate-800);
  color: #fff;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Hoverable/clickable card — a card is a surface, not a button, so it only
   gets a quiet shadow/border shift, never the lift-and-press a .btn gets. */
.card-click {
  cursor: pointer;
  transition: box-shadow var(--t), border-color var(--t);
}
.card-click:hover {
  box-shadow: var(--sh);
  border-color: var(--slate-300);
}

/* Stat tile */
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 20px;
  text-align: center;
}
.stat .k { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.stat .v {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .u { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* ==========================================================================
   Pills, badges, chips
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--slate-500);
  white-space: nowrap;
}
.badge.blue   { background: var(--blue);   color: #fff; }
.badge.indigo { background: var(--indigo); color: #fff; }
.badge.green  { background: var(--green);  color: #fff; }
.badge.red    { background: var(--red);    color: #fff; }
.badge.amber  { background: var(--amber);  color: #fff; }
.badge.yellow { background: var(--yellow); color: #fff; }
.badge.orange { background: var(--orange); color: #fff; }
.badge.purple { background: var(--purple); color: #fff; }
.badge.gray   { background: var(--slate-400); color: #fff; }
.badge.dark   { background: var(--slate-600); color: #fff; }
.badge.soft   { background: var(--blue-tint); color: var(--blue-dark); }
.badge.pill   { border-radius: var(--pill); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}
button.chip { cursor: pointer; transition: background var(--t), color var(--t); }
button.chip.on { background: var(--slate-600); color: #fff; }
.chip.e { background: var(--green-tint); color: var(--green-dark); }
.chip.m { background: var(--amber-tint); color: var(--amber-dark); }
.chip.h { background: var(--red-tint);   color: var(--red-dark); }
.chip.blue { background: var(--blue-tint); color: var(--blue-dark); }

/* Vocab tier — green to purple as words get harder, the same "hotter is
   further along" logic a difficulty gradient always uses. */
.chip.t1 { background: var(--green-tint);  color: var(--green-dark); }
.chip.t2 { background: var(--yellow-tint); color: var(--yellow-dark); }
.chip.t3 { background: var(--orange-tint); color: var(--orange-dark); }
.chip.t4 { background: var(--red-tint);    color: var(--red-dark); }
.chip.t5 { background: var(--purple-tint); color: var(--purple-dark); }
button.chip.t1.on { background: var(--green);  color: #fff; }
button.chip.t2.on { background: var(--yellow); color: #fff; }
button.chip.t3.on { background: var(--orange); color: #fff; }
button.chip.t4.on { background: var(--red);    color: #fff; }
button.chip.t5.on { background: var(--purple); color: #fff; }

.count-pill {
  padding: 5px 13px;
  border-radius: var(--pill);
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.count-pill.gray { background: var(--slate-200); color: var(--slate-600); }
.count-pill.green { background: var(--green); }

/* Segmented pill toggle (Math / English, billing periods, feed tabs) */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  padding: 10px 22px;
  border: 2px solid var(--slate-300);
  border-radius: var(--pill);
  background: #fff;
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t), border-color var(--t), color var(--t), transform .15s var(--ease-out);
}
.seg button:hover { border-color: var(--slate-400); color: var(--slate-700); }
.seg button:active { transform: scale(.95); transition-duration: .08s; }
.seg button.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: var(--sh-xs);
}

/* Underline tab row */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs button {
  padding: 11px 16px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: var(--t);
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button:active { opacity: .6; }
.tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }

/* ==========================================================================
   Progress
   ========================================================================== */

.bar {
  height: 12px;
  border-radius: var(--pill);
  background: var(--slate-200);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--blue);
  transition: width .6s var(--ease);
}
.bar.thin { height: 8px; }
.bar.thick { height: 33px; }
.bar.slow > i { transition: width 1.4s cubic-bezier(.16, 1, .3, 1); position: relative; overflow: hidden; }
/* A faint light sweep drifts across the filled portion — subtle enough to
   read as "alive" without competing with the number next to it. */
.bar.slow > i::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: barSheen 3.2s ease-in-out infinite;
}
@keyframes barSheen {
  0%   { background-position: 160% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
.bar > i.green { background: var(--green); }
.bar > i.amber { background: var(--amber); }
.bar > i.purple { background: var(--purple); }
.bar > i.grad {
  background: linear-gradient(90deg, var(--blue), var(--indigo));
}

/* Circular progress ring — used on every skill card */
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .track { stroke: var(--slate-200); }
.ring .val { stroke: var(--green); transition: stroke-dasharray .7s var(--ease); }
.ring .lab {
  position: absolute;
  font-size: 14px;
  font-weight: 800;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.ring.blue .val { stroke: var(--blue); }
.ring.blue .lab { color: var(--blue-dark); }
.ring.zero .lab { color: var(--slate-400); }
.ring.c-blue .val { stroke: var(--blue); }
.ring.c-purple .val { stroke: var(--purple); }
.ring.c-green .val { stroke: var(--green); }
.ring.c-amber .val { stroke: var(--amber); }
.ring.c-indigo .val { stroke: var(--indigo); }
.ring.c-red .val { stroke: var(--red); }
.ring.c-white .track { stroke: rgba(255, 255, 255, .25); }
.ring.c-white .val { stroke: #fff; }
.ring.c-white .lab { color: #fff; }

/* ==========================================================================
   Forms
   ========================================================================== */

.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  transition: var(--t);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 166, 255, .16);
}
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.textarea { resize: vertical; min-height: 90px; }
.label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--slate-700); }

.switch {
  position: relative;
  width: 44px; height: 25px;
  border-radius: var(--pill);
  background: var(--slate-300);
  border: 0; cursor: pointer;
  transition: var(--t);
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: var(--t);
}
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(19px); }

/* Training's Hard mode switch. Red when on, because the mode it turns on is
   the demanding one — and so the state is legible from across the page. */
.hard-sw {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 6px 5px 12px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: #fff;
  font: 700 13px var(--font-body); color: var(--ink-2);
  transition: var(--t);
}
.hard-sw svg { width: 15px; height: 15px; color: var(--ink-3); transition: var(--t); }
.hard-sw.on { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 8%, #fff); color: var(--red); }
.hard-sw.on svg { color: var(--red); }
.switch.hard.on { background: var(--red); }

/* ==========================================================================
   Modal / sheet
   ========================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 200;
  animation: fade .18s var(--ease);
}
.modal {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: min(520px, 100%);
  max-height: 86vh;
  overflow: auto;
  animation: pop .28s var(--spring);
}
.modal.wide { width: min(860px, 100%); }
.modal-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.modal-hd h3 { flex: 1; }
.modal-bd { padding: 22px; }
.modal-ft {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--slate-50);
}

/* ==========================================================================
   Toast
   ========================================================================== */

#toasts {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 400;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--pill);
  background: var(--slate-900);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  animation: rise .3s var(--spring) both;
}
.toast.out { animation: fade .3s var(--ease) reverse both; }
.toast.green { background: var(--green-dark); }
.toast.red   { background: var(--red-dark); }
.toast.blue  { background: var(--blue-dark); }
.toast .ic { width: 18px; height: 18px; }

/* ==========================================================================
   Empty / lock states
   ========================================================================== */

.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-2);
}
.empty .ic {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
}
.empty .ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 18px; }

/* Locked-feature overlay, like CookSAT's "Unlock Community Discussions" */
.lock-wrap { position: relative; }
.lock-wrap > .blurred { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.lock-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.lock-card > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 30px 38px;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 380px;
}
.lock-card .ic {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
  display: grid; place-items: center;
}
.lock-card .ic svg { width: 24px; height: 24px; }

/* ==========================================================================
   Avatars & leaderboard rows
   ========================================================================== */

.av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  color: #fff;
  flex: none;
  background: var(--blue);
  overflow: hidden;
  user-select: none;
}
.av.lg { width: 44px; height: 44px; font-size: 15px; }
.av.sm { width: 28px; height: 28px; font-size: 11px; }
.av.xl { width: 84px; height: 84px; font-size: 28px; }
/* A real picture fills the circle; the tinted initials stay underneath as the
   fallback for a blocked or broken URL. */
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* One entry on a leaderboard. Deliberately roomy: a board with five rows on
   it should read as five people, not five lines of a table. */
.lb-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid transparent;
  transition: var(--t);
}
.lb-row:hover { background: var(--slate-50); }
/* The podium tints escalate 1st → 3rd, and "me" always wins over a podium
   tint so you can find yourself at a glance. */
.lb-row.podium { background: var(--amber-tint); border-color: #FDE9A9; }
.lb-row.podium.p2 { background: var(--slate-50); border-color: var(--slate-200); }
.lb-row.podium.p3 { background: #FFF7ED; border-color: #FED7AA; }
.lb-row.me,
.lb-row.podium.me { background: var(--blue-tint); border-color: var(--blue); }
.lb-row .rk {
  width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-3);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.lb-row .mdl { width: 30px; height: 22px; flex: none; color: #EAB308; }
.lb-row.podium .mdl { color: #EAB308; }
.lb-row.podium.p2 .mdl { color: var(--slate-400); }
.lb-row.podium.p3 .mdl { color: #C2793B; }
.lb-row .av { width: 34px; height: 34px; font-size: 12px; flex: none; }
.lb-row .nm { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.25; }
.lb-row .nm .trunc { min-width: 0; }
/* Your own name is the one you scan for, so it carries the brand colour. */
.lb-row.me .nm { color: var(--blue); }
.lb-row .nm .you { font-size: 12px; font-weight: 600; color: var(--ink-3); flex: none; }
.lb-row .lv { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 1px; }
.lb-row .xp {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 800;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.lb-row .xp svg { width: 15px; height: 15px; color: var(--blue); }

/* ==========================================================================
   Accordion (Training Bank domains)
   ========================================================================== */

.acc {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--slate-300);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color var(--t);
}
.acc.dom-blue   { border-left-color: var(--blue); }
.acc.dom-purple { border-left-color: var(--purple); }
.acc.dom-green  { border-left-color: var(--green); }
.acc.dom-amber  { border-left-color: var(--amber); }
.acc.dom-indigo { border-left-color: var(--indigo); }
.acc.dom-red    { border-left-color: var(--red); }
.acc-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--t);
}
.acc-hd:hover { background: var(--slate-50); }
.dom-ic { flex: none; display: grid; place-items: center; }
.acc-chev { flex: none; color: var(--slate-400); display: grid; place-items: center; transition: transform var(--t); }
.acc-chev svg { width: 18px; height: 18px; }
.acc-chev.flip { transform: rotate(180deg); }
.acc-bd { padding: 4px 20px 20px; }
.acc.closed .acc-bd { display: none; }

/* ==========================================================================
   Misc
   ========================================================================== */

.divider { height: 1px; background: var(--line); margin: 18px 0; }

.kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--slate-300);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--slate-50);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--slate-600);
}

.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--slate-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loading { display: grid; place-items: center; gap: 12px; padding: 60px; color: var(--ink-2); }

/* Confetti canvas overlay */
#confetti {
  position: fixed; inset: 0;
  pointer-events: none;
  /* Above the buddy ceremonies (920/930): confetti thrown for a hatch has to
     land in front of the overlay that threw it, not behind it. */
  z-index: 1000;
}

/* ==========================================================================
   Community social — author links, threads, profile cards
   ========================================================================== */

/* A name or avatar you can tap to see who someone is. Styled as text rather
   than a button so the feed still reads as prose, but it stays a real
   <button> underneath for keyboard and screen-reader users. */
.author-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); cursor: pointer;
  border-radius: 4px;
  transition: color var(--t-fast);
}
.author-link:hover { color: var(--blue-dark); text-decoration: underline; }
.author-av {
  background: none; border: 0; padding: 0;
  cursor: pointer; border-radius: var(--pill);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.author-av:hover { transform: scale(1.06); }
.author-link:focus-visible,
.author-av:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- Thread ------------------------------------------------------------- */
.reply { padding: 2px 0; }

/* One level of indent, with a rail so the eye can follow a sub-thread back to
   the reply it answers without counting pixels. */
.reply-kids {
  margin: 10px 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}

.reply-act {
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-3); cursor: pointer;
  transition: color var(--t-fast);
}
.reply-act:hover { color: var(--ink-2); }
.reply-act svg { width: 15px; height: 15px; }
/* Liked: the heart and its count go red together, so the state is legible
   at a glance rather than only in the count. */
.reply-act.on { color: var(--red); }
.reply-act.on svg { fill: var(--red); }

.reply-box { margin-top: 10px; }

/* --- Profile card ------------------------------------------------------- */
.pc-head { display: flex; align-items: center; gap: 14px; }
.pc-name { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--ink); }
.pc-handle { font-size: 13px; color: var(--ink-3); }

.pc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 18px;
}
.pc-stat {
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 8px;
  text-align: center;
}
.pc-stat-v { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--ink); }
.pc-stat-l { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* A leaderboard row that leads somewhere says so on hover. */
.lb-row.tappable { cursor: pointer; }