/* Kibbo component stylesheet — R1 Locked. Loads after tokens.css. Core design values are tokenized; component-specific geometry may be local. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400..900,0..100,0..1&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");

/* ---------- base ---------- */
.kb { font-family: var(--font-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb-soft, .display, .h1, .h2, .game-prompt, .result-title, .score, .stat { font-variation-settings: "SOFT" 100, "WONK" 1; }
.score, .stat, .timer { font-variant-numeric: tabular-nums; }
.label { text-transform: uppercase; }
.kb-muted { color: var(--ink-2); }
.kb-meta { color: var(--ink-3); }

/* ---------- buttons ---------- */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill); font: 700 16px/20px var(--font-sans); color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; position: relative; transition: transform var(--dur-fast) var(--ease-enter), box-shadow var(--dur-fast) var(--ease-enter), background-color var(--dur-fast) var(--ease-settle); -webkit-tap-highlight-color: transparent; }
.kb-btn:focus-visible, .kb-btn.is-focus { outline: none; box-shadow: var(--depth-focus); }
.kb-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--depth-raised); }
.kb-btn--primary:hover, .kb-btn--primary.is-hover { background: var(--primary-hover); transform: translateY(-1px); }
.kb-btn--primary:active, .kb-btn--primary.is-pressed { background: var(--primary-pressed); transform: translateY(2px); box-shadow: var(--depth-pressed); transition-duration: var(--dur-instant); }
.kb-btn--secondary { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 rgba(36,34,31,0.10); }
.kb-btn--secondary:hover, .kb-btn--secondary.is-hover { background: var(--primary-tint); transform: translateY(-1px); }
.kb-btn--secondary:active, .kb-btn--secondary.is-pressed { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--ink), var(--depth-pressed); }
.kb-btn--ghost { color: var(--ink); }
.kb-btn--ghost:hover, .kb-btn--ghost.is-hover { background: var(--surface-sunken); }
.kb-btn--ghost:active, .kb-btn--ghost.is-pressed { box-shadow: var(--depth-pressed); background: var(--surface-sunken); }
.kb-btn--destructive { background: var(--failure); color: #FFFFFF; box-shadow: var(--depth-raised); }
.kb-btn--destructive:hover, .kb-btn--destructive.is-hover { transform: translateY(-1px); filter: brightness(1.05); }
.kb-btn--destructive:active, .kb-btn--destructive.is-pressed { transform: translateY(2px); box-shadow: var(--depth-pressed); }
.kb-btn--icon { width: 52px; padding: 0; border-radius: var(--radius-md); }
.kb-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; line-height: 18px; }
.kb-btn--sm.kb-btn--icon { width: 40px; border-radius: var(--radius-sm); }
.kb-btn--block { width: 100%; }
.kb-btn:disabled, .kb-btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-ink); box-shadow: none; transform: none; cursor: not-allowed; filter: none; }
.kb-btn.is-loading { color: transparent; pointer-events: none; }
.kb-btn.is-loading::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: var(--radius-round); background: var(--hole); box-shadow: 0 0 0 3px rgba(255,255,255,0.45); animation: kb-peep-pulse 900ms var(--ease-settle) infinite; }
.kb-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- cards ---------- */
.kb-card { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--depth-soft); color: var(--ink); }
.kb-card--flat { box-shadow: none; background: var(--surface); }
.kb-card--press { cursor: pointer; transition: transform var(--dur-fast) var(--ease-enter), box-shadow var(--dur-fast); }
.kb-card--press:hover { transform: translateY(-2px); box-shadow: var(--depth-hover); }
.kb-card--press:active { transform: translateY(1px) scale(0.99); box-shadow: var(--depth-pressed); }
.kb-tile { position: relative; border-radius: var(--radius-xl); padding: var(--space-5); background: var(--tile-bg, var(--cat-logic)); box-shadow: var(--depth-tile); color: var(--on-tile); overflow: hidden; }
.kb-hero { position: relative; border-radius: var(--radius-xl); padding: var(--space-10); background: var(--primary); color: var(--on-primary); box-shadow: var(--depth-tile); overflow: hidden; }
.kb-achv { background: var(--reward-tint); border-radius: var(--radius-lg); padding: var(--space-5); }

/* peephole: the mascot's DNA as a UI cut-out (decorative — always aria-hidden) */
.kb-peep { position: relative; display: inline-block; width: var(--peep, 64px); height: var(--peep, 64px); border-radius: var(--radius-round); background: var(--hole); box-shadow: 0 0 0 calc(var(--peep, 64px) * 0.07) rgba(255,255,255,0.32); flex-shrink: 0; }
.kb-peep::before, .kb-peep::after { content: ""; position: absolute; border-radius: 50%; background: var(--eye-cream); }
.kb-peep::before { width: 34%; height: 41%; left: 15%; top: 26%; }
.kb-peep::after { width: 27%; height: 33%; left: 53%; top: 33%; }
.kb-peep--empty::before, .kb-peep--empty::after { display: none; }

/* ---------- inputs ---------- */
.kb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.kb-field > label { font: 600 14px/18px var(--font-sans); color: var(--ink); }
.kb-help { font: 500 13px/18px var(--font-sans); color: var(--ink-3); }
.kb-input { height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 2px solid var(--border-control); background: var(--surface-raised); font: 400 16px/24px var(--font-sans); color: var(--ink); width: 100%; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.kb-input::placeholder { color: var(--ink-3); }
.kb-input:hover { border-color: var(--ink-2); }
.kb-input:focus, .kb-input.is-focus { outline: none; border-color: var(--ink); box-shadow: var(--depth-focus); }
.kb-input.is-error { border-color: var(--failure); }
.kb-field.is-error .kb-help { color: var(--failure-ink); }
.kb-input:disabled { background: var(--disabled-bg); color: var(--disabled-ink); border-color: var(--disabled-bg); }
.kb-search { position: relative; }
.kb-search .kb-input { border-radius: var(--radius-pill); padding-left: 48px; }
.kb-search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-2); }
.kb-menu { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--depth-floating); padding: var(--space-2); min-width: 220px; }
.kb-menu-item { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font: 500 15px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.kb-menu-item:hover, .kb-menu-item.is-active { background: var(--surface-sunken); }
.kb-menu-item.is-selected { background: var(--primary-tint); font-weight: 700; }

/* ---------- tabs, chips, tags ---------- */
.kb-tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.kb-tab { min-height: 40px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); background: transparent; font: 700 14px/18px var(--font-sans); color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.kb-tab:hover { color: var(--ink); }
.kb-tab.is-active { background: var(--surface-raised); color: var(--ink); box-shadow: 0 2px 6px rgba(36,34,31,0.10); }
.kb-tab:focus-visible { outline: none; box-shadow: var(--depth-focus); }
.kb-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 2px solid var(--border); background: var(--surface-raised); font: 600 14px/18px var(--font-sans); color: var(--ink); cursor: pointer; transition: all var(--dur-fast) var(--ease-enter); }
.kb-chip:hover { border-color: var(--ink-2); }
.kb-chip.is-selected { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.kb-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--tag-bg, var(--surface-sunken)); font: 700 11px/14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }

/* ---------- progress ---------- */
.kb-progress { height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.kb-progress > span { display: block; height: 100%; width: var(--p, 40%); border-radius: inherit; background: var(--primary); transition: width var(--dur-slow) var(--ease-enter); }
.kb-steps { display: flex; gap: var(--space-2); align-items: center; }
.kb-step { width: 12px; height: 12px; border-radius: var(--radius-round); background: var(--surface-sunken); box-shadow: inset 0 0 0 2px var(--border-control); }
.kb-step.is-done { background: var(--ink); box-shadow: none; }
.kb-step.is-current { width: 28px; border-radius: var(--radius-pill); background: var(--primary); box-shadow: none; }
.kb-ring { --p: 60; --sz: 72px; width: var(--sz); height: var(--sz); border-radius: var(--radius-round); background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-sunken) 0); display: grid; place-items: center; }
.kb-ring > span { width: calc(var(--sz) - 16px); height: calc(var(--sz) - 16px); border-radius: var(--radius-round); background: var(--surface-raised); display: grid; place-items: center; font: 800 18px/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }

/* ---------- badges & avatars ---------- */
.kb-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken); font: 700 12px/16px var(--font-sans); color: var(--ink); }
.kb-badge--success { background: var(--success-tint); color: var(--success-ink); }
.kb-badge--failure { background: var(--failure-tint); color: var(--failure-ink); }
.kb-badge--info { background: var(--info-tint); color: var(--info-ink); }
.kb-badge--reward { background: var(--reward); color: var(--on-tile); }
.kb-badge--brand { background: var(--primary); color: var(--on-primary); }
.kb-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font: 700 12px/1 var(--font-sans); }
.kb-avatar { --sz: 40px; width: var(--sz); height: var(--sz); border-radius: var(--radius-round); background: var(--avatar-bg, var(--cat-personality)); display: inline-grid; place-items: center; font: 700 calc(var(--sz) * 0.4)/1 var(--font-sans); color: var(--ink); box-shadow: 0 0 0 2px var(--bg); overflow: hidden; flex-shrink: 0; }
.kb-avatar img { width: 100%; height: 100%; }

/* ---------- navigation ---------- */
.kb-header { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); padding: 0 var(--margin-desktop); background: var(--bg); }
.kb-nav { display: flex; gap: var(--space-1); }
.kb-nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font: 600 15px/20px var(--font-sans); color: var(--ink-2); text-decoration: none; }
.kb-nav-link:hover { color: var(--ink); background: var(--surface-sunken); }
.kb-nav-link.is-active { color: var(--ink); background: var(--surface-raised); box-shadow: 0 2px 6px rgba(36,34,31,0.08); }
.kb-mheader { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--margin-mobile); background: var(--bg); }
.kb-streak { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: 0 2px 6px rgba(36,34,31,0.08); font: 700 14px/18px var(--font-sans); color: var(--ink); }
.kb-streak i { width: 20px; height: 20px; border-radius: var(--radius-round); background: var(--reward); box-shadow: inset 0 0 0 5px var(--reward), inset 0 0 0 20px var(--hole); }

/* ---------- dialogs ---------- */
.kb-scrim { background: rgba(36,34,31,0.48); }
.kb-modal { width: min(440px, 100%); background: var(--surface-raised); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--depth-floating); display: flex; flex-direction: column; gap: var(--space-4); }
.kb-sheet { width: 100%; background: var(--surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-3) var(--space-5) var(--space-8); box-shadow: var(--depth-floating); display: flex; flex-direction: column; gap: var(--space-4); }
.kb-sheet::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--border); }

/* ---------- feedback ---------- */
.kb-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font: 600 15px/20px var(--font-sans); box-shadow: var(--depth-floating); }
.kb-toast img, .kb-toast .kb-peep { width: 36px; height: 36px; --peep: 36px; }
.kb-tip { position: relative; display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--ink); color: var(--bg); font: 600 13px/18px var(--font-sans); }
.kb-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.kb-skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: kb-shimmer 1.4s var(--ease-settle) infinite; }
.kb-feedback { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.kb-feedback--correct { background: var(--success-tint); }
.kb-feedback--wrong { background: var(--failure-tint); }
.kb-feedback img { width: 64px; height: 64px; flex-shrink: 0; }

/* ---------- experience shell ---------- */
.kb-shell { display: flex; flex-direction: column; min-height: 100%; background: var(--bg); }
.kb-shell-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--space-3); height: 56px; padding: 0 var(--space-3); }
.kb-shell-title { text-align: center; font: 700 15px/20px var(--font-sans); color: var(--ink); }
.kb-stage { flex: 1 1 auto; width: 100%; max-width: var(--game-max); margin: 0 auto; padding: var(--space-4) var(--margin-mobile) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.kb-option { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--depth-raised); font: 600 17px/22px var(--font-sans); color: var(--ink); border: 0; text-align: left; cursor: pointer; transition: transform var(--dur-fast) var(--ease-enter), box-shadow var(--dur-fast); }
.kb-option:active, .kb-option.is-pressed { transform: translateY(2px); box-shadow: var(--depth-pressed); }
.kb-option.is-selected { background: var(--primary-tint); box-shadow: inset 0 0 0 3px var(--ink); }
.kb-option.is-correct { background: var(--success-tint); box-shadow: inset 0 0 0 3px var(--success-ink); }
.kb-option.is-wrong { background: var(--failure-tint); box-shadow: inset 0 0 0 3px var(--failure-ink); }

/* ---------- keyboard + touch accessibility ---------- */
.kb-chip:focus-visible, .kb-menu-item:focus-visible, .kb-nav-link:focus-visible, .kb-option:focus-visible, .kb-card--press:focus-visible { outline: none; box-shadow: var(--depth-focus); }
/* Interactive cards must be rendered as <a> or <button> (or receive equivalent keyboard semantics); CSS alone does not make a <div> interactive. */
@media (pointer: coarse) {
  .kb-btn--sm, .kb-tab, .kb-chip, .kb-nav-link, .kb-menu-item { min-height: 44px; }
  .kb-btn--sm.kb-btn--icon { width: 44px; }
}

/* ---------- motion ---------- */
@keyframes kb-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes kb-peep-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
@keyframes kb-pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
@keyframes kb-rise { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.kb-enter { animation: kb-rise var(--dur-slow) var(--ease-enter) both; }
.kb-pop { animation: kb-pop var(--dur-slow) var(--ease-enter) both; }
@media (prefers-reduced-motion: reduce) {
  .kb *, .kb-enter, .kb-pop, .kb-skel, .kb-btn.is-loading::after { animation: none !important; transition: none !important; }
}

/* ---------- R1.1 · stress-test additions (Quick Tap + dark theme) ---------- */
.kb-tile .kb-tag, .kb-tile .caption, .kb-tile .kb-muted { color: var(--on-tile); }
/* primary action placed ON a Persimmon surface: fixed brand colours, never flips with the theme */
.kb-btn--on-brand { background: var(--soft-black); color: var(--warm-cream); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(36,34,31,0.18); }
.kb-btn--on-brand:hover, .kb-btn--on-brand.is-hover { transform: translateY(-1px); }
.kb-btn--on-brand:active, .kb-btn--on-brand.is-pressed { transform: translateY(2px); box-shadow: var(--depth-pressed); }
/* outcome panels: the shell's Outcome slot. correct / wrong exist above; these cover other mechanics */
.kb-feedback--caution { background: var(--warning-tint); }     /* false start, too early, rule broken */
.kb-feedback--neutral { background: var(--surface-raised); box-shadow: var(--depth-soft); }  /* round result, a measurement */
.kb-feedback--muted { background: var(--surface-sunken); }     /* timeout, miss, skipped */
.kb-feedback .kb-outcome-value { font: 800 40px/40px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums; }
/* stage moods for timing mechanics */
.kb-stage--quiet { background: var(--stage-quiet); }
.kb-trigger { background: var(--stage-trigger); color: var(--on-primary); }
/* attempt policy label (intro + result) */
.kb-policy { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken); font: 600 13px/18px var(--font-sans); color: var(--ink); }
.kb-policy svg { width: 16px; height: 16px; }
/* attempt history */
.kb-attempts { display: flex; flex-direction: column; }
.kb-attempt { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-3); min-height: 40px; border-top: 1px solid var(--border); font: 500 15px/20px var(--font-sans); }
.kb-attempt:first-child { border-top: 0; }
.kb-attempt .timer { justify-self: end; }
.kb-attempt.is-best { font-weight: 700; }
/* social-data module states: render only what the stats layer marks available */
[data-state="unavailable"] { display: none !important; }
[data-state="pending"] .kb-stat-value { color: transparent; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: kb-shimmer 1.4s var(--ease-settle) infinite; }
/* streak pip states (no backend policy implied) */
.kb-streak.is-today-pending i { background: transparent; box-shadow: inset 0 0 0 2px var(--border-control); }
.kb-streak.is-ended i { background: var(--surface-sunken); box-shadow: inset 0 0 0 6px var(--surface-sunken), inset 0 0 0 20px var(--border-control); }
@media (prefers-reduced-motion: reduce) { [data-state="pending"] .kb-stat-value { animation: none; } }