/* ═══════════════════════════════════════════════════════════════════════════
   Hotel Wiederkehr — base: fonts, tokens, reset, typography

   The palette is constrained by the data, not by taste: green, amber and red
   are already spoken for by the hotel's own room grades and by the capacity
   states, so the brand accent cannot be any of them. It is a cold alpine-lake
   blue that reads as chrome and never as a status.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-400_700-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:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-400_700-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:'Zilla Slab';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/zilla-slab-500-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:'Zilla Slab';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/zilla-slab-500-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:'Zilla Slab';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/zilla-slab-600-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:'Zilla Slab';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/zilla-slab-600-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{
  /* ── Chrome ─────────────────────────────────────────────────────────────
     Contrast is carried by ink and hairlines, never by shadow: under the glare
     of a reception desk, and at the angle you hold an iPad, a soft drop shadow
     is simply invisible. */
  --ink:         #12212E;
  --ink-2:       #3B4A57;
  --ink-3:       #6B7A86;
  --ink-4:       #9AA7B1;

  --paper:       #FFFFFF;
  --canvas:      #EEF2F1;
  --canvas-2:    #E3E9E8;
  --rule:        #D8DEDC;
  --rule-strong: #B9C2C0;

  /* ── Accent ───────────────────────────────────────────────────────────── */
  --accent:      #0B5A72;
  --accent-hi:   #0D6C89;
  --accent-lo:   #073F52;
  --accent-wash: #E4EFF3;
  --accent-line: #A9CBD8;

  /* ── Status — never decoration ────────────────────────────────────────── */
  --ok:      #1F7A4C;  --ok-wash:     #E3F1E9;  --ok-ink:     #155938;
  --warn:    #A9700A;  --warn-wash:   #FAF0DC;  --warn-ink:   #6F4805;
  --danger:  #B3261E;  --danger-wash: #FBE7E5;  --danger-ink: #7A1913;

  /* ── The hotel's room grade ───────────────────────────────────────────────
     Carried on the room's door plate as a pale tint, not just a dot: thirty-six
     tinted plates give you the quality make-up of the whole house in one look,
     and a tint that light never competes with the guests' names beside it. */
  --grade-green: #2E7D4F;
  --grade-yellow:#C99A12;
  --grade-red:   #C0392B;
  --grade-ring:  rgba(18,33,46,.24);
  --grade-green-wash:  #E9F2EC;
  --grade-yellow-wash: #FAF2DC;
  --grade-red-wash:    #FAEAE7;

  /* ── Booking identity ─────────────────────────────────────────────────────
     This is the colour that does the most work. A thirty-child school group
     spread over six rooms should read as one block of colour across the house,
     and the family in room 34 as another — that is the overview. Ten muted,
     evenly-spaced hues, deliberately not traffic lights, and each one also
     mixed down to a wash pale enough to sit behind a name without shouting. */
  --bk-0:#4C6E9B; --bk-1:#7A5C8E; --bk-2:#8A6242; --bk-3:#3F7B7B; --bk-4:#93566B;
  --bk-5:#5E6B4F; --bk-6:#6B6E86; --bk-7:#8A7B3F; --bk-8:#4F6F8A; --bk-9:#7C5A5A;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif;

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

  /* ── Shape — tight on data, softer on containers ──────────────────────── */
  --r-cell:  2px;
  --r-ctl:   6px;
  --r-card:  8px;
  --r-modal: 10px;
  --r-pill:  999px;

  /* Elevation, layered rather than flat: a tight contact shadow plus a wide
     soft one is what makes a surface read as lifted rather than outlined. */
  --shadow-sm:    0 1px 2px rgba(18,33,46,.05), 0 1px 1px rgba(18,33,46,.04);
  --shadow-md:    0 2px 4px rgba(18,33,46,.05), 0 6px 16px -4px rgba(18,33,46,.10);
  --shadow-pop:   0 1px 2px rgba(18,33,46,.08), 0 12px 32px -8px rgba(18,33,46,.20);
  --shadow-modal: 0 2px 6px rgba(18,33,46,.10), 0 32px 72px -16px rgba(18,33,46,.38);
  --focus:        0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  /* A hairline of light along the top of a solid fill. Reads as a real
     surface catching the light rather than a flat rectangle. */
  --sheen:        inset 0 1px 0 rgba(255,255,255,.14);

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

  --bar-h:       52px;
  --tap:         44px;
  --slot-h:      30px;
  --card-min:    252px;
  --content-max: 1680px;

  /* ── Motion ───────────────────────────────────────────────────────────────
     Everything is quick. Movement here exists to make a change readable —
     which room a count belongs to, where a name went — not to be noticed. In
     a tool somebody uses all day, anything past about a quarter of a second
     starts to feel like waiting.

     These carry their easing with them, so `transition: background var(--t)`
     reads as one idea at the call site. */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 110ms var(--ease);
  --t:      170ms var(--ease);
  --t-slow: 260ms var(--ease);
}

@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;
  /* A barely-there vertical shift, so a long board does not read as one flat
     sheet of grey. */
  background:linear-gradient(180deg, #F4F6F5 0%, var(--canvas) 340px);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

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; }
table{ border-collapse:collapse; width:100%; }
th{ text-align:left; font-weight:600; }
summary{ cursor:pointer; }
[hidden]{ display:none !important; }

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

html{ scroll-behavior:smooth; }

/* Every input is 16px on a touch device, or iPadOS zooms the page on focus.
   Keyed to the pointer, not the viewport — an iPad is 820–1180px wide, so a
   `max-width: 768px` rule (which is what the camp tool uses) misses it. */
@media (pointer: coarse){
  input, select, textarea{ font-size:16px; }
}

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

h1,.h1{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-xl); line-height:1.15; }
h2,.h2{ font-size:var(--fs-lg); font-weight:600; line-height:1.25; }
h3,.h3{ font-size:var(--fs-md); font-weight:600; }

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

/* German compounds run about a third longer than the English. In tight cells
   let them break rather than overflow. */
[lang="de"] .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 ────────────────────────
   Set the class on a row and both the band and the wash follow, so nothing
   has to repeat the hue. The wash is mixed against paper rather than being a
   flat alpha, so it stays the same over any background. */

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