:root {
  color-scheme: light;
  --desk: #5d6aa0; --desk2: #56628f;
  --plat: #dddddd; --plat-lt: #ffffff; --plat-dk: #888888; --plat-mid: #bbbbbb; --edge: #000000;
  --ink: #000000; --muted: #555555; --field: #ffffff; --sel: #3355cc; --sel-ink: #ffffff;
  --ok: #1d7f3a; --warn: #a46b00; --bad: #b3261e; --link: #1f3fb0;
  --ui: "Charcoal", "Chicago", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --body: "Geneva", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Monaco", ui-monospace, Menlo, monospace;
  --title-h: 28px; 
}
@media (pointer: coarse) { :root { --title-h: 44px; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--desk); color: var(--ink); font: 13px/1.45 var(--body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(var(--desk2) 1px, transparent 1px); background-size: 3px 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); }
[hidden] { display: none !important; }


.menubar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 2px; height: 26px;
  padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); height: calc(26px + env(safe-area-inset-top, 0px));
  background: var(--plat); border-bottom: 1px solid var(--edge); font: bold 12px var(--ui); }
.menubar .apple { font-size: 15px; padding: 0 8px; }
.menubar button.m { background: none; border: 0; padding: 3px 10px; cursor: pointer; border-radius: 0; }
.menubar button.m[aria-current="true"], .menubar button.m:hover { background: var(--sel); color: var(--sel-ink); }
.menubar .sp { flex: 1; }
.menubar .tray { display: flex; align-items: center; gap: 10px; font-weight: normal; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: bold 11px/18px var(--ui); text-align: center; }
.badge.zero { background: var(--plat-dk); }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #0006; display: inline-block; background: var(--plat-dk); }
.dot.on { background: #2fb24c; } .dot.off { background: var(--bad); }


.desk { display: grid; gap: 14px; padding: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span6 { grid-column: span 6; } .span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span12 { grid-column: span 12; }
@media (max-width: 1100px) { .span4, .span5 { grid-column: span 6; } .span7, .span8 { grid-column: span 12; } }
@media (max-width: 760px) { .desk { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 84px; gap: 10px; } .desk > * { grid-column: 1 / -1 !important; } }


.cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; padding: 14px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) {
  .cols { display: flex; flex-direction: column; align-items: stretch; } .col { display: contents; } 
  #w-needs { order: 1; } #w-crew { order: 2; } #w-today { order: 3; } #w-posts { order: 4; } #w-week { order: 5; }
}
@media (max-width: 760px) { .cols { padding: 8px 8px 84px; gap: 10px; } }


.win { background: var(--plat); border: 1px solid var(--edge); box-shadow: inset 1px 1px 0 var(--plat-lt), inset -1px -1px 0 var(--plat-dk), 2px 2px 0 #0004; min-width: 0; }
.win > .title { position: relative; display: flex; align-items: center; gap: 6px; height: var(--title-h); margin: 3px 4px 0; padding: 0 4px;
  background: repeating-linear-gradient(to bottom, var(--plat-lt) 0 1px, var(--plat-mid) 1px 2px); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.win > .title:active { filter: brightness(.94); }
.win > .title h2 { margin: 0 auto; padding: 0 8px; background: var(--plat); font: bold 13px var(--ui); line-height: var(--title-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }

.win > .title .tbtn { all: unset; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.win > .title .tbtn::after { content: "▾"; display: inline-block; margin-left: 8px; font-size: 1.05em; opacity: .9; }
.win.shaded > .title .tbtn::after { content: "▸"; }
.win > .title .tbtn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.win > .title .box { width: 14px; height: 14px; flex: none; background: var(--plat); border: 1px solid var(--edge); box-shadow: inset 1px 1px 0 var(--plat-lt), inset -1px -1px 0 var(--plat-dk); padding: 0; cursor: pointer; }
.win > .title:active .box { box-shadow: inset 1px 1px 0 var(--plat-dk); }
.win > .title .count { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }

.win > .body { margin: 3px 4px 4px; padding: 12px 14px; background: var(--plat); border-top: 1px solid var(--plat-dk); min-width: 0; font-size: 15px; line-height: 1.55; }
.win > .body p { max-width: 75ch; }
.win.shaded > .body { display: none; }
.win.inset > .body { background: var(--field); border: 1px solid var(--plat-dk); box-shadow: inset 1px 1px 0 #0002; }
.empty { color: var(--muted); padding: 14px 4px; text-align: center; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 2px 12px; border: 1px solid var(--edge); border-radius: 5px;
  background: linear-gradient(var(--plat-lt), var(--plat) 60%, var(--plat-mid)); font: 13px var(--ui); cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap; touch-action: manipulation; }
.btn:active { background: var(--plat-dk); color: #fff; }
.btn.default { box-shadow: 0 0 0 2px var(--plat), 0 0 0 3px var(--edge); margin: 3px; }
.btn.ok { border-color: var(--ok); color: var(--ok); } .btn.no { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { min-height: 26px; padding: 1px 10px; font-size: 12px; }
@media (max-width: 760px) { .btn { min-height: 36px; } .btn.sm { min-height: 32px; } }

@media (pointer: coarse) { .btn { min-height: 44px; } .btn.sm { min-height: 40px; } .field, textarea.field, select.field { font-size: 16px; min-height: 44px; } }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.right { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.field, textarea.field { width: 100%; background: var(--field); border: 1px solid var(--plat-dk); box-shadow: inset 1px 1px 0 #0003; padding: 6px 8px; border-radius: 0; font: 15px var(--body); }
textarea.field { resize: vertical; min-height: 60px; }
.sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lbl { font: bold 12px var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 6px; }
.pre { white-space: pre-wrap; background: var(--field); border: 1px solid var(--plat-mid); padding: 8px; max-height: 260px; overflow: auto; font: 13.5px/1.55 var(--body); margin: 6px 0 0; }
.tag { display: inline-block; font: bold 11px/1.6 var(--ui); padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; text-transform: uppercase; }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--bad); } .tag.mute { color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 2px; border-bottom: 1px solid var(--plat-mid); }
.list > li:last-child { border-bottom: 0; }
.sprite svg { width: 28px; height: 28px; image-rendering: pixelated; display: block; }
.sprite.big svg { width: 64px; height: 64px; }


.chat { display: flex; flex-direction: column; gap: 8px; height: min(62vh, 560px); }
@media (max-width: 760px) { .chat { height: 58vh; } }
.chat .tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.chat .tabs button { border: 1px solid var(--plat-dk); border-bottom: 0; background: var(--plat-mid); padding: 2px 10px; font: 11px var(--ui); cursor: pointer; border-radius: 4px 4px 0 0; }
.chat .tabs button[aria-pressed="true"] { background: var(--field); font-weight: bold; }
.thread { flex: 1; overflow-y: auto; background: var(--field); border: 1px solid var(--plat-dk); box-shadow: inset 1px 1px 0 #0002; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 7px 10px; border: 1px solid var(--plat-dk); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.you { align-self: flex-end; background: #e4e9ff; }
.msg.agent { align-self: flex-start; background: #f4f4f4; }
.msg .who { font: bold 11px var(--ui); color: var(--muted); display: block; margin-bottom: 2px; }
.msg .steps { font-size: 11px; color: var(--muted); margin-top: 4px; }
.typing::after { content: "▍"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }


.room.strip { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 8px; }
.room.strip .desk-cell { min-height: 96px; padding: 20px 4px 6px; }
.room.strip .desk-cell .sprite svg { width: 36px; height: 36px; }
.desk-cell[aria-pressed="true"] { outline: 2px solid var(--sel); background: #eef1ff; }
.selbar { background: var(--plat); border: 1px solid var(--plat-dk); padding: 6px 8px; margin-bottom: 8px; }
.selbar .sub { overflow: hidden; text-overflow: ellipsis; }
#w-crew .chat { height: min(52vh, 480px); }
@media (max-width: 760px) { #w-crew .chat { height: 52vh; } .room.strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } .room.strip .desk-cell.off { display: none; } .room.strip .desk-cell .st { display: none; } .room.strip .desk-cell { min-height: 70px; } }


.room { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.desk-cell { position: relative; background: var(--field); border: 1px solid var(--plat-dk); padding: 22px 6px 8px; text-align: center; cursor: pointer; min-height: 112px; }
.desk-cell:hover { outline: 2px solid var(--sel); }
.desk-cell .sprite { display: flex; justify-content: center; }
.desk-cell .sprite svg { width: 44px; height: 44px; }
.desk-cell .nm { font: bold 11px var(--ui); margin-top: 4px; }
.desk-cell .st { font-size: 11px; color: var(--muted); line-height: 1.3; min-height: 2.6em; overflow: hidden; }
.desk-cell .bub { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font: bold 10px var(--ui); padding: 0 5px; border: 1px solid var(--edge); background: #fff; border-radius: 6px; white-space: nowrap; }
.desk-cell.off { opacity: .45; }
.desk-cell.reading .sprite svg { animation: bob .7s steps(2) infinite; }
.desk-cell.writing .sprite svg { animation: type .25s steps(2) infinite; }
.desk-cell.thinking .sprite svg, .desk-cell.waking .sprite svg { animation: bob 1.4s steps(2) infinite; }
.desk-cell.asking .bub { background: #ffe680; animation: pulse 1s ease-in-out infinite; }
.desk-cell.searching .sprite svg { animation: look 1.2s steps(4) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes type { 50% { transform: translateX(1px); } }
@keyframes look { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .desk-cell * { animation: none !important; } }


.need { padding: 10px 2px; border-bottom: 1px solid var(--plat-mid); }
.need:last-child { border-bottom: 0; }
.need .head { display: flex; align-items: center; gap: 8px; }
.need .ti { font-weight: bold; margin: 4px 0; }
.need .why { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
.need.ask { background: color-mix(in srgb, var(--warn) 16%, transparent); margin: 0 -10px; padding: 10px; border-bottom: 1px solid var(--warn); }


.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px 6px; }
.icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; text-align: center; text-decoration: none; color: var(--ink); border: 1px solid transparent; cursor: pointer; background: none; }
.icon:hover, .icon:focus-visible { border: 1px dotted var(--edge); outline: none; }
.icon .doc { position: relative; width: 38px; height: 46px; background: #fff; border: 1px solid var(--edge); box-shadow: 2px 2px 0 #0003; }
.icon .doc::after { content: attr(data-k); position: absolute; inset: auto 0 4px 0; font: bold 9px var(--ui); color: var(--muted); }
.icon .doc.live { background: linear-gradient(#fff 0 60%, #d9f2df 60%); } .icon .doc.dashboard { background: linear-gradient(#fff 0 60%, #e2e6ff 60%); }
.icon .doc.doc { background: repeating-linear-gradient(#fff 0 6px, #e6e6e6 6px 7px); } .icon .doc.deck, .icon .doc.canvas { background: linear-gradient(135deg, #fff 0 50%, #f2e6d0 50%); }
.icon .nm { font-size: 11px; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }


.veil { position: fixed; inset: 0; z-index: 60; background: #0005; display: flex; align-items: center; justify-content: center; padding: 16px; }
.veil .win { width: min(720px, 100%); max-height: calc(100% - 20px); display: flex; flex-direction: column; }
.veil .win.wide { width: min(1200px, 100%); height: calc(100% - 20px); }
.veil .win > .body { overflow: auto; flex: 1; }
.veil iframe { width: 100%; height: 100%; border: 1px solid var(--plat-dk); background: #fff; display: block; }


.dock { display: none; }
@media (max-width: 760px) {
  .menubar .m { display: none; }
  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--plat); border-top: 1px solid var(--edge);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dock button { flex: 1; background: none; border: 0; padding: 10px 2px 12px; font: bold 11px var(--ui); position: relative; cursor: pointer; }
  .dock button[aria-current="true"] { background: var(--sel); color: #fff; }
  .dock .badge { position: absolute; top: 3px; right: 18%; }
}

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80; background: #ffffe0; color: #1b1a22; border: 1px solid var(--edge); padding: 6px 12px; box-shadow: 2px 2px 0 #0004; display: none; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }


.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.flow .stage { flex: 1 1 0; min-width: 190px; background: var(--field); border: 1px solid var(--edge); box-shadow: 1px 1px 0 var(--plat-dk); padding: 6px 8px; }
.flow .stage .lbl { margin-top: 0; }
.flow .stage li { padding: 4px 0 4px 6px; border-left: 3px solid var(--plat-mid); margin-bottom: 4px; }
.flow .stage li.mac { border-left-color: var(--ok); }
.flow .stage li.cloud { border-left: 3px dashed var(--warn); background: #fff8e6; }
.flow .stage li.you { border-left-color: var(--ink); }
.flow .arrow { flex: 0 0 22px; display: grid; place-items: center; }
.flow .arrow::before { content: "▶"; font-size: 14px; color: var(--ink); }
.loop { display: grid; gap: 2px; margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--plat-dk); font: 12px/1.5 var(--body); }
@media (max-width: 760px) {
  .flow { flex-direction: column; overflow: visible; }
  .flow .stage { min-width: 0; }
  .flow .arrow { flex-basis: 20px; }
  .flow .arrow::before { content: "▼"; }
}
.flow.day .stage { min-width: 150px; }
.slip { padding: 4px 0; border-top: 1px dotted var(--plat-mid); }
.slip:first-of-type { border-top: 0; }
.crew-notes { font: 12px/1.4 var(--body); display: grid; gap: 2px; margin: 4px 0; }
.crew-notes:empty { display: none; }
.crew-notes b { min-width: 120px; }
.win.drop { outline: 3px dashed var(--sel); outline-offset: -3px; }


.office { --night: #0e0e13; --wall: #15151c; --floor: #1b1713; --accent: #a78bfa; --warm: #ffc777; --glow: #2a2a38;
  position: relative; height: 340px; margin-bottom: 8px; overflow: hidden; border: 1px solid #000; image-rendering: pixelated;
  background:
    linear-gradient(to bottom, transparent 0 25%, #000 25% 26%, transparent 26%),
    repeating-linear-gradient(90deg, transparent 0 46px, #0000003a 46px 48px) 0 0 / 100% 100%,
    linear-gradient(to bottom, var(--wall) 0 25%, var(--floor) 25% 100%);
  background-blend-mode: normal; }
.office::before { content: ""; position: absolute; inset: 26% 0 0 0; background: repeating-linear-gradient(0deg, transparent 0 15px, #00000045 15px 16px); pointer-events: none; }
.office .beam { position: absolute; left: 0; right: 0; height: 3%; background: #22202a; border-bottom: 1px solid #000; }
.office .deco, .office .pix { position: absolute; line-height: 0; }
.office .deco { transform: translate(-50%, -50%); }
.office .pix svg { display: block; height: auto; }
.office .neon { position: absolute; transform: translate(-50%, -50%); font: bold 13px/1 var(--ui); letter-spacing: .25em; color: var(--accent);
  text-shadow: 0 0 4px var(--accent), 0 0 12px #a78bfa99; text-transform: lowercase; }
.office .lamp { position: absolute; top: 0; width: 1px; background: #3a3a46; transform: translateX(-50%); }
.office .lamp .shade { position: absolute; bottom: -6px; left: -9px; width: 18px; height: 7px; background: #2d2d38; border-top: 2px solid #44444f; }
.office .lamp .light { position: absolute; top: 100%; left: -70px; width: 140px; height: 90px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, #ffc77755 0%, #ffc77722 35%, transparent 70%); }
.office .rug { position: absolute; left: 50%; top: 57%; width: 66%; height: 22%; transform: translate(-50%, -50%);
  background: repeating-linear-gradient(90deg, #2a2340 0 6px, #241e37 6px 12px); border: 3px solid #3b2f5e; outline: 2px solid #1b1630; outline-offset: 2px; }
.office .door { position: absolute; transform: translate(-50%, -50%); width: 74px; height: 8px; display: grid; place-items: center;
  font: bold 10px var(--ui); letter-spacing: .15em; color: #1b1713; background: var(--warm); box-shadow: 0 0 18px #ffc77788; }
.office .workdesk { position: absolute; transform: translate(-50%, -50%); width: 72px; z-index: 1; }
.office .workdesk .mon { transform: translate(-50%, -100%); top: 0; left: 50%; }
.office .workdesk .plate { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font: bold 7px var(--ui); color: #e8d3a8aa; letter-spacing: .08em; white-space: nowrap; }
.office .workdesk.on { --glow: var(--accent); }
.office .workdesk.on .mon svg { filter: drop-shadow(0 0 6px #a78bfaaa); }
.office .actor { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; transition-property: left, top; transition-timing-function: linear; z-index: 2; }
.office .actor .sprite svg { width: 34px; height: 34px; }
.office .actor .nm { font: bold 9px var(--ui); color: #e8e6f0; background: #0e0e13cc; padding: 0 4px; }
.office .actor .bub { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); max-width: 150px; width: max-content; white-space: normal; text-align: center;
  font: 10px/1.25 var(--ui); padding: 2px 6px; color: #e8e6f0; background: #1d1c26; border: 1px solid #3a3850; border-radius: 6px; margin-bottom: 2px; }
.office .actor.talking .bub { border-color: var(--accent); font-weight: bold; z-index: 3; box-shadow: 0 0 8px #a78bfa55; }
.office .actor.asking .bub { background: var(--warm); color: #1b1713; border-color: var(--warm); }
.office .actor[aria-pressed="true"] .nm { background: var(--accent); color: #0e0e13; }
.office .actor.off { opacity: .7; }
.office .actor.off .bub { opacity: .6; }
.office .actor.walking .sprite svg { animation: walk .3s steps(2) infinite; }
.office .actor.reading .sprite svg, .office .actor.thinking .sprite svg, .office .actor.waking .sprite svg { animation: bob .7s steps(2) infinite; }
.office .actor.writing .sprite svg { animation: type .25s steps(2) infinite; }
.office .actor.searching .sprite svg { animation: look 1.2s steps(4) infinite; }
@keyframes walk { 0% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@media (max-width: 760px) { .office { height: 320px; } .office .workdesk { width: 60px; } .office .actor .bub { max-width: 118px; } .office .shelf, .office .neon { display: none; } }
@media (prefers-reduced-motion: reduce) { .office .actor { transition: none !important; } .office .actor * { animation: none !important; } }
.office .actor.you { z-index: 3; }
.office .actor.you .nm { background: var(--warm); color: #1b1713; }
.office .actor.zz .bub { bottom: auto; top: -2px; left: auto; right: -14px; transform: none; padding: 0 3px; font-size: 9px; background: transparent; border: 0; color: #9a98b0; }
@media (max-width: 760px) { .office .actor.off .nm { display: none; } }

.office .actor.working .sprite svg, .office .actor.gate .sprite svg, .office .actor.studying .sprite svg { animation: bob .6s steps(2) infinite; }
.office .actor.reading .sprite svg { animation: bob .6s steps(2) infinite; }
.office .actor.thinking .sprite svg { animation: bob 1s steps(2) infinite; }
.office .actor.writing .sprite svg { animation: type .2s steps(2) infinite; }
.office .workdesk.on .mon svg { animation: flicker 1.6s steps(2) infinite; }
@keyframes flicker { 50% { filter: drop-shadow(0 0 9px #a78bfacc) brightness(1.2); } }

@media (max-width: 760px) {
  .cols, .desk { padding-left: 0; padding-right: 0; gap: 6px; }
  .win { border-left: 0; border-right: 0; box-shadow: none; width: 100%; }
  #w-crew .body { padding-left: 0; padding-right: 0; }
  #w-crew .body > :not(.office) { margin-left: 8px; margin-right: 8px; }
  .office { border-left: 0; border-right: 0; }
}

.crew-notes summary { font: 12.5px var(--ui); color: var(--muted); cursor: pointer; }
.crew-notes .row { min-width: 0; }
.crew-notes .row .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crew-notes .row.open .grow { white-space: normal; }
@media (max-width: 760px) { .win > .body { margin: 2px 0 0; } }


.dash { --c-personal: #3f8f55; --c-work: #6d4fd0; --c-done: #1d7f3a; --c-ready: #4b6cb7; --c-open: #a46b00; --c-bad: #b3261e; --c-mute: #999;
  display: grid; gap: 8px; min-width: 0; }
.dash .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.dash .kpi { background: var(--field); border: 1px solid var(--plat-dk); padding: 6px 8px; display: grid; }
.dash .kpi b { font: bold 22px/1.15 var(--body); font-variant-numeric: tabular-nums; }
.dash .kpi span { font: 12.5px/1.35 var(--ui); color: var(--muted); }
.dash .kpi.warn b { color: var(--warn); } .dash .kpi.in b { color: var(--ok); }
.dash .chart { background: var(--field); border: 1px solid var(--plat-dk); }
.dash .chart svg { display: block; }
.dash .chart text { font: 11.5px var(--ui); fill: var(--ink); } .dash .chart text.l { fill: var(--muted); } .dash .chart .axis { stroke: var(--plat-mid); }
.dash .legend { font: 12.5px var(--ui); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.dash .sw { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.dash .hbars { display: grid; gap: 4px; }
.dash .hb { display: grid; grid-template-columns: minmax(0, 11.5em) 1fr 4.6em; gap: 8px; align-items: center; font: 14px var(--body); }
button.hb { background: none; border: 0; padding: 4px 2px; text-align: left; color: inherit; min-height: 36px; cursor: pointer; }
@media (pointer: coarse) { button.hb { min-height: 44px; } } button.hb:hover { background: color-mix(in srgb, var(--sel) 8%, transparent); }
.dash .hb.on { outline: 2px solid var(--sel); }
.dash .hb .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .hb .bar { background: var(--field); border: 1px solid var(--plat-mid); height: 14px; } .dash .hb .bar i { display: block; height: 100%; }
.dash .hb b { font-variant-numeric: tabular-nums; text-align: right; }
.dash .stackbar { display: flex; height: 22px; border: 1px solid var(--edge); background: var(--field); }
.dash .stackbar i { display: block; min-width: 2px; }
@media (max-width: 760px) { .veil { padding: 0; } .veil .win, .veil .win.wide { width: 100%; height: 100%; max-height: 100%; border: 0; } }
.thread-mini { margin-top: 6px; display: grid; gap: 3px; font: 12px/1.4 var(--body); }
.thread-mini .tm { padding: 4px 6px; border-left: 3px solid var(--plat-dk); background: var(--field); }
.thread-mini .tm.you { border-left-color: var(--sel); }
.thread-mini .tm.agent { border-left-color: #6d4fd0; }
.btn.reply { margin-top: 6px; }

.office .actor::after { position: absolute; top: 2px; right: -12px; font-size: 12px; line-height: 1; pointer-events: none; }
.office .actor.reading::after { content: "📖"; }
.office .actor.searching::after { content: "🔍"; }
.office .actor.writing::after { content: "✍️"; }
.office .actor.thinking::after { content: "💭"; }
.office .actor.gate::after { content: "📮"; }
.office .actor.studying::after { content: "📚"; }
.office .actor.asking::after { content: "✋"; }
.office .actor.working::after { content: "⚙️"; }
.office .actor.walking::after, .office .actor.zz::after { content: none; }

.office .actor.reading .sprite svg { animation: read 1.6s ease-in-out infinite; }
.office .actor.thinking .sprite svg { animation: sway 2.4s ease-in-out infinite; }
@keyframes read { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px) rotate(2deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }


.stage { position: relative; height: 580px; overflow: hidden; margin-bottom: 8px; border: 1px solid #000;
  background: repeating-linear-gradient(0deg, #1b1713 0 15px, #15120f 15px 16px); }
.stage .office { height: 63%; margin: 0; border: 0; }
@media (max-width: 760px) {
  .stage { height: 82vh; min-height: 540px; border-left: 0; border-right: 0; }
  .stage .office { height: 58%; }
}
.field.pile { min-height: 30px; padding: 2px 4px; font: 12px var(--ui); width: auto; }

.dash .seg { display: flex; gap: 4px; }
.dash .seg .btn { flex: 1 0 auto; }
@media (max-width: 760px) { .dash .kpi b { font-size: 18px; } .dash .hb { grid-template-columns: minmax(0, 7.5em) 1fr auto; } }
.need.review ol.rv { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 2px; }
.need.review ol.rv > li { border-top: 1px dotted var(--plat-mid); padding-top: 3px; }
.need.review ol.rv > li::marker { font: 11px var(--ui); color: var(--muted); }

.slip.compact .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slip.compact .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.slip.compact .note.open { white-space: normal; }
.slip.compact .ctl { flex-wrap: nowrap; gap: 4px; margin-top: 3px; }
.slip.compact .ctl .field.pile { min-width: 0; flex: 1 1 0; max-width: 34%; }
.slip.compact details.more { display: inline; }
.slip.compact details.more > summary { list-style: none; display: inline-block; margin-top: 3px; }
.slip.compact details.more > summary::-webkit-details-marker { display: none; }
.need.review ol.rv { grid-template-columns: minmax(0, 1fr); }
.need.review ol.rv > li, .need.review .slip { min-width: 0; }
.need.review .slip > .row > .grow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.need.review .slip > .row { flex-wrap: wrap; }

.subdesk { display: contents; }
.appgroup { margin: 2px 0 6px; } .appgroup > summary { font: bold 13px var(--ui); cursor: pointer; padding: 4px 0; }
details.fold { margin-top: 8px; } details.fold > summary { font: bold 12px var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: pointer; }

.win details:not(.more) > summary { min-height: 32px; padding: 6px 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.win details:not(.more) > summary:hover { color: var(--ink); }
.win details:not(.more) > summary:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
@media (pointer: coarse) { .win details:not(.more) > summary { min-height: 44px; padding: 11px 0; } }
@media (max-width: 760px) {
  #apps-all .icons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #apps-all .icon .nm { font-size: 10px; }
}

#apps-how .hw-row { border: 1px solid var(--plat-dk); background: var(--field); padding: 6px 8px; }
#apps-how .hw-k { font: bold 11px var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
#apps-how .hw-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
#apps-how .hw-chip { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; border: 1px solid var(--plat-mid); background: var(--plat); padding: 3px 6px; min-width: 0; }
#apps-how .hw-chip .sprite { grid-row: span 2; } #apps-how .hw-chip .sprite svg { width: 22px; height: 22px; }
#apps-how .hw-chip b { font: bold 12px var(--ui); } #apps-how .hw-chip span:not(.sprite) { font: 11px/1.25 var(--body); color: var(--muted); grid-column: 2; }
#apps-how .hw-chip:not(:has(.sprite)) { grid-template-columns: 1fr; } #apps-how .hw-chip:not(:has(.sprite)) span { grid-column: 1; }
#apps-how .hw-down { text-align: center; font: 11px var(--ui); color: var(--muted); padding: 2px 0; }
#apps-how .hw-down::before { content: "▼ "; color: var(--ink); }
#apps-how .hw-side { font: 11px/1.4 var(--body); color: var(--muted); padding: 3px 8px; border-left: 3px solid #6d4fd0; margin-top: 3px; }
#apps-how .hw-loop { margin-top: 6px; padding: 5px 8px; border: 1px dashed var(--plat-dk); font: 12px/1.4 var(--body); }
@media (max-width: 760px) { #apps-how .hw-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.beat { background: none; border: 1px solid transparent; font: bold 15px/1 var(--ui); padding: 1px 6px; cursor: pointer; color: inherit; border-radius: 3px; }
.beat[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); }

@media (max-width: 760px) { .desk .win, .desk .subdesk > * { grid-column: 1 / -1 !important; width: 100%; } .desk { grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: 0; } }


.office .actor .bub { font-style: italic; color: #b9b6c8; background: #1d1c26cc; }
.office .actor.speech .bub { font-style: normal; font-weight: bold; color: #1b1a22; background: #fbfaf5; border: 2px solid var(--accent); border-radius: 8px; max-width: 170px; padding: 3px 7px; z-index: 4; }
.office .actor.speech .bub::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--accent); }
.office .actor.speech { z-index: 5; }
.office .actor.asking .bub { background: var(--warm); color: #1b1713; border-color: var(--warm); }
.office .actor.asking .bub::after { border-top-color: var(--warm); }
.office .actor.you.talking .bub { font-style: normal; font-weight: bold; color: #1b1713; background: var(--warm); border: 2px solid var(--warm); border-radius: 8px; }
@media (max-width: 760px) { .office .actor.speech .bub { max-width: 140px; font-size: 10px; } }



.office .actor.speech .bub, .office .actor.you.talking .bub, .office .actor.asking .bub {
  font: 600 11px/1.25 "Pixelify Sans", var(--ui); color: #fff; background: rgba(0,0,0,.28); border: 0; border-radius: 3px; padding: 1px 4px; max-width: 190px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-style: normal; box-shadow: none; }
.office .actor.speech .bub::after, .office .actor.asking .bub::after { display: none; }
.office .actor.asking .bub { color: #fff36b; }
.office .actor.you.talking .bub { color: #fff; }
.office .actor.emote-ask::before { content: "!"; position: absolute; left: 50%; top: -36px; transform: translateX(-50%); z-index: 6;
  font: bold 14px/18px "Pixelify Sans", var(--ui); color: #c0392b; background: #fff; border: 2px solid #222; border-radius: 50% 50% 50% 0; width: 20px; height: 20px; text-align: center;
  animation: emote 1.2s steps(2) infinite; }
@keyframes emote { 50% { transform: translateX(-50%) translateY(-3px); } }
@media (max-width: 760px) { .office .actor.speech .bub, .office .actor.asking .bub { max-width: 150px; font-size: 10px; } }

.stage .office { height: 100%; }
@media (max-width: 760px) { .stage { height: 64vh; min-height: 440px; } }


.office .actor .nm { font-size: 16px; padding: 0 5px; }
.office .workdesk .plate { font-size: 12px; top: 3px; }
.office .actor .bub { font-size: 16px; line-height: 1.25; max-width: 240px; }
.office .actor.speech .bub, .office .actor.you.talking .bub, .office .actor.asking .bub { font-size: 20px; line-height: 1.25; max-width: 320px; padding: 3px 7px; }
.office .actor.zz .bub { font-size: 14px; right: -22px; }
.office .actor .sprite svg { width: 46px; height: 46px; }
.office .actor.emote-ask::before { width: 30px; height: 30px; font-size: 20px; line-height: 28px; top: -50px; }
@media (max-width: 760px) {
  .office .actor.speech .bub, .office .actor.you.talking .bub, .office .actor.asking .bub { font-size: 19px; max-width: 78vw; }
  .office .actor .bub { font-size: 15px; max-width: 60vw; }
  .office .actor .nm { font-size: 15px; }
  .office .actor .sprite svg { width: 42px; height: 42px; }
  .office .actor.off .nm { display: none; }
  .stage { height: 72vh; min-height: 520px; }
}
.office .actor .bub, .board { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }


.mlog li { gap: 8px; align-items: baseline; } .mlog .sub { white-space: nowrap; }


.office .workdesk.bench { width: 96px; }
.office .actor.sess .sprite svg { width: 28px; height: 28px; }
.office .actor.sess .nm { font-size: 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .actor.sess .bub { font-size: 9px; max-width: 120px; }
.office .actor.sess.runner .bub { opacity: .75; }
.office .actor.sess.watch .sprite svg { animation: look 2.4s steps(4) infinite; }
.office .actor.sess.runner .sprite svg { width: 22px; height: 22px; }
.office .runners-tag { position: absolute; font: bold 8px var(--ui); color: #c9d4ff; background: #0e0e13cc; padding: 0 4px; white-space: nowrap; }
.office .actor.sess.runner .bub { left: 0; transform: none; }

#runners-room .actor.sess.runner .sprite svg { width: 36px; height: 36px; }
#runners-room .wallscreen { font-size: max(6px, calc(var(--w) * .0098)); }
#runners-room .runners-tag { font-size: 10px; padding: 1px 6px; transform: translateX(-50%); }

#yaf-room .wallscreen { font-size: max(6px, calc(var(--w) * .0086)); color: #f5f0e8; }
#yaf-room .wallscreen .ws-head b { color: #60d602; }
#yaf-room .wallscreen .ws-head, #yaf-room .wallscreen .ws-k { color: #999999; }
.wallscreen .ws-row .ws-k { font-size: .85em; font-weight: 600; }


.flow .stage { position: static; height: auto !important; min-height: 0 !important; overflow: visible; margin-bottom: 0; border-color: var(--edge); }


@media (min-width: 761px) {
  .dash .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; align-items: start; }
}


.wincol { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (max-width: 760px) { .wincol { gap: 10px; } }

@media (max-width: 760px) { .flow .stage { flex: 0 0 auto; } }

.office .wallsign { position: absolute; left: 50%; top: 21.5%; transform: translate(-50%, -50%); font: bold 9px/1 var(--ui); letter-spacing: .2em;
  color: #e8d3a8aa; border: 1px solid #e8d3a844; padding: 4px 8px; background: #15151c; white-space: nowrap; }
.office .wallsign.on { color: var(--warm); border-color: #ffc77766; box-shadow: 0 0 8px #ffc77733; }

.office .actor.sess.remote .nm::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #5fbf74; margin-right: 3px; vertical-align: 1px; }


.office .deco.bed { z-index: 0; }
.office .workdesk[hidden] { display: none; }
.office .actor.inbed { z-index: 1; }
.office .actor.inbed .sprite svg { transform: rotate(-90deg) scale(.9); animation: none !important; }
.office .actor.inbed .nm { font-size: 8px; opacity: .8; }
.office .actor.inbed .bub { font-size: 9px; opacity: .7; }
.office .actor.edge-l .bub { left: 0; transform: none; } .office .actor.edge-r .bub { left: auto; right: 0; transform: none; }


.monthpic { display: grid; gap: 8px; margin: 8px 0 6px; }
.monthpic .mp-top { display: flex; gap: 14px; align-items: center; }
.monthpic .mp-ring { display: grid; justify-items: center; gap: 0; } .monthpic .mp-ring .sub { font-size: 10px; }
.monthpic .mp-nums { display: grid; gap: 2px; flex: 1; min-width: 0; }
.monthpic .mp-nums b { font: bold 20px/1.1 var(--body); font-variant-numeric: tabular-nums; }
.monthpic .mp-bud { display: grid; gap: 2px; margin-top: 2px; }
.monthpic .mp-bud .bar { display: block; height: 8px; background: var(--field); border: 1px solid var(--plat-mid); } .monthpic .mp-bud .bar i { display: block; height: 100%; background: var(--c-work); } .monthpic .mp-bud .bar i.over { background: var(--c-bad); }

.monthpic .day rect { fill: transparent; stroke: var(--plat-mid); } .monthpic .day text { fill: currentColor; }
.monthpic .day.c0 rect { fill: color-mix(in srgb, var(--c-in) 22%, transparent); } .monthpic .day.c1 rect { fill: color-mix(in srgb, var(--c-out) 33%, transparent); }
.monthpic .day.c2 rect { fill: color-mix(in srgb, var(--c-out) 66%, transparent); } .monthpic .day.c3 rect { fill: var(--c-out); } .monthpic .day.c3 text { fill: #fff; }
.monthpic .day.future rect { stroke: color-mix(in srgb, var(--plat-mid) 45%, transparent); } .monthpic .day.future text { fill: var(--muted); }
.monthpic .day.today rect { stroke: currentColor; stroke-width: 1.6; }
.monthpic .mp-cal svg { display: block; }


.office .actor .bub .who { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; white-space: nowrap;
  font: bold 10px/1.2 var(--ui); font-style: normal; letter-spacing: .02em; color: #1b1713; background: #e8d3a8; border-radius: 3px; padding: 1px 5px; text-shadow: none; }
.office .actor.you .bub .who { background: var(--warm); }
.office .actor.sess .bub .who { background: #d97757; color: #fff; }
.office .actor.edge-l .bub .who { left: 0; transform: none; } .office .actor.edge-r .bub .who { left: auto; right: 0; transform: none; }

.office .actor.you.talking .bub { bottom: auto; top: 100%; margin: 18px 0 0; }

.office .actor.sess.speech .bub { font-size: 14px; max-width: 200px; }
@media (max-width: 760px) { .office .actor.sess.speech .bub { font-size: 13px; max-width: 44vw; } }

.office .actor .bub { translate: var(--bx, 0px) var(--by, 0px); }


.picks { display: grid; gap: 8px; margin-bottom: 12px; }
.picks .pick { display: grid; gap: 3px; padding: 8px; background: var(--field); border: 1px solid var(--plat-dk); }
.picks .pick .tag.bad { background: #b3261e; color: #fff; border-color: #b3261e; }


.office .wallsign { font: bold 12px/1 Menlo, Monaco, "SF Mono", ui-monospace, monospace; letter-spacing: .04em; color: #e8e8e8; background: #0b0b0d;
  border: 1px solid #3a3a46; border-radius: 4px; padding: 5px 9px; box-shadow: inset 0 0 0 1px #000; }
.office .wallsign .prompt { color: #5fbf74; font-weight: normal; }
.office .wallsign .cursor { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: #e8e8e8; animation: blink 1s steps(1) infinite; }
.office .wallsign.on { color: #fff; border-color: #5fbf74; box-shadow: 0 0 10px #5fbf7444; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .office .wallsign .cursor { animation: none; } }

.office .deco.fluker-sofa { z-index: 1; }
.office .actor.you { z-index: 3; }


.office .actor .sprite { position: relative; }
.office .actor:not(.inbed):not(.off) .sprite::after { content: ""; position: absolute; right: 1px; bottom: 7px; width: 6px; height: 10px;
  background: #3b3d4a; border: 1px solid #0b0b0d; border-radius: 1px; box-shadow: inset 0 0 0 1px #2a2c36; }
:is(.office .actor.working, .office .actor.writing, .office .actor.reading, .office .actor.thinking, .office .actor.searching, .office .actor.waking,
  .office .actor.watch, .office .actor.talking, .office .actor.you, .office .actor.asking):not(.inbed):not(.off) .sprite::after {
  background: #8fd3ff; box-shadow: 0 0 6px #8fd3ffaa; }
.office .actor.sess .sprite::after { width: 5px; height: 8px; bottom: 5px; }


.office .actor .nm { background: none !important; color: #fff; padding: 0 2px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 2px #000; }
.office .actor.you .nm { color: var(--warm); }
.office .actor.sess .nm { color: #ffb48a; }
.office .actor[aria-pressed="true"] .nm { color: var(--accent); }
.office .actor.you.talking .bub { margin-top: 8px; }


@media (max-width: 1100px) { #money-col-l { grid-column: 1 / -1 !important; } }
@media (max-width: 900px) { #set-col-l, #set-col-r { grid-column: 1 / -1 !important; } }


#w-dash > .body { container-type: inline-size; }
@container (min-width: 600px) {
  .monthpic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top cal"; gap: 10px 24px; align-items: start; }
  .monthpic .mp-top { grid-area: top; } .monthpic .mp-cal { grid-area: cal; }
  .monthpic .mp-cal svg { max-width: 360px !important; }
}




.office .roadster { position: absolute; transform: translate(-50%, -50%); height: auto; background: none; border: 0; padding: 0; cursor: pointer; z-index: 2;
  animation: hover 2.4s ease-in-out infinite, cruise 9s ease-in-out infinite; }
.office .roadster .car { position: absolute; inset: 0; }
.office .roadster .car img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 5px #a78bfa66); }
.office .roadster .puffs { position: absolute; inset: 0; }
.office .roadster .puffs i { position: absolute; translate: -50% 0; width: 10px; height: 12px; border-radius: 50% 50% 40% 40%; background: radial-gradient(#ffffff, #cfe6ff88 60%, transparent 70%); animation: puff .35s steps(2) infinite; }
.office .roadster .puffs i:nth-child(2n) { animation-delay: .17s; }
@keyframes hover { 50% { transform: translate(-50%, calc(-50% - 5px)); } }
@keyframes puff { 50% { opacity: .35; transform: scaleY(.6); } }
@keyframes cruise { 0%, 100% { translate: 8% -6%; } 50% { translate: -8% 6%; } }
@media (prefers-reduced-motion: reduce) { .office .roadster, .office .roadster .puffs i { animation: none; } }



@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --desk: #1f2338; --desk2: #262b44;
  --plat: #2e2e34; --plat-lt: #4a4a52; --plat-dk: #18181c; --plat-mid: #3c3c44; --edge: #050507;
  --ink: #e9e9ee; --muted: #a2a2ad; --field: #202025; --sel: #5b6fe0; --sel-ink: #ffffff;
  --ok: #5fcf7d; --warn: #f0b44c; --bad: #ff6b60; --link: #9fb2ff; } }
:root[data-theme="dark"] { color-scheme: dark;
  --desk: #1f2338; --desk2: #262b44;
  --plat: #2e2e34; --plat-lt: #4a4a52; --plat-dk: #18181c; --plat-mid: #3c3c44; --edge: #050507;
  --ink: #e9e9ee; --muted: #a2a2ad; --field: #202025; --sel: #5b6fe0; --sel-ink: #ffffff;
  --ok: #5fcf7d; --warn: #f0b44c; --bad: #ff6b60; --link: #9fb2ff; }


@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash .chart text { fill: var(--ink); } :root:not([data-theme="light"]) .dash .chart text.l { fill: var(--muted); } }
:root[data-theme="dark"] .dash .chart text { fill: var(--ink); } :root[data-theme="dark"] .dash .chart text.l { fill: var(--muted); }
.theme-toggle { background: none; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; cursor: pointer; font: bold 13px var(--ui); color: inherit; }
.theme-toggle:hover { border-color: var(--plat-dk); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flow .stage li.cloud { background: #3a3020; } }
:root[data-theme="dark"] .flow .stage li.cloud { background: #3a3020; }


#w-crew .stage { container-type: size; --top: 36px; --board: clamp(340px, 36cqw, 480px); --bottom: 0px;
  background: radial-gradient(1px 1px at 12% 22%, #c9d4ff 50%, transparent 51%), radial-gradient(1px 1px at 81% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 31%, #c9d4ff 50%, transparent 51%), radial-gradient(1px 1px at 27% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 48%, #c9d4ff 50%, transparent 51%),
    radial-gradient(ellipse at 50% 55%, #1a1b21 0, #0d0d11 62%, #070709 100%); }
.stage .office { --w: min(calc(100cqw - var(--board, 0px)), calc((100cqh - var(--top) - var(--bottom, 0px)) * var(--ar, 1))); --h: calc(var(--w) / var(--ar, 1));
  position: absolute; margin: 0; border: 0; background: none; overflow: visible; width: var(--w); height: var(--h);
  top: calc(var(--top) + (100cqh - var(--top) - var(--bottom, 0px) - var(--h)) / 2); left: calc((100cqw - var(--board, 0px) - var(--w)) / 2); }
@media (min-width: 761px) { #w-crew .stage { height: 680px; } }

@media (max-width: 760px) { #w-crew .stage { --board: 0px; --bottom: 260px; height: calc(100vw / var(--ar, 1) + var(--top) + 60px + var(--bottom)); min-height: 0; } }
.office::before { content: none; }
.office .iso-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }

.office .wallsign { transform: translate(-50%, -50%) skewY(26.565deg); font-size: 11px; padding: 3px 6px; }

.office .actor.inbed .sprite svg { width: 30px; height: 30px; }
.office .actor.inbed .nm { font-size: 10px; }
@media (max-width: 760px) { .office .actor.inbed .sprite svg { width: 22px; height: 22px; } .office .actor.inbed .nm { display: none; } .office .wallsign { font-size: 9px; } }
.office .actor.over { z-index: 6; }
.office .actor.over .bub { background: #1d1c26; }
.monthpic .tx { color: var(--c-bad, #b3261e); }

.office .cat { position: absolute; transform: translate(-50%, -88%); background: none; border: 0; padding: 6px; cursor: pointer; z-index: 2;
  transition-property: left, top; transition-timing-function: linear; }
.office .cat .pix { display: block; transform-origin: 50% 100%; }
.office .cat .pix svg { display: block; width: clamp(26px, calc(var(--w) * .05), 48px); height: auto; } 
.office .cat.left .pix { transform: scaleX(-1); }
.office .cat .f2 { display: none; }
.office .cat.walking { animation: waddle .4s ease-in-out infinite; }
.office .cat.walking .f1 { animation: catA .4s steps(1) infinite; }
.office .cat.walking .f2 { display: block; position: absolute; left: 6px; top: 6px; animation: catB .4s steps(1) infinite; }
.office .cat:not(.walking) .f1 { animation: breathe 2.4s ease-in-out infinite; }
.office .cat .heart { position: absolute; left: 62%; top: -4px; font: 700 11px var(--ui); color: #f2a7bd; white-space: nowrap; pointer-events: none; animation: heart 1.6s ease-out forwards; }
@keyframes catA { 50% { visibility: hidden; } }
@keyframes catB { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes waddle { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes breathe { 50% { scale: 1.04 .96; } }
@keyframes heart { from { opacity: 0; translate: 0 4px; } 20% { opacity: 1; } to { opacity: 0; translate: 0 -18px; } }
@media (prefers-reduced-motion: reduce) { .office .cat, .office .cat * { animation: none !important; transition: none !important; } }

#w-crew.full .stage { position: fixed; inset: 0; z-index: 55; height: 100dvh; min-height: 0; margin: 0; border: 0; --top: calc(36px + env(safe-area-inset-top)); }
body.room-full { overflow: hidden; }


.stage .pan { position: absolute; inset: 0; z-index: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; }
.stage .pan::-webkit-scrollbar { display: none; }

.stage .slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.office .actor, .office .actor.you, .office .cat { z-index: calc(10 + var(--d, 0)); }
.office .actor.inbed { z-index: 5; } 
.office .actor.over { z-index: 2000; }
.office .actor.speech, .office .actor.talking, .office .actor.asking, .office .actor.you.talking { z-index: 2100; }
.office .roadster { z-index: 3000; }

@media (max-width: 760px) {
  #w-crew.full .pan { scroll-snap-type: none; }
  #w-crew.full .slide { flex-basis: max(100%, calc((100cqh - var(--top) - var(--bottom, 0px)) * var(--ar, 1))); }
  #w-crew.full .stage .office { --w: calc((100cqh - var(--top) - var(--bottom, 0px)) * var(--ar, 1)); left: max(0px, calc((100cqw - var(--w)) / 2)); }
}

.office .wallscreen { position: absolute; transform-origin: 0 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; gap: .25em;
  padding: .45em .6em; background: none; border: 0; color: #f1f2f5; text-align: left; overflow: hidden; cursor: pointer;
  font: 600 max(7px, calc(var(--w) * .0135))/1.2 var(--mono); }
.office .wallscreen:hover, .office .wallscreen:focus-visible { outline: 1px solid var(--accent); }
.wallscreen .ws-head { display: flex; justify-content: space-between; gap: .6em; color: #a9aab3; text-transform: lowercase; white-space: nowrap; overflow: hidden; }
.wallscreen .ws-head b { color: #d8ccff; }
.wallscreen .ws-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.wallscreen .ws-fig { display: flex; flex-direction: column; min-width: 0; }
.wallscreen .ws-k { color: #a9aab3; font-size: .85em; }
.wallscreen .ws-fig b { font-size: 1.9em; line-height: 1.05; color: #fff; white-space: nowrap; }
.wallscreen .ws-fig.in b { color: #d8ccff; }
.wallscreen .neg, .wallscreen .ws-fig.neg b { color: #ff8f80; }
.wallscreen .ws-sub { color: #a9aab3; font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallscreen .ws-exp { border: 1px dashed var(--accent); padding: .15em .4em; color: #d8ccff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallscreen .ws-wait { color: #ffe08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallscreen .ws-row { display: flex; justify-content: space-between; gap: .5em; }
.wallscreen .ws-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wallscreen .ws-row b { flex: none; white-space: nowrap; }

.office .doortag { position: absolute; transform: translate(-50%, -50%); z-index: 2050; min-height: 30px; padding: 4px 10px; border: 1px solid var(--accent);
  border-radius: 6px; background: color-mix(in srgb, var(--wall) 85%, transparent); color: #f1f2f5; font: bold 11px/1 var(--ui); white-space: nowrap; cursor: pointer; }
.office .doortag:hover, .office .doortag:focus-visible { background: #2a2540; }

.office .tray { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column-reverse; gap: 1px; z-index: 6; min-width: 24px; min-height: 24px; justify-content: flex-start; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.office .tray i { display: block; width: calc(var(--w) * .028); height: 2px; background: #fbfaf5; box-shadow: 0 1px 0 #0007; }


.dg { position: relative; padding: 4px 0 0; --dg-read: var(--muted); --dg-write: var(--sel); --dg-hand: var(--ok); --dg-back: var(--warn); }
.dg-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.dg-lanes { position: relative; z-index: 1; display: grid; }
.dg.wide .dg-lanes { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 46px; align-items: start; padding-bottom: 60px; }
.dg.tall .dg-lanes { row-gap: 34px; padding: 0 22px 0 18px; }
.dg-lt { font: bold 11px var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.dg-nodes { display: grid; gap: 6px; }
.dg.tall .dg-nodes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.dg-node { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: 12px/1.3 var(--body); color: var(--ink);
  background: var(--field); border: 1px solid var(--edge); box-shadow: 1px 1px 0 var(--plat-dk); padding: 5px 7px; cursor: pointer; transition: opacity .15s; }
.dg-node .sprite svg { width: 22px; height: 22px; }
.dg-t { display: grid; min-width: 0; } .dg-t b { font: bold 12px var(--ui); }
.dg-s { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.dg-node.h-yaf { border-left: 4px solid #2E7D12; } .dg-node.h-ff { border-left: 4px solid #6D28D9; } .dg-node.h-hw { border-left: 4px solid #B45309; }
.dg-node.h-art { border-left: 4px solid #1D4ED8; } .dg-node.h-ink { border-left: 4px solid var(--ink); } 
.dg-node.mac { border-left: 4px solid var(--ok); } .dg-node.cloud { border-left: 4px dashed var(--warn); } .dg-node.you { border-left: 4px solid var(--ink); }
.dg-node.on { outline: 2px solid var(--sel); outline-offset: 1px; } .dg-node.near { border-color: var(--sel); }
.dg.focused .dg-node:not(.on):not(.near) { opacity: .35; }
.dg-e path { fill: none; stroke-width: 1.4; opacity: .4; transition: opacity .15s, stroke-width .15s; }
.dg-e.read path { stroke: var(--dg-read); } .dg-e.write path { stroke: var(--dg-write); } .dg-e.hand path { stroke: var(--dg-hand); }
.dg-e.back path { stroke: var(--dg-back); stroke-dasharray: 5 4; }
.dg-head.read { fill: var(--dg-read); } .dg-head.write { fill: var(--dg-write); } .dg-head.hand { fill: var(--dg-hand); } .dg-head.back { fill: var(--dg-back); }
.dg-e text { font: 10px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--field); stroke-width: 3px; display: none; }
.dg.labels .dg-e text { display: block; }
.dg.focused .dg-e path { opacity: .06; } .dg.focused .dg-e.on path { opacity: 1; stroke-width: 2.2; }
.dg.focused .dg-e text { display: none; } .dg.focused .dg-e.on text { display: block; }
.dg-cap { position: relative; z-index: 1; margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--plat-dk); font: 12px/1.45 var(--body); color: var(--muted); min-height: 1.45em; }
.dg-cap b { color: var(--ink); }
.dg-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px var(--body); color: var(--muted); margin: 0 0 8px; }
.dg-key i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .dg-node, .dg-e path { transition: none; } }


.dash { --c-in: #2a8a5c; --c-out: #6d4fd0; --c-borrow: #c2731f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash { --c-in: #36a072; --c-out: #8670e6; --c-borrow: #c98039; } }
:root[data-theme="dark"] .dash { --c-in: #36a072; --c-out: #8670e6; --c-borrow: #c98039; }
.dash .fl-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.dash .fl-step { display: flex; gap: 6px; align-items: center; }
.dash .fl-when { font: bold 14px var(--ui); min-width: 9.5em; text-align: center; font-variant-numeric: tabular-nums; }
.dash .fl-step .btn { min-width: 36px; min-height: 32px; }
.dash .kpi.neg b { color: var(--bad); } .dash .kpi.borrow b { color: var(--c-borrow); }
.dash .kpi.expect { border-style: dashed; } .dash .kpi.expect b { color: var(--muted); }
.flowchart .hit { cursor: pointer; outline: none; } .flowchart .hit-area { fill: transparent; }
.flowchart .hit:hover .hit-area, .flowchart .hit:focus-visible .hit-area { fill: color-mix(in srgb, var(--sel) 10%, transparent); }
.dash .m-in { fill: var(--c-in); background: var(--c-in); }
.dash .m-out { fill: var(--c-out); background: var(--c-out); }
.dash .m-borrow { fill: url(#fl-hb); background: repeating-linear-gradient(45deg, var(--c-borrow) 0 2px, color-mix(in srgb, var(--c-borrow) 25%, transparent) 2px 5px); }
.dash .m-debt { fill: url(#fl-hd); background: repeating-linear-gradient(45deg, var(--c-out) 0 2px, color-mix(in srgb, var(--c-out) 25%, transparent) 2px 5px); }
.dash .m-expect { fill: transparent; stroke: var(--c-in); stroke-width: 1.2; stroke-dasharray: 3 2; background: transparent; outline: 1px dashed var(--c-in); outline-offset: -1px; }
.dash .m-left { fill: var(--ink); stroke: var(--field); stroke-width: 1.5; }
.dash .sw.m-left { border-radius: 50%; background: var(--ink); width: 8px; height: 8px; }
.flowchart .hb-bg { fill: color-mix(in srgb, var(--c-borrow) 25%, transparent); } .flowchart .hb-fg { fill: var(--c-borrow); }
.flowchart .hd-bg { fill: color-mix(in srgb, var(--c-out) 25%, transparent); } .flowchart .hd-fg { fill: var(--c-out); }
.dash .fl-table { border-collapse: collapse; width: 100%; font: 12px var(--body); font-variant-numeric: tabular-nums; }
.dash .fl-table th, .dash .fl-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--plat-mid); } .dash .fl-table td:first-child, .dash .fl-table th:first-child { text-align: left; }
.mf-line { margin: 8px 0 2px; flex-wrap: wrap; gap: 4px 8px; } .mf-line b.pos { color: var(--ok); } .mf-line b.neg { color: var(--bad); }


.board { position: absolute; top: 8px; right: 8px; bottom: 8px; width: calc(var(--board) - 16px); z-index: 5; display: flex; flex-direction: column;
  background: rgba(6, 6, 12, .76); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
  color: #fff; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .7); }

.bd-head { display: flex; gap: 3px; align-items: flex-end; padding: 5px 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.bd-tab { font: 600 12px "Pixelify Sans", var(--ui); color: #dfe6f7; background: linear-gradient(#4a5574, #2c3349); border: 1px solid #10131d; border-bottom: 0;
  border-radius: 5px 5px 0 0; padding: 3px 10px; min-height: 26px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.bd-tab[aria-pressed="true"] { background: linear-gradient(#b9c8ee, #8ea4d8); color: #0f1730; text-shadow: none; }
.bd-btn { font: 600 12px "Pixelify Sans", var(--ui); color: #e8e6f0; background: rgba(38, 36, 58, .9); border: 1px solid #4a4670; border-radius: 4px; padding: 0 8px;
  min-height: 28px; min-width: 28px; cursor: pointer; text-shadow: none; margin-bottom: 4px; }
.bd-btn.default { background: #6d4fd0; border-color: #a78bfa; }
.bd-btn:disabled { opacity: .45; cursor: default; }
.bd-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
.bl { padding: 3px 6px; margin-bottom: 2px; border-radius: 3px; overflow-wrap: anywhere; white-space: pre-wrap; cursor: pointer; outline: none; }
.bl:hover, .bl:focus-visible { background: rgba(255, 255, 255, .07); } .bl.sel { background: rgba(147, 168, 220, .2); box-shadow: inset 2px 0 0 #93a8dc; }
.bl .t { color: #c3c0d6; font-size: 12px; margin-right: 6px; font-variant-numeric: tabular-nums; } .bl .who { font: 600 15px "Pixelify Sans", var(--ui); letter-spacing: .2px; }
.bl.sys { color: #8fd3ff; } .bl.err { color: #ff8f80; } .bl.ask, .bl.agent { color: #ffef7a; } .bl.gate { color: #ffb46b; } .bl.party { color: #79ff8a; } .bl.you { color: #fff; } .bl.sess { color: #d4b8ff; } 
.bl .topic { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid rgba(212, 184, 255, .45); border-radius: 8px; color: #e4d6ff; font-size: 12px; text-shadow: none; }
.board .only { display: block; width: 100%; margin: 0 0 6px; padding: 4px 8px; border: 1px solid rgba(212, 184, 255, .5); border-radius: 4px; background: rgba(212, 184, 255, .14); color: #efe7ff; font: 600 12px var(--ui); text-align: left; cursor: pointer; text-shadow: none; }
.bd-sel .sinfo { display: grid; gap: 2px; margin-top: 4px; font: 12px/1.4 var(--body); color: #e8e6f0; }
.bd-sel .si { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 6px; } .bd-sel .si .k { color: #c3c0d6; } .bd-sel .si .v { overflow-wrap: anywhere; }
.bl .wait { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 8px; background: #ffef7a; color: #1a1420; font-weight: 700; text-shadow: none; }
.bl .scard { margin: 3px 0 5px 38px; padding: 5px 8px; border-left: 2px solid #d4b8ff; background: rgba(212, 184, 255, .08); color: #e8e0ff; font-size: 14px; }
.bl .scard .acts { margin: 4px 0 0; align-items: center; } .bl .scard .hint { color: #dcd9ea; font-size: 13px; }
.bl .steps { color: #b4b1c8; font-style: italic; font-size: 13px; }
.bl .rx { letter-spacing: 1px; text-shadow: none; }
.bl .rxbar { display: none; gap: 2px; margin-left: 6px; vertical-align: middle; }
.bl:hover .rxbar, .bl.sel .rxbar, .bl:focus-within .rxbar { display: inline-flex; }
.bl .rxbar button { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; min-width: 30px; min-height: 26px; padding: 0 4px; cursor: pointer; font-size: 13px; text-shadow: none; }
.bl .rxbar button.on { background: rgba(147, 168, 220, .45); border-color: #93a8dc; }
.bl .acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 5px 38px; }

.bl .bd-review { margin: 3px 0 6px 38px; max-height: min(60vh, 560px); overflow: auto; overscroll-behavior: contain; background: var(--field); color: var(--ink); border: 1px solid var(--plat-dk); border-radius: 6px; padding: 6px 8px; font: 14px var(--ui); text-shadow: none; cursor: auto; }
.bl .bd-review .field { color: var(--ink); background: var(--field); }

.room-pop { position: absolute; z-index: 6; display: flex; flex-direction: column; background: rgba(6, 6, 12, .8); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .45); color: #fff; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; }
.room-pop .rp-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.room-pop .rp-head b { font: 600 13px "Pixelify Sans", var(--ui); color: #ffef7a; text-shadow: 1px 1px 0 #000; }
.room-pop .rp-body { overflow: auto; overscroll-behavior: contain; padding: 6px; min-height: 0; }
.room-pop .bd-review { background: var(--field); color: var(--ink); border: 1px solid var(--plat-dk); border-radius: 6px; padding: 6px 8px; font: 14px var(--ui); }
.room-pop .bd-review .field { color: var(--ink); background: var(--field); }
:root[data-skin="ro"] .room-pop { background: rgba(0, 0, 0, .62); border-color: rgba(255, 255, 255, .35); border-radius: 4px; } 
.bl .bd-review .need { margin: 0; }
.bl .acts button { font: 600 12px "Pixelify Sans", var(--ui); color: #e8e6f0; background: rgba(38, 36, 58, .92); border: 1px solid #4a4670; border-radius: 4px; padding: 0 9px; min-height: 28px; cursor: pointer; text-shadow: none; }
.bl .acts button.default { background: #6d4fd0; border-color: #a78bfa; }
.board .empty { color: #9a98b0; background: none; border: 0; padding: 8px 4px; }
.bd-sel { padding: 3px 8px; border-top: 1px solid rgba(255, 255, 255, .12); font: 11px var(--ui); text-shadow: none; }
.bd-sel .row { gap: 6px; align-items: center; flex-wrap: nowrap; } .bd-sel .sprite svg { width: 20px; height: 20px; }
.bd-sel b { color: #c4b5fd; } .bd-sel .sub { color: #c3c0d6; } .bd-sel .grow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sel .btn { background: #26243a; color: #e8e6f0; border: 1px solid #4a4670; box-shadow: none; min-height: 26px; padding: 0 8px; }
.bd-sel .btn.default { background: #6d4fd0; border-color: #a78bfa; }
.bd-input { display: flex; gap: 6px; padding: 6px; border-top: 1px solid rgba(255, 255, 255, .16); align-items: flex-end; }
.bd-input .to { font: 600 13px "Pixelify Sans", var(--ui); color: #ffef7a; background: none; border: 0; padding: 0 2px; min-height: 32px; white-space: nowrap; cursor: pointer; max-width: 36%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; text-shadow: 1px 1px 0 #000; }
.bd-input textarea { flex: 1; min-width: 0; resize: none; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; padding: 6px 8px; min-height: 34px; max-height: 110px; }
.bd-input textarea::placeholder { color: #8f8ca8; }
.bd-input .bd-btn { margin: 0; min-height: 32px; }
.bd-menu { position: absolute; left: 6px; bottom: 48px; z-index: 6; display: grid; gap: 2px; padding: 4px; background: rgba(12, 12, 20, .95); border: 1px solid #4a4670; border-radius: 6px; }
.bd-menu button { display: flex; gap: 6px; align-items: center; background: none; border: 0; color: #fff; font: 600 13px "Pixelify Sans", var(--ui); padding: 4px 10px 4px 4px; min-height: 32px; cursor: pointer; border-radius: 4px; }
.bd-menu button:hover { background: rgba(255, 255, 255, .1); } .bd-menu .sprite svg { width: 22px; height: 22px; }
.bd-closed { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; gap: 6px; }
.bd-open { font: 600 12px "Pixelify Sans", var(--ui); color: #fff; background: rgba(6, 6, 12, .7);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; padding: 0 10px; min-height: 30px; cursor: pointer; }
#w-crew .stage.board-off { --board: 0px; --bottom: 0px; } .stage.board-off .board { display: none; } .stage.board-off .bd-closed { display: flex; }
@media (max-width: 760px) { .board { top: auto; left: 6px; right: 6px; bottom: 6px; width: auto; height: calc(var(--bottom) - 12px); } }
@media (min-width: 761px) { #w-crew.full .board { top: calc(8px + env(safe-area-inset-top)); } }
@media (max-width: 760px) { #w-crew.full .board { bottom: calc(6px + env(safe-area-inset-bottom)); } } 
@media (prefers-reduced-motion: reduce) { .bd-lines { scroll-behavior: auto; } }


@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.no { color: #ffaaa2; } :root:not([data-theme="light"]) .btn.ok { color: #8fe0a2; } }
:root[data-theme="dark"] .btn.no { color: #ffaaa2; } :root[data-theme="dark"] .btn.ok { color: #8fe0a2; }

@media (max-width: 760px) { #w-crew:not(.full) .office .actor.sess .nm { display: none; } }

@media (max-width: 760px) { input, textarea, select { font-size: 16px !important; } }

.card-where { flex-basis: 100%; margin-top: 4px; }
.card-where > summary { cursor: pointer; }
.card-lines { display: grid; gap: 6px; margin-top: 6px; }
.card-lines .lines { margin: 0; }
.card-lines .lines .row { gap: 8px; font: 12px var(--body); padding: 3px 0; }
.card-lines .lines .row .sub { flex: 0 0 7.5em; }
.card-lines .lines b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.office .actor.sess, .office .actor.sess .bub, .office .actor.sess::before, .office .actor.sess::after { pointer-events: none; }
.office .actor.sess .sprite { pointer-events: auto; cursor: pointer; } 


.jars { display: grid; gap: 2px; margin: 6px 0; }
.jar { display: grid; grid-template-columns: minmax(0, 12em) 1fr minmax(0, 11em); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--plat-mid); }
.jar .bar { height: 14px; background: var(--field); border: 1px solid var(--plat-dk); } .jar .bar i { display: block; height: 100%; background: var(--ok); }
.jar.over .bar i { background: var(--bad); } .jar .neg, .jar-left b.neg { color: var(--bad); } .jar-left b.pos { color: var(--ok); }
.jar .jv { font-variant-numeric: tabular-nums; } .jar .jv .sub, .jar .jv .neg { font-size: 12px; }
.jar-uns { margin: 8px 0 4px; font-size: 13px; } .jar-left { margin: 8px 0 2px; font-size: 14px; } .jar-left b { font-size: 18px; }

.plan { display: grid; gap: 2px; margin: 6px 0; }
.plan-i { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--plat-mid); }
.plan-i .pt b { font-size: 14px; } .plan-i .pa { font-variant-numeric: tabular-nums; text-align: right; } .plan-i .pa b.pos { color: var(--ok); }
.plan-i .why { grid-column: 1 / 3; font-size: 12px; } .plan-i .pb { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 6px; }
.plan-i.ok .pt b::before { content: "✓ "; color: var(--ok); }
@media (max-width: 760px) { .plan-i { grid-template-columns: 1fr auto; } .plan-i .why { grid-column: 1 / -1; } .plan-i .pb { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 760px) { .jar { grid-template-columns: 1fr auto; } .jar .bar { grid-column: 1 / -1; grid-row: 2; } }


#view-money .mslot { display: contents; }
#view-money .money-bar { position: sticky; top: 26px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px;
  background: var(--plat); border: 1px solid var(--plat-dk); }
#view-money .money-bar .fl-when { min-width: 7.5em; text-align: center; display: inline-block; }
#view-money .money-bar a.btn { margin-left: auto; text-decoration: none; }
#view-money .money-bar .seg.cur { display: inline-flex; align-items: center; gap: 4px; } #view-money .money-bar .seg.cur .sub { margin-left: 4px; }
.st-take { font-size: 16px; margin: 0 0 10px; max-width: 70ch; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 8px; }
.st-tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--plat-mid); background: var(--field); }
.st-tile b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.st-tile.neg b { color: var(--bad); } .st-tile.pos b { color: var(--ok); }
.st-worth { margin: 10px 0 0; font-size: 14px; } .st-worth b { color: var(--bad); }
.st-work { margin: 10px 0 0; font-size: 14px; } .st-work b { font-size: 15px; }
.st-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.need-chip b { color: var(--bad); }
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 10px; margin-bottom: 10px; }
.verdict .vd { border-left: 3px solid var(--plat-mid); padding: 2px 0 2px 10px; }
.verdict .vd.good { border-color: var(--ok); } .verdict .vd.bad { border-color: var(--bad); }
.verdict .vd-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.verdict ul, .vd-notes { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; }
.vd-notes { margin: 10px 0 0; }
.fl-table.habits tr.on td { font-weight: 700; background: var(--field); }
#view-money .records > summary.title { cursor: pointer; list-style: none; }
#view-money .records > summary.title::-webkit-details-marker { display: none; }
#view-money .records > summary.title h2::before { content: "▸ "; } #view-money .records[open] > summary.title h2::before { content: "▾ "; }
#view-money .records .rec-sum { margin: 6px 4px 8px; }
#view-money .records .desk.inner { padding: 0; }
#w-money .row { flex-wrap: wrap; } #w-money .row .field, #w-money .row input:not([type]) { min-width: 0; flex: 1 1 10em; }
@media (max-width: 760px) { #view-money .money-bar { top: 0; } #view-money .money-bar a.btn { margin-left: 0; } .st-tile b { font-size: 19px; } }
@media (max-width: 1100px) { #view-money #w-money { grid-column: span 12; } }


.stage-up { display: grid; gap: 8px; min-width: min(90vw, 420px); }
.stage-thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .stage-thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--plat-dk); }
.stage-up textarea { width: 100%; font-size: 16px; }


.lessons li { align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; }
#crew-sel .learned { display: block; margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; color: inherit; text-align: left; }


.acc-list { display: grid; gap: 6px; margin: 4px 0 8px; }
.acc-row { display: grid; grid-template-columns: minmax(8em, 1.4fr) 6.5em minmax(5em, 1fr) minmax(7em, 1.1fr) minmax(7em, 1fr) auto auto auto; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--plat-mid); }
.acc-row.card { grid-template-columns: minmax(10em, 2fr) minmax(7em, 1fr) auto auto; }
.acc-row.coin { grid-template-columns: minmax(8em, 1.2fr) 6.5em minmax(5em, .8fr) minmax(5em, .8fr) minmax(12em, 2fr) auto auto auto; }
.acc-row .field { min-width: 0; width: 100%; font-size: 14px; } .acc-row.off { opacity: .55; }
.acc-row .acc-note { grid-column: 1 / -1; } .acc-on { white-space: nowrap; }
.st-worth .linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 760px) { .acc-row, .acc-row.card, .acc-row.coin { grid-template-columns: 1fr 1fr; } .acc-row .field { font-size: 16px; } }

.projects-read tr.blocked td:last-child { color: var(--bad); font-weight: 600; } .projects-read td { vertical-align: top; font-size: 13px; }

.who-row { gap: 6px; margin: 4px 0; } .who-row .field { flex: 1 1 14em; min-width: 0; }
@media (max-width: 760px) { .who-row .field { font-size: 16px; } }

.lots { margin-top: 10px; } .lots summary { cursor: pointer; } .acc-lots { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-lots th, .acc-lots td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--plat-mid); vertical-align: top; } .acc-lots td:first-child { white-space: nowrap; } .acc-lots td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-lots tr.est td { font-style: italic; } @media (max-width: 760px) { .acc-lots td.sub, .acc-lots th:last-child { display: none; } }


.read { font-size: 14px; line-height: 1.55; margin: 6px 0 2px; overflow-wrap: anywhere; }
.read h4 { font-size: 16px; margin: 12px 0 4px; } .read h5 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px; }
.read p { margin: 6px 0; } .read ul, .read ol { margin: 6px 0; padding-left: 1.3em; } .read li { margin: 4px 0; }
.read code { font-size: 12px; background: var(--field); border: 1px solid var(--plat-mid); padding: 0 3px; border-radius: 3px; }
.read table.md { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; } .read table.md th, .read table.md td { border: 1px solid var(--plat-mid); padding: 4px 6px; text-align: left; vertical-align: top; }
.read table.md th { background: var(--field); font-weight: 600; }
.md-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.md-tile { border: 1px solid var(--plat-mid); background: var(--field); padding: 8px 10px; border-radius: 6px; }
.md-tile .lab { font-size: 12px; color: var(--muted); } .md-tile .big { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.md-tile .of { font-size: 12px; color: var(--muted); } .md-tile .src { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.md-tile .bar { height: 6px; background: var(--plat-mid); border-radius: 3px; margin-top: 6px; overflow: hidden; } .md-tile .bar i { display: block; height: 100%; background: var(--ok); }
.md-tile.short .bar i { background: var(--warn); }
.md-moves { margin: 8px 0; } .md-move { padding: 8px 0; border-bottom: 1px solid var(--plat-mid); } .md-move:last-child { border-bottom: 0; }
.md-move .what { font-weight: 600; } .md-move .dates { margin: 2px 0; } .md-move .was { color: var(--muted); text-decoration: line-through; } .md-move .arrow { margin: 0 6px; color: var(--muted); }
.md-move .note { font-size: 13px; color: var(--muted); margin-top: 2px; } .md-move .note .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) { .read { font-size: 15px; }
  .read table.md thead { display: none; } .read table.md, .read table.md tbody, .read table.md tr, .read table.md td { display: block; width: 100%; }
  .read table.md tr { border: 1px solid var(--plat-mid); border-radius: 6px; margin: 8px 0; padding: 4px 8px; } .read table.md td { border: 0; padding: 3px 0; }
  .read table.md td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } }
.md-tile .of.up { color: var(--ok); } .md-tile .of.down { color: var(--bad); }
.md-glance-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
.md-bars { margin: 8px 0; display: grid; gap: 6px; } .md-bars .cap { font-size: 11px; color: var(--muted); }
.md-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.md-bar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-bar .track { height: 10px; background: var(--plat-mid); border-radius: 5px; overflow: hidden; }
.md-bar .track i { display: block; height: 100%; background: var(--sel); border-radius: 5px; } .md-bar .v { font-variant-numeric: tabular-nums; white-space: nowrap; } .md-bar .rest { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .md-bar { grid-template-columns: 1fr auto; } .md-bar .track { grid-column: 1 / -1; grid-row: 2; } }
.md-tile .big.txt { font-size: 15px; font-weight: 600; line-height: 1.3; }
.acc-cards-lbl { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--plat-mid); } .acc-off { margin-top: 6px; } .acc-off summary { cursor: pointer; }

.cap-meta { font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.cap-text { font-size: 16px; line-height: 1.5; background: var(--field); border: 1px solid var(--plat-mid); border-left: 3px solid var(--sel); border-radius: 6px; padding: 10px 12px; margin: 0 0 8px; overflow-wrap: anywhere; }
.cap-text p { margin: 0 0 4px; } .cap-text p:last-child { margin: 0; }
.md-callout { border: 1px solid var(--warn); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 6px; } .chips .chip { font-size: 11px; border: 1px solid var(--ok); color: var(--ok); border-radius: 999px; padding: 1px 8px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; font-size: 13px; margin: 6px 0; } dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.bd-lines, .bd-lines .bl { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.bl-copy { margin-left: 6px; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; opacity: .85; }

.day-budget { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--plat-mid); border-radius: 6px; }
.day-budget .lbl { font-size: 12px; } .day-budget .amt { font-size: 18px; font-variant-numeric: tabular-nums; }
.day-budget .bar { height: 6px; background: var(--plat-mid); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.day-budget .bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; } .day-budget.over .bar i { background: var(--warn); }
.day-budget .sub { font-size: 12px; line-height: 1.4; }
.today-focus { margin: 0 0 10px; font-weight: 600; font-size: 15px; line-height: 1.45; }
.today-hours { margin: 0 0 8px; } .today-hours .bar { position: relative; height: 6px; background: var(--plat-mid); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.today-hours .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .today-hours .bar .plan { background: var(--plat-dk); opacity: .6; } .today-hours .bar .done { background: var(--ok); }
.today-list li { padding: 8px 0; } .today-list .task { line-height: 1.45; } .today-list .side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.today-list .hrs { font-size: 11px; border: 1px solid var(--plat-mid); border-radius: 999px; padding: 1px 7px; color: var(--muted); white-space: nowrap; }
.today-list .why { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 4px; } .today-list .why summary { cursor: pointer; list-style: none; } .today-list .why summary::-webkit-details-marker { display: none; }
.today-list .why .more { color: var(--link); white-space: nowrap; } .today-list .why[open] .more { display: none; } .today-list .why > div { margin-top: 4px; }
.today-list .code { font-size: 11px; border: 1px solid var(--plat-mid); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.today-list li.done .task { color: var(--muted); text-decoration: line-through; font-size: 13px; } .today-list li.done { padding: 4px 0; }
@media (max-width: 760px) { .today-list .task { font-size: 15px; } }

.wv, .st-work { margin: 10px 0; display: grid; gap: 8px; }
.wv-head { font-size: 14px; } .wv-meter { display: grid; gap: 4px; }
.wv-meter-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wv-track { position: relative; height: 10px; background: var(--plat-mid); border-radius: 5px; overflow: hidden; display: flex; gap: 2px; }
.wv-track.big { height: 14px; border-radius: 7px; } .wv-track i { display: block; height: 100%; border-radius: 4px; }
.wv-track i.ok { background: var(--ok); } .wv-track i.bad { background: var(--bad); } .wv-track i.warn { background: var(--warn); }
.wv-track i.due { background: repeating-linear-gradient(135deg, var(--ok) 0 4px, transparent 4px 7px); border: 1px solid var(--ok); box-sizing: border-box; }
.wv-goal { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.wv-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; font-size: 13px; } .wv-row .wv-v { font-variant-numeric: tabular-nums; }
.wv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .wv-chips .chip { font-size: 12px; border: 1px solid var(--plat-mid); border-radius: 999px; padding: 2px 9px; }
.wv-chips .chip.warn { border-color: var(--warn); color: var(--warn); }
.vd-more summary, .vd-notes-box summary { cursor: pointer; margin: 4px 0; }
.veil .win > .title { cursor: default; } .veil .win > .title:active { filter: none; } 
.win .list .num { font: bold 17px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; } 


.bd-tall { display: none !important; }
@media (max-width: 760px) {
  .bd-tall { display: inline-flex !important; }
  #w-crew .stage.tall .board { top: calc(var(--top) + 4px); height: auto; background: rgba(8, 8, 14, .96); backdrop-filter: none; } 
  .bd-tall { font: 600 20px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important; padding: 0 10px; }
  .bd-head .bd-btn, .bd-head .bd-tab { min-height: 36px; }
  .bd-lines { padding: 8px 10px; gap: 4px; }
  .bl { font-size: 16px; line-height: 1.5; padding: 5px 6px; }
  .bd-input { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px 8px; }
  .bd-input .to { flex-basis: 100%; max-width: 100%; min-height: 22px; text-align: left; font-size: 14px; }
  .bd-input textarea { min-height: 44px; max-height: 168px; padding: 10px 12px; line-height: 1.4; scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } 
  .bd-input .bd-btn { min-height: 44px; min-width: 64px; }
}


.read { font-size: 15px; line-height: 1.6; } .read p, .read li { max-width: 72ch; }
.read h4 { font-size: 18px; line-height: 1.3; margin: 14px 0 6px; text-wrap: balance; }
.read .md-hr { border: 0; border-top: 1px solid var(--plat-mid); margin: 14px 0; }
.md-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.md-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--ui); color: var(--ink); background: var(--field); border: 1px solid var(--plat-dk); border-radius: 14px; padding: 4px 12px; min-height: 32px; cursor: pointer; text-align: left; }
.md-chip .n, .md-sec > summary .n { font: 600 11px var(--ui); color: var(--muted); }
.md-sec { border-top: 1px solid var(--plat-mid); } .md-sec:last-child { border-bottom: 1px solid var(--plat-mid); }
.md-sec > summary { display: flex; align-items: baseline; gap: 10px; font: 600 16px/1.35 var(--body); padding: 10px 0; cursor: pointer; scroll-margin-top: 40px; }
.md-sec > summary .t { flex: 1; min-width: 0; } .md-sec[open] > summary { color: var(--sel); }
.md-card { background: var(--field); border: 1px solid var(--plat-mid); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.md-card-h { font-weight: 700; margin-bottom: 6px; line-height: 1.35; }
.md-card dl { display: grid; grid-template-columns: minmax(5.5em, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.md-card dt { font: 600 11px/1.9 var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.md-card dd { margin: 0; min-width: 0; } .md-card dd.full { grid-column: 1 / -1; }
@media (max-width: 760px) { .md-card dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .md-card dt { margin-top: 6px; } .md-chip { min-height: 40px; } }
@media (pointer: coarse) { .md-sec > summary { min-height: 44px; } }