/*
 * Colour system: GRF's own brand tokens (Design Vault board 32 / grf-hub's
 * base.css), not a separate palette invented for this app. Dark-only here —
 * night use and OLED battery life matter more than following the OS theme —
 * so GRF Black IS the card and the page drops one step darker behind it.
 * One accent (GRF Red) means action/urgent; everything else is ink, paper,
 * or a hairline.
 */
:root {
  --paper: #231f20; /* GRF Black — card surface */
  --ground: #131011; /* page behind the cards */
  --sunken: #0d0b0c; /* pressed / recessed */
  --line: #3a3436; /* hairline borders */
  --ink: #f2f0ef; /* primary text */
  --slate: #a3a0a0; /* secondary text, GRF Grey lifted for AA on dark */
  --signal: #d81f2c; /* GRF Red — solid fills */
  --signal-press: #b81a26;
  --signal-text: #f2707a; /* GRF Red as text/icon tint — AA on GRF Black */
  --on-signal: #ffffff;
  --ok: #35c07d;
  --warn: #d9a13a;

  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --tap: 56px; /* generous over GRF's 44px baseline — this is used under stress */
  --fast: 120ms;
  --med: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  font-size: 17px;
  line-height: 1.45;
  -webkit-user-select: none;
  user-select: none;
}

button,
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  min-height: var(--tap);
}

.icon-btn,
.icon-btn-spacer {
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
}

.icon-btn {
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--ink);
  border-radius: var(--r-md);
}

.icon-btn:active {
  background: var(--sunken);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.topbar h1 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
  text-align: center;
}

main {
  flex: 1;
  padding: var(--s-md) var(--s-lg) var(--s-xl);
  overflow-y: auto;
  background: var(--ground);
}

/* The home screen never scrolls — its grid fills exactly whatever vertical
   space is left below the topbar, however many tiles that turns out to be,
   rather than assuming a tile count and hardcoding row heights. Tool
   screens (Guides especially) still need real scrolling, so this only
   applies to the home <main>, not the base rule above. */
main.home-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: var(--s-md);
}

/* ---------- home grid ---------- */

.tile-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s-md);
  padding-top: var(--s-sm);
}

.tile {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.tile:active {
  background: var(--sunken);
  transform: scale(0.985);
}

.tile .glyph {
  width: 28px;
  height: 28px;
  color: var(--signal-text);
}

.tile .tile-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- generic content ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  margin-bottom: var(--s-md);
}

.card h3 {
  margin: 0 0 var(--s-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card ol,
.card ul {
  margin: 0;
  padding-left: 22px;
}

.card li {
  margin-bottom: var(--s-sm);
}

.muted {
  color: var(--slate);
  font-size: 0.875rem;
}

.guide-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-md);
  color: var(--ink);
}

.guide-divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-xl) 0;
}

.big-btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--r-pill);
  border: none;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 14px;
  margin-bottom: var(--s-md);
  transition: background var(--fast) var(--ease);
}

.big-btn:active {
  background: var(--sunken);
}

.big-btn.danger {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}

.big-btn.danger:active {
  background: var(--signal-press);
}

.big-btn.secondary {
  background: transparent;
  border-color: transparent;
  color: var(--slate);
}

.big-num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.readout {
  text-align: center;
  padding: var(--s-lg) 0;
}

.compass-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s-md) 0 var(--s-lg);
}

.compass-dial {
  width: 200px;
  height: 200px;
}

.status-pill {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--slate);
  margin-bottom: var(--s-sm);
}

.status-pill.ok {
  color: var(--ok);
}

.status-pill.warn {
  color: var(--warn);
}

.strobe-flash {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

.strobe-flash.on {
  opacity: 1;
}

.flashlight-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flashlight-panel.white {
  background: #ffffff;
}

.flashlight-panel.red {
  background: #400000;
}

.flashlight-panel .exit {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 20px);
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 15px;
}

a {
  color: var(--signal-text);
}

.hint {
  font-size: 0.875rem;
  color: var(--slate);
  margin-top: -4px;
  margin-bottom: var(--s-md);
}

/* ---------- CPR pacer ---------- */

.pulse-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s-lg) 0;
}

.pulse-dot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--signal);
}

.pulse-dot.beat {
  animation: pulse-beat 0.35s var(--ease);
}

@keyframes pulse-beat {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- timer presets ---------- */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.preset-btn {
  min-height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.preset-btn:active {
  background: var(--sunken);
}

/* ---------- form fields (distance calculator) ---------- */

.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 6px;
}

.field-input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--ink);
  font-size: 17px;
  padding: 0 var(--s-md);
  margin-bottom: var(--s-md);
}

.field-input:focus {
  border-color: var(--signal);
}

/* ---------- settings toggle ---------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}

.switch {
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--line);
  position: relative;
  border: none;
  padding: 0;
}

.switch.on {
  background: var(--signal);
}

.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  transition: left var(--fast) var(--ease);
}

.switch.on .knob {
  left: 25px;
}

/* ---------- battery saver ---------- */

/* Sits BELOW the strobe/flashlight full-brightness layers (z-index 50) so
   those two tools always render at true full brightness regardless of
   this setting — dimming the one thing meant to be as bright as possible
   would defeat its purpose. */
#battery-saver-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 40;
  display: none;
}

#battery-saver-overlay.on {
  display: block;
}