/* ============================================================================
   offline.css — "Read offline"

   Die Seite, die erklärt, wie man das Archiv aufs Gerät holt, und den Knopf
   dafür trägt. Bewusst nüchtern: keine Bewegung, keine Wasserzeichen, keine
   Inszenierung. Wer hierherkommt, will eine Anleitung, keine Vorstellung.
   Seit Plan 2 (S5) öffnet sie mit dem Reisekoffer der Bibliothek, und die
   Kästen sind Bögen auf dem Pult: dieselben Gegenstände wie überall sonst.

   Alle Farben kommen aus den --lib-* Token (library.css § 0), damit die Seite
   Hell/Dunkel und alle fünf 五行-Phasen ohne eigenes Zutun mitmacht.
   ============================================================================ */

/* ============================================================================
   Der Hinweis auf neues Material

   Er steht ausserhalb von #view-offline — direkt unter der Navigation, auf
   jeder Ansicht —, weil er dort erscheinen soll, wo gelesen wird, und nicht
   nur dort, wo man ohnehin schon nach Neuem sucht. Verdrahtet in offline.js.

   Bewusst ein Streifen im Fluss und kein schwebender Kasten: er schiebt die
   Seite einmal nach unten und verdeckt nie etwas. Wer ihn wegklickt, ist ihn
   los, bis wirklich wieder etwas dazukommt.
   ============================================================================ */

/* Zuerst, und getrennt: [hidden] muss gewinnen. Stuende das display auf dem
   Streifen selbst, waere das Attribut wirkungslos und der Hinweis stuende bei
   jedem Aufruf da — auch bei Lesern, die nie etwas heruntergeladen haben. */
.oa-newsbar[hidden] { display: none !important; }

.oa-newsbar {
  /* a strip of paper laid under the head (plan 2, S7) */
  background-color: var(--sheet); background-image: var(--tex-paper);
  background-size: 384px auto; background-blend-mode: multiply;
  color: var(--sheet-ink);
  border-bottom: 1px solid var(--rule);
}

.oa-newsbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.oa-newsbar-text {
  flex: 1 1 340px;
  margin: 0;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sheet-ink-2);
}

.oa-newsbar-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.oa-newsbar-go {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-right: 10px;
  border-radius: 0;
  font: 400 var(--fs-14)/1.4 var(--font-body);
  color: var(--sheet-ink);
  box-shadow: inset 0 -1px 0 var(--sheet-ink-3);
}
.oa-newsbar-go:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* Das Wegklicken ist die leisere der beiden Handlungen und sieht auch so aus.
   28px im Quadrat sind fuer eine Fingerkuppe knapp — die Trefferflaeche wird
   darum ueber ::before auf 44px gedehnt, ohne dass das Zeichen waechst. */
.oa-newsbar-x {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--sheet-ink-3);
}
.oa-newsbar-x::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.oa-newsbar-x:hover { color: var(--sheet-ink); }

.oa-newsbar-go:focus-visible,
.oa-newsbar-x:focus-visible {
  outline: 2px solid var(--lib-acc, #9e2b25);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .oa-newsbar-inner { padding: 11px 20px; gap: 10px; }
  .oa-newsbar-text { flex-basis: 100%; font-size: 14.5px; }
  .oa-newsbar-acts { margin-left: auto; }
  .oa-newsbar-go { padding-left: 0; }
}

#view-offline {
  --off-gutter: clamp(20px, 5vw, 40px);
}

#view-offline .off-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding-left: var(--off-gutter);
  padding-right: var(--off-gutter);
}

/* ---- Kopf: der Reisekoffer der Bibliothek --------------------------------
   Drei Baende, mit der Schnur zusammengebunden, davor der Zettel mit der
   Groesse (Plan 2, S5). Dasselbe Tuch wie die Ruecken im Regal und die
   Deckel der Werke (.fp-cover); die Schnur aus dem Material-Token. */

#view-offline .off-head {
  padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6) var(--s7);
  align-items: center;
}

#view-offline .off-eyebrow {
  margin: 0 0 var(--s4);
  font: italic 400 var(--fs-16)/1.4 var(--font-body);
  color: var(--lib-t3, #7a736b);
}
#view-offline .off-eyebrow [lang] { font-style: normal; font-family: var(--font-han); }

#view-offline .off-case {
  position: relative;
  width: 178px;
  height: 214px;
  justify-self: end;
}
#view-offline .off-vol {
  --ink: var(--accent);
  position: absolute; left: 0; top: 0;
  width: 124px; height: 164px;
  border-radius: 2px 3px 3px 2px;
  background: var(--tex-cloth), linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 80%, var(--cloth-mix)), var(--ink) 38%,
    color-mix(in srgb, var(--ink) 76%, var(--cloth-mix)));
  background-size: 256px, auto; background-blend-mode: multiply, normal;
  box-shadow: var(--lift), 4px 0 0 -1px var(--sheet-edge), 5px 0 0 -1px rgba(30, 20, 10, .3);
}
html[data-theme="dark"] #view-offline .off-vol {
  background: var(--tex-cloth), linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 42%, var(--cloth-mix)),
    color-mix(in srgb, var(--ink) 58%, var(--cloth-mix)) 38%,
    color-mix(in srgb, var(--ink) 38%, var(--cloth-mix)));
  background-size: 256px, auto; background-blend-mode: multiply, normal;
}
/* the stitched edge every cloth cover on the site carries */
#view-offline .off-vol::before {
  content: ""; position: absolute; left: 9%; top: 0; bottom: 0;
  border-left: 1px solid rgba(255, 255, 255, .55);
}
/* the pile: the lowest volume peeks out furthest, the top one lies straight */
#view-offline .off-vol:nth-child(1) { --ink: var(--xiu); transform: translate(30px, 30px) rotate(-4deg); }
#view-offline .off-vol:nth-child(2) { --ink: var(--wen); transform: translate(16px, 15px) rotate(2deg); }
#view-offline .off-vol:nth-child(3) { --ink: var(--accent); transform: rotate(-1deg); }
/* the cord, tied once across and once along */
#view-offline .off-cord {
  position: absolute; left: 60px; top: -3px; width: 4px; height: 168px;
  background: var(--cord, var(--bam-lo));
  transform: rotate(-1deg); transform-origin: 0 0;
  box-shadow: 1px 0 1px rgba(30, 20, 10, .35);
  pointer-events: none;
}
#view-offline .off-cord::before,
#view-offline .off-cord::after {
  content: ""; position: absolute; left: -68px; width: 146px; height: 4px;
  background: var(--cord, var(--bam-lo));
  box-shadow: 0 1px 1px rgba(30, 20, 10, .35);
}
#view-offline .off-cord::before { top: 44px; }
#view-offline .off-cord::after  { top: 98px; }
/* the slip tucked under the cord */
#view-offline .off-slip {
  position: absolute; left: -14px; bottom: 6px; margin: 0;
  padding: 7px 12px; white-space: nowrap;
  background-color: var(--sheet); background-image: var(--tex-paper);
  background-size: 200px auto; background-blend-mode: multiply;
  border: 1px solid var(--sheet-edge); border-radius: var(--r-sheet);
  box-shadow: var(--lift); transform: rotate(-2.5deg);
  font: italic 400 var(--fs-14)/1.3 var(--font-body); color: var(--sheet-ink-2);
}
#view-offline .off-slip #offSize { font-style: normal; font-weight: 600; color: var(--sheet-ink); }
@media (max-width: 720px) {
  #view-offline .off-head { grid-template-columns: minmax(0, 1fr); }
  #view-offline .off-case { justify-self: start; margin-left: 14px; }
}

#view-offline h1 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  color: var(--lib-t1, #14110f);
  text-wrap: balance;
}

#view-offline .off-lead {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(16px, 2.1vw, 18.5px);
  line-height: 1.66;
  color: var(--lib-t2, #4b4540);
  margin: 0;
  max-width: 56ch;
}

/* ---- Die Reihenfolge ------------------------------------------------------
   Das einzige an dieser Seite, das man falsch machen kann, steht deshalb vor
   allem anderen — noch vor dem Knopf. Getragen wird es von einer Linie links,
   derselben Geste wie bei .off-note, nur kräftiger: kein Kasten, keine Farbe,
   keine Warnung. Es ist ein Hinweis, keine Ermahnung. */

#view-offline .off-order {
  border-left: 2px solid var(--lib-acc, #9e2b25);
  padding: 2px 0 2px clamp(18px, 3vw, 26px);
  margin: 0 0 clamp(40px, 6vw, 64px);
}

#view-offline .off-order h2 { margin-bottom: 18px; }

/* Eigene Zählung, damit die beiden Schritte nicht mit den nummerierten
   Kreisen der Geräte-Anleitungen (.off-steps) verwechselt werden: hier eine
   schlichte Ziffer mit Punkt, dort ein Kreis. Zwei Ebenen, zwei Zeichen. */
#view-offline .off-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: off-order;
}
#view-offline .off-order-list li {
  counter-increment: off-order;
  position: relative;
  padding: 0 0 14px 34px;
  font-family: 'Source Serif 4', serif;
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.6;
  color: var(--lib-t2, #4b4540);
  max-width: 56ch;
}
#view-offline .off-order-list li:last-child { padding-bottom: 0; }
#view-offline .off-order-list li::before {
  content: counter(off-order) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--lib-acc, #9e2b25);
  font-variant-numeric: tabular-nums;
}
#view-offline .off-order-list li b { color: var(--lib-t1, #14110f); font-weight: 600; }

#view-offline .off-order-why {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lib-t3, #7a736b);
  margin: 20px 0 0;
  max-width: 58ch;
}

/* Die Marke über den beiden grossen Abschnitten. Sie trägt die Reihenfolge
   noch einmal dorthin, wo gehandelt wird — wer von oben herunterscrollt, hat
   die Aufzählung sonst längst hinter sich. */
#view-offline .off-step-tag {
  margin: 0 0 8px;
  font: italic 400 var(--fs-16)/1.4 var(--font-body);
  color: var(--lib-t3, #7a736b);
}
#view-offline .off-panel .off-step-tag { color: var(--sheet-ink-3); }

/* ---- Der Knopf und sein Kasten ------------------------------------------- */

/* Der Kasten ist ein Bogen auf dem Pult (Plan 2, S5): Papier, leicht schief,
   der Knopf darauf. */
#view-offline .off-panel {
  position: relative;
  background-color: var(--sheet); background-image: var(--tex-paper);
  background-size: 384px auto; background-blend-mode: multiply;
  color: var(--sheet-ink);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift);
  transform: rotate(-.3deg);
  padding: clamp(24px, 3.6vw, 36px) clamp(22px, 3.4vw, 34px);
  margin: 0 0 clamp(40px, 6vw, 64px);
}

#view-offline .off-panel-title {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--sheet-ink);
}

#view-offline .off-panel-note {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--sheet-ink-2);
  margin: 0 0 22px;
  max-width: 54ch;
}

/* .off-btn / .off-btn-quiet: Gestalt in style.css §buttons.
   Was hier einmal begruendet wurde, gilt dort jetzt fuer alle Knoepfe der
   Seite: 44px Mindesthoehe (die Daumengrenze im fahrenden Zug), die Schrift
   des Siegels dreht mit dem Thema (Weiss auf dem hellen Dunkel-Akzent ergaebe
   1.9:1), und der ruhige Knopf ist eine ruhige Flaeche MIT Linie, weil die
   Flaeche allein nur 1.2:1 gegen den Grund hat. */

/* Der leisere Bogen: dasselbe Papier, in die andere Richtung gedreht, der
   Titel eine Stufe kleiner. Der ruhige Knopf liegt hier auf Papier. */
#view-offline .off-panel-quiet { transform: rotate(.4deg); }
#view-offline .off-panel-quiet .off-panel-title {
  font-size: clamp(18px, 2.4vw, 21px);
}
#view-offline .off-panel .off-btn-quiet { color: var(--sheet-ink); box-shadow: inset 0 -1px 0 var(--sheet-ink-3); }

/* Der Balken erscheint erst, wenn er etwas zu zeigen hat: ein Papierstreifen,
   der sich mit Tusche fuellt. */
#view-offline .off-progress { display: none; margin-top: 20px; }
#view-offline .off-progress[data-on] { display: block; }

#view-offline .off-bar {
  height: 8px;
  border-radius: var(--r-sheet);
  background: var(--sheet-edge);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sheet-ink-3) 30%, transparent);
  overflow: hidden;
}
#view-offline .off-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--lib-acc, #9e2b25);
  transition: width var(--dur-2) var(--ease-move);
}
#view-offline .off-bar-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--sheet-ink-3);
  margin: 10px 0 0;
}

/* Zustandsmeldung unter dem Knopf: da / nicht da / geht hier nicht. */
#view-offline .off-state {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sheet-ink-3);
  margin: 16px 0 0;
}
#view-offline .off-state[data-ok] { color: var(--lib-xiu, #1c502c); font-weight: 600; }
#view-offline .off-state[data-warn] { color: var(--lib-acc, #9e2b25); }

/* ---- Die Anleitungen ------------------------------------------------------ */

#view-offline .off-section { margin: 0 0 clamp(36px, 5.5vw, 58px); }

#view-offline h2 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.22;
  margin: 0 0 8px;
  color: var(--lib-t1, #14110f);
}

#view-offline .off-sub {
  font-family: 'Source Serif 4', serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--lib-t3, #7a736b);
  margin: 0 0 24px;
  max-width: 56ch;
}

/* ---- Die Geräte-Klappen ---------------------------------------------------
   Drei Anleitungen, von denen für jeden Leser genau eine stimmt. Offen
   nebeneinander waren sie der längste Teil der Seite — und zwei Drittel davon
   Anweisungen für ein Gerät, das der Leser nicht in der Hand hält.

   Geschlossen bleibt pro Gerät eine Zeile stehen, die schon verrät, wohin es
   geht ("Safari · Share · Add to Home Screen"): wer den Weg kennt, muss gar
   nicht aufmachen. Getragen wird der Zustand von <details> selbst, damit
   Tastatur, Suchfunktion des Browsers und ein Besuch ohne JavaScript ohne
   eigenes Zutun funktionieren. offline.js klappt nur die passende auf. */

/* Jede Anleitung ist ein Blatt auf dem Pult (Plan 2, S5): zu ein schmaler
   Streifen mit Namen und Weg, aufgeschlagen das ganze Blatt. Abwechselnd
   ein wenig nach links und rechts gedreht, wie abgelegt. */
#view-offline .off-devices {
  display: flex; flex-direction: column; gap: var(--s4);
  padding-bottom: var(--s2);
}

#view-offline .off-device {
  --leaf-tilt: -.4deg;
  background-color: var(--sheet); background-image: var(--tex-paper);
  background-size: 384px auto; background-blend-mode: multiply;
  color: var(--sheet-ink);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift);
  transform: rotate(var(--leaf-tilt));
  padding: 0 clamp(18px, 3vw, 28px);
}
#view-offline .off-device:nth-child(even) { --leaf-tilt: .35deg; }

#view-offline .off-device-sum {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  /* Beides nötig: Safari braucht den ::-webkit-Marker, Firefox das list-style.
     Bleibt eins davon stehen, hat die Zeile ein zweites Dreieck neben dem
     eigenen Zeichen. */
  list-style: none;
  padding: 20px 0;
}
#view-offline .off-device-sum::-webkit-details-marker { display: none; }
#view-offline .off-device-sum::marker { content: ""; }
#view-offline .off-device-sum:focus-visible {
  outline: 2px solid var(--lib-acc, #9e2b25);
  outline-offset: 3px;
}

#view-offline .off-device-txt { flex: 1 1 auto; min-width: 0; }

#view-offline .off-device-name {
  display: block;
  font-family: 'Spectral', serif;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sheet-ink);
  margin: 0 0 4px;
}

/* Die Marke, die offline.js an die erkannte Anleitung hängt. Sie steht nur
   da, wenn wirklich erkannt wurde — geraten wird nicht. */
#view-offline .off-device-mine {
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--sheet-ink-3);
  color: var(--sheet-ink-3);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: 3px;
}

#view-offline .off-device-hint {
  display: block;
  font: italic 400 15px/1.5 var(--font-body);
  color: var(--sheet-ink-3);
}

#view-offline .off-device-chev {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sheet-ink-3);
  color: var(--sheet-ink-3);
  transition: transform var(--dur-2) var(--ease-move),
              color var(--dur-1) var(--ease-enter);
}
#view-offline .off-device-sum:hover .off-device-chev { color: var(--sheet-ink); }
#view-offline .off-device[open] .off-device-chev { transform: rotate(180deg); }

#view-offline .off-device-body {
  padding: 4px 0 28px;
  animation: off-fold-in var(--dur-2) var(--ease-enter) both;
}
@keyframes off-fold-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* Nummerierte Schritte. Die Zahl steht in einem eigenen Kreis links, damit
   man beim Überfliegen sofort sieht, wieviele Schritte es sind. */
#view-offline .off-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: off-step;
}
#view-offline .off-steps li {
  counter-increment: off-step;
  position: relative;
  padding: 0 0 18px 46px;
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sheet-ink-2);
}
#view-offline .off-steps li::before {
  content: counter(off-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--sheet-ink-3);
  color: var(--sheet-ink-3);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
#view-offline .off-steps li b {
  color: var(--sheet-ink);
  font-weight: 600;
}

/* Ein Hinweiskasten für die Dinge, die man sonst erst schmerzhaft lernt. */
#view-offline .off-note {
  border-left: 2px solid var(--sheet-ink-3);
  padding: 2px 0 2px 18px;
  margin: 22px 0 0;
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sheet-ink-3);
  max-width: 58ch;
}
#view-offline .off-note b { color: var(--sheet-ink-2); font-weight: 600; }

#view-offline .off-foot {
  border-top: 1px solid var(--lib-bd, #e4e0d8);
  padding: 26px 0 clamp(64px, 9vw, 110px);
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--lib-t3, #7a736b);
  max-width: 58ch;
}

#view-offline .off-panel-quiet .off-bar-fill { background: var(--lib-t3, #7a736b); }

@media (prefers-reduced-motion: reduce) {
  #view-offline .off-btn,
  #view-offline .off-bar-fill,
  #view-offline .off-device-sum,
  #view-offline .off-device-chev { transition: none; }
  #view-offline .off-device-body { animation: none; }
}