/* owner: WORLD | contract: DESIGN_BRIEF.md sections 8, 9, 11; CONTRACTS.md section 1 (no inline styles, tokens only) */
/* The world host, the label card, the tooltip, and the screensaver chrome. Component classes (kw-btn, kw-chip,
   kw-sr) belong to SHELL and are only used here, never redefined. Every value has a token fallback. */

.kw-world {
  position: absolute; inset: 0; overflow: hidden; background: var(--kw-bg-0, #07070a);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.kw-world--drag { cursor: grabbing; }
.kw-world--pointer { cursor: pointer; }
.kw-world__stage { position: absolute; inset: 0; }
.kw-world__canvas { display: block; position: absolute; left: 0; top: 0; outline: none; }
/* a fresh WebGL canvas is solid black until its first picture is drawn: it stays hidden (the host's own sky colour shows) and fades in once drawn */
.kw-world__canvas:not(.kw-world__canvas--map) { opacity: 0; transition: opacity var(--kw-t-slow, 400ms) ease; }
.kw-world__canvas.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kw-world__canvas:not(.kw-world__canvas--map) { transition: none; } }
.kw-world__index { position: absolute; }

/* tooltip */
.kw-world__tip {
  position: absolute; left: var(--kw-tip-x, 0); top: var(--kw-tip-y, 0); transform: translate(-50%, -100%);
  z-index: 3; pointer-events: none; padding: 6px 12px; border-radius: var(--kw-r-pill, 999px);
  font: 600 16px/1.2 var(--kw-font-display, "Cormorant Garamond", Georgia, serif); letter-spacing: .01em;
  color: var(--kw-ink, #f8f6f2); background: var(--kw-panel-bg, rgba(23, 21, 32, .92));
  border: 1px solid var(--kw-line-2, rgba(163, 51, 111, .3)); box-shadow: var(--kw-glow-accent, 0 0 22px rgba(224, 88, 159, .2));
  white-space: nowrap;
}
.kw-world__tip[hidden] { display: none; }

/* label card: anchored to the building (desktop), bottom sheet (phone) */
.kw-world__card {
  position: absolute; left: var(--kw-card-x, 16px); top: var(--kw-card-y, 80px); z-index: 4;
  width: min(284px, calc(100% - 24px)); padding: 16px 16px 14px; border-radius: var(--kw-r-m, 14px);
  color: var(--kw-ink, #f8f6f2);
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(248, 246, 242, .06), transparent 60%),
    linear-gradient(115deg, transparent 40%, rgba(232, 182, 200, .06) 41%, transparent 43%),
    var(--kw-panel-bg, linear-gradient(160deg, rgba(23, 21, 32, .94), rgba(16, 16, 22, .92)));
  border: 1px solid var(--kw-line-2, rgba(163, 51, 111, .3)); box-shadow: var(--kw-shadow, 0 18px 48px rgba(0, 0, 0, .55)), var(--kw-glow-accent, 0 0 22px rgba(224, 88, 159, .18));
  animation: kw-world-pop var(--kw-t-med, 240ms) var(--kw-ease, cubic-bezier(.2, .8, .2, 1));
  cursor: default;
}
.kw-world__card[hidden] { display: none; }
.kw-world__card::before, .kw-world__card::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border: 0 solid rgb(var(--kw-accent-rgb, 224 88 159) / .6); }
.kw-world__card::before { left: 5px; top: 5px; border-left-width: 2px; border-top-width: 2px; }
.kw-world__card::after { right: 5px; bottom: 5px; border-right-width: 2px; border-bottom-width: 2px; }
.kw-world__card-x {
  position: absolute; right: 6px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--kw-ink-3, #9b94a9); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.kw-world__card-x:hover { color: var(--kw-ink, #f8f6f2); }
.kw-world__card-name { font: 700 28px/1.1 var(--kw-font-display, "Cormorant Garamond", Georgia, serif); font-feature-settings: "lnum"; padding-right: 36px; }
.kw-world__card-status { margin-top: 6px; font: 600 14px/1.3 var(--kw-font-ui, Inter, system-ui, sans-serif); display: flex; align-items: center; gap: 4px; }
.kw-world__card-status--ok { color: var(--kw-t-ok, #207456); }
.kw-world__card-status--wait { color: var(--kw-t-violet, #a597ff); }
.kw-world__card-status--warn { color: var(--kw-t-warn, #9747a8); }
.kw-world__card-status--bad { color: var(--kw-t-loss, #bc2d5f); }
.kw-world__card-status--idle { color: var(--kw-ink-3, #9b94a9); }
.kw-world__card-sub { margin-top: 4px; font: 400 14px/1.4 var(--kw-font-ui, Inter, system-ui, sans-serif); color: var(--kw-ink-2, #cdc6d4); }
.kw-world__card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 12px; }
.kw-world__card-chips:empty { display: none; }
.kw-world__chip { min-height: 44px; }
.kw-world__enter { width: 100%; }
@keyframes kw-world-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.kw-world__card--sheet {
  left: 0; right: 0; top: auto; bottom: calc(var(--kw-dock-h, 76px) + env(safe-area-inset-bottom, 0px)); width: auto; border-radius: var(--kw-r-l, 22px) var(--kw-r-l, 22px) 0 0; padding: 18px 16px 16px;
  animation-name: kw-world-sheet;
}
.kw-world__card--sheet .kw-world__chip, .kw-world__card--sheet .kw-world__enter { min-height: 56px; }
@keyframes kw-world-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* keyboard stand-ins for buildings: hidden but reachable; show a focus ring on the hotspot list item's card */
.kw-world__index .kw-hotspot:focus-visible { outline: 3px solid var(--kw-accent, #e0589f); outline-offset: 2px; }

/* while the screensaver is up, the signed-in pages stay in memory but are hidden (and inert, set by screensaver.js) */
html[data-saver="on"] #kw-hud, html[data-saver="on"] #kw-main, html[data-saver="on"] #kw-sheet, html[data-saver="on"] #kw-modal, html[data-saver="on"] #kw-tour { visibility: hidden; }

/* ------------------------------------------------------------------ screensaver ("Everybody Sit Down") */
.kw-ss {
  position: fixed; inset: 0; z-index: var(--kw-z-saver, 100); pointer-events: none;
  font-family: var(--kw-font-ui, Inter, system-ui, sans-serif); color: var(--kw-ink, #f8f6f2);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: 10px;      /* (minmax(0, ...): the one column can never be wider than the screen, whatever a word inside it asks for: at 320 wide it was 314 px in a 288 px space, and the right-hand buttons ran off the edge) */
}
.kw-ss > * { pointer-events: auto; }
.kw-ss__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; pointer-events: none; }
.kw-ss__top > * { pointer-events: auto; }
.kw-ss__status {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border-radius: var(--kw-r-pill, 999px);
  font: 600 15px/1.2 var(--kw-font-ui, Inter, system-ui, sans-serif); letter-spacing: .01em;
  background: var(--kw-panel-bg, rgba(23, 21, 32, .92)); border: 1px solid var(--kw-line-2, rgba(163, 51, 111, .3)); max-width: 100%;
}
.kw-ss__mic { width: 12px; height: 12px; border-radius: 50%; background: var(--kw-idle, #9b94a9); flex: none; }
.kw-ss__status[data-tone="live"] .kw-ss__mic { background: var(--kw-rose, #e8b6c8); box-shadow: 0 0 0 0 rgba(232, 182, 200, .6); animation: kw-ss-pulse 2.4s ease-out infinite; }
.kw-ss__status[data-tone="heard"] { border-color: var(--kw-accent, #e0589f); box-shadow: var(--kw-glow-accent, 0 0 22px rgba(224, 88, 159, .2)); }
.kw-ss__status[data-tone="heard"] .kw-ss__mic { background: var(--kw-accent, #e0589f); }
.kw-ss__status[data-tone="wait"] .kw-ss__mic { background: var(--kw-violet, #8f7cff); }
@keyframes kw-ss-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 182, 200, .55); opacity: 1; } 70% { box-shadow: 0 0 0 10px rgba(232, 182, 200, 0); opacity: .55; } 100% { box-shadow: 0 0 0 0 rgba(232, 182, 200, 0); opacity: 1; } }
.kw-ss__mock { padding: 6px 12px; border-radius: var(--kw-r-pill, 999px); font: 500 11px/1.2 var(--kw-font-mono, ui-monospace, Menlo, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--kw-ink-2, #cdc6d4); background: var(--kw-panel-bg, rgba(23, 21, 32, .92)); border: 1px solid var(--kw-line, rgba(163, 51, 111, .14)); }
.kw-ss__mock[hidden] { display: none; }
.kw-ss__tools { display: flex; gap: 8px; margin-left: auto; }
/* The row hugs the right-hand edge at every width, on its own line or not: the Sound pill appears at the LEFT of the row at the first tap (browsers allow sound only after one), and when the row was
   left-aligned on a phone that pushed Full screen and the Look switch 105 px to the right between pointer-down and pointer-up, so the first tap on the switch was lost. */
.kw-ss__tool {
  min-height: 44px; padding: 8px 16px; border-radius: var(--kw-r-pill, 999px); cursor: pointer; font: 500 14px/1 var(--kw-font-ui, Inter, system-ui, sans-serif);
  color: var(--kw-ink-2, #cdc6d4); background: var(--kw-panel-bg, rgba(23, 21, 32, .92)); border: 1px solid var(--kw-line, rgba(163, 51, 111, .14));
}
.kw-ss__tool:hover, .kw-ss__tool:focus-visible { color: var(--kw-ink, #f8f6f2); border-color: var(--kw-line-2, rgba(163, 51, 111, .3)); }
.kw-ss__tool[hidden] { display: none; }
.kw-ss__voice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 440px; pointer-events: none; }
.kw-ss__voice > * { pointer-events: auto; }
.kw-ss__voice[hidden], .kw-ss__voice [hidden] { display: none; }
button.kw-chip.kw-ss__voicechip { min-height: 44px; text-align: left; line-height: 1.25; white-space: normal; max-width: 100%; background: linear-gradient(rgb(var(--kw-accent-rgb, 224 88 159) / .08), rgb(var(--kw-accent-rgb, 224 88 159) / .08)), var(--kw-bg-1, #ffffff); }      /* a solid plate: over the Evening sky the translucent chip fell to 4.1:1 */
.kw-ss__privacy { margin: 0; padding: 6px 12px; border-radius: var(--kw-r-m, 14px); font-size: 14px; line-height: 1.4; color: var(--kw-ink-2, #cdc6d4); background: rgb(var(--kw-bg-0-rgb, 42 32 68) / .9); }      /* on a plate, not a shadow: bare words over the Evening sky fell to 4.4:1 */
.kw-ss__bottom { grid-row: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; padding-bottom: calc(var(--kw-dock-h, 0px)); }
.kw-ss__bottom > * { pointer-events: auto; }
.kw-ss__sit { min-width: min(320px, 100%); min-height: 64px; font-size: 20px; letter-spacing: .12em; font-weight: 700; }
.kw-ss__hint { font: 500 14px/1.3 var(--kw-font-ui, Inter, system-ui, sans-serif); color: #efeaf5; text-align: center; padding: 7px 16px; border-radius: var(--kw-r-pill, 999px);
  background: rgb(var(--kw-bg-0-rgb, 42 32 68) / .78); border: 1px solid rgb(var(--kw-accent-hi-rgb, 245 143 190) / .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* in the day look the words are dark on a pale pill (no dark glow smudging a cream scene) */
:root[data-theme="day"] .kw-ss__hint { color: var(--kw-ink, #1d1620); background: rgb(var(--kw-bg-0-rgb, 255 250 252) / .86); border-color: rgb(var(--kw-accent-lo-rgb, 163 51 111) / .32); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .kw-ss__hint { color: var(--kw-ink, #1d1620); background: rgb(var(--kw-bg-0-rgb, 255 250 252) / .86); border-color: rgb(var(--kw-accent-lo-rgb, 163 51 111) / .32); } }

.kw-ss__card {
  grid-row: 4; align-self: end; justify-self: center; width: min(760px, 100%); text-align: center; padding: 18px 20px 16px; border-radius: var(--kw-r-l, 22px);
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(248, 246, 242, .06), transparent 60%),
    var(--kw-panel-bg, linear-gradient(160deg, rgba(23, 21, 32, .94), rgba(16, 16, 22, .92)));
  border: 1px solid var(--kw-line-2, rgba(163, 51, 111, .3)); box-shadow: var(--kw-shadow, 0 18px 48px rgba(0, 0, 0, .55)), var(--kw-glow-accent, 0 0 22px rgba(224, 88, 159, .2));
  animation: kw-world-pop var(--kw-t-slow, 480ms) var(--kw-ease, cubic-bezier(.2, .8, .2, 1));
}
.kw-ss__card[hidden] { display: none; }
.kw-ss__line { font: 700 26px/1.2 var(--kw-font-display, "Cormorant Garamond", Georgia, serif); }
.kw-ss__sub { margin-top: 6px; font: 400 18px/1.4 var(--kw-font-ui, Inter, system-ui, sans-serif); color: var(--kw-ink-2, #cdc6d4); }
.kw-ss__sub:empty { display: none; }
.kw-ss__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 14px; }
@media (min-width: 720px) {
  .kw-ss__card { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; text-align: left; }
  .kw-ss__card[hidden] { display: none; }
  .kw-ss__line { grid-column: 1; font-size: 26px; }
  .kw-ss__sub { grid-column: 1; margin-top: 2px; }
  .kw-ss__actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: row; align-items: center; margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
}
.kw-ss__actions:empty { display: none; }
.kw-ss[data-state="sitting"] .kw-ss__sit, .kw-ss[data-state="calm"] .kw-ss__bottom, .kw-ss[data-state="entering"] .kw-ss__bottom { display: none; }
.kw-ss[data-state="sitting"] .kw-ss__bottom .kw-ss__hint { display: none; }
.kw-ss[data-state="calm"] .kw-ss__top .kw-ss__status { opacity: .9; }

@media (min-width: 720px) {
  .kw-ss { padding: max(24px, env(safe-area-inset-top, 0px)) 28px max(28px, env(safe-area-inset-bottom, 0px)); }
  .kw-ss__line { font-size: 32px; }
}
@media (max-height: 520px) and (orientation: landscape) { .kw-ss__hint { display: none; } .kw-ss__sit { min-height: 56px; } }

@media (prefers-reduced-motion: reduce) {
  .kw-world__card, .kw-ss__card { animation: none; }
  .kw-ss__status[data-tone="live"] .kw-ss__mic { animation: none; box-shadow: 0 0 0 4px rgba(232, 182, 200, .3); }
}