/* ==========================================================================
   PromoChat — design tokens
   Loaded first, before every other sheet, so any rule anywhere may use these.

   Why this file exists: touch sizing and safe-area insets used to be declared
   inside responsive.css, which meant only the phone block could reach them and
   every other sheet re-invented the numbers. Shell geometry (--rail, --topbar-h)
   still belongs to app.css, which owns the desktop structure; responsive.css
   re-points those two per breakpoint. Everything a component needs to be
   touch-correct lives here instead of being typed out again per page.
   ========================================================================== */

:root{
  /* ---- touch ----
     44px is the floor for anything a finger is meant to hit. --tap-sm is only
     for controls that sit inside an already-tapped row (a chip inside a card),
     never for a standalone action. */
  --tap:44px;
  --tap-sm:36px;

  /* ---- safe area ----
     Every fixed edge (topbar, bottom nav, sheets, call overlay) adds these, so
     a notch or a home indicator never sits on top of a control. Requires
     viewport-fit=cover on the viewport meta, which layout.php already sets. */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);

  /* ---- shell metrics owned per breakpoint ----
     --rail and --topbar-h are declared in app.css with their desktop values.
     --bottomnav-h is 0 wherever the bottom bar is not on screen, so page
     padding can always say "+ var(--bottomnav-h)" without knowing the layout. */
  --bottomnav-h:0px;

  /* ---- horizontal page gutter ----
     One value, stepped up with the viewport, so a page never has to pick its
     own left/right padding. */
  --gutter:28px;

  /* ---- spacing scale ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* ---- type floors ----
     --fs-input is the size below which iOS zooms the page on focus, so no
     form control may go under it on a phone. --fs-meta is the floor for
     secondary text that still has to be read. */
  --fs-input:16px;
  --fs-meta:13px;

  --focus-ring:0 0 0 2px var(--page),0 0 0 4px var(--purple);
}

/* ==========================================================================
   Keyboard focus
   Seventeen rules across app.css and modules.css turn the browser's outline
   off — on search fields, chat inputs, tabs, chips and the message box — and
   nothing put anything back, so a keyboard user could not see where they were.
   One ring, drawn only for :focus-visible, so it appears for keyboard and
   assistive-technology navigation and not on a mouse click.

   Written with the element in the selector (a:focus-visible, not just
   :focus-visible) so it matches the specificity of the outline:0 rules that
   suppressed it, and box-shadow rather than outline so it follows a rounded
   corner. Declared here, before the sheets that removed it, and repeated
   nowhere else.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  position:relative;
  z-index:1;
}

/* Text that belongs to the document but not to the picture — a heading that
   gives a screen its place in the outline where the design carries no title. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}