/* ============================================================
   web/assets/atoms.css — THE ATOMIC COMPONENT LAYER (SAT-342)
   One CSS home for Satya's atoms: button · chip · badge · card ·
   pill · field. Founder ask 2026-09-01: "a nice way to turn
   individual cards, icons, buttons etc into atomic."

   Contract: docs/DESIGN_CONTRACTS.md owns the SHAPES; this file is
   their one CSS expression. Values come ONLY from the Bharni tokens
   (web/index.html's :root is the owner — in-app these vars already
   exist; standalone pages inject them, as library.html does).
   Every atom ships the full Beacon 8-state matrix: default, hover,
   focus-visible, pressed, disabled, loading, error, success.
   Motion: Beacon tokens, ease-out, reduced-motion respected.
   New surfaces and mocks build FROM here — never re-derive.
   ============================================================ */
:root{
  --t-ack:100ms; --t-quick:180ms; --t-std:250ms; --t-slow:450ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --good:#4C7A3F;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) .atoms-darkable{ --good:#8FB37F; }

/* ---------- a-btn: the button (primary / ghost) ---------- */
.a-btn{font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; letter-spacing:.05em;
  padding:9px 16px; border-radius:calc(var(--r-sm) + 2px); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; position:relative;
  color:var(--page); background:var(--neel);
  transition:transform var(--t-ack) var(--ease-out), opacity var(--t-ack), box-shadow var(--t-ack)}
.a-btn:hover{transform:translateY(-1px); box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 20%, transparent)}
.a-btn:focus-visible{outline:2px solid var(--neel); outline-offset:2px}
.a-btn:active{transform:translateY(0) scale(.97)}
.a-btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.a-btn.is-loading{pointer-events:none; color:transparent}
.a-btn.is-loading::after{content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px;
  border:2px solid color-mix(in srgb, var(--page) 45%, transparent); border-top-color:var(--page);
  border-radius:50%; animation:a-spin .7s linear infinite}
.a-btn.is-success{background:var(--good)}
.a-btn.is-error{background:var(--sindoor)}
.a-btn--ghost{background:transparent; color:var(--ink); border-color:var(--hair)}
.a-btn--ghost:hover{border-color:var(--neel); box-shadow:none}
.a-btn--danger{background:var(--sindoor)}
@keyframes a-spin{to{transform:rotate(360deg)}}

/* ---------- a-chip: the follow-up door (carries a selection) ---------- */
.a-chip{font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; letter-spacing:.02em;
  padding:7px 13px; border-radius:var(--r-pill); cursor:pointer;
  background:color-mix(in srgb, var(--chip) 30%, transparent);
  border:1px solid var(--hair); color:var(--ink); display:inline-flex; align-items:center; gap:6px;
  transition:transform var(--t-ack) var(--ease-out), border-color var(--t-ack), background var(--t-ack)}
.a-chip:hover{transform:translateY(-1px); border-color:var(--neel)}
.a-chip:focus-visible{outline:2px solid var(--neel); outline-offset:2px}
.a-chip:active{transform:scale(.97)}
.a-chip:disabled{opacity:.45; cursor:not-allowed; transform:none}
.a-chip--primary{background:color-mix(in srgb, var(--neel) 14%, transparent); border-color:var(--neel)}
.a-chip .a-chip-meta{color:var(--ink-mute); font-size:11px; font-variant-numeric:tabular-nums}

/* ---------- a-badge: the epistemic badge (trust-policy kinds only) ---------- */
.a-badge{font-family:ui-sans-serif,system-ui,sans-serif; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill);
  border:1px solid var(--hair); color:var(--ink-mute); display:inline-block}
.a-badge--cited{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, var(--hair))}
.a-badge--mixed{color:var(--heritage-dot); border-color:color-mix(in srgb, var(--heritage-dot) 55%, var(--hair))}
.a-badge--web{color:var(--neel); border-color:color-mix(in srgb, var(--neel) 45%, var(--hair))}
.a-badge--none{color:var(--ink-mute)}

/* ---------- a-card: the glass answer card (Bharni Glass, SAT-142 recipe) ---------- */
.a-card{background:color-mix(in srgb, var(--panel) 74%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid color-mix(in srgb, var(--neel) 22%, rgba(255,255,255,.18));
  border-radius:var(--r-lg); padding:18px 20px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 14%, transparent),
             0 18px 48px color-mix(in srgb, var(--ink) 16%, transparent)}
.a-card--flat{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--panel-2)}
.a-card--skeleton *{color:transparent !important}
.a-card--skeleton .a-sk{background:color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius:6px; animation:a-pulse 1.4s ease-in-out infinite}
@keyframes a-pulse{50%{opacity:.55}}

/* ---------- a-pill: the status pill (settled / draft / ruled) ---------- */
.a-pill{font-family:ui-sans-serif,system-ui,sans-serif; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill);
  border:1px solid var(--hair); color:var(--ink-mute); display:inline-block}
.a-pill--settled{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, var(--hair))}
.a-pill--draft{color:var(--heritage-dot); border-color:var(--heritage-dot)}
.a-pill--ruled{color:var(--sindoor); border-color:var(--sindoor)}

/* ---------- a-field: the text input ---------- */
.a-field{font:inherit; font-size:15px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--hair); border-radius:var(--r-md); padding:10px 14px; width:100%;
  transition:border-color var(--t-ack), box-shadow var(--t-ack)}
.a-field::placeholder{color:var(--ink-mute); font-style:italic}
.a-field:hover{border-color:color-mix(in srgb, var(--neel) 45%, var(--hair))}
.a-field:focus-visible{outline:none; border-color:var(--neel);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--neel) 30%, transparent)}
.a-field:disabled{opacity:.45; cursor:not-allowed}
.a-field.is-error{border-color:var(--sindoor);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--sindoor) 25%, transparent)}
.a-field.is-success{border-color:var(--good)}
.a-msg{font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; margin-top:5px}
.a-msg--error{color:var(--sindoor)} .a-msg--success{color:var(--good)}

/* ---------- a-icon: sprite consumption (docs/ICONOGRAPHY.md language) ---------- */
.a-icon{width:20px; height:20px; color:currentColor; vertical-align:-4px}

@media (prefers-reduced-motion: reduce){
  .a-btn,.a-chip,.a-field{transition-duration:1ms}
  .a-btn.is-loading::after,.a-card--skeleton .a-sk{animation-duration:0s}
}

/* ---------- glass sweep: the piece the six live chrome surfaces were missing
   (SAT-142 recipe already had blur+saturate+edge+lit-top-edge; the specular
   sweep never shipped past mocks 42-46). Founder, 2026-09-05: "gloss effect
   is missing, that ios futuristic yet blended in history feel." Reads the
   app's own --glass-* tokens (web/index.html :root is their one owner) —
   adds nothing but the missing layer, forks no value. One rule, six surfaces:
   #dock, the map-actions cluster (.satya-actions + the native MapLibre
   control group beside it), .satya-meter-chip, #layers-pop. #story/#story-close
   are deliberately excluded: they already use ::before for their own top
   accent line, so this uses ::after everywhere, on purpose, so a later pass
   can extend #story with zero collision instead of by accident today.
   z-index:-1 + isolation:isolate: the sweep paints above each surface's own
   frosted background, below its real content — the same ordering as any
   other z-index:-1 pseudo-element, unaffected by ::before vs ::after. .glass
   itself stays generic, for whatever the Dock build names next. */
.glass, .satya-actions, .satya-meter-chip, .maplibregl-ctrl-group:not(:empty) { position: relative; }
.glass, #dock, .satya-actions, .satya-meter-chip, .maplibregl-ctrl-group:not(:empty), #layers-pop { isolation: isolate; }
.glass::after, #dock::after, .satya-actions::after, .satya-meter-chip::after,
.maplibregl-ctrl-group::after, #layers-pop::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 55%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass::after, :root:not([data-theme="light"]) #dock::after,
  :root:not([data-theme="light"]) .satya-actions::after, :root:not([data-theme="light"]) .satya-meter-chip::after,
  :root:not([data-theme="light"]) .maplibregl-ctrl-group::after, :root:not([data-theme="light"]) #layers-pop::after {
    background: linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%);
  }
}
:root[data-theme="dark"] .glass::after, :root[data-theme="dark"] #dock::after,
:root[data-theme="dark"] .satya-actions::after, :root[data-theme="dark"] .satya-meter-chip::after,
:root[data-theme="dark"] .maplibregl-ctrl-group::after, :root[data-theme="dark"] #layers-pop::after {
  background: linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%);
}