/* ============================================================
   Webhooks (Developer) — page styles, ported from the v7 Webhooks handoff.
   Extracted from the CSS-in-JS string in sections/webhooks.js: the section
   is a god-file size-ratchet target (scripts/architecture-budgets.json) and
   the architecture rule says to split along the seams rather than grow it.
   Linked from public/dashboard/index.html so it paints with the shell (no
   flash of unstyled cards on first open, unlike a lazily injected <link>).
   ============================================================ */
.wh-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.wh-head{display:flex;align-items:center;gap:18px}
.wh-head h1{font-size:1.5rem;margin:0}
.wh-head p{font-size:.84rem;color:var(--dim);margin-top:2px}
.wh-head .grow{flex:1}
.btn-plus{display:inline-flex;align-items:center;gap:9px}
.btn-plus .pl{font-size:1.05rem;line-height:1;margin-top:-1px}
.mono-i{font-family:var(--mono);font-size:.9em;color:var(--t3)}
/* Event picker: custom gradient checkbox. The native input stays in the DOM but
   visually hidden — whReadEvents() reads :checked and it remains focusable;
   `.box` is the painted control, `.on` the tile state (synced by whBindEventTiles). */
.wh-events{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wh-ev{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.02);cursor:pointer;font-family:var(--sans);transition:border-color .15s,background .15s}
.wh-ev:hover{border-color:var(--border2)}
.wh-ev.on{border-color:color-mix(in srgb,var(--a2) 45%,transparent);background:color-mix(in srgb,var(--a2) 7%,transparent)}
.wh-ev input{position:absolute;opacity:0;width:0;height:0;margin:0}
.wh-ev .box{flex:0 0 auto;margin-top:2px;width:15px;height:15px;border-radius:5px;border:1.5px solid var(--border2);position:relative;transition:border-color .15s,background .15s}
.wh-ev.on .box{background:var(--grad);border-color:transparent;box-shadow:0 0 8px var(--acc-glow)}
.wh-ev.on .box::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:700}
.wh-ev input:focus-visible ~ .box{border-color:color-mix(in srgb,var(--a2) 70%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--a2) 35%,transparent)}
.wh-evtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.wh-evname{display:block;font-size:.8rem;font-weight:600;color:var(--head)}
.wh-evcode{display:block;font-family:var(--mono);font-size:.64rem;color:var(--t1);margin-top:2px}
.wh-evdesc{display:block;font-size:.66rem;color:var(--faint);line-height:1.45;margin-top:3px}
/* Stat strip. .dstat lives in the shared dash-kit.css (shared with reports/tripwires). */
.wh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Endpoint list: ONE .glass card with flat hairline-separated rows (no card-on-card).
   .wh-item is the repeating unit — a .wh-row header plus the expandable panels
   (endpoint reveal / editor / delivery log) stacked beneath it. */
.wh-list{padding:4px 0 6px}
.wh-lh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:13px 18px 9px}
.wh-lh h2{font-size:1.02rem;margin:0}
.wh-sub{font-size:.72rem;color:var(--faint)}
.wh-item{border-top:1px solid rgba(255,255,255,.045)}
.wh-row{display:flex;align-items:center;gap:13px;padding:11px 18px}
.wh-item:hover .wh-row{background:rgba(255,255,255,.028)}
.wh-ic{width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a1) 13%,transparent);color:var(--t1)}
.wh-ic svg{width:16px;height:16px}
.wh-who{flex:1;min-width:0}
.wh-who b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;font-weight:600;color:var(--head)}
.wh-name{word-break:break-word}
.wh-who .sub{display:block;font-size:.72rem;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-url{font-family:var(--mono);font-size:.8rem;color:var(--head);word-break:break-all}
/* Endpoint reveal (kept off the headline; shown on demand via "Show endpoint").
   `hidden` is a UA-stylesheet rule, so the author-level display:flex below beat it
   and the endpoint stayed permanently on screen — defeating the point of hiding it
   (#606). .wh-urlbox[hidden] re-asserts it at author level. */
.wh-urlbox{display:flex;align-items:center;gap:10px;margin:0 18px 12px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02)}
.wh-urlbox[hidden]{display:none}
.wh-urlbox .wh-url{flex:1;min-width:0}
.wh-lb2{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);flex:0 0 auto}
.wh-btns{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
.wh-editbox{margin:0 18px 14px;padding:16px;border:1px solid var(--border2);border-radius:12px;background:rgba(255,255,255,.02)}
.wh-deliv{padding:0 18px 12px}
.wh-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px 42px;text-align:center}
.wh-eic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a1) 14%,transparent);color:var(--t1)}
.wh-eic svg{width:19px;height:19px}
.wh-empty b{font-size:.94rem;color:var(--head)}
.wh-empty span{font-size:.8rem;color:var(--faint);max-width:320px;line-height:1.5}
/* Chips + outline buttons: the .chip base and the whole .vbtn set live in
   the shared dash-kit.css. Only live's REAL status modifiers stay here — the handoff's
   healthy/unverified/paused don't exist in our data model. */
.chip.st-active,.chip.st-delivered{color:var(--success);border:1px solid color-mix(in srgb,var(--success) 42%,transparent)}
.chip.st-disabled,.chip.st-failed{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent)}
.chip.st-pending{color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 42%,transparent)}
/* Fixed-height scroll region (same treatment as the API-key list) so a long
   delivery history doesn't push the page down; header stays pinned. It needs an
   opaque fill so scrolled rows can't bleed through the translucent .glass card. */
.wh-delivtable{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:12px}
.wh-delivtable table{font-size:.82rem;width:100%}
.wh-delivtable th,.wh-delivtable td{padding:8px 11px}
.wh-delivtable thead th{position:sticky;top:0;z-index:1;background:var(--bg2);backdrop-filter:blur(2px)}
.wh-evlabel{display:flex;flex-direction:column;gap:1px}
.wh-evlabel b{font-weight:600;color:var(--text);font-size:.82rem}
.wh-evlabel code{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.wh-testbadge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;color:var(--t3);border:1px solid color-mix(in srgb,var(--a3) 45%,transparent);margin-left:6px;vertical-align:middle}
/* Modal is self-contained: api.js's .ovl/.modal only inject once the API tab is
   visited, so webhooks carries its own namespaced copy of the handoff's modal. */
.wh-ovl{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:rgba(4,4,10,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto;animation:whOvlIn .18s ease}
@keyframes whOvlIn{from{opacity:0}
to{opacity:1}
}
.wh-modal{width:100%;max-width:480px;max-height:calc(100vh - 48px);overflow-y:auto;border-radius:20px;background:rgba(15,15,26,.97);border:1px solid var(--border2);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);position:relative;animation:whModIn .22s ease}
.wh-modal.wide{max-width:600px}
@keyframes whModIn{from{opacity:0;transform:translateY(14px) scale(.985)}
to{opacity:1;transform:none}
}
.wh-modal::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:.7;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat;mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat}
.wh-mhead{display:flex;align-items:flex-start;gap:14px;padding:18px 24px 16px;border-bottom:1px solid var(--border)}
.wh-mhead h2{font-size:1.14rem;margin:0}
.wh-mhead p{font-size:.8rem;color:var(--dim);margin-top:5px;line-height:1.55}
.wh-mhead p b{color:var(--text)}
.wh-mx{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--faint);font-size:.85rem;transition:color .15s,border-color .15s}
.wh-mx:hover{color:var(--text);border-color:var(--border2)}
.wh-mbody{display:flex;flex-direction:column;gap:15px;padding:18px 24px 22px}
.wh-mbody label{margin-top:0}
.wh-mfoot{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:14px 24px 18px;border-top:1px solid var(--border)}
.wh-mfoot .grow{flex:1;font-size:.74rem;color:var(--faint)}
.wh-secret{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--success) 34%,transparent);border-radius:12px;background:rgba(0,0,0,.34)}
.wh-secret code{flex:1;min-width:0;font-family:var(--mono);font-size:.78rem;color:var(--success);word-break:break-all}
.wh-hint{font-size:.74rem;color:var(--faint);line-height:1.55}
/* Handoff breakpoint: stats -> 2-up and the picker -> 1-up at 1080px, where the
   216px sidebar leaves the content column too narrow for four tiles. */
@media(max-width:1080px){.wh-stats{grid-template-columns:1fr 1fr}
.wh-events{grid-template-columns:1fr}
.wh-row{flex-wrap:wrap}
}
@media(max-width:600px){.wh-stats{grid-template-columns:1fr}
}