/* ===== global.css — shared by index.html and room.html ===== */

/* Colours: OKLCH (perceptually uniform), with HEX fallback for older browsers.
   HEX values are also the ones to use in the brand book, Canva and print. */
:root {
  --bg: #f7f6f2;
  --card: #ffffff;
  --ink: #1e2422;
  --muted: #5c6662;
  --accent: #2f6f5e;
  --line: #dad7cd;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4f00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151918;
    --card: #202726;
    --ink: #e9ece9;
    --muted: #9ba6a1;
    --accent: #6bc2a7;
    --line: #363f3d;
    --warn-bg: #3a3218;
    --warn-ink: #f2da8c;
  }
}
@supports (color: oklch(0% 0 0)) {
  :root {
    --bg: oklch(97.4% 0.005 95);
    --card: oklch(100% 0 0);
    --ink: oklch(25.4% 0.009 173);
    --muted: oklch(50% 0.013 170);
    --accent: oklch(49.6% 0.072 173);
    --line: oklch(87.9% 0.014 93);
    --warn-bg: oklch(96.8% 0.041 90);
    --warn-ink: oklch(44.4% 0.091 84);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(20.8% 0.006 179);
      --card: oklch(26.6% 0.009 185);
      --ink: oklch(94% 0.005 146);
      --muted: oklch(71.6% 0.015 167);
      --accent: oklch(75.2% 0.095 171);
      --line: oklch(35.9% 0.013 176);
      --warn-bg: oklch(31.8% 0.042 93);
      --warn-ink: oklch(89.2% 0.101 93);
    }
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.5 system-ui,
    sans-serif;
}
main {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px;
}
h1 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}
p.sub {
  color: var(--muted);
  margin: 0 0 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
}
input[type="range"],
select {
  width: 100%;
}
select {
  font: inherit;
  padding: 4px 6px;
  margin: 4px 0;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.val {
  color: var(--accent);
  font-weight: 700;
}
.hint {
  color: var(--muted);
  font-size: 0.8rem;
}
.res {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.big {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
}
.tablewrap {
  overflow-x: auto;
  margin-top: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
td,
th {
  border-bottom: 1px solid var(--line);
  padding: 4px 6px;
  text-align: right;
  white-space: nowrap;
}
th:first-child,
td:first-child {
  text-align: left;
}
.note {
  font-size: 0.8rem;
  color: var(--muted);
}
@media (max-width: 480px) {
  canvas {
    aspect-ratio: 4 / 3;
  }
  .big {
    font-size: 1.6rem;
  }
  table {
    font-size: 0.8rem;
  }
}

/* navigation between calculators */
nav.top {
  font-size: 0.9rem;
  margin-bottom: 12px;
}
nav.top a {
  color: var(--accent);
}
.sw {
  display: inline-block;
  width: 22px;
  margin-right: 6px;
  vertical-align: middle;
}
input[type="range"] {
  cursor: pointer;
  touch-action: none;
}