/* api-webhooks — the developer screen inside the product, and the public developer portal.

   WHY THIS FILE CARRIES ITS OWN TOKEN VALUES

   It is loaded by two shells that do not share a palette. fragments/layout.html loads
   kronenwerk.css before it, so every token below is already defined — and is redefined
   again there for the dark theme, which is why nothing here declares one of THOSE names on
   :root: a second bare declaration would win over the dark block and freeze the signed-in
   product in light colours. The public shell (oeffentlich/rahmen.html) loads
   oeffentlich.css, which defines the colours and the typefaces and knows nothing about
   --raum-* or --radius. So the existing rules read those through var(name, fallback):
   present, they are used; absent, the rule still lays out.

   The tokens this file OWNS are namespaced --doku-* and are declared on a bare :root
   below. They collide with nothing, so declaring them cannot disturb either shell. */

:root {
    /* The documentation area's own spacing and rules. Named apart from the product's
       --raum-* deliberately: these are read on a public page whose shell has no such
       scale, and borrowing a name from a file that may not be loaded is how a layout
       collapses in exactly one place and nowhere else. */
    --doku-raum-1: 8px;
    --doku-raum-2: 16px;
    --doku-raum-3: 28px;
    --doku-radius: 8px;
    --doku-linie: #E3E1DA;
    --doku-linie-stark: #C9C6BC;
    --doku-tinte: #15171B;
    --doku-tinte-leise: #6B7280;
    --doku-grund: #FAF8F5;
    --doku-marke: #74560F;
    --doku-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/*
 * The developer screen, and only it.
 *
 * Everything here draws things that exist nowhere else in the product: an address a
 * machine calls, a header a machine sends, an event catalogue. They are read the way code
 * is read — left edge, fixed width, one line per fact — so the type is monospaced and the
 * rows are flush rather than boxed. A card around each of them would say "this is one
 * object", which is exactly what a list of endpoints is not.
 */

/* ------------------------------------------------------------------ the upsell */

/*
 * What a business on a smaller plan sees instead of controls.
 *
 * Quiet rather than loud, and it names the plan. A red bar saying "not available" tells
 * somebody they have hit a fault; a line naming the plan that includes this tells them
 * they have hit a price, which is the truth and is actionable.
 */
.planhinweis {
    border: 1px solid var(--gold-linie, #E4D3A4);
    background: var(--gold-tief, #FBF3DF);
    border-radius: var(--radius, 8px);
    padding: var(--raum-3, 28px);
    margin-bottom: var(--raum-3, 28px);
}

.planhinweis p {
    margin: 0;
    color: var(--tinte-2, #5A6270);
}

.planhinweis p + p {
    margin-top: var(--raum-1, 8px);
}

/* ------------------------------------------------------------------ access facts */

.zugangsblock {
    display: grid;
    gap: var(--raum-2, 16px);
}

/*
 * One fact about how to call the interface: a label and a value a person copies.
 *
 * Grid rather than a table because at a narrow width the two halves stack, and a table
 * cell cannot. The value keeps the monospace face whatever it holds — an address, a
 * header, a status code — because all three are things that must be typed exactly.
 */
.zugangszeile {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--raum-1, 8px) var(--raum-3, 28px);
    align-items: baseline;
    padding: var(--raum-2, 16px) 0;
    border-bottom: 1px solid var(--linie, #E3E1DA);
}

.zugangszeile:last-child {
    border-bottom: 0;
}

.zugangsname {
    color: var(--tinte-3, #838B98);
    font-size: 0.875rem;
}

.zugangswert {
    font-family: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    color: var(--tinte, #14161A);
    overflow-wrap: anywhere;
}

.zugangssatz {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--tinte-3, #838B98);
    font-size: 0.875rem;
}

@media (max-width: 40rem) {
    .zugangszeile {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ endpoints */

/*
 * The endpoint list.
 *
 * The path first and in monospace, because that is what a reader is scanning for; the
 * sentence under it, and the permission it needs at the end of that sentence. The
 * permission is on the same line as the description on purpose — an integrator choosing
 * which scopes to put on a key is reading exactly that pairing, and separating them into
 * two columns makes them two lookups.
 */
.wegweiser {
    display: grid;
    gap: var(--raum-1, 8px);
    padding: var(--raum-2, 16px) 0;
    border-bottom: 1px solid var(--linie, #E3E1DA);
}

.wegweiser:last-child {
    border-bottom: 0;
}

.wegweiser-pfad {
    font-family: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    color: var(--tinte, #14161A);
    overflow-wrap: anywhere;
}

.wegweiser-text {
    margin: 0;
    color: var(--tinte-3, #838B98);
    font-size: 0.875rem;
}

.wegweiser-recht {
    display: inline-block;
    margin-left: var(--raum-1, 8px);
    padding: 0 0.4em;
    border: 1px solid var(--linie-stark, #C9C6BC);
    border-radius: var(--radius-sm, 5px);
    color: var(--tinte-2, #5A6270);
    font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ event list */

.ereigniszeile {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: var(--raum-1, 8px) var(--raum-3, 28px);
    align-items: baseline;
    padding: var(--raum-2, 16px) 0;
    border-bottom: 1px solid var(--linie, #E3E1DA);
}

.ereigniszeile:last-child {
    border-bottom: 0;
}

.ereignisname {
    font-family: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    color: var(--tinte, #14161A);
}

.ereignistext {
    margin: 0;
    color: var(--tinte-3, #838B98);
}

@media (max-width: 40rem) {
    .ereigniszeile {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------- the public developer portal */

/*
 * The chapter index, on every page of the area.
 *
 * A row of links rather than a sidebar. Nine chapters is too few to earn a column and
 * too many to leave to a reader's back button, and a wrapping row is the one shape that
 * is legible at every width without a media query deciding which half to hide.
 *
 * The current chapter is marked rather than removed. A reader who has just landed on a
 * page from a search result needs to know WHERE they landed, and a missing entry answers
 * that only by its absence.
 */
.doku-index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--doku-raum-1) var(--doku-raum-2);
    padding: var(--doku-raum-2) 0;
    border-top: 1px solid var(--doku-linie);
    border-bottom: 1px solid var(--doku-linie);
}

.doku-index-eintrag {
    font-family: var(--doku-mono);
    font-size: 0.875rem;
    color: var(--doku-tinte-leise);
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}

.doku-index-eintrag:hover,
.doku-index-eintrag:focus-visible {
    color: var(--doku-tinte);
    border-bottom-color: var(--doku-linie-stark);
}

.doku-index-eintrag.hier {
    color: var(--doku-marke);
    border-bottom-color: var(--doku-marke);
}

/*
 * A worked example: a request, a body, a verification.
 *
 * It scrolls inside itself rather than widening the page. A documentation page that
 * scrolls sideways because one line of a curl command is long is a page that is unusable
 * on the device most people read documentation on, and the fix is never to shorten the
 * command — a truncated example is worse than a wide one.
 *
 * White space is preserved, because in every one of these the line breaks ARE the
 * content: a request line, then headers, then a body.
 */
.doku-schnipsel {
    margin: var(--doku-raum-2) 0 0;
    padding: var(--doku-raum-2);
    background: var(--doku-grund);
    border: 1px solid var(--doku-linie);
    border-radius: var(--doku-radius);
    overflow-x: auto;
}

.doku-schnipsel code {
    font-family: var(--doku-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--doku-tinte);
    white-space: pre;
}