/*
 * Plain CSS, no build step. Layers keep the cascade predictable: a component
 * rule always beats a base rule, whatever the specificity or file order.
 * Avoids CSS nesting and light-dark() so older Android browsers still get styles.
 *
 * Mobile first: base rules are the phone layout. Larger screens only add,
 * through min-width media queries (--bp-tablet is 48rem). Never max-width.
 */
@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100dvh; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-inline-size: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
  /* hidden always hides, even on a .btn that sets its own display. */
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light dark;

    --bg: #f6f6f9;
    --surface: #ffffff;
    --fg: #1d1c2b;
    --muted: #5d5b72;
    --line: #d9d8e6;
    --lane: #ecebf4;
    --ink: #3b36b8;
    --ink-soft: #e4e2fb;
    --ok: #1f7a4d;
    --ok-soft: #dcf1e5;
    --warn: #7a5200;
    --warn-soft: #fbefd5;
    --danger: #b3261e;
    --danger-soft: #fbe3e1;
    --on-danger: #ffffff;

    /* A business overrides these with its own colors. */
    --brand: var(--ink);
    --brand-soft: var(--ink-soft);
    --on-brand: #ffffff;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    --radius-sm: 0.5rem;
    --radius: 0.875rem;
    --radius-lg: 1.25rem;
    --shadow: 0 0.6rem 1.8rem -1.1rem rgb(30 25 90 / 0.45);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14131c;
      --surface: #1d1c29;
      --fg: #ecebf5;
      --muted: #a6a4bd;
      --line: #34324a;
      --lane: #201f2e;
      --ink: #9d98ff;
      --ink-soft: #2c2a55;
      --ok: #5fd39a;
      --ok-soft: #17382a;
      --warn: #f2c46b;
      --warn-soft: #3d2f12;
      --danger: #ffb4ab;
      --danger-soft: #4a1f1c;
      --on-danger: #14131c;
      --on-brand: #14131c;
    }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font: 1rem/1.5 var(--font-body);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 800; }
  h2 { font-size: 1.25rem; font-weight: 700; }
  p { text-wrap: pretty; }
  a { color: var(--brand); text-underline-offset: 0.15em; }

  :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
}

@layer layout {
  /* Phone-width column with a 16px gutter; customer and owner screens both use it. */
  .page {
    display: grid;
    gap: var(--space-6);
    inline-size: min(100% - 2rem, 28rem);
    margin-inline: auto;
    padding-block: var(--space-6) var(--space-8);
  }

  /* Tablets and desktops: more air around the same phone-width column. */
  @media (min-width: 48rem) {
    .page { padding-block: 4rem; }
  }

  /* Desktops: the dashboards (owner and admin) use the width; phones keep the column. */
  @media (min-width: 64rem) {
    .page--wide { inline-size: min(100% - 4rem, 80rem); }
  }
}

@layer utilities {
  .muted { color: var(--muted); }
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}