/* Shared UI contract. Layout-specific CSS owns composition; this file owns
   product colors, type, controls, selection and status semantics across pages. */
:root {
  --ui-surface: #fff;
  --ui-sidebar: #f7f8fa;
  --ui-border: #dce3e7;
  --ui-text: #29343b;
  --ui-muted: #59666f;
  --ui-faint: #65727b;
  --ui-primary: #30373b;
  --ui-primary-hover: #20282d;
  --ui-selected: #e8eeea;
  --ui-selected-text: #304b3b;
  --ui-focus: #527796;
  --ui-radius: 5px;
  --ui-sidebar-width: 228px;
  --ui-gutter: 30px;
  --muted: var(--ui-muted);
  --faint: var(--ui-faint);
  --text: var(--ui-text);
  --line: var(--ui-border);
  --radius: var(--ui-radius);
}

/* The blue product rail stays horizontal; page-specific navigation sits below. */
.cosmo-header.product-header { gap: 28px; background: #3572cc; border-bottom: 0; }
.cosmo-header.product-header .j-brand {
  padding: 0; margin: 0 8px 0 0; border: 0;
  font-size: 27px; line-height: 32px; letter-spacing: -1.5px; color: #fff;
}
.cosmo-header.product-header .j-brand span { color: #fff; opacity: .7; }
.cosmo-header.product-header nav {
  --product-nav-size: 56px;
  position: relative; flex: none; order: 0; align-self: stretch;
  align-items: center; justify-content: flex-start;
  width: auto; height: auto; gap: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.cosmo-header.product-header nav::after {
  content: ''; position: absolute; bottom: 0; left: 12px;
  width: calc(var(--product-nav-size) - 24px); height: 2px; border-radius: 1px 1px 0 0;
  background: #fff; pointer-events: none;
  transform: translateX(calc(var(--product-nav-index, 0) * var(--product-nav-size)));
  transition: transform 200ms cubic-bezier(.2,.75,.25,1);
}
.cosmo-header.product-header .product-nav-icon {
  display: grid; place-items: center; flex: 0 0 var(--product-nav-size);
  width: var(--product-nav-size); height: 100%; min-height: 44px; padding: 0;
  border: 0; border-radius: 0; color: #e6efff; background: transparent;
  box-shadow: none; transition: color 150ms ease, background-color 150ms ease;
}
.product-header .product-nav-icon svg { display: block; width: 22px; height: 22px; pointer-events: none; }
.product-header .product-nav-icon.selected::after { content: none; }
.cosmo-header.product-header .product-nav-icon:hover { background: #ffffff14; color: #fff; }
.cosmo-header.product-header .product-nav-icon[aria-current] { color: #fff; background: #2b61b2; border: 0; box-shadow: none; }
.cosmo-header.product-header .product-nav-icon[aria-current]:hover { background: #285da9; }
.cosmo-header.product-header :is(button,a):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cosmo-header.product-header .product-nav-icon:focus-visible { outline-offset: -5px; }
.cosmo-header.product-header button:active { transform: none; }
.product-nav-tooltip {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 120; width: max-content; max-width: 220px;
  padding: 9px 12px; border: 0; border-radius: 5px;
  background: #303b49; color: #fff; box-shadow: 0 3px 10px #2637481a;
  text-align: left; white-space: normal; opacity: 0; visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms;
}
.product-nav-tooltip::before { content: ''; position: absolute; inset: -13px 0 auto; height: 13px; }
.product-nav-tooltip strong { display: block; font: 600 12px/1.4 var(--sans); }
.product-nav-tooltip>span { display: block; margin-top: 3px; color: #d3dce6; font: 400 11px/1.5 var(--sans); }
.product-nav-icon:not([data-tip-dismissed]):is(:hover,:focus-visible) .product-nav-tooltip { visibility: visible; opacity: 1; }
.cosmo-header.product-header .product-project {
  display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 280px; min-height: 40px;
  padding: 8px 10px; border: 0; border-radius: 4px;
  background: transparent; color: #fff; text-align: left; line-height: 1.3;
  transition: background-color 150ms ease, color 150ms ease;
}
.cosmo-header.product-header .product-project:hover { background: #ffffff14; color: #fff; }
.product-project-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: #e6efff; }
.product-project-copy { display: block; min-width: 0; }
.product-project-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.4 var(--sans); }
.product-project-chevron { flex: none; margin-left: 6px; color: #e6efff; }
@media (max-width: 620px) {
  .cosmo-header.product-header { gap: 0 14px; }
  .cosmo-header.product-header .j-brand { font-size: 25px; margin: 0; }
  .cosmo-header.product-header nav { --product-nav-size: 48px; justify-self: start; width: auto; margin: 0; }
  .cosmo-header.product-header .product-project { max-width: 220px; min-height: 36px; padding: 6px; gap: 7px; }
  .product-project-title { font-size: 11px; }
  .product-project-chevron { margin-left: 1px; }
  .product-nav-icon:first-child .product-nav-tooltip { left: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmo-header.product-header nav::after, .cosmo-header.product-header .product-nav-icon,
  .product-nav-tooltip, .cosmo-header.product-header .product-project { transition: none; }
}

/* A stable shell; large comparison panes remain purpose-built for science. */
.project-hub, .scientific-workspace { grid-template-columns: var(--ui-sidebar-width) minmax(0,1fr); }
.hub-sidebar, .ws-sidebar { background: var(--ui-sidebar); border-color: var(--ui-border); padding: 24px 14px; }
.hub-project, .ws-project-context { padding: 0 12px 22px; }
.hub-project strong, .ws-project-context strong { color: var(--ui-text); font-size: 13px; line-height: 1.6; font-weight: 600; margin-top: 8px; }
.hub-project>.eyebrow, .ws-project-context>small { color: var(--ui-faint); font-size: 10px; line-height: 1.5; letter-spacing: .6px; }
.hub-content, .ws-content { padding-left: var(--ui-gutter); padding-right: var(--ui-gutter); }
.ws-topbar, .ws-savebar { padding-left: var(--ui-gutter); padding-right: var(--ui-gutter); }
.hub-nav { margin-top: 0; }
.hub-nav button, .ws-sidebar nav button, .research-section-nav nav button { font-size: 12px; border-radius: var(--ui-radius); color: var(--ui-muted); }
.hub-nav button[aria-current], .ws-sidebar nav button[aria-current], .research-section-nav nav button[aria-current] { color: var(--ui-selected-text); background: var(--ui-selected); border-color: transparent; font-weight: 600; }
.hub-side-note { padding-inline: 12px; }
.hub-heading h1, .ws-list-heading h1, .ws-record-header h1, .ws-exp-title { color: var(--ui-text); font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; }
.hub-heading p, .ws-list-heading p { font-size: 13px; line-height: 1.65; color: var(--ui-muted); }
.hub-actions { padding-top: 9px; }
.hub-card, .ws-section, .ws-empty, .ws-table-scroll { border-color: var(--ui-border); border-radius: var(--ui-radius); }
.hub-card h2, .ws-section h2, .ws-exp-section-head h2 { font-size: 14px; color: var(--ui-text); font-weight: 600; }

/* Consistent actions, focus, and disabled behavior. Scientific SVG colors are untouched. */
.button, .button.small, .j-secondary, .j-primary, .pm-editor .button, .ws-exp-header-actions button {
  min-height: 34px; padding: 8px 12px; border-radius: var(--ui-radius);
  border: 1px solid #ccd6dc; background: var(--ui-surface); color: #3e4a52;
  font: 600 12px/1.35 var(--sans); box-shadow: none;
}
.button.gold, .j-primary, .pm-editor .button.gold, .j-browser-layout #j-goal-form button, .j-browser-layout #j-next {
  background: var(--ui-primary); border-color: var(--ui-primary); color: #fff !important;
}
.button.gold:hover:not(:disabled), .j-primary:hover:not(:disabled), .pm-editor .button.gold:hover:not(:disabled), .j-browser-layout #j-next:hover:not(:disabled) { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.button:not(.gold):hover:not(:disabled), .j-secondary:hover:not(:disabled), .pm-editor .button:not(.gold):hover:not(:disabled) { background: #f0f3f5; border-color: #aebfc9; color: var(--ui-text); }
button:disabled, .pm-editor .button:disabled, .j-browser-layout button:disabled { opacity: .48; cursor: not-allowed; }
button:disabled:hover { box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
.j-browser-layout button:focus-visible, .j-browser-layout summary:focus-visible, .pm-editor :focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 2px;
}
.skip-link:focus { z-index: 1000; top: 8px; left: 8px; padding: 12px 16px; background: #fff; color: var(--ui-text); border: 2px solid var(--ui-focus); border-radius: var(--ui-radius); }
[tabindex="-1"]:focus { scroll-margin-top: 100px; }

.ws-field input:not([type=checkbox]):not([type=radio]), .ws-field select, .ws-field textarea,
.ws-exp-field input, .ws-exp-field select, .ws-exp-field textarea, .ws-exp-condition-row input,
.ws-exp-inline-actions select, .hub-form input:not([type=checkbox]), .hub-form textarea, .hub-form select,
.field-label input, .field-label textarea, .field-label select, .hub-search input, .ws-project-search>input,
.j-solution-filters input, .j-solution-filters select {
  min-height: 36px; font-size: 12px; line-height: 1.5; color: var(--ui-text);
  border-color: #cdd7de; border-radius: var(--ui-radius); background: #fff;
}
.ws-field>span, .ws-exp-field>span, .hub-form label, .field-label { color: var(--ui-muted); font-size: 12px; }
.ws-field input:focus, .ws-field textarea:focus, .ws-field select:focus,
.ws-exp-field input:focus, .ws-exp-field select:focus, .ws-exp-field textarea:focus { border-color: var(--ui-focus); outline-color: var(--ui-focus); background: #fff; }
input::placeholder, textarea::placeholder { color: var(--ui-faint); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--ui-muted); background: #f5f7f8; opacity: 1; cursor: default; }
.ws-record-tabs, .ws-data-tabs, .pm-tabs, .j-list-tabs { border-color: var(--ui-border); }
.ws-record-tabs button, .ws-data-tabs button, .pm-tabs button, .j-list-tabs button { min-height: 42px; font-size: 12px; color: var(--ui-muted); }
.ws-record-tabs button[aria-pressed=true], .ws-data-tabs button[aria-current], .pm-tabs button[aria-pressed=true], .j-list-tabs button[aria-pressed=true] { color: var(--ui-selected-text); border-bottom-color: #587663; font-weight: 600; }

/* Supporting information stays readable at the same density across modules. */
.ws-muted, .ws-section>p, .ws-context .ws-muted, .ws-meta dt, .ws-meta dd, .ws-record-id,
.ws-sidebar-bottom>span, .ws-area-nav .ws-area-copy small, .ws-sidebar .ws-area-nav button small,
.ws-nav-caption, .ws-breadcrumb, .ws-savebar, .ws-table-count, .ws-table td>small, .ws-table th,
.ws-link-button, .ws-file small, .ws-upload-zone, .ws-empty p, .ws-property-row button,
.pm-help, .pm-header #pm-state, .pm-features small, .pm-qualifiers, .pm-qualifiers dt,
.pm-map-toolbar, .pm-map-hint, #pm-analysis-status, .pm-sequence-panel strong span,
.hub-scope dt, .hub-work-row small, .hub-person small, .hub-history time, .hub-side-note {
  color: var(--ui-muted); font-size: 11px; line-height: 1.65;
}
.ws-section summary, .ws-table td, .ws-table-name, .ws-exp-object-link, .ws-exp-link { font-size: 12px; }
.ws-empty p, .ws-section>p { font-size: 12px; }
.ws-meta { font-size: 11px; }
.ws-exp-header { padding-top: 0; padding-left: 0; padding-right: 0; }
.ws-experiment { --exp-muted: var(--ui-muted); }
.ws-exp-field>span, .ws-exp-section-head p { font-size: 11px; }
.ws-exp-header-actions button { font-weight: 600; }
.hub-note { color: var(--ui-muted) !important; }
.pm-editor .pm-tabs, .pm-sidebar, .pm-sequence-panel { background: var(--ui-sidebar); }
.pm-header p { color: var(--ui-muted); font-size: 10px; letter-spacing: .65px; }
.pm-tabs button[aria-pressed=true], .pm-features>button[aria-pressed=true] { color: var(--ui-selected-text); }
.pm-features>button[aria-pressed=true] { background: var(--ui-selected); }

/* Status words mean the same thing wherever the record is shown. */
.ws-status, .ws-exp-status, .hub-status { border-radius: 4px; font-size: 11px; color: #59666f; background: #edf1f4; }
:is(.ws-status,.ws-exp-status,.hub-status):is([data-status=Running],[data-status="In progress"],[data-status="In use"]) { color: #365e7b; background: #e8f0f8; }
:is(.ws-status,.ws-exp-status,.hub-status):is([data-status=Completed],[data-status=Done],[data-status=Available],[data-status=Active]) { color: #346347; background: #e6f2e9; }
:is(.ws-status,.ws-exp-status,.hub-status):is([data-status=Planned],[data-status=Reserved],[data-status=Blocked]) { color: #775719; background: #fff2d8; }
:is(.ws-status,.ws-exp-status,.hub-status)[data-status=Analysis] { color: #675186; background: #f0eaf8; }
:is(.ws-status,.ws-exp-status,.hub-status):is([data-status=Failed],[data-status=Disposed]) { color: #934238; background: #f9e9e5; }
.ws-error, .ws-savebar [data-state=error], .pm-error { color: #a13930; }
.ws-savebar [data-state=dirty], .ws-savebar [data-state=saving] { color: #775719; }

/* Legacy Research inherits the same sidebar, labels and action sizes. */
#app .tier-intro, #app .candidate-select p, #app .candidate-meta, #app .claim-row p,
#app .decision-section p, #app .decision-section li, #app .query-context, #app .query-requirements,
#app .more-controls summary { font-size: 11px; color: var(--ui-muted); line-height: 1.65; }
#app .eyebrow, #app .micro, #app .canvas-info { font-size: 10px; letter-spacing: .4px; }
#app .discovery-panel { background: var(--ui-sidebar); }
#app .viewer-toolbar { flex-wrap: wrap; gap: 10px; }
#app .more-controls summary { min-width: 90px; white-space: nowrap; padding: 7px 9px; }
#app .visibility-group button, #app .mode-bar button, #app .right-tabs button { min-height: 34px; font-size: 12px; }
@media(min-width:1101px) { #app .workspace { grid-template-columns: var(--ui-sidebar-width) minmax(440px,1fr) 275px; } }
@media(max-width:1100px) { :root { --ui-sidebar-width: 205px; --ui-gutter: 24px; } }
@media(max-width:850px) {
  .scientific-workspace { display: block; }
  .hub-sidebar, .ws-sidebar { padding: 16px; }
  .ws-sidebar-bottom { padding-top: 12px; }
}
@media(max-width:700px) {
  :root { --ui-gutter: 16px; }
  .project-hub { display: block; }
  .hub-project { padding-bottom: 10px; }
  .hub-nav { margin: 8px 0; }
  .hub-side-note { margin: 10px 0 0; }
  .hub-heading { flex-wrap: wrap; gap: 8px; }
  .hub-actions { padding-top: 0; }
  .hub-heading h1, .ws-list-heading h1, .ws-record-header h1, .ws-exp-title { font-size: 23px; }
  .button, .button.small, .j-secondary, .j-primary, .pm-editor .button, .ws-exp-header-actions button,
  .ws-record-tabs button, .ws-data-tabs button, .ws-sidebar nav button, .hub-nav button { min-height: 40px; }
  .ws-heading-actions, .ws-record-actions, .ws-exp-header-actions { flex-wrap: wrap; }
  .ws-record-tabs, .ws-data-tabs { overflow-x: auto; gap: 20px; }
  .ws-record-tabs button, .ws-data-tabs button { flex: none; white-space: nowrap; }
  #app .workspace { min-width: 0; }
  #app .query-context { flex-wrap: wrap; }
  .pm-header-actions { flex-wrap: wrap; }
  .pm-header #pm-state { display: block; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Grid children must shrink around scrollable annotation tables on narrow screens. */
.ws-record-grid > * { min-width: 0; }
.ws-heading-actions .button, .ws-record-actions .button, .pm-header-actions .button,
.pm-map-toolbar .button, .pm-sequence-panel .button { font-size: 12px; }
@media(max-width:850px) { .ws-record-grid { grid-template-columns: minmax(0,1fr); } }
.ws-heading-actions { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.j-browser-layout .j-sidebar>h1 { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }