@layer wf {
  /* Wireframe annotations: which backlog stories a screen answers, and their acceptance criteria */
  .ann { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent-weak) 55%, var(--surface)); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
  .ann-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .ann-head .ph { color: var(--teal); }
  .ann-title { font-weight: 600; color: var(--text-2); }
  .story-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--teal); color: #006d88; font-weight: 600; font-size: var(--fs-xs); }
  .story-chip:hover { background: #006d88; color: #fff; }
  .story-chip.new { border-color: var(--payer); color: var(--payer); }
  .ann details { border-top: 1px dashed var(--line-strong); padding-top: var(--sp-2); }
  .ann summary { display: flex; align-items: center; gap: var(--sp-2); color: var(--primary); font-weight: 600; width: fit-content; }
  .ann details[open] summary .ph { transform: rotate(90deg); }
  .ann .crit { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
  .ann .crit h4 { font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .ann .crit ul { list-style: disc; padding-left: 20px; display: grid; gap: 3px; color: var(--text-2); }
  .ann .crit .pri { font-size: 0.6875rem; letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
  .ann-hide:checked ~ .app .ann, .ann-hide:checked ~ .auth .ann { display: none; }

  /* State switcher: radio inputs sit before the bar and the body inside .wf */
  .wf > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .wf-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--sp-4); }
  .wf-bar .lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--faint); display: flex; align-items: center; gap: 6px; }
  .wf-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--surface-3); }
  .wf-seg label { padding: 5px 12px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); cursor: pointer; }
  .wf-seg label:hover { color: var(--primary); }
  .wf > input:focus-visible ~ .wf-bar { outline: 2px solid var(--focus); outline-offset: 2px; }
  [data-show] { display: none; }
  /* per-state rules are generated into states.generated.css by tools/build.py */
}