/* bel-alert — one visual system, shared by every screen.

   Colour idea: brightness is the accent. Surfaces are graphite; what concerns
   the reader is simply brighter. Exactly one chromatic colour (moss) exists,
   and only for two meanings: "this is an action" and "this is inside your zone".
   There is deliberately no red anywhere — people come to this service to get
   away from colour-coded alarm.

   Every text/background pair below is checked against WCAG AA by
   tools/contrast.py. Run it after touching any colour. */

@font-face {
  font-family: 'Prata';
  src: url(fonts/prata-400.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url(fonts/onest-400.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url(fonts/onest-600.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Dark is the default: this app is opened at night more than in daylight. */
:root, :root[data-theme="dark"] {
  --bg:        #150F1D;
  --surface:   #1E1629;
  --raised:    #271D34;
  --line:      #6A5C7E;

  --text:      #F4F1F8;
  --dim:       #C7BFD4;
  --noise:     #A99FB8;

  --off-bg:    #241B31;
  --off-text:  #9A90AA;

  --moss:      #E8C68A;
  --moss-tint: #2E2338;
  --moss-ink:  #1A1207;
  --zone-edge: #E8C68A;
  --zone-sheen:#FFF0CE;

  --ok:        #8FBF7A;
  --mid:       #E0B45C;
  --low:       #D98A8A;
  --row-lit:   #2A2038;

  --hush:      rgba(21, 15, 29, 0.66);
  --hush-fill: #150F1D;
  --hush-alpha: 0.66;

  --panel:      rgba(21, 15, 29, 0.82);
  --panel-line: rgba(244, 241, 248, 0.14);

  --shadow:    0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #F5F2F8;
  --surface:   #FFFFFF;
  --raised:    #FFFFFF;
  --line:      #8E80A2;

  --text:      #150F1D;
  --dim:       #453B57;
  --noise:     #554A66;

  --off-bg:    #E8E3EE;
  --off-text:  #5C5170;

  --moss:      #4B2E6B;
  --moss-tint: #EAE2F3;
  --moss-ink:  #FFFFFF;
  --zone-edge: #7A5A18;
  --zone-sheen:#C79A3A;

  --ok:    #2F6B34;
  --mid:     #7A5A18;
  --low:     #8E3A3A;
  --row-lit:   #EDE6F5;

  --hush:      rgba(245, 242, 248, 0.80);
  --hush-fill: #F5F2F8;
  --hush-alpha: 0.80;

  --panel:      rgba(255, 255, 255, 0.86);
  --panel-line: rgba(21, 15, 29, 0.16);

  --shadow:    0 12px 32px rgba(40, 25, 60, 0.20);
  --shadow-sm: 0 2px 10px rgba(40, 25, 60, 0.16);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:        #F5F2F8;
    --surface:   #FFFFFF;
    --raised:    #FFFFFF;
    --line:      #8E80A2;

    --text:      #150F1D;
    --dim:       #453B57;
    --noise:     #554A66;

    --off-bg:    #E8E3EE;
    --off-text:  #5C5170;

    --moss:      #4B2E6B;
    --moss-tint: #EAE2F3;
    --moss-ink:  #FFFFFF;
    --zone-edge: #7A5A18;
    --zone-sheen:#C79A3A;

    --ok:        #2F6B34;
    --mid:       #7A5A18;
    --low:       #8E3A3A;
    --row-lit:   #EDE6F5;

    --hush:      rgba(245, 242, 248, 0.80);
  --hush-fill: #F5F2F8;
  --hush-alpha: 0.80;

    --panel:      rgba(255, 255, 255, 0.86);
    --panel-line: rgba(21, 15, 29, 0.16);

    --shadow:    0 12px 32px rgba(40, 25, 60, 0.20);
    --shadow-sm: 0 2px 10px rgba(40, 25, 60, 0.16);

    color-scheme: light;
  }
}

:root {
  --display: 'Prata', Georgia, 'Times New Roman', serif;
  --ui: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* spacing, 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* three radii, one job each */
  --r1: 8px;    /* fields, chips */
  --r2: 16px;   /* buttons, panels */
  --r3: 999px;  /* slider thumb, marker */

  --gut: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(2.75rem, 8vw, 4.25rem);

  --tap: 3rem; /* smallest control we ship */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--s5);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--dim);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  overflow-wrap: break-word;
}

/* Prata is a Didone: hairlines vanish under 20px on a dark ground, so it is
   only ever used large. Never for body text. */
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.16;
  text-wrap: balance;
}

h1 { font-size: clamp(1.6rem, 6.4vw, 2.5rem); }
h2 { font-size: clamp(1.2rem, 4.4vw, 1.55rem); }

h3 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}

p { margin: 0; }
p + p { margin-top: var(--s4); }

/* ---------- shared controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s5);
  border: 0;
  border-radius: var(--r2);
  background: var(--moss);
  color: var(--moss-ink);
  font-family: var(--ui);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 140ms ease;
}

.btn:hover { filter: brightness(1.07); }
.btn:active { filter: brightness(0.92); }

/* A disabled control has to look disabled without going invisible: flat ground,
   no border, label still above AA. */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--off-bg);
  color: var(--off-text);
  border: 1px dashed var(--line);
  cursor: not-allowed;
  filter: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn--ghost:hover { background: var(--surface); filter: none; }

:where(a, button, summary, label, input, [tabindex]):focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* ---------- utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
}

.skip:focus {
  left: var(--s2);
  top: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--moss);
  color: var(--moss-ink);
  border-radius: var(--r2);
  text-decoration: none;
  font-weight: 600;
}

[hidden] { display: none !important; }

@media (prefers-contrast: more) {
  :root { --noise: var(--dim); --line: #59656A; }
}

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