/* The element defaults every screen inherits.

   This file exists because of one measurement: no stylesheet in this project
   declared 13.3px anywhere, yet every button on every screen rendered at
   13.3px. Browsers do not inherit font-size into form controls — a button,
   input, select and textarea each fall back to a UA default around 13.3px
   unless somebody says otherwise. Nobody had. That single omission is why
   "Zapisz blokadę", "Usuń" and "Zaloguj" were the smallest text on their
   screens, and why iOS zoomed the viewport on every field it was asked to
   focus.

   So: controls inherit, explicitly, first. Everything else follows. */

@font-face {
  font-family: Sansation;
  src: url("fonts/Sansation-Regular.524710b9227b.woff2") format("woff2"),
       url("fonts/Sansation-Regular.b06ad7b83e55.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  /* Text appears immediately in the fallback face and swaps when the brand
     face arrives. On trade-fair wi-fi nobody should look at a blank block. */
  font-display: swap;
}
@font-face {
  font-family: Sansation;
  src: url("fonts/Sansation-Bold.cb17a3692f2f.woff2") format("woff2"),
       url("fonts/Sansation-Bold.37c961d1db01.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 106.25% of the browser's own base = 17px when that base is untouched, and
   proportionally more when somebody has raised it. Never a fixed pixel value:
   iOS alone scales its body text from 14pt to 53pt and a hard-coded root
   would ignore every one of those settings. */
html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
}

/* ---- Controls inherit. This is the fix for the 13.3px problem. ---------- */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: var(--t-body);   /* 17px — above the 16px iOS zoom threshold */
  line-height: var(--lh-tight);
  color: inherit;
}
/* Safari applies its own font to date and time inputs regardless of the rule
   above unless the shadow parts are addressed too. */
::-webkit-datetime-edit, ::-webkit-datetime-edit-fields-wrapper { font-size: inherit; }

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--t-page); }
h2 { font-size: var(--t-section); }
h3 { font-size: var(--t-card); }
h4 { font-size: var(--t-body); }
p { margin: 0 0 var(--space-3); }

/* ---- Links -------------------------------------------------------------- */
a { color: var(--c-accent); }
a:hover { color: var(--c-ink); }

/* Focus has to be visible on every surface, including the lime action, where
   a lime ring would vanish. */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Numbers ------------------------------------------------------------ */
/* Anything read as a column of figures: times, counts, durations. */
.num, time, .t-num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Utility type ------------------------------------------------------- */
.t-page { font-size: var(--t-page); font-weight: 700; line-height: var(--lh-tight); }
.t-section { font-size: var(--t-section); font-weight: 700; line-height: var(--lh-tight); }
.t-card { font-size: var(--t-card); font-weight: 700; line-height: var(--lh-tight); }
.t-body { font-size: var(--t-body); }
.t-meta { font-size: var(--t-meta); color: var(--c-ink-muted); }
.t-eyebrow {
  font-size: var(--t-meta); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-muted);
}

/* ---- Buttons ------------------------------------------------------------
   Three sizes, taken from Apple's own ladder (28/32/44/52/64pt) and pinned to
   the two that matter here: a primary action people hit while walking, and
   everything else. */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  /* At 200% zoom the page has half the CSS pixels, and a button whose label
     cannot wrap simply pushes the document wider than the screen. */
  max-width: 100%; min-width: 0; overflow-wrap: anywhere; text-align: center;
  min-height: var(--tap-lg);
  padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  background: var(--c-action); color: var(--c-action-ink);
  font-family: var(--font-brand);
  font-size: var(--t-body); font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--brand-transition), color var(--brand-transition);
}
.button:hover, .btn:hover { background: var(--c-ink); color: var(--c-surface); }
.button-secondary {
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line-strong); min-height: var(--tap);
}
.button-secondary:hover { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.button-danger { background: var(--c-danger); color: var(--c-surface); }
.button-danger:hover { background: var(--c-ink); }
.button-block { width: 100%; }

/* A control that is saving looks like it, and cannot be pressed again.
   Deliberately not `disabled`: a disabled submitter is dropped from the form
   payload, and the quick-block buttons carry their duration in their value.
   See feedback.js. */
[aria-busy="true"], .button:disabled, .btn:disabled {
  opacity: .7; cursor: progress; pointer-events: none;
}
.button[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; margin-left: var(--space-2);
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Fields ------------------------------------------------------------- */
.field { margin: 0 0 var(--space-4); }
.field > label, .field-label {
  display: block; margin-bottom: var(--space-1);
  font-size: var(--t-body); font-weight: 700;
}
.field-help { margin: var(--space-1) 0 0; font-size: var(--t-meta); color: var(--c-ink-muted); }
.field-error { margin: var(--space-1) 0 0; font-size: var(--t-body); font-weight: 700; color: var(--c-danger); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  /* A datetime-local input carries a large intrinsic minimum width in Chrome,
     and a grid item defaults to min-width:auto — which is how a form with a
     date field refused to fall below ~310px and pushed the page sideways at
     200% zoom, where the page has 195 CSS pixels to work with. */
  width: 100%; min-width: 0; min-height: var(--tap-lg);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink);
}
textarea { min-height: calc(var(--tap-lg) * 2); line-height: var(--lh-body); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--c-accent); outline-offset: 0;
}
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--c-accent); }
.checkbox-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); font-size: var(--t-body);
}

/* Forms stretched across a wide monitor are unreadable; a line of input is
   still a line of text. */
.form-column { max-width: var(--page-max); }

/* ---- Cards, rows, chips, status ---------------------------------------- */
.card {
  background: var(--c-surface); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow);
  margin-bottom: var(--space-4);
}
.card > :last-child { margin-bottom: 0; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--space-4);
  border: 2px solid var(--c-line); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--t-body); font-weight: 700; text-decoration: none; cursor: pointer;
}
.chip[aria-pressed="true"], .chip.is-selected {
  background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink);
}

/* State is never colour alone: every pill carries its word. */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--t-meta); font-weight: 700;
  background: var(--c-blocked-soft); color: var(--c-blocked);
}
.status-free { background: var(--c-free-soft); color: var(--c-free); }
.status-booked { background: var(--c-booked-soft); color: var(--c-booked); }
.status-blocked { background: var(--c-blocked-soft); color: var(--c-blocked); }
.status-warn { background: var(--c-warn-soft); color: var(--c-warn); }
.status-danger { background: var(--c-danger-soft); color: var(--c-danger); }

.empty-state {
  padding: var(--space-5) var(--space-4); text-align: center;
  color: var(--c-ink-muted); font-size: var(--t-body);
}

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