/* ═══════════════════════════════════════════════════════════════════════
   action.css — the action layer. DESIGN_SYSTEM.md §4b (Direction B, v2).
   Palermo FC Health & Performance Platform. Approved 2026-08-13.

   TWO FAMILIES. Where a button lives decides its shape; what it does
   decides its fill.
     · CHROME  .ac-chrome — pill, grey, always a hairline. App header, 62px
       module toolbar, card header, table row. Never filled, never accent
       except the hover glyph.
     · BLOCK   .ac-commit / .ac-std — --radius-md. Content, dialogs, panels.
       Only a block may carry the accent fill, and only one per dialog.

   THREE RULES
     1. Every action carries a border. None of the four §4a SELECTOR idioms
        does. (.nv-disclosure is the documented exception: it opens rather
        than acts, keeps its --ink-line hairline, and is never a pill.)
     2. Fills and borders are alphas from the §1a ladder, never a fourth
        grey — so one declaration is correct on --surface-field, chrome,
        raised and overlay. No per-surface variant, no scoped override.
     3. font-weight never changes between states, so labels never reflow.

   State lives on aria-pressed / aria-busy / :disabled, never on a class.
   No hex, no rgba, no literal pixel radius in this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── base ─────────────────────────────────────────────────────────────── */
.ac-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink-line-strong);border-radius:var(--radius-md);background:transparent;color:var(--text-primary);font-family:var(--font-system);font-weight:600;letter-spacing:.005em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .14s,border-color .14s,color .14s}
/* A brand mark is a filled shape, not a stroked icon (the Microsoft logo). */
.ac-btn svg.ac-brand{fill:currentColor;stroke:none;width:17px;height:17px}
.ac-btn svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .14s}

/* ── size · L 38 (block only) / M 32 (both) / S 26 (chrome only) ─────── */
.ac-l{height:38px;padding:0 20px;font-size:.8125rem;min-width:104px}
.ac-l svg{width:18px;height:18px}
.ac-m{height:32px;padding:0 16px;font-size:.75rem}
.ac-s{height:26px;padding:0 11px;font-size:.6875rem;gap:6px}
.ac-s svg{width:14px;height:14px}
/* S is 26px drawn; the pointer target is 34px at a 1180px viewport */
.ac-s::after{content:"";position:absolute;inset:-4px}

/* ── family 1 · CHROME — pill, grey, hairline ────────────────────────── */
.ac-chrome{border-radius:var(--radius-pill);border-color:var(--ink-line);color:var(--text-secondary);padding:0 14px}
.ac-chrome.ac-s{padding:0 11px}
.ac-chrome:hover{background:var(--ink-wash);border-color:var(--ink-line-strong);color:var(--text-primary)}
.ac-chrome:hover svg{stroke:var(--accent)}
.ac-chrome:active{background:var(--ink-wash-strong);border-color:var(--ink-line-strong)}
.ac-chrome[aria-pressed="true"]{background:var(--ink-wash-strong);border-color:var(--ink-line-strong);color:var(--text-primary)}
.ac-chrome[aria-pressed="true"]:hover{background:var(--ink-wash-strong)}

/* ── family 2 · BLOCK ────────────────────────────────────────────────── */
/* Commit — one per dialog or form. The only accent fill in the app. */
.ac-commit{background:var(--accent);border-color:var(--accent);color:var(--text-inverse)}
.ac-commit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ac-commit:active{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(1px)}
/* Standard — every other action in content, a dialog or a panel */
.ac-std{background:transparent;border-color:var(--ink-line-strong);color:var(--text-primary)}
.ac-std:hover{background:var(--ink-wash)}
.ac-std:active{background:var(--ink-wash-strong);transform:translateY(1px)}

/* ── modifiers ───────────────────────────────────────────────────────── */
/* Destructive — label colour only. No red fill, no red rest border. */
.ac-danger{color:var(--status-injured)}
.ac-danger:hover{background:var(--ink-wash);border-color:var(--status-injured);color:var(--status-injured)}
.ac-danger:hover svg{stroke:var(--status-injured)}
.ac-danger:active{background:var(--ink-wash-strong);border-color:var(--status-injured)}
/* Icon — the square of its size, in its host family */
.ac-icon{padding:0;min-width:0}
.ac-icon.ac-l{width:38px}
.ac-icon.ac-m{width:32px}
.ac-icon.ac-s{width:26px}

/* ── states shared by both families ──────────────────────────────────── */
.ac-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.ac-s:focus-visible{outline-offset:1px}
.ac-btn:disabled,.ac-btn[aria-disabled="true"]{background:var(--ink-zebra);border-color:var(--ink-line-strong);color:var(--text-disabled);cursor:not-allowed;transform:none}
.ac-btn:disabled svg,.ac-btn[aria-disabled="true"] svg{stroke:var(--text-disabled)}
.ac-btn:disabled:hover,.ac-btn[aria-disabled="true"]:hover{background:var(--ink-zebra);border-color:var(--ink-line-strong)}
/* Loading — keep the label, spin a ring in the icon slot, hold the width */
.ac-btn[aria-busy="true"]{pointer-events:none}
.ac-spin{width:13px;height:13px;flex:0 0 auto;border-radius:var(--radius-pill);border:1.5px solid currentColor;border-top-color:transparent;animation:ac-spin .7s linear infinite}
@keyframes ac-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ac-btn{transition:none}.ac-spin{animation-duration:1.6s}}

/* ── two rules added during slice 1; both await design confirmation ────
   1. [hidden] — .ac-btn is display:inline-flex, which beats the attribute,
      so a hidden button would stay on screen (the app already carries this
      bug class: the retired header update pill needed the same rule).
   2. .ac-stretch — the login card stacks two full-width actions and §4b has
      no full-width variant. Layout only: the rank still owns height,
      padding, radius and type. Used on the login screen alone. */
.ac-btn[hidden]{display:none}
.ac-stretch{width:100%}

/* ── menu row — approved 2026-08-13 (decision 5) ──────────────────────
   A row in a dropdown menu is a Chrome action that fills its menu: square,
   borderless at rest, left-read, the same ink ladder on hover. It is the
   only §4b shape without a resting border, because a menu is already a
   bordered float and a run of outlined pills inside one reads as a grid. */
.ac-menu{border-radius:var(--radius-sm);border-color:transparent;width:100%;justify-content:flex-start;text-align:left}
.ac-menu:hover{border-color:transparent}
.ac-menu.ac-danger:hover{border-color:transparent}

/* ── lanes — always flex + gap, never margins on the buttons ─────────── */
.ac-lane{display:flex;align-items:center;gap:8px;min-width:0}
.ac-lane--footer{gap:10px}

/* ═══ SELECTION CONTROLS ═══════════════════════════════════════════════
   Drawn by the app, never by the browser: no accent-color anywhere.
   The mark is an inline SVG path — a vector, not a font character — and it
   marks in Rosa Palermo rather than filling, so the dialog's one accent
   fill stays on the commit.

   <label class="ac-cbx">
     <input type="checkbox">
     <span class="ac-box">
       <svg class="ac-tick" viewBox="0 0 16 16"><path d="M3.4 8.4 6.3 11.3 12.6 4.8"/></svg>
       <svg class="ac-dash" viewBox="0 0 16 16"><path d="M4 8h8"/></svg>
     </span>
     <span class="ac-lbl">GPS Flash Report<small>optional sub-label</small></span>
   </label>
   Radio: type="radio", .ac-box.ac-box--radio, and a <span class="ac-dot">.

   A module that already had a plain <input type="checkbox"> keeps its markup:
   components/selection.js wraps the input in .ac-cb-slot and adds the same
   box beside it, so ids, `for=` pairings, name groups and handlers survive.
   Both shapes end as `input + .ac-box` siblings, which is what every state
   rule below keys on.
   ═══════════════════════════════════════════════════════════════════════ */
.ac-cbx{position:relative;display:flex;align-items:center;gap:10px;min-height:30px;padding:0 8px 0 6px;border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8125rem;font-weight:500;cursor:pointer;user-select:none}
.ac-cbx>input,.ac-cb-slot>input{position:absolute;left:0;width:16px;height:16px;margin:0;opacity:0;cursor:pointer;z-index:1}
.ac-cb-slot{position:relative;display:inline-flex;flex:0 0 auto;width:16px;height:16px;vertical-align:middle}
.ac-box{flex:0 0 auto;position:relative;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--ink-line-strong);border-radius:var(--radius-sm);background:var(--surface-field);transition:background .12s,border-color .12s}
.ac-box--radio{border-radius:var(--radius-pill)}
.ac-box svg{position:absolute;width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ac-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--accent);opacity:0}
.ac-cbx:hover>.ac-box,.ac-cb-slot:hover>.ac-box{border-color:var(--text-tertiary)}
input:checked~.ac-box,input:indeterminate~.ac-box{background:var(--ink-wash-strong);border-color:var(--ink-line-strong)}
input:checked~.ac-box .ac-tick,input:checked~.ac-box .ac-dot{opacity:1}
input:indeterminate~.ac-box .ac-dash{opacity:1}
input:indeterminate~.ac-box .ac-tick{opacity:0}
input:disabled~.ac-box{background:var(--ink-zebra);border-color:var(--ink-line-strong);cursor:not-allowed}
input:disabled~.ac-box svg{stroke:var(--text-disabled)}
input:disabled~.ac-box .ac-dot{background:var(--text-disabled)}
input:disabled~.ac-lbl{color:var(--text-disabled)}
input:focus-visible~.ac-box{outline:1px solid var(--accent);outline-offset:2px}
.ac-lbl{display:block;min-width:0}
.ac-lbl small{display:block;margin-top:2px;color:var(--text-tertiary);font-size:.6875rem;font-weight:400}

/* Selectable list row — the whole row is the target. aria-selected, ink
   ladder only, hairline separators, and never an accent border. */
.ac-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;background:transparent;border-bottom:1px solid var(--ink-line);cursor:pointer}
.ac-row:last-child{border-bottom:0}
.ac-row:hover{background:var(--ink-wash)}
.ac-row[aria-selected="true"]{background:var(--ink-wash-strong)}
.ac-row[aria-selected="true"]:hover{background:var(--ink-wash-strong)}
.ac-row .ac-cbx{padding:0;min-height:0;flex:1 1 auto}
.ac-row-meta{margin-left:auto;color:var(--text-tertiary);font-size:.6875rem;white-space:nowrap;font-variant-numeric:tabular-nums}