/* Minimal element defaults so a bare page already looks like Karlife. */
body{background:var(--bg-app);color:var(--text-primary);font:var(--type-body);font-feature-settings:"tnum";-webkit-font-smoothing:antialiased;transition:var(--transition-theme)}
/* A theme scope must re-declare color: `body`'s value is computed once against :root, so any text
   node that sets `font:` without `color:` would inherit the LIGHT colour even inside
   [data-theme="dark"]. Attribute selector outranks `body`, so this re-resolves per scope. */
[data-theme]{color:var(--text-primary)}
a{color:var(--action-tertiary-text);text-decoration:none}
a:hover{color:var(--action-primary-pressed)}
[data-theme="dark"] a:hover{color:var(--brand-300)}
.k-num{font-variant-numeric:tabular-nums}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Branded scrollbars — soft blush, both axes, both themes. Applies to the page and to any
   scrolling element (screen bodies, sheets, long lists). Track is transparent so the bar reads
   as a floating pill on whatever surface it sits over; it fills in on hover.
   Thumb radius is pill, matching every other rounded control in the system. */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);background:transparent}
::-webkit-scrollbar-track{background:transparent;border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-pill);border:2.5px solid transparent;background-clip:padding-box;min-height:32px;min-width:32px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--accent);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
:hover::-webkit-scrollbar-track{background:var(--scrollbar-track)}

/* Horizontal strips that scroll by swipe (day strip, chip rows) hide the bar entirely —
   the content edge is the affordance there. */
.k-scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.k-scroll-hidden{scrollbar-width:none}
.k-scroll-hidden::-webkit-scrollbar{width:0;height:0}