/* Kalo design system component styles. Generated custom properties come from
   kalo.js (see tokens.js). Class prefix k-. Modifier classes: k-x--variant.
   State classes: is-pressed, is-disabled, is-error, is-loading. */

/* text styles */
.t-displayLg{font:var(--fw-bold) var(--fs-displayLg)/var(--lh-displayLg) var(--ff-display),var(--ff-fallback);letter-spacing:var(--ls-display)}
.t-display{font:var(--fw-bold) var(--fs-display)/var(--lh-display) var(--ff-display),var(--ff-fallback);letter-spacing:var(--ls-display)}
.t-headlineLg{font:var(--fw-semibold) var(--fs-headlineLg)/var(--lh-headlineLg) var(--ff-display),var(--ff-fallback);letter-spacing:var(--ls-headline)}
.t-headline{font:var(--fw-medium) var(--fs-headline)/var(--lh-headline) var(--ff-display),var(--ff-fallback);letter-spacing:var(--ls-headline)}
.t-body{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--ff-body),var(--ff-fallback)}
.t-bodyStrong{font:var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--ff-body),var(--ff-fallback)}
.t-label{font:var(--fw-medium) var(--fs-bodySm)/var(--lh-bodySm) var(--ff-body),var(--ff-fallback)}
.t-caption{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--ff-body),var(--ff-fallback);letter-spacing:var(--ls-caption)}
.t-overline{font:var(--fw-semibold) var(--fs-captionSm)/var(--lh-captionSm) var(--ff-display),var(--ff-fallback);letter-spacing:.1em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* shared state behaviour */
.is-disabled{opacity:var(--op-disabled);pointer-events:none;box-shadow:none!important}
.pressable{transition:transform var(--dur-press) var(--ease-standard),background-color var(--dur-press) var(--ease-standard)}
.pressable:active,.pressable.is-pressed{transform:scale(var(--press-scale));background-image:linear-gradient(var(--c-pressOverlay),var(--c-pressOverlay))}

/* spinner (loading) */
.k-spin{width:20px;height:20px;flex:none;animation:k-rotate var(--dur-spin) linear infinite}
.k-spin circle{fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;stroke-dasharray:200 264}
.k-spin--sm{width:14px;height:14px}
@keyframes k-rotate{to{transform:rotate(360deg)}}
.k-skel{background:var(--c-skeleton);border-radius:var(--r-sm);height:12px;animation:k-pulse 1.4s var(--ease-standard) infinite}
@keyframes k-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.k-spin,.k-skel,.k-ring--loading .k-ring__fill{animation:none}}

/* Button */
.k-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-s2);width:100%;min-height:var(--sz-control);padding:0 var(--sp-s4);white-space:nowrap;text-align:center;line-height:1.2;border-radius:var(--r-pill);border:var(--sz-hairline) solid transparent;font:var(--fw-semibold) var(--fs-body)/1 var(--ff-body),var(--ff-fallback);cursor:pointer;color:inherit;background:none}
.k-btn--primary{background-color:var(--c-coral);color:var(--c-onCoral)}
.k-btn--secondary{background-color:var(--c-card);color:var(--c-ink);border-color:var(--c-border)}
.k-btn--pill{width:auto;min-height:var(--sz-controlSm);padding:0 var(--sp-s4);font-size:var(--fs-bodySm);background-color:var(--c-coralSoft);color:var(--c-coralText)}
.k-btn.is-error{background-color:var(--c-coralSoft);color:var(--c-coralText);border-color:var(--c-coral);font-size:inherit}
.k-btn.is-loading{pointer-events:none}
.k-btn--pill.is-error{font-size:var(--fs-bodySm)}
.k-btn.is-loading .k-btn__label,.k-btn.is-loading .k-btn__icon{opacity:0}
.k-btn .k-spin{position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
.k-btn__icon{width:18px;height:18px;flex:none;display:inline-flex}
.k-btn--pill .k-btn__icon{width:16px;height:16px}

/* Input */
.k-field{display:grid;gap:var(--sp-s1);width:100%;min-width:0}
.k-field>*{min-width:0}
.k-field__label{font:var(--fw-medium) var(--fs-bodySm)/var(--lh-bodySm) var(--ff-body),var(--ff-fallback)}
.k-input{display:flex;align-items:center;gap:var(--sp-s2);min-height:var(--sz-control);padding:0 var(--sp-s4);border-radius:var(--r-sm);border:var(--sz-hairline) solid var(--c-borderStrong);background:var(--c-card);color:var(--c-ink);transition:border-color var(--dur-press) var(--ease-standard),box-shadow var(--dur-press) var(--ease-standard)}
.k-input input{flex:1;width:100%;min-width:0;border:0;background:none;font:var(--fw-regular) var(--fs-body)/1 var(--ff-body),var(--ff-fallback);color:inherit;outline:none;padding:0}
.k-input input::placeholder{color:var(--c-muted)}
.k-input__icon{width:18px;height:18px;color:var(--c-muted);flex:none}
.k-input__unit{color:var(--c-muted);font-size:var(--fs-bodySm)}
.k-input:focus-within,.k-input.is-pressed{border-color:var(--c-coral);box-shadow:0 0 0 3px var(--c-coralSoft)}
.k-input.is-error{border-color:var(--c-coral)}
.k-input.is-error .k-input__icon{color:var(--c-coralText)}
.k-field__help{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--ff-body),var(--ff-fallback);color:var(--c-muted)}
.k-field.is-error .k-field__help{color:var(--c-coralText)}
.k-field.is-disabled{opacity:1;pointer-events:none}
.k-field.is-disabled .k-input{opacity:var(--op-disabled)}

/* Card */
.k-card{display:block;width:100%;text-align:left;background-color:var(--c-card);border:var(--sz-hairline) solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-s4);box-shadow:var(--sh-card);color:var(--c-ink);cursor:pointer;font:inherit}
.k-card.is-error{border-color:var(--c-coral)}
.k-card__title{font:var(--fw-medium) var(--fs-headline)/var(--lh-headline) var(--ff-display),var(--ff-fallback)}
.k-card__text{font:var(--fw-regular) var(--fs-bodySm)/var(--lh-bodySm) var(--ff-body),var(--ff-fallback);color:var(--c-muted);margin-top:var(--sp-s1)}
.k-card__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s2)}
.k-msg{display:flex;align-items:center;gap:var(--sp-s2);margin-top:var(--sp-s3);padding:var(--sp-s2) var(--sp-s3);border-radius:var(--r-sm);background:var(--c-coralSoft);color:var(--c-coralText);font:var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--ff-body),var(--ff-fallback)}
.k-msg svg{width:16px;height:16px;flex:none}
.k-link{background:none;border:0;padding:0;font:var(--fw-semibold) var(--fs-caption)/1 var(--ff-body),var(--ff-fallback);color:var(--c-coralText);cursor:pointer;margin-left:auto}

/* Chip */
.k-chip{display:inline-flex;align-items:center;gap:var(--sp-s2);min-height:var(--sz-controlSm);padding:0 var(--sp-s3);border-radius:var(--r-pill);border:var(--sz-hairline) solid var(--c-border);background-color:var(--c-card);color:var(--c-ink);font:var(--fw-medium) var(--fs-bodySm)/1 var(--ff-body),var(--ff-fallback)}
.k-chip__label{display:inline-flex;align-items:center;gap:var(--sp-s2);min-height:var(--sz-controlSm);background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:var(--r-pill)}
.k-chip--selected{background-color:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
.k-chip--removable{padding-right:var(--sp-s2)}
.k-chip__x{display:grid;place-items:center;width:20px;height:20px;margin-left:calc(var(--sp-s1) * -1);border-radius:var(--r-pill);color:var(--c-muted);background:none;border:0;cursor:pointer;padding:0}
.k-chip__icon{display:inline-flex;width:14px;height:14px;flex:none;margin-left:calc(var(--sp-s1) * -1)}
.k-chip--selected .k-chip__x{color:var(--c-bg)}
.k-chip__x svg{width:12px;height:12px}
.k-chip.is-error{border-color:var(--c-coral);color:var(--c-coralText);background-color:var(--c-coralSoft)}
.k-chip.is-error .k-chip__x{color:var(--c-coralText)}
.k-chip .k-spin{color:var(--c-muted)}

/* ProgressRing */
.k-ring{position:relative;display:inline-block;flex:none}
.k-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.k-ring__track{fill:none;stroke:var(--c-border)}
.k-ring__fill{fill:none;stroke:var(--c-coral);stroke-linecap:round;transition:stroke-dashoffset var(--dur-ring) var(--ease-out)}
.k-ring--yellow .k-ring__fill{stroke:var(--c-yellow)}
.k-ring--green .k-ring__fill{stroke:var(--c-green)}
.k-ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.k-ring__value{font:var(--fw-bold) var(--fs-display)/1 var(--ff-display),var(--ff-fallback);letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums}
.k-ring--sm .k-ring__value,.k-ring--xs .k-ring__value{font-size:var(--fs-captionSm);font-weight:var(--fw-semibold);letter-spacing:0}
.k-ring--sm .k-ring__label,.k-ring--xs .k-ring__label{display:none}
.k-ring--lg .k-ring__value{font-size:var(--fs-displayLg)}
.k-ring__label{font:var(--fw-regular) var(--fs-captionSm)/1 var(--ff-body),var(--ff-fallback);color:var(--c-muted);margin-top:var(--sp-s1)}
.k-ring.is-pressed{transform:scale(var(--press-scale))}
.k-ring.is-error .k-ring__fill{stroke:var(--c-coral);stroke-linecap:butt;stroke-dashoffset:0!important}

.k-ring.is-error .k-ring__value{color:var(--c-coralText)}
.k-ring--loading .k-ring__fill{animation:k-sweep var(--dur-spin) var(--ease-standard) infinite}
@keyframes k-sweep{0%{stroke-dashoffset:var(--k-c)}50%{stroke-dashoffset:calc(var(--k-c) * .25)}100%{stroke-dashoffset:var(--k-c)}}

/* StatCard */
.k-stat{display:block;width:100%;text-align:left;background-color:var(--c-card);border:var(--sz-hairline) solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-s3) var(--sp-s3) var(--sp-s3);color:var(--c-ink);font:inherit;cursor:pointer}
.k-stat__name{font:var(--fw-medium) var(--fs-captionSm)/var(--lh-captionSm) var(--ff-body),var(--ff-fallback);color:var(--c-muted)}
.k-stat__value{font:var(--fw-bold) var(--fs-headline)/var(--lh-headline) var(--ff-display),var(--ff-fallback);font-variant-numeric:tabular-nums;margin:2px 0 var(--sp-s2)}
.k-stat__value small{display:block;margin-top:2px;font:var(--fw-medium) var(--fs-captionSm)/1 var(--ff-body),var(--ff-fallback);color:var(--c-muted);white-space:nowrap}
.k-bar{height:6px;border-radius:var(--r-pill);background:var(--c-border);overflow:hidden}
.k-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--c-coral);transition:width var(--dur-ring) var(--ease-out)}
.k-stat--yellow .k-bar i{background:var(--c-yellow)}
.k-stat--green .k-bar i{background:var(--c-green)}
.k-stat.is-error{border-color:var(--c-coral)}
.k-stat.is-error .k-stat__value{color:var(--c-coralText)}
.k-stat.is-error .k-bar i{background:var(--c-coral);width:100%;opacity:.35}

/* BottomSheet */
.k-sheet-frame{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg);border:var(--sz-hairline) solid var(--c-border)}
.k-sheet-frame__bg{position:absolute;inset:0;padding:var(--sp-s4);opacity:.6}
.k-sheet-frame__scrim{position:absolute;inset:0;background:var(--c-overlay)}
.k-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-card);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-s2) var(--sp-s4) var(--sp-s4);box-shadow:var(--sh-sheet);animation:k-sheet-in var(--dur-sheet) var(--ease-out)}
@keyframes k-sheet-in{from{transform:translateY(24px);opacity:0}}
.k-sheet.is-disabled{opacity:1}
.k-sheet__handle{width:var(--sz-handleW);height:var(--sz-handleH);border-radius:var(--r-pill);background:var(--c-border);margin:0 auto var(--sp-s3)}
.k-sheet__title{font:var(--fw-semibold) var(--fs-headline)/var(--lh-headline) var(--ff-display),var(--ff-fallback);margin-bottom:var(--sp-s3)}
.k-sheet__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-s2)}
.k-opt{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s1);padding:var(--sp-s3) var(--sp-s1);border-radius:var(--r-md);border:var(--sz-hairline) solid var(--c-border);background-color:var(--c-bg);color:var(--c-ink);font:var(--fw-medium) var(--fs-captionSm)/1 var(--ff-body),var(--ff-fallback);cursor:pointer}
.k-opt svg{width:22px;height:22px;color:var(--c-coralText)}
.k-sheet__status{display:flex;align-items:center;gap:var(--sp-s3);padding:var(--sp-s3);border-radius:var(--r-md);background:var(--c-bg);border:var(--sz-hairline) solid var(--c-border)}
.k-sheet__status .k-spin{color:var(--c-coral)}
.k-sheet__status b{display:block;font:var(--fw-medium) var(--fs-bodySm)/var(--lh-bodySm) var(--ff-body),var(--ff-fallback)}
.k-sheet__status small{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--ff-body),var(--ff-fallback);color:var(--c-muted)}
.k-sheet.is-error .k-sheet__status{border-color:var(--c-coral);background:var(--c-coralSoft)}
.k-sheet.is-error .k-sheet__status svg{color:var(--c-coralText);width:22px;height:22px;flex:none}
.k-sheet.is-error .k-sheet__status b{color:var(--c-coralText)}

/* Badge */
.k-badge{display:inline-flex;align-items:center;gap:var(--sp-s1);padding:3px var(--sp-s2);border-radius:var(--r-pill);font:var(--fw-semibold) var(--fs-captionSm)/1.2 var(--ff-body),var(--ff-fallback);border:var(--sz-hairline) solid transparent;background:none;white-space:nowrap}
.k-badge.pressable{cursor:pointer}
.k-badge::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex:none}
.k-badge--high{background-color:var(--c-greenSoft);color:var(--c-greenText)}
.k-badge--medium{background-color:var(--c-yellowSoft);color:var(--c-yellowText)}
.k-badge--low,.k-badge.is-error{background-color:var(--c-coralSoft);color:var(--c-coralText)}
.k-badge.is-loading{background-color:var(--c-card);color:var(--c-muted);border-color:var(--c-border)}
.k-badge.is-loading::before{display:none}
.k-badge .k-spin{width:12px;height:12px}

/* TabBar */
.k-tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:var(--sz-tabBar);background:var(--c-card);border-top:var(--sz-hairline) solid var(--c-border);border-radius:0 0 var(--r-md) var(--r-md);padding:0 var(--sp-s1) var(--sp-s2)}
.k-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--sz-tapMin);min-width:0;border:0;background:none;border-radius:var(--r-sm);color:var(--c-muted);font:var(--fw-medium) var(--fs-captionSm)/1 var(--ff-body),var(--ff-fallback);cursor:pointer;padding:var(--sp-s1) 0;white-space:nowrap;letter-spacing:-.01em}
.k-tab svg{width:22px;height:22px}
.k-tab--active{color:var(--c-ink)}
.k-tab--active svg{color:var(--c-coralText)}
.k-tab--fab{margin-top:calc(var(--sp-s5) * -1)}
.k-tab--fab .k-fab{display:grid;place-items:center;width:var(--sz-control);height:var(--sz-control);border-radius:var(--r-pill);background-color:var(--c-coral);color:var(--c-onCoral)}
.k-tab--fab .k-fab svg{color:inherit}
.k-tab__dot{position:absolute;top:6px;left:calc(50% + 6px);width:8px;height:8px;border-radius:var(--r-pill);background:var(--c-coral);border:2px solid var(--c-card)}
.k-tabbar.is-error .k-tab--error{color:var(--c-coralText)}
.k-tabbar.is-error .k-tab--error svg{color:var(--c-coralText)}
.k-tabbar__frame{border:var(--sz-hairline) solid var(--c-border);border-radius:var(--r-md);overflow:hidden;background:var(--c-bg)}
.k-tabbar__frame .k-tabbar{border-radius:0}
.k-tabbar__frame .fake{height:36px;padding:var(--sp-s2) var(--sp-s3);font:var(--fw-regular) var(--fs-captionSm)/1 var(--ff-body),var(--ff-fallback);color:var(--c-muted)}