/* ═══════════════════════════════════════════════════════════════════════════
   Teamstay — base: fonts, tokens, reset, typography

   Nordic and cool, because the first venues are a Finnish sports institute
   on a lake and an Austrian youth hotel in the mountains, and because the
   people at the desk look at this all day: a quiet birch-grey canvas, deep
   navy ink, and one saturated fjord blue that means "you can act here".

   Green, amber and red are spoken for by the data (free bed, almost full,
   over capacity) and are never decoration. A venue on its own domain swaps
   the blue for its own colour; everything derived from it follows through
   color-mix, so one hex is the whole rebrand.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/schibsted-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/schibsted-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;

  /* ── Chrome ─────────────────────────────────────────────────────────── */
  --ink:         #0F1B2D;
  --ink-2:       #36445A;
  --ink-3:       #66738A;
  --ink-4:       #9AA5B6;

  --paper:       #FFFFFF;
  --paper-2:     #FAFBFC;
  --canvas:      #F1F3F6;
  --canvas-2:    #E6EAF0;

  --busy:        #5B6B7A;  --busy-wash:   #EDF0F4;  --busy-ink:   #3F4E5C;
  --rule:        #E2E6EC;
  --rule-strong: #C9D0DA;

  /* ── Accent: one hex, the rest derived ───────────────────────────────── */
  --accent:      #2448D8;
  --accent-hi:   color-mix(in oklab, var(--accent) 86%, white);
  --accent-lo:   color-mix(in oklab, var(--accent) 78%, black);
  --accent-wash: color-mix(in oklab, var(--accent) 9%, var(--paper));
  --accent-line: color-mix(in oklab, var(--accent) 32%, var(--paper));
  --on-accent:   #FFFFFF;

  /* ── Status: never decoration ────────────────────────────────────────── */
  --ok:      #12875A;  --ok-wash:     #E3F5EC;  --ok-ink:     #0B6142;
  --warn:    #C27A0A;  --warn-wash:   #FDF1DC;  --warn-ink:   #7A4A04;
  --danger:  #D33A4C;  --danger-wash: #FDE8EA;  --danger-ink: #8E1B2A;

  --grade-green: #2E8B57;
  --grade-yellow:#D4A017;
  --grade-red:   #D33A4C;
  --grade-ring:  rgba(15,27,45,.22);
  --grade-green-wash:  #E8F4EC;
  --grade-yellow-wash: #FBF3DD;
  --grade-red-wash:    #FCEBEC;

  /* ── Booking identity ───────────────────────────────────────────────────
     A school group spread over six rooms should read as one block of colour
     across the house. Ten hues, evenly spread, saturated enough to tell apart
     at a glance and not so loud that they read as status. */
  --bk-0:#3E6FD8; --bk-1:#8B5CD6; --bk-2:#C76B2E; --bk-3:#14918A; --bk-4:#C94F86;
  --bk-5:#5F8A2E; --bk-6:#5A63C9; --bk-7:#A98712; --bk-8:#2C8BB8; --bk-9:#A3524F;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-ui:      'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;

  --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px;
  --fs-md:  16px; --fs-lg:  20px; --fs-xl: 28px; --fs-display: 34px;

  /* ── Shape: tighter on data, rounder on what holds it ─────────────────── */
  --r-cell:  7px;
  --r-ctl:   11px;
  --r-card:  16px;
  --r-modal: 22px;
  --r-pill:  999px;

  --shadow-sm:    0 1px 2px rgba(15,27,45,.05);
  --shadow-md:    0 1px 2px rgba(15,27,45,.04), 0 8px 24px -10px rgba(15,27,45,.14);
  --shadow-pop:   0 2px 6px rgba(15,27,45,.06), 0 18px 40px -12px rgba(15,27,45,.26);
  --shadow-modal: 0 4px 12px rgba(15,27,45,.08), 0 40px 90px -20px rgba(15,27,45,.42);
  --focus:        0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  --sheen:        inset 0 1px 0 rgba(255,255,255,.18);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  --bar-h:       60px;
  --side-w:      248px;
  --tap:         44px;
  --slot-h:      32px;
  --card-min:    264px;
  --content-max: 1680px;

  /* ── Motion ─────────────────────────────────────────────────────────────
     Movement exists to show what changed: where a name went, which room a
     count belongs to. Quick for anything used all day; the spring is kept for
     the moments somebody did something (a name lands in a bed). */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms var(--ease);
  --t:      200ms var(--ease);
  --t-slow: 320ms var(--ease);
}

/* ── Dark ────────────────────────────────────────────────────────────────
   Night shift at the desk. Follows the device unless somebody has picked a
   side in the menu (data-theme on <html>). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --_dark:1; }
}
:root[data-theme="dark"], :root:not([data-theme="light"]):is(.dark-auto){ }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#E9EEF6; --ink-2:#C2CBD9; --ink-3:#8C98AC; --ink-4:#5F6B80;
    --paper:#151D2B; --paper-2:#182131; --canvas:#0D131E; --canvas-2:#1B2434;
    --rule:#253045; --rule-strong:#34415A;
    --busy-wash:#1E2738; --busy-ink:#B4C0D2;
    --accent:#5B7CFF;
    --ok:#36C08A; --ok-wash:#0F2E24; --ok-ink:#7FE0B6;
    --warn:#E8A33A; --warn-wash:#33250C; --warn-ink:#F5C877;
    --danger:#F0607A; --danger-wash:#3A1520; --danger-ink:#FFA3B2;
    --grade-green-wash:#132A1E; --grade-yellow-wash:#2E2610; --grade-red-wash:#33161C;
    --grade-ring: rgba(255,255,255,.18);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.5);
    --shadow-pop: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6);
    --shadow-modal: 0 4px 12px rgba(0,0,0,.4), 0 40px 90px -20px rgba(0,0,0,.7);
    --sheen: inset 0 1px 0 rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9EEF6; --ink-2:#C2CBD9; --ink-3:#8C98AC; --ink-4:#5F6B80;
  --paper:#151D2B; --paper-2:#182131; --canvas:#0D131E; --canvas-2:#1B2434;
  --rule:#253045; --rule-strong:#34415A;
  --busy-wash:#1E2738; --busy-ink:#B4C0D2;
  --accent:#5B7CFF;
  --ok:#36C08A; --ok-wash:#0F2E24; --ok-ink:#7FE0B6;
  --warn:#E8A33A; --warn-wash:#33250C; --warn-ink:#F5C877;
  --danger:#F0607A; --danger-wash:#3A1520; --danger-ink:#FFA3B2;
  --grade-green-wash:#132A1E; --grade-yellow-wash:#2E2610; --grade-red-wash:#33161C;
  --grade-ring: rgba(255,255,255,.18);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.5);
  --shadow-pop: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.6);
  --shadow-modal: 0 4px 12px rgba(0,0,0,.4), 0 40px 90px -20px rgba(0,0,0,.7);
  --sheen: inset 0 1px 0 rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:0ms; --t:0ms; --t-slow:0ms; }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,p,figure,ul,ol,dl,dd,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
fieldset{ border:0; padding:0; min-width:0; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
table{ border-collapse:collapse; width:100%; }
th{ text-align:left; font-weight:600; }
summary{ cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-line); }

:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-cell); }

html{ scroll-behavior:smooth; }

@media (pointer: coarse){
  input, select, textarea{ font-size:16px; }
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1,.h1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-xl);
  line-height:1.1; letter-spacing:-.022em;
  font-variation-settings:'opsz' 48;
}
h2,.h2{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:650; line-height:1.2; letter-spacing:-.012em; }
h3,.h3{ font-size:var(--fs-md); font-weight:650; letter-spacing:-.005em; }

.nums,.table td,.ledger,.tl,.keyfield,.daystrip,.stat__value{ font-variant-numeric:tabular-nums; }
.narrow{ letter-spacing:-.01em; }
.muted{ color:var(--ink-3); }
.subtle{ color:var(--ink-4); }
.ok{ color:var(--ok-ink); }
.danger{ color:var(--danger-ink); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

[lang="de"] .wrap-hard, [lang="fi"] .wrap-hard{ overflow-wrap:anywhere; hyphens:auto; }

.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;
}

.hstack{ display:flex; align-items:center; gap:var(--s2); }
.vstack{ display:flex; flex-direction:column; gap:var(--s2); }
.spacer{ flex:1 1 auto; }

/* ── Booking colour, as a pair of variables per index ────────────────────── */

.bk-0{ --bk:var(--bk-0); --bk-wash:color-mix(in oklab, var(--bk-0) 14%, var(--paper)); }
.bk-1{ --bk:var(--bk-1); --bk-wash:color-mix(in oklab, var(--bk-1) 14%, var(--paper)); }
.bk-2{ --bk:var(--bk-2); --bk-wash:color-mix(in oklab, var(--bk-2) 14%, var(--paper)); }
.bk-3{ --bk:var(--bk-3); --bk-wash:color-mix(in oklab, var(--bk-3) 14%, var(--paper)); }
.bk-4{ --bk:var(--bk-4); --bk-wash:color-mix(in oklab, var(--bk-4) 14%, var(--paper)); }
.bk-5{ --bk:var(--bk-5); --bk-wash:color-mix(in oklab, var(--bk-5) 14%, var(--paper)); }
.bk-6{ --bk:var(--bk-6); --bk-wash:color-mix(in oklab, var(--bk-6) 14%, var(--paper)); }
.bk-7{ --bk:var(--bk-7); --bk-wash:color-mix(in oklab, var(--bk-7) 14%, var(--paper)); }
.bk-8{ --bk:var(--bk-8); --bk-wash:color-mix(in oklab, var(--bk-8) 14%, var(--paper)); }
.bk-9{ --bk:var(--bk-9); --bk-wash:color-mix(in oklab, var(--bk-9) 14%, var(--paper)); }