/* The office (owner: office): its box, and the sessions app the camera hands over to when it zooms
   into the big display. Loaded after house.css. Rules are scoped to #office. */

/* the sessions app's own palette (it is the picture on Freeman's display, not the house's chrome): the
   teal of the living-room sofa at night and paper text; its accent is the house's neutral grey, as everywhere
   in the UI (the tab marker, the filled link, outlines and ticks). Kept in step with PAL in
   js/world/office-paint.js (the 3D display paints the same picture). On --s-bg: the accent 14:1, the
   outline grey 7.3:1. */
#office {
  --s-bg: #10282f;
  --s-bg2: #0b1f25;
  --s-raise: #163640;
  --s-line: #2c5560;
  --s-ink: #eef3ef;
  --s-ink2: #a9c2c0;
  --s-accent: #f5f5f5;      /* = --ink-hi */
  --s-accent-ink: #1f1f1f;  /* = --on-hi */
  --s-outline: #b3b3b3;     /* = --ink-2 */
}

/* ---------- the box ---------- */
#office .panel h2 { padding: 0 4px; }
#office .panel .lede { margin-top: 8px; }
/* the projects: quiet tiles, raised grey cells with the name over the kind; each opens its session */
#office .olist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#office .olist__go { width: 100%; min-height: 52px; display: grid; align-content: center; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 0; background: var(--raise-1); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); text-align: left; cursor: pointer; }
@media (hover: hover) { #office .olist__go:hover { background: var(--raise-3); } }
#office .olist__name { font-weight: 500; font-size: .9375rem; line-height: 1.25; }
#office .olist__kind { font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
#office .ohint { margin: 14px 4px 2px; }
/* the lede describes the desk only where the desk is drawn (the stacked no-WebGL page has none) */
#office .lede__flat, .no-webgl #office .lede__3d { display: none; }
.no-webgl #office .lede__flat { display: inline; }

/* ---------- the sessions app: his whole display, full viewport ---------- */
/* (transform-origin 0 0: the hand-over pins it to the display with a projective matrix3d, office-sessions.js frame) */
#office .sessions { position: fixed; inset: 0; z-index: 2; opacity: 0; pointer-events: none; color: var(--s-ink); transform-origin: 0 0; contain: layout paint; }
#office .sessions.is-open { pointer-events: auto; }
#office .desk { position: absolute; inset: 0; background: #283063; }
#office .desk__wall { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the agents column and the window sit where the 3D display paints them (DESKTOP in office-paint.js) */
#office .desk__agents { position: absolute; left: 1.667vw; top: 2.222vh; width: 16.11vw; height: 76.67vh; }
#office .swin {
  position: absolute; left: max(270px, 19.44vw); top: 2.222vh; right: 1.389vw; bottom: 2.222vh;
  display: grid; grid-template-rows: 40px 46px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  border-radius: 12px; overflow: hidden; background: var(--s-bg);
  box-shadow: 6px 10px 0 rgba(5, 10, 14, .45);
  transition: transform .6s var(--ease), opacity .45s ease;
}
#office .swin__bar { display: flex; align-items: center; gap: 14px; padding: 0 20px 0 14px; background: var(--s-bg2); }
#office .swin__dots { display: flex; gap: 7px; }
#office .swin__dots i { width: 11px; height: 11px; border-radius: 50%; background: #5d6f73; }
#office .swin__title { margin: 0 0 0 26px; font-size: 15px; font-weight: 500; }
#office .swin__count { margin-left: auto; font-size: 13px; color: var(--s-ink2); }

/* tabs: one per session; the five featured, a gap, the three smaller ones */
#office .stabs-wrap { position: relative; min-width: 0; background: var(--s-bg2); }
#office .stabs { height: 100%; display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; background: var(--s-bg2); overflow-x: auto; scrollbar-width: none; }
#office .stabs::-webkit-scrollbar { display: none; }
/* when the tabs do not fit, the strip scrolls sideways: its edges fade where more tabs wait */
#office .stabs-wrap::before, #office .stabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 44px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
#office .stabs-wrap::before { left: 0; background: linear-gradient(to right, var(--s-bg2) 20%, rgba(11, 31, 37, 0)); }
#office .stabs-wrap::after { right: 0; background: linear-gradient(to left, var(--s-bg2) 20%, rgba(11, 31, 37, 0)); }
#office .stabs-wrap.is-more-l::before, #office .stabs-wrap.is-more-r::after { opacity: 1; }
#office .stabs__gap { flex: none; width: 1.5px; height: 18px; margin: 0 5px 14px 4px; background: var(--s-line); }
#office .stab { position: relative; flex: none; height: 40px; padding: 0 15px 0 29px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--s-ink2); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
#office .stab:hover { color: var(--s-ink); background: rgba(255, 255, 255, .04); }
#office .stab[aria-selected="true"] { background: var(--s-bg); color: var(--s-ink); }
#office .stab[aria-selected="true"]::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2.5px; border-radius: 0 0 2px 2px; background: var(--s-accent); }
#office .stab__dot { position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.6px solid currentColor; }
#office .stab__dot.is-live { background: currentColor; }
#office .stab[aria-selected="true"] .stab__dot { color: var(--s-accent); }
#office .stab:focus-visible { outline-offset: -3px; }

/* a session */
#office .swin__body { position: relative; min-height: 0; }
/* (the markup reads name and one-liner, pictures, the rest: phones show it in that order; here the words
   sit together in the left column, centred beside the pictures, which take the right one) */
#office .sp { height: 100%; overflow: auto; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". media" "head media" "more media" ". media"; gap: 0 48px; padding: 30px 56px 26px; scrollbar-width: thin; scrollbar-color: var(--s-line) transparent; }
#office .sp[hidden] { display: none; }
/* a smaller project, words only: set larger, in the middle of the window */
#office .sp--text { grid-template-columns: minmax(0, 660px); grid-template-areas: "." "head" "more" "."; justify-content: center; }
#office .sp--text .sp__name { font-size: 60px; }
#office .sp--text .sp__one { font-size: 24px; }
#office .sp--text .sp__desc { font-size: 18px; color: #d3dfdb; }
#office .sp:focus-visible { outline-offset: -4px; }
#office .sp__head { grid-area: head; }
#office .sp__more { grid-area: more; }
#office .sp__name { margin: 0; font-size: 46px; line-height: 1.04; font-weight: 500; letter-spacing: -.012em; }
#office .sp__one { margin: 12px 0 0; font-size: 21px; line-height: 1.38; }
#office .sp__desc { margin: 16px 0 0; font-size: 16px; line-height: 1.58; color: var(--s-ink2); max-width: 62ch; }
#office .sp__facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
#office .sp__facts li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; }
#office .sp__facts li::before { content: ""; position: absolute; left: 2px; top: .32em; width: 11px; height: 6px; border-left: 2px solid var(--s-outline); border-bottom: 2px solid var(--s-outline); transform: rotate(-45deg); }
#office .sp__meta { margin: 18px 0 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
#office .sp__meta > div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: baseline; }
#office .sp__meta dt { color: var(--s-ink2); }
#office .sp__meta dd { margin: 0; }
#office .sp__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
#office .sp__stack li { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--s-line); font-size: 13px; }
#office .sp__links { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
#office .sp__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--s-outline); color: var(--s-ink); text-decoration: none; font-weight: 500; font-size: 15px; }
#office .sp__links a:first-child { border-color: var(--s-accent); background: var(--s-accent); color: var(--s-accent-ink); }
#office .sp__links a:hover { background: rgb(255 255 255 / .08); border-color: var(--s-ink); }
#office .sp__links a:first-child:hover { background: #fff; border-color: #fff; }

/* pictures: phones in a strip, screenshots and the film framed */
#office .sp__media { grid-area: media; margin: 0; min-width: 0; align-self: center; }
/* phones: whole ones only, as many as fit (office-sessions.js bindPhones sets their width, --pw, by the same
   rule the 3D display paints: phoneStrip in office-paint.js); Previous / Next page through the rest */
#office .phones { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--s-line) transparent; }
#office .phone { flex: none; height: min(560px, calc(100vh - 290px)); aspect-ratio: 600 / 1304; padding: 6px; border-radius: 28px; background: #05080a; scroll-snap-align: start; }
#office .phones.is-fit { width: var(--sw); max-width: 100%; }
#office .phones.is-fit .phone { width: var(--pw); height: auto; }
#office .phones__nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 2px; }
#office .phones__nav[hidden] { display: none; }
#office .phones__btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--s-ink2); border-radius: 50%; background: transparent; color: var(--s-ink); cursor: pointer; }
#office .phones__btn svg { display: block; width: 16px; height: 16px; }
#office .phones__btn:hover { border-color: var(--s-ink); background: rgb(255 255 255 / .08); }
/* (at an end: the button dims, its focus ring does not; a ring at 40% fell under 3:1) */
#office .phones__btn[aria-disabled="true"], #office .phones__btn[aria-disabled="true"]:hover { border-color: color-mix(in srgb, var(--s-ink2) 40%, transparent); background: transparent; cursor: default; }
#office .phones__btn[aria-disabled="true"] svg { opacity: .4; }
#office .phones__pos { margin-left: 6px; font-size: 13px; color: var(--s-ink2); font-variant-numeric: tabular-nums; }
#office .phone img { display: block; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; object-position: top; background: var(--s-raise); }
#office .sp__media--shot img, #office .sp__media--video video, #office .sp__banner { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--s-raise); box-shadow: 4px 8px 0 rgba(0, 0, 0, .3); }
#office .sp__media--square img { max-height: calc(100vh - 240px); width: auto; max-width: 100%; margin: 0 auto; }
#office .sp__media--video video { aspect-ratio: 16 / 9; }
#office .sp__media figcaption { margin: 8px 0 14px; font-size: 13px; color: var(--s-ink2); }
/* the film's transcript: a disclosure under its caption (the 3D display paints the closed summary too) */
#office .sp__media--video figcaption { margin-bottom: 2px; }
#office .sp__tx { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--s-ink2); }
#office .sp__tx summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--s-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--s-outline); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
#office .sp__tx summary:hover { color: #fff; }
#office .sp__tx-body { margin: 4px 0 6px; padding: 12px 14px; border-radius: 10px; background: var(--s-bg2); }
#office .sp__tx-body p { margin: 0 0 8px; }
#office .sp__tx-body ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#office .sp__tx-at { display: inline-block; min-width: 2.6em; color: var(--s-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the sign-off: the window steps aside and leaves the house's own card (its greys) on the desktop */
#office .so { position: absolute; left: 50%; top: 50%; width: min(540px, calc(100vw - 32px)); padding: 34px 38px 30px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge), var(--shadow); color: var(--ink); transform: translate(-50%, -44%); opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .6s var(--ease); }
#office .sessions.is-signoff .so { opacity: 1; transform: translate(-50%, -50%); }
#office .sessions.is-open.is-signoff .so { pointer-events: auto; }
#office .sessions.is-signoff .swin { opacity: 0; transform: translateY(7vh) scale(.94); pointer-events: none; }
#office .so__h { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
#office .so__who { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
#office .so__who strong { color: var(--ink); font-weight: 500; }
#office .so__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
#office .so__link { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 52px; padding: 14px 18px; border-radius: 12px; background: var(--raise-1); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); text-decoration: none; }
@media (hover: hover) { #office .so__link:hover { background: var(--raise-3); } }
#office .so__k { color: var(--ink-2); font-size: 15px; }
#office .so__v { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; text-align: right; }
#office .so__again { margin: 18px 0 0; font-size: 15px; }
#office .so__again a { display: inline-block; padding: 3px 0; min-height: 24px; color: var(--ink); text-decoration-color: var(--ink-3); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { #office .so__again a:hover { text-decoration-color: var(--ink); } }

/* smaller laptops: tighter tabs (all eight fit from about 1240 wide). The agents column stays beside the
   window at every width (it is 16vw wide and the window starts at 19.44vw, 270px at least). */
@media (max-width: 1366px) {
  #office .stab { padding: 0 11px 0 25px; }
  #office .stab__dot { left: 10px; }
  #office .stab[aria-selected="true"]::before { left: 9px; right: 9px; }
}

/* ---------- phones: the window is the whole screen, one column ---------- */
@media (max-aspect-ratio: 4/5), (max-width: 760px) and (min-height: 501px) {
  #office .olist { gap: 4px; }
  #office .olist__go { min-height: 44px; padding-block: 5px; }
  #office .desk__agents { display: none; }
  #office .swin { inset: 0; border-radius: 0; box-shadow: none; grid-template-rows: 60px 48px minmax(0, 1fr); }
  #office .swin__bar { padding: 0 16px; }
  #office .swin__title { margin-left: 8px; }
  #office .swin__count { display: none; }
  #office .stab { height: 42px; }
  /* (one column in the markup's own order: name and one-liner, the pictures, the rest) */
  /* (the bottom padding keeps the last words clear of the dock: the house's control bar, and the chip) */
  #office .sp, #office .sp--text { display: flex; flex-direction: column; gap: 0; padding: 22px 18px calc(var(--dock, 78px) + 16px); scroll-padding-bottom: calc(var(--dock, 78px) + 8px); }
  #office .sp > * { flex-shrink: 0; }
  #office .sp__name, #office .sp--text .sp__name { font-size: 34px; }
  #office .sp--text .sp__one { font-size: 19px; }
  #office .sp--text .sp__desc { font-size: 16.5px; }
  #office .sp__one { font-size: 18px; }
  #office .sp__media { margin-top: 18px; align-self: stretch; }
  #office .phone { height: min(380px, 52vh); }
  #office .sp__media--square img { max-height: 52vh; }
  /* (centred in the space above the dock, the chip included, and never taller than it: on a 360 x 640
     phone the card ran under the chip, "Back out to the lawn" with it) */
  #office .so { top: calc((100vh - var(--dock, 78px)) / 2); top: calc((100svh - var(--dock, 78px)) / 2); max-height: calc(100vh - var(--dock, 78px) - 24px); max-height: calc(100svh - var(--dock, 78px) - 24px); overflow: auto; padding: 26px 20px 22px; }
  #office .so__h { font-size: 28px; }
  #office .so__link { flex-direction: column; align-items: flex-start; gap: 2px; }
  #office .so__v { text-align: left; }
}

/* ---------- short landscape screens: the window takes the screen; the control bar stays bottom left over it
   (the agents run on the 3D display, which shows the whole desk; the app grows out of its window) ---------- */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  #office .desk__agents { display: none; }
  #office .swin { left: 8px; right: 8px; top: 6px; bottom: 6px; grid-template-rows: 46px 42px minmax(0, 1fr); }
  /* the phone screenshots stay readable: as tall as the window's body (not 100vh - 250px, which left 52 px
     slivers at 844 x 390), at its top beside the name (the text scrolls inside the window and would
     otherwise centre them below the fold) */
  #office .sp { padding-top: 16px; padding-bottom: 16px; }
  #office .sp__media--phones { align-self: start; }
  #office .phone { height: clamp(220px, calc(100vh - 160px), 320px); height: clamp(220px, calc(100svh - 160px), 320px); }
  /* (the house's control bar stays at the bottom left, over the window, as in every room: a session's end,
     and a control the keyboard reaches there, scroll clear of it, and of the chip above it) */
  #office .sessions:not(.is-static) .sp { padding-bottom: 64px; scroll-padding-bottom: 64px; }
  body:has(#now:not([hidden])) #office .sessions:not(.is-static) .sp { padding-bottom: 124px; scroll-padding-bottom: 124px; }
  #office .stab { height: 38px; }
  #office .so { max-height: calc(100vh - 16px); max-height: calc(100svh - 16px); overflow: auto; padding: 18px 22px 16px; }
  #office .so__h { font-size: 26px; }
  /* (the sign-off stands beside the dock at the bottom left, never under it: on the right, as wide as fits) */
  #office .sessions:not(.is-static) .so { left: auto; right: 12px; width: min(540px, calc(100vw - 296px)); transform: translate(0, -44%); }
  #office .sessions.is-signoff:not(.is-static) .so { transform: translate(0, -50%); }
}
/* narrower (under 656 px): no room beside the dock, so the card stands above it, at the top, and scrolls
   inside itself */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) and (max-width: 655px) {
  #office .sessions:not(.is-static) .so { left: 50%; right: auto; top: 8px; width: min(540px, calc(100vw - 16px)); max-height: calc(100vh - 88px); max-height: calc(100svh - 88px); transform: translate(-50%, 4%); }
  body:has(#now:not([hidden])) #office .sessions:not(.is-static) .so { max-height: calc(100vh - 148px); max-height: calc(100svh - 148px); }
  #office .sessions.is-signoff:not(.is-static) .so { transform: translate(-50%, 0); }
}
/* (engine fixer, round 3: WCAG reflow) a laptop at 300 to 400% zoom, 320 to 600 CSS px wide and short (as
   in house.css): two columns left the session's name cut off under its screenshots; one column in the
   markup's order, as on a phone */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) and (max-width: 600px) {
  #office .sp, #office .sp--text { display: flex; flex-direction: column; gap: 0; padding: 14px 16px; }
  #office .sp > * { flex-shrink: 0; }
  #office .sp__name, #office .sp--text .sp__name { font-size: 30px; overflow-wrap: anywhere; }
  #office .sp__media { margin-top: 14px; align-self: stretch; }
}

/* ---------- reduced motion: no zoom, the app simply shows at its steps (behind the curtain) ---------- */
.reduced #office .swin, .reduced #office .so { transition: none; }
/* ---------- a jump-cut (End, Back/Forward, a hash, the stop list): the window or the sign-off is in place
   before the curtain opens, and the curtain opens on the app alone: the app is opaque from the first
   frame (so the 3D display, drawn larger than the viewport there, never shows through) and a layer of
   the curtain's colour fades off it ---------- */
.is-cutting #office .swin, .is-cutting #office .so { transition: none; }
/* ... and a cut away from the open app closes the curtain over the app itself: the house's curtain lies
   under it, and the canvas under the app still holds the display drawn larger than the viewport, so the
   app fading out on its own showed the two pictures one through the other. The app stays opaque under a
   layer of the curtain's colour that fades in with the curtain, and is put away behind it (office-box.js) */
.is-cutting #office .sessions.is-closing { opacity: 1 !important; transition: none; }
#office .sessions.is-closing::after, .is-revealing #office .sessions.is-closing.is-open:not(.is-static)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--curtain); pointer-events: none; animation: sessions-close .18s ease both; }
@keyframes sessions-close { from { opacity: 0; } to { opacity: 1; } }
.is-revealing #office .sessions.is-open:not(.is-static) { transition: none; }
.is-revealing #office .sessions.is-open:not(.is-static)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--curtain); pointer-events: none; animation: sessions-curtain .26s ease both; }
@keyframes sessions-curtain { from { opacity: 1; } to { opacity: 0; } }
/* ---------- no WebGL: the sessions sit in the page after the box ---------- */
.no-webgl #office { flex-direction: column; align-items: flex-end; justify-content: center; gap: 24px; }
.no-webgl #office .sessions { position: relative; inset: auto; width: 100%; max-width: 1180px; opacity: 1; pointer-events: auto; transform: none !important; contain: none; }
.no-webgl #office .desk { display: none; }
.no-webgl #office .swin { position: relative; inset: auto; grid-template-rows: auto; box-shadow: 0 24px 48px -18px rgba(12, 6, 2, .65); }
.no-webgl #office .swin__bar { min-height: 44px; }
.no-webgl #office .sp { height: auto; overflow: visible; }
.no-webgl #office .phone { height: 460px; }
.no-webgl #office .so { position: relative; left: auto; top: auto; margin: 24px 0 0 auto; transform: none; opacity: 1; pointer-events: auto; transition: none; max-height: none; overflow: visible; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) and (min-height: 501px) {
  .no-webgl #office .sessions { padding: 0 0 24px; }
  .no-webgl #office .swin { border-radius: 16px 16px 0 0; }
  .no-webgl #office .phone { height: 360px; }
  .no-webgl #office .so { margin: 16px auto 0; }
}