/* Pixel avatars in the shell, the dressing panel and the pixel office rooms.
   Loaded before workhub-theme.css (the theme stays last), so these rules carry html[data-theme]
   or the editor's id to win over the theme's generic styles. */

.wh-avatar{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.wh-avatar-badge{border-radius:8px;background:color-mix(in srgb,var(--acc) 12%,var(--surface1))}

/* Top bar and account card */
#self-status-avatar .wh-avatar-badge{width:32px;height:32px}
#self-avatar-preview .wh-avatar-stage{margin:auto}
#self-avatar-preview{display:grid;place-items:center}

/* ---------- dressing panel ---------- */
.pixel-avatar-editor{margin-bottom:18px}
#pixel-avatar-editor .wh-av-editor{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
#pixel-avatar-editor .wh-av-preview{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--wh-radius,12px);background:var(--surface0)}
#pixel-avatar-editor .wh-av-stage{display:grid;place-items:center;min-height:190px;border-radius:10px;background:
  radial-gradient(circle at 50% 78%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 58%),
  linear-gradient(var(--wh-grid,transparent) 1px,transparent 1px) 0 0/12px 12px,
  linear-gradient(90deg,var(--wh-grid,transparent) 1px,transparent 1px) 0 0/12px 12px,var(--surface1)}
#pixel-avatar-editor .wh-av-badge-row{display:flex;gap:12px;align-items:center}
#pixel-avatar-editor .wh-av-badge-row p{margin:0;font-size:var(--wh-fs-xs,12px);line-height:1.5;color:var(--dim)}
#pixel-avatar-editor .wh-av-fields{display:flex;flex-direction:column;gap:14px;min-width:0}
#pixel-avatar-editor .wh-av-group>span{display:block;margin-bottom:6px;font-size:var(--wh-fs-xs,12px);font-weight:600;color:var(--dim)}
#pixel-avatar-editor .wh-av-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
#pixel-avatar-editor .wh-av-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface1);box-shadow:none;cursor:pointer}
#pixel-avatar-editor .wh-av-card small{font-size:var(--wh-fs-xs,12px);color:var(--txt);line-height:1.3;text-align:center}
#pixel-avatar-editor .wh-av-card.on{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 30%,transparent)}
#pixel-avatar-editor .wh-av-swatches,#pixel-avatar-editor .wh-av-chips{display:flex;flex-wrap:wrap;gap:8px}
html[data-theme] #pixel-avatar-editor .wh-av-swatch{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--surface1);background:var(--sw);box-shadow:0 0 0 1px var(--line);cursor:pointer}
html[data-theme] #pixel-avatar-editor .wh-av-swatch.on{box-shadow:0 0 0 2px var(--acc),0 0 10px -1px var(--acc)}
#pixel-avatar-editor .wh-av-chip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface1);color:var(--txt);font-size:var(--wh-fs-xs,12px);box-shadow:none}
#pixel-avatar-editor .wh-av-chip.on{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--surface1))}
#pixel-avatar-editor .wh-av-actions{justify-content:center}
#pixel-avatar-editor .wh-av-save{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
#pixel-avatar-editor .wh-av-status{flex:1;min-width:160px;font-size:var(--wh-fs-xs,12px);color:var(--dim)}
#pixel-avatar-editor .wh-av-credit,#pixel-avatar-editor .wh-av-note{margin:0;font-size:var(--wh-fs-xs,12px);line-height:1.5;color:var(--dim)}
#pixel-avatar-editor .wh-av-credit a{color:var(--acc)}
@media(max-width:760px){#pixel-avatar-editor .wh-av-editor{grid-template-columns:1fr}#pixel-avatar-editor .wh-av-preview{position:static}}

/* ---------- office: the v0.16 pixel rooms (office_scene.js) ----------
   The room art is the hand-off's own (wood floor, windows, desks) in every theme; only the
   room's header and footer follow the theme. The page's seat buttons sit over the desks:
   the canvas draws the people, the buttons keep the name tag, alerts, clicks and drops. */
html[data-theme] .studio-office :is(.studio-room,.studio-team-detail){background:var(--surface1);color:var(--txt);border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-theme] .studio-office :is(.studio-room,.studio-team-detail)>header{background:color-mix(in srgb,var(--acc) 8%,var(--surface1));border-bottom:1px solid var(--line)}
html[data-theme] .studio-office :is(.studio-room,.studio-team-detail)>header span{color:var(--acc);font-size:var(--wh-fs-xs,12px);letter-spacing:.08em}
html[data-theme] .studio-office .studio-team-detail>header p{color:var(--dim)}
html[data-theme] .studio-office .studio-team-detail>header button{border-color:var(--line);background:transparent;color:var(--acc)}
html[data-theme] .studio-office .studio-room h3,html[data-theme] .studio-office .studio-team-detail h3,html[data-theme] .studio-office .studio-person>b{color:var(--txt)}
html[data-theme] .studio-office .studio-room>header button,html[data-theme] .studio-office .studio-room-enter{border-color:var(--line);background:transparent;color:var(--acc)}
html[data-theme] .studio-office .has-office-scene{padding:12px;background:#e8e3cf;background-image:none;box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}
.has-office-scene>:is(.studio-window,.studio-plant,.studio-cabinet){display:none}
.wh-office-scene{position:relative;width:100%;max-width:calc(var(--scene-w) * 2.5px);margin:0 auto}
.wh-office-scene>canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
html[data-theme] .studio-office .wh-office-seats{position:absolute;inset:0;display:block;padding:0;margin:0;gap:0}
html[data-theme] .studio-office .wh-office-scene .wh-scene-seat{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0;min-width:0;padding:0;margin:0;border:0;border-radius:4px;background:transparent;box-shadow:none;overflow:visible;cursor:pointer}
html[data-theme] .studio-office .wh-office-scene .wh-scene-seat:is(:hover,.selected){background:transparent;border:0;box-shadow:none;transform:none}
.wh-scene-seat .studio-station{position:absolute;inset:0;background:none;border:0;box-shadow:none}
.wh-scene-seat .studio-station>:not(.studio-person-alert),.wh-scene-seat>small,.wh-scene-seat>em{display:none}
.wh-scene-seat .studio-person-alert{position:absolute;top:-6px;right:-4px;left:auto}
html[data-theme] .studio-office .wh-scene-seat>b{position:relative;transform:translateY(55%);max-width:150%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border:1px solid #d6cfb8;border-radius:6px;background:rgba(255,253,244,.94);color:#3d4636;font-size:11px;font-weight:600;line-height:1.5}
html[data-theme] .studio-office .wf-office-agent.wh-scene-seat>b{background:rgba(243,238,252,.95);border-color:#d7cdf0;color:#5a4a86}
html[data-theme] .studio-office .wh-scene-seat:is(:hover,:focus-visible)>b{border-color:var(--acc)}
html[data-theme] .studio-office .wh-scene-seat.selected>b{box-shadow:0 0 0 2px var(--acc)}
.wh-scene-seat:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.wh-scene-seat.is-away>b{opacity:.6}
.wh-scene-seat.drop-ready{outline:2px dashed var(--acc);outline-offset:2px}

/* Seats that are not in a pixel room (very large rooms) still use the single figure. */
.studio-station .wh-office-figure{position:absolute;z-index:2;left:-3px;top:-24px;width:96px;height:96px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.wh-office-figure.is-still{filter:saturate(.55) opacity(.8)}

/* ---------- ocean ---------- */
html[data-theme="ocean"] #pixel-avatar-editor .wh-av-stage{background:
  radial-gradient(circle at 50% 80%,rgba(77,189,211,.35),transparent 60%),
  linear-gradient(rgba(77,189,211,.12) 1px,transparent 1px) 0 0/12px 12px,
  linear-gradient(90deg,rgba(77,189,211,.12) 1px,transparent 1px) 0 0/12px 12px,#060b1c;box-shadow:inset 0 0 0 1px rgba(77,189,211,.25)}
html[data-theme="ocean"] #pixel-avatar-editor :is(.wh-av-card,.wh-av-chip).on{box-shadow:0 0 12px -2px rgba(77,189,211,.8)}