@layer reset, tokens, layout, components;

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

  html {
    font-size: 100%;
    hanging-punctuation: first last;
    interpolate-size: allow-keywords;
    text-size-adjust: none;
    background: var(--paper);
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.45;
  }

  img, svg { display: block; max-inline-size: 100%; }

  button, input, select, textarea { font: inherit; color: inherit; }

  /* iOS keyboard offers contact AutoFill on plain single-line text inputs;
     type="search" fields get no personal suggestions. Hide native search chrome. */
  input[type="search"] { appearance: none; }
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

  [hidden] { display: none !important; }

  :focus-visible {
    outline: var(--stroke) solid var(--paprika);
    outline-offset: 0.15em;
  }
}

@layer tokens {
  :root {
    color-scheme: light;
    --paper: oklch(0.96 0.018 72);
    --ink: oklch(0.34 0.028 48);
    --cream: oklch(0.985 0.01 78);
    --mist: oklch(0.9 0.018 70);
    --muted: oklch(0.5 0.03 52);
    --dusk: oklch(0.4 0.032 48);
    --paprika: oklch(0.55 0.1 34);
    --sage: oklch(0.52 0.07 155);
    --gold: oklch(0.56 0.08 78);
    --clay: oklch(0.52 0.07 248);
    --plum: oklch(0.52 0.08 12);
    --over: oklch(0.5 0.18 25);
    --tight: oklch(0.56 0.08 62);
    --stripe: oklch(0.945 0.02 70);
    --row-hover: oklch(0.935 0.024 58);
    --head: oklch(0.93 0.02 70);
    --font-body: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
    --font-display: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
    --step-00: 0.75rem;
    --step-0: 1rem;
    --step-1: 1.125rem;
    --step-2: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    --space-2xs: 0.25rem;
    --space-xs: 0.4rem;
    --space-s: 0.7rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --stroke: 0.08rem;
    --radius-s: 0.3rem;
    --radius: 0.5rem;
    --touch: 2.75rem;
    --measure: 36rem;
    --page: 88rem;
    --gutter: clamp(0.8rem, 2vw, 1.5rem);
  }
}

@layer layout {
  html[data-quiet-refresh] .turbo-progress-bar { visibility: hidden; }

  .skip {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    z-index: 4;
    padding: var(--space-xs) var(--space-s);
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;

    &:not(:focus) {
      clip-path: inset(50%);
      inline-size: 1em;
      block-size: 1em;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
    padding-block: var(--space-s);
    padding-inline: var(--gutter);
    background: var(--cream);
    border-block-end: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
  }

  .content {
    inline-size: min(var(--page), calc(100% - 2 * var(--gutter)));
    max-inline-size: 100%;
    margin-inline: auto;
    margin-block: var(--space-m) var(--space-xl);
  }

  @media (max-width: 40rem) {
    .content:has(.day) { margin-block-start: 0; }
  }

  .site-footer {
    padding-block: var(--space-s) var(--space-l);
    padding-inline: var(--gutter);
    color: var(--muted);
    font-size: var(--step-00);
    text-align: center;
  }

  .install-how {
    color: var(--muted);
    font-size: var(--step-00);
    max-inline-size: var(--measure);
  }

  html[data-standalone] .install-how {
    display: none !important;
  }

  @media (display-mode: standalone) {
    .install-how {
      display: none !important;
    }
  }
}

@layer components {
  /* Avatar and search box styles moved to
     components/avatar.css and components/search.css. */

  .visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -0.0625rem;
  }
}