/* HH's own styles, loaded only on its own pages. pod_api.html links /brand/tenant.css right after
   app.css, and each portal's Caddy block serves /brand/* from that tenant's assets/ folder (huddlespeak.com serves
   an empty huddle-app/brand/tenant.css). Every rule here requires html.tenant-hh; moved out of app.css on
   2026-10-23 with its comments, @media wrappers and order kept. They now come after ALL of app.css, so a rule that
   relied on sitting before a later shared rule of equal specificity stayed in app.css.
   Ships with Proxy, or Tenant Admin -> Apply for this tenant; never needs a Page deploy. No ?v=: Caddy sends
   Cache-Control: no-cache, so browsers revalidate it on every load.
   A url() for a file in the web root must start with "/": this sheet is served from /brand/, so a relative url()
   resolves there (only this tenant's own assets/ folder). */

  html.tenant-hh.tenant-fixed-workspace:not([data-theme="dark"]) #tenantWorkspaceShell>#chat{
    background:linear-gradient(160deg,rgba(248,244,237,.62) 0%,rgba(244,238,229,.56) 52%,rgba(232,222,210,.62) 100%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  }

/* HH desktop: the advisors move to a banner across the top, as on Light (owner 2026-11-02), which frees the middle
   column for the mood board canvas. Brand | advisors | language and account, then Chat, the middle, Browse. Desktop
   only: every rule needs the non-portrait workspace, so phones and portrait tablets keep their layout.
   #stage spans both rows on the shell's own columns (subgrid): the banner is its first row, and the status line and
   meeting controls stay in normal flow at the foot of the middle column, with no script moving them. It lets clicks
   through its empty parts, because it lies over the side panes (it stacks above them so the menus open over them). */
@media screen {
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait) {
    --hh-banner:100px;
    --tenant-chat-pane:380px; --tenant-center-pane:640px; --tenant-browser-pane:420px;   /* the room photo gets the width; the three still add up to the 1440px design */
    grid-template-rows:var(--hh-banner) minmax(0,1fr);
  }
  html.tenant-hh[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage {
    grid-column:1 / -1 !important; grid-row:1 / -1 !important; position:relative; z-index:6;
    display:grid !important; grid-template-columns:subgrid; grid-template-rows:var(--hh-banner) minmax(0,1fr) auto auto auto minmax(0,1fr); align-content:stretch;
    box-sizing:border-box; width:auto; height:100%; margin:0; padding:0; overflow:visible; pointer-events:none;
  }
  html.tenant-hh[data-theme] body.live #tenantWorkspaceShell:not(.workspace-portrait)>#stage { grid-template-rows:var(--hh-banner) minmax(0,1fr) auto auto auto 12px; }   /* before a meeting Start stands mid-column; live, the controls sit at its foot */
  html.tenant-hh[data-theme] body.ftue #tenantWorkspaceShell:not(.workspace-portrait)>#stage { z-index:auto; }   /* first run: the Start control rises above the veil, so the stage stacks nothing */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>* { pointer-events:auto; }
  /* The band, frosted like the panes. */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage::before {
    content:""; grid-column:1 / -1; grid-row:1; border-bottom:1px solid var(--tenant-window-border); border-radius:8px 8px 0 0; pointer-events:none;
    background:linear-gradient(160deg,rgba(248,244,237,.62) 0%,rgba(244,238,229,.56) 52%,rgba(232,222,210,.62) 100%);
    -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  }
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage::before {
    background:linear-gradient(160deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%);
    border-bottom-color:rgba(255,255,255,.12);
  }
  /* Brand on the left, language and account on the right; #pod lies over the middle of the same row. */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar {
    grid-column:1 / -1 !important; grid-row:1; display:flex !important; flex-direction:row; align-items:center; justify-content:space-between; gap:16px;
    box-sizing:border-box; width:auto; max-width:none; height:100%; margin:0 !important; padding:0 22px !important; pointer-events:none;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar>* { pointer-events:auto; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .brandrow { margin:0; transform:none; justify-content:flex-start; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .brandcopy { align-items:flex-start; text-align:left; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar .metarow {
    display:flex; align-items:center; justify-content:flex-end; gap:10px; width:auto; max-width:none; margin:0;
  }
  /* The advisors: three equal cards in a row, meters lying flat (Light's banner cards). */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod {
    grid-column:2 !important; grid-row:1; justify-self:center; align-self:center; position:relative; z-index:2;
    box-sizing:border-box; display:grid !important; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; gap:0 !important;
    width:100%; max-width:540px; height:78px; min-height:0 !important; margin:0 !important; padding:0;
    border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:12px; background:color-mix(in srgb,var(--surface) 55%,transparent);
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg {
    display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto;
    grid-template-areas:"face name" "face role" "face meter"; align-content:center; align-items:center; column-gap:9px; row-gap:1px;
    flex:1 1 auto; width:auto; min-width:0; max-width:none; height:100%; box-sizing:border-box; margin:0; padding:0 10px;
    border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg+.reg { border-left:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg :is(.advisor-frame,.rolesel,.rolemenu) { display:none !important; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg>svg { display:none !important; }
  /* The per-advisor mute follows the tenant's setting (off for HH): hidden with it, else a column at the card's end. */
  html.tenant-hh.tenant-advisor-mutes-hidden[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg>.toggle { display:none !important; }
  html.tenant-hh:not(.tenant-advisor-mutes-hidden)[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg {
    grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"face name toggle" "face role toggle" "face meter meter";
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg>.toggle { grid-area:toggle; align-self:center; margin:0; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg .card { display:contents !important; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .portrait {
    grid-area:face; align-self:center; box-sizing:border-box; width:50px; max-width:50px; height:50px; margin:0;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .name {
    grid-area:name; align-self:end; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:1;
    color:var(--ink); font-size:14px; font-weight:600; line-height:1.2; letter-spacing:0; text-align:left;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolewrap { grid-area:role; align-self:start; min-width:0; opacity:1; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel {
    display:block; height:auto !important; min-height:0; padding:0 !important; border:0; background:transparent !important; box-shadow:none;
    color:color-mix(in srgb,var(--ink) 72%,transparent); font-size:11.5px; font-weight:400; line-height:1.3; letter-spacing:0; text-transform:none; text-align:left;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel::after { display:none; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel .roletext { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter {
    grid-area:meter; --meter-height:10px; box-sizing:border-box; width:100%; max-width:100%; height:10px; margin:6px 0 0; padding:0;
    border:0; background:transparent; box-shadow:none;
  }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter::before,
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter::after,
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter :is(.scale,.ticks) { display:none !important; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .meter .col { flex-direction:row; width:100%; height:100%; gap:2.5px; }   /* the fill is centre-out, so it reads the same lying flat */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .seg { border-radius:2px; }
  /* Dark theme: HH's branded ink and surface are the light theme's, so the banner names its own. */
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod {
    --seg:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  }
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .reg+.reg { border-left-color:rgba(255,255,255,.12); }
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .name,
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topbar :is(h1,.rh-brand-subtitle) { color:#f4f1ea; }
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#pod .rolelabel { color:#b9b4ac; }
  /* The middle column's foot: status line, activity pills, meeting controls. */
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#setup { grid-column:2; grid-row:2; align-self:start; justify-self:center; margin:10px 0 0; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#status { grid-column:2; grid-row:3; justify-self:center; margin:0 0 6px; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#extproc { grid-column:2; grid-row:4; justify-self:center; margin:0 0 6px; }
  html.tenant-hh[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#topctrls { grid-column:2; grid-row:5; justify-self:center; margin:0 !important; }
  /* The room canvas (room_canvas.js) fills the middle above the meeting controls, before and during a call. */
  html.tenant-hh #roomCanvas { display:none; }
  html.tenant-hh.tenant-room-canvas[data-theme] body:not(.ftue) #tenantWorkspaceShell:not(.workspace-portrait)>#stage { grid-template-rows:var(--hh-banner) minmax(0,1fr) auto auto auto 12px; }
  html.tenant-hh[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#roomCanvas {
    grid-column:2; grid-row:2; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; min-height:0; margin:10px 12px 8px; color:var(--ink);
  }
  html.tenant-hh .room-canvas-head { display:flex; align-items:center; gap:8px; min-height:30px; }
  html.tenant-hh .room-canvas-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; letter-spacing:.02em; }
  html.tenant-hh .room-canvas-head button {
    flex:none; height:28px; padding:0 11px; border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); border-radius:6px; background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--ink); font-size:12px; cursor:pointer;
  }
  html.tenant-hh .room-canvas-head button[hidden] { display:none; }
  html.tenant-hh .room-canvas-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; overflow:hidden; }
  html.tenant-hh .room-canvas-frame { position:relative; flex:none; border-radius:6px; box-shadow:0 8px 26px rgba(40,32,22,.2); }
  html.tenant-hh .room-canvas-photo { display:block; width:100%; height:100%; border-radius:6px; user-select:none; -webkit-user-drag:none; }
  html.tenant-hh #roomCanvas.receiving .room-canvas-frame { outline:2px dashed color-mix(in srgb,var(--ink) 45%,transparent); outline-offset:3px; }
  html.tenant-hh #roomCanvas.over .room-canvas-frame { outline:2px solid var(--ink); }
  /* A pin's centre is the spot the server's guide marks. */
  html.tenant-hh .room-canvas-pin {
    position:absolute; width:72px; height:72px; transform:translate(-50%,-50%); box-sizing:border-box; border:2px solid #fff; border-radius:8px; background:#fff; box-shadow:0 4px 14px rgba(30,24,16,.38); cursor:grab; touch-action:none; user-select:none;
  }
  html.tenant-hh .room-canvas-pin.moving { cursor:grabbing; box-shadow:0 8px 22px rgba(30,24,16,.5); z-index:2; }
  html.tenant-hh .room-canvas-pin>img { display:block; width:100%; height:100%; object-fit:contain; border-radius:6px; pointer-events:none; }
  html.tenant-hh .room-canvas-pin-number {
    position:absolute; left:-7px; top:-7px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#3c342b; color:#fff; font-size:11px; font-weight:600;
  }
  html.tenant-hh .room-canvas-pin-remove {
    position:absolute; right:-7px; top:-7px; display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:#fff; color:#3c342b; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer;
  }
  html.tenant-hh .room-canvas-pin-remove svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
  html.tenant-hh .room-canvas-ghost { position:fixed; left:-44px; top:-44px; z-index:9999; width:88px; height:88px; border:2px solid #fff; border-radius:8px; background:#fff; box-shadow:0 10px 28px rgba(30,24,16,.45); pointer-events:none; }
  html.tenant-hh .room-canvas-ghost img { display:block; width:100%; height:100%; object-fit:contain; border-radius:6px; }
  /* Anywhere on a product picks it up; enlarging moved to its own icon beside the check mark. */
  html.tenant-hh.tenant-room-canvas #tenantWorkspaceShell:not(.workspace-portrait) :is(.catalog-card,.mood-board-tile),
  html.tenant-hh.tenant-room-canvas #tenantWorkspaceShell:not(.workspace-portrait) :is(.catalog-card,.mood-board-tile) * { cursor:grab !important; user-select:none; -webkit-user-drag:none; }
  html.tenant-hh.tenant-room-canvas #tenantWorkspaceShell:not(.workspace-portrait) :is(.catalog-card,.mood-board-tile) :is(button,button *,input,select,a) { cursor:pointer !important; }
  html.tenant-hh.tenant-room-canvas #tenantWorkspaceShell:not(.workspace-portrait) #catalogBrowser .catalog-card-media:hover img { transform:none; filter:none; }
  html.tenant-hh.tenant-room-canvas #catalogBrowser .catalog-card-zoom {
    position:absolute; z-index:1; top:12px; right:58px; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(128,104,78,.45); border-radius:50%;
    background:rgba(250,247,242,.90); color:#66584a; box-shadow:0 2px 7px rgba(73,59,43,.10); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  }
  html.tenant-hh.tenant-room-canvas #catalogBrowser .catalog-card-zoom:hover { border-color:#6f604f; background:#fffdf9; color:#41372e; transform:scale(1.04); }
  html.tenant-hh.tenant-room-canvas :is(.catalog-card-zoom,.mood-board-zoom) svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  html.tenant-hh .room-canvas-empty {
    display:flex; flex-direction:column; align-items:center; gap:10px; max-width:380px; padding:26px 22px; border:1.5px dashed color-mix(in srgb,var(--ink) 28%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface) 55%,transparent); text-align:center; font-size:13px; line-height:1.4;
  }
  html.tenant-hh .room-canvas-empty strong { font-size:16px; font-weight:600; }
  html.tenant-hh .room-canvas-primary {
    height:36px; padding:0 18px; border:0; border-radius:6px; background:#3c342b; color:#fff; font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  }
  html.tenant-hh .room-canvas-primary[hidden] { display:none; }
  html.tenant-hh .room-canvas-primary:disabled { opacity:.45; cursor:default; }
  html.tenant-hh .room-canvas-saved { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; font-size:12px; }
  html.tenant-hh .room-canvas-saved-strip { display:flex; gap:6px; }
  html.tenant-hh .room-canvas-saved-strip button { width:58px; height:44px; padding:0; border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); border-radius:5px; overflow:hidden; background:none; cursor:pointer; }
  html.tenant-hh .room-canvas-saved-strip img { display:block; width:100%; height:100%; object-fit:cover; }
  html.tenant-hh .room-canvas-foot { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:36px; }
  html.tenant-hh .room-canvas-note { flex:1 1 auto; min-width:0; font-size:12px; line-height:1.35; }
  html.tenant-hh[data-theme="dark"] .room-canvas-primary { background:#e9e3d8; color:#2a241d; }
  html.tenant-hh[data-theme] body.live #tenantWorkspaceShell:not(.workspace-portrait)>#stage>#status { margin-bottom:26px; }   /* the floating Listening / Muted label sits above the mic, clear of the status bar */
  /* The side panes sit under the banner. */
  html.tenant-hh[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#chat.log-max { grid-column:1 !important; grid-row:2 !important; border-radius:0 0 0 8px; }
  html.tenant-hh[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait)>#board.board-max { grid-column:3 !important; grid-row:2 / -1 !important; border-radius:0 0 8px 0; }
  html.tenant-hh[data-theme] #tenantWorkspaceShell:not(.workspace-portrait)>.tenant-pane-edge-toggle { grid-row:2 / -1; }
  /* With the canvas, the left column is the Mood board over the chat log (board.js _syncMoodDock) and Browse has the right.
     Only once the board HAS docked: this sheet ships with Proxy or Apply, the code that docks it with Page, and live a sheet
     ahead of its page left an empty space above the chat and no way to reach the Mood board. */
  html.tenant-hh.tenant-room-canvas[data-theme] #tenantWorkspaceShell:not(.workspace-portrait):has(>#moodDock) { grid-template-rows:var(--hh-banner) minmax(0,2fr) minmax(0,3fr); }
  html.tenant-hh.tenant-room-canvas[data-theme] body #tenantWorkspaceShell:not(.workspace-portrait):has(>#moodDock)>#chat.log-max { grid-row:3 !important; border-radius:0 0 0 8px; }
  html.tenant-hh.tenant-room-canvas #tenantWorkspaceShell:not(.workspace-portrait):has(>#moodDock) .bmood-tab { display:none !important; }
  html.tenant-hh #tenantWorkspaceShell:not(.workspace-portrait)>#moodDock {
    grid-column:1; grid-row:2; position:relative; z-index:1; min-width:0; min-height:0; overflow:hidden;
    border-right:1px solid var(--tenant-window-border); border-bottom:1px solid var(--tenant-window-border);
    background:linear-gradient(160deg,rgba(248,244,237,.62) 0%,rgba(244,238,229,.56) 52%,rgba(232,222,210,.62) 100%);
    -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
    transition:opacity .46s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
  }
  html.tenant-hh[data-theme="dark"] #tenantWorkspaceShell:not(.workspace-portrait)>#moodDock { background:linear-gradient(160deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%); border-color:rgba(255,255,255,.12); }
  html.tenant-hh #tenantWorkspaceShell:not(.workspace-portrait).chat-pane-minimized>#moodDock { opacity:0; visibility:hidden; pointer-events:none; transform:translateX(30px) scale(.985); transition:opacity .42s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear .58s; }
  html.tenant-hh body.ftue #tenantWorkspaceShell>#moodDock { background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* Docked it is out of #board, so board.css's #board rules for its tabs and tile buttons are restated here, smaller. */
  html.tenant-hh #moodDock .mood-board { height:100%; min-height:0; overflow:auto; border:0; border-radius:0; background:transparent; }
  html.tenant-hh #moodDock .catalog-browser-bar { padding:8px 10px 6px; border-bottom:0; background:transparent; }
  html.tenant-hh #moodDock .catalog-browser-note { display:none; }
  html.tenant-hh #moodDock .catalog-browser-query { margin-top:4px; font-size:11px; }
  html.tenant-hh #moodDock .mood-board-room-bar { gap:5px; }
  html.tenant-hh #moodDock .mood-board-room-tab { width:150px; min-width:150px; max-width:150px; box-sizing:border-box; padding:5px 48px 5px 9px; overflow:hidden; border:1px solid rgba(69,122,151,.42); border-radius:5px; background:rgba(255,255,255,.62); color:#365f76; font:inherit; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
  html.tenant-hh #moodDock .mood-board-room-tab:hover { border-color:#457a97; background:#eef5f8; color:#31586d; }
  html.tenant-hh #moodDock .mood-board-room-tab.active { border-color:#457a97; background:#457a97; color:#fff; box-shadow:0 2px 7px rgba(69,122,151,.24); }
  html.tenant-hh[data-theme="dark"] #moodDock .mood-board-room-tab:not(.active) { border-color:#53636c; background:#253139; color:#dce4e8; }
  html.tenant-hh #moodDock :is(.mood-board-tab-rename,.mood-board-tab-delete) { position:absolute; top:50%; width:20px; height:20px; padding:0; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:4px; background:transparent; color:#365f76; cursor:pointer; }
  html.tenant-hh #moodDock .mood-board-room-tab-wrap.active :is(.mood-board-tab-rename,.mood-board-tab-delete) { color:#fff; }
  html.tenant-hh #moodDock .mood-board-tab-rename { right:25px; }
  html.tenant-hh #moodDock .mood-board-tab-delete { right:4px; }
  html.tenant-hh #moodDock :is(.mood-board-tab-rename,.mood-board-tab-delete) svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  html.tenant-hh #moodDock .mood-board-tab-delete:disabled { opacity:.35; pointer-events:none; }
  html.tenant-hh #moodDock .mood-board-manage { padding:5px 7px; border:0; border-radius:7px; background:transparent; color:var(--muted); font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
  html.tenant-hh #moodDock .mood-board-manage:hover { background:rgba(255,255,255,.5); color:#c54f00; }
  html.tenant-hh #moodDock .mood-board-grid { gap:8px; min-height:0; padding:2px 10px 10px; }
  html.tenant-hh #moodDock .mood-board-palette { justify-content:flex-start; flex-wrap:nowrap; gap:5px; padding:0; overflow-x:auto; border:0; background:transparent; scrollbar-width:none; }
  html.tenant-hh #moodDock .mood-board-palette>span { display:none; }
  html.tenant-hh #moodDock .mood-board-add { flex:none; padding:4px 9px; border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); border-radius:999px; background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--ink); font:inherit; font-size:10.5px; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; }
  html.tenant-hh #moodDock .mood-board-add:hover { background:var(--surface); }
  html.tenant-hh #moodDock .mood-board-collage { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  html.tenant-hh #moodDock .mood-board-tile { grid-column:auto; border-radius:8px; }
  html.tenant-hh #moodDock .mood-board-tile:hover { transform:none; }
  html.tenant-hh #moodDock .mood-board-tile .mood-board-media { aspect-ratio:1; }
  html.tenant-hh #moodDock .mood-board-media img { padding:4px; }
  html.tenant-hh #moodDock :is(.mood-board-category) { display:none; }
  html.tenant-hh #moodDock .mood-board-badge { top:4px; left:4px; padding:3px 5px; font-size:8px; }
  html.tenant-hh #moodDock .mood-board-body { gap:2px; padding:5px 6px 6px; }
  html.tenant-hh #moodDock .mood-board-title { font-size:10.5px; line-height:1.25; }
  html.tenant-hh #moodDock .mood-board-body .catalog-card-facts { display:none; }
  html.tenant-hh #moodDock .mood-board-actions { gap:3px; margin-top:3px; }
  html.tenant-hh #moodDock .mood-board-actions button { padding:3px 5px; font-size:10px; }
  html.tenant-hh #moodDock .mood-board-empty-hero { min-height:84px; padding:10px; font-size:12px; }
  html.tenant-hh #moodDock .mood-board-empty-hero strong { font-size:14px; }
  html.tenant-hh #moodDock :is(.mood-board-remove,.mood-board-zoom) { position:absolute; z-index:2; top:4px; display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:rgba(255,253,248,.94); color:#5e544a; box-shadow:0 1px 4px rgba(44,35,24,.22); cursor:pointer; }
  html.tenant-hh #moodDock .mood-board-remove { right:4px; }
  html.tenant-hh #moodDock .mood-board-zoom { right:29px; }
  html.tenant-hh #moodDock .mood-board-remove svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
  html.tenant-hh #moodDock .mood-board-zoom svg { width:13px; height:13px; }
  html.tenant-hh #moodDock .mood-board-remove:hover { background:#fff; color:#b42318; }
  html.tenant-hh #moodDock .mood-board-zoom:hover { background:#fff; color:#41372e; }
  html.tenant-hh #moodDock .mood-board-move { position:absolute; z-index:2; left:4px; bottom:4px; padding:3px 6px; border:0; border-radius:999px; background:rgba(255,253,248,.94); color:#5e544a; box-shadow:0 1px 4px rgba(44,35,24,.22); font-size:9px; font-weight:750; line-height:1; cursor:pointer; opacity:0; pointer-events:none; }
  html.tenant-hh #moodDock .mood-board-tile:hover .mood-board-move { opacity:1; pointer-events:auto; }
  @media (hover:none) { html.tenant-hh #moodDock .mood-board-move { opacity:1; pointer-events:auto; } }
}