/* LinkEffekt — support site
   Dark studio look: the page speaks the plugin's own status language.
   Green = connected, orange = waiting, grey = idle. Never decorative. */

:root {
  --bg: #0f1214;
  --panel: #161b1e;
  --panel-2: #1c2226;
  --line: #262d31;
  --text: #e9ecee;
  --muted: #98a2a9;
  --faint: #6b757c;
  --ok: #30d158;
  --ok-text: #30d158;   /* green for small words (labels), darker on light pages for contrast */
  --ok-display: #30d158; /* green for large words (the headline), the store green */
  --wait: #ff9f0a;
  --prose: #c9cfd4;
  --bar-bg: rgba(15, 18, 20, .94);
  --btn-hover: #fff;
  color-scheme: dark;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", var(--sans);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ok); }
a:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; border-radius: 2px; }

/* ---------- header ---------- */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 0 1.2rem;
}
.site-head img.logo { height: 22px; width: auto; display: block; opacity: .92; }
.site-head a.logo-link { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .95rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }

/* ---------- status vocabulary (shared with the plugin UI) ---------- */

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok { background: var(--ok); }
.dot.wait { background: var(--wait); }

/* the green half of a headline, as on the store pictures */
.hl { color: var(--ok-display); }

/* the two sync cases, green and orange, as on the store pictures */
.sync-facts {
  margin-top: 1.4rem; display: grid; gap: .5rem;
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sync-facts div { display: flex; align-items: center; gap: .65rem; }

.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .32rem .75rem;
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero { padding: 3.8rem 0 3.5rem; }
.hero > .badge { margin-bottom: 1.3rem; }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 21ch;
}
.hero .sub {
  margin-top: 1.3rem;
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 46ch;
}
.hero-ctas { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  padding: .72rem 1.35rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { background: var(--btn-hover); }
.btn:hover { border-color: var(--faint); }

/* ---------- App Store badge (Apple artwork, unmodified) ----------
   Black on light pages, the white alternative on dark ones. Clear space of a
   quarter of its height comes from the gap in .hero-ctas. */

.store-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.store-badge img { height: 52px; width: auto; display: block; }
.store-badge:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; }
.store-badge .on-light { display: none; }
html[data-theme="light"] .store-badge .on-light { display: block; }
html[data-theme="light"] .store-badge .on-dark { display: none; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .store-badge .on-light { display: block; }
  html:not([data-theme="dark"]) .store-badge .on-dark { display: none; }
}

/* ---------- devices (signature) ----------
   Apple's product bezels, used as they are: true to scale, side by side,
   nothing overlapping, no shadows. The wire between them carries the pulse. */

.devices {
  margin: 3.2rem 0 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  /* wider than the text column, centred on it */
  width: min(calc(100vw - 2.5rem), 72rem);
  position: relative; left: 50%; transform: translateX(-50%);
}
.device { margin: 0; }
.device img { display: block; width: 100%; height: auto; }
.device.phone { width: 19.5%; }
.device.tablet { width: 66%; }
.device figcaption {
  margin-top: .9rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
.device-wire {
  position: relative; align-self: center; flex: 1;
  height: 2px; margin: 0 clamp(1rem, 2.5vw, 2rem); background: var(--line); border-radius: 1px;
}
.device-wire span {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
.device-wire::after {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 40%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ok));
  animation: pulse 2.6s linear infinite;
}
/* the pulse stays on the wire: it must not run into a device */
@keyframes pulse {
  0%   { left: 0; opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 60%; opacity: 0; }
}
@keyframes pulse-down {
  0%   { top: 0; opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 50%; opacity: 0; }
}

/* phones: badge and manual button stay on one line, at the same height */
@media (max-width: 480px) {
  .store-badge img { height: 48px; }
  .hero-ctas .btn { padding: .6rem 1.1rem; }
}

/* phones: one above the other; Apple wants a device at least 200 px tall */
@media (max-width: 640px) {
  .devices {
    flex-direction: column; align-items: center; margin-top: 2.8rem;
    width: auto; left: 0; transform: none;
  }
  .device.phone { width: 128px; }
  .device.tablet { width: 100%; }
  .device-wire {
    flex: none; align-self: center;
    width: 2px; height: 56px; margin: 1.6rem 0;
  }
  .device-wire span { left: .9rem; bottom: auto; top: 50%; transform: translateY(-50%); }
  .device-wire::after {
    top: 0; left: -2px; width: 6px; height: 50%;
    background: linear-gradient(180deg, transparent, var(--ok));
    animation-name: pulse-down;
  }
}

/* ---------- sections ---------- */

section { padding: 3.2rem 0 0; }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ok-text);
  margin-bottom: .9rem;
}
h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
section p.lead { color: var(--muted); max-width: 52ch; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.6rem; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1.25rem 1.25rem;
}
.card .kind { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.card h3 { font-size: 1.06rem; font-weight: 650; margin: .55rem 0 .45rem; }
.card p { font-size: .93rem; color: var(--muted); line-height: 1.55; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.6rem; }
.split .card h3 { display: flex; align-items: center; gap: .55rem; margin-top: 0; }
.split .card ul { list-style: none; margin-top: .8rem; }
.split .card li {
  font-size: .93rem; color: var(--muted);
  padding: .34rem 0 .34rem 1.15rem; position: relative;
}
.split .card li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--faint);
}

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.6rem; }

/* ---------- footer ---------- */

footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  color: var(--muted); font-size: .92rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
footer a { color: var(--muted); }

/* ---------- manual / prose pages ---------- */

.prose { padding-bottom: 2rem; }
.prose header.page-head { padding: 3rem 0 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.4rem; }
.prose h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -0.02em;
}
.prose .pagemeta { margin-top: .7rem; color: var(--faint); font-size: .92rem; }

.toc {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.2rem 1.4rem; margin-bottom: 2.6rem;
  columns: 2; column-gap: 2rem;
}
.toc a { display: block; padding: .22rem 0; font-size: .95rem; color: var(--muted); text-decoration: none; break-inside: avoid; }
.toc a:hover { color: var(--text); }
.toc .num { font-family: var(--mono); font-size: .78rem; color: var(--faint); margin-right: .55rem; }

.prose h2 {
  margin: 3rem 0 1rem; padding-top: 2.2rem; border-top: 1px solid var(--line);
  font-size: 1.5rem;
}
.prose h3 { font-size: 1.08rem; font-weight: 650; margin: 1.8rem 0 .6rem; }
.prose p { margin: .8rem 0; color: var(--prose); }
.prose ul, .prose ol { margin: .8rem 0 .8rem 1.3rem; color: var(--prose); }
.prose li { margin: .35rem 0; }
.prose strong { color: var(--text); }
.prose code {
  font-family: var(--mono); font-size: .85em;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .08em .35em;
}

.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.prose td { color: var(--prose); }

/* diagnostics quoted from the plugin — shown exactly as the app renders them */
.diag {
  display: flex; gap: .6rem; align-items: baseline;
  font-family: var(--mono); font-size: .85rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: .6rem .8rem; margin: .5rem 0;
  color: var(--muted);
}
.diag .dot { transform: translateY(-1px); }
.diag em { font-style: normal; color: var(--text); }

.note {
  border-left: 3px solid var(--wait);
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  padding: .8rem 1rem; margin: 1.2rem 0;
  font-size: .95rem; color: var(--muted);
}

.backlink { font-family: var(--mono); font-size: .8rem; text-decoration: none; color: var(--faint); letter-spacing: .06em; }
.backlink:hover { color: var(--text); }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .split, .plans { grid-template-columns: 1fr; }
  .toc { columns: 1; }
  .hero { padding-top: 3rem; }
}

/* ---------- manual: layout with a running table of contents ----------
   Desktop: sticky sidebar next to the text, the current chapter marked and
   its sections unfolded. Below 1080px: a slim bar pinned to the top that
   names the current chapter and opens the list. The inline .toc box stays
   for phones and for browsers without JavaScript. */

.wrap.wide { max-width: 72rem; }

.manual-layout { display: block; }
.side-toc { display: none; }

.prose h2, .prose h3, .wf { scroll-margin-top: 4.6rem; }

@media (min-width: 1080px) {
  .manual-layout {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 46rem);
    gap: 3.5rem;
    justify-content: center;
    align-items: start;
  }
  .manual-layout .prose { max-width: none; }
  .side-toc {
    display: block;
    position: sticky; top: 1.6rem;
    max-height: calc(100vh - 3.2rem); overflow-y: auto;
    padding: 2.9rem 0 2rem;
    scrollbar-width: thin;
  }
  .prose h2, .prose h3, .wf { scroll-margin-top: 1.6rem; }
  .manual .toc { display: none; }
}

.side-toc .side-title {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  margin-bottom: .8rem;
}
.side-toc a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem 0 .3rem .8rem;
  border-left: 2px solid var(--line);
  font-size: .9rem; line-height: 1.35; color: var(--muted); text-decoration: none;
}
.side-toc a:hover { color: var(--text); }
.side-toc a .num { font-family: var(--mono); font-size: .74rem; color: var(--faint); min-width: 1.1rem; }
.side-toc a.active { color: var(--text); border-left-color: var(--text); }
.side-toc a.active .num { color: var(--text); }
.side-toc .sub { display: none; }
.side-toc .sub.open { display: block; }
.side-toc .sub a { padding-left: 2.45rem; font-size: .84rem; }
.side-toc .sub a.active { border-left-color: var(--muted); }

/* pinned bar for narrow screens (built from the sidebar by JavaScript) */
.toc-bar { display: none; }
.js .toc-bar {
  display: block;
  position: sticky; top: 0; z-index: 30;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1080px) { .js .toc-bar { display: none; } }
.toc-bar button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: .7rem 1.25rem;
  font-size: .92rem; color: var(--text);
}
.toc-bar button:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; }
.toc-bar .cur-num { font-family: var(--mono); font-size: .76rem; color: var(--faint); }
.toc-bar .cur-num:empty { display: none; }
.toc-bar .cur-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-bar .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; flex: none; }
.toc-bar.open .chev { transform: rotate(180deg); }
.toc-bar .bar-list {
  display: none;
  max-width: 72rem; margin: 0 auto; padding: .2rem 1.25rem 1rem;
  max-height: 70vh; overflow-y: auto;
}
.toc-bar.open .bar-list { display: block; }
.toc-bar .bar-list a {
  display: flex; gap: .6rem; padding: .45rem 0;
  color: var(--muted); text-decoration: none; font-size: .95rem;
  border-top: 1px solid var(--line);
}
.toc-bar .bar-list a.active { color: var(--text); }
.toc-bar .bar-list .num { font-family: var(--mono); font-size: .78rem; color: var(--faint); min-width: 1.4rem; }

/* ---------- manual: workflow cards ---------- */

.wf-index { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.4rem 0 .4rem; }
.wf-tile {
  display: block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem 1rem .9rem;
}
.wf-tile:hover { border-color: var(--faint); }
.wf-tile .wf-route { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--faint); }
.wf-tile .wf-name { display: block; margin-top: .3rem; font-weight: 650; font-size: .98rem; line-height: 1.35; color: var(--text); }

.wf {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem 1.4rem; margin: 1.6rem 0 0;
}
.prose .wf h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.01em; }
.prose .wf .wf-lead { margin: .45rem 0 0; color: var(--muted); }

.route {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: .7rem; row-gap: .15rem;
  margin: 1.2rem 0 1.3rem;
}
.route-node, .route-wire { grid-row: 2; }
.route-node {
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .38rem .6rem; line-height: 1.35;
  max-width: 11rem;
}
.route-wire { position: relative; height: 2px; background: var(--line); min-width: 3.5rem; }
.route-wire::after, .route-wire.both::before {
  content: ""; position: absolute; top: -4px;
  border: 5px solid transparent;
}
.route-wire::after { right: -2px; border-left: 7px solid var(--ok); border-right-width: 0; }
.route-wire.both::before { left: -2px; border-right: 7px solid var(--ok); border-left-width: 0; }
.route-label {
  grid-row: 1; grid-column: 2; justify-self: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--faint);
  white-space: nowrap;
}

.prose ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* Karte ohne Strecken-Zeile (Couch): Schritte so weit von der Einleitung wie sonst die Strecke */
.prose .wf .wf-lead + ol.steps { margin-top: 1.2rem; }
.prose ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 0 2.2rem; margin: 0 0 .65rem;
}
.prose ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: .12em;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1px solid var(--faint);
  font-family: var(--mono); font-size: .74rem; line-height: calc(1.45rem - 2px); text-align: center;
  color: var(--muted);
}
.prose ol.steps > li:last-child { margin-bottom: 0; }
.prose .wf .need { margin: 0 0 .9rem; font-size: .95rem; }

.gtk {
  border-top: 1px solid var(--line);
  margin-top: 1.4rem; padding-top: 1.1rem;
}
.gtk-title {
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.prose .gtk p.gtk-title { margin: 0 0 .5rem; color: var(--faint); }
.prose .gtk ul { margin: 0 0 0 1.1rem; font-size: .95rem; }
.prose .gtk p { margin: 0; font-size: .95rem; }

/* ---------- manual: screenshots with numbered markers ---------- */

.shot { margin: 1.5rem 0 0; }
.shot-imgs { display: flex; gap: .9rem; justify-content: center; align-items: flex-start; }
.shot-imgs img {
  display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: #000;
}
.shot figcaption { margin-top: .9rem; }
.callouts { list-style: none; display: grid; gap: .45rem; }
.prose ul.callouts { margin: 0; }
.prose .callouts li { margin: 0; display: flex; gap: .6rem; align-items: baseline; font-size: .93rem; color: var(--prose); }
.callouts.compact { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
.cn {
  flex: none; display: inline-block;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #fff; color: #15191c;
  font-family: var(--sans); font-weight: 700; font-size: .74rem; line-height: 1.3rem; text-align: center;
  transform: translateY(-1px);
}
.prose p.shot-note { margin: .7rem 0 0; font-size: .9rem; color: var(--muted); }

/* status vocabulary as a table */
.prose table.status-table td:first-child { white-space: nowrap; }
.status-table .st { display: inline-flex; gap: .5rem; align-items: baseline; font-family: var(--mono); font-size: .82rem; color: var(--text); }
.status-table .st .dot { transform: translateY(-1px); }

/* host table (Hosts chapter): app or goal in the first column */
.prose table.host-table td:first-child { white-space: nowrap; color: var(--text); }

/* labelled sub-points inside a reference entry (Live Mode, Buffer, Cubasis) */
.prose .lbl { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
  .shot-imgs { flex-wrap: wrap; }
  /* status table: status line on top, its meaning right below */
  .prose .status-table, .status-table tbody, .status-table tr, .prose .status-table td { display: block; }
  .status-table tr:first-child { display: none; }
  .status-table tr { padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .prose .status-table td { padding: 0; border: 0; }
  .prose table.status-table td:first-child { white-space: normal; }
  .status-table .st { display: flex; }
  .prose .status-table td + td { margin-top: .2rem; }
  /* host table: the app on top, each answer below with its column name */
  .prose .host-table, .host-table tbody, .host-table tr, .prose .host-table td { display: block; }
  .host-table tr:first-child { display: none; }
  .host-table tr { padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .prose .host-table td { padding: 0; border: 0; }
  .prose table.host-table td:first-child { white-space: normal; }
  .prose .host-table td + td { margin-top: .25rem; }
  .host-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
}

@media (max-width: 760px) {
  .wf-index { grid-template-columns: 1fr; }
  .wf { padding: 1.25rem 1.05rem 1.15rem; margin-left: -.35rem; margin-right: -.35rem; }
  .callouts.compact { grid-template-columns: 1fr; }
  .route-node { max-width: 8.5rem; font-size: .7rem; }
  .route-label { grid-column: 1 / -1; }
}

/* workflow groups: a label in the overview and above every card */
.wf-index .wf-group {
  grid-column: 1 / -1; margin: .9rem 0 -.1rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.wf-index .wf-group:first-child { margin-top: 0; }
.prose .wf .wf-kind {
  margin: 0 0 .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- light mode ----------
   Every page follows the system setting until the reader picks one with the
   switch in the header; the choice is kept in localStorage and shared by all
   pages. Screenshots keep their dark frame, they show the dark plugin. */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f8; --panel: #ffffff; --panel-2: #eef1f3; --line: #dde2e6;
  --text: #15191c; --prose: #353e45; --muted: #57626a; --faint: #6f7a82;
  --ok: #1e9a46; --ok-text: #14823a; --ok-display: #24a343; --wait: #c46a00;
  --bar-bg: rgba(246, 247, 248, .94); --btn-hover: #000;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f7f8; --panel: #ffffff; --panel-2: #eef1f3; --line: #dde2e6;
    --text: #15191c; --prose: #353e45; --muted: #57626a; --faint: #6f7a82;
    --ok: #1e9a46; --ok-text: #14823a; --ok-display: #24a343; --wait: #c46a00;
    --bar-bg: rgba(246, 247, 248, .94); --btn-hover: #000;
  }
}
/* the numbered markers in the screenshots are white with a dark ring */
html[data-theme="light"] .cn { box-shadow: inset 0 0 0 1.5px #15191c; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .cn { box-shadow: inset 0 0 0 1.5px #15191c; }
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--faint); }
.theme-toggle:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .theme-toggle .ico-sun { display: none; }
  html:not([data-theme="dark"]) .theme-toggle .ico-moon { display: block; }
}
/* phones: one link gives way to the switch (Home: the logo leads there;
   Privacy on the home page: it is in the footer) */
@media (max-width: 480px) {
  .site-nav .nav-secondary { display: none; }
}
/* the smallest phones (320 px): logo and links move closer so nothing scrolls sideways */
@media (max-width: 360px) {
  .site-head img.logo { height: 18px; }
  .site-nav { gap: .9rem; font-size: .9rem; }
}

/* ---------- manual: quick start ---------- */

.quick {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem 1.4rem; margin: 0 0 2.4rem;
}
.prose .quick .quick-kicker {
  margin: 0;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.prose .quick h2 {
  margin: .35rem 0 1.2rem; padding: 0; border: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.01em;
}
.quick-sync { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.4rem; }
.sync-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem 1rem; }
.prose .sync-card p { margin: 0; font-size: .95rem; }
.prose .sync-card .sync-kicker {
  margin: 0 0 .4rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.prose .quick .quick-next { margin: 1.2rem 0 0; font-size: .95rem; color: var(--muted); }

/* ---------- manual: folded parts ----------
   Tips, the long reference text, troubleshooting and FAQ open on demand.
   A link into a folded part opens it (script at the end of manual.html). */

.prose summary { cursor: pointer; list-style: none; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
  content: ""; flex: none;
  width: .42rem; height: .42rem; margin: 0 .2rem 0 auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg); transition: transform .15s;
}
.prose details[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.prose summary:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; border-radius: 4px; }

/* workflow tips: the label line opens them */
.prose details.gtk > summary { display: flex; align-items: center; gap: .6rem; }
.prose details.gtk > summary:hover { color: var(--muted); }
.prose details.gtk[open] > summary { margin-bottom: .55rem; }
.prose details#online-more { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem 1rem; margin-top: 1.4rem; border-top: 1px solid var(--line); }

/* reference chapters: one button opens the full text */
.prose details.more { margin: 1.5rem 0 0; }
.prose details.more > summary {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text); font-weight: 600; font-size: .95rem;
}
.prose details.more > summary::after { margin-left: .1rem; }
.prose details.more > summary:hover { border-color: var(--faint); }
.prose details.more[open] > summary { margin-bottom: .6rem; }

/* troubleshooting and FAQ: a list of questions */
.prose h2 + details.ts { border-top: 1px solid var(--line); }
.prose details.ts { border-bottom: 1px solid var(--line); }
.prose details.ts > summary {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 0; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--text);
}
.prose details.ts > summary:hover { color: var(--muted); }
.ts-body { padding: 0 0 1.1rem; }
.prose .ts-body > :first-child { margin-top: 0; }
.prose .ts-body > :last-child { margin-bottom: 0; }
.prose details[id] { scroll-margin-top: 4.6rem; }
@media (min-width: 1080px) { .prose details[id] { scroll-margin-top: 1.6rem; } }

@media (max-width: 760px) {
  .quick { padding: 1.25rem 1.05rem 1.15rem; margin-left: -.35rem; margin-right: -.35rem; }
  .quick-sync { grid-template-columns: 1fr; }
}

/* quick start: what LinkEffekt does. Send on the left, Receive on the right,
   the three ways between them in the middle: the lines fan out of the Send and
   join again into the Receive. Every route row draws its own pieces of both
   trees (branch and trunk, left and right), so rows may differ in height. */
.fan {
  --gap: 1.9rem;    /* column gap: the line out of a card */
  --arm: 1.2rem;    /* from a trunk to its route card */
  --rgap: .5rem;    /* between route cards */
  /* Send and Receive take the width their text needs (never a fixed width:
     fonts differ between browsers), the ways are as wide as their own text and
     sit in the middle; the wires between them take up whatever space is left */
  display: grid; grid-template-columns: auto minmax(var(--gap), 1fr) max-content minmax(var(--gap), 1fr) auto;
  align-items: center; margin: 0 0 1.6rem;
}
.fan-wire { height: 2px; background: var(--ok); }
.fan-node {
  position: relative; min-width: 12rem;   /* both ends equally wide */
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: .75rem .8rem .8rem;
}
.fan-tip {
  position: absolute; top: 50%; left: -7px; transform: translateY(-50%);
  border: 5px solid transparent; border-left: 6px solid var(--ok); border-right-width: 0;
}
.prose .fan .fan-kicker, .prose .fan .fan-status { margin: 0; }
.prose .fan .fan-kicker {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .5rem;
}
.fan-plug {
  display: flex; width: fit-content; align-items: center; gap: .5rem;   /* block box: no line-box slack above */
  font-family: var(--mono); font-size: .66rem; font-weight: 600; white-space: nowrap;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  padding: .3rem .5rem;
}
.fan-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; flex: none; }
.fan-wave i { display: block; width: 2px; border-radius: 1px; background: var(--ok); }
.fan-wave i:nth-child(1) { height: 6px; }  .fan-wave i:nth-child(2) { height: 13px; }
.fan-wave i:nth-child(3) { height: 9px; }  .fan-wave i:nth-child(4) { height: 16px; }
.fan-wave i:nth-child(5) { height: 7px; }  .fan-wave i:nth-child(6) { height: 11px; }
.fan-spk { width: 15px; height: 15px; flex: none; color: var(--ok); }
.prose .fan .fan-status {
  display: flex; align-items: center; gap: .45rem; margin-top: .55rem;
  font-family: var(--mono); font-size: .68rem; color: var(--ok);
}

.fan-routes { display: grid; gap: var(--rgap); margin: 0 var(--arm); }
.fan-route {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .75rem;
}
.fan-route .ln { position: absolute; background: var(--ok); }
.fan-route .lb, .fan-route .rb { top: 50%; height: 2px; transform: translateY(-1px); }
.fan-route .lb { left: calc(-1 * var(--arm) - 1px); width: calc(var(--arm) - 5px); }
.fan-route .rb { right: calc(-1 * var(--arm) - 1px); width: calc(var(--arm) + 1px); }
.fan-route .lt, .fan-route .rt { width: 2px; top: calc(var(--rgap) / -2 - 1px); bottom: calc(var(--rgap) / -2 - 1px); }
.fan-route .lt { left: calc(-1 * var(--arm) - 1px); }
.fan-route .rt { right: calc(-1 * var(--arm) - 1px); }
.fan-route:first-child .lt, .fan-route:first-child .rt { top: 50%; }
.fan-route:last-child .lt, .fan-route:last-child .rt { bottom: 50%; }
.fan-title { font-weight: 650; font-size: .92rem; line-height: 1.3; color: var(--text); }
.fan-sub { font-size: .8rem; line-height: 1.35; color: var(--muted); }

.prose .fan .fan-live {
  grid-column: 1 / -1; margin: 1rem 0 0;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: .86rem; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: .8rem;
}
.fan-live-name {
  font-family: var(--mono); font-size: .66rem; font-weight: 600; white-space: nowrap; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: .2rem .45rem;
}

/* phones and narrow tablets: one column, Send above the ways, Receive below */
@media (max-width: 820px) {
  .fan { grid-template-columns: 1fr; row-gap: var(--gap); }
  .fan-wire, .fan-route .ln, .fan-route .fan-tip { display: none; }
  .fan-routes { margin: 0; }
  .fan-src::after, .fan-dst::before { content: ""; position: absolute; left: 50%; width: 2px; height: calc(var(--gap) + 1px); background: var(--ok); transform: translateX(-1px); }
  .fan-src::after { top: 100%; }
  .fan-dst::before { bottom: 100%; }
  .fan-dst > .fan-tip { top: -7px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top: 6px solid var(--ok); border-bottom-width: 0; }
  .fan-route { align-items: center; text-align: center; }
  .prose .fan .fan-live { margin-top: .2rem; }
}

/* quick start: where the audio lands, as a two-bar timeline */
.tl { display: block; width: 100%; max-width: 15rem; height: auto; margin: .15rem 0 .55rem; overflow: visible; }
.tl .tl-base { stroke: var(--line); stroke-width: 1.5; }
.tl .tl-bar { stroke: var(--faint); stroke-width: 1.5; }
.tl .tl-beat { stroke: var(--faint); stroke-width: 1; opacity: .7; }
.tl .tl-num { fill: var(--faint); font-family: var(--mono); font-size: 9px; }
.tl .tl-audio { fill: var(--ok); }
.tl .tl-ghost { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 3 2; }
.tl .tl-arrow { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.tl .tl-head { fill: var(--muted); }