/* MeldHQ shared presentation system.
 * All application entrypoints load this last. Component styles consume these
 * semantic colors, so dark and light modes share one layout and one identity.
 * Status colors and third-party marks are deliberately NOT brand accents.
 */
@font-face{font-family:'DM Sans';src:url('/static/fonts/dm-sans-latin.woff2') format('woff2');font-style:normal;font-weight:100 1000;font-display:swap}
:root,html[data-theme=dark]{
  color-scheme:dark;
  --color-bg:#0b1211;
  --color-nav:#0d1713;
  --color-surface:#111c18;
  --color-raised:#1a2922;
  --color-hover:#23392c;
  --color-text:#eef1e9;
  --color-muted:#a2b0a7;
  --color-subtle:#82998b;
  --color-line:#30463a;
  --color-control-line:#708b78;
  --color-accent:#c5f5d5;
  --color-accent-hover:#d9fbe3;
  --color-accent-soft:#213f2e;
  --color-accent-line:#7cae8c;
  --color-on-accent:#0b2114;
  --color-success:#9bdfb4;
  --color-success-soft:#1c3426;--color-success-line:#5d9970;
  --color-warning:#e8bf81;
  --color-warning-soft:#32291b;
  --color-warning-line:#816a42;
  --color-danger:#f1a6a0;
  --color-danger-soft:#351f20;
  --color-danger-line:#93605a;
  --color-info:#a4c9ea;
  --color-info-soft:#1b2b38;--color-info-line:#658bb1;
  --color-selection:#365d44;
  --elevation:0 16px 50px rgb(0 0 0 / .28);
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html[data-theme=light]{
  color-scheme:light;
  --color-bg:#f2f7f1;
  --color-nav:#eaf2e8;
  --color-surface:#fcfefa;
  --color-raised:#e6f0e4;
  --color-hover:#d8e8d7;
  --color-text:#193525;
  --color-muted:#4c6755;
  --color-subtle:#5e7366;
  --color-line:#c2d3c4;
  --color-control-line:#738c77;
  --color-accent:#235d38;
  --color-accent-hover:#19482a;
  --color-accent-soft:#dfeddb;
  --color-accent-line:#6a9574;
  --color-on-accent:#fff;
  --color-success:#216638;
  --color-success-soft:#e0f2e4;--color-success-line:#78a681;
  --color-warning:#825115;
  --color-warning-soft:#fbefd9;
  --color-warning-line:#b68d51;
  --color-danger:#a3302b;
  --color-danger-soft:#fce9e6;
  --color-danger-line:#bd7871;
  --color-info:#245d88;
  --color-info-soft:#e7f1fa;--color-info-line:#759bb7;
  --color-selection:#c5dfc4;
  --elevation:0 16px 50px rgb(24 53 37 / .12);
}
/* Compatibility aliases retain all existing component and demo contracts. */
:root,html[data-theme]{
  --bg:var(--color-bg);--paper:var(--color-bg);--surface:var(--color-surface);
  --raised:var(--color-raised);--soft:var(--color-raised);--ink:var(--color-text);
  --text:var(--color-text);--muted:var(--color-muted);--line:var(--color-line);
  --green:var(--color-accent);--accent:var(--color-accent);--amber:var(--color-warning);--red:var(--color-danger);
  --meld-accent:var(--color-accent);--meld-bg:var(--color-bg);--meld-panel:var(--color-surface);
  --meld-line:var(--color-line);--meld-muted:var(--color-muted);
  --pig-text:var(--color-text);--pig-secondary:var(--color-muted);--pig-line:var(--color-line);--pig-accent:var(--color-accent);
  font-family:var(--font-sans);font-synthesis:none;background:var(--color-bg);color:var(--color-text);
}
html body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}
html body,html body :is(button,input,textarea,select){font-family:var(--font-sans)}
html body :is(h1,h2,h3,h4){color:var(--color-text)}
html body :is(button,input,textarea,select){border-radius:8px}
html body :is(input,textarea,select){background:var(--color-bg);color:var(--color-text);border-color:var(--color-control-line);accent-color:var(--color-accent)}
html body :is(input,textarea)::placeholder{color:var(--color-subtle);opacity:1}
html body button{color:var(--color-text);border-color:var(--color-control-line)}
html body button:hover:not(:disabled){background-color:var(--color-hover);border-color:var(--color-accent-line)}
html body .primary,html body[data-view=incidents] .primary,html body button.primary{
  background:var(--color-accent)!important;color:var(--color-on-accent)!important;
  border-color:var(--color-accent)!important;font-weight:650;box-shadow:0 1px 0 rgb(255 255 255 / .06) inset;
}
html body .primary:hover:not(:disabled),html body[data-view=incidents] .primary:hover:not(:disabled){background:var(--color-accent-hover)!important;border-color:var(--color-accent-hover)!important}
html body :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:4px!important}
html body :is(input,textarea,select):focus{border-color:var(--color-accent-line)}
html body :is(button,input,textarea,select):disabled{cursor:not-allowed}
html body ::selection{background:var(--color-selection);color:var(--color-text)}
html body :is(dialog,.access-dialog){background:var(--color-surface);color:var(--color-text);border-color:var(--color-line);box-shadow:var(--elevation);border-radius:14px}
html body dialog::backdrop{background:rgb(3 12 7 / .72);backdrop-filter:blur(5px)}
html body :is(.sidebar,body[data-view=incidents]>.sidebar){background:var(--color-nav)!important;border-color:var(--color-line)!important}
html body .sidebar nav button{background:transparent;border-color:transparent;color:var(--color-muted)}
html body .sidebar nav :is(button.selected,button.active),html body[data-view=incidents]>.sidebar nav :is(button.selected,button.active){background:var(--color-accent-soft)!important;color:var(--color-accent)!important;border-color:transparent!important}
html body .sidebar nav :is(button,a):hover{background:var(--color-raised);color:var(--color-text)}
html body .sidebar :is(.workspace-label,.sidebar-foot){color:var(--color-muted)}
html body .sidebar nav :is(button.selected,button.active)>span{color:var(--color-accent)}
html body :is(.room-tabs button[aria-selected=true],.room-filter.active,.segmented button.active){color:var(--color-accent);border-bottom-color:var(--color-accent-line)}
html body :is(.team-service-node,.team-source-card,.team-detail,.connection-card,.notebook-row,.alert-episode,.alert-settings,.info-panel,.pm-card,.panel){border-color:var(--color-line)}
html body .team-graph{background-color:var(--color-bg);background-image:radial-gradient(var(--color-line) 1px,transparent 1px);background-size:24px 24px}
html body .team-service-node.active{background:var(--color-accent-soft)!important;border-color:var(--color-accent-line)!important}
html body .team-edge-layer path.in-focus{stroke:var(--color-accent-line)!important;opacity:.9}
html body .team-edge-layer path.out-of-focus{stroke:var(--color-line)!important;opacity:.7}
html body .welcome-card{background:linear-gradient(120deg,var(--color-surface),var(--color-accent-soft));border-color:var(--color-line)}
html body :is(.form-error,.terminal-error,.pm-ai-error){color:var(--color-danger)}
html body :is(.badge.published,.source-check,.connected-dot,.good){color:var(--color-success)}
html body :is(.warn,.source-check.limited,.warning-banner){color:var(--color-warning)}
html body :is(.bad,.error){color:var(--color-danger)}
/* Status is independent of the primary mint action color. */
html body .investigation-status:is(.checking,.deploying){color:var(--color-info)}
html body .investigation-status:is(.review,.paused){color:var(--color-warning)}
html body .investigation-status:is(.checking,.deploying,.review,.paused) i{background:currentColor}
html body .team-discovery-step.complete::before{background:var(--color-success-soft);border-color:var(--color-success-line);color:var(--color-success)}
/* Theme controls and monochrome interface icons. Brand artwork is excluded. */
.theme-toggle{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 18px;padding:9px 10px;font-size:13px;background:transparent;color:var(--color-text);border:1px solid var(--color-line);text-align:left}
.theme-toggle img,.sidebar nav button>span>img{display:block;width:18px;height:18px;flex:none}
.sidebar nav button>span:has(img){display:inline-flex;vertical-align:middle;margin-right:8px}
html:not([data-theme=light]) :is(.theme-toggle img,.sidebar nav button>span>img,.team-service-icon img,.component-icon img){filter:invert(1);opacity:.9}
html[data-theme=light] :is(.theme-toggle img,.sidebar nav button>span>img,.team-service-icon img,.component-icon img,#open-room-terminal>img){filter:none;opacity:1}
body>header>.theme-toggle{width:auto;margin:0 0 0 auto;flex:none}
html body img[src*='/brands/'],html body img[src*='/demo/icons/']{filter:none!important}
html body .codex-brand-icon{background-color:var(--color-text)!important}
html body .claude-brand-icon{background-color:#D97757!important}
/* Keep ANSI syntax colors independent from brand, with a matching dark shell.
   A terminal stays dark in light mode to preserve its conventional color map. */
html[data-theme] body #output-panel{
  color-scheme:dark;--color-bg:#0b1211;--color-surface:#111c18;--color-raised:#1a2922;--color-hover:#23392c;
  --color-text:#eef1e9;--color-muted:#a2b0a7;--color-line:#30463a;--color-control-line:#708b78;--color-accent:#c5f5d5;--color-accent-soft:#213f2e;
  --color-accent-line:#7cae8c;--color-on-accent:#0b2114;--color-danger:#f1a6a0;
  --ink:#eef1e9;--muted:#a2b0a7;--line:#30463a;--bg:#0b1211;--pig-text:#eef1e9;--pig-secondary:#a2b0a7;
  background:var(--color-bg);color:var(--color-text);
}
html body #output-panel :is(pre,code,input,textarea){background:var(--color-bg);color:var(--color-text)}
html body #output-panel .meld-avatar img{filter:brightness(0) invert(1)!important}
/* Equal-sized source marks and wrapping titles keep alert cards contained. */
html body .alert-episode-head{align-items:center;min-width:0}
html body .alert-episode-head strong{flex:1;min-width:0;overflow-wrap:anywhere}
html body .alert-episode-head .alert-provider-mark{width:28px;height:28px;flex:0 0 28px;margin:0}
html body .alert-episode-head .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){
  html body .alert-episode-head{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 12px}
  html body .alert-episode-head .badge{grid-column:2;justify-self:start}
}
/* Mobile rooms retain the whole title and a usable conversation viewport.
   The existing case-file control opens the full current/next context. */
@media(max-width:700px){
  /* Notebook focus mode must not remove navigation or the theme preference. */
  html body:has(#notebook:not([hidden]) #editor-screen:not([hidden]))>.sidebar{display:flex!important}
  html body:has(#notebook:not([hidden]) #editor-screen:not([hidden]))>.sidebar nav{margin-top:12px}
  html body[data-view=incidents]{display:flex;flex-direction:column}
  html body[data-view=incidents]>.sidebar{flex:none;height:64px!important;min-height:64px;padding:10px 12px!important;gap:12px}
  html body[data-view=incidents]>.sidebar .brand{width:88px;min-width:88px;flex:none}
  html body[data-view=incidents]>.sidebar .brand-wordmark{width:88px!important}
  html body[data-view=incidents]>.sidebar nav{flex:1;min-width:0;overflow:auto;flex-wrap:nowrap;margin:0 42px 0 0!important}
  html body[data-view=incidents] main{height:auto!important;flex:1;min-height:0}
  html body[data-view=incidents] .incident-topbar{padding:10px 16px 8px!important;gap:8px;align-items:center}
  html body[data-view=incidents] .incident-title-wrap{order:-1;flex:0 0 100%;width:100%}
  html body[data-view=incidents] #incident-heading{white-space:normal;overflow-wrap:anywhere;margin:0 0 4px;font-size:18px!important;line-height:1.3!important}
  html body[data-view=incidents] #incident-meta{font-size:12px!important}
  html body[data-view=incidents] .incident-topbar>button{min-height:34px;padding:5px 9px!important;flex:none}
  html body[data-view=incidents] #room-people-toggle{margin-left:auto}
  html body[data-view=incidents] #incident-actions{padding:0 16px 8px!important;gap:8px;flex-wrap:wrap}
  html body[data-view=incidents] .investigation-status{width:auto;margin:0 auto 0 0;font-size:12px!important}
  html body[data-view=incidents] .incident-brief{padding:8px 16px!important;gap:4px 12px;grid-template-columns:minmax(0,1fr) auto}
  html body[data-view=incidents] .incident-brief>div{gap:0}
  html body[data-view=incidents] .incident-brief small{font-size:9px!important}
  html body[data-view=incidents] .incident-brief strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px!important;line-height:1.45!important;max-height:none}
  html body[data-view=incidents] .room-tabs{min-height:44px;padding:0 16px!important;gap:16px}
  html body[data-view=incidents] .room-tabs button{font-size:13px!important;padding:10px 0}
  html body[data-view=incidents] .room-signal-strip{min-height:44px;padding:5px 16px}
  html body[data-view=incidents] .room-people{flex-wrap:nowrap;overflow:auto}
  html body[data-view=incidents] .room-person-chip{white-space:nowrap;min-height:32px;padding:4px 8px;font-size:12px}
  html body[data-view=incidents] :is(#incident-chat,#my-chat,#activity-panel){padding:16px!important}
  html body[data-view=incidents] #investigation-composer{padding:6px 12px 10px!important}
  html body[data-view=incidents] :is(#message-form,#my-message-form){padding:6px 8px!important}
  html body[data-view=incidents] :is(#message-form,#my-message-form) textarea{padding:8px!important;min-height:56px!important;line-height:1.4!important}
  html body[data-view=incidents] .message-composer-footer{padding:4px 8px}
  html body[data-view=incidents] #steering-status{padding:4px 8px;font-size:10px}
  html body[data-view=incidents] #steering-status:empty{display:none}
  /* Keep theme choice reachable while account details are compacted. */
  html body .sidebar .sidebar-foot,html body[data-view=incidents]>.sidebar .sidebar-foot{display:block!important;position:absolute;top:14px;right:12px;width:36px;height:36px;margin:0;padding:0!important;border:0;font-size:0!important;line-height:0!important}
  html body .sidebar .sidebar-foot>:not(.theme-toggle){display:none!important}
  html body .sidebar .sidebar-foot .theme-toggle{position:static;width:36px;height:36px;padding:8px;margin:0;min-height:36px}
}
@media(max-width:700px){.sidebar .theme-toggle{position:absolute;right:18px;top:14px;width:auto;margin:0}.theme-toggle span{display:none}.theme-toggle{min-width:36px;min-height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html body *,html body *::before,html body *::after{transition-duration:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(forced-colors:active){html body .primary{forced-color-adjust:auto}html body :is(button,a,input,select,textarea):focus-visible{outline:2px solid Highlight}html body .sidebar nav button.selected{outline:1px solid Highlight}}
