/* Bravatar v3 - shared tokens and components */
@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('../fonts/instrument.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --yellow: #FFD43B; --yellow-d: #F2B705; --ink: #17163A; --ink-2: #4A4870; --ink-3: #77759A;
  --paper: #FFFDF5; --white: #fff; --wash: #F1EEFF; --cream: #FFF4C7;
  --coral: #FF6B6B; --coral-bg: #FFE3E1; --mint: #19A878; --mint-bg: #D9F7EA; --amber: #C77700; --amber-bg: #FFEBC2; --lilac: #6B57E8; --lilac-bg: #E7E2FF;
  --r: 18px; --r-sm: 12px; --shadow: 4px 4px 0 var(--ink); --shadow-s: 2px 2px 0 var(--ink);
  --display: 'Bricolage', 'Trebuchet MS', system-ui, sans-serif; --body: 'Instrument', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--coral); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 14px; }
.grow { flex: 1; min-width: 0; }

.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; text-decoration: none; }

/* Buttons: stickers */
.btn { --bg: var(--white); font: 700 1rem/1 var(--body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-s); cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s; min-height: 46px; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { --bg: var(--yellow); }
.btn.ink { --bg: var(--ink); color: #fff; }
.btn.ink:hover { box-shadow: 4px 4px 0 var(--yellow-d); }
.btn.coral { --bg: var(--coral); }
.btn.mint { --bg: #8FF0C8; }
.btn.sm { padding: 8px 13px; min-height: 38px; font-size: .92rem; border-radius: 11px; }
.btn.lg { padding: 17px 26px; font-size: 1.1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-s); }
.btn.text { border-color: transparent; box-shadow: none; background: transparent; text-decoration: underline; text-decoration-thickness: 2px; padding-inline: 6px; }

.card { background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.card.flat { box-shadow: none; }
.card.yellow { background: var(--yellow); }
.card.wash { background: var(--wash); }

/* Chips */
.chip { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--body); padding: 6px 10px; border-radius: 99px; border: 2px solid var(--ink); background: var(--white); white-space: nowrap; }
.chip.mint { background: var(--mint-bg); } .chip.coral { background: var(--coral-bg); } .chip.amber { background: var(--amber-bg); } .chip.lilac { background: var(--lilac-bg); } .chip.plain { background: #F4F2EA; } .chip.yellow { background: var(--yellow); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Forms */
label.f { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 14px; }
label.f > .hint { display: block; font-weight: 500; color: var(--ink-2); font-size: .84rem; margin-top: 2px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], select, textarea, input:not([type]) {
  width: 100%; font: 500 1rem var(--body); color: var(--ink); background: var(--white); padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: 12px; margin-top: 6px; min-height: 46px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--lilac); outline-offset: 2px; }
input[aria-invalid=true] { border-color: var(--coral); background: #FFF5F5; }
.err { color: #B3261E; font-weight: 600; font-size: .92rem; margin: 8px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 10px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }

/* Meters with denominators */
.meter { height: 14px; border-radius: 99px; background: #EDEAFB; border: 2px solid var(--ink); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--ink); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter.good > i { background: var(--mint); } .meter.warn > i { background: #F5A524; } .meter.bad > i { background: var(--coral); }

/* diff */
del { background: var(--coral-bg); color: #8A1C1C; text-decoration: line-through; border-radius: 3px; padding: 0 1px; }
ins { background: var(--mint-bg); color: #0B5B41; text-decoration: none; border-radius: 3px; padding: 0 1px; font-weight: 700; }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 10px; z-index: 200; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px; border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--yellow); font-weight: 600; animation: pop .25s ease-out; }
.toast.ok { background: #0F6B4D; } .toast.bad { background: #A32B2B; }
@keyframes pop { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* modal */
.scrim { position: fixed; inset: 0; background: rgba(23, 22, 58, .55); display: grid; place-items: center; z-index: 150; padding: 16px; overflow: auto; }
.modal { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; animation: pop .2s ease-out; }
.modal.wide { width: min(780px, 100%); }
.modal h2 { font-size: 1.7rem; }

/* mascot */
.bv-face { display: block; flex: none; }
.bv-eyes { transform-origin: 50px 41px; animation: blink 5s infinite; }
.bv-spark { transform-origin: 86px 20px; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes twinkle { 50% { transform: scale(1.35) rotate(15deg); } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink); animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.demo-flag { display: inline-flex; gap: 6px; align-items: center; font: 700 .78rem/1 var(--body); background: var(--lilac-bg); border: 2px dashed var(--lilac); color: #3A2BA8; padding: 6px 10px; border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .confetti { display: none; }
}