/* Shared NainoLab app shell, loaded last by the HTML gateway.
   Only top-level frame elements are themed: native canvases, editors, plot
   controls, internal grids and scientific colour maps keep their own styles.
   The portal (home, workspaces, detail) is styled by app/globals.css. */
:root {
  --nl-bg: #ffffff;
  --nl-surface: #ffffff;
  --nl-ink: #1f2633;
  --nl-ink-2: #3a4352;
  --nl-muted: #5b6573;
  --nl-subtle: #758196;
  --nl-line: #e3e7ee;
  --nl-line-soft: #eef0f4;
  --nl-paper: #f7f8fc;
  --nl-paper-line: #e7eaf2;
  --nl-accent: #0b6bde;
  --nl-accent-hover: #0857b6;
  --nl-accent-ink: #0b4f9c;
  --nl-accent-soft: #eef4ff;
  --nl-violet: #7b6cf0;
  --nl-tech: #0b6bde;
  --nl-tech-soft: #eef4ff;
  --nl-grad: linear-gradient(90deg, #2b8afb, #6b6cf2 55%, #a46ade);
  --nl-content-max: 1880px;
  --nl-page-gutter: clamp(18px, 3vw, 64px);
  --nl-header-height: 72px;
  --nl-radius: 14px;
  --nl-control-radius: 10px;
  --nl-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --nl-display: var(--nl-font);
}
body.nl-app {
  --nl-bg: #ffffff; --nl-surface: #ffffff; --nl-ink: #1f2633; --nl-muted: #5b6573; --nl-line: #e3e7ee; --nl-accent: #0b6bde;
  --bg: var(--nl-bg); --ink: var(--nl-ink); --text: var(--nl-ink); --muted: var(--nl-muted);
  --line: var(--nl-line); --border: var(--nl-line); --paper: var(--nl-surface); --panel: var(--nl-surface); --surface: var(--nl-surface);
  background: var(--nl-bg); color: var(--nl-ink); font-family: var(--nl-font);
  -webkit-font-smoothing: antialiased;
}

/* One outer frame for every analysis app, including wide screens. */
body.nl-app > :is(header.nl-header, main, footer, .intro) {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--nl-page-gutter));
  max-width: var(--nl-content-max);
  min-width: 0;
  margin-inline: auto;
  padding-inline: 0;
}

/* Header: brand, then one flexible spacer, then global navigation pills. */
body.nl-app > header.nl-header {
  max-width: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  height: var(--nl-header-height); min-height: var(--nl-header-height);
  margin-block: 0; padding-block: 0; flex-shrink: 0;
  border: 0; border-bottom: 1px solid var(--nl-line-soft);
  background: transparent; box-shadow: none;
}
body.nl-app > header.nl-header .nl-brand {
  display: inline-flex; align-items: center; flex-shrink: 0; gap: 9px; margin: 0 14px 0 0; padding: 0;
  font: 600 22px/1.4 var(--nl-font); letter-spacing: -.5px; color: var(--nl-ink); text-decoration: none;
}
body.nl-app > header.nl-header .nl-brand svg { width: 30px; height: 30px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.nl-app > header.nl-header .nl-brand > span { font: inherit; color: var(--nl-accent); letter-spacing: inherit; margin: 0 0 0 -8px; }
:where(.brand, .nl-brand, .wordmark) > img.nl-logo,
body.nl-app > header.nl-header > .nl-brand img {
  display: block; width: 144px; height: 34px; max-width: none; flex: 0 0 144px;
  margin: 0; padding: 0; border: 0; object-fit: contain;
}
body.nl-app > header.nl-header .nl-app-center {
  display: inline-flex; align-items: center; flex-shrink: 0; margin: 0 0 0 auto; padding: 8px 14px;
  border-radius: 999px; font: 500 14px/1.4 var(--nl-font); letter-spacing: 0;
  color: var(--nl-ink-2); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
body.nl-app > header.nl-header .nl-app-center:hover { background: #f2f4f8; color: var(--nl-ink); }
body.nl-app > header.nl-header .nl-header-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0 0 0 auto; padding: 0;
}
body.nl-app > header.nl-header .nl-header-actions + .nl-app-center { margin-left: 4px; }
body.nl-app > header.nl-header .nl-header-actions button {
  margin: 0; padding: 7px 12px; min-height: 34px;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  color: var(--nl-ink-2); font: 500 13px/1.4 var(--nl-font); white-space: nowrap;
  transition: background .15s, color .15s;
}
body.nl-app > header.nl-header .nl-header-actions button:hover { background: #f2f4f8; color: var(--nl-ink); }
:is(.nl-header, .auth-header) #nainolab-account-link {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 36px; min-height: 36px; margin-left: 6px !important; padding: 0 18px;
  border: 1.5px solid #dfe4ec; border-radius: 999px !important;
  background: #fff; color: var(--nl-accent-ink);
  font: 600 13px/1 var(--nl-font); text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
:is(.nl-header, .auth-header) #nainolab-account-link:hover { border-color: #b9cdea; background: #f6f9ff !important; color: var(--nl-accent-ink) !important; }
body.nl-app > header.nl-header > a[href="/#apps"] { order: 1; }
body.nl-app > header.nl-header #nainolab-admin-link { order: 2; margin: 0 !important; }
body.nl-app > header.nl-header #nainolab-account-link { order: 4; }
:is(.nl-header, .auth-header) :is(a, button, summary):focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 3px; }

/* Title band: a warm paper surface with a faint blue–violet glow. */
body.nl-app > main { margin-top: 0; padding-top: 0; padding-bottom: 48px; }
body.nl-app > main > :is(.intro, .heading, .title-row, .page-title), body.nl-app > .intro {
  box-sizing: border-box; min-height: 150px; margin-block: 0 20px;
  padding-block: 30px 26px; gap: 20px; align-items: center;
}
body.nl-app > main > :is(.intro, .heading, .title-row, .page-title) {
  position: relative; overflow: hidden;
  margin-top: 22px; padding-inline: clamp(22px, 3vw, 40px);
  border: 1px solid var(--nl-paper-line); border-radius: 20px;
  background:
    radial-gradient(560px 220px at 100% 0%, rgba(123, 108, 240, .11), transparent 70%),
    radial-gradient(480px 200px at 0% 100%, rgba(43, 138, 251, .07), transparent 70%),
    var(--nl-paper);
  box-shadow: 0 1px 2px rgba(31,45,80,.03);
}
body.nl-app > main > :is(.intro, .heading, .title-row, .page-title)::after { content: none; }
body.nl-app > main > :is(.intro, .heading, .title-row, .page-title) > * { position: relative; z-index: 1; }
body.nl-app > .plot-hero {
  position: relative; overflow: hidden;
  margin-top: 18px !important;
  border: 1px solid var(--nl-paper-line) !important; border-radius: 20px;
  background:
    radial-gradient(560px 220px at 100% 0%, rgba(123, 108, 240, .11), transparent 70%),
    radial-gradient(480px 200px at 0% 100%, rgba(43, 138, 251, .07), transparent 70%),
    var(--nl-paper) !important;
  box-shadow: none;
  box-sizing: border-box;
  padding-inline: clamp(22px, 3vw, 40px) !important;
}
body.nl-app > .plot-hero h1 { font-family: var(--nl-font); font-weight: 700; letter-spacing: -.02em; color: var(--nl-ink); }
body.nl-app > .plot-hero h1 :is(span, small, em) { font-family: var(--nl-font); }
body.nl-app :is(.intro, .heading, .title-row, .page-title) h1 {
  margin: 0; font: 700 clamp(26px, 2.3vw, 34px)/1.3 var(--nl-display);
  letter-spacing: -.02em; color: var(--nl-ink);
}
body.nl-app :is(.intro, .heading, .title-row, .page-title) h1 :is(span, small, em) { font-family: var(--nl-font); }
body.nl-app :is(.intro, .heading, .title-row, .page-title) .eyebrow {
  display: block; margin: 0 0 10px;
  font: 600 11px/1.5 var(--nl-font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--nl-accent-ink);
}
body.nl-app :is(.intro, .heading, .title-row, .page-title) p:not(.eyebrow) {
  margin: 10px 0 0; font: 400 14px/1.7 var(--nl-font); color: var(--nl-muted);
}

/* Panels, controls and status surfaces. */
body.nl-app > main :is(.panel, .card):not(.floatcard) {
  border-color: var(--nl-line); border-radius: var(--nl-radius);
  background-color: var(--nl-surface);
}
body.nl-app > main :is(.input-section, .results-heading) { border-color: var(--nl-line); }
body.nl-app > main > .workspace { border-color: var(--nl-line); border-radius: var(--nl-radius); background: var(--nl-surface); }
body.nl-app > main :is(.panel, .card, .input-section, .results-heading) h2 {
  font-family: var(--nl-font); font-size: 15px; font-weight: 600;
  line-height: 1.5; letter-spacing: 0; color: var(--nl-ink);
}
body.nl-app button.primary,
body.nl-app > main :is(button.primary, a.primary, .button.primary) {
  border: 1px solid var(--nl-accent); border-radius: var(--nl-control-radius);
  background: var(--nl-accent); color: #fff;
  font-family: var(--nl-font); font-size: 14px; font-weight: 600;
  min-height: 40px; box-shadow: 0 1px 2px rgba(11, 107, 222, .18);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
body.nl-app button.primary:hover:not(:disabled),
body.nl-app > main :is(button.primary, a.primary, .button.primary):hover:not(:disabled) {
  background: var(--nl-accent-hover); border-color: var(--nl-accent-hover); color: #fff;
  box-shadow: 0 4px 12px rgba(11, 107, 222, .22);
}
body.nl-app > main :is(button.secondary, a.secondary) { border-radius: var(--nl-control-radius); }
body.nl-app :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 3px; }
body.nl-app .notice.info { background: #f2f7ff; border-color: #c7dafa; }
body.nl-app .notice.warn { background: #fffaf0; }
body.nl-app .notice.error { background: #fff5f3; }
body.nl-app :is(.tag, .badge, .status-badge) { border-color: #cfe0fa; background: var(--nl-accent-soft); color: var(--nl-accent-ink); }
body.nl-app > main :is(.toolbar, .pagebar, .workspace-nav) { border-color: var(--nl-line); }

body.nl-app > footer {
  max-width: none;
  border-top: 1px solid var(--nl-line-soft); padding-block: 22px;
  color: var(--nl-subtle); font: 400 12px/1.6 var(--nl-font);
  min-height: 64px; gap: 16px;
}

/* SEM is a viewport workspace with a separately positioned introduction. */
body.nl-app > main.layout { padding-bottom: 24px; }
body.nl-app > main.layout > .panel { border-radius: 0; }
/* The Agent keeps its adjustable three-column canvas. */
body.nl-app.light #app { padding-block: 24px; }
body.nl-app.light :is(#sidebar, #graph) { border-radius: var(--nl-radius); }
body.nl-app.light .cofagent-heading { margin-left: 20px; }

/* Project commands get their own row before they can crowd global navigation. */
@media (max-width: 1100px) {
  body.nl-app > header.nl-header:has(.nl-header-actions) {
    height: auto; padding-block: 14px; flex-wrap: wrap; row-gap: 8px;
  }
  body.nl-app > header.nl-header .nl-header-actions {
    order: 5; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; margin: 0;
  }
  body.nl-app > header.nl-header .nl-header-actions + .nl-app-center { margin-left: auto; }
  body.nl-app > header.nl-header > :is(.cofagent-heading, .header-note) { display: none; }
}
@media (max-width: 700px) {
  :root { --nl-header-height: 62px; }
  body.nl-app > header.nl-header {
    height: auto; min-height: var(--nl-header-height); padding-block: 12px;
    gap: 6px; flex-wrap: wrap;
  }
  body.nl-app > header.nl-header .nl-brand { font-size: 20px; }
  body.nl-app > header.nl-header .nl-app-center { padding: 7px 10px; font-size: 13px; }
  /* Brand and app center on row one; account controls together on row two. */
  body.nl-app > header.nl-header > .nl-brand { order: 0; flex-basis: calc(100% - 120px); margin-right: 0; }
  body.nl-app > header.nl-header > a[href="/#apps"] { order: 1; margin-left: auto; }
  body.nl-app > header.nl-header #nainolab-admin-link { order: 2; margin-left: auto !important; }
  body.nl-app > header.nl-header #nainolab-account-link { order: 4; height: 34px; min-height: 34px; padding: 0 14px; }
  body.nl-app > header.nl-header .nl-header-actions { order: 5; flex-basis: 100%; justify-content: flex-start; gap: 4px; flex-wrap: wrap; }
  body.nl-app > header.nl-header > .header-note { display: none; }
  body.nl-app > main > :is(.intro, .heading, .title-row, .page-title), body.nl-app > .intro {
    min-height: 128px; padding-block: 24px 22px; gap: 16px; flex-wrap: wrap;
    align-items: flex-start; text-align: left;
  }
  body.nl-app > main > :is(.intro, .heading, .title-row, .page-title) { margin-top: 14px; border-radius: 16px; }
  body.nl-app > main > :is(.intro, .heading, .title-row, .page-title) > div:first-child { min-width: 0; align-self: flex-start; }
  body.nl-app > .plot-hero { border-radius: 16px; }
  body.nl-app > main { padding-bottom: 32px; }
  body.nl-app > footer { flex-wrap: wrap; gap: 8px 16px; }
  body.nl-app.light #app { padding: 0; }
  body.nl-app.light :is(#sidebar, #graph) { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.nl-app :is(button, a), :is(.nl-header, .auth-header) #nainolab-account-link { transition: none; }
}

/* Consistent interactions without altering scientific canvases or tool grids. */
body.nl-app > main :is(.panel, .card):not(.floatcard) { box-shadow: 0 1px 3px rgba(31,45,80,.035); }
body.nl-app :is(button, a):active:not(:disabled) { -webkit-tap-highlight-color: transparent; }
body.nl-app :is(button, input, select, textarea):disabled { cursor: not-allowed; }
body.nl-app :is(.notice, .error) { overflow-wrap: anywhere; }

body[data-nl-app="structurestudio"] > main { max-width: var(--nl-content-max) !important; }
/* The shared task bar owns project commands; keep only scientific exports here. */
body[data-nl-app="statgraph"]:has(#nl-tasks.nl-tasks) .head-actions .menu:has(#saveProject),
body[data-nl-app="structurestudio"]:has(#nl-tasks.nl-tasks) #save-project { display: none; }