/* KS AIR LOCK site: shared base (fonts, tokens, buttons, toast, modal). Used by index.html and admin.html. */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-700.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/unbounded-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')}

:root{
  --frost:#edf0f4;
  --paper:#ffffff;
  --ink:#0c1016;
  --graphite:#566172;
  --faint:#8792a3;
  --rule:#d6dce4;
  --soft:#e3e8ee;
  --display:#000;
  /* brake zone colours from the KS AIR LOCK OS spec */
  --z1:#34e27a;--z2:#ffd83b;--z3:#ff8a1f;--z4:#2f5bff;--z5:#ff2d3d;
  --ok:#0b8f4f;--warn:#a85f00;--bad:#c9252f;
  --f-head:'Barlow Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --f-ui:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --f-wm:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(18px,4vw,40px);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--frost);color:var(--ink);font:400 17px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed}
ul,ol{list-style:none}
[hidden]{display:none!important}

/* No blue flashes or rings when a button is tapped or clicked. Keyboard focus stays visible in ink. */
button,a,summary,[role=button],label,select{-webkit-touch-callout:none;touch-action:manipulation}
button:focus,a:focus,summary:focus,select:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::selection{background:rgba(12,16,22,.16);color:inherit}
input,textarea,select{-webkit-tap-highlight-color:transparent}
input:focus,textarea:focus,select:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--f-ui);text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;
  -webkit-user-select:none;user-select:none;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),box-shadow .25s var(--ease)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn--dark{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn--dark:hover:not(:disabled){background:#242b36;box-shadow:0 10px 22px -12px rgba(12,16,22,.7)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn--ghost:hover:not(:disabled){border-color:var(--ink);background:rgba(255,255,255,.6)}
.btn--paper{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.btn--paper:hover:not(:disabled){border-color:var(--ink)}
.btn--danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:var(--bad)}
.btn--sm{min-height:40px;padding:0 18px;font-size:15px}
.btn--xs{min-height:34px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.5}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn .gmark{width:18px;height:18px;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* KS mark (ks.png with a built-in fallback if the file is missing) */
.ksmark{width:36px;height:36px;object-fit:contain;flex:none}
.ks-fallback{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#000;color:#fff;font:800 14px var(--f-wm);letter-spacing:-.06em;padding-right:2px;flex:none}

/* toast */
.toasts{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:var(--ink);color:#fff;border-radius:14px;padding:13px 16px;font:500 15px/1.4 var(--f-ui);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:toastIn .35s var(--ease) both}
.toast i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--z1)}
.toast.bad i{background:var(--z5)}
.toast.warn i{background:var(--z3)}
.toast.out{animation:toastOut .25s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* modal */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
.modal.open{visibility:visible;opacity:1;transition:opacity .25s ease,visibility 0s}
.modal__bg{position:absolute;inset:0;background:rgba(12,16,22,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal__box{position:relative;background:var(--paper);border-radius:22px;width:min(100%,620px);max-height:min(86vh,720px);overflow:auto;padding:30px 30px 26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.modal.open .modal__box{transform:none}
.modal__box h2{font:700 34px/1.05 var(--f-head);margin-bottom:12px}
.modal__box h3{font:700 20px/1.2 var(--f-head);margin:20px 0 6px}
.modal__box p,.modal__box li{color:#2b3441;font-size:16px;line-height:1.6}
.modal__box p+p{margin-top:10px}
.modal__box ul{list-style:disc;padding-left:20px;display:grid;gap:4px;margin-top:6px}
.modal__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--graphite);transition:background-color .2s,transform .15s}
.modal__x:hover{background:var(--soft)}
.modal__x:active{transform:scale(.92)}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}