/* ПК-розмітка «кахельна роздягальня»: біла плитка, сітка затирки = сітка плану, холодне люмінесцентне світло,
   номери на дверцятах, числа — емальовані таблички. Активна лише при html[data-layout=d]. */
html[data-layout=d] .L-m { display: none !important; }
html[data-layout=m] .L-d { display: none !important; }

html[data-layout=d] {
  --tile: #f3f6f6; --tile2: #e9eff0; --grout: #c4ced1; --ink: #1b272e; --ink2: #475861; --ink3: #8996a0;
  --green: #0a7f47; --green-l: #18a663; --plq: #213039; --plq-ln: rgba(255, 255, 255, .22); --hl: #c84b14;
  --cab: #dde6ea;
  --tech: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, "Cascadia Mono", monospace;
  background: var(--tile); color-scheme: light;
}
html[data-layout=d] body {
  margin: 0; color: var(--ink); font: 17px/1.55 var(--tech); overflow-x: hidden; background-color: var(--tile);
  /* плитка 64 px зі швом 2 px і легким відблиском у кожній плитці */
  background-image:
    linear-gradient(var(--grout) 2px, transparent 2px), linear-gradient(90deg, var(--grout) 2px, transparent 2px),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%);
  background-size: 64px 64px, 64px 64px, 64px 64px;
}
/* холодне світло лампи денного світла: блимає при вмиканні, далі рівне */
.L-d::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(214, 236, 255, .7) 0, rgba(214, 236, 255, .18) 38%, rgba(214, 236, 255, 0) 70%);
  animation: d-tube 1.4s steps(1, end) both;
}
@keyframes d-tube { 0% { opacity: 0; } 8% { opacity: .9; } 13% { opacity: .1; } 20% { opacity: 1; } 26% { opacity: .3; } 34%, 100% { opacity: 1; } }
.L-d { position: relative; }
.L-d > * { position: relative; z-index: 1; }
.L-d a { color: inherit; }
.L-d :focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }

.d-top {
  position: fixed !important; inset: 0 0 auto; z-index: 5 !important; height: 56px; display: flex; align-items: center; gap: 24px;
  padding: 0 32px; background: rgba(243, 246, 246, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--grout); box-shadow: 0 6px 18px -10px rgba(120, 170, 220, .9); /* смуга світла лампи */
}
.d-brand { font-weight: 700; letter-spacing: .04em; }
.d-brand i { font-style: normal; font-weight: 400; color: var(--ink2); }
.d-tc { margin-left: auto; font: 13px var(--mono); color: var(--ink2); letter-spacing: .1em; }
.d-tc b { color: var(--hl); font-weight: 700; }

/* CTA — як зелений знак виходу */
.d-cta {
  display: inline-flex; align-items: center; gap: .5em; padding: 16px 26px; border-radius: 6px; align-self: flex-start;
  background: var(--green); color: #fff !important; font: 700 18px/1 var(--tech); text-decoration: none;
  letter-spacing: .02em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 1px var(--green), 0 10px 22px -10px rgba(10, 127, 71, .8);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.d-cta:hover { transform: translateY(-2px); background: var(--green-l); }
.d-cta--sm { padding: 9px 16px; font-size: 15px; align-self: center; }

.d-film { display: grid; grid-template-columns: minmax(360px, 36%) 1fr; gap: 0 36px; padding: 0 32px; }
.d-steps { position: relative; z-index: 1; }
.d-step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 40px; max-width: 520px; }
.d-final { min-height: 90vh; }
.d-eyebrow, .d-no {
  align-self: flex-start; font: 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px;
  background: var(--plq); color: #fff; padding: 5px 10px; border-radius: 4px;
}
.d-step h1, .d-step h2 { font-weight: 700; line-height: 1.04; margin: 0 0 22px; letter-spacing: -.01em; }
.d-step h1 { font-size: clamp(46px, 4.6vw, 70px); }
.d-step h2 { font-size: clamp(34px, 3.2vw, 50px); }
.d-step h1 span:nth-child(3) b { color: var(--green); }
.d-lead { font-size: 20px; margin: 0 0 30px; max-width: 30em; }
.d-note { margin: 28px 0 0; font-size: 14px; color: var(--ink2); max-width: 32em; }
.d-step p { margin: 0 0 16px; }
.d-step > p:not(.d-no):not(.d-eyebrow) { background: rgba(243, 246, 246, .9); box-shadow: 0 0 0 6px rgba(243, 246, 246, .9); }
.d-small { font-size: 15px; color: var(--ink2); }
/* пункти норм — маленькі емальовані таблички */
.d-refs { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 10px; }
.d-refs li { position: relative; padding: 10px 14px 10px 16px; background: #fff; border: 1px solid var(--grout); border-left: 4px solid var(--plq);
  border-radius: 4px; box-shadow: 0 2px 0 var(--grout); }
.d-refs b { font-weight: 600; }
.L-d cite { display: block; font: 600 13px var(--mono); font-style: normal; color: var(--hl); margin-top: 3px; letter-spacing: .02em; }
.d-warn { border: 2px solid var(--ink); border-radius: 6px; padding: 14px 18px; margin-top: 8px; background: #fff7d6; }
.d-warn-h { font-weight: 700; margin: 0 0 6px !important; }
.d-warn ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 15px; }
.d-count { font-style: normal; color: var(--hl); font-variant-numeric: tabular-nums; }

/* кінетика: рядки заголовка виїжджають з маски */
.kin > span { display: inline-block; overflow: clip; overflow-clip-margin: .12em; padding: .04em .14em .08em 0; margin-right: -.14em; vertical-align: bottom; }
.kin > span > b { display: inline-block; font-weight: inherit; transform: translateY(108%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.kin > span:nth-child(2) > b { transition-delay: .09s; }
.kin > span:nth-child(3) > b { transition-delay: .18s; }
.d-step.on .kin > span > b { transform: none; }
.d-step > :not(.kin) { opacity: 0; transform: translateY(14px); transition: opacity .6s .25s, transform .6s .25s; }
.d-step.on > :not(.kin) { opacity: 1; transform: none; }
.d-step .d-no { opacity: 1; transform: none; }

/* панель з планом */
.d-sheet { position: sticky; top: 72px; height: calc(100vh - 92px); align-self: start; margin-top: 16px; }
.d-frame {
  position: relative; height: 100%; box-sizing: border-box; background: #fbfcfc; border: 1px solid var(--grout); border-radius: 8px;
  box-shadow: 0 1px 0 #fff inset, 0 24px 50px -30px rgba(27, 39, 46, .55);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr auto; padding: 12px 0 0 12px; overflow: hidden;
}
.d-plan { grid-column: 1 / -1; min-height: 0; display: flex; }
.d-plan svg { width: 100%; height: 100%; }
.d-legend { align-self: end; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 12px 12px 4px; font-size: 13px; color: var(--ink2); }
.d-legend i { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--ink); background: var(--cab); }
.d-legend .lg-bench { border-style: dashed; border-color: var(--ink2); background: none; }
.d-legend .lg-evac { background: rgba(10, 127, 71, .22); border-color: var(--green); }
.d-legend .lg-zone { background: repeating-linear-gradient(45deg, var(--ink3) 0 1px, transparent 1px 5px); border-color: var(--ink3); }

/* табличка на стіні: емаль, чотири гвинти */
.d-stamp {
  border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 330px; align-self: end; margin: 0 12px 12px 0;
  color: #fff; border-radius: 8px; padding: 10px 12px;
  background:
    radial-gradient(circle at 8px 8px, #b8c3c8 2.5px, #6d7b82 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, #b8c3c8 2.5px, #6d7b82 3px, transparent 3.5px),
    radial-gradient(circle at 8px calc(100% - 8px), #b8c3c8 2.5px, #6d7b82 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #b8c3c8 2.5px, #6d7b82 3px, transparent 3.5px), var(--plq);
  box-shadow: 0 0 0 3px var(--plq) inset, 0 0 0 4px rgba(255, 255, 255, .55) inset, 0 8px 18px -8px rgba(0, 0, 0, .5);
}
.d-stamp th, .d-stamp td { border-bottom: 1px solid var(--plq-ln); padding: 6px 10px; text-align: left; font-weight: 400; white-space: nowrap; }
.d-stamp td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.d-stamp .st-title { text-align: left !important; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 12px; }
.d-stamp .st-foot { font: 11px var(--mono); color: rgba(255, 255, 255, .7); text-align: left !important; border-bottom: 0; }
.d-stamp .st-sum b { font-size: 24px; color: #fff; }
.d-stamp .st-val { color: #7ee2a8; }
.d-stamp .st-line, .d-stamp .st-sum { opacity: .2; transition: opacity .6s; }
.d-sheet.s5 .st-line, .d-sheet.s5 .st-sum { opacity: 1; }
.d-sheet.s5 .st-sum { transition-delay: .3s; }

/* SVG-план */
.L-d .plan text { font-family: var(--tech); fill: var(--ink); }
.L-d .plan .tile { fill: var(--tile); stroke: var(--grout); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(.55); transition: opacity .35s, transform .45s cubic-bezier(.2, 1.3, .4, 1); transition-delay: calc(var(--d) * 32ms); }
.d-sheet.s0 .plan .tile { opacity: 1; transform: none; }
.L-d .plan .wall { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: miter; }
.L-d .plan .door, .L-d .plan .door-arc { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.L-d .plan .win { stroke: #5aa0d8; stroke-width: 2; }
.L-d .plan .hatch-l { stroke: var(--ink3); stroke-width: 1.2; }
.L-d .plan .zone { fill: url(#hatch); stroke: var(--ink3); stroke-dasharray: 3 3; }
.L-d .plan .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.6, 0, .3, 1); }
.L-d .plan .g-walls .draw { transition-delay: .7s; }
.L-d .plan .door.draw, .L-d .plan .door-arc.draw { transition-delay: 1.8s; transition-duration: .8s; }
.d-sheet.s0 .plan .g-walls .draw { stroke-dashoffset: 0; }

.L-d .plan .cab .body { fill: var(--cab); stroke: var(--ink); stroke-width: 1.3; }
.L-d .plan .cab .bench { fill: #fff; fill-opacity: .6; stroke: var(--ink2); stroke-width: .9; stroke-dasharray: 3 2; }
.L-d .plan .cab .split { stroke: var(--ink); stroke-width: .9; }
.L-d .plan .cab .num { font-size: 12.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--ink2); font-variant-numeric: tabular-nums; }
.L-d .plan .cab { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-14px);
  transition: opacity .3s, transform .45s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--i) * 22ms); }
.d-sheet.s2 .plan .cab { opacity: 1; transform: none; }
.L-d .plan .rowlbl { font-size: 20px; text-anchor: middle; fill: var(--ink2); font-weight: 700; opacity: 0; transition: opacity .5s 1.2s; }
.d-sheet.s2 .plan .rowlbl { opacity: 1; }

.L-d .plan .ext { stroke: var(--ink3); stroke-width: .9; }
.L-d .plan .dline { stroke: var(--ink2); stroke-width: 1.1; fill: none; }
.L-d .plan .arw { fill: none; stroke: var(--ink2); stroke-width: 1.3; }
.L-d .plan .dtext { font-size: 22px; text-anchor: middle; font-variant-numeric: tabular-nums; fill: var(--ink); font-weight: 600; }
.L-d .plan .g-dims { opacity: 0; transition: opacity .4s; }
.d-sheet.s1 .plan .g-dims { opacity: 1; }
.d-sheet.s1 .plan .g-dims .draw { stroke-dashoffset: 0; transition-delay: .2s; transition-duration: .9s; }
.L-d .plan .g-zone { opacity: 0; transition: opacity .6s .6s; }
.d-sheet.s1 .plan .g-zone { opacity: 1; }

.L-d .plan .aisle { fill: var(--hl); fill-opacity: 0; transition: fill-opacity .5s; }
.d-sheet.s3:not(.s4) .plan .aisle { fill-opacity: .13; }
.L-d .plan .g-adims .aisle-dim { opacity: 0; transition: opacity .4s; }
.d-sheet.s3 .plan .g-adims .aisle-dim { opacity: 1; }
.d-sheet.s3 .plan .g-adims .aisle-dim .draw { stroke-dashoffset: 0; transition-duration: .7s; }
.L-d .plan .aisle-dim .dtext { fill: var(--hl); font-weight: 700; font-size: 22px; paint-order: stroke; stroke: var(--tile); stroke-width: 5px; }
.L-d .plan .callout { opacity: 0; transition: opacity .5s; transition-delay: calc(.5s + var(--i) * .15s); }
.d-sheet.s3 .plan .callout { opacity: 1; }
.d-sheet.s3 .plan .callout .draw { stroke-dashoffset: 0; transition-delay: calc(.4s + var(--i) * .15s); transition-duration: .6s; }
.L-d .plan .leader { stroke: var(--hl); stroke-width: 1.2; fill: none; }
.L-d .plan .dot { fill: var(--hl); }
.L-d .plan .ctext { font-size: 17px; }
.L-d .plan .cnum { fill: var(--hl); font-weight: 700; font-size: 22px; }
.L-d .plan .cref { fill: var(--ink); font-family: var(--mono); font-size: 16.5px; }

.L-d .plan .evac { fill: var(--green); fill-opacity: 0; stroke: var(--green); stroke-opacity: 0; stroke-dasharray: 8 6; stroke-width: 1.4; transition: fill-opacity .6s, stroke-opacity .6s; }
.d-sheet.s4 .plan .evac { fill-opacity: .16; stroke-opacity: .9; }
.L-d .plan .flow { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 7 9; opacity: 0; transition: opacity .5s .4s; }
.d-sheet.s4 .plan .flow { opacity: .95; animation: d-flow 1.1s linear infinite; }
.L-d .plan .evac-dim { opacity: 0; transition: opacity .4s; }
.L-d .plan .evac-dim .dtext { fill: var(--green); font-weight: 700; paint-order: stroke; stroke: var(--tile); stroke-width: 5px; }
.d-sheet.s4 .plan .evac-dim { opacity: 1; }
.d-sheet.s4 .plan .evac-dim .draw { stroke-dashoffset: 0; }
@keyframes d-flow { to { stroke-dashoffset: -32; } }

.d-video { padding: 80px 32px 40px; max-width: 1100px; margin: 0 auto; }
.d-video h2 { font-size: 28px; margin: 0 0 18px; display: inline-block; background: rgba(243, 246, 246, .9); }
.d-vid { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--grout); border-radius: 8px; background: #fff; display: block; }
.d-foot { padding: 24px 32px 60px; max-width: 1100px; margin: 0 auto; font-size: 14px; color: var(--ink2); }
.d-foot > * { background: rgba(243, 246, 246, .92); }
.d-src summary { cursor: pointer; color: var(--ink); }
.L-d .src-list { padding-left: 1.2em; display: grid; gap: 6px; }
.L-d .src-list a { color: var(--hl); }

@media (prefers-reduced-motion: reduce) {
  .L-d *, .L-d *::before, .L-d::before { transition: none !important; animation: none !important; }
  .kin > span > b, .d-step > :not(.kin) { transform: none !important; opacity: 1 !important; }
}
@media (max-width: 1100px) {
  .d-film { grid-template-columns: minmax(340px, 42%) 1fr; gap: 0 24px; padding: 0 20px; }
  .d-stamp { min-width: 0; font-size: 12px; }
}

/* посилання «Конфіденційність» у підвалі — кольором тексту підвалу (docs/SITE.md «Конфиденциальность») */
.d-foot a { color: inherit; }