/* ============================================================================================
   THE ONE ZANTŌ BUTTON (owner's ruling R146, 2026-10-06). Defined ONCE; every web surface uses it.
   A round (pill) button, two variants, every state. The values are the landing's .btn-commit (R99,
   the door the member walked through) and design.md §3/§4/§9 (radius, the five-state model, the dip).

   VARIANTS: there are TWO, because a view may hold more than one action but must have ONE primary.
     .zbtn--primary   cream fill. AT MOST ONE PER VIEW (the landing's "one primary action per view";
                      design.md's front-door exception). Commit, Send code, Sign in, Continue, Confirm.
     .zbtn--secondary outline, no fill. Every other action in a view that already has its primary:
                      Download, Sign out, Delete. Destructive actions are secondary, never red (§4, §5).
   There is no third variant: no ghost, no danger, no amber (amber is the ember for earned things).

   STATES (design.md §4's five, plus loading):
     resting · hover (pointer devices only) · pressed (the §9 dip: opacity 0.6, 90 ms, opacity ONLY;
     D16 "everything else dips"; STOP and PLAY brighten, but they live in the app's wheel, not here) ·
     disabled · loading (the dip HELD, the label kept, aria-busy) · focus (:focus-visible ONLY, R127).
   ============================================================================================ */
:root {
  --zbtn-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zbtn-size: 15px;              /* --fs-body-s */
  --zbtn-weight: 500;             /* --weight-medium */
  --zbtn-tracking: -0.005em;
  --zbtn-height: 48px;            /* the touch floor; padding is derived, not free */
  --zbtn-pad-x: 28px;
  --zbtn-radius: 999px;           /* --radius-pill */
  --zbtn-primary-bg: #F4F0E8;     /* --btn-primary-bg: cream, never pure white */
  --zbtn-primary-bg-hover: #FAF7F1;
  --zbtn-primary-ink: #0A0A0A;    /* --btn-primary-ink */
  --zbtn-secondary-line: rgba(255, 255, 255, 0.22);   /* --line-active */
  --zbtn-secondary-ink: #E8E3D8;                      /* --ink */
  --zbtn-secondary-bg-hover: rgba(255, 255, 255, 0.07); /* --fill-hover */
  --zbtn-press-opacity: 0.6;      /* §9 dip */
  --zbtn-press-ms: 90ms;          /* §9 dip timing */
  --zbtn-disabled-opacity: 0.35;
  --zbtn-focus-ring: rgba(232, 227, 216, 0.55);       /* --ink-muted: >= 3:1 on the ground; an edge, never a glow */
  --zbtn-focus-offset: 3px;
}
.zbtn {
  -webkit-tap-highlight-color: transparent;   /* R127: no blue tap rectangle; the dip replaces it */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: var(--zbtn-height); padding: 0 var(--zbtn-pad-x);
  font-family: var(--zbtn-font); font-size: var(--zbtn-size); font-weight: var(--zbtn-weight);
  letter-spacing: var(--zbtn-tracking); line-height: 1; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--zbtn-radius); cursor: pointer;
  transition: opacity var(--zbtn-press-ms) ease, background-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-user-select: none; user-select: none; outline: none;
}
.zbtn--primary   { background: var(--zbtn-primary-bg); color: var(--zbtn-primary-ink); }
.zbtn--secondary { background: transparent; color: var(--zbtn-secondary-ink); border-color: var(--zbtn-secondary-line); }
/* the ink is pinned on every state: a global a:hover must never wash a primary's label to cream */
.zbtn--primary:hover, .zbtn--primary:active, .zbtn--primary:visited { color: var(--zbtn-primary-ink); }
.zbtn--secondary:hover, .zbtn--secondary:active, .zbtn--secondary:visited { color: var(--zbtn-secondary-ink); }
@media (hover: hover) {
  .zbtn--primary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])   { background: var(--zbtn-primary-bg-hover); }
  .zbtn--secondary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--zbtn-secondary-bg-hover); }
}
.zbtn:active:not(:disabled):not([aria-disabled="true"]), .zbtn.is-pressed { opacity: var(--zbtn-press-opacity); }
.zbtn:disabled, .zbtn[aria-disabled="true"] { opacity: var(--zbtn-disabled-opacity); cursor: default; pointer-events: none; }
.zbtn[aria-busy="true"] { opacity: var(--zbtn-press-opacity); cursor: progress; pointer-events: none; }
.zbtn:focus-visible, .zbtn.is-focus { outline: 1px solid var(--zbtn-focus-ring); outline-offset: var(--zbtn-focus-offset); }
.zbtn--block { display: flex; width: 100%; }

/* ============================================================================================
   THE ONE FOCUS BEHAVIOUR, for every control on every web page (R127, D55). Not only .zbtn: links,
   the nav's Sign in, the footer and the legal pages too, so that every surface answers the same way.
     - a tap or a click never draws a ring, and never the browser's blue tap rectangle;
     - the keyboard (Tab) always draws ONE ring: the same 1 px line at --ink-muted, 3 px out.
   :where() has no specificity, so a page that ever needs its own focus look can still override it.
   Text fields are left out on purpose: a field that takes typing is focused by a tap too, and it
   shows that with its own underline (auth.js, withdraw), which is the caret's place, not a ring.
   ============================================================================================ */
html { -webkit-tap-highlight-color: transparent; }
:where(a[href], button, summary, select, [role="button"], [tabindex]:not([tabindex="-1"]),
       input[type="checkbox"], input[type="radio"]):focus { outline: none; }
:where(a[href], button, summary, select, [role="button"], [tabindex]:not([tabindex="-1"]),
       input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 1px solid var(--zbtn-focus-ring); outline-offset: var(--zbtn-focus-offset);
}
@media (prefers-reduced-motion: reduce) { .zbtn { transition: none; } }