/* Shared design tokens. San Francisco on Apple devices, Inter (its closest open relative) everywhere else. */
@font-face{font-family:'Inter';src:url(fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --forest:#08190F;--pine:#0E2A1A;--moss:#16402A;--leaf:#3CB54A;--sprout:#8FD35A;--ember:#E88B2E;
  /* status: validated for colour-blind separation, always shipped with an icon and a label */
  --ontime:#0F7F63;--late:#F0A030;--leave:#3F6FB5;--absent:#C4453A;
  --ontime-bg:#DDF2EA;--late-bg:#FDF0D8;--leave-bg:#E2EAF7;--absent-bg:#F9E1DE;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI Variable Display','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --serif:var(--display);
  --spring:cubic-bezier(.32,.72,0,1);--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--sans);font-size:15px;line-height:1.42;font-feature-settings:'cv11','ss01';-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid rgba(10,132,255,.6);outline-offset:2px}
.num,.mono{font-variant-numeric:tabular-nums}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
.spin{width:18px;height:18px;border:2.2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-.2em}
@keyframes spin{to{transform:rotate(360deg)}}

/* Notifications drop from the top like the Dynamic Island */
#toasts{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:9000;display:grid;justify-items:center;gap:8px;width:min(94vw,440px);pointer-events:none}
.toast{background:#000;color:#fff;padding:11px 18px 11px 14px;border-radius:24px;box-shadow:0 12px 34px rgba(0,0,0,.28);display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:500;line-height:1.3;max-width:100%;animation:island .5s cubic-bezier(.2,1.3,.3,1) both;transform-origin:top center}
.toast .ic{width:20px;height:20px;flex:none}
.toast.ok .ic{color:#30D158}.toast.err .ic{color:#FF453A}.toast.warn .ic{color:#FF9F0A}
.toast.out{animation:islandOut .3s var(--ease) both}
@keyframes island{0%{opacity:0;transform:translateY(-14px) scale(.55,.7);border-radius:30px}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes islandOut{to{opacity:0;transform:translateY(-12px) scale(.8)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}
