/* ============================================================
   API AND WEBHOOKS — in through the API, out through a webhook.

   The page's one dark band, with two still cards side by side. The
   first explains starting a workflow through the public API and
   carries the request as a code window with a Copy button; the
   second explains the Webhook source and shows the app's own
   "Set up Webhook" dialog, drawn as it is, white on the dark card
   the way a dialog sits on a dimmed screen. js/api-hooks.js only
   wires the Copy button; everything visible is drawn here.

   The ground is a deep ink with a soft magenta glow behind the
   title and a fainter blue one in the far corner, the two brand
   colours the logo already carries. The cards are dark glass, a
   shade lighter than the ground with a hairline edge, and the type
   on them is light.
   ============================================================ */

.ah {
    /* the band's own palette */
    --ah-bg: #0D0B13;
    --ah-ink: #F7F4F9;
    --ah-body: #C4BCCB;
    --ah-muted: #8E8699;
    --ah-dim: #6F6879;
    --ah-glass: rgba(255, 255, 255, 0.045);
    --ah-glass-2: rgba(255, 255, 255, 0.07);
    --ah-edge: rgba(255, 255, 255, 0.10);
    --ah-edge-2: rgba(255, 255, 255, 0.16);
    --ah-magenta: #F07DF0;
    --ah-magenta-soft: rgba(213, 59, 213, 0.22);
    --ah-ok: #86E3B0;
    --ah-ok-soft: rgba(94, 211, 154, 0.14);
    /* the code's own colours */
    --ah-key: #F58CF5;
    --ah-str: #9EDFB8;
    --ah-var: #FFC38A;
    --ah-cmd: #A9B8FF;

    position: relative; isolation: isolate;
    /* the same rhythm as the big sections around it (.hiw-sec: 110 over 130) */
    padding: 110px 0 130px;
    background: var(--ah-bg);
    color: var(--ah-body);
}
/* the glow: one warm pool behind the title, one cool pool in the far corner */
.ah::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 460px at 50% -120px, rgba(213, 59, 213, 0.28), rgba(213, 59, 213, 0) 70%),
        radial-gradient(760px 420px at 100% 100%, rgba(76, 107, 238, 0.16), rgba(76, 107, 238, 0) 70%);
}
.ah .sec-eyebrow { color: var(--ah-magenta); }
.ah .sec-title { margin-bottom: 0; color: var(--ah-ink); }
.ah .sec-lede { text-align: center; color: var(--ah-body); }

/* --- the two cards ------------------------------------------------------- */
.ah-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 56px; align-items: stretch;
}
.ah-card {
    box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 22px;
    padding: 30px 30px 28px;
    border: 1px solid var(--ah-edge); border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
.ah-card-head { display: flex; flex-direction: column; gap: 12px; }
.ah-card-ico {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--ah-glass-2); border: 1px solid var(--ah-edge-2); color: var(--ah-magenta);
}
.ah-card-ico svg { width: 20px; height: 20px; }
.ah-card h3 {
    margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
    color: var(--ah-ink); text-wrap: balance;
}
.ah-card-head p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ah-body); text-wrap: pretty; }

/* the site's button, in the band's own light: a glass outline with light type */
.ah-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border-radius: 14px;
    background: var(--ah-glass-2); border: 1px solid var(--ah-edge-2); color: var(--ah-ink);
    font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ah-link svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; }
.ah-link:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.ah-link:hover svg { transform: translateX(3px); }
.ah-link:focus-visible { outline: 2px solid var(--ah-magenta); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ah-link, .ah-link svg { transition: none; } .ah-link:hover, .ah-link:hover svg { transform: none; } }
/* --- the code window ------------------------------------------------------ */
.ah-win {
    overflow: hidden; border-radius: 16px;
    background: rgba(0, 0, 0, 0.38); border: 1px solid var(--ah-edge);
}
.ah-win-top {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--ah-edge); background: rgba(255, 255, 255, 0.03);
}
.ah-win-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ah-win-title span {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 0.8125rem; font-weight: 700; color: var(--ah-ink);
}
.ah-method {
    flex: none; padding: 2px 7px; border-radius: 6px;
    background: var(--brand-magenta); color: #fff;
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em;
}
/* curl or Python: the same request, two ways */
.ah-tabs { flex: none; display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--ah-edge); }
.ah-tab {
    padding: 3px 9px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--ah-muted);
    font: 700 0.6875rem/1.4 var(--font-sans);
    transition: background 0.2s ease, color 0.2s ease;
}
.ah-tab:hover { color: var(--ah-ink); }
.ah-tab.is-on { background: rgba(255, 255, 255, 0.12); color: var(--ah-ink); }
.ah-tab:focus-visible { outline: 2px solid var(--ah-magenta); outline-offset: 1px; }
.ah-nb { white-space: nowrap; }
.ah-copy {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 8px; border-radius: 8px; cursor: pointer;
    background: var(--ah-glass-2); border: 1px solid var(--ah-edge-2); color: var(--ah-ink);
    font: 700 0.75rem/1 var(--font-sans);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ah-copy svg { width: 14px; height: 14px; }
.ah-copy:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
.ah-copy:focus-visible { outline: 2px solid var(--ah-magenta); outline-offset: 2px; }
.ah-copy.is-done { background: var(--ah-ok-soft); border-color: rgba(134, 227, 176, 0.4); color: var(--ah-ok); }
.ah-code {
    margin: 0; padding: 16px 16px 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.65;
    color: var(--ah-ink);
    /* wraps at spaces and at the <wbr> marks in the URL, never mid-word */
    white-space: pre-wrap; overflow-wrap: normal; word-break: normal;
    tab-size: 2;
}
.ah-cmd { color: var(--ah-cmd); font-weight: 700; }
.ah-s { color: var(--ah-str); }
.ah-k { color: var(--ah-key); }
.ah-var { color: var(--ah-var); }
.ah-c { color: var(--ah-dim); }
.ah-win-res {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 14px; border-top: 1px solid var(--ah-edge); background: rgba(255, 255, 255, 0.03);
}
.ah-win-res code {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--ah-body);
}
.ah-status {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--ah-ok-soft); color: var(--ah-ok);
    font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
.ah-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- the app's Set up Webhook dialog, as it is, in dark mode -------------------
   A surface a shade lighter than the card, the way a dialog sits over a
   dimmed screen. The copy, the placeholders, the hints and the two
   buttons are the app's. */
.ah-dlg {
    /* the dialog takes exactly the room the code window leaves in the other
       card, and fades out at the bottom, so the two cards end level and the
       form reads as continuing below the fold */
    flex: 1 1 0; height: 0; min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    box-sizing: border-box; overflow: hidden;
    border-radius: 18px; background: #1F1A28; border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ah-ink);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    font-family: var(--font-sans);
}
.ah-dlg-title { margin: 0; padding: 22px 24px 4px; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ah-ink); }
.ah-dlg-f { display: flex; flex-direction: column; gap: 7px; padding: 16px 24px 0; }
.ah-dlg-l { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.875rem; font-weight: 700; color: var(--ah-ink); }
.ah-dlg-l i { font-style: normal; font-weight: 400; color: var(--ah-muted); }
.ah-dlg-in {
    display: block; box-sizing: border-box; min-height: 40px; padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(255, 255, 255, 0.04);
    font-size: 0.875rem; line-height: 1.45; color: var(--ah-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-dlg-in--area {
    min-height: 84px; white-space: pre; overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5;
}
.ah-dlg-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 0.75rem; line-height: 1.45; color: var(--ah-muted); }
.ah-dlg-hint svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: #4F4859; }
.ah-dlg-note { margin: 0; padding: 18px 24px 20px; font-size: 0.875rem; line-height: 1.5; color: #B3ABBB; }
.ah-dlg-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ah-dlg-btn {
    display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px;
    font-size: 0.875rem; font-weight: 700; color: var(--ah-ink);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
}
.ah-dlg-btn--go { color: rgba(247, 244, 249, 0.42); background: rgba(255, 255, 255, 0.10); border-color: transparent; }

/* --- narrower ---------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ah-card { padding: 26px 24px 24px; }
}
@media (max-width: 900px) {
    .ah-cards { grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
    /* stacked, there is no other card to match: a fixed window with the same fade */
    .ah-dlg { flex: none; height: 300px; }
}
@media (max-width: 767px) {
    .ah { padding: 72px 0 96px; }
}
@media (max-width: 600px) {
    .ah .sec-lede { font-size: 1.0625rem; }
    .ah-card { padding: 22px 18px 20px; border-radius: 20px; gap: 18px; }
    .ah-card h3 { font-size: 1.3125rem; }
    .ah-win-top { padding-left: 12px; gap: 8px; }
    .ah-win-title span { display: none; }
    .ah-code { font-size: 0.72rem; padding: 14px; }
    .ah-dlg-title { padding: 18px 18px 2px; font-size: 1.25rem; }
    .ah-dlg-f { padding: 14px 18px 0; }
    .ah-dlg-note { padding: 16px 18px 18px; }
    .ah-dlg-foot { padding: 14px 18px; }
    .ah-dlg-in--area { min-height: 92px; }
}