/* ==========================================================================
   Draft copy flags — the client-facing "what still needs your input" switch.
   Every string the client has to supply or confirm is wrapped in <span class="tbd">.
   The floating button toggles body.flags, which highlights all of them and
   reports the count for the page.

   This lives in its own file (the styles it used to sit in no longer carries
   it), and is linked on every page so the toggle behaves the same everywhere.
   ========================================================================== */

.tbd { position: relative; }

body.flags .tbd {
  background: rgba(242, 169, 0, .22);
  box-shadow: inset 0 -2px 0 #8A6100;
  border-radius: 2px;
}
body.flags .tbd::after {
  content: "needs client input";
  position: absolute; left: 0; bottom: 100%; white-space: nowrap; z-index: 90;
  background: #8A6100; color: #fff;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25em .5em; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
body.flags .tbd:hover::after { opacity: 1; }

/* the switch itself */
.draft-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: .85em 1.25em; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.draft-toggle:hover { background: #000; }
.draft-toggle[aria-pressed="true"] { background: #8A6100; }
.draft-toggle:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; }
@media print { .draft-toggle { display: none; } }