:root {
  --bg:#0d1117; --fg:#c9d1d9; --accent:#238636; --err:#f85149; --warn:#d29922;
  --card:#161b22; --border:#30363d; --muted:#8b949e;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  /* Lässt iOS Formularelemente, Bildlaufleisten und die Tastatur dunkel zeichnen. */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overscroll-behavior-y: none; }
body { margin:0; font-family:-apple-system,system-ui,sans-serif; background:var(--bg); color:var(--fg); }
/* Bisher stand hier nur der obere Inset. Unten lief der Inhalt damit unter den
   Home-Indikator, und im Querformat auf Geräten mit Notch links/rechts darunter.
   ★ Die seitlichen Insets verkleinern `#cc-terminal`s clientWidth und damit die
   gemeldete Spaltenzahl (`_wantedGeom` in sessions.js) — das ist beabsichtigt: das
   Terminal soll nicht unter die Notch umbrechen. Die Zeilenzahl hängt an
   visualViewport.height und bleibt unberührt. */
/* `max(12px, …)` statt `calc(12px + …)` — dasselbe Muster wie in /cr/s style.css:
   der Inset ist eine UNTERGRENZE, kein Zuschlag. Sonst stünde oben auf einem Gerät ohne
   Notch (und im Querformat, wo inset-top 0 ist) gar kein Rand, während die Seiten 12 px
   haben; und auf einem Gerät mit Notch käme der Zuschlag oben auf die 47 px obendrauf.
   Nebeneffekt, der hier zählt: im Querformat bleiben dem Terminal mehr Spalten. */
.screen {
  padding:
    max(12px, var(--sat))
    max(12px, var(--sar))
    max(12px, var(--sab))
    max(12px, var(--sal));
}
.hidden { display:none !important; }
header { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
/* ── Idee 0007 / Scheibe 4: Reiterleiste unten ────────────────────────────────
   Oben liegt auf einem iPhone ausserhalb der Daumenreichweite. Die Leiste steht im
   DOM am Ende (siehe index.html) und wird hier positioniert.

   ★ Bewusst NICHT die App-Shell-Umstellung, die die Reviews bevorzugten (body hoert
   auf zu scrollen, Ansichten scrollen intern). Das ist genau der „groesste Umbau" vor
   dem das Ideen-Papier warnt, und sein Gewinn — Robustheit bei offener Tastatur — ist
   das Einzige, was sich ohne Geraet gar nicht pruefen laesst. `sticky` plus
   `margin-top:auto` erreicht dasselbe Ziel mit einem Bruchteil des Risikos:
   bei KURZEM Inhalt schiebt `auto` die Leiste an den unteren Rand, bei LANGEM haelt
   `sticky` sie dort fest.

   ⚠ Der Hintergrund ist Pflicht, keine Zier: ohne ihn scrollt Text durch die Luecken
   zwischen den Kacheln. Und die negativen Seitenraender heben die Polsterung von
   `.screen` auf, damit die Leiste bis an den Geraeterand laeuft statt einen Streifen
   Seitenhintergrund daneben zu lassen. */
#main-screen {
  display:flex; flex-direction:column;
  min-height:100vh;
  /* #169: short content must reach the same visible bottom as the sticky bar.
     cc.js updates both values together on visualViewport resize/scroll. */
  min-height:var(--cc-visible-bottom, 100dvh);
  padding-bottom:0;
}

#tabbar {
  display:flex; gap:4px;
  margin-top:auto;
  position:sticky; bottom:var(--cc-viewport-bottom, 0px); z-index:5;
  background:var(--bg);
  border-top:1px solid var(--border);
  margin-left:calc(-1 * max(12px, var(--sal)));
  margin-right:calc(-1 * max(12px, var(--sar)));
  padding:8px max(12px, var(--sar)) max(8px, var(--sab)) max(12px, var(--sal));
}

/* Zurueck nach oben, sobald eine MAUS im Spiel ist — nicht nach Fensterbreite allein.
   ★ Damit behaelt das iPad die Leiste unten, in beiden Ausrichtungen, so wie es
   iPadOS selbst haelt; eine reine Breiten-Grenze haette sie beim Drehen springen
   lassen. Die Reihenfolge steht fuer ALLE DREI Geschwister ausdruecklich da: seit die
   Leiste im DOM am Ende sitzt, wuerde ein blosses `order:-1` sie ueber die Kopfzeile
   heben statt darunter. */
@media (min-width: 900px) and (pointer: fine) {
  #main-screen { min-height:0; }
  #main-screen > header { order:0; }
  #main-screen > #tabbar {
    order:1;
    position:static; margin:8px 0; padding:0;
    background:none; border-top:none;
  }
  #main-screen > .view { order:2; }
}
.tab-btn { flex:1; min-height:44px; padding:10px; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:8px; font-size:15px; }
.tab-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; }
/* ── Anfassen (Idee 0007, Scheibe 3) ──────────────────────────────────────────
   Diese Ansicht hatte bisher KEINE einzige `:active`-Regel. Mit abgeschaltetem
   System-Schleier wäre damit jeder Knopf tot — die Rückmeldung unten ist Bedingung,
   nicht Zierrat. `transition: none` beim Drücken heisst: sofort.
   ★ `user-select`/`touch-callout` stehen bewusst NUR an den Bedienelementen. Im
   Terminal (`pre#cc-terminal`) ist Auswählen eine FUNKTION, abgesichert durch die
   Touch-Wächter in sessions.js — ein globales `none` am `body` bräche das. */
button, .btn, .tab-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
button:active, .btn:active, .tab-btn:active {
  filter: brightness(0.8);
  transition: none;
}
/* [disabled] darf nicht aufleuchten — sonst sieht ein toter Knopf bedienbar aus. */
.btn[disabled]:active { filter: none; }
/* ⚠ Am Element gemessen (2026-08-11): der Anmelde-Knopf stand bei 21 px — das Kleinste
   im ganzen Bestand, in der Scheibe mit der Überschrift „44 px". Er traegt kein `.btn`,
   und mein `min-height` haette nur `.btn` und `.tab-btn`. Der Boden gehoert an die
   Element-Regel, dann faellt kein klassenloser Knopf mehr durch. */
button { cursor:pointer; min-height:44px; }
.btn { min-height:44px; padding:10px 14px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:15px; }
.btn.secondary { background:var(--card); border:1px solid var(--border); color:var(--fg); }
.btn.danger { background:var(--err); }
input, textarea, select { width:100%; padding:10px; background:#0d1117; color:var(--fg); border:1px solid var(--border); border-radius:8px; font-size:16px; }
/* Not in the plan's Task-9 CSS sketch — without it a <form>'s children (login,
   add-grant, new-repo) fall back to inline-block flow instead of stacking, since
   <input>/<button> are inline-block by default. Mirrors the shipped /cr/ pattern
   (server-code/static/style.css: "form { display: flex; flex-direction: column; ... }"),
   which the brief names as the house convention this subsystem mirrors. */
form { display:flex; flex-direction:column; gap:8px; max-width:420px; }
.error { color:var(--err); min-height:1em; }
.warn { color:var(--warn); }
.muted { color:var(--muted); font-size:13px; }
.badge { display:inline-block; padding:2px 8px; border-radius:12px; background:var(--card); border:1px solid var(--border); font-size:13px; }
.grant-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:4px 0; }
.term-input-row { display:flex; gap:6px; margin-top:6px; }
.term-input-row input { flex:1; }
/* Review I3: Esc / Ctrl row. `.btn.active` is the armed-Ctrl indicator, mirroring
   static/app.js's `#ctrl-toggle.active` — without a visible armed state the toggle is
   invisible modality and the next keystroke silently becomes a Ctrl combo. */
.term-key-row { display:flex; gap:6px; margin-top:6px; align-items:center; flex-wrap:wrap; }
.term-key-row .btn { padding:8px 14px; }
.term-key-row .muted { flex:1 1 100%; }
.btn.active { background:var(--warn); border-color:var(--warn); color:#0d1117; font-weight:bold; }
/* Review M4: the tmux session is created 80x24 (no -x/-y) and that geometry lives in another
   plan's file, so it is deliberately NOT changed here — see the Plan-09 note in the fix report
   (`-x 60`). What this file can do: 11px instead of 12px (mirrors static/app.js's own
   measureCharSize, which hardcodes 11px for the /cr/ terminal) buys ~9 more columns on an
   iPhone, and .wrap makes the remainder reachable without horizontal scrolling.
   ui-monospace first: -apple-system from body would otherwise make this a PROPORTIONAL font
   and misalign every tmux box-drawing character. */
pre#cc-terminal { background:#010409; color:#c9d1d9; padding:8px; border-radius:8px; overflow:auto;
  white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  line-height:1.25; max-height:60vh; }
pre#cc-terminal.wrap { white-space:pre-wrap; overflow-wrap:anywhere; }
/* Issue #10 — der Verlaufs-Modus. Dieselbe Höhe und derselbe Grund wie beim Live-Abzug
   darüber (`max-height:60vh`): die Ansicht LÖST ihn ab, sie soll den Rest der Seite also
   weder verschieben noch die Knopfleiste aus dem Bild drücken.
   ⚠ Bewusst KEINE Monospace-Schrift und `pre-wrap` statt `pre`: hier steht Fliesstext
   (Prompts, Antworten), kein Terminal-Abzug — die tmux-Ausrichtung, für die 11px-Monospace
   dort gebraucht wird, gibt es hier nicht, und `pre` erzwänge horizontales Scrollen für jede
   lange Zeile. */
#cc-transcript { background:#010409; padding:8px; border-radius:8px; overflow:auto;
  max-height:60vh; font-size:14px; line-height:1.4; }
#cc-transcript .tr-msg { margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
#cc-transcript .tr-who { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
/* Der Sprecher-Wechsel ist die tragende Information des Verlaufs — er muss auf einen Blick
   erkennbar sein, ohne die Zeile zu lesen. */
#cc-transcript .tr-user { border-left:3px solid var(--accent); padding-left:8px; }
#cc-transcript .tr-assistant { border-left:3px solid var(--border); padding-left:8px; }
/* Werkzeuge sind Beleg, nicht Gespräch: kleiner, monospace (es sind Befehle und Pfade),
   und deutlich zurückgenommen. */
#cc-transcript .tr-tool, #cc-transcript .tr-result {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); margin:2px 0 2px 8px; }
#cc-transcript .tr-name { color:var(--fg); font-weight:bold; }
#cc-transcript .tr-result { border-left:2px solid var(--border); padding-left:6px; }
#cc-transcript .tr-error { color:var(--err); border-left-color:var(--err); }
#cc-transcript .tr-cut { color:var(--warn); font-size:11px; }
#cc-tr-more { display:block; width:100%; margin-bottom:6px; }
/* Plan-07's auth.js (server-code/static/cc/auth.js) ships class names (cc-auth-status,
   cc-ok/cc-bad, cc-auth-err) but no matching CSS of its own — colour them here so the
   OAuth-valid/expired state is legible instead of flat --fg. */
.cc-auth-status.cc-ok { color:var(--accent); }
.cc-auth-status.cc-bad { color:var(--err); }
.cc-auth-err { color:var(--err); }
/* ⚠ Fiel in der ersten Erhebung durchs Raster: als blosses Emoji ohne Padding war das
   mit ~23 px die kleinste Trefferfläche im Bestand — ausgerechnet in der Scheibe, deren
   Überschrift „44 px" ist. Negativer Rand, damit die neue Breite optisch nicht auffällt. */
#home-link {
  text-decoration:none; font-size:1.2rem;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
  margin:-8px 0 -8px -10px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
#home-link:active { opacity:0.6; transition:none; }
/* Idee 0003 — „Zuletzt genutzte Repos & Branches". Die Trennlinie ist das, was der Nutzer
   wörtlich beschrieben hat („unter einer Trennlinie ein Verlauf"): sie trennt LAUFENDE von
   BEENDETEN Sessions, und ohne sie lesen sich beide Kartenblöcke als eine Liste — man würde
   eine beendete Session für eine laufende halten und ihren „Neue Session"-Knopf für einen
   Terminal-Knopf. */
.hist-sep { border:none; border-top:1px solid var(--border); margin:18px 0 10px; }
.hist-head { font-size:15px; font-weight:600; margin:0 0 8px; color:var(--muted); }
/* Der fehlgeschlagene Zustand MUSS sich vom beendeten unterscheiden, und nicht nur durch das
   Wort: „ended" und „failed" sind auf einem Telefon im Vorbeiscrollen sechs graue Zeichen.
   Dieselbe --err-Farbe wie .error, damit rot im ganzen Frontend dasselbe heisst. */
.badge.bad { color:var(--err); border-color:var(--err); }
/* Ein deaktivierter Knopf muss AUSSEHEN wie deaktiviert — sonst tippt man ihn wieder und
   wieder an und hält die Ausbleiben-Reaktion für einen Defekt der Seite. */
.btn[disabled] { opacity:0.45; cursor:not-allowed; }

/* ── Idee 0008 / Scheibe 3: Unterhaltung fortsetzen ──────────────────────────────────────
   Aufgeklappt hinter ⟲, dieselbe Form wie das Branch-Feld hinter ⑂.
   ⚠ `min-height:44px` an der ganzen Zeile, nicht am Radio: die Trefferflaeche ist auf dem
   iPhone das LABEL (Scheibe 3 von Idee 0007 — Playwright fand bei 390x844 sieben zu kleine
   Flaechen, die drei CSS-Durchsichten uebersehen hatten). Ein 20-px-Radio als einziges Ziel
   waere genau so ein Fund.
   ⚠ `touch-action: manipulation`: ohne das deutet iOS zwei rasche Tipps in der Liste als
   Doppeltipp-Zoom (wertvollster Einzelpunkt aus Scheibe 3). */
.resume-box { margin-top:8px; border-top:1px solid var(--border); padding-top:6px; }
.resume-row {
  display:flex; align-items:center; gap:8px; min-height:44px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.resume-row:active { background:var(--border); border-radius:6px; }
.resume-row input[type=radio] { width:20px; height:20px; flex:none; }
.resume-row small { color:var(--muted); margin-left:auto; text-align:right; }
/* Issue #284/S1: die Anbieter-Auswahl benutzt die `resume-row`-Form (Daumenflaeche, und
   auf iOS lesbar — anders als ein natives `<select>`), braucht darueber aber eine
   Gruppenzeile je Anbieter und Platz fuer den Sperr-Grund im Klartext. */
/* ⚠ Eigene Klasse statt `resume-box` mitzubenutzen (Review #284/S1): `_pickedResume`
   und `toggleResume` greifen per `card.querySelector(".resume-box …")`, das ist der
   ERSTE Treffer in Dokumentreihenfolge. Mit zwei `.resume-box` in einer Karte haette ein
   Umsortieren der beiden `<div>`s im Markup ⟲ still die Anbieter-Box bedienen lassen. */
.anbieter-box { margin-top:8px; border-top:1px solid var(--border); padding-top:6px; }
.anbieter-kopf { margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.anbieter-kopf small { color:var(--muted); }
.anbieter-grund { color:var(--muted); font-size:13px; margin:2px 0 0 0; }

/* Issue #20 — Kundennetz-Kachel. Eine Zeile je Standort: links wer, rechts die eine Handlung.
   ⚠ `flex-wrap` ist nicht Kosmetik: auf dem iPhone passen Klarname, Nummer und Port nicht in
   eine Zeile, und ohne Umbruch schöbe der Knopf sich aus dem Bild. */
.msa-row { display:flex; justify-content:space-between; align-items:center; gap:8px;
  flex-wrap:wrap; margin:6px 0; }
.msa-row .btn { flex:0 0 auto; }
#msa-body .card p { margin:4px 0; }