/* ============================================================
   anchor-action-buttons · styles.css   (XUR-legal, gate-clean)
   ------------------------------------------------------------
   Public API = the four semantic variants:

       <div class="acn-act">
         <button class="acn-act-btn acn-act--primary">Done</button>
       </div>

   Gate rules honoured here:
   • no :root, no tokens defined in the component
   • NO rgb()/rgba()/hsl()/hex anywhere — every translucency is
     color-mix(in srgb, <token> N%, transparent)
   • the only literal colour is `black`, legal ONLY in the mask idiom
   • every class / keyframe / @property is prefixed `acn-act`
   • font longhand (no `font:` shorthand), no var() fallbacks
   • root element carries the bare `.acn-act` class (font + colour)

   Semantic variant = accent × plate × hover:
       primary   = accent  · solid · ember
       secondary = neutral · lift  · wire     (neutral = the cool blue-grey token)
       danger    = bad     · lift  · glow
       ghost     = neutral · glass · fill
   Lift plates run 22% → 10% (dialed down from the first cut so they
   read as a tint, not a fill).
   ============================================================ */

/* root — paste self-defense: sets the family + base colour so a
   detached paste still reads correctly */
.acn-act{ font-family:var(--font-body); color:var(--text); }

/* ---- base (structure only; the variant supplies the skin) ---- */
.acn-act-btn{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:13px; line-height:1; letter-spacing:-.01em;
  padding:8px 15px; border:1px solid color-mix(in srgb, var(--accent) 0%, transparent); border-radius:var(--r-pill);
  cursor:pointer; color:var(--text);
  transition:transform .2s var(--ease), filter .18s, background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
.acn-act-btn:active{ transform:scale(.96); }
.acn-act-btn__icon{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; }

/* Toolbar size. SIZE ONLY — weight stays the base 600.
   It used to be 12.5px/500 with a 600 exception for --primary, and --quiet needed
   a second one (or selecting a nav tab re-weighted its label and reflowed the row).
   Two exceptions on a five-variant modifier is the modifier being wrong: a small
   button is a smaller button, not a lighter one. Michael, 2026-07-09 — he wants
   Convert to read at the same weight as Remove.
   This makes `Import from Zocks` 600 too; that is the intended consequence. */
.acn-act--sm{ font-size:12.5px; padding:7px 13px; }

/* ============================================================
   PRIMARY — accent · solid plate · ember hover
   ============================================================ */
.acn-act--primary{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent-strong));
  color:var(--on-accent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text-strong) 30%, transparent),
             0 8px 22px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* hover = the workbench ember: the label lightens to glow-gold and the border
   lights up. Both Done and Add are .acn-act--primary, so Add follows suit. */
.acn-act--primary:hover{
  transform:translateY(-1px); border-color:var(--accent); color:var(--accent-hi);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
             0 10px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ============================================================
   SECONDARY — neutral · lift plate · clean outer-glow hover
   ============================================================ */
/* Plate is 34%→14% — the workbench's actual lift. It was briefly dialed to
   22%→10% because it "read too bright"; the real cause was neutral being mapped
   to --text (a warm grey) instead of the cool --neutral. Token fixed, alpha restored.
   The workbench is the source of truth for these values. */
.acn-act--secondary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--neutral) 34%, transparent), color-mix(in srgb, var(--neutral) 14%, transparent));
  color:var(--text-strong);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text-strong) 16%, transparent), var(--shadow);
}
/* hover = the SAME clean outer glow as the danger Remove button, in neutral
   instead of red (Michael 2026-07-10: one consistent button family, cleaner
   than the old travelling wire). Duplicate / Convert wear this. */
.acn-act--secondary:hover{
  transform:translateY(-1px); border-color:color-mix(in srgb, var(--neutral) 60%, transparent);
  box-shadow:0 0 22px -6px color-mix(in srgb, var(--neutral) 60%, transparent);
}
/* the registered angle + spin keyframes stay — the optional .acn-act--ring
   sweep (below) still uses them. */
@property --acn-act-wa{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes acn-act-wire-spin{ to{ --acn-act-wa:360deg; } }

/* ============================================================
   DANGER — bad · lift plate · glow hover
   ============================================================ */
.acn-act--danger{
  background:linear-gradient(180deg, color-mix(in srgb, var(--bad) 34%, transparent), color-mix(in srgb, var(--bad) 14%, transparent));
  color:color-mix(in srgb, var(--bad) 40%, var(--text-strong));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text-strong) 16%, transparent), var(--shadow);
}
.acn-act--danger:hover{
  transform:translateY(-1px); border-color:color-mix(in srgb, var(--bad) 60%, transparent);
  box-shadow:0 0 22px -6px color-mix(in srgb, var(--bad) 65%, transparent);
}

/* ============================================================
   GHOST — neutral · glass plate · fill hover
   ============================================================ */
.acn-act--ghost{
  background:color-mix(in srgb, var(--surface-2) 55%, transparent);
  color:var(--text); border:1px solid var(--border-strong);
  backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text-strong) 14%, transparent), var(--shadow-sm);
}
.acn-act--ghost:hover{
  background-image:none; background-color:color-mix(in srgb, var(--neutral) 22%, transparent); color:var(--text-strong);
}

/* ============================================================
   QUIET — neutral · no plate · wash hover
   ------------------------------------------------------------
   The navigation button: a tab, or a section in a rail. It has
   to recede until it's the one you want, so at rest there is no
   plate, no border and no shadow — a row of them reads as a row
   of labels, not a row of buttons. Hover lifts the label to
   --text-strong behind a neutral wash. Nothing moves: a nav row
   that jitters on hover reads as broken.

   This variant is only ever HALF a control. The SELECTED tab is
   `--primary`; the unselected ones are `--quiet`. Swap the class,
   don't override the plate:

     <button class="acn-act-btn acn-act--sm acn-act--primary">Discovery</button>
     <button class="acn-act-btn acn-act--sm acn-act--quiet">Docs</button>

   (It exists because three surfaces were wearing `--ghost` and
   then inline-styling its glass plate back off. That is a fork
   with extra steps.)
   ============================================================ */
/* --text, not --text-dim. The nav this replaced wore --ghost, whose rest colour is
   --text, so this keeps the look; and --text-dim on the rail's translucent plate
   measures 4.48:1, which misses AA (4.5) by a hair. Recession comes from the
   contrast against --primary's gold plate and --text-strong on hover, not from
   dimming an already-small label below legibility. */
.acn-act--quiet{ background:none; color:var(--text); box-shadow:none; }
.acn-act--quiet:hover{
  background-color:color-mix(in srgb, var(--neutral) 12%, transparent); color:var(--text-strong);
}
/* (The --sm.--quiet weight pin that used to live here is gone: --sm no longer
   touches weight, so --quiet and --primary already match at every size. The rule
   it enforced still holds — selection changes COLOUR, never weight, or the nav
   row re-measures and every neighbour slides.) */

/* ============================================================
   RING — an opt-in conic sweep on the button edge (same idiom as
   the Dashboard brand pill / the secondary wire), colour + speed
   tunable via the --act-ring-* tokens. `.acn-act--ring` turns it on
   (hover); `.acn-act--live` runs it always-on (a workbench preview
   aid). Default OFF — the shipped variant hovers are untouched.
   ============================================================ */
.acn-act--ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--acn-act-wa),
    color-mix(in srgb, var(--act-ring-base) 0%, transparent) 0 55%,
    color-mix(in srgb, var(--act-ring-base) 35%, transparent) 72%,
    color-mix(in srgb, var(--act-ring-base) 85%, transparent) 90%,
    var(--act-ring-glint) 96%,
    color-mix(in srgb, var(--act-ring-base) 0%, transparent) 100%);
  -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite:exclude;
  transition:opacity .2s ease;
}
.acn-act--ring:hover::before, .acn-act--ring.acn-act--live::before{ opacity:1; animation:acn-act-wire-spin var(--act-ring-speed) linear infinite; }

@media (prefers-reduced-motion: reduce){
  .acn-act--ring:hover::before, .acn-act--ring.acn-act--live::before{ animation:none; --acn-act-wa:215deg; opacity:1; }
  .acn-act-btn{ transition:none; }
}