/* 办公室按组织坐 (office_org.js): function colours on name tags, the head's front desk with the reporting line,
   the GM's office, the department plaque, the 按部门 / 按项目 switch and the legend. The colours are theme tokens
   (--wh-role-*, owned by 03's theme); the values here are only the fallbacks. */
:root{--office-role-management:var(--wh-role-management,#c99a1e);--office-role-sales:var(--wh-role-sales,#2f6fd6);--office-role-operations:var(--wh-role-operations,#2f9a5b);--office-role-finance:var(--wh-role-finance,#e07a1f);--office-role-other:var(--wh-role-other,#7b8794);--office-role-ai:var(--wh-role-ai,#7b5cd6);--office-line:color-mix(in srgb,#4b5d4f 45%,transparent)}
[data-role="management"]{--office-role:var(--office-role-management)}
[data-role="sales"]{--office-role:var(--office-role-sales)}
[data-role="operations"]{--office-role:var(--office-role-operations)}
[data-role="finance"]{--office-role:var(--office-role-finance)}
[data-role="other"]{--office-role:var(--office-role-other)}
.org-zone[data-role="ai"]{--office-role:var(--office-role-ai)}

/* Name tags in the function's colour; AI colleagues keep their purple AI look. */
.studio-person[data-role]>b{display:inline-block;max-width:100%;padding:1px 6px;border-radius:3px;background:var(--office-role);color:#fff;box-shadow:0 2px 0 color-mix(in srgb,var(--office-role) 60%,#000);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] .studio-office .wh-scene-seat[data-role]>b,html[data-theme] .studio-office .studio-person[data-role]>b{background:var(--office-role);border-color:color-mix(in srgb,var(--office-role) 70%,#000);color:#fff}
.office-role-tag{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;padding:1px 6px;border-radius:3px;background:var(--office-role,var(--office-role-management));color:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 2px 0 #0003}

/* The room: its function's colour on the top wall, the name on a plaque, 待分配 drawn as an open area. */
.studio-room[data-role]>header{box-shadow:inset 0 4px 0 var(--office-role)}
.office-plaque{display:block;width:fit-content;max-width:100%;padding:2px 10px;border:2px solid #7a5a32;border-radius:3px;background:linear-gradient(#f7ecd4,#e6d3ad);color:#4a3418!important;box-shadow:0 2px 0 #5a4022}
.studio-room-unassigned{border-style:dashed!important;opacity:.92}
.studio-room-unassigned .studio-room-floor{background-image:none;background-color:#d6d0c4}

/* The head's front desk at the top of the room, and the faint line down to the rows behind. */
.studio-room-head{position:relative;z-index:2;display:flex;justify-content:center;margin:-24px auto 12px;padding:10px 8px 2px;max-width:150px;border-radius:6px;background:color-mix(in srgb,#8a6a3e 18%,transparent)}
html[data-theme] .studio-office .studio-room-head .studio-person.studio-person{position:relative;background:transparent;border-color:transparent;box-shadow:none;padding-bottom:2px}
/* The dark theme's button rule (html[data-theme="dark"] button:not(.primary):not(.viewtab):not(.on)) outranks
   avatar_office.css and painted a dark box over every figure in the room; seats stay see-through. */
html[data-theme] .studio-office .wh-office-scene .wh-scene-seat.studio-person,html[data-theme] .studio-office .studio-top-desks .studio-person.studio-person{background:transparent}
.studio-room-head::after{content:'';position:absolute;left:50%;top:100%;height:14px;border-left:2px dashed var(--office-line)}
.has-head>.wh-office-scene,.has-head>.studio-room-people,.has-head>.studio-member-grid{border-top:2px dashed var(--office-line);padding-top:6px}
.studio-person.reports-to-head::before{content:'';position:absolute;left:50%;top:-6px;height:6px;border-left:2px dashed var(--office-line)}

/* ---- The one big office: the company's floor as the org tree ------------------------------------------- */
.office-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.office-stats>div{min-width:96px;padding:6px 12px;border:1px solid var(--line,#d5dce6);border-radius:8px;background:var(--panel,#fff);text-align:center}
.office-stats b{display:block;font-size:18px;line-height:1.25;color:var(--txt,#1f2b3a)}
.office-stats span{font-size:11px;color:var(--dim,#66758a)}
.office-stats .warn b{color:#c2410c}
.office-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 16px}
.office-filters{display:flex;flex-wrap:wrap;gap:6px}
html[data-theme] .office-filters button:not(#office){padding:5px 12px;border:1px solid var(--line,#d5dce6);border-radius:16px;background:var(--panel,#fff);color:var(--txt,#1f2b3a);box-shadow:none;font-size:12px}
html[data-theme] .office-filters button:not(#office).on{background:var(--acc,#2f6fd6);border-color:var(--acc,#2f6fd6);color:#fff}

.office-toolbar-views{display:flex;flex-wrap:wrap;gap:8px}

/* The floor, its GM on top and the curved lines down to the first row of departments (drawn by drawLinks). */
.org-floor{position:relative;padding:20px 14px 14px;border:2px solid #7a5a32;border-radius:14px;background-color:#f7f1e3;box-shadow:0 5px 0 #5a4022}
.org-floor-name{position:absolute;top:-13px;left:18px;z-index:2;padding:1px 10px;border:2px solid #7a5a32;border-radius:4px;background:linear-gradient(#f7ecd4,#e6d3ad);color:#4a3418;font-weight:700}
.org-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.org-links path{fill:none;stroke:#b39b72;stroke-width:2.5;stroke-linecap:round}
.org-floor-top{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
html[data-theme] .org-floor-top>:is(.org-row,.office-card):not(#office){width:min(240px,100%)}
.org-floor-top>.studio-person{position:relative}
.org-zones{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-items:start;gap:12px}
.look-simple .org-zones{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.look-cartoon .org-zones{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.org-zone{position:relative;min-width:0;padding:8px;border:1px solid color-mix(in srgb,var(--office-role) 30%,transparent);border-top:4px solid var(--office-role);border-radius:10px;background:color-mix(in srgb,var(--office-role) 7%,#fffaf0)}
.studio-office .org-zone:not(#office){display:block;align-self:start;height:auto;min-height:0}
.org-zone.unassigned{border-style:dashed;border-top-style:solid}
.org-zone>header{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.org-zone>header small{color:#6b5a40;font-size:11px;white-space:nowrap}
.org-zone-late{padding:0 6px;border-radius:8px;background:#dc2626;color:#fff;font-size:10.5px;line-height:1.6;white-space:nowrap}
html[data-theme] .org-zone>header button.org-enter:not(#office){margin-left:auto;padding:2px 8px;border:1px solid #c8b590;border-radius:6px;background:#fffaf0;color:#4a3418;box-shadow:none;font-size:11px}
html[data-theme] .org-zone>header button.org-fold:not(#office){width:20px;height:20px;padding:0;border:0;background:transparent;color:#6b5a40;box-shadow:none;font-size:12px}
.org-zone-summary{margin:2px 2px 0;color:#6b5a40;font-size:11.5px}
.org-zone-head{margin-bottom:4px}
.org-group-head{margin:0 0 4px 14px}
/* The rail: everyone hangs off a line from their head, each with a short tick. */
.org-team{position:relative;display:grid;gap:4px;margin:0 0 4px 12px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--office-role) 40%,transparent)}
.look-simple .org-team{grid-template-columns:repeat(2,minmax(0,1fr))}
.org-team>*{position:relative}
.org-team>*::before{content:'';position:absolute;left:-12px;top:50%;width:10px;border-top:2px solid color-mix(in srgb,var(--office-role) 40%,transparent)}
.look-simple .org-team>:nth-child(2n)::before{display:none}
.org-sub{margin:8px 0 4px 12px;font-size:11px;font-weight:700;color:#6b5a40}
.org-sub span{padding:0 6px;border-left:3px solid var(--office-role)}
html[data-theme] .org-zone-more:not(#office){display:block;width:100%;margin-top:4px;padding:4px;border:1px dashed #c8b590;border-radius:6px;background:transparent;color:#6b5a40;box-shadow:none;font-size:11.5px}
.look-cartoon .org-zone .studio-room-floor{border-radius:6px}

/* The pixel head (existing art): status shown as the ring around it. */
.office-face{position:relative;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--office-role) 16%,#fff);box-shadow:inset 0 0 0 2px #a9b3bf}
.office-face[data-status="online"]{box-shadow:inset 0 0 0 2px #2fa65a}
.office-face[data-status="focus"]{box-shadow:inset 0 0 0 2px #e0a21f}
.office-face>:not(.office-face-letter){width:30px!important;height:30px!important;margin:0!important;image-rendering:pixelated}
.office-face :is(canvas,img,svg){width:100%;height:100%;image-rendering:pixelated}
.office-face-letter{display:grid;place-items:center;width:100%;height:100%;background:var(--office-role);color:#fff;font-weight:700;font-size:13px}

/* 紧凑: one row per person. */
html[data-theme] .org-row:not(#office){display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;min-width:0;padding:3px 6px;border:1px solid #eadfca;border-radius:7px;background:#fff;color:#1f2b3a;box-shadow:none;text-align:left;font:inherit;cursor:pointer;transition:opacity .15s,box-shadow .15s}
html[data-theme] .org-row:not(#office).head{border:1.5px solid var(--office-role);box-shadow:0 2px 0 color-mix(in srgb,var(--office-role) 35%,transparent)}
html[data-theme] .org-row:not(#office).ai{background:#f6f2fe;border-color:#d7cdf0}
html[data-theme] .org-row:not(#office):is(:hover,:focus-visible){box-shadow:0 0 0 2px var(--acc,#2f6fd6)}
html[data-theme] .org-row:not(#office).selected{box-shadow:0 0 0 3px var(--acc,#2f6fd6)}
.org-row-name{min-width:0}
.org-row-name b{display:block;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.org-row-name small{display:block;overflow:hidden;color:#66758a;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.org-row-work{display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:66px}
.org-row-work>span:first-child{font-size:10px;color:#66758a;white-space:nowrap}
:is(.org-row-work,.office-work) b{color:#dc2626}
:is(.org-row,.office-card) b em{margin-left:4px;padding:0 4px;border-radius:3px;background:var(--office-role);color:#fff;font-style:normal;font-size:9.5px;font-weight:700;vertical-align:1px}
:is(.org-row,.office-card)[data-role="ai"]{--office-role:var(--office-role-ai)}
:is(.org-row,.office-card,.studio-person,.site-unit).is-match{outline:3px solid #facc15;outline-offset:1px}
:is(.org-row,.office-card,.studio-person,.site-unit).is-dim{opacity:.32}

/* 卡片: a card each, same size for heads (the tag and border say who leads). */
html[data-theme] .office-card:not(#office){position:relative;display:block;width:100%;min-width:0;min-height:58px;padding:6px 8px 6px 44px;border:1px solid #d9cfba;border-radius:8px;background:#fff;color:#1f2b3a;box-shadow:0 2px 0 #d9cfba;text-align:left;font:inherit;cursor:pointer;transition:opacity .15s,box-shadow .15s}
html[data-theme] .office-card:not(#office).head{border-color:var(--office-role);box-shadow:0 2px 0 var(--office-role)}
html[data-theme] .office-card:not(#office).ai{background:#f6f2fe;border-color:#d7cdf0;box-shadow:0 2px 0 #d7cdf0}
html[data-theme] .office-card:not(#office):is(:hover,:focus-visible){box-shadow:0 0 0 2px var(--acc,#2f6fd6)}
html[data-theme] .office-card:not(#office).selected{box-shadow:0 0 0 3px var(--acc,#2f6fd6)}
.office-card>.office-face{position:absolute;left:7px;top:8px}
.office-card>b{display:block;overflow:hidden;font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.office-card>small{display:block;overflow:hidden;color:#66758a;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.office-work{display:block;font-size:10px;color:#66758a}
.office-card-late,.office-card-review{position:absolute;top:5px;right:5px;padding:0 6px;border-radius:8px;color:#fff;font-size:10px;line-height:1.6}
.office-card-late{background:#dc2626}.office-card-review{background:#7b5cd6}

/* The task bar: fixed length, split by share, so it holds any number of tasks. */
.office-bar{display:flex;width:100%;min-width:60px;height:5px;overflow:hidden;border-radius:3px;background:#e3e8ee}
.office-card .office-bar{margin-top:3px}
.office-bar i{display:block;height:100%}
:is(.office-bar i,.office-task).late{background:#dc2626}
:is(.office-bar i,.office-task).active{background:#3b82f6}
:is(.office-bar i,.office-task).done{background:#5aa36b}
.office-task{display:inline-block;width:12px;height:6px;border-radius:2px}
.office-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#a9b3bf}
.office-dot[data-status="online"]{background:#2fa65a}.office-dot[data-status="focus"]{background:#e0a21f}

/* 卡通: bubbles over the figures — red = late tasks, blue = 5 or more open. */
.office-bubble{position:absolute;top:-8px;left:-2px;z-index:4;min-width:16px;padding:0 4px;border:1.5px solid #fff;border-radius:8px;color:#fff;font-style:normal;font-size:10px;font-weight:800;line-height:1.4;text-align:center;box-shadow:0 2px 0 #0003}
.office-bubble.late{background:#dc2626}.office-bubble.busy{background:#3b82f6}
.office-role-legend .office-bubble{position:static;display:inline-block;margin-right:2px}
/* On the pixel canvas the station's own pieces are hidden; the bubble stays, and replaces the text alert. */
.studio-office .wh-scene-seat .studio-station>.office-bubble:not(#office){display:block;top:-10px;left:auto;right:-2px}
.look-cartoon .studio-person:has(.office-bubble) .studio-person-alert{display:none}
/* Heads and the GM are drawn about the size of the people at their desks, without the location line. */
.look-cartoon :is(.studio-room-head,.org-floor-top) .studio-person{zoom:.68}
.look-cartoon :is(.studio-room-head,.org-floor-top) .studio-person>small{display:none}
.look-cartoon .studio-room-head{max-width:110px;margin-bottom:8px;padding:8px 6px 0}
.office-role-legend i.office-bubble{width:auto;height:auto}
.office-role-legend i.office-bubble.late{background:#dc2626}.office-role-legend i.office-bubble.busy{background:#3b82f6}

/* Project sites: a yard with a sign and cones; the site office on the left, the operators by their machines. */
.site-area{margin-top:14px;padding:10px 12px 12px;border:2px solid #5b6470;border-radius:14px;background:#d8dbce;background-image:repeating-linear-gradient(45deg,transparent 0 18px,#0000000c 18px 20px);box-shadow:0 4px 0 #3d434b}
.site-area>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.site-sign{padding:1px 9px;border:2px solid #1f2b3a;border-radius:3px;background:#f4c430;color:#1f2b3a;font-weight:800}
.site-area>header small{color:#3d434b}
.site-cones{display:inline-flex;gap:3px;margin-left:auto}
.site-cones i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:11px solid #f97316}
html[data-theme] .site-area>header button.org-enter:not(#office){padding:2px 8px;border:1px solid #5b6470;border-radius:6px;background:#eef0e8;color:#1f2b3a;box-shadow:none;font-size:11px}
.site-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:10px}
.site-office{padding:6px;border:2px solid #5b6470;border-radius:8px;background:#eef0e8}
.site-yard{padding:6px;border:2px dashed #5b6470;border-radius:8px;background:#c9ccbf}
:is(.site-office,.site-yard) h5{margin:0 0 6px;font-size:11.5px;color:#3d434b}
.site-staff{display:grid;gap:4px}
.site-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.site-unit{position:relative;display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #b9bdb1;border-left:4px solid #9aa0a6;border-radius:6px;background:#fff;font-size:11.5px}
.site-unit[data-state="working"]{border-left-color:#2fa65a}
.site-unit[data-state="paused"]{border-left-color:#e0a21f}
.site-unit[data-state="down"]{border-left-color:#dc2626}
.site-unit-icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:5px;background:#f4c430;font-size:14px}
.site-unit-text{min-width:0;flex:1}
.site-unit-text b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-unit-text small{display:block;overflow:hidden;color:#66758a;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.site-unit-state{flex:none;padding:0 6px;border-radius:8px;background:#eef1f5;color:#66758a;font-size:10px;white-space:nowrap}
.site-unit[data-state="working"] .site-unit-state{background:#e6f6ec;color:#1b7a3d}
.site-unit[data-state="paused"] .site-unit-state{background:#fdf3dc;color:#8a5a00}
.site-unit[data-state="down"] .site-unit-state{background:#fdecec;color:#b42318}
.site-unit.with-figure{flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.site-unit.with-figure .site-unit-text{width:100%}
.site-figure{display:block;width:60px;height:60px;overflow:hidden}
.studio-office .site-figure>canvas:not(#office){display:block;width:60px;height:60px;margin:0;image-rendering:pixelated}
.site-empty{margin:4px;color:#3d434b;font-size:11.5px}

/* Dark skins: the floor turns to a dark panel, the seats keep their colours on a darker seat. */
html:is([data-theme="dark"],[data-theme="ocean"]) .org-floor{background-color:color-mix(in srgb,var(--panel,#1d2228) 92%,#7a5a32);border-color:#5a4a34;box-shadow:0 5px 0 #000a}
html:is([data-theme="dark"],[data-theme="ocean"]) .org-links path{stroke:#8a7a60}
html:is([data-theme="dark"],[data-theme="ocean"]) .org-zone{background:color-mix(in srgb,var(--office-role) 12%,var(--panel,#1d2228))}
html:is([data-theme="dark"],[data-theme="ocean"]) :is(.org-zone>header small,.org-zone-summary,.org-sub){color:var(--dim)}
html:is([data-theme="dark"],[data-theme="ocean"]) :is(.office-card,.org-row):not(#office){background:var(--surface1,#262c33);border-color:var(--line);box-shadow:0 2px 0 #0006;color:var(--txt)}
html:is([data-theme="dark"],[data-theme="ocean"]) :is(.office-card,.org-row):not(#office).ai{background:color-mix(in srgb,#7b5cd6 18%,var(--surface1,#262c33))}
html:is([data-theme="dark"],[data-theme="ocean"]) :is(.office-card>small,.org-row-name small,.org-row-work>span:first-child,.office-work),html:is([data-theme="dark"],[data-theme="ocean"]) .org-zone-more:not(#office){color:var(--dim)}
html:is([data-theme="dark"],[data-theme="ocean"]) .office-bar{background:#ffffff1f}
html:is([data-theme="dark"],[data-theme="ocean"]) .org-zone>header button.org-enter:not(#office){background:transparent;border-color:var(--line);color:var(--acc)}
html:is([data-theme="dark"],[data-theme="ocean"]) .org-zone>header button.org-fold:not(#office){color:var(--dim)}
html:is([data-theme="dark"],[data-theme="ocean"]) .site-area{background-color:#2a3038;border-color:#5b6470;box-shadow:0 4px 0 #000a}
html:is([data-theme="dark"],[data-theme="ocean"]) .site-area>header small,html:is([data-theme="dark"],[data-theme="ocean"]) :is(.site-office,.site-yard) h5,html:is([data-theme="dark"],[data-theme="ocean"]) .site-empty{color:var(--dim)}
html:is([data-theme="dark"],[data-theme="ocean"]) .site-office{background:var(--panel,#1d2228)}
html:is([data-theme="dark"],[data-theme="ocean"]) .site-yard{background:#333a43}
html:is([data-theme="dark"],[data-theme="ocean"]) .site-unit{background:var(--surface1,#262c33);border-color:var(--line);color:var(--txt)}
@media(max-width:760px){.site-grid{grid-template-columns:1fr}.org-floor-top{margin-bottom:18px}.look-simple .org-team{grid-template-columns:1fr}.look-simple .org-team>:nth-child(2n)::before{display:block}}
@media(max-width:760px){.org-zones{grid-template-columns:1fr}.studio-heading-tools{justify-content:flex-start}}
/* 03's polish (2026-10-25): room for the floating 工作讨论 launcher on phones; a visible 进入 button and
   reporting-line marker in the dark skins. */
@media(max-width:600px){.studio-office .studio-scene-body{padding-bottom:72px}}
html:is([data-theme="dark"],[data-theme="ocean"]) .org-zone>header button:not(#office){border-color:color-mix(in srgb,var(--txt) 40%,transparent)}
html:is([data-theme="dark"],[data-theme="ocean"]){--office-line:color-mix(in srgb,#cfe0d2 60%,transparent)}

/* 按部门 / 按项目, at the top right beside 聊一聊. */
.studio-heading-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.office-group-switch{display:inline-flex;border:1px solid var(--line,#aabb9b);border-radius:7px;overflow:hidden}
.office-group-switch button{padding:6px 11px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px;color:inherit}
.office-group-switch button.on{background:var(--acc,#3d7b4f);color:#fff;font-weight:600}
/* The light theme's button:hover outranked .on and turned the chosen segment white-on-white (01 polish #13). */
html[data-theme] .office-group-switch button.on:not(#office),html[data-theme] .office-group-switch button.on:not(#office):hover{background:var(--acc,#3d7b4f);border-color:transparent;color:#fff}
html[data-theme] .office-group-switch button:not(.on):not(#office):hover{background:color-mix(in srgb,var(--acc,#3d7b4f) 12%,transparent);color:inherit}

/* The legend under the rooms. */
.office-role-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 4px 4px;font-size:12px;color:var(--dim,#66735b)}
.office-role-legend span{display:inline-flex;align-items:center;gap:6px}
.office-role-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;background:var(--office-role)}
.office-role-legend i.office-role-ai{background:var(--office-role-ai)}
.office-role-legend i.office-dot{width:10px;height:10px;border-radius:50%;background:#a9b3bf}
.office-role-legend i.office-dot[data-status="online"]{background:#2fa65a}.office-role-legend i.office-dot[data-status="focus"]{background:#e0a21f}
.office-role-legend i.office-task{width:12px;height:6px}.office-role-legend i.office-task.late{background:#dc2626}.office-role-legend i.office-task.active{background:#3b82f6}.office-role-legend i.office-task.done{background:#5aa36b}

/* 正在协作 under each room: the dark skins get a dark panel instead of the cream card (03, 2026-10-25). */
html:is([data-theme="dark"],[data-theme="ocean"]) .room-work-summary{background:var(--panel,var(--surface1));border-color:var(--line);color:var(--txt)}
html:is([data-theme="dark"],[data-theme="ocean"]) .room-work-summary :is(b,span,small),html:is([data-theme="dark"],[data-theme="ocean"]) .room-work-summary>button{color:var(--txt)}
html:is([data-theme="dark"],[data-theme="ocean"]) .room-work-summary>div>span,html:is([data-theme="dark"],[data-theme="ocean"]) .room-work-summary>small{color:var(--dim)}
html[data-theme="dark"] .office-role-legend{color:#b5c2b8}
html[data-theme="dark"]{--office-line:color-mix(in srgb,#cfe0d2 40%,transparent)}