/* Mintlify style reference, applied to a working tool.
 *
 * Two contradictions in the source document had to be resolved. Both are
 * resolved by the document itself, not by invention:
 *
 * 1. --surface-hero-teal is written "#0c8c5", five digits, which is not a
 *    colour. The Agent Prompt Guide names #0c8c5e for the hero background, so
 *    that is what is used.
 * 2. Mint Green is forbidden as a large surface fill, and simultaneously named
 *    as the hero background. The Do's settle it: the hero is "the only
 *    colourful moment on the page". So the band stays a band, deliberately
 *    short, and everything below it is white.
 *
 * One adaptation is mine and is called out here rather than hidden: this is a
 * working tool, not a landing page, so there is no full viewport hero and no
 * illustration. The hero survives as a compact working band that carries the
 * lookup field.
 */

:root {
  --color-mint-green: #0c8c5e;
  --color-ink-black: #08090a;
  --color-true-black: #000000;
  --color-paper-white: #ffffff;
  --color-mist-gray: #f2f2f2;
  --color-cloud-gray: #dddddd;

  /* Muted text is not a token in the source. Derived as true black at reduced
   * opacity rather than introduced as a new grey, so the palette stays closed. */
  --color-muted: rgba(0, 0, 0, 0.56);
  --color-mint-wash: rgba(12, 140, 94, 0.06);
  /* The counterpart to the green. A refused address is the one result a
     person must not have to read twice, and until now it wore the same ink
     black as everything else on the page. Deep enough to stay legible, not
     a warning-sign red. */
  --color-signal-red: #b3261e;
  --color-signal-wash: rgba(179, 38, 30, 0.06);

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, sans-serif;

  --text-caption: 13px;      --leading-caption: 1.5;      --tracking-caption: 0.65px;
  --text-body: 16px;         --leading-body: 1.5;         --tracking-body: -0.16px;
  --text-subheading: 20px;   --leading-subheading: 1.3;   --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.33;  --tracking-heading-sm: -0.24px;
  --text-heading: 40px;      --leading-heading: 1.15;     --tracking-heading: -0.4px;
  --text-display: 57px;      --leading-display: 1.1;      --tracking-display: -1.14px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --spacing-4: 4px;   --spacing-6: 6px;   --spacing-8: 8px;   --spacing-10: 10px;
  --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px; --spacing-64: 64px; --spacing-72: 72px; --spacing-96: 96px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Shared column widths. Every list in the interface uses these, so the
   * verdict column, the action column and the settings control all end on the
   * same line no matter which page they are on. */
  --col-status: 100px;
  --col-actions: 148px;
  --col-control: 240px;

  --radius-tags: 4px;
  --radius-cards: 16px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;
  --radius-largecontainers: 24px;

  --shadow-sm: lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px;
  --shadow-sm-2: lab(100 0 0 / 0.05) 0px 2px 4px 0px;
}

* { box-sizing: border-box; }

/* The hidden attribute only carries display:none from the user agent sheet,
 * so any later rule that sets a display wins over it. .row is display:flex,
 * which silently made every hidden row visible again. This puts the attribute
 * back in charge for good, rather than leaving it to rule order. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Never anything but white. No off-white canvas, no dark surfaces below
   * the band. */
  background: var(--color-paper-white);
  color: var(--color-true-black);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-24); }

/* --- application shell ----------------------------------------------------
 *
 * A fixed sidebar on the left and one scrolling column on the right, which is
 * the shape the reference product uses. The sidebar is where the accent lives:
 * the style guide reserves mint for active states, and a selected navigation
 * row is exactly that.
 */
.app { display: flex; min-height: 100vh; }

/* --- die ein- und ausklappbare Seitenleiste --------------------------------
 *
 * Zwei Zustaende, ein Schalter. Auf breiten Schirmen steht sie offen und
 * nimmt ihren Platz ein; zugeklappt gibt sie ihn vollstaendig frei. Auf
 * schmalen legt sie sich ueber den Inhalt statt ihn zu quetschen, denn 248
 * Pixel von 375 sind zwei Drittel der Breite.
 *
 * Gesteuert ueber data-sidebar am .app, damit es genau einen Ort gibt, an dem
 * der Zustand steht, und kein Element seinen eigenen mitfuehrt. */
.sidebar {
  width: 248px; flex: none; position: sticky; top: 0; height: 100vh;
  transition: margin-left 200ms ease;
  background: var(--color-paper-white);
  border-right: 1px solid var(--color-mist-gray);
  padding: var(--spacing-24) var(--spacing-16);
  display: flex; flex-direction: column; gap: var(--spacing-24);
  overflow-y: auto;
}
.app[data-sidebar="closed"] .sidebar { margin-left: -248px; }

.sidebar-open-btn, .sidebar-close-btn {
  border: 1px solid var(--color-mist-gray); background: var(--color-paper-white);
  border-radius: var(--radius-tags); cursor: pointer; color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
}
.sidebar-open-btn:hover, .sidebar-close-btn:hover {
  color: var(--color-true-black); border-color: var(--color-cloud-gray);
}
/* Der Oeffner liegt fest oben links und ist nur da, wenn es etwas zu oeffnen
   gibt. Ohne ihn waere die zugeklappte Leiste eine Sackgasse. */
.sidebar-open-btn {
  position: fixed; top: var(--spacing-16); left: var(--spacing-16); z-index: 30;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.app[data-sidebar="open"] .sidebar-open-btn { display: none; }
.sidebar-close-btn { margin-left: auto; }

.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  /* Ueber dem Inhalt statt neben ihm. */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 25; margin-left: 0;
    transform: translateX(-100%); transition: transform 200ms ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
  }
  .app[data-sidebar="open"] .sidebar { transform: translateX(0); }
  .app[data-sidebar="closed"] .sidebar { margin-left: 0; }
  .app[data-sidebar="open"] .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 20;
    background: rgba(0, 0, 0, 0.28);
  }
}

/* Platz fuer den Oeffner, damit er nicht auf dem Inhalt liegt.
 *
 * Stand einmal in der Regel fuer schmale Schirme und griff deshalb nicht, wenn
 * jemand die Leiste an einem grossen Schirm zuklappte: der Knopf liegt fest
 * oben links und lag dann auf der ersten Ueberschrift. Der Platz haengt am
 * Zustand der Leiste, nicht an der Breite des Fensters. */
.app[data-sidebar="closed"] .main-inner { padding-top: var(--spacing-64); }

.brand {
  display: flex; align-items: center; gap: var(--spacing-8);
  font-size: 15px; font-weight: var(--font-weight-semibold);
  letter-spacing: -0.15px; color: var(--color-true-black);
}
.brand-mark {
  width: 20px; height: 20px; border-radius: var(--radius-tags);
  background: var(--color-mint-green); flex: none;
}

/* The workspace box from the reference: a bordered card holding the one
 * number a person checks without being asked. */
.workspace {
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-tags);
  padding: var(--spacing-12); display: flex; flex-direction: column;
  gap: var(--spacing-4);
}
.workspace-name { font-size: 14px; font-weight: var(--font-weight-medium); }
.workspace-meta { font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title {
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 var(--spacing-6) var(--spacing-8);
}
.nav-item {
  display: flex; align-items: center; gap: var(--spacing-10);
  padding: var(--spacing-6) var(--spacing-8); border: 0; cursor: pointer;
  background: transparent; border-radius: var(--radius-tags);
  font-family: inherit; font-size: 15px; font-weight: var(--font-weight-regular);
  letter-spacing: -0.15px; color: var(--color-true-black); text-align: left;
  width: 100%;
}
.nav-item svg { flex: none; color: var(--color-true-black); }
.nav-item:hover { background: var(--color-mist-gray); }
.nav-item[aria-current="page"] {
  background: var(--color-mint-wash); color: var(--color-mint-green);
  font-weight: var(--font-weight-medium);
}
.nav-item[aria-current="page"] svg { color: var(--color-mint-green); }

.main { flex: 1; min-width: 0; padding: var(--spacing-32) var(--spacing-48) var(--spacing-96); }
.main-inner { max-width: 1100px; margin: 0 auto; }

.page[hidden] { display: none; }
.page-head { margin-bottom: var(--spacing-32); }
.page-head h1 {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading); font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
}
.page-head p { margin: 0; color: var(--color-muted); max-width: 70ch; }

.split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
         gap: var(--spacing-32); align-items: start; }


/* --- buttons ---------------------------------------------------------------
 * One dark filled variant and nothing else carries a fill. The accent stays
 * off buttons entirely: the style guide reserves it for active states, links
 * and icons, and says it loses its identity when used at scale.
 */
.btn {
  font-family: inherit; font-size: 14px; font-weight: var(--font-weight-medium);
  line-height: 1.5; letter-spacing: -0.14px;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-buttons);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--spacing-6);
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn-filled {
  background: var(--color-ink-black); color: var(--color-paper-white);
  box-shadow: var(--shadow-sm);
}
.btn-filled:hover { background: #1c1e20; }
.btn-filled:disabled { opacity: .45; cursor: default; background: var(--color-ink-black); }
.btn-ghost { background: transparent; color: var(--color-true-black); }
.btn-ghost:hover { background: var(--color-mist-gray); }
.btn-outline {
  background: var(--color-paper-white); color: var(--color-true-black);
  border-color: var(--color-cloud-gray);
}
.btn-outline:hover { background: var(--color-mist-gray); }
.btn-sm { padding: var(--spacing-6) var(--spacing-10); font-size: var(--text-caption); }

/* --- sections and cards -------------------------------------------------- */
main { padding-bottom: var(--spacing-96); }
.section { margin-top: var(--section-gap); }
.eyebrow {
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-mint-green); margin: 0 0 var(--spacing-8);
}
.section h2 {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
}
.section .lede { margin: 0 0 var(--spacing-24); color: var(--color-muted); max-width: 68ch; }

.card {
  background: var(--color-paper-white);
  border: 1px solid var(--color-mist-gray);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
/* The product card: pulled up so it bridges the band and the white page,
 * the way the reference puts the product mockup across that seam. */
.card-raised {
  border-radius: var(--radius-largecontainers);
  box-shadow: var(--shadow-sm-2);
  border-color: var(--color-mist-gray);
  margin-top: calc(var(--spacing-48) * -1);
  padding: 0; overflow: hidden;
}
.grid { display: grid; gap: var(--spacing-24); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Capability card: mint wash is allowed here, and only here. */
.card-feature { background: var(--color-mint-wash); border-color: transparent; }
.card-feature .value {
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading); font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black); margin: 0 0 var(--spacing-4);
}
.card-feature .label { font-size: var(--text-caption); color: var(--color-muted); margin: 0; }

/* --- tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: var(--spacing-4); border-bottom: 1px solid var(--color-mist-gray);
        padding: 0 var(--card-padding); }
.tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: var(--font-weight-medium);
  letter-spacing: -0.14px; color: var(--color-muted);
  padding: var(--spacing-16) var(--spacing-12);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--color-true-black); }
/* Active state is where mint is supposed to appear. */
.tab[aria-selected="true"] { color: var(--color-mint-green); border-bottom-color: var(--color-mint-green); }
.panel { padding: var(--card-padding); }
.panel[hidden] { display: none; }

/* --- forms --------------------------------------------------------------- */
.row { display: flex; gap: var(--element-gap); flex-wrap: wrap; align-items: flex-end; }
.control { display: flex; flex-direction: column; gap: var(--spacing-6); flex: 1; min-width: 180px; }
.control label { font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0; }
.control input, .control textarea {
  font-family: inherit; font-size: 14px; color: var(--color-true-black);
  background: var(--color-paper-white);
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-12); outline: 0; width: 100%;
}
.control input:focus, .control textarea:focus { border-color: var(--color-mint-green); }
.control textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* --- table --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  color: var(--color-muted); letter-spacing: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: 1px solid var(--color-cloud-gray); white-space: nowrap;
}
td { padding: var(--spacing-12); border-bottom: 1px solid var(--color-mist-gray); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* Tags carry state. The system allows exactly one accent, so a guessed or
 * bounced row is distinguished by weight, border and opacity rather than by a
 * second colour. A red badge here would break the whole palette. */
.tag {
  display: inline-block; font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: 0; padding: 2px var(--spacing-6); border-radius: var(--radius-tags);
  border: 1px solid var(--color-cloud-gray); color: var(--color-muted); white-space: nowrap;
}
.tag-read { color: var(--color-mint-green); border-color: var(--color-mint-green); }
.tag-guess { color: var(--color-ink-black); border-color: var(--color-ink-black);
             border-style: dashed; }
.tag-dead { color: var(--color-muted); background: var(--color-mist-gray);
            border-color: var(--color-mist-gray); text-decoration: line-through; }

.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.note {
  font-size: var(--text-caption); color: var(--color-muted);
  border-left: 2px solid var(--color-mist-gray); padding-left: var(--spacing-12);
  margin: var(--spacing-16) 0 0;
}
.out {
  margin-top: var(--spacing-16); padding: var(--spacing-16);
  background: var(--color-mist-gray); border-radius: var(--radius-inputs);
  font-size: var(--text-caption); white-space: pre-wrap; word-break: break-word;
  line-height: 1.5;
}
.out[hidden] { display: none; }
/* The progress bar for a bulk run. Deliberately thin and quiet: it is there
 * to say "still working, this far along", not to be the loudest thing on the
 * page while the results underneath are what matters. */
.progress {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--color-mist-gray); margin: 0 0 var(--spacing-16);
}
.progress-fill {
  height: 100%; width: 0; background: var(--color-mint-green);
  transition: width 240ms ease;
}
/* A run that stopped early must not keep looking like one still going. */
.progress-stopped { background: var(--color-ink-black); }

/* The reasons behind a verdict. Quiet, indented, and always present when
   there are any: the number on the badge is a summary of these lines and is
   worth less without them. */
.reasons { margin: var(--spacing-8) 0 0; padding: var(--spacing-12) var(--spacing-16);
           border-left: 2px solid var(--color-mist-gray); }
.reasons p { margin: 0 0 var(--spacing-6); font-size: var(--text-caption);
             color: var(--color-muted); line-height: 1.5; }
.reasons p:last-child { margin-bottom: 0; }

.empty { padding: var(--spacing-32); text-align: center; color: var(--color-muted); font-size: 14px; }

a { color: var(--color-true-black); text-decoration: none; }
a:hover { color: var(--color-mint-green); }

@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .band h1 { font-size: 32px; letter-spacing: -0.32px; }
}

/* --- role picker and settings --------------------------------------------- */
.picker { border: 0; padding: 0; margin: 0 0 var(--spacing-24); }
.picker legend {
  padding: 0; margin-bottom: var(--spacing-8);
  font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

/* A chip is a checkbox wearing the tag shape. Square, like everything else,
 * and it uses the one accent for its selected state, which is exactly what
 * the accent is reserved for. */
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; cursor: pointer;
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: 0; padding: var(--spacing-6) var(--spacing-10);
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-tags);
  color: var(--color-muted); background: var(--color-paper-white);
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.chip span:hover { border-color: var(--color-mint-green); color: var(--color-true-black); }
.chip input:checked + span {
  color: var(--color-mint-green); border-color: var(--color-mint-green);
  background: var(--color-mint-wash);
}
.chip input:focus-visible + span { outline: 2px solid var(--color-mint-green); outline-offset: 2px; }

.setting {
  display: flex; align-items: flex-start; gap: var(--spacing-12);
  padding: var(--spacing-16) 0; border-bottom: 1px solid var(--color-mist-gray);
}
.setting:last-child { border-bottom: 0; }
.setting-text { flex: 1; min-width: 0; }
.setting-name { font-size: 14px; font-weight: var(--font-weight-medium); margin: 0; }
.setting-why { font-size: var(--text-caption); color: var(--color-muted); margin: 2px 0 0; }
.setting-control { flex: none; display: flex; align-items: center; gap: var(--spacing-8); }
.setting-control input[type="number"], .setting-control input[type="text"] {
  width: 150px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  padding: var(--spacing-6) var(--spacing-10); outline: 0;
}
.setting-control input:focus { border-color: var(--color-mint-green); }

/* Switch: square, because the system commits to 4px and forbids pills. */
.switch { position: relative; display: inline-flex; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
  cursor: pointer; font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  padding: var(--spacing-6) var(--spacing-12); border-radius: var(--radius-buttons);
  border: 1px solid var(--color-cloud-gray); color: var(--color-muted);
  background: var(--color-paper-white); min-width: 56px; text-align: center;
}
.switch input:checked + span {
  color: var(--color-paper-white); background: var(--color-ink-black);
  border-color: var(--color-ink-black);
}
.switch input:focus-visible + span { outline: 2px solid var(--color-mint-green); outline-offset: 2px; }

/* --- radio group in the reference's boxed style ---------------------------- */
.choice-box {
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-tags);
  padding: var(--spacing-16); display: flex; flex-direction: column;
  gap: var(--spacing-12); margin-bottom: var(--spacing-24);
  background: var(--color-mist-gray);
}
.choice { display: flex; align-items: center; gap: var(--spacing-10); cursor: pointer; }
.choice input { accent-color: var(--color-mint-green); width: 16px; height: 16px; }
.choice-label { font-size: 15px; letter-spacing: -0.15px; }
.choice-label b { font-weight: var(--font-weight-semibold); }

select {
  font-family: inherit; font-size: 14px; color: var(--color-true-black);
  background: var(--color-paper-white); width: 100%;
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-12); outline: 0;
}
select:focus { border-color: var(--color-mint-green); }
.btn-block { width: 100%; justify-content: center; padding: var(--spacing-10) var(--spacing-16); }

/* --- the API documentation page -------------------------------------------- */
.endpoint {
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-cards);
  padding: var(--card-padding); margin-bottom: var(--spacing-16);
}
.endpoint-head { display: flex; align-items: center; gap: var(--spacing-10); flex-wrap: wrap; }
.method {
  font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.5px;
  padding: 2px var(--spacing-6); border-radius: var(--radius-tags);
  border: 1px solid var(--color-cloud-gray); color: var(--color-muted);
}
.method-post { color: var(--color-mint-green); border-color: var(--color-mint-green); }
.path {
  font-size: 14px; font-weight: var(--font-weight-medium);
  font-variant-ligatures: none;
}
.endpoint p { margin: var(--spacing-8) 0 0; color: var(--color-muted); font-size: 14px; }

pre {
  background: var(--color-ink-black); color: var(--color-paper-white);
  border-radius: var(--radius-tags); padding: var(--spacing-16);
  overflow-x: auto; font-size: 13px; line-height: 1.6; margin: var(--spacing-12) 0 0;
}
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
code.inline {
  background: var(--color-mist-gray); border-radius: 3px;
  padding: 1px 5px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.copy {
  margin-left: auto; font-size: var(--text-caption);
  background: transparent; border: 1px solid var(--color-cloud-gray);
  border-radius: var(--radius-tags); padding: 2px var(--spacing-8);
  cursor: pointer; font-family: inherit; color: var(--color-muted);
}
.copy:hover { border-color: var(--color-mint-green); color: var(--color-mint-green); }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .main { padding: var(--spacing-24) var(--spacing-16) var(--spacing-64); }
}
/* Hier stapelte die Seitenleiste sich frueher ueber den Inhalt. Das ist
   nicht mehr noetig und stand der ausklappbaren Fassung im Weg: die Regel kam
   spaeter in der Datei und hat deren Breite ueberschrieben, sodass die Leiste
   auf schmalen Schirmen den ganzen Bildschirm einnahm. */

/* --- own dropdown ----------------------------------------------------------
 *
 * Built rather than using a native select, because a native one cannot carry
 * a second line, a price column or a marker per row, and its panel is drawn
 * by the operating system in a style this design does not control.
 *
 * Square, bordered, mint only for the selected row and the focus ring, which
 * is exactly what the style guide reserves the accent for.
 */
.picker-field { position: relative; }
.picker-button {
  width: 100%; display: flex; align-items: center; gap: var(--spacing-8);
  font-family: inherit; font-size: 14px; letter-spacing: -0.14px;
  color: var(--color-true-black); background: var(--color-paper-white);
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-12); cursor: pointer; text-align: left;
}
.picker-button:hover { border-color: var(--color-mint-green); }
.picker-button[aria-expanded="true"] { border-color: var(--color-mint-green); }
.picker-button .chev { margin-left: auto; color: var(--color-muted); flex: none; }
.picker-button .price { color: var(--color-muted); font-size: var(--text-caption); }

.picker-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--color-paper-white);
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  box-shadow: var(--shadow-sm-2);
  max-height: 320px; overflow-y: auto; padding: var(--spacing-4);
}
.picker-panel[hidden] { display: none; }
.picker-heading {
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--color-muted); padding: var(--spacing-8) var(--spacing-8) var(--spacing-4);
  margin: 0;
}
.picker-option {
  width: 100%; display: flex; align-items: baseline; gap: var(--spacing-8);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; letter-spacing: -0.14px;
  color: var(--color-true-black);
  padding: var(--spacing-6) var(--spacing-8); border-radius: var(--radius-tags);
}
.picker-option:hover, .picker-option:focus-visible {
  background: var(--color-mist-gray); outline: 0;
}
.picker-option[aria-selected="true"] {
  background: var(--color-mint-wash); color: var(--color-mint-green);
  font-weight: var(--font-weight-medium);
}
.picker-star { color: var(--color-mint-green); flex: none; width: 12px; }
.picker-name { flex: 1; min-width: 0; }
.picker-sub {
  display: block; font-size: var(--text-caption); color: var(--color-muted);
  font-weight: var(--font-weight-regular); letter-spacing: 0;
}
.picker-option[aria-selected="true"] .picker-sub { color: var(--color-mint-green); opacity: .8; }
.picker-cost {
  flex: none; font-size: var(--text-caption); color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.picker-option[aria-selected="true"] .picker-cost { color: var(--color-mint-green); }

/* --- result rows -----------------------------------------------------------
 *
 * One shape for every result the service produces, whether it came from a
 * single search, a bulk run or the stored history. Three different layouts for
 * the same information was the thing that made the pages feel unrelated.
 */
/* The rows measure themselves against this box, not against the window.
 *
 * The four column layout needs room. Put the same list into a narrow side
 * panel on a wide screen and a viewport based rule keeps the wide layout,
 * whereupon minmax(0, …) lets the text columns shrink to nothing and the
 * domain simply disappears. Seen exactly that way: a list where every row
 * showed a status and no name at all.
 */
.rows { display: flex; flex-direction: column; gap: var(--spacing-6);
        container-type: inline-size; }
/* Every row uses the same grid template, so the columns line up down the
 * whole list instead of each row sizing itself. A flex row per line looked
 * fine on its own and ragged as a list, which is the thing being fixed here. */
.result-row {
  display: grid;
  grid-template-columns:
      minmax(0, 1.8fr)                 /* what was searched              */
      var(--col-status)                /* the verdict                    */
      minmax(0, 1.4fr)                 /* the address or the reason      */
      var(--col-actions);              /* the buttons                    */
  align-items: center; gap: var(--spacing-10);
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-tags);
  padding: var(--spacing-8) var(--spacing-12); background: var(--color-paper-white);
}
.result-row:hover { border-color: var(--color-cloud-gray); }
.result-what {
  min-width: 0; display: flex; align-items: baseline;
  gap: var(--spacing-8); overflow: hidden;
}
.result-name {
  font-weight: var(--font-weight-semibold); font-size: 14px;
  letter-spacing: -0.14px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 0 1 auto; flex-shrink: 1; min-width: 0;
}
.result-sub { font-size: var(--text-caption); color: var(--color-muted);
              letter-spacing: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; flex: 1 5 auto; min-width: 0; }
.result-status { justify-self: start; }
.result-value {
  min-width: 0; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-actions { display: flex; gap: var(--spacing-6); align-items: center;
                  justify-content: flex-end; }

/* Status carries meaning without a second colour: mint for something the
 * service stands behind, a dashed outline for a guess, muted for nothing. */
.badge {
  display: inline-block; text-align: center; min-width: 84px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium); letter-spacing: 0;
  padding: 3px var(--spacing-8); border-radius: var(--radius-tags);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-valid { color: var(--color-mint-green); background: var(--color-mint-wash);
               border-color: var(--color-mint-wash); }
.badge-risky { color: var(--color-ink-black); border-color: var(--color-ink-black);
               border-style: dashed; }
.badge-none { color: var(--color-muted); background: var(--color-mist-gray);
              border-color: var(--color-mist-gray); }
/* A real failure, as opposed to a normal "nothing found". Solid ink rather
 * than a second colour, and never the dashed outline: that one means "this
 * was guessed" everywhere else, and one style must not carry two meanings. */
/* Mirrors badge-valid exactly, in red instead of green: the two verdicts a
   person acts on should be told apart at a glance, without reading. */
.badge-alert { color: var(--color-signal-red); background: var(--color-signal-wash);
               border-color: var(--color-signal-wash); }

.icon-btn {
  border: 1px solid var(--color-cloud-gray); background: var(--color-paper-white);
  border-radius: var(--radius-tags); cursor: pointer; font-family: inherit;
  font-size: var(--text-caption); color: var(--color-muted);
  padding: 3px var(--spacing-8); line-height: 1.5;
}
.icon-btn:hover { border-color: var(--color-mint-green); color: var(--color-mint-green); }

.toolbar { display: flex; gap: var(--spacing-8); align-items: center;
           margin-bottom: var(--spacing-16); flex-wrap: wrap; }
.toolbar input[type="search"] {
  font-family: inherit; font-size: 14px; padding: var(--spacing-6) var(--spacing-12);
  border: 1px solid var(--color-cloud-gray); border-radius: var(--radius-inputs);
  outline: 0; min-width: 200px;
}
.toolbar input[type="search"]:focus { border-color: var(--color-mint-green); }
.spacer { margin-left: auto; }

.key-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--color-mist-gray); border-radius: 3px;
  padding: 3px var(--spacing-8); user-select: all; word-break: break-all;
}
.log-line {
  display: grid;
  grid-template-columns: 72px var(--col-status) minmax(0, 1fr) 140px 72px;
  gap: var(--spacing-12); align-items: center;
  font-size: 13px; padding: var(--spacing-8) 0;
  border-bottom: 1px solid var(--color-mist-gray);
}
.log-line .badge { min-width: 0; }
.log-line:last-child { border-bottom: 0; }
.log-time { color: var(--color-muted); font-variant-numeric: tabular-nums;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.log-ms { color: var(--color-muted); font-variant-numeric: tabular-nums;
          text-align: right; }

/* --- key rows --------------------------------------------------------------
 *
 * Not the compact result row: a key that is cut off with an ellipsis is a key
 * nobody can use, which was the whole complaint. Name and meta on top, the
 * secret on a line of its own across the full width, actions underneath.
 */
.key-row {
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-tags);
  padding: var(--spacing-16); background: var(--color-paper-white);
  display: flex; flex-direction: column; gap: var(--spacing-10);
}
.key-top { display: flex; align-items: center; gap: var(--spacing-10); flex-wrap: wrap; }
.key-title { font-weight: var(--font-weight-semibold); font-size: 15px;
             letter-spacing: -0.15px; }
.key-meta { font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0; }
.key-row .key-secret {
  display: block; width: 100%; padding: var(--spacing-10) var(--spacing-12);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
  border: 1px solid var(--color-cloud-gray); background: var(--color-mist-gray);
  border-radius: var(--radius-inputs);
}
.key-row.is-revoked .key-secret { opacity: .5; text-decoration: line-through; }
.key-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }

.setting {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--col-control);
  align-items: center; gap: var(--spacing-16);
  padding: var(--spacing-16) 0; border-bottom: 1px solid var(--color-mist-gray);
}
/* The switch and the input end at the same right edge, whatever they are. */
.setting > .btn, .setting > .control { justify-self: end; width: 100%; }
.setting > .btn { width: auto; min-width: 72px; justify-content: center; }
.setting:last-of-type { border-bottom: 0; }
.setting-name { margin: 0 0 var(--spacing-4); font-size: 15px;
                font-weight: var(--font-weight-medium); letter-spacing: -0.15px; }
.setting-why { margin: 0; font-size: var(--text-caption); color: var(--color-muted);
               letter-spacing: 0; max-width: 62ch; }

/* A settings row whose control needs the whole width, such as the model
 * picker, steps out of the two column grid rather than being squeezed. */
.setting-wide { display: block; }
.setting-wide .picker-field { max-width: 520px; }

/* Equal cards, whatever the number inside them is. */
.grid-3 > .card, .grid-2 > .card { display: flex; flex-direction: column;
                                   justify-content: center; min-height: 116px; }

/* Narrow screens: the columns stack rather than being crushed. Below this the
 * verdict and the buttons no longer fit beside the text, and a row squeezed
 * to nothing is worse than a taller one. */
/* Below this the four columns no longer fit beside each other, so they stack.
 * Measured against the list's own box, which is what makes it right in a side
 * panel and in a full width page alike. */
/* Wird es eng, verschwindet die Einordnung ganz, statt auf ein Zeichen und
 * drei Punkte zusammenzuschrumpfen. "2…" statt eines Datums sagt weniger als
 * gar nichts und kostet trotzdem Platz. */
@container (max-width: 720px) {
  .result-sub, .group-when { display: none; }
}

@container (max-width: 520px) {
  .result-row, .group-head {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--spacing-8);
  }
  .group-head { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .result-status { justify-self: end; }
  .result-value { grid-column: 1 / -1; }
  .result-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .group-head .result-value, .group-head .result-actions { grid-column: 2 / -1; }
}

@media (max-width: 860px) {
  .log-line { grid-template-columns: 64px auto minmax(0, 1fr); }
  .log-line .log-time:last-of-type, .log-line .log-ms { display: none; }
  .setting { grid-template-columns: minmax(0, 1fr) auto; }
  .setting > .control { width: 160px; }
}

/* Form rows keep a readable measure instead of stretching to the full card.
 * An input a thousand pixels wide for a short value looks like a mistake, and
 * it breaks the rhythm the rest of the page holds. */
.card > form.row, .card > .row > .control { max-width: 100%; }
.card > form.row { max-width: 720px; }
.card > form.row .control { max-width: 420px; }

/* The toolbar keeps its two groups apart at any width. */
.toolbar { align-items: center; }
.toolbar .spacer { flex: 1 1 auto; }

/* Cards on a page follow one rhythm rather than each carrying its own inline
 * margin. */
.page > .card + .card { margin-top: var(--spacing-24); }

/* --- a batch run, folded ---------------------------------------------------
 *
 * A run of fifty domains as fifty loose rows buries everything else that was
 * searched. Folded it is one line; opened it shows its own list, indented so
 * the eye can see where the run begins and ends.
 */
.group { border: 1px solid var(--color-mist-gray); border-radius: var(--radius-tags);
         background: var(--color-paper-white); overflow: hidden; }
.group-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.8fr) var(--col-status)
                         minmax(0, 1.4fr) var(--col-actions);
  align-items: center; gap: var(--spacing-10);
  padding: var(--spacing-8) var(--spacing-12);
  width: 100%; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--color-true-black);
}
.group-head:hover { background: var(--color-mist-gray); }
.group-mark { color: var(--color-muted); transition: transform .12s ease;
              justify-self: center; }
.group[open] .group-mark { transform: rotate(90deg); }
.group-title { min-width: 0; display: flex; align-items: baseline;
               gap: var(--spacing-8); overflow: hidden; }
.group-name { font-weight: var(--font-weight-semibold); font-size: 14px;
              letter-spacing: -0.14px; white-space: nowrap; flex: 0 1 auto;
              overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.group-when { font-size: var(--text-caption); color: var(--color-muted);
              letter-spacing: 0; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; min-width: 0; flex: 1 5 auto; }
.group-body { border-top: 1px solid var(--color-mist-gray);
              padding: var(--spacing-8); display: flex; flex-direction: column;
              gap: var(--spacing-6); background: var(--color-mist-gray); }
.group-body .result-row { border-color: var(--color-cloud-gray); }
.group-body[hidden] { display: none; }

@media (max-width: 860px) {
  .group-head { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .group-head .result-value, .group-head .result-actions { grid-column: 2 / -1; }
}

/* --- the sign in gate ------------------------------------------------------
 *
 * Covers everything until somebody is signed in. Rendering the application
 * first and the sign in second would flash data that does not belong to the
 * person looking at the screen.
 */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-paper-white);
  display: grid; place-items: center; padding: var(--spacing-24);
  overflow-y: auto;
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 380px;
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-largecontainers);
  padding: var(--spacing-32); box-shadow: var(--shadow-sm-2);
}
.gate-card h1 {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold);
}
.gate-or { display: flex; align-items: center; gap: var(--spacing-12);
           color: var(--color-muted); font-size: var(--text-caption); }
.gate-or::before, .gate-or::after {
  content: ""; flex: 1; height: 1px; background: var(--color-mist-gray);
}
#app[hidden] { display: none; }

/* --- the person, at the foot of the sidebar --------------------------------
 *
 * A chip that opens its menu upward, because there is nothing below it to
 * open into. Sitting at the bottom keeps the account out of the way of the
 * work, which is what the rest of the sidebar is for.
 */
.whoami { margin-top: auto; padding-top: var(--spacing-16); position: relative; }

.whoami-chip {
  width: 100%; display: flex; align-items: center; gap: var(--spacing-10);
  background: var(--color-mist-gray); border: 1px solid transparent;
  border-radius: var(--radius-tags); padding: var(--spacing-8) var(--spacing-10);
  cursor: pointer; font-family: inherit; text-align: left;
  color: var(--color-true-black);
}
.whoami-chip:hover { border-color: var(--color-cloud-gray); }
.whoami-chip[aria-expanded="true"] { border-color: var(--color-cloud-gray); }
.whoami-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  background: var(--color-mint-green); color: var(--color-paper-white);
  display: grid; place-items: center;
  font-size: 12px; font-weight: var(--font-weight-semibold);
}
.whoami-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.whoami-name { font-size: 14px; font-weight: var(--font-weight-medium);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami-role { font-size: var(--text-caption); color: var(--color-muted);
               letter-spacing: 0; }
.whoami-chev { color: var(--color-muted); font-size: 12px; flex: none;
               transition: transform .12s ease; }
.whoami-chip[aria-expanded="true"] .whoami-chev { transform: rotate(180deg); }

.whoami-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--color-paper-white);
  border: 1px solid var(--color-mist-gray); border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm-2); padding: var(--spacing-6);
}
.whoami-menu[hidden] { display: none; }
.whoami-entry {
  width: 100%; display: flex; align-items: center; gap: var(--spacing-10);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; letter-spacing: -0.15px;
  color: var(--color-true-black);
  padding: var(--spacing-8) var(--spacing-10); border-radius: var(--radius-tags);
}
.whoami-entry:hover { background: var(--color-mist-gray); }
.whoami-entry svg { color: var(--color-muted); flex: none; }

/* --- settings, with its own row of sections -------------------------------- */
.subnav { display: flex; gap: var(--spacing-4); flex-wrap: wrap;
          border-bottom: 1px solid var(--color-mist-gray);
          margin-bottom: var(--spacing-24); }
.subnav-item {
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: var(--font-weight-medium); letter-spacing: -0.15px;
  color: var(--color-muted); padding: var(--spacing-10) var(--spacing-12);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav-item:hover { color: var(--color-true-black); }
.subnav-item[aria-current="page"] {
  color: var(--color-mint-green); border-bottom-color: var(--color-mint-green);
}
.settings-part[hidden] { display: none; }
.settings-part > .card + .card { margin-top: var(--spacing-24); }

.card-title { margin: 0 0 var(--spacing-4); font-size: var(--text-subheading);
              line-height: var(--leading-subheading);
              letter-spacing: var(--tracking-subheading);
              font-weight: var(--font-weight-semibold); }
.card-lede { margin: 0 0 var(--spacing-16); color: var(--color-muted);
             font-size: 14px; max-width: 72ch; }

/* A button that reads as a link, for a hint that leads somewhere. Mint,
 * because the style guide reserves the accent for exactly this. */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-mint-green); text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { text-decoration-thickness: 2px; }

/* --- Sprache ---------------------------------------------------------------
 *
 * Zwei Knoepfe statt eines Auswahlfelds: bei genau zwei Moeglichkeiten ist ein
 * Klapplistchen ein Klick zu viel, und man sieht die Wahl nicht, ohne es zu
 * oeffnen. Steht in den Einstellungen unter "Konto" - die Sprache ist eine
 * Vorliebe der Person, und die Seitenleiste ist fuer Wege da, nicht fuer
 * Schalter. */
.langswitch {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--color-mist-gray); border-radius: var(--radius-tags);
}
.langswitch button {
  padding: var(--spacing-6) var(--spacing-16); border: 0;
  border-radius: calc(var(--radius-tags) - 2px);
  background: transparent; color: var(--color-muted);
  font: inherit; font-size: 14px; font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.langswitch button:hover { color: var(--color-true-black); }
.langswitch button[aria-pressed="true"] {
  background: var(--color-paper-white); color: var(--color-true-black);
  box-shadow: var(--shadow-sm-2);
}

/* --- die engere Suchspalte -------------------------------------------------
 *
 * Das Vorbild traegt die Ueberschrift in der Spalte statt ueber beiden. Das
 * spart eine Bildschirmhoehe, und auf einem Notebook steht damit das
 * Eingabefeld ueber der Falz statt darunter. */
.card-heading {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-subheading); font-weight: var(--font-weight-semibold);
  letter-spacing: -0.3px; color: var(--color-ink-black);
}
.card-eng { padding: var(--spacing-20); }
.card-eng .choice-box {
  padding: var(--spacing-12); gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}
.card-eng .choice-label { font-size: 14px; }
.card-eng .note { margin-top: var(--spacing-16); }
.split-eng { gap: var(--spacing-24); }

/* --- die Beschreibung der Schnittstelle -------------------------------------
 *
 * Links die Wege, rechts einer davon ausfuehrlich. Eine einzige lange Seite mit
 * sechzehn Endpunkten untereinander zwingt zum Scrollen und Suchen; wer eine
 * Schnittstelle anbindet, arbeitet an genau einem Weg und will den ganz sehen. */
.doc {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--spacing-32); align-items: start;
}
.doc-nav {
  position: sticky; top: var(--spacing-24);
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--color-mist-gray); padding-right: var(--spacing-16);
}
.doc-nav-title {
  margin: var(--spacing-16) 0 var(--spacing-4);
  font-size: 11px; font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
}
.doc-nav-title:first-child { margin-top: 0; }
.doc-nav-item {
  text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--color-muted);
  padding: var(--spacing-6) var(--spacing-8); border-radius: var(--radius-tags);
}
.doc-nav-item:hover { background: var(--color-mist-gray); color: var(--color-true-black); }
.doc-nav-item[aria-current="page"] {
  background: var(--color-mist-gray); color: var(--color-true-black);
  font-weight: var(--font-weight-medium);
}
.doc-crumb {
  margin: 0 0 var(--spacing-8); font-size: 13px; color: var(--color-muted);
}
.doc-title {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading); font-weight: var(--font-weight-semibold);
  color: var(--color-ink-black);
}
.doc-lede { margin: 0 0 var(--spacing-32); color: var(--color-muted); max-width: 68ch; }
.doc-part { margin-bottom: var(--spacing-32); }
.doc-part h3 {
  margin: 0 0 var(--spacing-12); font-size: 17px;
  font-weight: var(--font-weight-semibold); color: var(--color-ink-black);
  padding-bottom: var(--spacing-8); border-bottom: 1px solid var(--color-mist-gray);
}
.doc-part p { margin: 0 0 var(--spacing-12); color: var(--color-muted); max-width: 68ch; }
.doc-endpoint {
  display: flex; align-items: center; gap: var(--spacing-10);
  background: var(--color-mist-gray); border-radius: var(--radius-tags);
  padding: var(--spacing-10) var(--spacing-12); overflow-x: auto;
}
.doc-url { font-size: 13px; white-space: nowrap; flex: 1; }
.doc-list { margin: 0; padding-left: var(--spacing-20); color: var(--color-muted); }
.doc-list li { margin-bottom: var(--spacing-6); max-width: 66ch; }

@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-nav {
    position: static; border-right: 0; padding-right: 0;
    border-bottom: 1px solid var(--color-mist-gray); padding-bottom: var(--spacing-12);
  }
}

/* --- ein Stapellauf auf eigener Seite ---------------------------------------
 *
 * Zuerst die Bilanz, dann die Herkunft, dann die Angaben, zuletzt die Zeilen.
 * In dieser Reihenfolge, weil die erste Frage nach einem Lauf ueber
 * zweihundert Zeilen nicht "welche" lautet, sondern "wie viele". */
.run-back {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--color-muted); padding: 0;
  margin-bottom: var(--spacing-12);
}
.run-back:hover { color: var(--color-true-black); }
.run-head { margin-bottom: var(--spacing-24); }
.run-head .doc-title { margin-bottom: var(--spacing-4); }
.run-when { margin: 0; color: var(--color-muted); font-size: 14px; }

.run-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16); margin-bottom: var(--spacing-16);
}
@media (max-width: 860px) { .run-split { grid-template-columns: minmax(0, 1fr); } }

.run-big {
  margin: 0; font-size: 26px; font-weight: var(--font-weight-semibold);
  letter-spacing: -0.5px; color: var(--color-ink-black);
}
.run-lede { margin: 2px 0 var(--spacing-16); color: var(--color-muted); font-size: 14px; }

/* Ein Balken statt dreier Zahlen: das Verhaeltnis ist die Aussage, und ein
 * Verhaeltnis sieht man schneller, als man drei Prozentzahlen liest. */
.run-bar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--color-mist-gray); margin-bottom: var(--spacing-12);
}
.run-bar-part { display: block; height: 100%; }
.run-bar-gut { background: var(--color-mint-green); }
.run-bar-mittel { background: #d9a400; }
.run-bar-leer { background: var(--color-cloud-gray); }

.run-legend {
  display: flex; align-items: center; gap: var(--spacing-8);
  font-size: 14px; padding: 3px 0;
}
.run-legend b { font-weight: var(--font-weight-semibold); }
.run-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.run-share { margin-left: auto; color: var(--color-muted); }

.run-fact {
  display: flex; align-items: baseline; gap: var(--spacing-12);
  padding: var(--spacing-6) 0; font-size: 14px;
}
.run-fact + .run-fact { border-top: 1px solid var(--color-mist-gray); }
.run-fact-name { color: var(--color-muted); flex: 0 0 auto; min-width: 160px; }
.run-fact-value { font-weight: var(--font-weight-medium); min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; }

/* --- Seitenzahlen -----------------------------------------------------------
 *
 * Unter der Liste, nicht darueber: man blaettert, nachdem man gelesen hat. */
.pager {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-top: var(--spacing-12);
}
.pager:empty { display: none; }
.pager-item {
  min-width: 30px; height: 30px; padding: 0 var(--spacing-6);
  border: 1px solid transparent; border-radius: var(--radius-tags);
  background: transparent; color: var(--color-muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.pager-item:hover:not(:disabled) {
  border-color: var(--color-mist-gray); color: var(--color-true-black);
}
.pager-item.is-on {
  background: var(--color-mist-gray); color: var(--color-true-black);
  font-weight: var(--font-weight-medium);
}
.pager-item:disabled { opacity: 0.35; cursor: default; }
.pager-gap { color: var(--color-muted); padding: 0 var(--spacing-4); font-size: 13px; }

/* Das Werkzeug ueber der Liste: Ueberschrift links, alles andere rechts, und
 * auf schmalen Schirmen darunter statt gequetscht daneben. */
.hist-tools {
  align-items: center; gap: var(--spacing-6); flex-wrap: wrap;
  margin-bottom: var(--spacing-12);
}
/* Die Ueberschrift nimmt den Platz, den sie braucht, und draengt das Werkzeug
 * nach rechts. Ohne min-width bricht "Zuletzt gesucht" mitten im Wort um,
 * sobald die Knoepfe daneben eng werden. */
.hist-tools .card-heading { flex: 1 1 auto; min-width: 140px; margin: 0; }
.hist-tools input[type="search"] { max-width: 180px; }
/* Wird es eng, liegt das Werkzeug unter der Ueberschrift statt daneben. Ein
 * Fenstermass und keine Container-Abfrage: die Werkzeugleiste sitzt neben der
 * Liste, nicht darin, und haette damit keinen Container zum Messen. */
@media (max-width: 1100px) {
  .hist-tools .card-heading { flex: 1 0 100%; margin-bottom: var(--spacing-8); }
}

/* --- Schluessel und Einstellungen -------------------------------------------
 *
 * Eine Zeile je Anbieter: Name, Stand, Feld, Knopf. Der Schluessel selbst wird
 * nie angezeigt, auch nicht gekuerzt - ein halber Schluessel in einem
 * Bildschirmfoto ist immer noch ein halber. */
.keyrow {
  display: grid;
  grid-template-columns: 110px 84px minmax(0, 1fr) auto;
  align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) 0;
}
.keyrow + .keyrow { border-top: 1px solid var(--color-mist-gray); }
.keyrow-name { font-weight: var(--font-weight-medium); font-size: 14px; }
.keyrow-state { font-size: var(--text-caption); }
.keyrow-state.is-set { color: var(--color-mint-green); }
.keyrow-state.is-empty { color: var(--color-muted); }
.keyrow select { width: auto; }
@media (max-width: 700px) {
  .keyrow { grid-template-columns: minmax(0, 1fr) auto; }
  .keyrow input { grid-column: 1 / -1; }
}

/* Was zu einer Stufe gehoert, rueckt unter sie ein - sichtbar untergeordnet,
 * statt in derselben Reihe zu stehen wie die Stufe selbst. */
.setting-sub {
  margin-left: var(--spacing-16);
  border-left: 2px solid var(--color-mist-gray);
  padding-left: var(--spacing-16);
}
.setting-more {
  font-size: var(--text-caption); background: none; border: 0; padding: 0;
  color: var(--color-mint-green); cursor: pointer; font-family: inherit;
}
details.card > summary {
  cursor: pointer; list-style: none; margin: 0;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: " ▾"; color: var(--color-muted); }
details.card[open] > summary::after { content: " ▴"; }

/* Die Erklaerung steht ganz da, gezeigt wird eine Zeile. Gekuerzt wird im
 * Bild, nicht im Text: ein zerschnittener Satz waere zwei Knoten, und die
 * Sprachumschaltung schlaegt je Knoten nach. */
.setting-why.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}