/* =========================================================
   The mark button — /css/system/components/ops-mark.css

   The visual half of /js/system/ops-mark.js: one button, armed by the
   first press, confirmed by the second, self-clearing after ~4 seconds.

   EXTRACTED FROM ops.css (round 6, 9 Aug 2026). These rules lived
   inside the wall's own 264-selector stylesheet, so a surface that
   wanted the BUTTON had to take the whole wall design with it. The
   master planner's transport feed gained marks in round 5 and did not
   link ops.css, so its buttons rendered as browser-default controls
   sitting among the portal's own — the module was shared and its
   appearance was not.

   Linking ops.css on the planner would have worked and would have
   dragged .day__name, .who__lead, .stbl th and two hundred others onto
   a page that defines none of them. So the button moved out to sit
   beside the module it belongs to, and the three surfaces that mark —
   wall, warehouse dashboard, transport feed — link this instead.

   The armed state is the whole affordance: accent fill and an explicit
   "tap again to confirm". Nothing here is surface-specific; a surface
   that wants a smaller button overrides size at its own scope, as the
   kanban card and the feed both do.
   ========================================================= */

.mark {
  appearance: none; border: 1px solid var(--ink); border-radius: var(--r-1);
  background: var(--paper);
  font-family: var(--font-cd); font-size: 12px; letter-spacing: 0.05em;
  padding: 9px 16px; cursor: pointer; min-width: 158px;
  text-align: center; color: var(--ink);
}
.mark:hover { background: var(--ink); color: var(--paper); }
.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the quiet tail of a sequence — offerable, not the headline */
.mark--second { border-color: var(--rule-3); color: var(--ink-3); }
.mark--done { border-color: var(--rule-2); color: var(--ink-4); pointer-events: none; }
.mark[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }

/* ── click to confirm ────────────────────────────────────────
   Accent fill, explicit "tap again to confirm", self-clearing. */
.mark--armed {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
  font-weight: var(--w-medium);
}
.mark--armed:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }