/* ——— signing ceremony widgets ———
   Adapted from zig-mpc/web/style.css, scoped under .cw and mapped onto the
   site's rack-room palette (dark only). Loaded per-article via front matter. */

.cw {
  --cw-surface: #0d1014;
  --cw-surface-2: #11151b;
  --cw-ok: #3fb950;
  --cw-ok-bg: #101f16;
  --cw-bad: #e5534b;
  --cw-bad-bg: #271210;
  font-family: var(--mono);
  margin: 1.7rem 0;
}
.cw .hidden { display: none !important; }

.cw .card {
  background: var(--cw-surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.2rem;
}

.cw .controls { display: grid; gap: 1rem; }
.cw .control { display: grid; gap: 0.45rem; }
.cw .label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.cw .label::before { content: '/ '; color: var(--orange); }

.cw .seg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cw .seg-btn {
  font: inherit;
  font-size: 0.8rem;
  background: var(--cw-surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.cw .seg-btn .chain { font-size: 0.68rem; color: var(--muted); }
.cw .seg-btn.active { border-color: var(--orange); color: var(--orange); }
.cw .seg-btn.active .chain { color: var(--orange); opacity: 0.75; }

.cw button.primary, .cw button.ghost {
  font: inherit;
  font-size: 0.82rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.cw button.primary {
  background: var(--orange);
  color: #0a0c0f;
  border: 1px solid var(--orange);
  font-weight: 600;
}
.cw button.primary:hover:not(:disabled) { filter: brightness(1.1); }
.cw button.ghost { background: none; color: var(--muted); border: 1px solid var(--rule); }
.cw button.ghost:hover:not(:disabled) { border-color: var(--orange); color: var(--ink); }
.cw button:disabled { opacity: 0.4; cursor: not-allowed; }
.cw button:focus-visible, .cw input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.cw .caption { font-size: 0.78rem; line-height: 1.65; color: var(--muted); margin: 0.6rem 0 0; max-width: 70ch; }
.cw .caption em { color: var(--ink); }
.cw .caption code, .cw .verdict code:not(.hex) { background: var(--cw-surface-2); border: 1px solid var(--rule); border-radius: 3px; padding: 0.05em 0.3em; }
.cw .cw-gate { margin-top: 0.5rem; font-style: italic; }
.cw .stays-local { margin-top: 0.6rem; }

.cw .pk { display: grid; gap: 0.4rem; margin-top: 1rem; }
.cw .hex {
  font-family: var(--mono);
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--orange);
  background: var(--cw-surface-2);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  display: block;
}

.cw .msg-row { display: grid; gap: 0.45rem; margin: 1rem 0 0.2rem; }
.cw .msg-row input {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.85rem;
  background: #0a0c0f;
  color: var(--bright);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  width: 100%;
}
.cw .msg-row input:focus { outline: none; border-color: var(--orange); }
.cw .msg-row input:disabled, .cw .seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cw .stepper { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
/* "Start over" is not a fourth round: park it at the far end of the row so that
   when the labels are too long to share one line, the break reads as deliberate. */
.cw .stepper button.ghost { margin-left: auto; }
@media (max-width: 600px) { .cw .stepper button.ghost { margin-left: 0; } }
.cw .stepper button:not(.primary):not(.ghost) {
  font: inherit;
  font-size: 0.82rem;
  background: var(--cw-surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.cw .stepper button:not(.primary):not(.ghost):hover:not(:disabled) { border-color: var(--orange); color: var(--bright); }

.cw .step-log { margin: 1.1rem 0 0; }
.cw .step-log h3 { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--bright); margin: 0 0 0.3rem; }
.cw .step-log > .caption { margin-top: 0.2rem; }

.cw .table-wrap { margin: 0.9rem 0 0.2rem; overflow-x: auto; }
.cw .frames { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: var(--mono); }
.cw .frames th { color: var(--muted); font-weight: 500; text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--rule); }
.cw .frames td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cw .frames tbody tr:last-child td { border-bottom: none; }
.cw .frames code { font-size: 0.75rem; white-space: nowrap; }
.cw .frames td.secret { color: var(--cw-bad); font-weight: 600; }

.cw .verdict {
  margin-top: 1.1rem;
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.65;
  border: 1px solid;
}
.cw .verdict.ok { background: var(--cw-ok-bg); border-color: var(--cw-ok); }
.cw .verdict.bad { background: var(--cw-bad-bg); border-color: var(--cw-bad); }
.cw .verdict.ok strong { color: var(--cw-ok); }
.cw .verdict.bad strong { color: var(--cw-bad); }
.cw .verdict .hex { color: inherit; margin: 0.4rem 0; }

/* Below the desktop breakpoint: two columns at the prose measure, one on a
   phone. Three would be far too narrow at 48rem. */
.cw .lab { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.9rem; }

/* Desktop: the three experiments are alternatives and read as one row, which
   does not fit inside the prose measure. From 62rem up the whole sabotage block
   steps outside its column and centres on a width of its own, so the lab, its
   caption and the verdict below it keep a shared left edge.
   Both rules hang off :has() on purpose - a browser without it falls back to the
   two-column layout above rather than cramming three cards into 48rem.
   68rem is the point where a third of the escaped width still holds the longest
   button label on one line; below it, two columns read better than three. */
@media (min-width: 68rem) {
  .cw:has(.lab) { margin-inline: calc((100% - min(66rem, 100vw - 6rem)) / 2); }
  .cw:has(.lab) .lab { grid-template-columns: repeat(3, 1fr); }
}
.cw .lab-card { display: grid; gap: 0.5rem; align-content: start; }
.cw .lab-card strong { color: var(--bright); font-size: 0.9rem; }
.cw .lab-card .caption { margin: 0; }
.cw .lab-card button.primary { justify-self: start; margin-top: 0.3rem; }

/* ——— next-action cue ———
   These panels are a wall of deliberately disabled controls, so nothing says
   the article is live until one button asks to be pressed. Exactly one carries
   .cue at a time - the next step of the ceremony - and ceremony.js hands the
   class along the chain as each step completes.
   The ring pings on every button; the face animation only runs on the quiet
   stepper buttons, where colour is the thing that reads. Primary buttons are
   already orange, so they breathe instead.
   Kept last in the file on purpose: the reduced-motion fallback below sets
   plain declarations that tie on specificity with .cw .stepper button's own
   colours, so source order is what decides them. */
@keyframes cw-cue-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.7); transform: scale(1); }
  35%  { transform: scale(1.035); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); transform: scale(1); }
}
@keyframes cw-cue-face {
  0%, 100% { border-color: var(--orange); color: var(--orange); background: rgba(255, 138, 0, 0.07); }
  50%      { border-color: var(--yellow); color: var(--yellow); background: rgba(255, 138, 0, 0.18); }
}
@keyframes cw-cue-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}
.cw button.cue:not(:disabled) {
  animation: cw-cue-ring 2.1s ease-out infinite, cw-cue-face 2.1s ease-in-out infinite;
}
.cw button.primary.cue:not(:disabled) {
  animation: cw-cue-ring 2.1s ease-out infinite, cw-cue-glow 2.1s ease-in-out infinite;
}
/* Once the pointer is on it the cue has done its job: drop the face animation
   so the ordinary hover styling shows through, keep the ring. */
.cw button.cue:hover:not(:disabled) { animation-name: cw-cue-ring; }

/* No motion, but the reader still needs to be told which button is next: hold
   the animation's opening frame as a static state. */
@media (prefers-reduced-motion: reduce) {
  .cw button.cue:not(:disabled) {
    animation: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.25);
  }
  .cw button.cue:not(.primary):not(:disabled) {
    color: var(--orange);
    background: rgba(255, 138, 0, 0.1);
  }
}