/* Static schematic layered stack — all 6 scales visible at once.
   No animation, no JS, no canvas. Pure HTML + CSS.
   Layers: Людина (bottom) → Сім'я → Рід → Народ → Країна → Світ (top). */

.scale-stack {
  --plate-h: 78px;
  --plate-tilt: 8deg;
  --plate-offset: 18px;        /* horizontal offset between plates for depth feel */
  --plate-y-overlap: -6px;     /* slight vertical overlap to suggest stacking */
  position: relative;
  margin: 2.5rem auto;
  max-width: 60rem;
  display: flex;
  flex-direction: column-reverse;  /* render bottom-to-top in DOM, display top plate first visually */
  perspective: 1400px;
  perspective-origin: center 30%;
  padding: 1.5rem 0 .5rem;
}

.scale-plate {
  position: relative;
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--plate-h);
  margin-top: var(--plate-y-overlap);
  padding: 1rem 1.5rem 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 14px;
  transform-style: preserve-3d;
  transform: rotateX(var(--plate-tilt));
  transform-origin: center top;
  box-shadow:
    0 18px 32px -22px rgba(0,0,0,.4),
    0 4px 12px -8px rgba(0,0,0,.25);
}
html.aud-youth .scale-plate {
  box-shadow:
    0 18px 32px -22px rgba(0,0,0,.6),
    0 4px 12px -8px rgba(0,0,0,.4);
}

/* Top plates progressively narrower + lower opacity for depth feel — purely visual */
.scale-plate:nth-child(1) { width: 100%; opacity: .98; }   /* Людина (bottom in stack, but DOM-first because column-reverse) */
.scale-plate:nth-child(2) { width: 96%;  margin-left: auto; margin-right: auto; opacity: .96; }
.scale-plate:nth-child(3) { width: 92%;  margin-left: auto; margin-right: auto; opacity: .94; }
.scale-plate:nth-child(4) { width: 88%;  margin-left: auto; margin-right: auto; opacity: .92; }
.scale-plate:nth-child(5) { width: 84%;  margin-left: auto; margin-right: auto; opacity: .9; }
.scale-plate:nth-child(6) { width: 80%;  margin-left: auto; margin-right: auto; opacity: .88; }

/* Per-scale color border-left + subtle tinted background */
.scale-plate.is-lyudyna { border-left-color: #B089DD; background: linear-gradient(90deg, color-mix(in srgb, #B089DD 7%, var(--surface)), var(--surface) 60%); }
.scale-plate.is-simya   { border-left-color: #E86B5E; background: linear-gradient(90deg, color-mix(in srgb, #E86B5E 7%, var(--surface)), var(--surface) 60%); }
.scale-plate.is-rid     { border-left-color: #E8B04B; background: linear-gradient(90deg, color-mix(in srgb, #E8B04B 7%, var(--surface)), var(--surface) 60%); }
.scale-plate.is-narod   { border-left-color: #7FB069; background: linear-gradient(90deg, color-mix(in srgb, #7FB069 7%, var(--surface)), var(--surface) 60%); }
.scale-plate.is-krayina { border-left-color: #5DA9E9; background: linear-gradient(90deg, color-mix(in srgb, #5DA9E9 7%, var(--surface)), var(--surface) 60%); }
.scale-plate.is-svit    { border-left-color: #8B98A8; background: linear-gradient(90deg, color-mix(in srgb, #8B98A8 7%, var(--surface)), var(--surface) 60%); }

.scale-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-hint);
  white-space: nowrap;
}
.scale-name {
  display: flex; align-items: baseline; gap: .85rem;
  flex-wrap: wrap;
}
.scale-name .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  color: var(--ink);
}
html.aud-elders .scale-name .name { font-weight: 400; font-style: italic; }
.scale-name .sub {
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--ink-dim);
  line-height: 1.4;
  flex: 1; min-width: 12rem;
}
html.aud-elders .scale-name .sub { font-size: .92rem; }

.scale-icon {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent);
  width: 1.5rem; text-align: center;
  opacity: .6;
}

/* Vertical thread connecting all plates (the recurring principle line) */
.scale-stack::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
  opacity: .35;
  z-index: 0;
}
.scale-plate { position: relative; z-index: 1; }

/* Audience-aware sub text — show only the active variant */
.scale-name .sub-elders { display: none; }
html.aud-elders .scale-name .sub-youth  { display: none; }
html.aud-elders .scale-name .sub-elders { display: inline; }

/* Optional caption under the stack */
.scale-stack-caption {
  text-align: center;
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-hint);
  margin-top: 1.5rem;
}

/* Mobile: drop tilt and offset variations for clarity */
@media (max-width: 720px) {
  .scale-stack {
    --plate-tilt: 0deg;
    --plate-y-overlap: .5rem;
    perspective: none;
  }
  .scale-plate { width: 100% !important; opacity: 1 !important; padding: .85rem 1rem; }
  .scale-plate { grid-template-columns: 3ch 1fr; }
  .scale-icon { display: none; }
  .scale-name .sub { font-size: .82rem; }
}

/* Reduced motion / no transform support */
@media (prefers-reduced-motion: reduce) {
  .scale-plate { transform: none; }
}