/* The office page: the 3D stage fills the window, and the tags, signs and controls float on top. */
:root {
  --page: #F7F3EE;
  --link: #6A6480;
  --ink: #2A2540;
  --muted: #6A6480;
  --line: #CFCCD6;
  --needs: #8A3A12;
  --needs-soft: #A34718;
  --needs-bg: #FFE6D5;
  --needs-line: #E8763A;
  --storm-bg: #E6EAF2;
  --storm-line: #8C96AD;
  --storm-ink: #2F3850;
  --storm-muted: #56607A;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root { --page: #1B1A22; --link: #A9A4BA; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--page); color: var(--ink); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.stage { position: fixed; inset: 0; transition: opacity 0.4s; }
.stage canvas { display: block; }
.tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Tags and signs, as in the sketch: 11px pills, with loud and stormy versions, and dark signs. */
.tag, .sign { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; will-change: transform; }
.tag { color: var(--ink); background: #FFFFFF; border: 0.5px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.tag .words, .tag .line2 { font-weight: 400; color: var(--muted); }
.tag .line2 { display: block; }
.tag.two { border-radius: 8px; padding: 2px 8px; text-align: center; }
.tag.loud { background: var(--needs-bg); border: 1px solid var(--needs-line); color: var(--needs); }
.tag.loud .words, .tag.loud .line2 { color: var(--needs-soft); }
.tag.stormy { background: var(--storm-bg); border: 1px solid var(--storm-line); color: var(--storm-ink); }
.tag.stormy .words, .tag.stormy .line2 { color: var(--storm-muted); }
.tag.hover { z-index: 2; }
.sign { color: #FFFFFF; background: var(--ink); border: 1px solid #FFFFFF; border-radius: 4px; padding: 2px 8px; }
.sign.light { color: var(--muted); background: #F1EFF5; border-color: #B9B4C6; }

/* Along the top: the needs-you pill, and the storm banner under it. */
.top { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100vw - 24px); }
.pill { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--needs-bg); border: 1px solid var(--needs-line); color: var(--needs); transition: opacity 0.4s; max-height: 40vh; overflow-y: auto; }
.pill .label { font-weight: 600; }
.pill button { font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #FFFFFF; border: 1px solid #F2B593; color: var(--needs); cursor: pointer; }
.pill button:focus-visible { outline: 2px solid var(--needs); outline-offset: 1px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(42, 37, 64, 0.25); }
.pill .note { font-size: 12px; color: var(--needs); }
.storm { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 12px; background: var(--storm-bg); border: 1px solid var(--storm-line); color: var(--storm-ink); }
.storm .reason { font-weight: 600; }
.storm .more { font-size: 12px; color: var(--storm-muted); }

/* Along the bottom: one status chip, the install button, and the list link. */
.chip { position: fixed; font: inherit; font-size: 12px; white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: #FFFFFF; border: 0.5px solid var(--line); color: var(--ink); }
.chip.bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.chip.bottom.button { cursor: pointer; }
.chip:focus-visible { outline: 2px solid var(--needs); outline-offset: 2px; }
.stage canvas:focus { outline: none; }
.chip.install { bottom: 12px; right: 12px; cursor: pointer; }
.links { position: fixed; bottom: 16px; left: 16px; display: flex; gap: 14px; font-size: 12px; }
.links a { color: var(--link); }
/* The compass (the free camera): top right while the office is turned. Its little office (the two tall walls
   as an L, the floor as a diamond) spins to match the view, with you as the orange dot. */
.compass { position: fixed; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; border: 0.5px solid var(--line); box-shadow: 0 1px 3px rgba(42, 37, 64, 0.08); cursor: pointer; opacity: 0; transform: scale(0.85); visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s; }
.compass.show { opacity: 1; transform: none; visibility: visible; transition: opacity 0.2s, transform 0.2s; }
.compass:hover { border-color: #B9B4C6; }
.compass:focus-visible { outline: 2px solid var(--needs); outline-offset: 2px; }
.compass .floor { fill: #F4EEE6; stroke: #CDBFAE; stroke-width: 1; }
.compass .walls { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.compass .you { fill: #E0805E; }
body.turned .top { max-width: calc(100vw - 128px); } /* the pill keeps clear of the compass */
body.reduced .compass, body.reduced .compass.show { transition: none; }
@media (prefers-reduced-motion: reduce) { .compass, .compass.show { transition: none; } }
.no3d { position: fixed; top: 40%; left: 50%; transform: translateX(-50%); margin: 0; padding: 12px 16px; border-radius: 12px; background: #FFFFFF; border: 0.5px solid var(--line); }
.no3d a { color: var(--ink); }

/* Offline: the office and the pill dim, and the chip says it's reconnecting. */
body.offline .stage, body.offline .pill { opacity: 0.55; }