/* HarHar.de – edge-to-edge mobile, vertical-first, print-ready */

/*
 * Themes — default is a painted “delft / denim” blue
 * (not #0000ff / not Bootstrap primary).
 */
:root,
[data-theme="azure"] {
  --bg: #e8eef6;
  --paper: #ffffff;
  --ink: #152033;
  --muted: #5a6578;
  --accent: #3a6ea5;       /* delft blue */
  --accent-dark: #2d5785;
  --chip: #d5e0ef;
  --chip-active: #3a6ea5;
  --shadow: 0 6px 22px rgba(25, 45, 75, 0.13);
  --donate: #4a7ab5;       /* same family, slightly lighter for CTA */
  --donate-dark: #355f94;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad-x: 6px;
  /* Slim side ‹ › — height stays for hit area, width thin */
  /* Page ‹ › hit strip width (full button box is tappable) */
  --chevron-w: 48px;
  --scroll-thumb: color-mix(in srgb, var(--accent) 55%, #c5d0dc);
  --scroll-track: color-mix(in srgb, var(--bg) 70%, #fff);
  /* Thin themed rim on round controls */
  --ctrl-border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  --ctrl-border-soft: 1px solid color-mix(in srgb, var(--accent) 22%, #d8dde3);
}

/* Thin themed scrollbars (Firefox + WebKit) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* soft teal */
[data-theme="soft"] {
  --bg: #eef3f7;
  --ink: #1c2430;
  --muted: #5c6775;
  --accent: #2f8f9a;
  --accent-dark: #24747d;
  --chip: #dce8ec;
  --chip-active: #2f8f9a;
  --shadow: 0 6px 20px rgba(20, 40, 55, 0.12);
  --donate: #3d7ea6;
  --donate-dark: #2f6486;
}

/* lavender dusk */
[data-theme="lilac"] {
  --bg: #f0ecf6;
  --ink: #221a2e;
  --muted: #655a72;
  --accent: #7a5ea8;
  --accent-dark: #634a8c;
  --chip: #e4dceb;
  --chip-active: #7a5ea8;
  --shadow: 0 6px 20px rgba(50, 30, 70, 0.12);
  --donate: #5c6eb5;
  --donate-dark: #485a9a;
}

[data-theme="berry"] {
  --bg: #f6eef3;
  --ink: #2a1a24;
  --muted: #6d5562;
  --accent: #c44d7a;
  --accent-dark: #a33a62;
  --chip: #f0dce6;
  --chip-active: #c44d7a;
  --shadow: 0 6px 20px rgba(60, 20, 40, 0.12);
  --donate: #6b5b95;
  --donate-dark: #55487a;
}

[data-theme="forest"] {
  --bg: #eef4ee;
  --ink: #1a261c;
  --muted: #55665a;
  --accent: #3d8b5a;
  --accent-dark: #2f6e47;
  --chip: #dce9df;
  --chip-active: #3d8b5a;
  --shadow: 0 6px 20px rgba(20, 45, 28, 0.12);
  --donate: #3d7a6a;
  --donate-dark: #2d5e52;
}

/* deep night */
[data-theme="ink"] {
  --bg: #e6e8ee;
  --ink: #12141c;
  --muted: #555a68;
  --accent: #3a4258;
  --accent-dark: #2a3044;
  --chip: #d5d8e2;
  --chip-active: #3a4258;
  --shadow: 0 6px 20px rgba(10, 12, 24, 0.14);
  --donate: #4a6290;
  --donate-dark: #384d73;
}

/* warm clay (no yellow CTA) */
[data-theme="sunset"] {
  --bg: #f5f0ec;
  --ink: #261c18;
  --muted: #6b5c54;
  --accent: #c46a52;
  --accent-dark: #a85540;
  --chip: #efe0d8;
  --chip-active: #c46a52;
  --shadow: 0 6px 20px rgba(50, 25, 15, 0.12);
  --donate: #5a7a96;
  --donate-dark: #456078;
}

/* sand / parchment */
[data-theme="sand"] {
  --bg: #f3efe6;
  --ink: #2a261c;
  --muted: #6b6558;
  --accent: #a68b5b;
  --accent-dark: #8a7249;
  --chip: #e8e0d0;
  --chip-active: #a68b5b;
  --shadow: 0 6px 20px rgba(50, 40, 20, 0.12);
  --donate: #5c7a8f;
  --donate-dark: #465f72;
}

/* rose clay */
[data-theme="rose"] {
  --bg: #f7eef0;
  --ink: #2a1c20;
  --muted: #6d585e;
  --accent: #b86b7a;
  --accent-dark: #9a5462;
  --chip: #efdce1;
  --chip-active: #b86b7a;
  --shadow: 0 6px 20px rgba(55, 25, 35, 0.12);
  --donate: #6a7aa8;
  --donate-dark: #53628a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 17px; /* slight bump for readability */
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior-y: auto;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
}

body.is-split-dragging {
  cursor: col-resize !important;
  user-select: none !important;
}

body.is-split-dragging * {
  cursor: col-resize !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* SEO keyword block: available to crawlers, not in the way of the PWA UI */
.seo-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-viewport app: only .stage fills space; overlays are fixed/absolute */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100svh;
  max-height: 100dvh;
  max-height: 100svh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    calc(6px + var(--safe-t))
    max(var(--pad-x), var(--safe-r))
    calc(6px + var(--safe-b))
    max(var(--pad-x), var(--safe-l));
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* Dialogs / scrim / callouts must not steal flex space */
#app > dialog,
#app > .tutorial-scrim,
#app > .tut-callouts {
  flex: 0 0 auto;
  /* stay out of document flex flow for sizing */
}

#app > .stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* —— Top chrome: vertical stacks (portrait = canvas corners; side layout → right panel) —— */
.top-bar {
  position: absolute;
  top: calc(6px + var(--safe-t));
  left: max(6px, var(--safe-l));
  right: max(6px, var(--safe-r));
  z-index: 40;
  pointer-events: none;
}

.top-chrome {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

/* Vertical pill stacks — no grabber */
.top-left,
.top-right {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  padding: 5px 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  border: var(--ctrl-border-soft);
  box-sizing: border-box;
  pointer-events: auto;
  position: relative;
  z-index: 41;
  flex: 0 0 auto;
}

.top-left .fab,
.top-right .fab {
  pointer-events: auto;
  position: relative;
  z-index: 41;
}

/* Slot in right controls column — empty until JS parks #top-chrome here */
.controls-chrome-slot {
  display: none;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.controls-chrome-slot:not(:empty) {
  display: block;
  margin-bottom: 8px;
}

/* Parked in right panel: both stacks side-by-side at top of column */
.controls-chrome-slot .top-chrome {
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

body.top-chrome-in-controls .top-bar {
  /* header host empty while chrome lives in stage-controls */
  display: none;
}

.fab {
  border: var(--ctrl-border);
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  display: grid;
  place-items: center;
  line-height: 1;
  box-sizing: border-box;
}

/* Inside corner stacks: flat chips (wrapper holds the chrome) */
.top-left .fab,
.top-right .fab {
  background: transparent;
  box-shadow: none;
}

.top-left .fab:hover,
.top-left .fab:focus-visible,
.top-right .fab:hover,
.top-right .fab:focus-visible {
  background: color-mix(in srgb, var(--chip) 70%, #fff);
  outline: none;
}

.fab-sm {
  width: 40px;
  height: 40px;
  font-size: 0.98rem;
  padding: 0;
}

/* Settings open: same control is the close affordance (tap ⚙ again) */
#btn-settings.is-open,
#btn-settings[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow);
  color: var(--accent-dark, var(--accent));
}

.fab:active {
  transform: scale(0.96);
}

.fab.chip-toggle[aria-pressed="false"] {
  opacity: 0.42;
  background: #e8e8e8;
}

/* Settings: upper center (not tucked under corner stack) */
.settings-panel {
  position: absolute;
  top: max(12px, calc(10px + var(--safe-t)));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 50;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  height: auto;
  max-height: min(88dvh, 88vh);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  animation: settings-pop 0.15s ease-out;
}

@keyframes settings-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Theme: icon + dots only (same set-mini row height as paper / lang) */
.settings-themes.set-mini {
  align-items: center;
}

.theme-dots {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 2px 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Intensity: soft pastel ——— vivid punch (50 = theme default) */
.settings-intensity {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 2px 0 4px;
  box-sizing: border-box;
}

.settings-intensity-ends {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--muted);
  opacity: 0.9;
}

.intensity-dull {
  opacity: 0.65;
}

.intensity-vivid {
  color: var(--accent);
  opacity: 1;
  font-size: 1.05rem;
}

.theme-intensity-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-intensity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.theme-intensity-slider:focus-visible {
  outline: none;
}

/* Track */
.theme-intensity-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #c5c8ce 0%,
    color-mix(in srgb, var(--accent) 55%, #c5c8ce) 55%,
    var(--accent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #d0d4da);
  box-sizing: border-box;
}

.theme-intensity-slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #c5c8ce 0%,
    color-mix(in srgb, var(--accent) 55%, #c5c8ce) 55%,
    var(--accent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #d0d4da);
}

/* Big grabber */
.theme-intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px; /* center on 10px track */
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow:
    0 2px 8px rgba(25, 45, 75, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  cursor: grab;
  box-sizing: border-box;
}

.theme-intensity-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow:
    0 2px 8px rgba(25, 45, 75, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  cursor: grab;
  box-sizing: border-box;
}

.theme-intensity-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.06);
}

.theme-intensity-slider:active::-moz-range-thumb {
  cursor: grabbing;
}

.theme-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ink) 12%, #fff);
  background: var(--dot, #e8eef6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.theme-dot:hover,
.theme-dot:focus-visible {
  transform: scale(1.12);
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.theme-dot.active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: scale(1.14);
}

.settings-panel[hidden] {
  display: none;
}

/* Title row — same band height as paper / lang / theme set-mini rows */
.settings-head.set-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  min-width: 0;
  width: 100%;
  margin: 0;
}

.settings-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

/* PWA badge logo — slightly smaller to match set-mini row */
.settings-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
  box-shadow: 0 1px 4px rgba(25, 45, 75, 0.12);
}

.settings-brand {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* HarHar.de + copy-to-clipboard share */
.settings-share {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.settings-copy {
  border: none;
  background: var(--chip);
  color: var(--ink);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
}

.settings-copy:hover,
.settings-copy:focus-visible {
  background: var(--chip-active);
  color: #fff;
  outline: none;
}

.settings-copy.is-copied {
  background: color-mix(in srgb, var(--accent) 35%, #fff);
  color: var(--accent-dark, var(--accent));
}

.settings-copy-ico {
  display: block;
  transform: translateY(-0.5px);
}

/* Brief DE/EN flash after copy (other langs → EN via i18n fallback) */
.settings-share-status {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-dark, var(--accent));
  max-width: 7.5rem;
  white-space: normal;
}

.settings-share-status[hidden] {
  display: none !important;
}

/*
 * Legal entry: § larger, label “Impressum” under it, sits flush-right
 * in the head actions (before reset / close).
 */
/* Legal chip sits in .settings-gps row (left of Location) */
.settings-legal {
  border: 1px solid #d5dde4;
  background: #fff;
  color: var(--muted);
  font: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 3.4rem;
  padding: 6px 10px;
  line-height: 1.05;
  border-radius: 999px;
  cursor: pointer;
  box-sizing: border-box;
}

.settings-legal-mark {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.settings-legal-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 4.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.settings-legal:hover,
.settings-legal:focus-visible {
  color: var(--ink);
  background: var(--chip);
  border-color: color-mix(in srgb, var(--accent) 35%, #d5dde4);
  outline: none;
}

.settings-legal:hover .settings-legal-label,
.settings-legal:focus-visible .settings-legal-label {
  color: var(--ink);
}

/* Tip / Danke entry in settings row (♡ — parents open PayPal + Crypto sheet) */
.settings-tip-mark {
  font-size: 1.15rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
}

.settings-tip:hover .settings-tip-mark,
.settings-tip:focus-visible .settings-tip-mark {
  color: var(--accent, #e74c7a);
}

/* After-print sheet: compact (no donate block) */
.thanks-dialog-print .thanks-card {
  gap: 10px;
}
.thanks-dialog-print .thanks-card > p {
  margin: 0;
}

.settings-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.settings-close,
.settings-reset,
.settings-tutorial {
  border: none;
  background: var(--chip);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  width: 32px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.settings-tutorial {
  font-weight: 800;
  font-size: 1.1rem;
}

.settings-tutorial:hover,
.settings-tutorial:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, var(--chip));
  color: var(--accent-dark, var(--accent));
  outline: none;
}

.settings-reset {
  font-size: 1.05rem;
  opacity: 0.85;
}

.settings-reset:hover,
.settings-reset:focus-visible {
  opacity: 1;
  color: var(--accent-dark);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Paper row — full panel width */
.set-mini,
.set-paper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.set-icon {
  font-size: 1.35rem;
  width: 1.65rem;
  height: 1.65rem;
  text-align: center;
  flex: 0 0 auto;
  line-height: 1;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
}

.set-icon.set-icon-svg {
  width: 1.7rem;
  height: 1.7rem;
}

.set-icon .set-ico {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
}

.set-mini select,
.set-paper select {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid #d5dde4;
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--bg);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-align-last: center;
  /* Keep native arrow but center the selected label */
  direction: ltr;
}

/* Base layout-chip (used in top float; settings row removed) */
.layout-chips {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.layout-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  box-sizing: border-box;
  border: var(--ctrl-border);
  background: transparent;
  border-radius: 999px;
  padding: 0 5px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}

.layout-chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.layout-ico {
  width: 26px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 2px;
  flex: 0 0 auto;
}

.layout-ico-1 {
  border: 1.5px solid #555;
  background: #fafafa;
}

/* 2×2 poster: four mini pages with borders like the 1-page icon */
.layout-ico-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
  padding: 0;
  overflow: hidden;
  background: #555; /* gutter = page borders */
  border: 1.5px solid #555;
  border-radius: 2px;
}

.layout-ico-4 i {
  display: block;
  min-width: 0;
  min-height: 0;
  background: #fafafa;
  margin: 0;
  padding: 0;
}

/* Line weight / dash for all outlines (animals, objects, free-draw) */
:root {
  --line-w: 1px;
  --line-dash: none;
  --text-stroke: 0.4px;
}

/*
 * Shared floating-panel chrome (stroke dock, toolbox, font, stickers):
 * body left · right rail = grabber (middle, flex) + close/collapse below.
 * NEVER printed (see @media print + hideForPrint + is-printing).
 */
.float-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  box-sizing: border-box;
}

.float-panel-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Right rail: grab fills middle; extra control sits under it */
.float-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 26px;
  width: 26px;
  align-self: stretch;
  padding: 0 0 0 2px;
  order: 99; /* always trailing (right) even if markup order drifts */
  box-sizing: border-box;
}

.float-grip,
.toolbox-grip {
  flex: 1 1 auto;
  width: 26px;
  min-width: 26px;
  min-height: 28px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 0.85rem;
  letter-spacing: -0.12em;
  cursor: grab;
  padding: 2px 0;
  border-radius: 10px;
  touch-action: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}

.float-grip:active,
.toolbox-grip:active {
  cursor: grabbing;
  background: #f0f0f0;
}

.float-grip:hover,
.toolbox-grip:hover {
  background: color-mix(in srgb, var(--accent) 12%, #f4f4f4);
}

/* Close / collapse under the grabber */
.float-extra,
.toolbox-close,
.stroke-dock-collapse,
.symbol-bag-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0 0 1px;
  padding: 0;
  border: var(--ctrl-border);
  border-radius: 999px;
  background: #f2f2f2;
  color: #666;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.float-extra:hover,
.float-extra:focus-visible,
.toolbox-close:hover,
.toolbox-close:focus-visible,
.stroke-dock-collapse:hover,
.stroke-dock-collapse:focus-visible,
.symbol-bag-close:hover,
.symbol-bag-close:focus-visible {
  background: #e4e4e4;
  color: #222;
  outline: none;
}

.float-extra:active,
.toolbox-close:active,
.stroke-dock-collapse:active,
.symbol-bag-close:active {
  transform: scale(0.94);
}

/*
 * Stroke dock — STAGE-level floater (child of main.stage).
 * Default home: under paper (portrait) or RIGHT controls column (landscape side layout).
 * Drag host = whole stage so it can leave the canvas.
 */
.stroke-dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 28;
  padding: 5px 4px 5px 8px;
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
  border: var(--ctrl-border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  touch-action: none;
  max-width: min(96%, 280px);
  color: var(--ink);
}

/* Landscape side column: keep dock readable when parked over controls */
@media (orientation: landscape) and (min-width: 640px) {
  .stroke-dock {
    max-width: min(96%, 260px);
    z-index: 32;
  }
}

.stroke-dock[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-printing .stroke-dock,
body.is-printing .stroke-bar,
body.is-printing .stroke-reel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.stroke-dock-collapse {
  font-size: 1.05rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 70%, #666);
  border-color: color-mix(in srgb, var(--accent) 28%, #ccc);
}

/* Collapsed: only right rail remains */
.stroke-dock[data-collapsed="true"] {
  padding: 5px 4px;
  max-width: none;
  gap: 0;
}

.stroke-dock[data-collapsed="true"] .stroke-bar {
  display: none !important;
}

/* Rail on right: expanded › collapses; collapsed ‹ expands */
.stroke-dock[data-collapsed="true"] .stroke-dock-collapse-ico {
  display: inline-block;
  transform: scaleX(-1);
}

/*
 * Stroke bar body — layout stack + reels + smiley, tight wrap.
 */
.stroke-bar {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  color: var(--ink);
  min-width: 0;
}

/* Print layout 1 / 4 — vertical stack matching reel height */
.stroke-layout.layout-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 88px;
  padding: 4px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #c8d0d8);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.1);
  box-sizing: border-box;
}

.stroke-layout .layout-chip {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
  border: var(--ctrl-border);
  background: transparent;
  gap: 0;
  box-shadow: none;
  font-size: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.stroke-layout .layout-chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.stroke-layout .layout-ico {
  width: 20px;
  height: 15px;
}

/* Narrow reels — fixed width so thickness “5.5” doesn’t widen the dock */
.stroke-reel {
  --reel-w: 48px;
  --reel-h: 88px;
  --slot-h: calc(var(--reel-h) / 3);
  position: relative;
  width: var(--reel-w);
  min-width: var(--reel-w);
  max-width: var(--reel-w);
  height: var(--reel-h);
  min-height: var(--reel-h);
  flex: 0 0 var(--reel-w);
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #c8d0d8);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.1);
  box-sizing: border-box;
  overflow: hidden;
  cursor: ns-resize; /* whole reel is a vertical slider */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.stroke-reel:hover,
.stroke-reel:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, #aaa);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
    0 2px 10px rgba(25, 45, 75, 0.12);
}

.stroke-reel.is-dragging {
  border-color: var(--accent);
}

/* 3 fixed rows — never flex-collapse */
.stroke-reel-rows {
  display: grid;
  grid-template-rows: var(--slot-h) var(--slot-h) var(--slot-h);
  grid-template-columns: 1fr;
  width: 100%;
  height: var(--reel-h);
  min-height: var(--reel-h);
  position: relative;
  z-index: 2;
}

/* Center selection chrome */
.stroke-reel-rows::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: var(--slot-h);
  height: var(--slot-h);
  border-radius: 9px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  z-index: 0;
}

/* Soft top/bottom fade (drawn over outer rows) */
.stroke-reel::before,
.stroke-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 3;
  pointer-events: none;
}
.stroke-reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, transparent 100%);
}
.stroke-reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, transparent 100%);
}

.stroke-reel-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--slot-h, 29.333px);
  min-height: var(--slot-h, 29.333px);
  max-height: var(--slot-h, 29.333px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink, #152033);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  /* Inherit ns-resize from reel — previews are still tappable, not “fake buttons” */
  cursor: inherit;
  overflow: hidden;
}

button.stroke-reel-slot {
  cursor: inherit;
}

.stroke-reel-slot.is-prev,
.stroke-reel-slot.is-next {
  opacity: 0.45;
}

.stroke-reel-slot.is-prev:hover:not(.is-empty),
.stroke-reel-slot.is-next:hover:not(.is-empty) {
  opacity: 0.9;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.stroke-reel-slot.is-cur {
  opacity: 1;
}

.stroke-reel-slot.is-empty {
  opacity: 0.15;
  pointer-events: none;
  cursor: inherit;
}

.stroke-reel-slot.is-tick .stroke-num,
.stroke-reel-slot.is-tick .stroke-line {
  animation: stroke-reel-tick 0.15s ease;
}

@keyframes stroke-reel-tick {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/*
 * Thickness numbers — fixed slot width; scale text so “5.5” never widens the reel.
 * --num-scale set from JS (1 for short, ~0.82 for multi-char).
 */
.stroke-num {
  display: block;
  max-width: 100%;
  font-weight: 800;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  transform: scale(var(--num-scale, 1));
  transform-origin: center center;
  white-space: nowrap;
}

.stroke-reel-slot.is-cur .stroke-num {
  font-size: 0.98rem;
}

.stroke-num.is-wide {
  --num-scale: 0.82;
  letter-spacing: -0.04em;
}

.stroke-reel-slot.is-cur .stroke-num.is-wide {
  --num-scale: 0.88;
}

/*
 * Line previews — fixed 12px box, stroke painted on the mid-line
 * (avoids border-bottom sitting low / border-box collapsing dashes).
 */
.stroke-line {
  display: block;
  width: 22px;
  height: 12px;
  min-height: 12px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  pointer-events: none;
  flex-shrink: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 3px;
}

/* Solid bar — full mid strip */
.stroke-line-solid {
  background-image: linear-gradient(
    var(--ink, #152033),
    var(--ink, #152033)
  );
  background-size: 100% 3px;
}

/* Dashed — mid strip with gaps */
.stroke-line-dash {
  background-image: repeating-linear-gradient(
    to right,
    var(--ink, #152033) 0 4px,
    transparent 4px 7px
  );
  background-size: 100% 3px;
}

/* Dotted — mid row of dots */
.stroke-line-dot {
  background-image: radial-gradient(
    circle closest-side,
    var(--ink, #152033) 55%,
    transparent 58%
  );
  background-size: 4.5px 3.5px;
  background-position: center;
  background-repeat: repeat-x;
  width: 20px;
}

.stroke-reel-slot.is-cur .stroke-line {
  width: 24px;
  background-size: 100% 3.5px;
}

.stroke-reel-slot.is-cur .stroke-line-dot {
  width: 22px;
  background-size: 5px 3.5px;
}

/* Smiley — same shell height as reels (larger hit area) */
.stroke-toolbox-btn {
  width: 48px;
  height: 88px;
  min-width: 48px;
  max-width: 48px;
  min-height: 88px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #c8d0d8);
  border-radius: 14px;
  background: color-mix(in srgb, var(--chip) 70%, #fff);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.1);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.55rem;
  line-height: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 380px) {
  .stroke-reel {
    --reel-w: 44px;
    --reel-h: 80px;
  }
  .stroke-layout.layout-chips {
    height: 80px;
  }
  .stroke-layout .layout-chip {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .stroke-toolbox-btn {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 80px;
    min-height: 80px;
    font-size: 1.35rem;
  }
  .stroke-num {
    font-size: 0.82rem;
  }
  .stroke-reel-slot.is-cur .stroke-num {
    font-size: 0.88rem;
  }
}

.stroke-toolbox-btn:hover,
.stroke-toolbox-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, var(--chip));
  outline: none;
}

.stroke-toolbox-btn.is-open,
.stroke-toolbox-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 28%, var(--chip));
  box-shadow: inset 0 0 0 2px var(--accent), 0 2px 8px rgba(25, 45, 75, 0.12);
}

.stroke-toolbox-ico {
  display: block;
  filter: none;
}

[data-theme="sand"] .stroke-bar {
  border-color: #d5cbb8;
  box-shadow: 0 2px 8px rgba(50, 40, 20, 0.08);
}

/* Compact update chip — single row, no overflow */
.sw-update-banner {
  position: fixed;
  left: 50%;
  bottom: max(12px, calc(var(--safe-b) + 10px));
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  max-width: min(94vw, 280px);
  padding: 6px 6px 6px 12px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--accent) 92%, #111);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(20, 35, 55, 0.28);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  overflow: hidden;
}

.sw-update-banner[hidden] {
  display: none !important;
}

.sw-update-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7rem;
}

.sw-update-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  min-width: 2.5rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  background: #fff;
  color: var(--accent-dark, var(--accent));
  line-height: 1;
}

.sw-update-btn:active {
  transform: scale(0.97);
}

/* Always a round × — never i18n long text */
.sw-update-dismiss {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  max-width: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

/* Row: § Impressum · ♡ Danke/Thanks tip · Location pill */
.settings-gps {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Pill: label + 📍 — medium width in the shared row */
.gps-toggle {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #d5dde4;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  box-sizing: border-box;
}

.gps-toggle .gps-label {
  text-align: center;
  min-width: 0;
  line-height: 1.2;
}

.gps-toggle .gps-pin {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  justify-self: end;
}

.gps-toggle.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.motif-svg-host {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motif-svg-host svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Animal / object motif lines follow thickness slider (0 = thin dashed) */
.motif-svg-host svg,
.motif-svg-host svg [stroke],
.motif-svg-host svg path,
.motif-svg-host svg circle,
.motif-svg-host svg ellipse,
.motif-svg-host svg line,
.motif-svg-host svg polyline,
.motif-svg-host svg polygon,
.motif-svg-host svg rect {
  stroke-width: var(--line-w) !important;
  stroke-dasharray: var(--line-dash);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Free-draw shape outlines (SVG faces) — same slider */
.board-shape-face {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  display: block;
}

.board-shape-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.board-shape-svg,
.board-shape-svg * {
  fill: none !important;
  stroke: #222;
  stroke-width: var(--line-w) !important;
  stroke-dasharray: var(--line-dash);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.settings-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

/* Sleek language band: ‹ · side · [center] · side · ›  (world row) */
.lang-panel-inline {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.lang-cycler {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.lang-cyc-nav {
  width: 28px;
  height: 32px;
  padding: 0;
  border: 1px solid #d5dde4;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.lang-cyc-nav:active {
  transform: scale(0.96);
}

.lang-cyc-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 34px;
  padding: 2px 4px;
  border: 1px solid #d5dde4;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #eef2f6) 88%, #fff);
  box-sizing: border-box;
}

.lang-cyc-side {
  border: none;
  background: transparent;
  color: var(--muted, #6a7585);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 2px;
  cursor: pointer;
  opacity: 0.72;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-cyc-side.is-left {
  text-align: right;
  justify-self: end;
  max-width: 100%;
}

.lang-cyc-side.is-right {
  text-align: left;
  justify-self: start;
  max-width: 100%;
}

.lang-cyc-mid {
  border: none;
  background: var(--chip-active, #3a4258);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 35, 55, 0.14);
  justify-self: center;
  min-width: 2.6rem;
  line-height: 1.1;
}

.lang-cyc-mid:focus-visible,
.lang-cyc-nav:focus-visible,
.lang-cyc-side:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.lang-cyc-mid[aria-expanded="true"] {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 55%, #fff),
    0 2px 8px rgba(20, 35, 55, 0.14);
}

/* Full overview grid (center tap) — compact chips under the band */
.lang-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 2px 0 0;
  animation: pop 0.12s ease-out;
}

.lang-overview[hidden] {
  display: none !important;
}

.lang-chip {
  border: 1px solid #d5dde4;
  background: var(--bg);
  border-radius: 8px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--ink);
  min-width: 0;
}

.lang-chip.active {
  background: var(--chip-active);
  border-color: var(--chip-active);
  color: #fff;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Stage: portrait = canvas over controls; landscape = canvas | resizer | controls —— */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  flex: 1 1 auto;
  touch-action: manipulation;
  user-select: none;
  gap: 2px;
  padding-top: 4px;
}

.stage-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Paper sizes itself from frame container — real A4 ratio */
  container-type: size;
  container-name: stage-canvas;
}

.split-resizer {
  display: none;
  flex: 0 0 10px;
  width: 10px;
  min-width: 10px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 35%, var(--chip));
  cursor: col-resize;
  touch-action: none;
  align-self: stretch;
  position: relative;
  z-index: 30;
  pointer-events: auto;
}

.split-resizer::after {
  content: "";
  position: absolute;
  /* Fat hit area, thin visual bar */
  inset: 0 -6px;
  border-radius: 999px;
}

.split-resizer::before {
  content: "";
  position: absolute;
  inset: 12% 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 60%, #fff);
  pointer-events: none;
}

.split-resizer:hover,
.split-resizer:focus-visible,
.split-resizer.is-dragging {
  background: color-mix(in srgb, var(--accent) 50%, var(--chip));
  outline: none;
}

.stage-controls {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}

/* When chrome parks here, pin stacks to the top of the column */
body.top-chrome-in-controls .stage-controls {
  justify-content: flex-start;
}

body.top-chrome-in-controls .stage-controls .actions {
  margin-top: auto; /* print stays near bottom of right column */
}

.stage-controls .actions,
.stage-controls .btn-print,
.stage-controls .swipe-zone {
  pointer-events: auto;
  position: relative;
  z-index: 8;
}

/*
 * Frame: paper dead-center in full cell; chevrons float on top (no reserved L/R gutter).
 * Full area → simpler scale/center for A4.
 */
.frame-row {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  container-type: size;
  container-name: frame;
}

/*
 * ‹ › — side floaters. The whole button box is the hit target (not just the glyph).
 * Width/height = full tappable strip; glyph stays centered via grid.
 */
.nav-chevron {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  color: var(--accent);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  /* Tall side strip — full box is clickable */
  height: min(220px, 58%);
  min-height: 88px;
  width: max(48px, var(--chevron-w, 28px));
  min-width: 48px;
  max-width: 56px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
  opacity: 0.88;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  z-index: 8;
  pointer-events: auto;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 10px rgba(20, 35, 55, 0.12);
  overflow: visible;
  isolation: isolate;
}

/* Invisible expanded hit pad — still part of the <button> hit target */
.nav-chevron::before {
  content: "";
  position: absolute;
  top: -12%;
  bottom: -12%;
  width: 64px;
  z-index: -1;
  pointer-events: auto;
}

#btn-prev.nav-chevron::before {
  left: -10px;
  right: auto;
}

#btn-next.nav-chevron::before {
  right: -10px;
  left: auto;
}

#btn-prev.nav-chevron {
  left: max(2px, var(--safe-l, 0px));
  right: auto;
}

#btn-next.nav-chevron {
  right: max(2px, var(--safe-r, 0px));
  left: auto;
}

.nav-chevron:hover,
.nav-chevron:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 28%, #fff);
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  outline: none;
}

.nav-chevron:active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 36%, #fff);
  transform: translateY(-50%) scale(0.98);
}

.paper {
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 4px;
  margin: 0 auto;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #eee4da;
  flex-shrink: 1;
  pointer-events: auto;
  /* Centered in frame-row */
  justify-self: center;
  align-self: center;
}

/*
 * Fit largest true A4/Letter inside the frame (platform scale, no +/-).
 * frame is a size container → cqi/cqb are the safe inset area between chevrons.
 */
.paper.paper-a4 {
  aspect-ratio: 210 / 297;
  width: min(100cqi, calc(100cqb * 210 / 297));
  height: min(100cqb, calc(100cqi * 297 / 210));
  max-width: 100%;
  max-height: 100%;
}

.paper.paper-letter {
  aspect-ratio: 8.5 / 11;
  width: min(100cqi, calc(100cqb * 8.5 / 11));
  height: min(100cqb, calc(100cqi * 11 / 8.5));
  max-width: 100%;
  max-height: 100%;
}

/* Fallback if container queries unavailable */
@supports not (width: 1cqi) {
  .paper.paper-a4 {
    width: min(100%, calc(72dvh * 210 / 297));
    height: min(72dvh, calc(100vw * 297 / 210));
    max-width: 100%;
    max-height: 100%;
  }
  .paper.paper-letter {
    width: min(100%, calc(72dvh * 8.5 / 11));
    height: min(72dvh, calc(100vw * 11 / 8.5));
    max-width: 100%;
    max-height: 100%;
  }
}

/*
 * Watermark: site mark under art (z 0). Screen size scales with paper;
 * print size set in static @media print + #print-page-style (~52mm wide).
 */
.paper-watermark,
.print-watermark {
  position: absolute;
  top: 2%;
  right: 2.4%;
  z-index: 0; /* under motif-layer (1) and board (2+) */
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0 0 2px;
  border: none;
  background: none;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(0.85rem, 3.6vmin, 1.35rem);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.1px color-mix(in srgb, var(--ink, #152033) 28%, transparent);
  text-decoration: none;
  border-bottom: 2.5px dashed color-mix(in srgb, var(--ink, #152033) 32%, transparent);
}



/* Motif layer: under watermark? No — above watermark (z0), interactive wrap only */
.motif-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* only .motif-wrap receives gestures */
  background: transparent;
}

.paper:not(.is-blank) .motif-layer {
  pointer-events: none;
}

.motif-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  touch-action: none;
  cursor: grab;
  transition: none;
  pointer-events: auto;
  z-index: 1;
  background: transparent;
  box-sizing: border-box;
}

.motif-wrap:active {
  cursor: grabbing;
}

.paper.is-blank .motif-layer,
.paper.is-blank .motif-wrap {
  display: none !important;
  pointer-events: none !important;
}

/* Small corner handle only — never a full-width bar */
.motif-resize {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 6;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  border-radius: 8px;
  border: 1px solid #222;
  background: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: nwse-resize;
  touch-action: none;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  pointer-events: auto;
  /* kill any accidental stretch */
  align-self: flex-end;
  flex: 0 0 auto;
}

.paper.is-blank .motif-resize {
  display: none !important;
}

/*
 * Poster cut guide — ABOVE the drawing (pointer-events: none).
 * Layout 1: hidden. Layout 2/4: dashed cuts matching print tiles.
 */
.layout-preview {
  position: absolute;
  inset: 0;
  z-index: 2; /* above motif art, never captures clicks */
  display: grid;
  gap: 0;
  pointer-events: none !important;
  box-sizing: border-box;
  background: transparent;
}

.layout-preview[hidden] {
  display: none !important;
}

.layout-tile {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: transparent;
  border: none;
}

/* Soft page number in corner of each cut tile */
.layout-tile::after {
  content: attr(data-n);
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.7rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 75%, #444);
  opacity: 0.85;
  text-shadow: 0 0 4px #fff, 0 0 2px #fff;
  pointer-events: none;
}

/* Layout 2: vertical cut (left | right) */
.layout-preview.layout-2 .layout-tile:first-child {
  border-right: 2px dashed color-mix(in srgb, var(--accent) 70%, #666);
}

/* Layout 4: cross cuts */
.layout-preview.layout-4 .layout-tile:nth-child(1) {
  border-right: 2px dashed color-mix(in srgb, var(--accent) 70%, #666);
  border-bottom: 2px dashed color-mix(in srgb, var(--accent) 70%, #666);
}
.layout-preview.layout-4 .layout-tile:nth-child(2) {
  border-bottom: 2px dashed color-mix(in srgb, var(--accent) 70%, #666);
}
.layout-preview.layout-4 .layout-tile:nth-child(3) {
  border-right: 2px dashed color-mix(in srgb, var(--accent) 70%, #666);
}

.paper.is-blank .layout-preview {
  opacity: 0.4;
}

.motif-wrap img,
.motif-wrap .motif-svg-host {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.motif-wrap .motif-svg-host svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.motif-svg-host {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  min-width: 0;
  min-height: 0;
}

/*
 * Landscape / wide: CSS grid so the splitter actually moves columns.
 * Paper stays portrait A4 (no sheet distortion). Controls on the right.
 */
@media (orientation: landscape) and (min-width: 640px) {
  .stage {
    display: grid;
    grid-template-columns:
      minmax(200px, var(--stage-left, 1fr))
      12px
      minmax(150px, var(--stage-right, 280px));
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding-top: 2px;
  }

  .stage-canvas {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .split-resizer {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    flex: none;
    margin: 4px 0;
    justify-self: stretch;
  }

  .stage-controls {
    grid-column: 3;
    grid-row: 1;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: 100%;
    justify-content: flex-start;
    padding: 8px 10px 8px 4px;
    box-sizing: border-box;
    overflow: auto;
  }

  /* Chrome slot always reserves a bit of top of the right column */
  .controls-chrome-slot {
    display: block;
    min-height: 0;
  }

  .stage-controls .actions {
    max-width: 100%;
    width: fit-content;
    margin-inline: auto;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .stage-controls .stroke-bar {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    margin-inline: auto;
  }

  .stage-controls .stroke-toolbox-btn {
    margin: 0;
  }

  /* Print in middle; swipe pads above / below (still tappable) */
  .stage-controls .print-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .stage-controls .swipe-zone {
    min-height: 40px;
    flex: 0 0 auto;
    pointer-events: auto;
    z-index: 2;
  }

  .stage-controls .btn-print {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Portrait sheet in landscape UI — fit cell, keep A4 ratio (no distort) */
  .paper.paper-a4,
  .paper.is-landscape.paper-a4 {
    aspect-ratio: 210 / 297;
    width: min(100cqi, calc(100cqb * 210 / 297));
    height: min(100cqb, calc(100cqi * 297 / 210));
    max-width: 100%;
    max-height: 100%;
  }

  .paper.paper-letter,
  .paper.is-landscape.paper-letter {
    aspect-ratio: 8.5 / 11;
    width: min(100cqi, calc(100cqb * 8.5 / 11));
    height: min(100cqb, calc(100cqi * 11 / 8.5));
    max-width: 100%;
    max-height: 100%;
  }

  .frame-row {
    padding: 0; /* chevrons still absolute float */
  }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  .stage-controls {
    padding: 4px 6px;
  }

  .stage-controls .btn-print {
    padding: 8px 14px;
    font-size: 0.95rem;
    min-height: 40px;
  }
}


/* —— Board overlay: free-draw + stickers on every page —— */
.blank-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none; /* items / pencil opt-in */
  touch-action: none;
  display: flex;
  flex-direction: column;
}

.blank-layer[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Items catch taps; empty overlay passes through to motif pan/swipe */
.blank-layer .board-items {
  pointer-events: none;
}
.blank-layer .board-item {
  pointer-events: auto;
}

.blank-layer.is-pencil {
  pointer-events: auto;
}
.blank-layer.is-pencil .board-items {
  pointer-events: none; /* draw on layer, not blocked by empty items root */
}

.paper.is-blank .blank-layer {
  pointer-events: auto; /* full free-draw canvas */
}
.paper.is-blank .blank-layer .board-items {
  pointer-events: auto;
}

.paper.is-blank .motif-wrap {
  display: none;
}

.paper.is-blank .motif-title {
  display: none !important;
}

.board-items {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.board-item {
  position: absolute;
  transform: translate(-50%, -50%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
  cursor: grab;
}

.board-item.is-selected {
  z-index: 5;
}

/* Shapes: outline only (SVG faces — thickness from --line-w) */
.board-item.board-shape {
  min-width: 12%;
  min-height: 10%;
}

/* Text objects — outline weight follows settings slider */
.board-item.board-text {
  min-width: 8%;
  max-width: 80%;
  padding: 4px 6px;
}

.board-text-input {
  outline: none;
  min-width: 2ch;
  min-height: 1.2em;
  color: transparent;
  -webkit-text-stroke: var(--text-stroke, 1.2px) #222;
  paint-order: stroke fill;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: center;
  caret-color: #111;
  white-space: pre-wrap;
  word-break: break-word;
}

.board-text-input:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  -webkit-text-stroke: 0;
  font-weight: 600;
}

.board-text-input:focus {
  color: #111;
  -webkit-text-stroke: 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 6px;
}

.board-item.font-rounded .board-text-input {
  font-family: "Segoe UI Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
}

.board-item.font-sans .board-text-input {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.board-item.font-serif .board-text-input {
  font-family: Georgia, "Times New Roman", serif;
}

.board-item.is-selected .board-text-input,
.board-item.is-selected .board-shape-face {
  outline: 2px dashed color-mix(in srgb, var(--accent) 70%, #222);
  outline-offset: 3px;
}

.board-item-tools {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 6;
}

.bit-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #222;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.board-resize {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 26px;
  height: 26px;
  border: 1px solid #222;
  border-radius: 7px;
  background: #fff;
  cursor: nwse-resize;
  touch-action: none;
  padding: 0;
  z-index: 6;
}

.board-resize::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  pointer-events: none;
}

/* Floating toolbox — stage-level (with stroke dock); opens ABOVE combo dock */
.board-toolbox {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  /* Above stroke-dock (28–32) so first open is never under the combo bar */
  z-index: 34;
  gap: 6px;
  padding: 8px 4px 8px 10px;
  background: rgba(255, 255, 255, 0.98);
  border: var(--ctrl-border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  max-width: min(96%, 460px);
  touch-action: none;
}

.board-toolbox[hidden] {
  display: none !important;
}

.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 6px;
}

.tool-btn {
  width: 44px;
  height: 44px;
  border: var(--ctrl-border);
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
}

/* SVG tool icons — fixed px size, true center (no font metrics) */
.tool-btn .tool-ico {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0;
  flex-shrink: 0;
  overflow: visible;
}

/* Colored tools (pen stays neutral chip) */
.tool-btn-text {
  background: color-mix(in srgb, #3a6ea5 22%, #fff);
  color: #1e4a7a;
}
.tool-btn-cloud {
  background: color-mix(in srgb, #5b9fd4 28%, #fff);
  color: #1a6a9e;
}
.tool-btn-star {
  background: color-mix(in srgb, #f0c040 35%, #fff);
  color: #c99200;
}
/* Sticker bag — theme chip (not yellow), bright glyph */
.tool-btn-smile {
  background: var(--chip);
  color: var(--ink);
  font-size: 1.55rem;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent);
}
.tool-btn-heart {
  background: color-mix(in srgb, #e85d75 28%, #fff);
  color: #c2185b;
}
.tool-btn-circle {
  background: color-mix(in srgb, #26a69a 26%, #fff);
  color: #00695c;
}
.tool-btn-box {
  background: color-mix(in srgb, #7e57c2 24%, #fff);
  color: #4527a0;
}
.tool-btn-undo {
  background: color-mix(in srgb, #78909c 22%, #fff);
  color: #37474f;
}
.tool-btn-clear {
  background: color-mix(in srgb, #ef5350 22%, #fff);
  color: #b71c1c;
}

.tool-btn:active {
  transform: scale(0.94);
  filter: brightness(0.96);
}

.tool-btn.active {
  background: var(--chip-active);
  color: #fff;
  box-shadow: inset 0 0 0 1px #222;
}

/* Freehand pencil mode */
.blank-layer.is-pencil {
  cursor: crosshair;
  touch-action: none;
}

.blank-layer.is-pencil .board-items {
  pointer-events: none;
}

.board-item.board-sticker {
  /* no max-width — stickers scale freely with fontSize (cqh) */
  min-width: 0;
  max-width: none;
  padding: 2px;
}

.board-sticker {
  line-height: 1;
  text-align: center;
  user-select: none;
  max-width: none;
  max-height: none;
  filter: drop-shadow(0 0 0.4px #222);
}

.board-item.board-stroke-wrap {
  z-index: 1;
  pointer-events: none;
}

.board-item.board-stroke-wrap.is-selected {
  pointer-events: auto;
  outline: none;
}

.board-stroke-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.board-stroke-svg path {
  stroke: #111;
  stroke-width: var(--line-w, 3px);
  fill: none;
  vector-effect: non-scaling-stroke;
}

.board-pop {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 9;
  gap: 4px;
  max-width: 90%;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  border: var(--ctrl-border-soft);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

/* Stage pops (font + symbols): body · right rail — JS pins ABOVE toolbox */
.symbol-bag.board-pop,
.font-menu.board-pop {
  z-index: 36; /* above toolbox (34) + stroke dock */
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  transform: none;
  max-width: min(300px, 94%);
  padding: 6px 4px 6px 8px;
  touch-action: none;
}

.font-menu.board-pop {
  max-width: none;
  flex-wrap: nowrap;
}

.font-menu .font-menu-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.symbol-bag .symbol-bag-body {
  /* Even square grid — no jagged flex wrap from emoji width variance */
  display: grid;
  grid-template-columns: repeat(6, 36px);
  grid-auto-rows: 36px;
  gap: 5px;
  justify-content: start;
  align-content: start;
  max-height: min(42vh, 240px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 0;
}

.symbol-bag .sym-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  font-variant-emoji: emoji;
  overflow: hidden;
}

.board-pop[hidden] {
  display: none !important;
}

#btn-symbol-bag.active {
  background: var(--chip-active);
  color: #fff;
  box-shadow: inset 0 0 0 1px #222;
}

.font-opt,
.font-size-btn,
.sym-btn {
  border: var(--ctrl-border);
  background: var(--bg);
  border-radius: 8px;
  min-width: 34px;
  height: 34px;
  cursor: pointer;
  font-weight: 700;
  box-sizing: border-box;
}

.font-opt.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, #fff);
}

.font-opt.font-rounded {
  font-family: "Segoe UI Rounded", "Nunito", system-ui, sans-serif;
}

.font-opt.font-sans {
  font-family: system-ui, sans-serif;
}

.font-opt.font-serif {
  font-family: Georgia, serif;
}

.sym-btn {
  font-size: 1.1rem;
  min-width: 36px;
}

/* Print board items — sizes come from freeboard inline (mm / %); no CSS caps */
/* Boot splash is mostly inline; keep print-safe if class sticks */
#boot-splash.is-done {
  display: none;
}

@media print {
  .print-board-item {
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .print-board-item.print-shape {
    /* width/height set inline as % of page — must not be capped */
    max-width: none !important;
    max-height: none !important;
  }

  .print-board-item .board-shape-face {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
  }

  .print-board-item .board-shape-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .print-board-item .board-shape-svg,
  .print-board-item .board-shape-svg * {
    fill: none !important;
    stroke: #111;
    stroke-width: var(--line-w) !important;
    stroke-dasharray: var(--line-dash);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .print-board-text {
    color: transparent;
    -webkit-text-stroke: var(--text-stroke, 0.9pt) #111;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.06em;
    max-width: none !important;
  }

  .print-board-sticker {
    line-height: 1;
    text-align: center;
    color: #111;
    -webkit-text-stroke: 0;
    max-width: none !important;
    max-height: none !important;
    /* font-size set inline in mm from freeboard */
  }

  .print-board-stroke {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .print-board-stroke path {
    fill: none;
    stroke: #111;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .print-board-item.font-rounded .print-board-text {
    font-family: "Segoe UI Rounded", "Nunito", system-ui, sans-serif;
  }

  .print-board-item.font-sans .print-board-text {
    font-family: system-ui, sans-serif;
  }

  .print-board-item.font-serif .print-board-text {
    font-family: Georgia, serif;
  }

  /* Free-draw solo + poster tiles need a positioned box for % sizes */
  .print-page.single.is-blank,
  .print-page.print-tile.is-blank {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
  }

  .print-page.print-tile.is-blank {
    padding: 6mm; /* margin strip: dashed fold/glue sit here (see .print-join-*) */
  }

  /*
   * Art layer + board host: fixed content box inside 6mm pad (join dashes
   * live in the pad). Must stay absolute so sticker mm fonts never grow the
   * page min-content (that left a ~¼ empty bottom on multi-sticker prints).
   */
  .print-art-layer {
    position: absolute !important;
    top: 6mm !important;
    right: 6mm !important;
    bottom: 6mm !important;
    left: 6mm !important;
    overflow: hidden !important;
    z-index: 1;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-art-layer > svg.print-poster-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
  }

  .print-board-host {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 2;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Match screen: sticker/text size as % of this host’s height */
    container-type: size;
    container-name: print-board;
  }

  .print-board-host .print-board-item,
  .print-board-host .print-board-stroke {
    /* % positions relative to content box */
  }

  .print-board-sticker,
  .print-board-text {
    /* Inline font-size (cqh / mm) must win — do not override */
    max-width: none !important;
    max-height: none !important;
  }
}

/* Name label — absolute bottom so eye toggle does not reflow the motif */
.motif-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.5%;
  z-index: 3;
  margin: 0;
  padding: 0 10%;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(1rem, 4.2cqw, 1.45rem);
  font-weight: 700;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 0.75px #222;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  line-height: 1.4;
  word-spacing: 0.08em;
  pointer-events: none;
}

.motif-title.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.paper.is-blank .motif-title {
  display: none !important;
}

/* Floating page counter — top of stage, not printed */
.dots,
.dots.page-float {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  position: absolute;
  top: 0.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: auto;
  max-width: 70%;
  min-height: 0;
  padding: 3px 10px;
  margin: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg, #eef2f6) 82%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9cfc4;
  transition: background 0.15s, transform 0.15s;
  flex: 0 0 auto;
}

.dots span.active {
  background: var(--accent);
  transform: scale(1.25);
}

.dots .page-count {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  transform: none !important;
  color: var(--muted, #6b6560);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 2px 6px;
}

.paper.swipe-left {
  animation: swipeL 0.22s ease;
}
.paper.swipe-right {
  animation: swipeR 0.22s ease;
}

@keyframes swipeL {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-20px); opacity: 0.45; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes swipeR {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(20px); opacity: 0.45; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Print CTA only — stroke dock lives on canvas, not here */
.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 4px 6px;
  flex: 0 0 auto;
  margin-top: 2px;
  width: fit-content;
  max-width: min(100%, 360px);
  min-width: 0;
  margin-inline: auto;
  box-sizing: border-box;
  overflow: visible;
  background: color-mix(in srgb, #fff 92%, var(--chip));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #d8dde3);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(25, 45, 75, 0.08);
}

/* Print in the middle; side pads catch motif-change swipes (not the paper) */
.print-row {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: min(100%, 280px);
  min-height: 42px;
}

.swipe-zone {
  touch-action: pan-y;
  /* Quiet hit areas — no heavy chrome */
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
  min-height: 42px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.swipe-zone:active {
  cursor: grabbing;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn-print {
  /* fills from shared primary pill block; keep flex layout for icon+label */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.02em;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  z-index: 1;
}

.btn-print-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Landscape / short height: tighter chrome, still full motif */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --chevron-w: 44px;
  }

  .nav-chevron {
    height: min(120px, 55%);
    min-height: 64px;
    min-width: 44px;
    width: 48px;
    max-width: 52px;
    font-size: 1.5rem;
  }

  .motif-title {
    margin-bottom: 3%;
  }
}

/* Wider desktop: keep vertical paper, don't stretch to ultra-wide */
@media (min-width: 720px) {
  #app {
    max-width: 640px;
    margin: 0 auto;
  }
}

/* —— Guided tutorial: glass card, live UI glows, settings can sit on top —— */
.tutorial-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(18, 28, 42, 0.22);
  pointer-events: auto;
}

/* Critical: when hidden, never intercept clicks / focus */
.tutorial-scrim[hidden],
.tut-callouts[hidden],
.board-toolbox[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Only block the app when tutorial is actually open */
body:not(.tutorial-open) .tutorial-scrim {
  display: none !important;
  pointer-events: none !important;
}

body.tutorial-open .top-bar {
  z-index: 70;
}

body.tutorial-open .settings-panel {
  z-index: 72;
  pointer-events: auto;
}

/*
 * Weather step: ⚙ panel same size as normal app (no squeezed tutorial width).
 * Card placement uses measured box (--tut-set-*) from JS.
 */
body.tutorial-open.tutorial-settings-top .settings-panel {
  z-index: 82;
  isolation: isolate;
  border: 1px solid #d0d8e0;
  border-radius: 14px;
  background: #fff;
  background-clip: padding-box;
  box-shadow:
    0 10px 28px rgba(20, 35, 55, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  /* Match default .settings-panel size — full normal width */
  top: calc(48px + var(--safe-t));
  right: max(6px, var(--safe-r));
  width: min(288px, calc(100vw - 12px));
  max-width: calc(100vw - 12px);
  height: auto;
  max-height: none;
  overflow: visible;
}

body.tutorial-open .actions {
  position: relative;
  z-index: 70;
}

body.tutorial-open .frame-row .nav-chevron {
  /* keep absolute overlay placement; only raise above scrim for glow */
  position: absolute;
  z-index: 70;
}

/* Pulse / glow on the live controls being explained */
.tut-glow {
  /* Do NOT force position:relative — that yanks absolute floaters (stroke-dock) into flow */
  z-index: 73 !important;
  animation: tut-pulse 1.15s ease-in-out infinite;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 75%, #fff),
    0 0 18px 4px color-mix(in srgb, var(--accent) 55%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--accent) 90%, #fff);
  outline-offset: 2px;
}

/* In-flow FABs / chips still need relative for z-index above scrim */
.fab.tut-glow,
.chip-toggle.tut-glow,
.btn-print.tut-glow,
.gps-toggle.tut-glow,
.swipe-zone.tut-glow {
  position: relative;
}

/*
 * Chevrons use transform: translateY(-50%) for vertical centering.
 * tut-pulse’s scale() would overwrite that and jump them down — use a
 * translateY-aware pulse instead (no layout jump on tutorial card 2).
 */
.nav-chevron.tut-glow {
  position: absolute !important;
  animation: tut-pulse-chevron 1.15s ease-in-out infinite;
}

@keyframes tut-pulse-chevron {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-50%) scale(1.04);
    filter: brightness(1.06);
  }
}

.nav-chevron.tut-glow:active {
  transform: translateY(-50%) scale(0.98);
}

.gps-toggle.tut-glow {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 18%, #fff) !important;
  /* Stay tappable even if the glass card overlaps the panel */
  z-index: 90 !important;
}

/* ⚙ FAB glow on weather step — same pulse as other highlights */
#btn-settings.tut-glow {
  z-index: 90 !important;
  position: relative;
}

/*
 * Floating stroke dock on card 4: above scrim (55), BELOW tutorial glass card
 * (85). z-index 90 was covering Skip/Next on the center card.
 */
body.tutorial-open .stroke-dock {
  z-index: 68;
  pointer-events: auto;
}

.stroke-dock.tut-glow {
  position: absolute !important;
  z-index: 68 !important;
  border-radius: 16px;
  /* Pulse without translate — absolute left/top stay put */
  animation: tut-pulse-float 1.15s ease-in-out infinite;
}

@keyframes tut-pulse-float {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 75%, #fff),
      0 0 18px 4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  50% {
    filter: brightness(1.06);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 85%, #fff),
      0 0 22px 6px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}

.stroke-bar.tut-glow,
.swipe-zone.tut-glow {
  border-radius: 999px;
}

.swipe-zone.tut-glow {
  border-style: solid;
  border-color: var(--accent);
}

@keyframes tut-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.06);
  }
}

/* Floaters: never scale (would look like canvas/page jump) */
.stroke-dock.tut-glow,
.board-toolbox.tut-glow {
  transform: none !important;
}

/* Install step only: ↑ ⋮ toward browser chrome (top-right) */
.tut-callouts {
  position: fixed;
  inset: 0;
  z-index: 84;
  pointer-events: none;
}

.tut-callout {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 8px;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, #fff);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(20, 40, 70, 0.2);
  animation: tut-bob 1.2s ease-in-out infinite;
}

.tut-callout[hidden] {
  display: none !important;
}

.tut-callout-browser {
  top: max(4px, var(--safe-t));
  right: max(10px, var(--safe-r));
}

.tut-callout-arrow {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
}

.tut-callout-tag {
  line-height: 1;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@keyframes tut-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}

.tutorial-dialog,
.thanks-dialog {
  border: none;
  border-radius: 22px;
  padding: 0;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow);
}

/* Non-modal glass card — see UI through it; height follows content (no 480px clip) */
.tutorial-dialog {
  position: fixed;
  /* Above stroke-dock glow (68) + scrim (55); FABs for step 3 stay 90 when needed */
  z-index: 85;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  height: fit-content;
  max-height: min(92dvh, 92vh);
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  /* No position tween — step jumps felt like a “strange motion” */
  transition: none;
  box-sizing: border-box;
}

/* Only scroll if content truly exceeds the viewport */
@supports not (height: fit-content) {
  .tutorial-dialog {
    height: auto;
  }
}

/* Weather step (legacy): dock near bottom under open ⚙ */
body.tutorial-card-low .tutorial-dialog {
  top: auto;
  bottom: max(10px, calc(8px + var(--safe-b)));
  transform: translate(-50%, 0);
  max-height: min(50vh, 360px);
  overflow: auto;
}

/*
 * Weather step — layout uses measured ⚙ box (--tut-set-*).
 * Wide: true left-of-settings, height expands into free space under the panel.
 * Narrow / portrait: sit BELOW ⚙ (full width free band) so Next stays on-screen.
 */
body.tutorial-card-beside .tutorial-dialog {
  z-index: 80;
  top: max(8px, var(--tut-set-top, calc(48px + var(--safe-t))));
  bottom: auto;
  left: max(8px, var(--safe-l));
  /* hug left edge of settings when metrics present */
  right: max(
    8px,
    calc(100vw - var(--tut-set-left, 72vw) + 10px)
  );
  width: auto;
  min-width: 0;
  max-width: min(320px, 100%);
  height: fit-content;
  /* From card top down to safe bottom — use free space under settings */
  max-height: calc(
    100dvh - max(8px, var(--tut-set-top, 48px)) - max(10px, var(--safe-b)) - 6px
  );
  margin: 0 0 0 auto;
  transform: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

/*
 * Mobile portrait / narrow: tut card 3 flows BELOW normal-width ⚙ (no side squeeze).
 * top = measured panel bottom + gap → no overlap with settings.
 */
@media (max-width: 700px), ((orientation: portrait) and (max-width: 920px)) {
  body.tutorial-card-beside .tutorial-dialog {
    /* Stack under ⚙ — clear gap from measured bottom */
    top: calc(var(--tut-set-bottom, 42vh) + 12px);
    left: max(10px, var(--safe-l));
    right: max(10px, var(--safe-r));
    bottom: auto;
    width: auto;
    max-width: min(400px, 100%);
    margin-left: auto;
    margin-right: auto;
    /* Fill remaining viewport under settings without climbing back up */
    max-height: calc(
      100dvh - var(--tut-set-bottom, 42vh) - 14px - max(8px, var(--safe-b))
    );
    z-index: 78; /* under settings (82) so panel never paints under glass */
  }

  body.tutorial-card-beside .tutorial-card {
    padding: 14px 14px 12px;
    gap: 7px;
  }

  body.tutorial-card-beside .tutorial-icon {
    width: 48px;
    height: 48px;
    font-size: 1.7rem;
    margin: 0;
  }

  body.tutorial-card-beside .tutorial-card h2 {
    font-size: 1.12rem;
  }

  body.tutorial-card-beside .tutorial-card p#tutorial-body {
    font-size: 0.9rem;
    line-height: 1.38;
  }

  body.tutorial-card-beside .tut-gps-shortcut {
    width: min(100%, 220px);
    padding: 9px 12px;
    font-size: 0.86rem;
  }

  body.tutorial-card-beside .tutorial-actions .btn-pill,
  body.tutorial-card-beside .btn-tutorial-next {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.tutorial-step-label[hidden],
.tutorial-step-label {
  display: none !important;
}

.tutorial-dialog::backdrop,
.thanks-dialog::backdrop {
  background: rgba(30, 20, 10, 0.45);
}

/* Non-modal show() has no backdrop — scrim handles dimming */
.tutorial-dialog:not([open]) {
  display: none;
}

.tutorial-card {
  position: relative;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  height: fit-content;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
  /* Glassmorphism */
  background: color-mix(in srgb, #ffffff 68%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--accent) 12%);
  border-radius: 22px;
  box-shadow:
    0 12px 40px rgba(20, 35, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Easy dismiss — Esc also works; × for touch */
.tutorial-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 70%, transparent);
  color: var(--ink, #222);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(20, 35, 55, 0.1);
}
.tutorial-close:hover,
.tutorial-close:focus-visible {
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.tutorial-close:active {
  transform: scale(0.94);
}

body.tutorial-card-low .tutorial-card,
body.tutorial-card-beside .tutorial-card {
  background: color-mix(in srgb, #ffffff 78%, transparent);
}

/* Long steps (2 browse/print, 3 weather): keep copy fully visible, no inner scroll */
.tutorial-card > * {
  flex: 0 0 auto;
}

.tut-gps-shortcut {
  width: min(100%, 240px);
  margin: 2px auto 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  /* stronger fill so it reads as a real control on glass */
  background: color-mix(in srgb, #fff 92%, var(--accent) 6%);
  box-shadow: 0 4px 14px rgba(20, 35, 55, 0.12);
  cursor: pointer;
  pointer-events: auto;
}

.tut-gps-shortcut[hidden] {
  display: none !important;
}

.tut-gps-shortcut.tut-glow {
  z-index: 1 !important;
}

.tutorial-step-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tutorial-icon {
  font-size: 2.4rem;
  line-height: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--chip);
  border-radius: 50%;
  margin: 4px 0;
}

.tutorial-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.tutorial-card p#tutorial-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.98rem;
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
}

.tutorial-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 4px 0 2px;
  flex-wrap: wrap;
}

.tutorial-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9cfc4;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.tutorial-dot:hover,
.tutorial-dot:focus-visible {
  background: color-mix(in srgb, var(--accent) 55%, #d9cfc4);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tutorial-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}

.tutorial-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

/* .btn-tutorial-next styles with primary pills above */

.settings-install-hint {
  display: block;
  width: 100%;
  margin: 2px 0 0;
  padding: 8px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.settings-install-hint:hover,
.settings-install-hint:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

.settings-install-hint:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Install tip from settings: above settings panel */
body.install-callout-flash .tut-callouts {
  z-index: 95;
}

body.install-callout-flash .tut-callout-browser {
  animation: tut-bob 1.1s ease-in-out infinite, install-callout-in 0.2s ease-out;
}

@keyframes install-callout-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Browser menu ⋮ — larger/bolder so it matches the real chrome icon */
.menu-dots {
  display: inline-block;
  font-size: 1.55em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  vertical-align: -0.12em;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 0.06em;
}

.settings-install-hint .menu-dots {
  font-size: 1.75em;
  vertical-align: -0.18em;
}

#tutorial-body .menu-dots {
  font-size: 1.65em;
  font-weight: 900;
  color: var(--ink);
}

.thanks-card {
  padding: 22px 18px 16px;
  display: grid;
  gap: 10px;
  text-align: center;
}

.impressum-card {
  padding: 22px 20px 18px;
  display: grid;
  gap: 14px;
  text-align: left;
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.impressum-head {
  text-align: center;
  display: grid;
  gap: 4px;
}

.thanks-card h2,
.impressum-card h2 {
  margin: 0;
  font-size: 1.28rem;
}

.impressum-tmg-heading {
  margin: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

.impressum-tmg {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--chip, #eef2f6) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, #e0e4e8);
  text-align: left;
}

.impressum-tmg-label {
  margin: 0 0 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
}

.impressum-operator {
  margin: 0;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink, #152033);
}

.impressum-name {
  font-weight: 800;
}

.impressum-org {
  font-weight: 700;
}

.impressum-mail {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}

.impressum-mail:hover,
.impressum-mail:focus-visible {
  text-decoration: underline;
}

.impressum-brand {
  text-align: center;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 0.95rem !important;
}

.impressum-notes {
  display: grid;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--muted) 28%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, #fff);
  text-align: left;
}

.impressum-notes-heading {
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.impressum-notes-ico {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  background: var(--chip);
  color: var(--accent-dark, var(--accent));
  flex: 0 0 auto;
}

.thanks-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.92rem;
  padding: 0 4px;
}

/*
 * After-print 2×2 map (visual only):
 *  - thick dashed = fold; Schraffur OUTSIDE the thick line
 *  - thin dashed  = glue edge; squiggles OUTSIDE the thin line
 *  - thick wins at the corner (higher z, full length)
 */
.poster-fold-tip {
  margin: 2px 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--chip, #eef2f6) 65%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #e0e4e8);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.poster-fold-arrow {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--muted, #6a7585);
  line-height: 1;
  opacity: 0.85;
}

/* Joined poster: 4 panes flush; seams = folded joins (thick) */
.poster-fold-joined {
  position: relative;
  width: 100px;
  height: 74px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  border: 1.5px solid #444;
  border-radius: 3px;
  overflow: hidden;
  background: #fafafa;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(20, 35, 55, 0.1);
  flex: 0 0 auto;
}

.poster-fold-joined .joined-cell {
  min-width: 0;
  min-height: 0;
  background: #fafafa;
  position: relative;
}

/* Subtle paper grain per pane so joins read as 4 pieces */
.poster-fold-joined .j1 {
  background: linear-gradient(145deg, #fbfbfb 40%, #f0f0f0);
}
.poster-fold-joined .j2 {
  background: linear-gradient(215deg, #fafafa 40%, #efefef);
}
.poster-fold-joined .j3 {
  background: linear-gradient(35deg, #f9f9f9 40%, #f1f1f1);
}
.poster-fold-joined .j4 {
  background: linear-gradient(325deg, #fbfbfb 40%, #eeeeee);
}

/* Soft glue residue along seams (tucked flaps) */
.poster-fold-joined .joined-seam {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
  opacity: 0.55;
}

.poster-fold-joined .joined-seam-h {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' fill='none' stroke='%238a9098' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M1 3 Q3 1 5 3 T9 3 T13 3 T17 3'/%3E%3C/svg%3E");
  background-size: 12px 5px;
}

.poster-fold-joined .joined-seam-v {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 5px;
  margin-left: -2.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='20' fill='none' stroke='%238a9098' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M3 1 Q1 3 3 5 T3 9 T3 13 T3 17'/%3E%3C/svg%3E");
  background-size: 5px 12px;
}

/* Thick fold creases through the joined poster */
.poster-fold-joined .joined-crease {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

.poster-fold-joined .joined-crease-h {
  left: 4%;
  right: 4%;
  top: 50%;
  height: 0;
  margin-top: 0;
  border-top: 2.4px dashed #222;
}

.poster-fold-joined .joined-crease-v {
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 0;
  margin-left: 0;
  border-left: 2.4px dashed #222;
}

.poster-fold-tip[hidden] {
  display: none !important;
}

.poster-fold-grid {
  --band: 30%; /* outer strip for hatch or squiggles */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 108px;
  height: 80px;
  background: #555;
  border: 1.5px solid #555;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.poster-cell {
  position: relative;
  background: #fafafa;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.poster-cell .band,
.poster-cell .edge {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}

/*
 * z-order at corners:
 *   squiggles < thin glue line < hatch (fold side wins) < thick fold line
 */
.poster-cell .band.squig {
  z-index: 1;
}
.poster-cell .edge.thin {
  z-index: 2;
}
.poster-cell .band.hatch {
  z-index: 3;
}
.poster-cell .edge.thick {
  z-index: 4;
}

/* —— Outer bands (OUTSIDE the dashed lines) —— */
.poster-cell .hatch-t,
.poster-cell .squig-t {
  left: 0;
  right: 0;
  top: 0;
  height: var(--band);
}
.poster-cell .hatch-b,
.poster-cell .squig-b {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--band);
}
.poster-cell .hatch-l,
.poster-cell .squig-l {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--band);
}
.poster-cell .hatch-r,
.poster-cell .squig-r {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--band);
}

/* Schraffur only outside thick fold */
.poster-cell .hatch {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 2px,
    rgba(70, 80, 90, 0.3) 2px 3.5px
  );
}

/* Squiggly glue only outside thin line (clear gap from the dash) */
.poster-cell .squig {
  background-repeat: repeat;
  background-color: transparent;
}

.poster-cell .squig-t {
  /* pad bottom = stay outside thin line sitting at top of body */
  padding-bottom: 3px;
  background-clip: content-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14' fill='none' stroke='%234a5560' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 3 Q5 0 9 3 T17 3 T25 3 T33 3'/%3E%3Cpath d='M1 7 Q5 4 9 7 T17 7 T25 7 T33 7'/%3E%3Cpath d='M1 11 Q5 8 9 11 T17 11 T25 11 T33 11'/%3E%3C/svg%3E");
  background-size: 15px 9px;
  background-position: center 2px;
}

.poster-cell .squig-b {
  padding-top: 3px;
  background-clip: content-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14' fill='none' stroke='%234a5560' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 3 Q5 0 9 3 T17 3 T25 3 T33 3'/%3E%3Cpath d='M1 7 Q5 4 9 7 T17 7 T25 7 T33 7'/%3E%3Cpath d='M1 11 Q5 8 9 11 T17 11 T25 11 T33 11'/%3E%3C/svg%3E");
  background-size: 15px 9px;
  background-position: center 2px;
}

.poster-cell .squig-l {
  padding-right: 3px;
  background-clip: content-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='36' fill='none' stroke='%234a5560' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 1 Q0 5 3 9 T3 17 T3 25 T3 33'/%3E%3Cpath d='M7 1 Q4 5 7 9 T7 17 T7 25 T7 33'/%3E%3Cpath d='M11 1 Q8 5 11 9 T11 17 T11 25 T11 33'/%3E%3C/svg%3E");
  background-size: 9px 15px;
  background-position: 2px center;
}

.poster-cell .squig-r {
  padding-left: 3px;
  background-clip: content-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='36' fill='none' stroke='%234a5560' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 1 Q0 5 3 9 T3 17 T3 25 T3 33'/%3E%3Cpath d='M7 1 Q4 5 7 9 T7 17 T7 25 T7 33'/%3E%3Cpath d='M11 1 Q8 5 11 9 T11 17 T11 25 T11 33'/%3E%3C/svg%3E");
  background-size: 9px 15px;
  background-position: 2px center;
}

/*
 * Dashed lines sit at the INNER edge of their outer band
 * (so hatch/squiggle is strictly outside).
 * Thick fold is full length (wins at corner); thin stops short of thick.
 */
.poster-cell .edge.thick.e-t,
.poster-cell .edge.thin.e-t {
  left: 0;
  right: 0;
  top: var(--band);
  height: 0;
}
.poster-cell .edge.thick.e-b,
.poster-cell .edge.thin.e-b {
  left: 0;
  right: 0;
  bottom: var(--band);
  height: 0;
}
.poster-cell .edge.thick.e-l,
.poster-cell .edge.thin.e-l {
  top: 0;
  bottom: 0;
  left: var(--band);
  width: 0;
}
.poster-cell .edge.thick.e-r,
.poster-cell .edge.thin.e-r {
  top: 0;
  bottom: 0;
  right: var(--band);
  width: 0;
}

.poster-cell .edge.thick.e-t {
  border-top: 2.7px dashed #111;
}
.poster-cell .edge.thick.e-b {
  border-bottom: 2.7px dashed #111;
}
.poster-cell .edge.thick.e-l {
  border-left: 2.7px dashed #111;
}
.poster-cell .edge.thick.e-r {
  border-right: 2.7px dashed #111;
}

.poster-cell .edge.thin.e-t {
  border-top: 1px dashed #666;
}
.poster-cell .edge.thin.e-b {
  border-bottom: 1px dashed #666;
}
.poster-cell .edge.thin.e-l {
  border-left: 1px dashed #666;
}
.poster-cell .edge.thin.e-r {
  border-right: 1px dashed #666;
}

/* Thin line yields at corner so thick fold line stays continuous */
.poster-cell.p1 .edge.thin.e-r {
  /* glue right; fold bottom wins at BR corner */
  top: 0;
  bottom: var(--band);
}
.poster-cell.p1 .edge.thick.e-b {
  left: 0;
  right: 0; /* full width — fold wins */
}

.poster-cell.p2 .edge.thin.e-b {
  left: var(--band);
  right: 0;
}
.poster-cell.p2 .edge.thick.e-l {
  top: 0;
  bottom: 0;
}

.poster-cell.p3 .edge.thin.e-t {
  left: 0;
  right: var(--band);
}
.poster-cell.p3 .edge.thick.e-r {
  top: 0;
  bottom: 0;
}

.poster-cell.p4 .edge.thin.e-l {
  top: var(--band);
  bottom: 0;
}
.poster-cell.p4 .edge.thick.e-t {
  left: 0;
  right: 0;
}

/*
 * Squiggles cut off where hatch owns the corner (both bands meet).
 * Hatch keeps full strip into the corner; glue band stops short.
 */
.poster-cell.p1 .squig-r {
  bottom: var(--band);
}
.poster-cell.p1 .hatch-b {
  right: 0; /* hatch wins BR corner */
}

.poster-cell.p2 .squig-b {
  left: var(--band);
}
.poster-cell.p2 .hatch-l {
  bottom: 0;
}

.poster-cell.p3 .squig-t {
  right: var(--band);
}
.poster-cell.p3 .hatch-r {
  top: 0;
}

.poster-cell.p4 .squig-l {
  top: var(--band);
}
.poster-cell.p4 .hatch-t {
  left: 0;
}

.impressum-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.impressum-body {
  font-size: 0.88rem;
}

.impressum-motto {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink, #222);
  line-height: 1.4;
}

.impressum-weather,
.impressum-privacy,
.impressum-cookies,
.impressum-local,
.impressum-print,
.impressum-support {
  font-size: 0.8rem;
  color: var(--muted, #5a6570);
  line-height: 1.45;
}

/* Compact donate strip: amounts + PayPal + Crypto (settings tip dialog only) */
.donate-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 8px;
  margin: 2px 0 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--donate) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--donate) 18%, transparent);
  border-radius: 14px;
}

.donate-amounts {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.donate-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.donate-actions .btn-donate,
.donate-actions .btn-crypto {
  flex: 1 1 0;
  max-width: 140px;
  justify-content: center;
}

.amt-chip {
  border: 1px solid #d5dde4;
  background: #fff;
  border-radius: 10px;
  padding: 5px 7px;
  min-width: 40px;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0;
  font: inherit;
  color: var(--ink);
}

.amt-chip .amt-ico {
  font-size: 0.88rem;
  line-height: 1;
}

.amt-chip .amt-val {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.amt-chip.active {
  border-color: var(--donate);
  background: color-mix(in srgb, var(--donate) 16%, #fff);
  box-shadow: inset 0 0 0 1px var(--donate);
}

/* Shared custom amount (both PayPal + Crypto concatenate this) */
.amt-custom {
  display: flex;
  align-items: center;
  min-width: 3.4rem;
}

.amt-custom input {
  width: 3.6rem;
  max-width: 22vw;
  box-sizing: border-box;
  border: 1px solid #d5dde4;
  background: #fff;
  border-radius: 10px;
  padding: 8px 6px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}

.amt-custom input::-webkit-outer-spin-button,
.amt-custom input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amt-custom input.is-active,
.amt-custom input:focus {
  border-color: var(--donate);
  box-shadow: inset 0 0 0 1px var(--donate);
  outline: none;
}

.amt-custom input.is-invalid {
  border-color: #c44;
  box-shadow: inset 0 0 0 1px #c44;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Crypto: amount is display-only (prefs / last tip chips) — no keyboard */
.crypto-amt-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink, #222);
}

.crypto-amount-value {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid #d5dde4;
  background: #fff;
  color: var(--ink);
  min-width: 4.5rem;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* .btn-donate pill styles shared with .btn-continue */

.btn-crypto {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
  background: linear-gradient(180deg, #2a2f3a 0%, #1a1e28 100%);
  color: #e8f0ff;
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 24, 36, 0.35);
  white-space: nowrap;
}

.btn-crypto:active {
  transform: scale(0.98);
}

/* Crypto tip sheet — Base USDC + BTC QRs */
.crypto-tip-dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: min(94vw, 400px);
  background: transparent;
}

.crypto-tip-dialog::backdrop {
  background: rgba(20, 24, 32, 0.55);
}

.crypto-tip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 14px;
  background: var(--bg, #f4f6f9);
  border-radius: 18px;
  border: 1px solid #d5dde4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.crypto-tip-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.crypto-tip-card > p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted, #5a6570);
  line-height: 1.4;
}

.crypto-qr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}

.crypto-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 14px;
  background: #fff;
  border: 1px solid #d5dde4;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 30, 40, 0.05);
}

.crypto-qr-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, #222);
  text-align: center;
}

.crypto-qr-img {
  width: 136px;
  height: 136px;
  max-width: 100%;
  border-radius: 8px;
  background: #f8f8f8;
  object-fit: contain;
}

.crypto-address-short {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #333;
  word-break: keep-all;
  text-align: center;
  user-select: all;
  max-width: 100%;
}

.crypto-qr-col .btn-crypto-copy {
  width: 100%;
  max-width: 140px;
  border: 1.5px solid #222;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 42px;
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}

.crypto-addr-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.crypto-address {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  word-break: break-all;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #d5dde4;
  border-radius: 10px;
  line-height: 1.35;
}

.btn-crypto-copy {
  flex: 0 0 auto;
  border: 1px solid #222;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.crypto-copy-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--donate-dark, #355f94);
  margin: 0;
}

.crypto-explorer {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--donate, #4a7ab5);
  text-align: center;
}

/* Primary CTAs — filled pill buttons (Weiter malen, print family) */
.btn-continue,
.btn-print,
.btn-donate,
.btn-tutorial-next {
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 22%, transparent);
}

.btn-continue {
  margin-top: 6px;
  font-size: 1rem;
  padding: 13px 22px;
  min-height: 48px;
}

.btn-continue.btn-continue-block {
  width: 100%;
  display: block;
}

.btn-continue:active,
.btn-print:active,
.btn-donate:active,
.btn-tutorial-next:active {
  transform: scale(0.98);
}

.btn-print {
  font-size: 1.05rem;
  padding: 9px 22px;
  min-height: 42px;
  line-height: 1.15;
}

.btn-donate {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--donate) 0%, var(--donate-dark) 100%);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--donate) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--donate-dark) 30%, transparent);
  white-space: nowrap;
}

.btn-tutorial-next {
  margin-left: auto;
  padding: 12px 22px;
  box-shadow: 0 6px 16px rgba(232, 78, 44, 0.3);
}

.impressum-footer {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e4e9ef;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted, #6a7585);
  font-style: italic;
  text-align: center;
}

/* Tiny credit under legal story — version JS-synced from SW cache */
.impressum-ver {
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.62rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--muted, #6a7585) 88%, #999);
  text-align: center;
}

/* .stealth-link — unstyled brand target (JS opens on double activate) */
.stealth-link,
.stealth-link:link,
.stealth-link:visited,
.stealth-link:hover,
.stealth-link:active,
.stealth-link:focus {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

.btn-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}

/* Secondary pill (tutorial Skip) — matches primary pill shape */
.btn-pill {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}

.btn-pill-muted {
  background: color-mix(in srgb, var(--chip) 88%, #fff);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #d5dde4);
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.08);
}

/* Kill UA black focus frame on first dialog open (autofocus → first button) */
.btn-pill:focus,
.btn-pill-muted:focus,
#tutorial-skip:focus {
  outline: none;
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.08);
}

.btn-pill:focus-visible,
.btn-pill-muted:focus-visible,
#tutorial-skip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 2px 8px rgba(25, 45, 75, 0.08);
}

.btn-pill-muted:active {
  transform: scale(0.98);
}

.tutorial-actions .btn-pill-muted {
  flex: 0 0 auto;
}

.impressum-card .btn-continue {
  margin-top: 8px;
}

.impressum-dialog {
  border: none;
  border-radius: 22px;
  padding: 0;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow);
}

.impressum-dialog::backdrop {
  background: rgba(20, 30, 40, 0.45);
}

/* —— Print: single page or multi-sheet poster tiles —— */

@media print {
  .dots,
  .page-float,
  .layout-preview,
  .motif-resize,
  .board-toolbox,
  .board-pop,
  .stroke-dock,
  .stroke-bar,
  .stroke-reel,
  .actions,
  .top-bar,
  .settings-panel,
  .nav-chevron,
  .seo-copy,
  .tutorial-scrim,
  .tut-callouts,
  .tutorial-dialog {
    display: none !important;
    visibility: hidden !important;
  }
}

.print-root {
  display: none;
}

@media print {
  /* Keep in sync with #print-page-style (6mm). Larger margins + tall tiles → 4-up becomes 8 pages. */
  @page {
    margin: 6mm;
  }

  html,
  body {
    background: #fff !important;
    height: auto !important;
    margin: 0 !important;
  }

  #app,
  .tutorial-dialog,
  .thanks-dialog,
  .impressum-dialog {
    display: none !important;
  }

  .print-root {
    display: block !important;
  }

  /* Print watermark: "HarHar.de" ~52–53mm wide, thick dashed underline */
  .print-page .print-watermark {
    position: absolute !important;
    top: 2% !important;
    right: 2.4% !important;
    z-index: 5 !important;
    width: max-content !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 0.6mm !important;
    border: none !important;
    border-bottom: 0.85mm dashed rgba(40, 40, 40, 0.4) !important;
    background: none !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-weight: 800 !important;
    /* ~5.25cm mark width for "HarHar.de" (monospace) */
    font-size: 10.5mm !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: transparent !important;
    -webkit-text-stroke: 0.32mm rgba(40, 40, 40, 0.42) !important;
    pointer-events: none !important;
  }

  /*
   * Tile height defaults (overridden by #print-page-style). Stay under
   * page − margins or each tile splits (4-up → 8 PDF pages).
   */
  .print-root {
    --print-page-h: 268mm;
    --print-page-h-max-img: 220mm;
  }

  .print-root[data-paper="letter"] {
    --print-page-h: 248mm;
    --print-page-h-max-img: 200mm;
  }

  .print-page {
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 100%;
    height: var(--print-page-h, 268mm);
    min-height: var(--print-page-h, 268mm);
    max-height: var(--print-page-h, 268mm);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .print-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /*
   * Poster tiles: one SVG slice per sheet. Even margins on all 4 pages;
   * dashed join lines sit in the margin (not inside the art).
   */
  .print-page.print-tile {
    position: relative;
    width: 100%;
    height: var(--print-page-h, 268mm);
    min-height: var(--print-page-h, 268mm);
    max-height: var(--print-page-h, 268mm);
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
    display: block;
    box-sizing: border-box;
    /* Margin strip for dashed fold/glue — inside height (border-box) */
    padding: 6mm;
    margin: 0;
  }

  /* Motif SVG lives inside .print-art-layer (absolute content box) */
  .print-page.print-tile > .print-art-layer > svg.print-poster-svg,
  .print-page.print-tile svg.print-poster-svg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Join / fold guides — only edges that meet another tile */
  .print-join-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
  }

  .print-join {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
  }

  /* Center of the 6mm margin strip */
  .print-join-t {
    left: 6mm;
    right: 6mm;
    top: 2.5mm;
    height: 0;
  }

  .print-join-b {
    left: 6mm;
    right: 6mm;
    bottom: 2.5mm;
    height: 0;
  }

  .print-join-l {
    top: 6mm;
    bottom: 6mm;
    left: 2.5mm;
    width: 0;
  }

  .print-join-r {
    top: 6mm;
    bottom: 6mm;
    right: 2.5mm;
    width: 0;
  }

  /* Thick dashed = fold (4 folds for 2×2) */
  .print-join-t.print-join-thick {
    border-top: 1.35mm dashed rgba(30, 30, 30, 0.55);
  }
  .print-join-b.print-join-thick {
    border-bottom: 1.35mm dashed rgba(30, 30, 30, 0.55);
  }
  .print-join-l.print-join-thick {
    border-left: 1.35mm dashed rgba(30, 30, 30, 0.55);
  }
  .print-join-r.print-join-thick {
    border-right: 1.35mm dashed rgba(30, 30, 30, 0.55);
  }

  /* Thin dashed = glue flap (Lasche) */
  .print-join-t.print-join-thin {
    border-top: 0.35mm dashed rgba(40, 40, 40, 0.38);
  }
  .print-join-b.print-join-thin {
    border-bottom: 0.35mm dashed rgba(40, 40, 40, 0.38);
  }
  .print-join-l.print-join-thin {
    border-left: 0.35mm dashed rgba(40, 40, 40, 0.38);
  }
  .print-join-r.print-join-thin {
    border-right: 0.35mm dashed rgba(40, 40, 40, 0.38);
  }



  /*
   * Single-page motif stage: fill content box. When a name label is present
   * (.has-title), reserve a bottom band so the label never clips the motif
   * (was a white “strip cutout” under the name-tag area).
   */
  .print-motif-stage {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    z-index: 1;
  }

  .print-page.single.has-title .print-motif-stage {
    /* Leave clear strip for name label — motif stays fully above it */
    bottom: 14mm;
  }

  .print-motif-place {
    position: absolute;
    width: 92%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
  }

  .print-motif-place svg,
  .print-motif-place img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block;
  }

  /* Name label: own band at bottom — no background box, no overlap with art */
  .print-title-tile {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 1.5mm;
    z-index: 4;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 14pt;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Last 2×2 tile with name: pull art + stickers up so label sits in clear band */
  .print-page.print-tile.has-title > .print-art-layer {
    bottom: 14mm !important;
  }

  /* Single page with name: stickers share the same reserved bottom band */
  .print-page.single.has-title > .print-art-layer {
    bottom: 14mm;
  }

  /* Single page: one fixed sheet — title stays on same page (no orphan) */
  .print-page.single {
    display: block;
    position: relative;
    padding: 6mm;
    box-sizing: border-box;
    height: var(--print-page-h, 268mm);
    min-height: var(--print-page-h, 268mm);
    max-height: var(--print-page-h, 268mm);
    overflow: hidden;
  }

  .print-page.single.is-blank {
    display: block;
    height: var(--print-page-h, 268mm);
    min-height: var(--print-page-h, 268mm);
    max-height: var(--print-page-h, 268mm);
    padding: 3mm;
    /* Full sheet for free-draw % coords — no mid-page chrome clip */
    overflow: hidden;
    box-sizing: border-box;
  }

  .print-page.single.is-blank .print-board-item,
  .print-page.single.is-blank .print-board-stroke {
    /* stay inside page box; strokes fill 100%×100% */
  }

  .print-page.single img {
    max-width: 90%;
    max-height: var(--print-page-h-max-img, 220mm);
    object-fit: contain;
  }

  .print-page.single .print-title {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 2mm;
    z-index: 4;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 18pt;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Legacy balloon shapes — do not cap freeboard .print-board-item */
  .print-page .print-shape:not(.print-board-item) {
    position: absolute;
    transform: translate(-50%, -50%) var(--shape-tf, rotate(0deg) scale(1));
    transform-origin: center center;
    width: var(--shape-w, 32%);
    min-width: 18%;
    max-width: 70%;
  }

  .print-page .print-shape .shape-body {
    background: #fff;
    border: 0.75pt solid #222;
    padding: 8pt 10pt;
    text-align: center;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    box-sizing: border-box;
  }

  .print-page .print-shape .text-flat-print {
    font-weight: 700;
    font-size: calc(11pt * var(--fs, 1));
    letter-spacing: 0.1em;
    line-height: 1.35;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    transform: scale(var(--tx, 1), var(--ty, 1));
    transform-origin: center center;
    max-width: 100%;
    word-break: break-word;
  }

  .print-page .print-shape .text-arc-svg {
    width: 100%;
    height: 100%;
  }

  .print-page .print-shape .text-arc-letters {
    fill: transparent;
    stroke: #111;
    stroke-width: 0.85;
    paint-order: stroke fill;
    font-weight: 700;
    font-size: calc(8px * var(--fs, 1));
    letter-spacing: 0.05em;
  }

  .print-page .print-shape.shape-cloud .shape-body {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }

  .print-page .print-shape.shape-circle .shape-body {
    border-radius: 50%;
    aspect-ratio: 1;
    min-width: 28mm;
    min-height: 28mm;
    display: grid;
    place-items: center;
  }

  .print-page .print-shape.shape-box .shape-body {
    border-radius: 4pt;
  }

  .print-page .print-shape.shape-star .shape-body {
    border: none;
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
    filter: drop-shadow(0 0 0.3pt #222);
    padding: 18% 14% 14%;
  }

  .print-page .print-shape.shape-heart .shape-body {
    border: none;
    clip-path: path(
      "M 50 88 C 20 65 5 45 5 28 C 5 12 18 5 30 5 C 40 5 47 12 50 20 C 53 12 60 5 70 5 C 82 5 95 12 95 28 C 95 45 80 65 50 88 Z"
    );
    filter: drop-shadow(0 0 0.3pt #222);
    padding: 22% 12% 14%;
    min-width: 32mm;
    min-height: 30mm;
  }

  .print-page .fab-plus,
  .print-page .balloon-remove,
  .print-page .shape-tools,
  .print-page .shape-resize,
  .print-page .shape-arc-up,
  .print-page .shape-arc-dn {
    display: none !important;
  }
}

/*
 * Glass fallbacks — when backdrop-filter is missing (old WebView / ancient OS).
 * Solid-ish fills so tutorial + dots stay readable. Not a full S8/S9 support
 * track: paper/canvas needs a current browser (Chrome / Safari last 2 years).
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tutorial-card {
    background: #f7f9fc !important;
  }

  body.tutorial-card-low .tutorial-card,
  body.tutorial-card-beside .tutorial-card {
    background: #f4f6fa !important;
  }

  .tut-callout {
    background: #ffffff !important;
  }

  .dots {
    background: color-mix(in srgb, var(--bg, #eef2f6) 94%, #fff) !important;
  }
}