/* Run hidden sits exposed under Account and More options, one click away. Its
   box takes the carets' column so the three labels line up. Focus styling uses
   a sibling selector, not :has(), which invalidates the whole board in Chromium. */
.run-hidden-toggle { position: relative; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--ink); cursor: pointer; font-size: 12.5px; font-weight: 600; user-select: none; }
.run-hidden-toggle:hover { background: var(--run-accent-soft); }
.run-hidden-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.run-hidden-box { display: grid; flex: 0 0 auto; place-items: center; box-sizing: border-box; width: 12px; height: 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 3px; transition: background-color 120ms ease, border-color 120ms ease; }
.run-hidden-box svg { width: 10px; height: 10px; fill: none; stroke: var(--surface-popover, #fff); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; opacity: 0; }
.run-hidden-toggle input:checked + .run-hidden-box { background: var(--run-accent); border-color: var(--run-accent); }
.run-hidden-toggle input:checked + .run-hidden-box svg { opacity: 1; }
.run-hidden-toggle input:focus-visible + .run-hidden-box { outline: 2px solid rgb(var(--project-accent-rgb, var(--mint-rgb)) / 0.55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .run-hidden-box { transition: none; } }

.background-task-blocker { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border, #434654); border-radius: 8px; color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* Run hidden send: the card dissolves while this badge rises where it was, then
   flies into the thread filter. The controller owns timing; this owns the look. */
.backgrounded-exit { --exit-accent: var(--project-accent-rgb, var(--mint-rgb)); position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
.backgrounded-exit-ring { position: absolute; top: -36px; left: -36px; width: 72px; height: 72px; box-sizing: border-box; border: 1.5px solid rgb(var(--exit-accent) / 0.75); border-radius: 50%; box-shadow: 0 0 26px rgb(var(--exit-accent) / 0.4), inset 0 0 14px rgb(var(--exit-accent) / 0.25); opacity: 0; }
.backgrounded-exit-badge { position: absolute; top: -32px; left: -32px; display: grid; place-items: center; width: 64px; height: 64px; box-sizing: border-box; border: 1px solid rgb(var(--exit-accent) / 0.6); border-radius: 21px; background: radial-gradient(circle at 30% 22%, rgb(var(--exit-accent) / 0.6), rgb(var(--exit-accent) / 0.16) 62%), var(--surface-popover, #1d2328); box-shadow: 0 14px 40px rgb(0 0 0 / 0.45), 0 0 36px rgb(var(--exit-accent) / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.2); }
.backgrounded-exit-badge svg { width: 32px; height: 32px; overflow: visible; fill: none; stroke: #fff; stroke-linejoin: round; stroke-width: 1.7; }
.backgrounded-sheet-back { fill: rgb(255 255 255 / 0.1); stroke-opacity: 0.7; }
.backgrounded-sheet-front { fill: rgb(var(--exit-accent) / 0.55); }
.backgrounded-exit-label { position: absolute; top: 44px; left: 0; padding: 4px 11px; border: 1px solid rgb(var(--exit-accent) / 0.35); border-radius: 999px; background: rgb(12 14 18 / 0.55); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(10px); }

.background-completion-receipt { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.background-completion-receipt summary { cursor: pointer; font-weight: 600; }
.background-completion-receipt summary:focus-visible { outline: 2px solid var(--run-accent); outline-offset: 3px; }
.background-completion-receipt p { margin: 8px 0 0; }
.background-completion-receipt ul { margin: 8px 0; padding-left: 20px; }
.background-completion-receipt code { font-size: 11px; }