/* PILLPAD — the office page. The 3D floor stays concrete grey; everything laid over it wears the Pumployed skin:
   white cards, a 2px #111 outline, a hard offset shadow, 4px corners, uppercase heavy labels, mono small print,
   green only as a splash (#16a34a text, mint #86efac fills with #052e16 ink). */
.pv-office {
  --o-ink: #111; --o-card: #fff; --o-mut: rgba(0, 0, 0, .6); --o-faint: rgba(0, 0, 0, .45); --o-green: #16a34a; --o-mint: #86efac; --o-deep: #052e16;
  --o-r: 4px; --o-sh: 3px 3px 0 #111; --o-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --o-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.office { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; padding: 12px max(16px, var(--sar, 0px)) calc(12px + var(--sab, 0px)) max(16px, var(--sal, 0px));
  height: calc(100svh - 62px - var(--sat, 0px)); min-height: 520px; box-sizing: border-box; }
.stage { position: relative; overflow: hidden; border: 2px solid var(--o-ink); border-radius: var(--o-r); box-shadow: 4px 4px 0 var(--o-ink); background: #dcdcd8; min-height: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.overlay > * { position: absolute; left: 0; top: 0; will-change: transform; }

/* the HUD on the stage: the clock and the room nav */
.ohud { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; pointer-events: none; z-index: 3; }
.ochip, .ozones a { pointer-events: auto; font: 800 11px/1 var(--o-font); text-transform: uppercase; letter-spacing: .05em; background: var(--o-card); color: var(--o-ink) !important;
  border: 2px solid var(--o-ink); border-radius: var(--o-r); box-shadow: var(--o-sh); padding: 7px 9px; text-decoration: none; white-space: nowrap; }
.ochip.clock { font-family: var(--o-mono); font-weight: 700; letter-spacing: .02em; background: var(--o-ink); color: #fff !important; }
.stage[data-phase="night"] .ochip.clock { background: var(--o-card); color: var(--o-ink) !important; }
.ozones { display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.ozones a:hover { background: #f4f4f4; }
.ozones a.on { background: var(--o-mint); color: var(--o-deep) !important; }
.oload { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 12px var(--o-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--o-card);
  border: 2px solid var(--o-ink); border-radius: var(--o-r); box-shadow: var(--o-sh); padding: 10px 14px; z-index: 4; }

/* labels pinned in the scene */
.otag { font: 800 10px/1.15 var(--o-font); text-transform: uppercase; letter-spacing: .05em; color: var(--o-ink); background: var(--o-card); border: 2px solid var(--o-ink);
  border-radius: var(--o-r); box-shadow: 2px 2px 0 var(--o-ink); padding: 4px 6px; white-space: nowrap; }
.otag.door { pointer-events: auto; cursor: pointer; text-align: center; }
.otag.door span { display: none; font: 600 9px/1.2 var(--o-mono); text-transform: none; letter-spacing: 0; color: var(--o-mut); margin-top: 2px; }
.stage.zoomed .otag.door span { display: block; }
.stage.close .otag.door { display: none; }                 /* zoomed past a room: its door tag would sit over the desks */
.stage.close .oname { font-size: 11px; padding: 3px 5px; }
.stage.close .obub { max-width: 260px; font-size: 12.5px; }
.otag.brand { background: var(--o-ink); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .08em; padding: 5px 8px; }
.otag.wclock { font: 700 10px/1 var(--o-mono); padding: 3px 5px; }
.otag.exit { background: var(--o-mint); color: var(--o-deep); font-weight: 900; padding: 3px 6px; }
.otag.board { max-width: 170px; white-space: normal; font: 600 9.5px/1.25 var(--o-mono); text-transform: none; letter-spacing: 0; }
.otag.board b { font-family: var(--o-font); font-weight: 900; text-transform: uppercase; color: var(--o-green); margin-right: 3px; }
.oname { font: 800 9.5px/1 var(--o-font); text-transform: uppercase; letter-spacing: .04em; color: var(--o-ink); background: var(--o-card); border: 1.5px solid var(--o-ink);
  border-radius: 3px; padding: 2px 4px; white-space: nowrap; }
.obub { max-width: 220px; font: 500 11.5px/1.3 var(--o-font); color: var(--o-ink); background: var(--o-card); border: 2px solid var(--o-ink); border-radius: var(--o-r);
  box-shadow: var(--o-sh); padding: 6px 8px; }
.obub .h { display: block; font: 700 9.5px/1.2 var(--o-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--o-green); margin-bottom: 2px; }
.obub.working .h::after { content: ' …'; }
.ocard { pointer-events: none; max-width: 250px; display: grid; gap: 3px; font: 13px/1.35 var(--o-font); background: var(--o-card); border: 2px solid var(--o-ink); border-radius: var(--o-r);
  box-shadow: 4px 4px 0 var(--o-ink); padding: 9px 11px; }
.ocard b { font-weight: 900; text-transform: uppercase; }
.ocard .k { font: 700 10px var(--o-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--o-green); }
.ocard .last { color: var(--o-mut); font-size: 12px; }
.ocard[hidden], .obub[hidden] { display: none; }

/* the side: HQ counts, the work log, the posts */
.oside { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 0; }
.ostats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--o-card); border: 2px solid var(--o-ink); border-radius: var(--o-r); box-shadow: 4px 4px 0 var(--o-ink); }
.ostats div { padding: 8px 9px; min-width: 0; border-left: 2px solid var(--o-ink); }
.ostats div:first-child { border-left: 0; }
.ostats .k { display: block; font: 700 9px/1.2 var(--o-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--o-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ostats .v { display: block; font: 900 20px/1.2 var(--o-font); color: var(--o-ink); }
.opanel { display: flex; flex-direction: column; min-height: 0; background: var(--o-card); border: 2px solid var(--o-ink); border-radius: var(--o-r); box-shadow: 4px 4px 0 var(--o-ink); }
.opanel h2 { margin: 0; padding: 9px 11px; border-bottom: 2px solid var(--o-ink); font: 900 13px/1.2 var(--o-font); text-transform: uppercase; letter-spacing: .04em; color: var(--o-ink); }
.opanel h2 small { display: block; font: 600 10px/1.3 var(--o-mono); text-transform: none; letter-spacing: 0; color: var(--o-faint); margin-top: 2px; }
.olog, .oposts { margin: 0; padding: 6px 8px; list-style: none; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.olog li { display: flex; gap: 8px; padding: 7px 2px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 12.5px; line-height: 1.35; color: var(--o-ink); }
.olog li:last-child { border-bottom: 0; }
.olog li img, .opost img { width: 26px; height: 26px; border: 2px solid var(--o-ink); border-radius: 50%; object-fit: cover; background: #eee; flex: 0 0 auto; }
.olog li div { min-width: 0; }
.olog p { margin: 0; overflow-wrap: anywhere; }
.olog b { font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.olog span { color: var(--o-mut); }
.olog time { font: 600 10px var(--o-mono); color: var(--o-faint); margin-left: 6px; }
.olog .s { color: var(--o-ink); margin-top: 2px; }
.olog li.working span { color: var(--o-green); }
.olog li.old { opacity: .7; }
.olog li.sys { display: block; font: 700 10.5px/1.3 var(--o-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--o-deep); background: var(--o-mint); border: 2px solid var(--o-ink);
  border-radius: var(--o-r); padding: 5px 7px; margin: 6px 0; }
.opost { display: flex; gap: 8px; padding: 8px 2px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 13px; line-height: 1.38; }
.opost div { min-width: 0; flex: 1; }
.opost p { margin: 0 0 4px; overflow-wrap: anywhere; color: var(--o-ink); }
.opost .m { display: flex; gap: 6px; align-items: baseline; }
.opost .m b { font-weight: 900; text-transform: uppercase; font-size: 11px; }
.opost .m span { font: 600 10px var(--o-mono); color: var(--o-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opost .m i { margin-left: auto; color: var(--o-ink); }
.opost p b { color: var(--o-green); }
.opost .acts { display: flex; gap: 6px; align-items: center; }
.opost .acts a, .opost .acts button { font: 800 10.5px/1 var(--o-font); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: 2px solid var(--o-ink); border-radius: var(--o-r);
  background: var(--o-ink); color: #fff !important; text-decoration: none; cursor: pointer; }
.opost .acts button { background: var(--o-card); color: var(--o-ink) !important; }
.opost .acts em { margin-left: auto; font: 600 10px var(--o-mono); font-style: normal; color: var(--o-faint); }

/* phones: the stage on top, the panels under it on the page */
@media (max-width: 859px) {
  .office { display: block; height: auto; min-height: 0; padding: 10px 16px calc(24px + var(--sab, 0px)); }
  .stage { height: min(60svh, calc(72vw + 70px)); min-height: 340px; }
  .ohud { flex-wrap: nowrap; align-items: center; gap: 6px; left: 8px; right: 8px; top: 8px; }
  .ochip.clock { flex: 0 0 auto; padding: 6px 7px; font-size: 10px; }
  .ozones { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; pointer-events: auto; padding: 0 4px 4px 0; scrollbar-width: none; }
  .ozones::-webkit-scrollbar { display: none; }
  .ozones a { padding: 6px 7px; font-size: 10px; }
  .oside { display: grid; grid-template-rows: none; gap: 12px; margin-top: 14px; }
  .opanel { max-height: 420px; }
  .ostats .v { font-size: 17px; }
  .otag { font-size: 8.5px; padding: 3px 4px; }
  .otag.brand { font-size: 10px; }
  .oname { display: none; }
  .stage.zoomed .oname { display: block; }
  .obub { max-width: 170px; font-size: 10.5px; padding: 5px 6px; }
}

/* the HQ hero iframe: the scene only */
body.embed { background: #dcdcd8; }
body.embed .pv-top, body.embed .oside, body.embed .ohud { display: none !important; }
body.embed .office { display: block; padding: 0; height: 100vh; min-height: 0; }
body.embed .stage { height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
body.embed .oname, body.embed .otag.wclock, body.embed .otag.board { display: none; }