/*
 * Cutover Check — dynamic additions (NOT in the reference stylesheet).
 *
 * Enqueued after cutover-check.css (handle cutover-check-dynamic). Every rule here styles an element the dynamic
 * layer adds on top of the reference markup; the reference's own classes are untouched. The blocks join the
 * layers cutover-check.css already declared (reset, tokens, base, layout, components, sections, motion), so the
 * unlayered Elementor adapter at the end of that file still wins where it must.
 *
 *   .cc-mode            the small state chip inside a window status (preview · not saved / stale / unverified / not run)
 *   .cc-connection      the connection line in the rules window (store, last successful comparison, token state)
 *   .cc-operate / .cc-op the operator switch and its pending → applied → verified status line
 *   .cc-links / .cc-detail  evidence links and the extra detail lines in the trace and the ledger
 *   .cc-confirm         the native <dialog> that lists planned writes before an operator applies them
 *   .gate[data-verdict=UNVERIFIED] / [data-verdict=""]   the two states the reference never shows
 *   [aria-busy]         windows while a preview or a write is in flight
 */
@layer sections {
  .window__status .cc-mode {
    font-size:.6875rem;
    letter-spacing:.04em;
    margin-inline-end:.35rem;
    vertical-align:baseline
  }
  .cc-mode[data-cc-mode="preview"] {
    border-style:dashed;
    color:var(--signal);
    border-color:var(--signal)
  }
  .cc-mode[data-cc-mode="stale"],
  .cc-mode[data-cc-mode="unverified"],
  .cc-mode[data-cc-mode="failed"],
  .cc-mode[data-cc-mode="locked"] {
    border-style:dashed;
    color:var(--signal);
    border-color:var(--signal)
  }
  .cc-mode[data-cc-mode="verified"] {
    border-style:solid;
    color:var(--fg);
    border-color:var(--fg)
  }
  .rules-window .cc-connection {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    line-height:1.5;
    overflow-wrap:anywhere
  }
  .cc-operate {
    display:grid;
    gap:.35rem
  }
  .cc-operate .check {
    min-block-size:2.25rem
  }
  .cc-op {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    line-height:1.5;
    overflow-wrap:anywhere
  }
  .cc-op:empty {
    display:none
  }
  .cc-op[data-cc-op="failed"],
  .cc-op[data-cc-op="locked"] {
    color:var(--signal)
  }
  .cc-op[data-cc-op="verified"] {
    color:var(--fg)
  }
  .cc-links,
  .cc-detail {
    font-size:var(--text-s);
    color:var(--fg-2)
  }
  .trace .cc-links {
    margin-block:-.5rem 1rem
  }
  .cc-detail strong {
    color:var(--fg)
  }
  .cc-missing {
    overflow-wrap:anywhere
  }
  .cc-installed,
  .cc-tested {
    margin-inline-start:.35rem;
    vertical-align:baseline
  }
  .cc-installed-note,
  .cc-tests-note {
    display:block;
    margin-block-start:.5rem;
    color:var(--fg-2)
  }
  .cc-reason {
    opacity:.85
  }
  /* The gate in the two states the reference never shows: no run yet, or a qualified (UNVERIFIED) run. */
  .gate[data-verdict=""],
  .gate[data-verdict="UNVERIFIED"] {
    border-style:dashed
  }
  .gate[data-verdict="UNVERIFIED"] .gate__verdict {
    color:var(--signal)
  }
  .rule[data-on="unknown"] {
    opacity:.7
  }
  .rule[data-on="unknown"] .switch {
    border-style:dashed;
    cursor:default
  }
  [data-cc-window][aria-busy="true"] .window__body {
    transition:opacity var(--fast) var(--ease-out);
    opacity:.72
  }
  .export .button[aria-disabled="true"] {
    pointer-events:none
  }
  /* confirm dialog: the menu dialog's language (ink, square, 1px rules) at panel size */
  .cc-confirm {
    inline-size:min(100% - 2rem, 40rem);
    max-block-size:calc(100svh - 2rem);
    margin:auto;
    padding:0;
    border:1px solid var(--line-2);
    background:var(--panel);
    color:var(--paper)
  }
  .cc-confirm::backdrop {
    background:#0b0b0acc
  }
  .cc-confirm__inner {
    display:grid;
    gap:1rem;
    padding:clamp(1rem,2.4vw,1.75rem)
  }
  .cc-confirm__title {
    font-size:clamp(1.25rem,2vw,1.6rem);
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.15
  }
  .cc-confirm__list {
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    line-height:1.5;
    display:grid;
    gap:.35rem;
    max-block-size:40vh;
    overflow:auto;
    padding:.75rem;
    border:1px solid var(--line)
  }
  .cc-confirm__list li {
    overflow-wrap:anywhere
  }
  .cc-confirm__actions {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem
  }
}
@layer motion {
  @media (prefers-reduced-motion:reduce) {
    [data-cc-window][aria-busy="true"] .window__body {
      transition:none
    }
  }
  @media print {
    .cc-operate,
    .cc-op,
    .cc-confirm {
      display:none
    }
  }
}

/* Record links on the trace column headings and the workbook's "static example" label: additive, no layout change. */
.cc-head-link { color: inherit; text-decoration: none; }
.cc-head-link:hover, .cc-head-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.cc-example { font: inherit; color: inherit; }

/* The gate bar is position:sticky; in the reference its parent is section.demo. Elementor wraps it in a widget box only
   as tall as the bar, which leaves it nothing to stick within. Outside the editor the wrapper steps out of layout. */
body:not(.elementor-editor-active) .elementor.elementor .elementor-widget.cc.elementor-widget-cc-gate-bar { display: contents; }