/*
 * Oni Nasi — motyw sepia (Faza A: tokeny + Faza B: shell + Faza C: embedy + Faza D: kompozycja + Faza E: canvas/modale)
 * v18 · 2026-06-15 — mobile Faza 2: H03 tagi Historie, K03 albumy Kronika, ID01 Idiomy (@768px only)
 */
:root {
  /* —— Burgund + kość słoniowa (biblioteka / stara księga) —— */
  --oni-welcome-actions-bottom: 3.5%;
  /*
   * welcome_rodzina_user.jpg — pozycja w kadrze (0–1 od góry zdjęcia, contain center).
   * Młoda kobieta, czarna koszulka: szyja ≈ 0.36 (dół napisu „Oni Nasi”).
   * Tagline — NIE ZMIENIAĆ (użytkownik: aktualna pozycja OK).
   */
  --oni-welcome-brandwordmark-photo-y: 0.36;
  --oni-welcome-tagline-photo-y: 0.38;
  /* welcome_rodzina_user.jpg — 320×240 */
  --oni-welcome-photo-aspect: 1.3333333333;
  --oni-welcome-box-height: clamp(480px, calc(min(920px, 100vw - 40px) * 0.75), 690px);
  --oni-paper: #f4f0e8;
  --oni-paper-deep: #e8e0d4;
  --oni-paper-card: #faf8f4;
  --oni-ink: #2a1818;
  --oni-ink-muted: #5c4040;
  --oni-ink-soft: #8a6060;
  --oni-sepia: #7a2e32;
  --oni-sepia-light: #9a4850;
  --oni-sepia-pale: #e8d4d4;
  --oni-accent: #7a2e32;
  --oni-accent-deep: #5a2024;
  --oni-accent-hover: #682830;
  --oni-accent-soft: #ecd8d8;
  --oni-gold: #9a7348;
  --oni-gold-light: #b89458;
  --oni-border: #d4c0c0;
  --oni-border-strong: #b89898;
  --oni-shadow: rgba(42, 24, 24, 0.12);
  --oni-shadow-lg: rgba(42, 24, 24, 0.18);
  --oni-modal-backdrop: rgba(30, 16, 16, 0.52);

  /* Mapowanie istniejących tokenów aplikacji */
  --primary-color: var(--oni-accent);
  --border-color: var(--oni-border);
  --error-color: #a94442;
  --success-color: #6b7c4a;
  --oni-save: #6b7c4a;
  --oni-save-hover: #58663d;
  --oni-neutral-bg: var(--oni-paper-card);
  --oni-neutral-border: var(--oni-border-strong);
  --oni-neutral-text: var(--oni-ink-muted);
  --oni-neutral-hover-bg: var(--oni-paper-deep);
  --oni-neutral-hover-border: var(--oni-sepia);
  --oni-neutral-hover-text: var(--oni-ink);
  --oni-danger: #a94442;
  --oni-danger-hover: #8f3a38;
  --oni-modal-card-border: var(--oni-border-strong);
  --oni-modal-card-shadow:
    0 20px 44px -14px var(--oni-shadow-lg),
    0 0 0 1px rgba(250, 248, 244, 0.75) inset;
  --selected-node: #c4a888;
  --highlight-border: var(--oni-accent);
  --oni-default-outline-border: var(--oni-accent);
  --oni-default-outline-text: var(--oni-accent);

  --oni-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --oni-layout-max: 1200px;
  --oni-font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --oni-radius-sm: 8px;
  --oni-radius-md: 12px;
  --oni-radius-lg: 16px;

  /* —— Faza D: kompozycja (rytm, strefy, oddech) —— */
  --oni-page-gutter: clamp(12px, 2.5vw, 24px);
  --oni-space-xs: 6px;
  --oni-space-sm: 10px;
  --oni-space-md: 16px;
  --oni-space-lg: 24px;
  --oni-space-xl: 32px;
  --oni-zone-orient: minmax(52px, 11vh);
  --oni-zone-stage: 1fr;
  --oni-card-shadow:
    0 10px 36px -12px var(--oni-shadow-lg),
    0 0 0 1px rgba(250, 248, 244, 0.85) inset;
  --oni-well-shadow: inset 0 2px 14px rgba(42, 24, 24, 0.1);

  /* —— Faza E: drzewo (canvas + HTML legacy) —— */
  --marriage-color: #a84858;
  --parent-child-color: #8a6060;
  --oni-tree-marriage: var(--marriage-color);
  --oni-tree-pedigree: var(--parent-child-color);
  --oni-tree-cell: var(--oni-paper);
  --oni-tree-cell-stroke: var(--oni-ink-soft);
  --oni-tree-cell-selected: var(--oni-accent-soft);
  --oni-tree-cell-selected-stroke: var(--oni-accent);
  --oni-tree-branch: var(--oni-sepia-pale);
  --oni-tree-branch-stroke: var(--oni-sepia);
  --oni-tree-highlight: #e8dcd4;
  --oni-tree-highlight-stroke: var(--oni-sepia-light);
}

/* —— Typografia globalna —— */
body {
  font-family: var(--oni-font-sans);
  color: var(--oni-ink);
  background: var(--oni-paper);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(122, 46, 50, 0.14), transparent 55%),
    linear-gradient(180deg, var(--oni-paper) 0%, #e8e0d4 100%);
}

h1, h2, h3 {
  color: var(--oni-ink);
  font-family: var(--oni-font-serif);
  font-weight: 600;
}

p {
  color: var(--oni-ink-muted);
}

.quotes {
  color: var(--oni-gold);
}

.amdg {
  color: var(--oni-gold-light);
  opacity: 0.85;
}

/* —— Karty / kontenery (model „kartka archiwum”) —— */
html {
  scroll-behavior: smooth;
}

body {
  padding: var(--oni-page-gutter) !important;
}

.container {
  background: var(--oni-paper-card);
  border: 1px solid var(--oni-border);
  border-radius: var(--oni-radius-lg);
  box-shadow: var(--oni-card-shadow);
  max-width: min(var(--oni-layout-max), 100%);
}

.module.container.show {
  display: flex !important;
  flex-direction: column;
  max-width: min(var(--oni-layout-max), 100%) !important;
  min-height: 0;
  padding: var(--oni-space-md) var(--oni-space-lg) var(--oni-space-lg);
  box-sizing: border-box;
}

/* Strefa orientacji (góra ~11vh) — nagłówek modułu */
.module-header {
  flex-shrink: 0;
  min-height: var(--oni-zone-orient);
  border-radius: var(--oni-radius-md) var(--oni-radius-md) 0 0;
  margin: calc(-1 * var(--oni-space-md)) calc(-1 * var(--oni-space-lg)) var(--oni-space-md);
  padding: var(--oni-space-sm) var(--oni-space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--oni-space-sm) var(--oni-space-md);
  background: linear-gradient(180deg, var(--oni-paper-card) 0%, var(--oni-paper-deep) 100%);
  color: var(--oni-ink);
  border-bottom: 1px solid var(--oni-border);
  box-shadow: 0 2px 12px var(--oni-shadow);
}

.module-header .header-left {
  position: static;
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oni-space-xs);
}

.module-header h2 {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--oni-ink);
  font-weight: 600;
}

.module-header .btn-menu {
  background: var(--oni-paper-card);
  color: var(--oni-accent-deep);
  border: 1px solid var(--oni-border-strong);
  border-radius: var(--oni-radius-sm);
  font-weight: 600;
  font-size: 13px;
}

.module-header .btn-menu:hover {
  background: var(--oni-accent-soft);
  border-color: var(--oni-sepia);
  color: var(--oni-ink);
}

.module-header .header-right {
  grid-column: 3;
  justify-self: end;
}

/* Strefa sceny — główny punkt fokalny modułu */
.oni-module-stage,
.module.container.show > .gallery-tree-view,
.module.container.show > .dzieje-fullscreen-tree,
.module.container.show > .narrator-panel,
.module.container.show > #galleryListView {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--oni-space-sm);
  box-sizing: border-box;
}

.oni-module-stage--tree,
.module.container.show > .gallery-tree-view,
.module.container.show > .dzieje-fullscreen-tree {
  padding-top: var(--oni-space-xs);
}

/* Studnia na canvas drzewa — wewnętrzna „rama obrazu” */
.oni-tree-well,
.oni-module-stage--tree > .drzewo-rod-host,
.gallery-tree-view > .drzewo-rod-host,
.dzieje-fullscreen-tree > .drzewo-rod-host {
  flex: 1 1 auto;
  min-height: 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--oni-border);
  border-radius: var(--oni-radius-md);
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(250, 248, 244, 0.92), transparent 58%),
    linear-gradient(180deg, var(--oni-paper-deep) 0%, var(--oni-paper) 100%);
  box-shadow: var(--oni-well-shadow);
  overflow: hidden;
}

.oni-tree-well > .drzewo-rod-host,
.oni-module-stage--tree > .drzewo-rod-host,
.gallery-tree-view > .drzewo-rod-host,
.dzieje-fullscreen-tree > .drzewo-rod-host {
  background: transparent !important;
}

/* Pasek podpowiedzi przy drzewie — cichy, bez ramki */
.gallery-tree-add-bar {
  flex-shrink: 0;
  margin: 0;
  padding: var(--oni-space-sm) var(--oni-space-md);
  background: transparent !important;
  border: none !important;
  border-radius: var(--oni-radius-sm);
  box-shadow: none;
  max-width: 100%;
}

/* Etykiety „Wybierz osobę w drzewie" — ukryte wszędzie */
#przeslanieAddBarLabel,
#historyAddBarLabel,
#inwokacjaRoduAddBarLabel,
#archiwumAddBarLabel,
#galleryTreeAddBarLabel,
.gallery-tree-hint {
  display: none !important;
}

.gallery-tree-view {
  align-items: stretch !important;
  padding: 0 !important;
}

.dzieje-fullscreen-tree {
  padding: 0 !important;
}

/* —— Faza B: ekran powitalny —— */
/* Zdjęcie + bladnięcie brzegów (maskowane do kadru contain) */
#welcome.oni-welcome {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--oni-paper-card);
  container-type: size;
  container-name: oni-welcome;
  height: var(--oni-welcome-box-height);
}

#welcome.oni-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/tlo/welcome_rodzina_user.jpg") center center / contain no-repeat;
  pointer-events: none;
}

#welcome.oni-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 74% 68% at 50% 48%,
      rgba(252, 250, 246, 0) 0%,
      rgba(252, 250, 246, 0) 48%,
      rgba(252, 250, 246, 0.22) 74%,
      rgba(252, 250, 246, 0.58) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 250, 246, 0.28) 0%,
      rgba(252, 250, 246, 0) 16%,
      rgba(252, 250, 246, 0) 84%,
      rgba(252, 250, 246, 0.22) 100%
    ),
    linear-gradient(
      90deg,
      rgba(252, 250, 246, 0.32) 0%,
      rgba(252, 250, 246, 0) 12%,
      rgba(252, 250, 246, 0) 88%,
      rgba(252, 250, 246, 0.32) 100%
    );
  -webkit-mask-image: url("assets/tlo/welcome_rodzina_user.jpg");
  mask-image: url("assets/tlo/welcome_rodzina_user.jpg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#welcome.oni-welcome > *:not(.oni-welcome-actions):not(.amdg):not(.oni-welcome-title) {
  position: relative;
  z-index: 1;
}

/* Czytelność na tle zdjęcia — bez osobnej karty */
#welcome.oni-welcome .oni-brand-wordmark,
#welcome.oni-welcome .oni-welcome-tagline,
#welcome.oni-welcome label {
  text-shadow:
    0 0 1px rgba(252, 250, 246, 1),
    0 1px 3px rgba(252, 250, 246, 0.95),
    0 0 16px rgba(252, 250, 246, 0.88),
    0 0 28px rgba(252, 250, 246, 0.72),
    0 2px 8px rgba(42, 24, 24, 0.22);
}

.oni-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: min(920px, 100%);
  min-height: var(--oni-welcome-box-height);
  padding: clamp(1.25rem, 3.5vh, 2rem) var(--oni-space-lg) clamp(5.5rem, 24vh, 7.5rem);
  margin-inline: auto;
  text-align: center;
  gap: clamp(0.65rem, 2.2vh, 1.35rem);
}

.oni-welcome-title {
  position: static;
  width: 100%;
  height: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.oni-welcome-headline {
  display: contents;
}

/* Oba napisy — absolute względem #welcome, współrzędne jak tło (contain, center) */
#welcome.oni-welcome .oni-brand-wordmark,
#welcome.oni-welcome .oni-welcome-tagline {
  position: absolute;
  left: 50%;
  z-index: 3;
  width: min(calc(100% - 2rem), 34rem);
  text-align: center;
  margin: 0;
  pointer-events: auto;
}

#welcome.oni-welcome .oni-brand-wordmark {
  /* photo-y = linia szyi; dół napisu na tej wysokości */
  transform: translate(-50%, -100%);
}

#welcome.oni-welcome .oni-welcome-tagline {
  transform: translateX(-50%);
}

/* Letterboxing góra/dół — typowy mobile portrait */
@container oni-welcome (aspect-ratio < 4/3) {
  #welcome.oni-welcome .oni-brand-wordmark {
    top: calc(
      (100cqh - 100cqw / var(--oni-welcome-photo-aspect)) / 2
      + (100cqw / var(--oni-welcome-photo-aspect)) * var(--oni-welcome-brandwordmark-photo-y)
    );
  }

  #welcome.oni-welcome .oni-welcome-tagline {
    top: calc(
      (100cqh - 100cqw / var(--oni-welcome-photo-aspect)) / 2
      + (100cqw / var(--oni-welcome-photo-aspect)) * var(--oni-welcome-tagline-photo-y)
    );
  }
}

/* Letterboxing lewo/prawo — typowy desktop */
@container oni-welcome (aspect-ratio >= 4/3) {
  #welcome.oni-welcome .oni-brand-wordmark {
    top: calc(100cqh * var(--oni-welcome-brandwordmark-photo-y));
  }

  #welcome.oni-welcome .oni-welcome-tagline {
    top: calc(100cqh * var(--oni-welcome-tagline-photo-y));
  }
}

.oni-brand-wordmark {
  font-family: var(--oni-font-serif);
  font-size: clamp(2.35rem, 6.5vw, 3.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--oni-accent-deep);
  line-height: 1.12;
}

.oni-brand-wordmark-sub {
  font-family: var(--oni-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oni-sepia);
  margin: 0 0 1.5rem;
}

.oni-welcome-tagline {
  width: 100%;
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--oni-ink);
  text-align: center;
}

.oni-welcome-lead {
  font-family: var(--oni-font-serif);
  font-size: clamp(1.15rem, 2.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
  color: var(--oni-ink);
  max-width: 32rem;
}

.oni-welcome-options {
  margin-top: 0;
}

.oni-welcome-actions {
  position: absolute;
  left: 50%;
  bottom: var(--oni-welcome-actions-bottom);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(100% - 2rem, 36rem);
  pointer-events: none;
}

.oni-welcome-actions > * {
  pointer-events: auto;
}

#welcome.oni-welcome .amdg {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.45rem, 1.2vh, 0.75rem);
  left: auto;
  top: auto;
  z-index: 3;
  margin: 0;
  font-family: var(--oni-font-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--oni-gold);
  opacity: 1;
  text-shadow:
    0 0 1px rgba(252, 250, 246, 1),
    0 1px 3px rgba(252, 250, 246, 0.95),
    0 0 14px rgba(252, 250, 246, 0.82),
    0 2px 6px rgba(42, 24, 24, 0.28);
  pointer-events: none;
}

#welcome label {
  color: var(--oni-ink-muted);
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
}

#welcome p:not(.oni-brand-wordmark):not(.oni-brand-wordmark-sub):not(.quotes):not(.oni-welcome-lead) {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

#startJourneyButton {
  background: var(--oni-accent);
  border: 1px solid var(--oni-accent-deep);
  color: #fff;
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  padding: 14px 32px;
  border-radius: var(--oni-radius-md);
  width: auto;
  max-width: none;
  margin: 0;
  box-shadow: 0 4px 14px rgba(90, 32, 36, 0.22);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

#startJourneyButton:hover {
  background: var(--oni-accent-hover);
  border-color: var(--oni-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(90, 32, 36, 0.26);
}

/* —— Menu modułów (siatka + fokalne Drzewo Rodu) —— */
#menu {
  padding: var(--oni-space-lg) var(--oni-space-lg) var(--oni-space-xl);
  max-width: min(720px, 100%);
}

#menu > h2 {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  margin: 0 0 var(--oni-space-xs);
  color: var(--oni-ink);
}

.oni-menu-lead {
  text-align: center;
  margin: 0 0 var(--oni-space-lg);
  font-size: 0.95rem;
  color: var(--oni-ink-soft);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.menu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--oni-space-sm);
  margin-bottom: var(--oni-space-md);
}

.menu-actions button {
  background: var(--oni-paper-card);
  color: var(--oni-accent-deep);
  border: 1px solid var(--oni-border-strong);
  font-weight: 600;
  width: auto;
  min-width: 140px;
  padding: 9px 18px;
  border-radius: var(--oni-radius-sm);
  box-shadow: none;
}

.menu-actions button:hover {
  background: var(--oni-accent-soft);
  border-color: var(--oni-sepia);
  color: var(--oni-ink);
  transform: none;
}

.module-icons.oni-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oni-space-md) var(--oni-space-sm);
  margin-top: var(--oni-space-sm);
  justify-items: center;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.module-icon--featured {
  grid-column: 1 / -1;
  width: min(220px, 100%);
  padding: var(--oni-space-md) var(--oni-space-md) var(--oni-space-sm);
  border-color: var(--oni-sepia-light);
  background: linear-gradient(180deg, var(--oni-paper-card) 0%, var(--oni-accent-soft) 100%);
  box-shadow: 0 8px 22px var(--oni-shadow-lg);
}

.module-icon--featured .oni-module-icon {
  width: 58px;
  height: 58px;
  border-color: var(--oni-sepia-light);
}

.module-icon--featured p {
  font-size: 0.85rem;
}

.module-icons {
  gap: 16px;
  margin-top: 1.5rem;
  justify-content: center;
}

.module-icon {
  width: 108px;
  padding: 14px 10px 12px;
  border-radius: var(--oni-radius-md);
  background: var(--oni-paper-deep);
  border: 1px solid var(--oni-border);
  box-shadow: 0 2px 8px var(--oni-shadow);
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.module-icon:hover,
.module-icon:focus-visible {
  background: var(--oni-accent-soft);
  border-color: var(--oni-sepia-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--oni-shadow-lg);
  outline: none;
}

.module-icon .oni-module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--oni-paper-card);
  border: 1px solid var(--oni-border);
  color: var(--oni-accent-deep);
}

.module-icon .oni-module-icon img,
.module-icon .oni-module-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.module-icon p {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--oni-ink);
}

.gallery-assign-header.oni-modal-assign-header-strip {
  border-bottom-color: var(--oni-border-strong);
  background: linear-gradient(180deg, var(--oni-paper-card), var(--oni-paper-deep));
}

.gallery-assign-header.oni-modal-assign-header-strip h3 {
  color: var(--oni-ink);
  font-family: var(--oni-font-serif);
}

/* —— Przyciski globalne (shell) —— */
button {
  font-family: var(--oni-font-sans);
  background: var(--oni-accent);
  border-color: var(--oni-accent-deep);
}

button:hover:not(.gallery-btn) {
  background: var(--oni-accent-hover);
  border-color: var(--oni-accent-deep);
}

button.yes {
  background: var(--oni-save);
  border-color: var(--oni-save-hover);
}

button.yes:hover {
  background: var(--oni-save-hover);
}

.action-group {
  background: var(--oni-paper-deep);
  border-color: var(--oni-border);
}

.action-group h4 {
  color: var(--oni-accent-deep);
}

/* —— Modale / nakładki —— */
.gallery-assign-panel {
  background: var(--oni-modal-backdrop);
}

.gallery-assign-panel.oni-modal-tree-actions .oni-modal-tree-actions-card--gallery-tags,
.gallery-assign-box,
.gallery-assign-panel .gallery-assign-box {
  background: var(--oni-paper-card) !important;
  border-color: var(--oni-modal-card-border) !important;
  box-shadow: var(--oni-modal-card-shadow) !important;
}

.oni-modal-tree-actions-lead {
  color: var(--oni-ink-muted) !important;
}

.oni-modal-tree-actions-hint {
  color: var(--oni-ink-soft) !important;
}

/* —— Przyciski Kroniki / modułów (.gallery-btn) —— */
.gallery-btn {
  font-family: var(--oni-font-sans);
  border-radius: var(--oni-radius-sm);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.gallery-panel .gallery-btn,
.gallery-panel button,
.gallery-assign-panel .gallery-btn:not(.oni-btn-neutral):not(.oni-btn-kasuj):not(.oni-zapisz-btn):not(.oni-zatwierdz-btn),
.gallery-tree-add-bar .gallery-btn,
.kronika-gallery-actions-in-modal .gallery-btn {
  background: var(--oni-paper-card) !important;
  color: var(--oni-accent-deep) !important;
  border: 1px solid var(--oni-border-strong) !important;
}

.gallery-panel .gallery-btn:hover:not(:disabled),
.gallery-panel button:hover:not(:disabled),
.gallery-assign-panel .gallery-btn:not(.oni-btn-neutral):not(.oni-btn-kasuj):not(.oni-zapisz-btn):not(.oni-zatwierdz-btn):hover:not(:disabled),
.gallery-tree-add-bar .gallery-btn:hover:not(:disabled),
.kronika-gallery-actions-in-modal .gallery-btn:hover:not(:disabled) {
  background: var(--oni-accent-soft) !important;
  border-color: var(--oni-sepia) !important;
  color: var(--oni-ink) !important;
}

.gallery-btn.primary:not(.oni-zapisz-btn):not(.oni-zatwierdz-btn),
.oni-zatwierdz-btn,
.gallery-btn.oni-zatwierdz-btn {
  background: var(--oni-accent) !important;
  border-color: var(--oni-accent-deep) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(90, 32, 36, 0.2);
}

.gallery-btn.oni-zapisz-btn,
.oni-zapisz-btn {
  background: var(--oni-save) !important;
  border-color: var(--oni-save) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(107, 124, 74, 0.25);
}

.gallery-btn.primary:not(.oni-zapisz-btn):not(.oni-zatwierdz-btn):hover:not(:disabled),
.oni-zatwierdz-btn:hover:not(:disabled),
.gallery-btn.oni-zatwierdz-btn:hover:not(:disabled) {
  background: var(--oni-accent-hover) !important;
  border-color: var(--oni-accent-deep) !important;
}

.gallery-btn.oni-zapisz-btn:hover:not(:disabled),
.oni-zapisz-btn:hover:not(:disabled) {
  background: var(--oni-save-hover) !important;
  border-color: var(--oni-save-hover) !important;
}

.gallery-btn.oni-btn-neutral,
.gallery-btn.dzieje-btn-neutral {
  background: var(--oni-neutral-bg) !important;
  border-color: var(--oni-neutral-border) !important;
  color: var(--oni-neutral-text) !important;
}

.gallery-btn.oni-btn-neutral:hover:not(:disabled),
.gallery-btn.dzieje-btn-neutral:hover:not(:disabled) {
  background: var(--oni-neutral-hover-bg) !important;
  border-color: var(--oni-neutral-hover-border) !important;
  color: var(--oni-neutral-hover-text) !important;
  -webkit-text-fill-color: currentColor !important;
  transform: none !important;
  opacity: 1 !important;
}

.gallery-btn.oni-btn-kasuj {
  border-color: var(--oni-danger) !important;
  color: var(--oni-danger) !important;
}

.gallery-btn.oni-btn-kasuj:hover:not(:disabled) {
  background: var(--oni-danger) !important;
  border-color: var(--oni-danger) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: none !important;
  opacity: 1 !important;
}

.gallery-assign-panel .gallery-btn.oni-btn-record-stop:hover:not(:disabled),
#przeslaniePytaniaModal .gallery-btn.oni-btn-record-stop:hover:not(:disabled),
#inwokacjaRoduRecordPanel .gallery-btn.oni-btn-record-stop:hover:not(:disabled),
#galleryRecordPanel .gallery-btn.oni-btn-record-stop:hover:not(:disabled) {
  background: var(--oni-danger) !important;
  border-color: var(--oni-danger) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: none !important;
  opacity: 1 !important;
}

#przeslaniePytaniaRecStopBtn:hover:not(:disabled),
#inwokacjaRoduRecordStopBtn:hover:not(:disabled),
#galleryRecordStopBtn:hover:not(:disabled) {
  background: var(--oni-danger, #b42318) !important;
  border-color: var(--oni-danger, #b42318) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Stop nagrywania (Kronika, Mój Obraz / Idiomy, Przesłanie) — spójny wygląd */
.gallery-btn.oni-btn-record-stop {
  background: var(--oni-neutral-bg) !important;
  border: 1px solid var(--oni-danger) !important;
  color: var(--oni-danger) !important;
  -webkit-text-fill-color: currentColor !important;
}

.gallery-btn.oni-btn-record-stop:hover:not(:disabled) {
  background: var(--oni-danger) !important;
  border-color: var(--oni-danger) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: none !important;
  opacity: 1 !important;
}

/* —— Kronika: albumy, tagi, listy —— */
.gallery-tag-category,
.gallery-tag-select-summary,
.gallery-tag-new-row {
  background: var(--oni-paper-deep) !important;
  border-color: var(--oni-border) !important;
}

.gallery-tag-chip.selected {
  background: var(--oni-accent) !important;
  border-color: var(--oni-accent-deep) !important;
}

.gallery-tag-chip.gallery-tag-chip--category.selected {
  background: var(--oni-accent-deep) !important;
  border-color: var(--oni-ink) !important;
}

.gallery-albums-panel,
.gallery-items,
.gallery-tree-add-bar {
  background: transparent;
}

.gallery-item {
  border-color: var(--oni-border);
}

.gallery-linkish-btn {
  color: var(--oni-accent-deep);
}

/* —— Modale Kroniki (podgląd) —— */
.gallery-modal-content,
.gallery-person-modal-content {
  background: var(--oni-paper-card);
  border-color: var(--oni-border-strong);
}

/* —— Dzieje Rodu (moduł w shell) —— */
#dziejeRoduModule .narrator-output,
#dziejeRoduFeedbackPanel {
  background: var(--oni-paper-deep) !important;
  border-color: var(--oni-border) !important;
  color: var(--oni-ink-muted);
}

#dziejeRoduModule select,
#dziejeRoduModule textarea {
  border-color: var(--oni-border-strong);
  background: var(--oni-paper-card);
  color: var(--oni-ink);
}

/* —— Baner aktualizacji / ogólne linki —— */
a {
  color: var(--oni-accent-deep);
}

/* —— Remap twardego niebieskiego (#0f62fe) w kluczowych komponentach —— */
.gallery-tag-chip:hover,
.gallery-assign-cell:hover {
  border-color: var(--oni-sepia) !important;
  background: var(--oni-accent-soft) !important;
}

.gallery-tag-chip.selected:hover,
.gallery-tag-chip.selected:focus-visible {
  background: var(--oni-accent) !important;
  border-color: var(--oni-accent-deep) !important;
  color: #fff !important;
}

.gallery-tag-chip.gallery-tag-chip--category.selected:hover,
.gallery-tag-chip.gallery-tag-chip--category.selected:focus-visible {
  background: var(--oni-accent-deep) !important;
  border-color: var(--oni-ink) !important;
  color: #fff !important;
}

#galleryTagSelectPanel.gallery-tag-select--mode-show #galleryTagSelectLead.gallery-tag-select-lead {
  color: var(--oni-ink) !important;
}

.gallery-tag-event-year-row {
  background: var(--oni-accent-soft) !important;
  border-color: var(--oni-border-strong) !important;
}

.gallery-tag-event-year-hint {
  color: var(--oni-accent-deep) !important;
}

.gallery-tag-rocznik-auto-row,
.gallery-tag-rocznik-banner {
  background: var(--oni-accent-soft) !important;
  border-color: var(--oni-border) !important;
}

/* Drzewo osadzone — nagłówek sepia (Faza C — pasek embedu) */
.drzewo-rod-host > header {
  background: linear-gradient(180deg, var(--oni-paper-card) 0%, var(--oni-paper-deep) 100%) !important;
  color: var(--oni-ink) !important;
  box-shadow: 0 2px 12px var(--oni-shadow) !important;
  border-bottom: 1px solid var(--oni-border) !important;
}

.drzewo-rod-host > header .header-content {
  background: transparent !important;
  border-bottom: none !important;
}

.drzewo-rod-host > header h1 {
  color: var(--oni-ink) !important;
  font-family: var(--oni-font-serif);
}

.drzewo-rod-host > header .header-left .btn-menu {
  background: var(--oni-paper-card) !important;
  color: var(--oni-accent-deep) !important;
  border-color: var(--oni-border-strong) !important;
}

.drzewo-rod-host > header .header-left .btn-menu:hover {
  background: var(--oni-accent-soft) !important;
  border-color: var(--oni-sepia) !important;
  color: var(--oni-ink) !important;
}

/* —— Faza C: zoom shell (nadpisuje inline w Oni_Nasi_02.html) —— */
#tree.module.show #zoomControls,
#gallery.module.show #zoomControls,
#invocation.module.show #zoomControls,
#historyModule.module.show #zoomControls,
#archiwumModule.module.show #zoomControls,
#inwokacjaRoduModule.module.show #zoomControls,
.zoom-controls {
  border-color: var(--oni-border-strong) !important;
  background: rgba(244, 240, 232, 0.96) !important;
  box-shadow: 0 2px 8px var(--oni-shadow) !important;
}

#tree.module.show #zoomControls button,
#gallery.module.show #zoomControls button,
#invocation.module.show #zoomControls button,
#historyModule.module.show #zoomControls button,
#archiwumModule.module.show #zoomControls button,
#inwokacjaRoduModule.module.show #zoomControls button,
.zoom-controls button {
  border-color: var(--oni-border-strong) !important;
  background: var(--oni-paper-card) !important;
  color: var(--oni-accent-deep) !important;
  box-shadow: 0 1px 2px var(--oni-shadow) !important;
}

#tree.module.show #zoomControls button:hover:not(:disabled),
#gallery.module.show #zoomControls button:hover:not(:disabled),
#invocation.module.show #zoomControls button:hover:not(:disabled),
#historyModule.module.show #zoomControls button:hover:not(:disabled),
#archiwumModule.module.show #zoomControls button:hover:not(:disabled),
#inwokacjaRoduModule.module.show #zoomControls button:hover:not(:disabled),
.zoom-controls button:hover:not(:disabled) {
  background: var(--oni-accent) !important;
  color: #fff !important;
  border-color: var(--oni-accent) !important;
  box-shadow: 0 2px 6px rgba(90, 32, 36, 0.2) !important;
}

#tree.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#tree.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
#gallery.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#gallery.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
#invocation.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#invocation.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
#historyModule.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#historyModule.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
#archiwumModule.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#archiwumModule.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
#inwokacjaRoduModule.module.show #zoomControls #zoomInBtn:hover:not(:disabled),
#inwokacjaRoduModule.module.show #zoomControls #zoomOutBtn:hover:not(:disabled),
.zoom-controls #zoomInBtn:hover:not(:disabled),
.zoom-controls #zoomOutBtn:hover:not(:disabled),
#tree.module.show #zoomControls #zoomInBtn:active:not(:disabled),
#tree.module.show #zoomControls #zoomOutBtn:active:not(:disabled),
#gallery.module.show #zoomControls #zoomInBtn:active:not(:disabled),
#gallery.module.show #zoomControls #zoomOutBtn:active:not(:disabled),
.zoom-controls #zoomInBtn:active:not(:disabled),
.zoom-controls #zoomOutBtn:active:not(:disabled) {
  transform: none !important;
}

/* —— Faza C: linki osób, chipy, focus —— */
.dzieje-editor-wrap .person-link[data-person-id],
.dzieje-preview .person-link,
.dzieje-links-list .person-link {
  color: var(--oni-accent-deep) !important;
}

.dzieje-editor-wrap .person-link[data-person-id]:hover,
.dzieje-preview .person-link:hover,
.dzieje-links-list .person-link:hover {
  color: var(--oni-accent) !important;
}

.gallery-item-person {
  background: var(--oni-accent-soft) !important;
  color: var(--oni-accent-deep) !important;
}

.gallery-album-item .gallery-album-name.gallery-album-selected {
  color: var(--oni-accent-deep) !important;
}

.gallery-assign-cell.selected,
.gallery-assign-chip {
  background: var(--oni-accent) !important;
  border-color: var(--oni-accent-deep) !important;
  color: #fff !important;
}

.gallery-assign-chip {
  background: var(--oni-accent-soft) !important;
  color: var(--oni-accent-deep) !important;
}

.gallery-assign-cell.selected .gallery-assign-chip,
.gallery-assign-cell.selected {
  background: var(--oni-accent) !important;
  color: #fff !important;
}

.gallery-tree-cell:hover {
  border-color: var(--oni-sepia) !important;
  background: var(--oni-accent-soft) !important;
}

.gallery-item-description textarea:focus,
.gallery-tag-input:focus,
#przeslaniePytaniaModal .przeslanie-q-row-btn:hover:not(:disabled),
.gallery-person-media-back-link:focus,
#inwokacjaRoduPlaybackListOverlay .gallery-person-media-back-link:focus {
  border-color: var(--oni-accent) !important;
  color: var(--oni-accent-deep) !important;
  box-shadow: 0 0 0 3px rgba(122, 79, 44, 0.22) !important;
}

/* Przycisk „Dodaj tag" w dialogu tagów Historii — nie pokryty przez inject */
.dzieje-reader-tag-add-btn {
  border-color: var(--oni-accent) !important;
  color: var(--oni-accent-deep) !important;
  background: var(--oni-paper-card) !important;
}
.dzieje-reader-tag-add-btn:hover:not(:disabled) {
  background: var(--oni-accent-soft) !important;
  border-color: var(--oni-sepia) !important;
  color: var(--oni-ink) !important;
}

.dzieje-reader-tag-chip--selected {
  background: var(--oni-accent) !important;
  color: #fff !important;
  border-color: var(--oni-accent-deep) !important;
}

#dziejeReaderTagConfirmBtn,
#dziejeUnifiedTagConfirmBtn,
.dzieje-reader-tag-save-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 6.5rem !important;
  background: var(--oni-save) !important;
  border-color: var(--oni-save) !important;
  color: #fff !important;
}

.gallery-modal button:not(.gallery-modal-close):not(.oni-modal-assign-header-x):not(.gallery-meta-toggle),
.gallery-modal .gallery-btn:not(.oni-btn-neutral):not(.oni-btn-kasuj):not(.oni-zapisz-btn):not(.oni-zatwierdz-btn) {
  background: var(--oni-paper-card) !important;
  color: var(--oni-accent-deep) !important;
  border-color: var(--oni-border-strong) !important;
}

.gallery-modal button:not(.gallery-modal-close):not(.oni-modal-assign-header-x):not(.gallery-meta-toggle):hover:not(:disabled),
.gallery-modal .gallery-btn:hover:not(:disabled):not(.oni-btn-neutral):not(.oni-btn-kasuj):not(.oni-zapisz-btn):not(.oni-zatwierdz-btn) {
  background: var(--oni-accent) !important;
  color: #fff !important;
  border-color: var(--oni-accent) !important;
}

.gallery-btn:hover:not(:disabled):not(.primary):not(.oni-btn-neutral):not(.dzieje-btn-neutral):not(.oni-btn-kasuj):not(.oni-zapisz-btn):not(.oni-zatwierdz-btn) {
  background: var(--oni-accent) !important;
  color: #fff !important;
  border-color: var(--oni-accent) !important;
}

#btnAddFirstPerson {
  background: var(--oni-accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(90, 32, 36, 0.22) !important;
}

#btnAddFirstPerson:hover:not(:disabled) {
  background: var(--oni-accent-hover) !important;
}

/* —— Historie Rodzinne / Dzieje (nakładki w shell) —— */
.dzieje-modal-overlay,
.dzieje-reader-board-overlay,
#dziejeReaderBoardOverlay {
  background: var(--oni-modal-backdrop) !important;
}

.dzieje-modal-box,
.dzieje-reader-modal-card,
.dzieje-person-list-box {
  background: var(--oni-paper-card) !important;
  border-color: var(--oni-border-strong) !important;
  box-shadow: var(--oni-modal-card-shadow) !important;
}

.dzieje-modal-header,
.dzieje-reader-modal-header {
  border-bottom-color: var(--oni-border) !important;
  background: linear-gradient(180deg, var(--oni-paper-card), var(--oni-paper-deep)) !important;
}

.dzieje-modal-header h3,
.dzieje-reader-modal-header h3 {
  color: var(--oni-ink) !important;
  font-family: var(--oni-font-serif);
}

.dzieje-btn,
.dzieje-btn-primary {
  border-radius: var(--oni-radius-sm) !important;
}

.dzieje-btn-primary,
.dzieje-btn.primary {
  background: var(--oni-accent) !important;
  border-color: var(--oni-accent-deep) !important;
  color: #fff !important;
}

.dzieje-btn:not(.dzieje-btn-primary):not(.primary) {
  background: var(--oni-paper-card) !important;
  border-color: var(--oni-border-strong) !important;
  color: var(--oni-accent-deep) !important;
}

.narrator-panel {
  background: var(--oni-paper-deep) !important;
  border: 1px solid var(--oni-border) !important;
  border-radius: var(--oni-radius-md);
  padding: var(--oni-space-md) !important;
  box-shadow: var(--oni-well-shadow);
}

#galleryListView {
  padding-top: var(--oni-space-xs);
}

.narrator-output {
  background: var(--oni-paper-card) !important;
  border-color: var(--oni-border) !important;
  color: var(--oni-ink) !important;
}

.narrator-field label {
  color: var(--oni-ink-muted) !important;
}

.narrator-field select {
  border-color: var(--oni-border-strong) !important;
  background: var(--oni-paper-card) !important;
  color: var(--oni-ink) !important;
}

/* Archiwum — selektor tagów */
#archTagSelectModal .gallery-tag-select-dialog {
  background: var(--oni-paper-card) !important;
  border-color: var(--oni-border-strong) !important;
}

/* Prosty znak graficzny (placeholder logo — do podmiany na docelowe) */
.oni-brand-mark {
  display: inline-block;
  width: clamp(2.75rem, 6vw, 3.25rem);
  height: clamp(2.75rem, 6vw, 3.25rem);
  margin-bottom: 0.25rem;
  border-radius: 50%;
  border: 2px solid var(--oni-sepia-light);
  background:
    radial-gradient(circle at 35% 35%, var(--oni-accent-soft), transparent 55%),
    var(--oni-paper-card);
  box-shadow: inset 0 0 0 1px var(--oni-border);
}

/* —— Mobile Faza 1 (D-020): O-01…O-04 — wyłącznie ≤768px (D-014: desktop bez zmian) —— */
@media (max-width: 768px) {
  /* O-03: viewport + safe-area */
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
    min-height: 100vh;
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  #welcome,
  #menu {
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: max(var(--oni-space-md), env(safe-area-inset-bottom, 0px));
  }

  .module.container.show {
    padding: var(--oni-space-sm) var(--oni-space-md) max(var(--oni-space-md), env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .module-header {
    margin: calc(-1 * var(--oni-space-sm)) calc(-1 * var(--oni-space-md)) var(--oni-space-sm);
    padding: var(--oni-space-sm) var(--oni-space-md);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: stretch;
  }

  .module-header h2 {
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
    text-align: left;
  }

  .module-header .header-left {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  /* O-04: menu główne */
  #menu {
    padding-left: max(var(--oni-space-md), env(safe-area-inset-left, 0px));
    padding-right: max(var(--oni-space-md), env(safe-area-inset-right, 0px));
  }

  .module-icons.oni-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: var(--oni-space-sm) var(--oni-space-xs);
    margin-left: 0;
    margin-right: 0;
  }

  .module-icon--featured {
    grid-column: 1 / -1;
    width: min(220px, 100%);
  }

  .module-icon {
    width: min(108px, 44vw);
    max-width: 100%;
    box-sizing: border-box;
  }

  .module-icon p {
    font-size: 0.78rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .menu-actions {
    width: 100%;
    max-width: 100%;
  }

  .menu-actions button {
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 100%;
  }

  /* O-01: przyciski — bez sztywnego 180px z shell HTML */
  button:not(#zoomInBtn):not(#zoomOutBtn):not(.zoom-controls button):not(.modal-close-btn) {
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .gallery-btn,
  .btn,
  .btn-menu,
  .action-group .action-buttons button {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .oni-modal-assign-actions .gallery-btn,
  .modal-actions .btn,
  .modal-person-toolbar .btn,
  .modal-person-actions .btn,
  .kronika-gallery-actions-in-modal .gallery-btn,
  .gallery-tree-add-bar .gallery-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 44px;
  }

  /* O-02: wspólny mobile shell modali (shell + embed) */
  .modal-overlay,
  .modal-overlay.visible,
  .modal-overlay.modal-overlay--person.visible {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
    align-items: center;
    justify-content: center;
  }

  .modal-box {
    width: min(520px, 96vw);
    max-height: min(
      calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc(100vh - 20px)
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-box.modal-box--person {
    max-height: min(
      calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc(100vh - 16px)
    );
  }

  form.modal-form.modal-form--person .modal-form-body,
  .modal-box .modal-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-actions,
  .modal-person-toolbar {
    flex-shrink: 0;
  }

  .gallery-assign-panel,
  .gallery-assign-panel.oni-modal-tree-actions {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
    align-items: center;
    justify-content: center;
  }

  .gallery-assign-box,
  .gallery-assign-panel .gallery-assign-box {
    width: min(520px, 96vw);
    max-width: 96vw;
    max-height: min(
      calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc(100vh - 24px)
    );
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  dialog.prompt-dialog,
  dialog.prompt-dialog.form-wide {
    max-height: min(
      calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      90vh
    );
    margin: auto;
  }

  /*
   * Ramka +/- jak w Drzewie Rodu: embed bezpośrednio pod nagłówkiem modułu (pasek akcji pod drzewem,
   * nie nad — inaczej canvas i zoom są zbyt nisko). Tylko ≤768px (D-014).
   */
  .module.container.show:not(#tree) > .gallery-tree-view > .gallery-tree-add-bar,
  .module.container.show:not(#tree) > .dzieje-fullscreen-tree > .gallery-tree-add-bar {
    order: 2;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    margin-top: var(--oni-space-sm);
  }

  .module.container.show:not(#tree) > .gallery-tree-view > .drzewo-rod-host,
  .module.container.show:not(#tree) > .dzieje-fullscreen-tree > .drzewo-rod-host {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Ten sam offset rogu co #tree — nadpisanie #zoomControls { top: 10px } z shell HTML */
  #tree.module.show #c07TreeEmbedRoot .canvas-area > .zoom-controls,
  #tree.module.show #c07TreeEmbedRoot .canvas-area > #zoomControls,
  #gallery.module.show #c07GalleryEmbedRoot .canvas-area > .zoom-controls,
  #gallery.module.show #c07GalleryEmbedRoot .canvas-area > #zoomControls,
  #invocation.module.show #c07PrzeslanieEmbedRoot .canvas-area > .zoom-controls,
  #invocation.module.show #c07PrzeslanieEmbedRoot .canvas-area > #zoomControls,
  #historyModule.module.show #c07HistoryEmbedRoot .canvas-area > .zoom-controls,
  #historyModule.module.show #c07HistoryEmbedRoot .canvas-area > #zoomControls,
  #archiwumModule.module.show #c07ArchiwumEmbedRoot .canvas-area > .zoom-controls,
  #archiwumModule.module.show #c07ArchiwumEmbedRoot .canvas-area > #zoomControls,
  #inwokacjaRoduModule.module.show #c07InwokacjaRoduEmbedRoot .canvas-area > .zoom-controls,
  #inwokacjaRoduModule.module.show #c07InwokacjaRoduEmbedRoot .canvas-area > #zoomControls {
    position: absolute !important;
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100 !important;
  }

  /*
   * Faza 2 / moduł 1 (O-07): spójny układ modali „wybór akcji” po kliku komórki
   * (Kronika, Historie, Archiwum — bez siatki Przesłania i listy Idiomów).
   */
  .gallery-assign-panel.oni-modal-tree-actions .oni-modal-assign-actions:not(.przeslanie-modal-actions-grid):not(.idiomy-rodu-modal-actions) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }

  .gallery-assign-panel.oni-modal-tree-actions .oni-modal-assign-actions:not(.przeslanie-modal-actions-grid):not(.idiomy-rodu-modal-actions) .gallery-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
    text-align: center;
    justify-content: center;
  }

  .gallery-assign-panel.oni-modal-tree-actions .oni-modal-tree-actions-lead {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gallery-assign-panel.oni-modal-tree-actions .oni-modal-tree-actions-hint {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /*
   * Faza 2 / H03 (M-4.01): modal tagów Historie — przewijane body, stopka Zapisz zawsze widoczna
   */
  #dziejeReaderTagSelectOverlay.dzieje-reader-tag-overlay-shell,
  #dziejeUnifiedTagSelectOverlay.dzieje-unified-tag-overlay-shell {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }

  .dzieje-reader-tag-dialog {
    display: flex;
    flex-direction: column;
    width: min(520px, 96vw);
    max-height: min(
      calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc(100vh - 20px)
    );
    overflow: hidden;
  }

  .dzieje-reader-tag-dialog-header {
    flex-shrink: 0;
  }

  .dzieje-reader-tag-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dzieje-reader-tag-dialog-footer {
    flex-shrink: 0;
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .dzieje-reader-tag-cancel-btn,
  .dzieje-reader-tag-save-btn,
  #dziejeReaderTagConfirmBtn,
  #dziejeUnifiedTagConfirmBtn {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    flex: 1 1 auto !important;
  }

  .dzieje-reader-tag-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dzieje-reader-tag-input {
    min-width: 0;
    width: 100%;
  }

  .dzieje-reader-tag-add-btn {
    width: 100%;
    min-height: 44px;
  }

  /*
   * Faza 2 / K03 + AR: Kronika (albumy) i Archiwum (segregatory) — dvh + stopka w kolumnie
   */
  #galleryTagSelectPanel .gallery-tag-select-box.gallery-tag-select-dialog.oni-modal-tree-actions-card--gallery-tags,
  .gallery-assign-panel.oni-modal-tree-actions .oni-modal-tree-actions-card--gallery-tags,
  #archTagSelectModal .gallery-tag-select-dialog {
    max-height: min(
      calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
      calc(100vh - 24px)
    );
  }

  #galleryTagSelectPanel .gallery-tag-select-footer-actions,
  #archTagSelectModal .arch-tag-select-footer-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  }

  #galleryTagSelectPanel .gallery-tag-select-footer-actions .gallery-btn,
  #archTagSelectModal .arch-tag-select-footer-actions .gallery-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
  }

  /*
   * Faza 2 / ID01: Idiomy — 9 przycisków w kolumnie, tekst może się łamać
   */
  #inwokacjaRoduActionsOverlay .idiomy-rodu-modal-actions {
    width: 100%;
    max-width: none;
  }

  #inwokacjaRoduActionsOverlay .gallery-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    white-space: normal !important;
    flex-wrap: wrap !important;
    text-align: left;
    justify-content: flex-start;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  #inwokacjaRoduActionsOverlay .gallery-btn .idiomy-btn-sub {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Pasek akcji nad drzewem — łamanie długich etykiet */
  .gallery-tree-add-bar .gallery-btn {
    white-space: normal;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }

  .gallery-tree-add-bar-buttons {
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .module-icon {
    width: 96px;
  }
  :root {
    --oni-welcome-box-height: clamp(420px, calc(100vw - 40px) * 0.75, 690px);
  }
  .oni-welcome {
    padding: 1.75rem 1.25rem 2rem;
    min-height: var(--oni-welcome-box-height);
  }
  /* Fallback bez container queries — pozycje w kadrze zdjęcia */
  @supports not (container-type: size) {
    #welcome.oni-welcome .oni-brand-wordmark {
      top: calc(
        (var(--oni-welcome-box-height) - (100vw - 40px) / var(--oni-welcome-photo-aspect)) / 2
        + ((100vw - 40px) / var(--oni-welcome-photo-aspect)) * var(--oni-welcome-brandwordmark-photo-y)
      );
    }
    #welcome.oni-welcome .oni-welcome-tagline {
      top: calc(
        (var(--oni-welcome-box-height) - (100vw - 40px) / var(--oni-welcome-photo-aspect)) / 2
        + ((100vw - 40px) / var(--oni-welcome-photo-aspect)) * var(--oni-welcome-tagline-photo-y)
      );
    }
  }
}

/* —— Smartfon w poziomie (landscape ≤ 500 px wysokości) —— */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --oni-welcome-box-height: min(98dvh, calc(100vw * 0.56));
  }
  .oni-welcome {
    min-height: var(--oni-welcome-box-height);
    padding: 1rem 1.25rem 1.5rem;
  }
  .oni-welcome-actions {
    bottom: 2% !important;
  }
  .oni-brand-wordmark {
    font-size: clamp(1.65rem, 5.5vh, 2.4rem);
  }
  .oni-welcome-tagline {
    font-size: clamp(0.9rem, 2.8vh, 1.2rem);
  }
  /* Moduły — nagłówek kompaktowy */
  .module-header {
    padding: 6px 16px !important;
    min-height: 0 !important;
  }
  /* Menu modułów — dwie kolumny */
  .module-icons.oni-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .module-icon--featured {
    grid-column: 1 / -1;
  }
}

/* —— Faza E: przyciski relacji (legacy inline w HTML) —— */
.relation-buttons button {
  background: var(--parent-child-color) !important;
  border-color: var(--oni-accent-deep) !important;
  color: #fff !important;
}

.relation-buttons button:hover {
  background: var(--oni-accent-deep) !important;
  border-color: var(--oni-accent-deep) !important;
}

.relation-instruction {
  background: var(--oni-accent-soft) !important;
  color: var(--oni-ink-muted) !important;
  border: 1px solid var(--oni-border) !important;
}

/* —— Faza F: Historie — pasek „Nowa historia” (sepia) —— */
#dziejeReaderBoardOverlay .dzieje-reader-edit-mode-title {
  color: var(--oni-ink-muted) !important;
}
#dziejeReaderBoardOverlay .dzieje-reader-edit-mode-title--new {
  color: var(--oni-ink) !important;
  border-color: var(--oni-sepia-light) !important;
  background: linear-gradient(180deg, var(--oni-paper-card) 0%, var(--oni-accent-soft) 55%, var(--oni-paper-deep) 100%) !important;
  box-shadow: 0 2px 10px rgba(42, 24, 24, 0.12), inset 0 1px 0 rgba(250, 248, 244, 0.85) !important;
}

/* —— Faza F: Mój Obraz — modal akcji (siatka, nowrap) —— */
#przeslanieActionsOverlay .przeslanie-modal-actions-grid .gallery-btn {
  white-space: nowrap !important;
}