/* ==========================================================================
   Adfure — UI primitives.  Increment I2 of _NIGHT-2026-09-19-LENS-design-system.md.

   WHAT THIS IS FOR. The app asked 49 questions through the browser's own confirm(),
   prompt() and alert() windows. Those windows are the operating system's, not the
   product's: they cannot be themed, they say "localhost:8095 says", they cannot mask a
   password, they stack one question per value, and they freeze the page. A person
   connecting a store had to answer six of them in a row and type an Admin API token in
   clear text. This file dresses the replacements.

   TWO RULES, THE SAME TWO THAT GOVERN tokens.css.

   1. THE LIGHT THEME MUST NOT CHANGE. Nothing here restyles anything that already
      existed — every selector is new and prefixed `ui-`, so no rule in app-v4.html is
      touched or overridden. In light these dialogs deliberately look like the app's own
      .ov/.modal pair (white card, 20px radius, the same scrim and the same drop shadow)
      so the new window does not read as a different product.
   2. THE DARK THEME IS REACHED THROUGH THE TOKENS. Every colour below is a token from
      ui/tokens.css, so `<html data-theme="dark">` re-skins this file with the rest.

   Five local variables are defined, and only where a token would not do: the scrim, the
   dialog's own drop shadow, its stacking level, and the two colours this file had to pick
   for itself because the shipped token fails contrast in one theme (see the notes below).
   They are NOT named --c-*, because the design gate reads every --c-* role in tokens.css
   and demands a dark twin; these are not roles.

   THE STACKING LEVEL is 1000 on purpose, not --z-dialog (40). A confirmation can be
   raised from inside a screen that is ALREADY a window: the roster modal sits on .ov at
   z-index 50, the mobile nav overlay at 74, the tour at 120. A dialog that asks
   "remove this client?" has to be above the list it was asked from. It stays below the
   toast (99999) so the "saved" message that follows an answer is still readable.
   ========================================================================== */

:root{
  --ui-scrim:rgba(25,26,46,.45);              /* the value .ov has always used */
  --ui-dialog-shadow:0 30px 70px rgba(0,0,0,.3);  /* the value .modal has always used */
  --ui-z-dialog:1000;
  /* The destructive button is a NEW control, so it is free to be readable rather than to match
     something that already shipped. White on --c-bad (#E5484D) measures 3.91:1 and fails AA; white
     on --c-bad-ink (#b42318) measures 6.57:1. In dark, --c-bad is the LIGHT red #FF6B6B, where the
     readable text is the dark ink: 6.58:1 against white's 2.77:1. */
  --ui-danger-bg:var(--c-bad-ink);
  --ui-danger-ink:#FFFFFF;
  /* teal AS TEXT: --c-accent is #0088b9 = 4.02:1 on white and misses AA at 11px; --c-accent-d is
     #016a90 = 6.06:1. In dark the brighter #25D9D9 is already 10.90:1, so it is used there. */
  --ui-accent-text:var(--c-accent-d);
}
/* screen only, like the dark set in tokens.css (25.09.2026, dark became the default): print is paper */
@media screen{
:root[data-theme="dark"]{
  --ui-scrim:rgba(2,4,8,.72);
  --ui-dialog-shadow:var(--e-2);
  --ui-danger-bg:var(--c-bad);
  --ui-danger-ink:var(--c-on-accent);
  --ui-accent-text:var(--c-accent);
}
}

/* ---- scrim ------------------------------------------------------------- */
.ui-scrim{
  position:fixed;inset:0;z-index:var(--ui-z-dialog);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-5);
  background:var(--ui-scrim);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:ui-fade var(--d-1) var(--ease) both;
}

/* ---- the dialog -------------------------------------------------------- */
.ui-dialog{
  width:100%;max-width:440px;max-height:88vh;overflow:auto;
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--ui-dialog-shadow);
  padding:var(--s-5);
  font-family:var(--font-sans);
  font-size:var(--t-body);line-height:var(--t-body-lh);
  animation:ui-rise var(--d-2) var(--ease) both;
}
.ui-dialog--wide{max-width:560px}
.ui-dialog:focus{outline:none}

.ui-dialog__title{
  font-size:var(--t-h2);line-height:var(--t-h2-lh);font-weight:800;
  letter-spacing:-.02em;color:var(--c-ink);margin:0 0 var(--s-2)
}
.ui-dialog__body{
  color:var(--c-ink-2);font-size:var(--t-small);line-height:var(--t-small-lh);
  margin:0 0 var(--s-4);white-space:pre-line;overflow-wrap:anywhere
}
.ui-dialog__body:last-of-type{margin-bottom:var(--s-5)}
.ui-dialog__fields{display:flex;flex-direction:column;gap:var(--s-4);margin:0 0 var(--s-5)}
.ui-dialog__foot{display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap}

/* ---- fields ------------------------------------------------------------ */
.ui-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-field__label{
  font-family:var(--font-mono);font-size:var(--t-label);line-height:var(--t-label-lh);
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--c-ink-2)
}
.ui-input,.ui-textarea,.ui-select{
  width:100%;min-height:40px;
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  padding:9px 12px;font:inherit;font-size:var(--t-body);
}
.ui-textarea{min-height:96px;resize:vertical;line-height:1.5}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--c-mut-2)}  /* --c-mut-3 is 2.97:1 on white */
.ui-input:focus,.ui-textarea:focus,.ui-select:focus{outline:none;border-color:var(--c-accent)}
.ui-input:focus-visible,.ui-textarea:focus-visible,.ui-select:focus-visible{
  outline:2px solid var(--c-accent);outline-offset:2px;border-color:var(--c-accent)
}
.ui-field__hint{font-size:var(--t-label);line-height:1.4;color:var(--c-ink-2)}
/* --c-bad is 3.91:1 on white; --c-bad-ink is the readable red in each theme (6.6:1 / 8.5:1) */
.ui-field__err{font-size:var(--t-label);line-height:1.4;color:var(--c-bad-ink);font-weight:600}
.ui-field--bad .ui-input,.ui-field--bad .ui-textarea,.ui-field--bad .ui-select{border-color:var(--c-bad)}

/* a key, a token, a password: masked by default, revealed only on request */
.ui-secret{position:relative;display:flex;align-items:stretch}
.ui-secret .ui-input{padding-right:86px;font-family:var(--font-mono);letter-spacing:.02em}
.ui-secret__toggle{
  position:absolute;right:5px;top:5px;bottom:5px;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ui-accent-text);font:inherit;font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;cursor:pointer;padding:0 10px
}
.ui-secret__toggle:hover{background:var(--c-accent-soft)}
.ui-secret__toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}

/* ---- buttons ----------------------------------------------------------- */
.ui-btn{
  min-height:40px;border:1px solid transparent;border-radius:var(--r-pill);
  padding:9px 18px;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background var(--d-1) var(--ease),border-color var(--d-1) var(--ease)
}
.ui-btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.ui-btn:active{transform:scale(.97)}
.ui-btn[disabled]{opacity:.4;cursor:not-allowed}
.ui-btn--primary{background:var(--grad);color:var(--c-on-accent);box-shadow:var(--sh-sm)}
.ui-btn--primary:hover{background:linear-gradient(180deg,var(--c-accent),var(--c-accent-d))}
.ui-btn--ghost{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-line-strong)}
.ui-btn--ghost:hover{background:var(--c-wash)}
.ui-btn--danger{background:var(--ui-danger-bg);color:var(--ui-danger-ink);box-shadow:var(--sh-sm)}
.ui-btn--danger:hover{filter:brightness(.93)}

/* ---- motion ------------------------------------------------------------ */
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-rise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ui-scrim,.ui-dialog{animation:none}
  .ui-btn:active{transform:none}
}

/* ---- touch and small screens ------------------------------------------- */
@media(pointer:coarse){
  .ui-btn{min-height:44px}
  .ui-input,.ui-select{min-height:44px}
  .ui-secret__toggle{min-width:44px}
}
@media(max-width:600px){
  .ui-scrim{padding:var(--s-3);align-items:flex-end}
  .ui-dialog{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh}
  .ui-dialog__foot{flex-direction:column-reverse}
  .ui-dialog__foot .ui-btn{width:100%}
  .ui-input,.ui-textarea,.ui-select{font-size:16px}  /* iOS zooms anything smaller */
}