/* Neurodesk's hosted-app theme, matched to the Neurocontainers Builder dark
   palette. The shared adapter is loaded after each app's own styles. */
/* Inter, Latin subset, from @fontsource-variable/inter 5.2.5 (OFL, fonts/OFL.txt). */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root[data-neurodesk-app] {
  color-scheme: dark;

  /* Neutral greys; green (the logo's #6ba442) marks action, focus and selection only. */
  --nd-brand-page: #0d0e0d;
  --nd-brand-primary: #6ba442;
  --nd-brand-menu: #121312;
  --nd-brand-selection: #1b2615;
  --nd-brand-accent-background: #131a0f;
  --nd-brand-selected: #4d7a2f;
  --nd-brand-hover: #8cc063;
  --nd-brand-primary-hover: #7db356;
  --nd-brand-light: #b5d89a;
  --nd-brand-unselected: #1c1d1c;
  --nd-brand-pale: #0d0e0d;
  --nd-brand-surface: #141514;
  --nd-brand-text: #ededed;
  --nd-brand-text-muted: #a3a6a3;
  --nd-brand-text-dim: #858885;
  --nd-brand-action-text: #0b0c0b;
  --nd-brand-menu-text: #ededed;
  --nd-brand-border: #262826;
  --nd-brand-border-strong: #353835;
  --nd-brand-console-surface: #0d0e0d;
  --nd-brand-console-header: #141514;
  --nd-brand-console-text: #c9cbc9;
  --nd-brand-console-time: #858885;
  --nd-brand-success: #5fb37a;
  --nd-brand-focus: #6ba442;
  --nd-color-on-primary: var(--nd-brand-action-text);
  --nd-font-ui: "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nd-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Shared imaging-workspace tokens. */
  --nd-color-bg: var(--nd-brand-pale);
  --nd-color-surface: var(--nd-brand-surface);
  --nd-color-surface-elevated: var(--nd-brand-unselected);
  --nd-color-border: var(--nd-brand-border);
  --nd-color-border-light: var(--nd-brand-border-strong);
  --nd-color-text: var(--nd-brand-text);
  --nd-color-text-muted: var(--nd-brand-text-muted);
  --nd-color-text-dim: var(--nd-brand-text-dim);
  --nd-color-primary: var(--nd-brand-primary);
  --nd-color-primary-hover: var(--nd-brand-primary-hover);
  --nd-color-primary-glow: rgb(107 164 66 / 16%);
  --nd-color-success: var(--nd-brand-success);
  --nd-color-accent: var(--nd-brand-selected);

  /* Compact single-page app tokens. */
  --bg: var(--nd-brand-pale);
  --bg2: var(--nd-brand-pale);
  --panel: var(--nd-brand-surface);
  --panel2: var(--nd-brand-unselected);
  --line: var(--nd-brand-border);
  --border: var(--nd-brand-border);
  --ink: var(--nd-brand-text);
  --text: var(--nd-brand-text);
  --dim: var(--nd-brand-text-muted);
  --accent: var(--nd-brand-primary);
  --accent2: var(--nd-brand-selected);
  --good: var(--nd-brand-success);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"] {
  color-scheme: light;
  /* The logo green is 3:1 on white; #467d25 keeps white text at 5:1. */
  --nd-brand-page: #fafafa;
  --nd-brand-primary: #467d25;
  --nd-brand-menu: #ffffff;
  --nd-brand-selection: #edf5e7;
  --nd-brand-accent-background: #f3f8ef;
  --nd-brand-selected: #467d25;
  --nd-brand-hover: #3b6c1e;
  --nd-brand-primary-hover: #3b6c1e;
  --nd-brand-light: #3b6c1e;
  --nd-brand-unselected: #f4f4f5;
  --nd-brand-pale: #fafafa;
  --nd-brand-surface: #ffffff;
  --nd-brand-text: #171817;
  --nd-brand-text-muted: #5a5d5a;
  --nd-brand-text-dim: #6b6e6b;
  --nd-brand-action-text: #ffffff;
  --nd-brand-menu-text: #171817;
  --nd-brand-border: #e5e6e5;
  --nd-brand-border-strong: #d2d4d2;
  --nd-brand-console-surface: #ffffff;
  --nd-brand-console-header: #fafafa;
  --nd-brand-console-text: #171817;
  --nd-brand-console-time: #6b6e6b;
  --nd-brand-success: #217738;
  --nd-brand-focus: #467d25;
  --nd-color-primary-glow: rgb(70 125 37 / 12%);
}

/* Dicompare's Tailwind theme consumes raw RGB triplets. */
:root[data-neurodesk-shell="react"] {
  color-scheme: dark;
  --color-surface: 13 14 13;
  --color-surface-primary: 20 21 20;
  --color-surface-secondary: 28 29 28;
  --color-surface-hover: 38 40 38;
  --color-surface-alt: 18 19 18;
  --color-text-primary: 237 237 237;
  --color-text-secondary: 163 166 163;
  --color-text-tertiary: 181 216 154;
  --color-text-muted: 133 136 133;
  --color-text-inverted: 11 12 11;
  --color-border: 38 40 38;
  --color-border-secondary: 53 56 53;
  --color-brand-50: 19 26 15;
  --color-brand-100: 27 38 21;
  --color-brand-500: 107 164 66;
  --color-brand-600: 77 122 47;
  --color-brand-700: 47 74 29;
}

:root[data-neurodesk-shell="react"][data-neurodesk-theme="light"] {
  color-scheme: light;
  --color-surface: 250 250 250;
  --color-surface-primary: 255 255 255;
  --color-surface-secondary: 244 244 245;
  --color-surface-hover: 237 245 231;
  --color-surface-alt: 250 250 250;
  --color-text-primary: 23 24 23;
  --color-text-secondary: 90 93 90;
  --color-text-tertiary: 90 93 90;
  --color-text-muted: 107 110 107;
  --color-text-inverted: 255 255 255;
  --color-border: 229 230 229;
  --color-border-secondary: 210 212 210;
  --color-brand-50: 243 248 239;
  --color-brand-100: 237 245 231;
  --color-brand-500: 70 125 37;
  --color-brand-600: 59 108 30;
  --color-brand-700: 47 87 24;
}

/* Older non-React apps use light-palette role names for surfaces and text.
   Bridge those roles for every hosted shell that still consumes them. */
:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) {
  --nd-brand-white: var(--nd-brand-surface);
  --nd-ink-muted: var(--nd-brand-text-muted);
  --nd-line-neutral: var(--nd-brand-border);
}

:root[data-neurodesk-app],
[data-neurodesk-app] body {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
}

[data-neurodesk-app] :is(input:not([type="range"]), select, textarea) {
  color: var(--nd-brand-text);
  background-color: var(--nd-brand-page);
  border-color: var(--nd-brand-border);
}

[data-neurodesk-app] :is(input, textarea)::placeholder {
  color: var(--nd-brand-text-dim);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-page, .nd-imaging-workspace, #controls, .workflow-panel, #status, .cite-dialog) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-kicker, .start-how > h3, .panel-step, .workflow-help summary, .readout) {
  color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-hero h2, .start-step h4, .panel-heading h2, .row, .check, .instruction-note, .hint strong, .layer-list li, .point-list) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .start-intro {
  color: var(--nd-brand-text-muted);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-local-badge, .start-local-panel) {
  color: var(--nd-brand-text-muted);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.workflow-help, .layer-list li, .start-footer) {
  color: var(--nd-brand-text-muted);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  :is(select, input[type="text"], input[type="number"]) {
  color: var(--nd-brand-text);
  background-color: var(--nd-brand-page);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls:not(.nd-imaging-controls) button {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  :is(button, select, input):disabled {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  input:disabled:not([type="checkbox"]):not([type="range"]):not([type="file"]) {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls button.primary {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls .segmented button.active {
  color: var(--nd-brand-menu-text);
  background: var(--nd-brand-selected);
  border-color: var(--nd-brand-selected);
}

/* SurfAnnotate's file input is visually represented by its adjacent label.
   Theme the visible control itself, including the disabled overlay state. */
:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-visual {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-visual > svg {
  color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-action {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual :is(svg, small) {
  color: var(--nd-brand-text-dim);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual .upload-action {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-pale);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.drop-hint strong, .start-step-number) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-footer a, .cite-section h4, .cite-item a, .cite-close) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .cite-close:hover {
  color: var(--nd-brand-action-text);
}

[data-neurodesk-app] body,
[data-neurodesk-app] button,
[data-neurodesk-app] input,
[data-neurodesk-app] select,
[data-neurodesk-app] textarea {
  font-family: var(--nd-font-ui);
  font-stretch: normal;
}

[data-neurodesk-app] code,
[data-neurodesk-app] pre,
[data-neurodesk-app] :is(.console-output, .nd-console-output) {
  font-family: var(--nd-font-mono);
}

[data-neurodesk-app] :is(input, select, textarea) {
  accent-color: var(--nd-brand-primary);
}

/* Local token overrides keep all header copy and icons readable without
   changing the apps' existing markup. */
[data-neurodesk-app] :is(.app-header, .start-header, .nd-imaging-app-header) {
  --nd-color-text: var(--nd-brand-menu-text);
  --nd-color-text-muted: var(--nd-brand-text-muted);
  --nd-color-text-dim: var(--nd-brand-text-dim);
  color: var(--nd-brand-menu-text);
  background: var(--nd-brand-menu);
  border-color: var(--nd-brand-border);
}

[data-neurodesk-app] :is(.header-link, .nd-header-link) {
  color: var(--nd-brand-menu-text);
}

/* Bright green is an action fill; lighter green remains readable as dark-theme
   link text. */
:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.modal-body a, .modal-body h4) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.about-highlight, .privacy-highlight) {
  background: var(--nd-brand-pale);
}

:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.about-highlight strong, .privacy-highlight strong) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"]:not([data-neurodesk-shell="react"])
  :is(.modal-body a, .modal-body h4, .about-highlight strong, .privacy-highlight strong) {
  color: var(--nd-brand-selected);
}

/* Primary actions use vivid green with near-black text. */
[data-neurodesk-app] :is(.btn-primary, .nd-btn-primary) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

[data-neurodesk-app] :is(#applyBtn, #processButton) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

[data-neurodesk-app] :is(.view-tab.active, .modebtn.active, .volume-toggle .view-btn.active) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

/* Existing app styles dim disabled controls with opacity, compounding muted
   text over similar olive surfaces. Preserve readable foregrounds instead. */
[data-neurodesk-app] :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  opacity: 1;
  color: var(--nd-brand-text);
  background-color: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

[data-neurodesk-app] :is(#applyBtn:disabled, #processButton:disabled) {
  color: var(--nd-brand-text);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

/* Consoles remain subordinate to the viewer with the deepest surface and a
   thin green divider. */
[data-neurodesk-app] :is(.console-container, .nd-console-container) {
  --nd-color-surface: var(--nd-brand-console-surface);
  --nd-color-border: var(--nd-brand-border);
  --nd-color-text: var(--nd-brand-console-text);
  --nd-color-text-muted: var(--nd-brand-console-text);
  --nd-color-text-dim: var(--nd-brand-console-time);
  --nd-color-error: #ff8a80;
  --nd-color-warning: #f0c777;
  color: var(--nd-brand-console-text);
  background: var(--nd-brand-console-surface);
  border-top: 1px solid var(--nd-brand-border);
}

[data-neurodesk-app] :is(.console-header, .nd-console-header) {
  background: var(--nd-brand-console-header);
  border-bottom-color: var(--nd-brand-border);
}

[data-neurodesk-app] :is(.console-output, .nd-console-output) {
  color: var(--nd-brand-console-text);
  background: var(--nd-brand-console-surface);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"]
  :is(.console-container, .nd-console-container) {
  --nd-color-error: #b42318;
  --nd-color-warning: #7a4b00;
}

[data-neurodesk-app] .nd-imaging-mark {
  color: var(--nd-brand-action-text);
}

[data-neurodesk-app] :focus-visible {
  outline: 3px solid var(--nd-brand-focus);
  outline-offset: 2px;
}

[data-neurodesk-app] ::selection {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
}

/* One application identity and navigation contract across every hosted app.
   App-owned header controls stay mounted (and can still be invoked by the
   shared About/Cite/Privacy buttons), but the visible chrome is consistent. */
[data-neurodesk-top-bar-host] {
  display: block !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--nd-brand-menu-text) !important;
  background: var(--nd-brand-menu) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nd-brand-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-neurodesk-top-bar-host]:has(> .nd-app-bar) > :not(.nd-app-bar) {
  display: none !important;
}

[data-neurodesk-app]:has(.nd-app-bar) [data-neurodesk-control],
[data-neurodesk-shell-link][hidden] {
  display: none !important;
}

.nd-app-bar {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: var(--nd-font-ui) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--nd-brand-menu-text) !important;
  background: var(--nd-brand-menu) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nd-app-bar--standalone {
  border-bottom: 1px solid var(--nd-brand-border) !important;
}

.nd-app-bar__identity,
.nd-app-bar__navigation {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.nd-app-bar__identity {
  gap: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.nd-app-bar__title,
.nd-app-bar__description,
.nd-app-bar__version {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.nd-app-bar__title {
  flex: 0 0 auto !important;
  color: var(--nd-brand-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.nd-app-bar__description {
  /* The description gives way first, so the title and version never clip. */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--nd-brand-text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
}

.nd-app-bar__version {
  flex: 0 0 auto !important;
  color: var(--nd-brand-text-dim) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 400 !important;
}

.nd-app-bar__navigation {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  gap: 2px !important;
}

.nd-app-bar__action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--nd-brand-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}

.nd-app-bar__action:hover {
  color: var(--nd-brand-text) !important;
  background: var(--nd-brand-unselected) !important;
}

.nd-app-bar__action svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.nd-app-bar__action:last-child svg {
  fill: currentColor !important;
  stroke: none !important;
}

.nd-app-bar__action[title$="neuroimaging infrastructure"] svg {
  fill: currentColor !important;
  stroke: none !important;
}

[data-neurodesk-top-bar-overlay] {
  flex-direction: column !important;
}

[data-neurodesk-top-bar-overlay] > .nd-app-bar {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  border-bottom: 1px solid var(--nd-brand-border) !important;
}

.nd-app-utility-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  color: var(--nd-brand-text) !important;
  background: var(--nd-brand-pale) !important;
  border-bottom: 1px solid var(--nd-brand-border) !important;
}

.nd-app-dialog {
  width: min(520px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  color: var(--nd-brand-text);
  background: var(--nd-brand-surface);
  border: 1px solid var(--nd-brand-border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgb(12 14 10 / 28%);
}

.nd-app-dialog::backdrop {
  background: rgb(12 14 10 / 62%);
}

.nd-app-dialog__panel {
  display: grid;
  gap: 0;
  padding: 0;
  font-family: var(--nd-font-ui);
}

.nd-app-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--nd-brand-border);
}

.nd-app-dialog__header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.nd-app-dialog__body {
  display: grid;
  gap: 12px;
  max-height: calc(85vh - 64px);
  overflow-y: auto;
  padding: 20px 24px 24px;
  font-size: 0.875rem;
  line-height: 1.55;
}

.nd-app-dialog__body > p,
.nd-app-info p,
.nd-app-info ul {
  margin: 0;
}

.nd-app-info {
  display: grid;
  gap: 8px;
}

.nd-app-info h3 {
  margin: 12px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--nd-brand-border);
  color: var(--nd-brand-light);
  font-size: 0.85rem;
  font-weight: 600;
}

.nd-app-info ul {
  padding-left: 1.2em;
}

.nd-app-info a,
.nd-app-dialog__body a {
  color: var(--nd-brand-light);
  overflow-wrap: anywhere;
}

.nd-app-citation {
  padding-left: 8px;
  border-left: 2px solid var(--nd-brand-border);
}

.nd-app-citation strong {
  display: block;
  font-size: 0.85rem;
}

.nd-app-citation small {
  display: block;
  color: var(--nd-brand-text-dim);
  font-size: 0.72rem;
}

.nd-app-citation p {
  margin: 2px 0 4px;
  color: var(--nd-brand-text-muted);
  font-size: 0.8rem;
}

.nd-app-citation a {
  font-size: 0.78rem;
}

.nd-app-info__primary {
  padding: 12px;
  background: var(--nd-brand-pale);
  border: 1px solid var(--nd-brand-primary);
  border-radius: 8px;
}

.nd-app-info__primary .nd-app-citation {
  padding-left: 0;
  border-left: 0;
}

/* Inside app-owned About modals the shared block inherits the app's text styles. */
[data-neurodesk-app] :is(.modal-body, .nd-dialog-body, .nd-modal-body) > .nd-app-info {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--nd-brand-border);
}

:root[data-neurodesk-theme="light"] .nd-app-info h3,
:root[data-neurodesk-theme="light"] .nd-app-info a,
:root[data-neurodesk-theme="light"] .nd-app-dialog__body a {
  color: var(--nd-brand-selected);
}

.nd-app-dialog__panel :is(h2, p) {
  margin: 0;
  color: var(--nd-brand-text);
}

.nd-app-dialog__source {
  justify-self: start !important;
  color: var(--nd-brand-light) !important;
  background: transparent !important;
}

:root[data-neurodesk-theme="light"] .nd-app-dialog__source {
  color: var(--nd-brand-selected) !important;
}

.nd-app-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -12px -12px -12px 0;
  padding: 0;
  color: var(--nd-brand-text-muted);
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.nd-app-dialog__close:hover {
  color: var(--nd-brand-text);
}

.nd-app-dialog {
  width: min(640px, calc(100vw - 32px));
}

.nd-app-dialog__source {
  justify-self: start;
  margin-top: 8px;
}

/* Icon-only actions keep their label for assistive technology. */
.nd-app-bar--compact .nd-app-bar__action {
  position: relative !important;
}

.nd-app-bar--compact .nd-app-bar__action > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.nd-app-bar--no-description .nd-app-bar__description {
  display: none !important;
}

@media (max-width: 1120px) {
  .nd-app-bar {
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  .nd-app-bar__identity {
    gap: 10px !important;
  }

  .nd-app-bar__navigation {
    gap: 2px !important;
  }

  .nd-app-bar__action {
    gap: 4px !important;
    padding-inline: 6px !important;
  }
}

@media (max-width: 820px) {
  .nd-app-bar {
    overflow-x: auto !important;
  }

  .nd-app-bar__description {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .nd-app-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px 12px 6px !important;
    overflow: visible !important;
  }

  .nd-app-bar__identity {
    justify-content: space-between !important;
  }

  .nd-app-bar__title {
    flex-shrink: 1 !important;
    white-space: normal !important;
    font-size: 16px !important;
  }

  .nd-app-bar__version {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 60% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nd-app-bar__navigation {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .nd-app-bar__action {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .nd-app-bar__action span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Shared mobile layout for the hosted and standalone application shells. */
@media (max-width: 1024px) {
  :root[data-neurodesk-app]:not(:has(.mobile-tab-bar)),
  :root[data-neurodesk-app]:not(:has(.mobile-tab-bar)) body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  [data-neurodesk-app]:not(:has(.mobile-tab-bar)) :is(.app-container, .nd-app-container) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
  }

  [data-neurodesk-app] :is(.app-sidebar, .app-main, .nd-app-sidebar, .nd-app-main) {
    min-width: 0;
  }

  [data-neurodesk-app]:not(:has(.mobile-tab-bar)) :is(.app-sidebar, .nd-app-sidebar) {
    max-height: none;
    overflow: visible;
  }

  [data-neurodesk-app]:not(:has(.mobile-tab-bar)) :is(.sidebar-scroll, .nd-sidebar-scroll) {
    overflow: visible;
  }

  [data-neurodesk-app]:not(:has(.mobile-tab-bar)) :is(.viewer-canvas-wrapper, .nd-viewer-canvas-wrapper) {
    min-height: 360px;
    min-height: max(300px, 50svh);
  }

  [data-neurodesk-app] :is(.viewer-toolbar, .viewer-actions, .window-controls, .view-tabs,
      .nd-viewer-toolbar, .nd-viewer-actions, .nd-window-controls, .nd-view-tabs, .nd-mask-editor, .nd-tool-group) {
    flex-wrap: wrap;
    min-width: 0;
  }

  [data-neurodesk-app] .start-page {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
  }

  [data-neurodesk-app] :is(.start-header, .start-main, .start-footer) {
    flex-shrink: 0;
  }

  [data-neurodesk-app] .start-main {
    flex-basis: auto;
    min-height: auto;
    grid-template-rows: auto auto;
  }

  [data-neurodesk-app] .start-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  [data-neurodesk-app] :is(.modal, .nd-modal, .nd-app-dialog) {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overflow-wrap: anywhere;
  }

  [data-neurodesk-app] .nd-app-utility-bar {
    flex-wrap: wrap;
  }
}

@media (max-width: 780px) {
  [data-neurodesk-app] .nd-imaging-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(360px, 60svh) auto;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  [data-neurodesk-app] .nd-imaging-controls {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    overflow: visible;
  }

  [data-neurodesk-app] .nd-imaging-viewer {
    grid-column: 1;
    grid-row: 3;
    min-height: 360px;
  }

  /* Only the shared workspace grid; .app-container apps place their own footer. */
  [data-neurodesk-app] .nd-imaging-workspace > .nd-imaging-status {
    grid-column: 1;
    grid-row: 4;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  [data-neurodesk-app] :is(.control-section, .start-hero > *, .start-step > *) {
    min-width: 0;
  }

  [data-neurodesk-app] :is(.start-steps, .start-hero) {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (pointer: coarse) {
  .nd-app-bar__action {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  [data-neurodesk-app] :is(button, select, .btn, .upload-button, .nd-header-link) {
    min-height: 44px;
  }

  [data-neurodesk-app] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    font-size: 16px !important;
    max-width: 100%;
  }

  [data-neurodesk-app] :is(.modal-close, .nd-modal-close, .cite-close, .tool-button) {
    min-width: 44px;
    min-height: 44px;
  }
}