/* AI office page. Phone first; wide screens get bigger "pixels" and two rows of rooms. */
:root {
  --bg: #1d1b26; --panel: #272433; --edge: #0f0e15; --line: #3a3650;
  --text: #ece9f5; --dim: #a7a2bd; --red: #e24b4a; --green: #3fae6b;
  --unit: 3px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
[hidden] { display: none !important; }
.top, main, .login { max-width: 980px; margin: 0 auto; padding: 0 12px; }
.top { padding-top: 14px; }
h1 { margin: 0; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; }
.pc-line { margin: 2px 0 12px; min-height: 1.45em; color: var(--dim); font-size: 13px; }
body.stale .pc-line { color: #ff8f8d; }
body.stale .floor, body.stale .list { filter: grayscale(1); opacity: .7; }

/* ---- the floor ---- */
.floor { display: flex; flex-direction: column; gap: 8px; }
.floor-row { display: flex; flex-wrap: wrap; gap: 8px; }
.room { flex: 1 1 100%; min-width: 0; border: 2px solid var(--edge); background: var(--floor, #4c4c55); }
.room-name {
  padding: 5px 8px; border-bottom: 2px solid var(--edge); background: var(--wall, #34343a);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.room[data-room="Accounts"] { --wall: #343a5c; --floor: #515a86; }
.room[data-room="Bank"] { --wall: #2b4747; --floor: #436a6a; }
.room[data-room="Operations"] { --wall: #4b3a2c; --floor: #6f5843; }
.room[data-room="Claude team"] { --wall: #432e57; --floor: #654881; }
.room[data-room="Personal"] { --wall: #2d4733; --floor: #486b50; }
/* The columns may shrink to nothing: a long name on a desk is cut short, it does not widen the room. */
.desks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 8px 4px; }
.room.d1 { flex: 1 1 40%; }                         /* phone: two one-desk rooms share a line */
.d1 .desks { grid-template-columns: minmax(0, 1fr); }
.desk {
  display: flex; flex-direction: column; align-items: center; padding: 4px 0; border: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.desk:focus-visible, .who:focus-visible, .link:focus-visible, summary:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px;
}
.desk svg { display: block; width: calc(24 * var(--unit)); height: calc(21 * var(--unit)); }
.plate {
  margin-top: 3px; padding: 1px 7px; border: 1px solid var(--edge); background: #14121c;
  font-size: 12px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.d1 { --desks: 1; } .d2 { --desks: 2; } .d3 { --desks: 3; }
.d4 { --desks: 4; } .d5 { --desks: 5; } .d6 { --desks: 6; }
@media (min-width: 760px) {
  :root { --unit: 4px; }
  .pc-line { font-size: 15px; }
  .room, .room.d1 { flex: var(--desks, 1) 1 0%; }
  .desks, .d1 .desks { grid-template-columns: repeat(var(--desks, 1), minmax(0, 1fr)); }
  .floor-row.extra .room { flex: 0 1 auto; min-width: 200px; }     /* e.g. Unassigned: as small as it can be */
}

/* ---- two-frame animations, stepped like old pixel art ---- */
@keyframes frame-a { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes frame-b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes blink { 0% { opacity: 1; } 60% { opacity: .2; } 100% { opacity: .2; } }
.hands-b { opacity: 0; }
.desk.working .hands-a { animation: frame-a .5s steps(1) infinite; }
.desk.working .hands-b { animation: frame-b .5s steps(1) infinite; }
.desk.problem .bubble { animation: blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .desk .hands-a, .desk .hands-b, .desk .bubble { animation: none !important; }
}

/* ---- the lists ---- */
.list { margin: 12px 0 0; border: 2px solid var(--edge); background: var(--panel); }
.list h2 {
  margin: 0; padding: 7px 10px; background: #211e2c;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
.row, .empty { margin: 0; padding: 8px 10px; border-top: 1px solid var(--line); }
.empty { color: var(--dim); }
.who {
  padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.role, .count, .job-label, .job-state, .job-times { color: var(--dim); font-weight: 400; }
.why, .what { margin: 3px 0 0 14px; overflow-wrap: anywhere; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
#everyone-box > summary h2::after { content: "  +"; }
#everyone-box[open] > summary h2::after { content: "  \2212"; }
.person { border-top: 1px solid var(--line); }
.person > summary { padding: 8px 10px; }
.person[open] > summary { background: #2e2a3d; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: #6e6a85; }
.dot.problem { background: var(--red); }
.dot.working { background: var(--green); }
/* said in words for whoever cannot see the colour of the dot */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.job { padding: 6px 10px 6px 26px; border-top: 1px dashed var(--line); font-size: 14px; overflow-wrap: anywhere; }
.job-times { font-size: 13px; }
.job-reason { color: #f3b1b0; font-size: 13px; }
.foot { margin: 14px 0 24px; text-align: right; }
.link {
  padding: 4px 0; border: 0; background: none; color: var(--dim); font: inherit;
  text-decoration: underline; cursor: pointer;
}

/* ---- sign in ---- */
.login { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.login > * { max-width: 360px; }
.login input, .login button { padding: 10px; border: 2px solid var(--edge); font: inherit; font-size: 16px; }
.login input { background: #14121c; color: var(--text); }
.login button { background: var(--green); color: #0d1f14; font-weight: 700; cursor: pointer; }
.login button:disabled { opacity: .6; cursor: default; }
.msg { min-height: 1.45em; margin: 0; color: #ff8f8d; }
.foot .msg { margin-right: 10px; }