@import url("../tokens/fonts.css");

/* ==========================================================================
   Kapow — Pop meets the comic book.
   Thick ink, flat primaries, Ben-Day dots, panels with gutters, bubbles.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: transform/opacity only; entrance animations fill BACKWARDS;
   box-shadow animates only on hover/active of one element.
   ========================================================================== */

:root {
  --kp-line: 3px;                                    /* the ink outline */
  --kp-line-sm: 2px;                                 /* tags, small badges */
  /* easings */
  --kp-pop: cubic-bezier(.34, 1.56, .64, 1);         /* snaps and pops: ~10% overshoot */
  --kp-lift: cubic-bezier(.2, .9, .3, 1.25);         /* hover lift: quick, tiny overshoot */
  --kp-press: cubic-bezier(.3, .7, .4, 1);           /* press-in: fast, no overshoot */
  --kp-burst: cubic-bezier(.17, 1.6, .45, 1);        /* starbursts: big overshoot */
  --kp-out: cubic-bezier(.4, 0, .7, .2);             /* exits */
  /* durations */
  --kp-t-press: 120ms;
  --kp-t-hover: 180ms;
  --kp-t-pop: 280ms;
  --kp-t-snap: 340ms;
  --kp-t-burst: 420ms;
  /* text colour for whatever surface we are on (page by default) */
  --kp-fg: var(--page-ink);
  --kp-fg-soft: var(--page-ink-soft);
  /* Ben-Day dots */
  --kp-dots: radial-gradient(circle, rgb(22 19 15 / .2) 1.15px, transparent 1.55px);
  --kp-dots-size: 7px 7px;
  --kp-double: var(--ink);
  --kp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; --kp-double: var(--yellow); --kp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .82 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }

body {
  margin: 0;
  /* the board: newsprint + a staggered Ben-Day plate (two dot layers offset by half = a 45° lattice) + faint print grain. Static, scrolls with the page. */
  background-color: var(--page);
  background-image: var(--kp-grain), radial-gradient(circle, var(--page-dot) 2.2px, transparent 2.7px), radial-gradient(circle, var(--page-dot) 2.2px, transparent 2.7px);
  background-size: 180px 180px, 18px 18px, 18px 18px;
  background-position: 0 0, 0 0, 9px 9px;
  color: var(--kp-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- surfaces: set the text colour for their children ---------- */
.kp-on-paper, .kp-panel, .kp-bubble, .kp-modal__panel { --kp-fg: var(--ink); --kp-fg-soft: var(--ink-soft); color: var(--ink); }
.kp-tone-paper { --kp-fill: var(--paper); --kp-fg: var(--ink); --kp-fg-soft: var(--ink-soft); }
.kp-tone-yellow { --kp-fill: var(--yellow); --kp-fg: var(--ink); --kp-fg-soft: var(--ink-soft); }
.kp-tone-green { --kp-fill: var(--green); --kp-fg: var(--ink); --kp-fg-soft: var(--ink); }
.kp-tone-pink { --kp-fill: var(--pink); --kp-fg: var(--ink); --kp-fg-soft: var(--ink); }
.kp-tone-red { --kp-fill: var(--red); --kp-fg: var(--flash); --kp-fg-soft: var(--flash); }
.kp-tone-blue { --kp-fill: var(--blue); --kp-fg: var(--flash); --kp-fg-soft: var(--flash); }
.kp-tone-ink { --kp-fill: var(--ink); --kp-fg: var(--yellow); --kp-fg-soft: var(--paper); }
[class*="kp-tone-"] { color: var(--kp-fg); }
.kp-halftone { position: relative; isolation: isolate; }
.kp-halftone::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--kp-dots); background-size: var(--kp-dots-size); pointer-events: none; }

/* ---------- layout + type helpers ---------- */
.kp-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); color: var(--kp-fg); }
.kp-stage--top { align-items: flex-start; }
.kp-col { display: flex; flex-direction: column; gap: var(--space-3); }
.kp-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kp-spacer { flex: 1; }
.kp-overline { font: 700 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--kp-fg-soft); }
.kp-d { margin: 0; font: 400 64px/60px var(--font-display); letter-spacing: .02em; color: var(--kp-fg); }
.kp-t { margin: 0; font: 400 40px/40px var(--font-display); letter-spacing: .02em; color: var(--kp-fg); }
.kp-h { margin: 0; font: 400 26px/28px var(--font-display); letter-spacing: .03em; color: var(--kp-fg); }
.kp-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--kp-fg); }
.kp-sm { margin: 0; font-size: 14px; line-height: 20px; color: var(--kp-fg-soft); }
.kp-num { font-family: var(--font-display); letter-spacing: .03em; }
.kp-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.kp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.kp-btn, .kp-iconbtn, .kp-tab, .kp-seg__opt, .kp-panel--link, .kp-tag__x, .kp-check input, .kp-toggle input, .kp-field input):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- the shared lift / press physics (Pop DNA) ---------- */
/* the ::after guard extends 5px right + bottom so a lifted element never jitters off the cursor */
.kp-lifts, .kp-btn, .kp-iconbtn, .kp-panel--link { position: relative; transition: transform var(--kp-t-hover) var(--kp-lift), box-shadow var(--kp-t-hover) var(--kp-lift), background-color 150ms, color 150ms; }
.kp-lifts::after, .kp-btn::after, .kp-iconbtn::after, .kp-panel--link::after { content: ""; position: absolute; inset: calc(var(--kp-line) * -1) -5px -5px calc(var(--kp-line) * -1); z-index: -1; }

/* entrance: panels snap in with an overshoot (BACKWARDS fill only) */
@keyframes kp-snap-in { 0% { opacity: 0; transform: scale(.88) rotate(-2deg); } 60% { opacity: 1; transform: scale(1.025) rotate(.4deg); } 100% { opacity: 1; transform: none; } }
.kp-snap-in { animation: kp-snap-in var(--kp-t-snap) var(--kp-pop) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes kp-pop-in { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: none; } }

/* ==================================================================== Button */
.kp-btn {
  --_bg: var(--paper); --_fg: var(--ink);
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4) 0; margin: 0;
  border: var(--kp-line) solid var(--ink); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg);
  font: 400 20px/1 var(--font-display); letter-spacing: .05em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-md); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.kp-btn > * { pointer-events: none; }
.kp-btn__label { padding-top: 2px; }
.kp-btn .kp-icon { width: 20px; height: 20px; stroke-width: 2.8; }
.kp-btn--primary { --_bg: var(--yellow); }
.kp-btn--danger { --_bg: var(--red); --_fg: var(--flash); }
.kp-btn--ghost { --_bg: transparent; --_fg: var(--kp-fg); border-color: transparent; box-shadow: none; }
.kp-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: 17px; box-shadow: var(--shadow-sm); }
.kp-btn--lg { min-height: 54px; padding: 0 var(--space-6); font-size: 25px; }
.kp-btn--block { display: flex; width: 100%; }
.kp-btn:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--drop); }
.kp-btn--sm:not(:disabled):hover { box-shadow: 5px 5px 0 var(--drop); }
.kp-btn--ghost:not(:disabled):hover { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px) rotate(-1deg); }
.kp-btn:not(:disabled):active, .kp-btn.is-pressed { transform: translate(3px, 3px); box-shadow: var(--shadow-press); transition-duration: var(--kp-t-press); transition-timing-function: var(--kp-press); }
.kp-btn--ghost:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; }
.kp-btn:disabled, .kp-btn[aria-disabled="true"] { --_bg: var(--paper-sunk); --_fg: var(--ink-soft); border-style: dashed; border-color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
.kp-btn--ghost:disabled { --_bg: transparent; --_fg: var(--kp-fg-soft); border-color: transparent; }
/* speed lines on hover: three inked dashes trailing the lift */
.kp-btn--primary::before, .kp-btn--danger::before {
  content: ""; position: absolute; left: -17px; top: 50%; width: 10px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: var(--kp-fg); box-shadow: -3px -9px 0 var(--kp-fg), -3px 9px 0 var(--kp-fg);
  opacity: 0; transform: translateX(10px) scaleX(.4); transition: opacity 120ms, transform var(--kp-t-hover) var(--kp-lift); pointer-events: none;
}
.kp-btn--primary:not(:disabled):hover::before, .kp-btn--danger:not(:disabled):hover::before { opacity: 1; transform: none; }
.kp-btn--primary:not(:disabled):active::before, .kp-btn--danger:not(:disabled):active::before { opacity: 0; }
.kp-btn.is-loading .kp-btn__label { opacity: 0; }
.kp-btn__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.kp-btn__dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: kp-dot 600ms var(--kp-pop) infinite alternate; }
.kp-btn__dots i:nth-child(2) { animation-delay: 120ms; } .kp-btn__dots i:nth-child(3) { animation-delay: 240ms; }
@keyframes kp-dot { from { transform: translateY(3px) scale(.7); } to { transform: translateY(-3px); } }

/* ================================================================ IconButton */
.kp-iconbtn {
  --_bg: var(--paper); --_fg: var(--ink);
  box-sizing: border-box; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: var(--kp-line) solid var(--ink); border-radius: var(--radius-md); background: var(--_bg); color: var(--_fg);
  box-shadow: var(--shadow-sm); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kp-iconbtn > * { pointer-events: none; }
.kp-iconbtn .kp-icon { width: 22px; height: 22px; transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-iconbtn--sm { width: 36px; height: 36px; border-radius: 10px; }
.kp-iconbtn--sm .kp-icon { width: 18px; height: 18px; }
.kp-iconbtn--round { border-radius: var(--radius-full); }
.kp-iconbtn--ghost { --_bg: transparent; --_fg: var(--kp-fg); border-color: transparent; box-shadow: none; }
.kp-iconbtn:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--drop); }
.kp-iconbtn:not(:disabled):hover .kp-icon { transform: rotate(-12deg) scale(1.08); }
.kp-iconbtn--ghost:not(:disabled):hover { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.kp-iconbtn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); transition-duration: var(--kp-t-press); }
.kp-iconbtn[aria-pressed="true"], .kp-iconbtn[aria-pressed="true"]:hover { --_bg: var(--yellow); --_fg: var(--ink); border-color: var(--ink); transform: translate(-2px, -2px) rotate(-4deg); box-shadow: 5px 5px 0 var(--drop); }
.kp-iconbtn[aria-pressed="true"] .kp-icon { fill: currentColor; }
.kp-iconbtn:disabled { --_bg: var(--paper-sunk); --_fg: var(--ink-soft); border-style: dashed; border-color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
.kp-iconbtn__count { position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 999px; background: var(--red); color: var(--flash); font: 400 14px/17px var(--font-display); letter-spacing: .04em; text-align: center; }

/* ==================================================================== Toggle */
.kp-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--kp-fg); font-size: 16px; line-height: 24px; -webkit-tap-highlight-color: transparent; }
.kp-toggle input { position: absolute; left: 0; top: 50%; width: 56px; height: 32px; margin: -16px 0 0; opacity: 0; cursor: pointer; }
.kp-toggle__track { position: relative; flex: none; box-sizing: border-box; width: 56px; height: 32px; border: var(--kp-line) solid var(--ink); border-radius: 999px; background: var(--paper-sunk); box-shadow: var(--shadow-sm); pointer-events: none; overflow: hidden; }
.kp-toggle__fill { position: absolute; inset: 0; background: var(--green); background-image: var(--kp-dots); background-size: var(--kp-dots-size); opacity: 0; transition: opacity 160ms; }
.kp-toggle__knob { position: absolute; top: 2px; left: 2px; box-sizing: border-box; width: 22px; height: 22px; border: var(--kp-line) solid var(--ink); border-radius: 50%; background: var(--paper); transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-toggle input:checked ~ .kp-toggle__track .kp-toggle__fill { opacity: 1; }
.kp-toggle input:checked ~ .kp-toggle__track .kp-toggle__knob { transform: translateX(24px); }
.kp-toggle:hover .kp-toggle__knob { transform: scale(1.08); }
.kp-toggle:hover input:checked ~ .kp-toggle__track .kp-toggle__knob { transform: translateX(24px) scale(1.08); }
.kp-toggle input:active ~ .kp-toggle__track .kp-toggle__knob { transform: scaleX(1.25); }
.kp-toggle input:checked:active ~ .kp-toggle__track .kp-toggle__knob { transform: translateX(22px) scaleX(1.25); }
.kp-toggle input:focus-visible ~ .kp-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; }
.kp-toggle input:disabled ~ :not(.kp-onoma) { opacity: .55; } .kp-toggle:has(input:disabled) { cursor: not-allowed; }
/* the tiny onomatopoeia: base opacity 0 so nothing lingers after the animation */
.kp-onoma { position: absolute; left: 40px; top: -4px; z-index: 2; font: 400 15px/1 var(--font-display); letter-spacing: .06em; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 4px; padding: 2px 4px 1px; pointer-events: none; opacity: 0; transform-origin: 0 100%; white-space: nowrap; }
.kp-onoma.is-on { animation: kp-onoma 420ms var(--kp-pop) backwards; }
@keyframes kp-onoma { 0% { opacity: 0; transform: translate(-6px, 4px) scale(.4) rotate(-14deg); } 35% { opacity: 1; transform: translate(0, -14px) scale(1) rotate(-6deg); } 75% { opacity: 1; transform: translate(2px, -18px) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(4px, -22px) scale(.9) rotate(-6deg); } }

/* ============================================================ Checkbox + Radio */
.kp-check { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--kp-fg); font-size: 16px; line-height: 24px; -webkit-tap-highlight-color: transparent; }
.kp-check input { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.kp-check__box { position: relative; flex: none; box-sizing: border-box; width: 26px; height: 26px; display: grid; place-items: center; border: var(--kp-line) solid var(--ink); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink); pointer-events: none; transition: transform var(--kp-t-pop) var(--kp-pop), background-color 120ms; }
.kp-check--radio .kp-check__box { border-radius: 50%; }
.kp-check__mark { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.3) rotate(-25deg); transition: opacity 90ms, transform var(--kp-t-pop) var(--kp-pop); }
.kp-check__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.2); transition: opacity 90ms, transform var(--kp-t-pop) var(--kp-pop); }
.kp-check:hover .kp-check__box { transform: translate(-1px, -1px) rotate(-3deg); }
.kp-check input:checked ~ .kp-check__box { background: var(--yellow); transform: rotate(-6deg); }
.kp-check input:checked ~ .kp-check__box .kp-check__mark, .kp-check input:checked ~ .kp-check__box .kp-check__dot { opacity: 1; transform: none; }
.kp-check input:active ~ .kp-check__box { transform: translate(2px, 2px) scale(.92); box-shadow: var(--shadow-press); transition-duration: var(--kp-t-press); }
.kp-check input:focus-visible ~ .kp-check__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.kp-check input:disabled ~ * { opacity: .55; } .kp-check:has(input:disabled) { cursor: not-allowed; }
.kp-check__text { padding-top: 1px; }
.kp-check__hint { display: block; font-size: 14px; line-height: 20px; color: var(--kp-fg-soft); }
.kp-choices { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.kp-choices legend { padding: 0; margin-bottom: var(--space-3); font: 700 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--kp-fg); }

/* ================================================================= TextField */
.kp-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--kp-fg); }
.kp-field__label { font: 700 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.kp-field__box { position: relative; display: flex; align-items: center; transition: transform var(--kp-t-hover) var(--kp-lift); }
.kp-field__box > .kp-icon { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
.kp-field input, .kp-field textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; margin: 0;
  border: var(--kp-line) solid var(--ink); border-radius: var(--radius-md); background: var(--paper); color: var(--ink);
  font: 400 16px/24px var(--font-body); box-shadow: var(--shadow-inset); outline: none;
  transition: box-shadow var(--kp-t-hover) var(--kp-lift);
}
.kp-field textarea { min-height: 96px; resize: vertical; }
.kp-field__box > .kp-icon ~ input { padding-left: 44px; }
.kp-field input::placeholder, .kp-field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.kp-field__box:focus-within { transform: translate(-2px, -2px); }
.kp-field input:focus, .kp-field textarea:focus { box-shadow: 5px 5px 0 var(--focus); }
.kp-field input:focus-visible, .kp-field textarea:focus-visible { outline: none; }
.kp-field__help { font-size: 14px; line-height: 20px; color: var(--kp-fg-soft); }
.kp-field__error { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border: 2px solid var(--ink); border-radius: var(--radius-panel); background: var(--red); color: var(--flash); font: 700 14px/20px var(--font-body); transform-origin: 12px 0; animation: kp-pop-in var(--kp-t-pop) var(--kp-pop) backwards; }
.kp-field__error .kp-icon { width: 16px; height: 16px; stroke-width: 3; }
.kp-field.is-invalid input, .kp-field.is-invalid textarea { box-shadow: 5px 5px 0 var(--red); }
.kp-field.is-shaking .kp-field__box { animation: kp-shake 320ms var(--kp-press) backwards; }
@keyframes kp-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-1deg); } 45% { transform: translateX(5px) rotate(1deg); } 70% { transform: translateX(-3px); } }
.kp-field input:disabled { background: var(--paper-sunk); border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); box-shadow: none; }

/* ====================================================================== Tabs */
.kp-tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kp-tabs__list { display: flex; gap: var(--space-2); padding-bottom: 8px; border-bottom: var(--kp-line) solid var(--kp-fg); overflow-x: auto; scrollbar-width: none; }
.kp-tab {
  position: relative; flex: none; margin: 6px 0 0; padding: 7px 14px 4px; border: var(--kp-line) solid transparent; border-radius: var(--radius-panel);
  background: transparent; color: var(--kp-fg-soft); font: 400 21px/1 var(--font-display); letter-spacing: .05em; cursor: pointer;
  transition: transform var(--kp-t-hover) var(--kp-lift), color 120ms;
}
.kp-tab:hover { color: var(--kp-fg); transform: translateY(-2px) rotate(-2deg); }
.kp-tab[aria-selected="true"] { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); transform: rotate(-2deg); animation: kp-tab-pop var(--kp-t-pop) var(--kp-pop) backwards; }
@keyframes kp-tab-pop { from { transform: scale(.82) rotate(-6deg); } }
.kp-tab:active { transform: translate(2px, 2px); }
.kp-tabs__panel { animation: kp-snap-in var(--kp-t-snap) var(--kp-pop) backwards; color: var(--kp-fg); }
.kp-tabs__panel[hidden] { display: none; }

/* ========================================================== SegmentedControl */
.kp-seg { --_n: 3; --_i: 0; position: relative; display: inline-grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); padding: 4px; border: var(--kp-line) solid var(--ink); border-radius: var(--radius-md); background: var(--paper-sunk); box-shadow: var(--shadow-sm); isolation: isolate; }
.kp-seg--block { display: grid; width: 100%; box-sizing: border-box; }
.kp-seg__thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--_n)); box-sizing: border-box; border-radius: 8px; background: var(--ink); transform: translateX(calc(var(--_i) * 100%)); transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-seg__opt { position: relative; min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 700 14px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color 120ms, transform var(--kp-t-press) var(--kp-press); }
.kp-seg__opt:hover:not([aria-checked="true"]) { transform: rotate(-2deg) scale(1.04); }
.kp-seg__opt:active { transform: scale(.94); }
.kp-seg__opt[aria-checked="true"] { color: var(--yellow); }

/* ============================================================== Card / Panel */
.kp-panel {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
  padding: var(--space-6); border: var(--kp-line) solid var(--ink); border-radius: var(--radius-panel);
  background-color: var(--kp-fill, var(--paper)); color: var(--kp-fg); box-shadow: var(--shadow-md); isolation: isolate;
}
.kp-panel--tight { padding: var(--space-4); }
.kp-panel--double { outline: var(--kp-line) solid var(--kp-double); outline-offset: 3px; }
.kp-panel__caption { position: absolute; top: calc(var(--kp-line) * -1); left: calc(var(--kp-line) * -1); z-index: 1; }
.kp-panel--captioned { padding-top: calc(var(--space-6) + 22px); }
.kp-panel--tight.kp-panel--captioned { padding-top: calc(var(--space-4) + 24px); }
.kp-panel__title { margin: 0; font: 400 26px/28px var(--font-display); letter-spacing: .03em; color: var(--kp-fg); }
.kp-panel__body { margin: 0; color: var(--kp-fg); }
.kp-panel__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.kp-panel--link { text-decoration: none; cursor: pointer; }
.kp-panel--link:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.kp-panel--link:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); transition-duration: var(--kp-t-press); transition-timing-function: var(--kp-press); }
.kp-panel.is-selected { transform: rotate(-1.2deg); box-shadow: var(--shadow-lg); }
.kp-gutters { display: grid; gap: var(--space-6); }
@media (max-width: 600px) { .kp-gutters { gap: var(--space-4); } }

/* ================================================== Badge / Tag / Caption */
.kp-badge { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 24px; padding: 0 9px; border: var(--kp-line-sm) solid var(--ink); border-radius: 999px; background: var(--kp-fill, var(--paper)); color: var(--kp-fg); font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.kp-badge .kp-icon { width: 13px; height: 13px; stroke-width: 3.2; }
.kp-badge--label { --kp-fill: var(--ink); --kp-fg: var(--yellow); border-color: var(--ink); height: 26px; padding: 0 11px; font-size: 12px; }
.kp-badge--count { min-width: 24px; justify-content: center; padding: 0 6px; font: 400 15px/1 var(--font-display); letter-spacing: .04em; }
.kp-badge.is-popping { animation: kp-pop-in var(--kp-t-pop) var(--kp-burst) backwards; }
.kp-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 6px 0 12px; border: var(--kp-line-sm) solid var(--ink); border-radius: 999px; background: var(--kp-fill, var(--paper)); color: var(--kp-fg); box-shadow: 2px 2px 0 var(--drop); font: 700 14px/1 var(--font-body); white-space: nowrap; transition: transform var(--kp-t-hover) var(--kp-lift); }
.kp-tag:not(:has(.kp-tag__x)) { padding-right: 12px; }
.kp-tag:hover { transform: rotate(-2deg); }
.kp-tag__x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-tag__x .kp-icon { width: 14px; height: 14px; stroke-width: 3.2; }
.kp-tag__x:hover { background: var(--ink); color: var(--yellow); transform: rotate(90deg); }
.kp-tag.is-leaving { transition: transform 200ms var(--kp-out), opacity 200ms; transform: scale(.4) rotate(-12deg); opacity: 0; }
.kp-caption { display: inline-block; box-sizing: border-box; padding: 3px 10px 2px; border: var(--kp-line) solid var(--ink); border-radius: var(--radius-panel) 0 var(--radius-panel) 0; background: var(--yellow); color: var(--ink); font: 700 15px/20px var(--font-hand); letter-spacing: .01em; white-space: nowrap; }
.kp-caption--upper { text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }

/* ==================================================================== Avatar */
.kp-avatar { --_s: 44px; position: relative; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--_s); height: var(--_s); border: var(--kp-line) solid var(--ink); border-radius: 50%; background: var(--kp-fill, var(--yellow)); color: var(--kp-fg); font: 400 calc(var(--_s) * .42)/1 var(--font-display); letter-spacing: .04em; isolation: isolate; transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-avatar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-image: var(--kp-dots); background-size: 6px 6px; clip-path: inset(50% 0 0 0); }
.kp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kp-avatar--sm { --_s: 32px; border-width: 2px; } .kp-avatar--lg { --_s: 64px; } .kp-avatar--xl { --_s: 96px; border-width: 4px; }
.kp-avatar--square { border-radius: var(--radius-panel); } .kp-avatar--square::before, .kp-avatar--square img { border-radius: 2px; }
.kp-avatar__status { position: absolute; right: -3px; bottom: -3px; width: 30%; height: 30%; min-width: 10px; min-height: 10px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: var(--green); }
.kp-avatar:hover { transform: rotate(-8deg) scale(1.06); }
.kp-avatars { display: inline-flex; padding-left: 10px; }
.kp-avatars > .kp-avatar { margin-left: -10px; box-shadow: 2px 2px 0 var(--drop); }
.kp-avatars > .kp-avatar:hover { z-index: 2; transform: translateY(-4px) rotate(-8deg); }
.kp-avatars__more { --kp-fill: var(--ink); --kp-fg: var(--yellow); }

/* ======================================================== Bubbles (Tooltip) */
.kp-bubble { position: relative; box-sizing: border-box; max-width: 260px; padding: 10px 16px; border: var(--kp-line) solid var(--ink); border-radius: var(--radius-bubble); background: var(--paper); color: var(--ink); font: 400 15px/21px var(--font-body); box-shadow: 4px 4px 0 var(--drop); }
.kp-bubble__tail { position: absolute; width: 22px; height: 18px; left: var(--_tx, 28px); top: 100%; overflow: visible; }
.kp-bubble__tail path:first-child { fill: var(--paper); } .kp-bubble__tail path:last-child { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.kp-bubble--below .kp-bubble__tail { top: auto; bottom: 100%; transform: scaleY(-1); }
.kp-bubble--thought { border-radius: 999px; }
.kp-bubble--thought .kp-bubble__tail { display: none; }
.kp-bubble__puff { position: absolute; box-sizing: border-box; border: var(--kp-line) solid var(--ink); border-radius: 50%; background: var(--paper); }
.kp-bubble__puff:nth-of-type(1) { width: 14px; height: 14px; left: var(--_tx, 28px); top: calc(100% + 4px); }
.kp-bubble__puff:nth-of-type(2) { width: 9px; height: 9px; left: calc(var(--_tx, 28px) - 8px); top: calc(100% + 18px); }
.kp-bubble--below .kp-bubble__puff:nth-of-type(1) { top: auto; bottom: calc(100% + 4px); }
.kp-bubble--below .kp-bubble__puff:nth-of-type(2) { top: auto; bottom: calc(100% + 18px); }
.kp-bubble--tone-yellow { background: var(--yellow); } .kp-bubble--tone-yellow .kp-bubble__tail path:first-child { fill: var(--yellow); }
.kp-bubble__title { display: block; font: 400 19px/22px var(--font-display); letter-spacing: .05em; }

.kp-tip { position: relative; display: inline-flex; }
/* a floating bubble lives on <body>, position: fixed; Kapow places it (flip + clamp) and sets transform-origin to the tail tip */
.kp-bubble.kp-float { position: fixed; z-index: 140; left: 0; top: 0; width: max-content; max-width: min(260px, calc(100vw - 16px)); pointer-events: none; opacity: 0; visibility: hidden; transform: scale(.4); transition: opacity 120ms, transform 120ms var(--kp-out), visibility 0s 120ms; }
.kp-bubble.kp-float.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 90ms, transform var(--kp-t-pop) var(--kp-pop), visibility 0s; }
.kp-bubble--tail-left .kp-bubble__tail { left: 0; top: var(--_ty, 12px); transform-origin: 0 0; transform: rotate(90deg); }
.kp-bubble--tail-right .kp-bubble__tail { left: 100%; top: calc(var(--_ty, 12px) + 22px); transform-origin: 0 0; transform: rotate(-90deg); }

/* ===================================================================== Toast */
.kp-toasts { position: fixed; z-index: 90; right: clamp(var(--space-4), 4vw, var(--space-6)); bottom: clamp(var(--space-4), 4vw, var(--space-6)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); pointer-events: none; max-width: calc(100vw - 2 * var(--space-4)); }
.kp-toasts--inline { position: static; align-items: flex-start; max-width: none; }
.kp-toast { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; min-width: 0; pointer-events: auto; transform-origin: 0 100%; animation: kp-toast-in var(--kp-t-snap) var(--kp-pop) backwards; }
.kp-toast > .kp-burst { flex: none; margin-bottom: -4px; }
.kp-toast .kp-bubble { --_tx: 4px; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); max-width: 340px; margin-bottom: 30px; padding: 12px 10px 12px 18px; box-shadow: var(--shadow-md); }
.kp-toast__text { flex: 1; min-width: 0; }
.kp-toast__msg { display: block; font-size: 15px; line-height: 21px; }
.kp-toast__x { flex: none; margin: -4px 0 0; }
.kp-toast.is-leaving { transition: opacity 180ms, transform 200ms var(--kp-out); opacity: 0; transform: scale(.85) translateY(8px); }
@keyframes kp-toast-in { 0% { opacity: 0; transform: scale(.3) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }

/* ===================================================================== Modal */
.kp-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4); }
.kp-modal[hidden] { display: none; }
.kp-modal__scrim { position: absolute; inset: 0; background: rgb(10 12 30 / .62); animation: kp-fade 200ms ease-out backwards; }
@keyframes kp-fade { from { opacity: 0; } }
.kp-modal__panel:focus { outline: var(--kp-line) solid var(--yellow); }
.kp-modal__panel { position: relative; box-sizing: border-box; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: calc(var(--space-6) + 18px) var(--space-6) var(--space-6); border: var(--kp-line) solid var(--ink); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-lg); outline: var(--kp-line) solid var(--yellow); outline-offset: 3px; animation: kp-modal-in var(--kp-t-snap) var(--kp-pop) backwards; }
@keyframes kp-modal-in { 0% { opacity: 0; transform: scale(.8) rotate(-3deg); } 65% { opacity: 1; transform: scale(1.03) rotate(.5deg); } 100% { transform: none; } }
.kp-modal__caption { position: absolute; top: -3px; left: -3px; }
.kp-modal__title { margin: 0; font: 400 34px/36px var(--font-display); letter-spacing: .03em; color: var(--ink); padding-right: 40px; }
.kp-modal__x { position: absolute; top: 12px; right: 12px; }
.kp-modal__body { color: var(--ink); }
.kp-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.kp-modal.is-leaving .kp-modal__panel { transition: transform 180ms var(--kp-out), opacity 180ms; transform: scale(.9) rotate(2deg); opacity: 0; }
.kp-modal.is-leaving .kp-modal__scrim { transition: opacity 180ms; opacity: 0; }

/* ================================================================== Progress */
.kp-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--kp-fg); }
.kp-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.kp-progress__label { font: 700 14px/20px var(--font-body); }
.kp-progress__value { font: 400 20px/1 var(--font-display); letter-spacing: .04em; }
.kp-progress__track { position: relative; box-sizing: border-box; height: 22px; border: var(--kp-line) solid var(--ink); border-radius: var(--radius-md); background: var(--paper-sunk); box-shadow: var(--shadow-inset), 3px 3px 0 var(--drop); overflow: hidden; }
.kp-progress--sm .kp-progress__track { height: 14px; border-radius: 999px; }
.kp-progress__fill { position: absolute; inset: 0; border-right: var(--kp-line) solid var(--ink); background-color: var(--_pf, var(--yellow)); transform: translateX(calc(var(--_v, 0) * 1% - 100%)); transition: transform 400ms var(--kp-pop); }
/* halftone: dots grow toward the leading edge */
.kp-progress__fill::before, .kp-progress__fill::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; background-image: radial-gradient(circle, rgb(22 19 15 / .24) 1.3px, transparent 1.7px); background-size: 7px 7px; }
.kp-progress__fill::before { width: 70%; }
.kp-progress__fill::after { width: 30%; background-image: radial-gradient(circle, rgb(22 19 15 / .3) 2.2px, transparent 2.6px); background-size: 7px 7px; }
.kp-progress--sm .kp-progress__fill::after { display: none; }
.kp-progress.is-done .kp-progress__fill { --_pf: var(--green); }

/* ===================================================================== Burst */
.kp-burst { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s, 96px); height: var(--_s, 96px); color: var(--ink); transform: rotate(var(--_r, -8deg)); }
.kp-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kp-burst__shape { fill: var(--kp-fill, var(--yellow)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kp-burst__drop { fill: var(--drop); }
.kp-burst__word { position: relative; font: 400 calc(var(--_s, 96px) * .27)/1 var(--font-display); letter-spacing: .04em; color: var(--kp-fg, var(--ink)); white-space: nowrap; padding-top: 2px; }
.kp-burst--interactive { cursor: pointer; transition: transform var(--kp-t-pop) var(--kp-pop); }
.kp-burst--interactive:hover { transform: rotate(calc(var(--_r, -8deg) - 6deg)) scale(1.06); }
.kp-burst.is-popping { animation: kp-burst-badge var(--kp-t-burst) var(--kp-burst) backwards; }
@keyframes kp-burst-badge { from { transform: rotate(-40deg) scale(.3); opacity: 0; } }
.kp-wiggle { animation: kp-wiggle 2.4s ease-in-out infinite; }
@keyframes kp-wiggle { 0%, 100% { transform: rotate(var(--_r, -8deg)); } 50% { transform: rotate(calc(var(--_r, -8deg) + 5deg)) scale(1.03); } }
/* the click effect: a burst flung from a button. Base opacity 0, so it is gone the moment the animation ends */
.kp-fx { position: fixed; z-index: 120; left: 0; top: 0; pointer-events: none; opacity: 0; }
.kp-fx .kp-burst { transform: none; }
.kp-fx.is-firing { animation: kp-fx 420ms var(--kp-burst) backwards; }
@keyframes kp-fx { 0% { opacity: 0; transform: scale(.2) rotate(-35deg); } 35% { opacity: 1; transform: scale(1.06) rotate(-6deg); } 70% { opacity: 1; transform: scale(1) rotate(-4deg); } 100% { opacity: 0; transform: scale(1.12) rotate(-2deg); } }

/* ============================================================ Widgets */
.kp-stat__num { font: 400 64px/56px var(--font-display); letter-spacing: .02em; color: var(--kp-fg); }
.kp-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kp-stat__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.kp-stat__bar { width: 12px; height: calc(var(--_h) * 1%); box-sizing: border-box; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 3px 3px 0 0; background-color: var(--paper); background-image: var(--kp-dots); background-size: 5px 5px; transform-origin: 50% 100%; animation: kp-bar-in var(--kp-t-snap) var(--kp-pop) backwards; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
.kp-stat__bar:last-child { background-color: var(--yellow); }
.kp-tone-yellow .kp-stat__bar:last-child { background-color: var(--pink); }
@keyframes kp-bar-in { from { transform: scaleY(0); } }
.kp-stat__delta { display: inline-flex; align-items: center; gap: 4px; }

.kp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--space-4); overflow-x: auto; padding: 4px 10px 12px 4px; margin: -4px -10px -12px -4px; scrollbar-width: thin; }
.kp-strip__panel { min-height: 196px; justify-content: space-between; }
.kp-strip__panel .kp-panel__caption { white-space: nowrap; }
.kp-strip__scene { display: flex; align-items: flex-end; gap: var(--space-2); }
.kp-strip__scene .kp-bubble { max-width: none; flex: 1; min-width: 0; padding: 8px 12px; font-size: 14px; line-height: 19px; margin-bottom: 26px; }
.kp-strip__scene .kp-bubble__tail { left: 6px; }
.kp-strip__end { justify-content: center; align-items: center; text-align: center; }

.kp-profile { padding: 0; overflow: hidden; gap: 0; }
.kp-profile__band { position: relative; height: 84px; border-bottom: var(--kp-line) solid var(--ink); background-color: var(--kp-band, var(--blue)); background-image: radial-gradient(circle, rgb(255 255 255 / .28) 2px, transparent 2.5px); background-size: 10px 10px; }
.kp-profile__band .kp-burst { position: absolute; right: 14px; top: 8px; }
.kp-profile__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); }
.kp-profile__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: -42px; }
.kp-profile__name { margin: 4px 0 0; font: 400 30px/30px var(--font-display); letter-spacing: .03em; }
.kp-profile__role { margin: 0; font-size: 15px; color: var(--ink-soft); }
.kp-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--kp-line) solid var(--ink); border-radius: var(--radius-panel); }
.kp-profile__stats > div { padding: 8px 10px; text-align: center; }
.kp-profile__stats > div + div { border-left: var(--kp-line) solid var(--ink); }
.kp-profile__stats b { display: block; font: 400 26px/26px var(--font-display); letter-spacing: .03em; }
.kp-profile__stats span { font: 700 11px/14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  [class*="kp-"], [class*="kp-"]::before, [class*="kp-"]::after { animation: none !important; transition-duration: 0ms !important; }
  .kp-btn:hover, .kp-iconbtn:hover:not([aria-pressed="true"]), .kp-panel--link:hover, .kp-tab:hover, .kp-tag:hover, .kp-avatar:hover, .kp-check:hover .kp-check__box, .kp-field__box:focus-within, .kp-burst--interactive:hover { transform: none; }
  .kp-fx, .kp-onoma { display: none; }
}