/* [badges] Badges and goals (public/badges.js, public/ui/badge-art.js). Tokens from public/ui/tokens.css. */

/* ---------- the drawing ---------- */
.bd-art { display: block; flex: none; }
.bd-art .bd-disc { fill: var(--brand); }
.bd-art .bd-glyph { stroke: #FBF7EC; }
.bd-art .bd-light { fill: rgba(255, 255, 255, 0.28); }
.bd-art .bd-light.is-on { fill: #FFD978; }
.bd-art .bd-fly { fill: #FFE9A8; }
.bd-art .bd-star { fill: #FFD978; stroke: var(--brand); stroke-width: 0.8; }
.bd-art--waiting .bd-wait-ring { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 4.5; }
.bd-art--waiting .bd-wait-disc { fill: var(--surface-sunken); }
.bd-art--waiting .bd-glyph { stroke: var(--ink-faint); }
.bd-art--waiting .bd-light { fill: var(--line-strong); }
:root[data-theme="dark"] .bd-art .bd-disc { fill: #1A2442; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bd-art .bd-disc { fill: #1A2442; } }

/* ---------- kid home ---------- */
.bd-slot:empty { display: none; }
.bd-slot { display: grid; gap: 16px; margin-block: 8px 16px; }
.bd-new { position: relative; text-align: center; display: grid; gap: 12px; justify-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.bd-new-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); margin: 0; color: var(--ink); }
.bd-new--teen .bd-new-title { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.bd-new--little .bd-new-title { font-size: 28px; }
.bd-new-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bd-new-one { display: grid; justify-items: center; gap: 4px; font-weight: var(--weight-strong); max-width: 110px; text-align: center; }
.bd-new-one small { display: block; font-weight: var(--weight-body); color: var(--ink-muted); font-size: var(--text-xs); }
.bd-new--little .bd-new-one .bd-art { animation: bd-pop var(--dur-slow) var(--ease-play) both; }
@keyframes bd-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bd-new--little .bd-new-one .bd-art { animation: none; } }
:root[data-motion="reduce"] .bd-new--little .bd-new-one .bd-art { animation: none; }

.bd-home { display: grid; gap: 10px; text-decoration: none; color: inherit; }
button.bd-home { width: 100%; text-align: left; font: inherit; background: var(--surface-sunken); border: 0; border-radius: var(--radius-md); padding: 12px; cursor: pointer; min-height: var(--tap); }
button.bd-home:disabled { cursor: default; }
.bd-home-head { display: flex; align-items: center; gap: 8px; }
.bd-home-head b { font-size: var(--text-md); }
.bd-home-head .ui-muted { margin-left: auto; font-size: var(--text-sm); }
.bd-home-head .ui-icon { color: var(--ink-faint); }
.bd-home--grown .bd-home-head .ui-icon { margin-left: auto; }
.bd-home-row { display: flex; gap: 8px; overflow: hidden; }
.bd-home-row--wrap { flex-wrap: wrap; }
.bd-home-hint { margin: 0; }

/* ---------- goals ---------- */
.bd-goals { display: grid; gap: 8px; }
.bd-goal { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.ui-card .bd-goal { background: var(--surface-sunken); border-color: transparent; }
.bd-goal .bd-goal-icon { background: var(--surface-sunken); }
.ui-card .bd-goal .bd-goal-icon { background: var(--surface); }
.bd-goal.is-done { background: var(--success-soft); }
.bd-goal-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.bd-goal.is-done .bd-goal-icon { color: var(--success-text, var(--success)); }
.bd-goal-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bd-goal-text { margin: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.bd-goal-sub { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.bd-reward { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: var(--weight-strong); font-size: var(--text-sm); overflow-wrap: anywhere; }
.bd-reward .ui-icon { width: 18px; height: 18px; flex: none; }
.bd-goal-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (max-width: 420px) {
  .bd-goal { flex-wrap: wrap; }
  .bd-goal-acts { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ---------- the badge case ---------- */
.bd-top { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.bd-top-count { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); margin: 0; }
.bd-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
:root[data-skin="little"] .bd-case { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); }
.bd-case--compact { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.bd-tile { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px; min-height: var(--tap); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); font: inherit; color: inherit; text-align: center; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.bd-tile:active { transform: scale(var(--press-scale)); }
.bd-tile.is-earned { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bd-tile-name { font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: 1.2; }
.bd-tile-level { font-size: var(--text-xs); color: var(--ink-muted); }
.bd-sheet-art { display: grid; place-items: center; margin-bottom: 8px; }
.bd-sheet-level { font-weight: var(--weight-strong); margin: 0; text-align: center; }
.bd-lead { margin: 0 0 12px; }
.bd-passed { color: var(--success-text, var(--success)); }

/* ---------- a check ---------- */
.bd-check { display: grid; gap: 16px; }
.bd-q { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.bd-q legend, .bd-q > p { font-weight: var(--weight-strong); margin: 0 0 4px; }
.bd-q--row { display: flex; align-items: center; gap: 12px; }
.bd-q--row .bd-num { max-width: 120px; font-size: var(--text-lg); text-align: center; }
.bd-q-n { color: var(--ink-faint); margin-right: 6px; font-weight: var(--weight-body); }
.bd-fact { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-strong); min-width: 7ch; }
.bd-line { font-family: var(--font-mono); font-size: var(--text-lg); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; overflow-wrap: anywhere; }
.bd-type { font-family: var(--font-mono); }
.bd-letters { font-family: var(--font-mono); font-size: var(--text-xl); letter-spacing: 0.08em; margin: 0; color: var(--accent-text); }
.bd-q .ui-seg--block { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .bd-q .ui-seg--block { grid-template-columns: 1fr; } }
.bd-result { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 16px; }
.bd-result.is-passed { background: var(--success-soft); }
.bd-result-acts { margin-top: 16px; }

/* ---------- learning label and filter ---------- */
.bd-learn { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: var(--weight-strong); line-height: 1; padding: 3px 7px; border-radius: var(--radius-full); background: var(--info-soft); color: var(--info-text, var(--info)); }
.ui-tile .bd-learn { position: absolute; top: 8px; left: 8px; }
.bd-learn .ui-icon { width: 14px; height: 14px; }
.bd-learn-pick { margin-bottom: 12px; max-width: 360px; }
.bd-week-one { display: grid; justify-items: center; gap: 4px; font-size: var(--text-xs); max-width: 72px; text-align: center; }