/* Shared theme chrome. Page artwork and canvas content keep their own colors. */
html[data-mi-theme="light"] { color-scheme:light; }
html[data-mi-theme="dark"] { color-scheme:dark; }
body.mi-themed:not(.story-home) .theme-switch {
  display:inline-flex; align-items:center; gap:2px; padding:3px; flex:none;
  border:1px solid #ffffff24; border-radius:999px; background:#ffffff05; color:#aaa;
}
body.mi-themed:not(.story-home) .theme-switch .theme-choice {
  display:grid; place-items:center; width:30px; height:30px; min-width:0; min-height:0;
  padding:0; margin:0; border:0; border-radius:50%; background:transparent; color:#aaa;
  box-shadow:none; cursor:pointer; flex:none; line-height:1;
}
body.mi-themed:not(.story-home) .theme-choice svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
body.mi-themed:not(.story-home) .theme-switch .theme-choice:hover { background:#ffffff12; color:#fff; }
body.mi-themed:not(.story-home) .theme-switch .theme-choice[aria-pressed="true"] { background:#eee; color:#151515; }
body.mi-themed:not(.story-home) .theme-switch .theme-choice:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
html[data-mi-theme="light"] body.mi-themed:not(.story-home) .theme-switch { background:#ededeb; border-color:#d2d2d2; }
html[data-mi-theme="light"] body.mi-themed:not(.story-home) .theme-switch .theme-choice { color:#656565; }
html[data-mi-theme="light"] body.mi-themed:not(.story-home) .theme-switch .theme-choice:hover { background:#0000000a; color:#171717; }
html[data-mi-theme="light"] body.mi-themed:not(.story-home) .theme-switch .theme-choice[aria-pressed="true"] { background:#242424; color:#fff; }
html[data-mi-theme="light"] .wm-shell { background:#fafafa; color:#202020; border-bottom-color:#00000012; }
html[data-mi-theme="light"] .wm-shell :is(a,button):focus-visible { outline-color:#333; }
html[data-mi-theme="light"] .wm-shell :is(a,button):hover,
html[data-mi-theme="light"] .wm-shell [aria-current="page"] { color:#111; }
html[data-mi-theme="light"] .wm-shell :is(.wm-nav,.wm-billing,.wm-profile,.wm-language-toggle) { color:#626262; }
html[data-mi-theme="light"] .wm-shell .wm-projects { background:#fff; border-color:#d5d5d5; color:#202020; }
html[data-mi-theme="light"] .wm-shell .wm-projects:hover { background:#eee; border-color:#aaa; }
html[data-mi-theme="light"] .wm-shell .wm-avatar { background:#eee; color:#444; border-color:#d6d6d6; }
html[data-mi-theme="light"] .wm-shell .wm-language-menu { background:#fff; border-color:#ddd; box-shadow:0 16px 40px #00000016; }
html[data-mi-theme="light"] .wm-shell .wm-language-menu button { color:#555; }
html[data-mi-theme="light"] .wm-shell .wm-language-menu button:is(:hover,[aria-checked="true"]) { background:#eee; color:#171717; }
html[data-mi-theme="light"] .wm-shell .wm-mobile-menu span { background:#444; }
/* Only the monochrome brand mark is recolored; photographs and software logos are untouched. */
html[data-mi-theme="light"] body:not(.story-home) :is(.wm-brand-symbol,.canvas-home-link,.brand-intro-symbol) > .loomeld-mark { filter:brightness(0); }
html[data-mi-theme="light"] body:not(.story-home) .brand-intro { background:#fafafa; color:#202020; }
html[data-mi-theme="light"] body:not(.story-home) .brand-intro .loomeld-mark { filter:brightness(0); }
.reading-theme-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
body.canvas-fullscreen .canvas-collab-pod > .theme-switch { align-self:center; margin-inline:2px; }
body.mi-themed.wemeld-workspace .theme-switch .theme-choice { width:var(--chrome-button,34px); height:var(--chrome-button,34px); }
body.canvas-fullscreen #canvas-settings-menu .theme-switch { width:max-content; margin:6px 8px; }
body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice { background:transparent; color:#aaa; }
body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice:hover { background:#ffffff12; color:#fff; }
body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice[aria-pressed="true"] { background:#eee; color:#151515; }
html[data-mi-theme="light"] body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice { background:transparent; color:#656565; }
html[data-mi-theme="light"] body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice:hover { background:#0000000a; color:#171717; }
html[data-mi-theme="light"] body.mi-themed.wemeld-workspace.canvas-fullscreen #canvas-settings-menu .theme-switch .theme-choice[aria-pressed="true"] { background:#242424; color:#fff; }
@media(min-width:1600px) {
  body.mi-themed:not(.story-home):not(.wemeld-workspace) .theme-switch .theme-choice { width:clamp(36px,1.3vw,50px); height:clamp(36px,1.3vw,50px); }
  body.mi-themed:not(.story-home):not(.wemeld-workspace) .theme-choice svg { width:clamp(20px,.7vw,27px); height:clamp(20px,.7vw,27px); }
}
@media(max-width:1100px) and (min-width:761px) {
  body.mi-themed:not(.wemeld-workspace) .wm-shell { gap:20px; }
  body.mi-themed:not(.wemeld-workspace) .wm-shell .wm-nav { gap:16px; }
  body.mi-themed:not(.wemeld-workspace) .wm-shell .wm-actions { gap:12px; }
}
@media(max-width:760px) {
  body.mi-themed:not(.wemeld-workspace) .wm-shell .wm-projects { display:none; }
  body.mi-themed:not(.wemeld-workspace) .wm-shell .wm-actions { gap:9px; }
  body.mi-themed:not(.story-home) .theme-switch .theme-choice { width:32px; height:32px; }
  html[data-mi-theme="light"] .wm-shell .wm-nav { background:#fff; border-color:#ddd; box-shadow:0 16px 40px #00000016; }
  body.mi-themed .auth-header-actions { gap:10px; }
  body.mi-themed .auth-home { display:none; }
  body.mi-themed .legal-header { gap:12px; flex-wrap:wrap; }
  body.mi-themed .legal-header > div { gap:12px; }
}
@media(max-width:600px) {
  /* Keep the always-visible canvas toolbar within a phone width; settings retain the second control. */
  body.canvas-fullscreen .canvas-collab-pod > .theme-switch { padding:2px; gap:0; }
  body.canvas-fullscreen .canvas-collab-pod > .theme-switch .theme-choice { width:28px; height:28px; }
}
