/* The walkable studio: stage, corner cards, pins, drawer. Tokens come from app.css (gen 5 «Atelier»). */
:root { --card: rgba(248, 245, 239, .95); --side: min(404px, 30vw); --mini: min(264px, 21vw); --glide: 780ms; --stagger: 70ms; }

/* ---- top bar of the studio ---- */
.top-world { flex-wrap: nowrap; gap: var(--s3); padding: var(--s2) var(--s4); }
.places ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.places a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.places a:hover { background: var(--wash); }
.places a[aria-current="page"] { background: var(--mar); color: #fff; }
.places a[aria-current="page"] .count { background: #fff; color: var(--mar); }
.search { position: relative; flex: 1 1 220px; min-width: 140px; max-width: 420px; }
.search input { width: 100%; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--tinta); font: 400 .92rem var(--sans); }
.search input::placeholder { color: var(--gris); }
.search-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; max-height: 60vh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); padding: var(--s2); z-index: 60; }
.clock { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock time { font-family: var(--serif); font-size: 1.35rem; }
.clock-tz { font-size: .72rem; color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.live { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--ok); white-space: nowrap; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.live.is-demo { color: var(--warn); } .live.is-off { color: var(--danger); }
.me { position: relative; }
.me summary { list-style: none; cursor: pointer; border-radius: 50%; }
.me summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: var(--lino); font: 400 1.25rem var(--serif); }
.me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; display: grid; gap: var(--s2); padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); z-index: 60; }
.me:not([open]) .me-menu { display: none; }
.me-menu a { display: flex; align-items: center; min-height: 40px; color: var(--tinta); }
.me-menu p { margin: 0; overflow-wrap: anywhere; }

/* ---- the stage ---- */
.world [hidden], .top-world [hidden] { display: none !important; }
body.is-world { display: flex; flex-direction: column; height: 100dvh; }
.is-world main { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
.world { position: relative; height: 100%; min-height: 480px; overflow: hidden; background: var(--lino); }
.me-mode { display: none; }
.stage { position: absolute; inset: 0; outline-offset: -3px; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.tilt { position: absolute; left: 0; right: 0; height: 21%; z-index: 1; pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tilt-top { top: 0; -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent); mask-image: linear-gradient(to bottom, #000 10%, transparent); }
.tilt-bottom { bottom: 0; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent); mask-image: linear-gradient(to top, #000 10%, transparent); }
.roomtag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem) var(--serif); color: var(--tinta); pointer-events: none; text-shadow: 0 1px 0 rgba(239, 234, 226, .9); white-space: nowrap; }
.hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; margin: 0; max-width: calc(100% - 2 * var(--side) - 24px); padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .78rem; color: var(--gris); text-align: center; }
.world-note { position: relative; z-index: 4; margin: var(--s4); padding: var(--s3) var(--s4); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--mar); border-radius: var(--r2); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.world-note p { margin: 0; flex: 1 1 260px; }

/* ---- pins and place labels (positioned by the script) ---- */
.pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pin, .place-label { position: absolute; left: 0; top: 0; pointer-events: auto; text-decoration: none; white-space: nowrap; will-change: transform; }
.place-label { padding: 4px 12px 5px; border-left: 4px solid var(--mar); background: var(--card); color: var(--tinta); font: 400 1.15rem var(--serif); border-radius: 2px var(--r1) var(--r1) 2px; box-shadow: var(--shadow); min-height: 32px; display: inline-flex; align-items: center; }
.pin { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--tinta); color: var(--lino); font-size: .8rem; font-weight: 500; box-shadow: 0 6px 16px -8px rgba(28, 27, 25, .7); }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 8px; background: var(--tinta); }
.pin-n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #C9831A; color: #1C1B19; font-weight: 700; font-size: .78rem; }
.pin-danger .pin-n { background: #E2573F; color: #fff; }
.pin:hover, .place-label:hover { filter: brightness(1.08); }

/* ---- the four corner cards ---- */
.cards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wcard { position: absolute; width: calc(var(--side) - 32px); pointer-events: auto; overflow: auto; padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: thin; }
.wc-tl { top: 16px; left: 16px; max-height: calc(54% - 24px); }
.wc-bl { bottom: 16px; left: 16px; max-height: calc(46% - 24px); }
.wc-tr { top: 16px; right: 16px; max-height: calc(56% - 24px); }
.wc-br { bottom: 16px; right: 16px; max-height: calc(44% - 24px); display: flex; flex-direction: column; }
.wc-br > .wbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ---- compact corner cards (3D view): a chip at each edge, so the studio stays in view; one opens at a time ---- */
.wsum { display: none; }
.wsum-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.wsum-t { font: 400 1.16rem/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsum-s { font-size: .76rem; line-height: 1.25; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsum-open, .wsum-close { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); }
.wsum-close, .is-open > .wsum .wsum-open { display: none; }
.is-open > .wsum .wsum-close { display: grid; }
body:not(.is-film) .is-3d .wcard { width: var(--mini); max-height: none; padding: 0; overflow: hidden; }
body:not(.is-film) .is-3d .wsum { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px 8px 16px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
body:not(.is-film) .is-3d .wsum:focus-visible { outline-offset: -4px; }
body:not(.is-film) .is-3d .wcard:not(.is-open) > .wbody { display: none; }
body:not(.is-film) .is-3d .wcard.is-open { z-index: 2; width: calc(var(--side) - 32px); max-height: calc(100% - 116px); overflow: auto; }
body:not(.is-film) .is-3d .wcard.is-open > .wsum { position: sticky; top: 0; z-index: 1; border-radius: 0; background: var(--glass-solid, var(--card)); }
body:not(.is-film) .is-3d .wbody { padding: 4px var(--s4) var(--s4); }
body:not(.is-film) .is-3d .wbody > .eyebrow { display: none; }
body:not(.is-film) .is-3d .wbody > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:not(.is-film) .is-3d .cards:has(.wc-tr.is-open, .wc-br.is-open) ~ .world-tools { right: calc(var(--side) + 4px); }
.wcard h2 { font-size: 1.55rem; margin: 0 0 var(--s3); overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.wcard .meta { margin: var(--s3) 0 0; font-size: .74rem; color: var(--gris); overflow-wrap: anywhere; }
.wnote { margin: var(--s3) 0 0; font-size: .78rem; line-height: 1.45; color: var(--gris); }

.kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.kpi { display: grid; gap: 1px; padding: var(--s3); background: #fff; border: 1px solid var(--line); border-radius: var(--r2); min-width: 0; }
.kpi-n { font: 400 2.1rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.kpi-l { font-size: .82rem; font-weight: 500; line-height: 1.25; }
.kpi-d { font-size: .72rem; color: var(--gris); line-height: 1.3; }
.kpi-warn .kpi-n { color: var(--warn); } .kpi-danger .kpi-n { color: var(--danger); } .kpi-ok .kpi-n { color: var(--ok); }

.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: var(--wash); color: #44494F; }
.chip-mar { background: #DCE9F1; color: #084B72; } .chip-ok { background: #DCEBDF; color: var(--ok); }
.chip-warn { background: #F3E7CF; color: #6B4200; } .chip-danger { background: #F6DDD8; color: #8A2519; } .chip-quiet { background: var(--wash); color: #44494F; }
.detail-state { margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .74rem; color: var(--gris); }
.detail-state .meta-src { overflow-wrap: anywhere; }
.wkv { margin: 0 0 var(--s3); display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 5px var(--s3); font-size: .86rem; line-height: 1.4; }
.wkv dt { color: var(--gris); } .wkv dd { margin: 0; overflow-wrap: anywhere; }
.wactions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.wactions li { display: grid; gap: 4px; justify-items: start; }
.waction-note { font-size: .76rem; line-height: 1.4; color: var(--gris); }

.wsteps { list-style: none; margin: 0; padding: 0 0 2px; display: flex; flex-wrap: wrap; row-gap: var(--s3); overflow: hidden; }
.wstep { position: relative; flex: 1 0 62px; display: grid; justify-items: center; gap: 5px; text-align: center; min-width: 0; }
.wstep::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.wstep:first-child::before { display: none; }
.wstep-dot { position: relative; z-index: 1; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 5px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wstep-label { font-size: .68rem; line-height: 1.2; color: var(--gris); overflow-wrap: anywhere; padding: 0 1px; }
.wstep.is-past::before, .wstep.is-now::before { background: var(--mar); }
.wstep.is-past .wstep-dot { border-color: var(--mar); color: var(--mar); }
.wstep.is-now .wstep-dot { background: var(--mar); border-color: var(--mar); color: #fff; box-shadow: 0 0 0 4px rgba(11, 94, 142, .18); }
.wstep.is-now .wstep-label { color: var(--tinta); font-weight: 700; }

.wtabs ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.wtabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; color: var(--gris); text-decoration: none; font-size: .86rem; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; }
.wtabs a[aria-current] { color: var(--mar); border-bottom-color: var(--mar); }
.wtab-n { font-size: .7rem; font-weight: 700; color: inherit; opacity: .8; }
.wrows { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; }
.wrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; padding: 6px 10px; border-radius: var(--r2); color: var(--tinta); text-decoration: none; }
.wrow:hover { background: var(--wash); }
.wrow[aria-current] { background: #DCE9F1; box-shadow: inset 3px 0 0 var(--mar); }
.wrow-text { display: grid; min-width: 0; }
.wrow-t { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow-s { font-size: .76rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow[aria-current] .wrow-s { color: #3F4A52; }
.wspaces { margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .8rem; }
.wspaces a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---- view tools: right edge of the free area ---- */
.world-tools { position: absolute; z-index: 6; right: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.tool { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--tinta); cursor: pointer; box-shadow: var(--shadow); transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.tool:hover { background: #fff; } .tool:active { transform: scale(.94); }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the workspace drawer ---- */
.drawer { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(820px, 58vw); overflow: auto; background: var(--lino); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -30px rgba(28, 27, 25, .55); padding: 0 var(--s4) var(--s6); }
.drawer-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: var(--s3) 0; background: linear-gradient(var(--lino) 70%, transparent); }
.drawer .panel { scroll-margin-top: 0; }
.drawer .grid { grid-template-columns: 1fr; }
.film-end { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: var(--s4); background: var(--lino); opacity: 0; }
.film-end p { margin: 0; font: 400 2.6rem var(--serif); }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .cards.is-entering .wcard { animation: card-in 340ms var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
  .cards.is-picked .wc-tr { animation: card-pick 520ms ease-out 1; }
  .live:not(.is-demo):not(.is-off) .live-dot { animation: live-pulse 2.4s ease-in-out infinite; }
  .drawer.is-open { animation: drawer-in 260ms var(--ease) both; }
  .is-3d .wcard.is-open > .wbody { animation: card-in 220ms var(--ease) both; }
}
.is-still .wcard.is-open > .wbody, .is-still .cards.is-entering .wcard, .is-still .cards.is-picked .wc-tr, .is-still .drawer.is-open, .no3d .drawer.is-open, .no3d .wcard, .is-film .wcard, .is-film .drawer { animation: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes card-pick { 0% { box-shadow: 0 0 0 3px rgba(11, 94, 142, .6), var(--shadow); } 100% { box-shadow: 0 0 0 0 rgba(11, 94, 142, 0), var(--shadow); } }
@keyframes live-pulse { 50% { opacity: .35; } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* ---- no 3D (no WebGL, reduced motion): the same cards as a page ---- */
.world.no3d { height: auto; min-height: 0; overflow: visible; }
body.is-world.no3d { display: block; height: auto; }
.no3d .stage, .no3d .world-tools, .no3d .hint { display: none; }
.no3d .cards, .world-list .cards { position: static; pointer-events: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: var(--s4); }
.world-list .cards { padding: 0; }
.no3d .wcard, .world-list .wcard { position: static; width: auto; max-height: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
.no3d .wrows, .world-list .wrows { max-height: 420px; }
.no3d .drawer { position: static; width: auto; box-shadow: none; border: 0; padding: 0 var(--s4); }
.world-list { display: grid; gap: var(--s4); }
.world-list .places ul { display: inline-flex; flex-wrap: wrap; }
.searchform { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }

/* ---- film: nothing may depend on the wall clock, so no CSS transition or animation runs; the script places every frame ---- */
.is-film *, .is-film *::before, .is-film *::after { transition: none !important; animation: none !important; }
.is-film .world-tools, .is-film .hint, .is-film .skip, .is-film .waction-note, .is-film .wspaces, .is-film .wcard .meta, .is-film .kpi-d { display: none; }
.is-film .wc-br { max-height: calc(40% - 24px); } .is-film .wc-tr { max-height: calc(60% - 24px); }
html:has(body.film-16x9) { font-size: 17px; }
.film-16x9 { --side: min(384px, 33vw); }
.film-9x16 .search, .film-9x16 .places, .film-9x16 .clock-tz { display: none; }
.film-9x16 .stage { position: absolute; height: auto; }
.film-9x16 .cards { position: absolute; display: block; padding: 0; }
.film-9x16 .wcard { position: absolute; width: auto; left: 10px; right: 10px; }
.film-9x16 .wc-tl { top: 10px; max-height: none; }
.film-9x16 .wc-tr { top: auto; bottom: 10px; max-height: 38%; }
.film-9x16 .wc-bl, .film-9x16 .wc-br, .film-9x16 .wc-tl .meta, .film-9x16 .wactions { display: none; }
.film-9x16 .kpis { grid-template-columns: repeat(4, 1fr); } .film-9x16 .kpi { padding: 8px; } .film-9x16 .kpi-n { font-size: 1.7rem; } .film-9x16 .kpi-d { display: none; }
.film-9x16 .roomtag { display: none; }
.film-9x16 .pins { clip-path: inset(196px 0 286px 0); }

/* ---- small screens: stage on top, cards below ---- */
@media (max-width: 899px) {
  .top-world { flex-wrap: wrap; row-gap: var(--s2); padding: var(--s2) var(--s3); }
  .top-world .places { order: 5; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .top-world .search { order: 6; flex: 1 0 100%; max-width: none; }
  .clock-tz { display: none; }
  body.is-world:not(.is-film) { display: block; height: auto; }
  body:not(.is-film) .world { height: auto; min-height: 0; overflow: visible; }
  .top-world .top-tools > .inline { display: none; }
  .me-mode { display: block; }
  .top-world .top-tools { margin-left: 0; }
  .roomtag { display: none; }
  body:not(.is-film) .stage { position: relative; height: 48dvh; min-height: 300px; }
  body:not(.is-film) .cards { position: static; pointer-events: auto; display: grid; gap: var(--s3); padding: var(--s3); }
  body:not(.is-film) .wcard { position: static; width: auto; max-height: none; }
  body:not(.is-film) .is-3d .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; }
  body:not(.is-film) .is-3d .wcard, body:not(.is-film) .is-3d .wcard.is-open { width: auto; max-height: none; }
  body:not(.is-film) .is-3d .wcard.is-open { grid-column: 1 / -1; }
  body:not(.is-film) .wrows { max-height: 320px; }
  .world-tools { top: calc(24dvh); right: 8px; }
  .tilt, .hint { display: none; }
  .place-label { font-size: .95rem; padding: 2px 10px; min-height: 44px; }
  .pin { font-size: .78rem; min-height: 44px; }
  .drawer { position: fixed; inset: 0; width: auto; z-index: 70; padding: 0 var(--s3) var(--s6); }
  .no3d .cards, .world-list .cards { grid-template-columns: 1fr; padding: var(--s3); }
  .world-list .cards { padding: 0; }
}