/* ==========================================================================
   whatiswebhook.com — additions to the shared blueprint design system
   (styles.css comes unchanged from whatislocalhost.com).
   ========================================================================== */

/* ---------- Palette: citrine ----------
   The series shares one blueprint system; each site has its own colors.
   whatiswebhook: yellow up front, cyan linework, ink-dark text. */
:root {
  --paper: #fbfaf3; --paper-2: #f4f1e2; --surface: #ffffff; --surface-2: #fdfcf6; --fig-bg: rgba(255, 255, 255, .82);
  --ink: #15212b; --ink-2: #3c4b57; --ink-3: #5c6b77;
  --blue: #0a7c8f; --blue-hover: #086c7d; --fill: #ffd23f; --fill-hover: #ffc61a;
  --blue-soft: #fff3bf; --blue-wash: rgba(255, 210, 63, .14); --link: #076a7a; --focus: #0a7c8f;
  --stroke: #0d8fa3; --stroke-2: rgba(13, 143, 163, .45); --stroke-3: rgba(13, 143, 163, .2);
  --rule: rgba(21, 33, 43, .12); --rule-strong: rgba(21, 33, 43, .24);
  --grid-1: rgba(13, 143, 163, .045); --grid-2: rgba(13, 143, 163, .09);
  --signal: #f2b600; --signal-ink: #8a6500; --signal-soft: rgba(255, 210, 63, .28);
  --code-bg: #141d24; --code-border: rgba(255, 220, 120, .14); --code-ink: #f1efe4; --code-muted: #9aa3a8; --code-accent: #6fd8e6; --code-string: #ffd65c;
  --code-inline-bg: rgba(255, 210, 63, .2);
  --viz-context: #0d8fa3; --viz-live: #f2b600;
  --on-fill: #15212b;
  --logo-bg: #ffd23f; --logo-ink: #15212b; --logo-dot: #0d8fa3;
}
[data-theme="dark"] {
  --paper: #0f161c; --paper-2: #131c23; --surface: #17222a; --surface-2: #1b2831; --fig-bg: rgba(23, 34, 42, .76);
  --ink: #f6f3e6; --ink-2: #c9c6b6; --ink-3: #9d9b8d;
  --blue: #ffd84f; --blue-hover: #ffe27a; --fill: #ffd23f; --fill-hover: #ffdc66;
  --blue-soft: #3a3412; --blue-wash: rgba(255, 216, 79, .08); --link: #ffe07a;
  --stroke: #79dceb; --stroke-2: rgba(121, 220, 235, .48); --stroke-3: rgba(121, 220, 235, .2);
  --rule: rgba(246, 243, 230, .12); --rule-strong: rgba(246, 243, 230, .24);
  --grid-1: rgba(121, 220, 235, .04); --grid-2: rgba(121, 220, 235, .075);
  --signal: #ffd23f; --signal-ink: #ffe07a; --signal-soft: rgba(255, 210, 63, .18); --focus: #ffe07a;
  --code-bg: #0a1014; --code-border: rgba(255, 220, 120, .14); --code-inline-bg: rgba(255, 216, 79, .1);
  --viz-context: #4fc7d8; --viz-live: #ffd23f;
  --on-fill: #15212b;
  --logo-bg: #ffd23f; --logo-ink: #15212b; --logo-dot: #0d8fa3;
}
/* Text and marks drawn on the yellow fill. */
::selection, .skip-link, .btn-primary, .kicker .tag, .answer-label, .next-chapter .go, .chip[aria-pressed="true"],
.seg button[aria-pressed="true"], .sim-result .ico, .fix-head .n, .resp .you, .pg-lab b { color: var(--on-fill); }
.btn-primary { --fg: var(--on-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -14px #c99400; }


.code .n { color: #b5f0c8; }

/* ---------- Webhook tester ---------- */
.hero-tool { padding-bottom: clamp(40px, 6vw, 72px); }
.hero-tool .lede { max-width: 44em; }
.wt { margin-top: 28px; display: grid; gap: 18px; }

.wt-url { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); padding: 18px; box-shadow: var(--shadow); }
.wt-url-label { display: block; font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.wt-url-row { display: flex; gap: 10px; }
.wt-url-field { flex: 1; min-width: 0; font: 500 1rem/1.4 var(--font-mono); color: var(--blue); background: var(--surface-2); }
.wt-url-field.is-expired { color: var(--ink-3); text-decoration: line-through; }
.wt-status { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; font-size: .9rem; color: var(--ink-2); }
.wt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.wt-dot[data-state="live"] { background: var(--ok); box-shadow: 0 0 0 0 var(--ok-soft); animation: wt-pulse 2s infinite; }
.wt-dot[data-state="connecting"] { background: var(--warn); }
.wt-dot[data-state="down"] { background: var(--err); }
@keyframes wt-pulse { 0% { box-shadow: 0 0 0 0 var(--ok-soft); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 640px) { .wt-url-row { flex-wrap: wrap; } .wt-url-field { flex-basis: 100%; } .wt-url-row .btn { flex: 1; } }

.wt-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.wt-control { display: grid; gap: 6px; }
.wt-control label { font: 500 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wt-control .field { min-height: 40px; padding: 7px 12px; font-size: .92rem; border-radius: 9px; }
select.field { width: auto; cursor: pointer; }
.wt-grow { flex: 1 1 260px; }
.wt-hint { flex: 1 1 260px; margin: 0; font-size: .86rem; color: var(--ink-3); align-self: center; }
.wt-control-btns { display: flex; gap: 8px; }

.wt-work { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .wt-work { grid-template-columns: 1fr; } }

.wt-list { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.wt-list-head { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--surface-2); font: 500 .68rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wt-items { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.wt-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.wt-item:hover { background: var(--blue-wash); }
.wt-item[aria-pressed="true"] { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
[data-theme="dark"] .wt-item[aria-pressed="true"] { background: var(--surface-2); }
.wt-item.is-new { animation: wt-in .9s var(--ease); }
@keyframes wt-in { from { background: var(--signal-soft); } to { background: transparent; } }
.wt-item-path { font: 500 .86rem/1.5 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-item-meta { grid-column: 2; font: 400 .74rem/1.3 var(--font-mono); color: var(--ink-3); }
.wt-empty { padding: 18px 16px; font-size: .92rem; color: var(--ink-2); }
.wt-empty p { margin: 0 0 8px; }
.wt-empty .cmd { font-size: .78rem; }

.wt-method { display: inline-block; min-width: 4.4em; padding: 2px 6px; border-radius: 6px; font: 600 .7rem/1.5 var(--font-mono); letter-spacing: .06em; text-align: center; background: var(--blue-wash); color: var(--blue); align-self: start; }
.wt-method.m-post { background: var(--signal-soft); color: var(--signal-ink); }
.wt-method.m-get { background: var(--ok-soft); color: var(--ok); }
.wt-method.m-delete { background: var(--err-soft); color: var(--err); }

.wt-detail { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; min-width: 0; }
.wt-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.wt-path { font-size: .95rem; overflow-wrap: anywhere; }
.wt-meta { flex-basis: 100%; font: 400 .78rem/1.4 var(--font-mono); color: var(--ink-3); }
.wt-detail .tabs { margin: 0; }
.wt-code pre { max-height: 520px; overflow: auto; }
.wt-headers table, .wt-form table { min-width: 0; font-size: .84rem; }
.wt-headers td, .wt-form td { overflow-wrap: anywhere; }
.wt-headers th { white-space: nowrap; }
.wt-headers tr.is-transit { opacity: .5; }

.wt-sig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 4px; }
.wt-sig .btn { min-height: 40px; }
.wt-sig-res { margin: 14px 0 8px; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.wt-sig-res.is-ok { background: var(--ok-soft); color: var(--ok); }
.wt-sig-res.is-bad { background: var(--err-soft); color: var(--err); }
.wt-sig-facts dd { overflow-wrap: anywhere; font-size: .82rem; }

.wt-privacy { margin: 0; font-size: .88rem; color: var(--ink-2); border-left: 2px solid var(--signal); padding: 4px 0 4px 14px; }
.wt-detail .tab-panel > p:first-child, .wt-detail .tab-panel > .wt-sig:first-child { margin-top: 16px; }
.wt-detail .tab-panel > .code:first-child, .wt-detail .tab-panel > .table-wrap:first-child { margin-top: 0; }

/* ---------- Polling calculator (home) ---------- */
.calc { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); padding: 22px; box-shadow: var(--shadow); margin-bottom: 1.5em; }
.calc-in { display: grid; grid-template-columns: max-content 1fr; gap: 14px 20px; align-items: center; }
.calc-in label { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.calc-in output { display: block; font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.calc-in input[type=range] { width: 100%; accent-color: var(--blue); }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.calc-col { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.calc-col.is-hook { border-color: var(--signal); background: var(--signal-soft); }
.calc-h { display: block; font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.calc-col.is-hook .calc-h { color: var(--signal-ink); }
.calc-col dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.calc-col dt { font-size: .88rem; color: var(--ink-2); }
.calc-col dd { margin: 0; font: 600 .98rem/1.4 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.calc .fineprint { margin: 16px 0 0; }
@media (max-width: 560px) { .calc-in, .calc-out { grid-template-columns: 1fr; } }

/* Grid columns may hold code that scrolls: let them shrink below its width. */
.split > * { min-width: 0; }
@media (max-width: 560px) { .eyebrow { white-space: normal; } }
.faq summary { overflow-wrap: anywhere; }