/*
 * Agenda Alert design tokens + base styles. Plain CSS (Propshaft, no build step).
 * All files in this folder are linked by `stylesheet_link_tag :app` (alphabetical):
 *   application.css  tokens, reset, typography, buttons, forms
 *   components.css   topbar, menu, list rows, dots, flash, page/table
 *   map.css          Leaflet container, pins
 *   sheet.css        bottom sheet
 * Feature-specific styles go in their own file (e.g. alerts.css) using these tokens.
 */
:root {
  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;   /* iOS body */
  --text-lg: 20px;
  --text-xl: 24px;   /* sheet titles */
  --text-2xl: 28px;
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* color */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-row: #e6e6e8;         /* pill list rows */
  --color-row-active: #dcdcdf;
  --color-text: #111111;
  --color-text-muted: #7a7a7f;
  --color-brand: #3f5a2b;       /* wordmark / menu olive green */
  --color-primary: #0a9bff;     /* primary buttons */
  --color-primary-text: #ffffff;
  --color-accent: #f7e15a;      /* Alert Me yellow */
  --color-accent-strong: #f2d32c;
  --color-danger: #d93025;
  --color-success: #2e9d4f;
  --color-border: #d1d1d6;
  --color-overlay: rgb(0 0 0 / 0.45);
  --color-label: #5a5a5a;       /* dark map labels */
  --color-dot-muted: #8e8e93;   /* items without a location */
  --color-warning-bg: #fff5cc;  /* pending / processing badges */
  --color-warning-text: #8a6d00;
  --color-map-bg: #f2f2f0;      /* behind map tiles while loading (matches the light tiles) */

  /* shape + elevation */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-sheet: 32px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.12);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 0.15);
  --shadow-sheet: 0 -6px 24px rgb(0 0 0 / 0.12);

  /* layout */
  --topbar-height: 56px;
  --icon-button-size: 44px;     /* round icon buttons (close, share, menu) */
  --agenda-header-height: 150px; /* sticky agenda header; items scroll below it */
  --sheet-header-side: 56px;     /* left/right columns of sheet headers (Share, Close) */
  --alert-me-height: 132px;      /* expanded sheet stops below this button */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 640px;
  --page-max: 1040px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS sheet curve */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.link { text-decoration: underline; text-underline-offset: 2px; }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.spacer { flex: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  background: var(--color-row); color: var(--color-text);
  cursor: pointer; text-align: center;
}
.button--primary { background: var(--color-primary); color: var(--color-primary-text); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.button--accent { background: var(--color-accent); }
.button--danger { background: transparent; color: var(--color-danger); }
.button--block { display: flex; width: 100%; min-height: 56px; }
.button:disabled { opacity: 0.5; cursor: default; }
.button_to { display: inline; } /* button_to form wrapper */

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-button-size); height: var(--icon-button-size); border: 0; border-radius: 50%;
  background: var(--color-row); color: var(--color-text-muted); cursor: pointer;
}
.icon { flex: none; }

/* Forms */
.field + .field { margin-top: var(--space-3); }
.field__label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.field__input {
  width: 100%; min-height: 56px; padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-text); border-radius: var(--radius-md);
  background: var(--color-bg); font: inherit; font-size: var(--text-lg); color: var(--color-text);
}
textarea.field__input { min-height: 120px; }
.field__input::placeholder { color: var(--color-text-muted); }
.field__input:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 1px; }
.field--error .field__input { border-color: var(--color-danger); }
.field__error { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-danger); }
.field__hint { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.form-errors { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #fde8e7; color: var(--color-danger); font-size: var(--text-sm); }

.check {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-md); color: var(--color-text-muted); cursor: pointer;
}
.check input { width: 22px; height: 22px; accent-color: var(--color-text); }

/* 2-digit confirmation code input */
.code-input {
  width: 4ch; padding: var(--space-3); text-align: center;
  font-size: 40px; font-weight: var(--weight-bold); letter-spacing: 0.2em;
  border: 2px solid var(--color-text); border-radius: var(--radius-md);
}