/* Product chrome only. Scientific plots and publication renderers keep their palettes. */
:root {
  --brand-primary: #155E75;
  --brand-primary-hover: #155E75;
  --text-primary: #20262D;
  --text-secondary: #59636E;
  --surface: #FFFFFF;
  --surface-muted: #F4F5F6;
  --border: #D5DADF;
  --bg: var(--surface-muted);
  --surface2: var(--surface-muted);
  --surface-2: var(--surface-muted);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --primary: var(--brand-primary);
  --primary2: var(--brand-primary);
  --primary-2: var(--brand-primary);
  --primary-dark: var(--brand-primary-hover);
  --blue: var(--brand-primary);
  --soft: var(--surface-muted);
  --primary-soft: var(--surface-muted);
  --shadow: none;
  --shadow2: none;
  --shadow-soft: none;
}
body {background: var(--surface-muted); color: var(--text-primary)}
a {color: var(--brand-primary)}
.sidebar {background: var(--surface); box-shadow: none}
.brand, a.foodomer-wordmark {
  color: var(--brand-primary); font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 30px; font-weight: 700; letter-spacing: -.5px;
  line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.brand-sub, .brandsub {color: var(--text-secondary)}
.brand-wrap, .brandwrap {gap: 0}
.hero, .preview-card, .sidecard {background: var(--surface); box-shadow: none}
.hero::after {display: none}
.btn.primary, .workflow-tab.active, button:not(.quiet):not(.btn):not(.workflow-tab):not([data-panel]):not(.modebar-btn), .button {
  background: var(--brand-primary); color: #FFFFFF; border-color: var(--brand-primary); box-shadow: none;
}
.btn:hover, .card:hover, .dataset:hover {transform: none; box-shadow: none}
.btn.primary:hover, .button:hover {background: var(--brand-primary-hover); text-decoration: underline}
.nav.active, .nav-item.active {background: var(--surface-muted); color: var(--brand-primary); box-shadow: inset 3px 0 var(--brand-primary)}
.nav:hover, .nav-item:hover {background: var(--surface-muted)}
.quiet, .tabs button, .exports a {color: var(--brand-primary); background: var(--surface-muted)}
#identities tr.selected, #identity-table tr.selected {background: var(--surface-muted); outline: 1px solid var(--brand-primary)}
input, select, textarea {accent-color: var(--brand-primary)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand-primary); outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .select:focus, .input:focus {border-color: var(--brand-primary); box-shadow: none}
.foodomer-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding: 16px 24px; background: var(--surface);
  border-bottom: 1px solid var(--border); margin: 0;
}
.foodomer-header nav {display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 0; font-size: 14px}
.foodomer-header nav a {font-size: 14px; text-decoration: none}
.foodomer-header nav a:hover {text-decoration: underline}
.foodomer-header .foodomer-context {color: var(--text-secondary); font-size: 13px}
.foodomer-mobile-header {display: none}
@media(max-width: 900px) {
  .foodomer-mobile-header {display: flex}
  .sidebar {display: none}
  .foodomer-header {padding: 14px 16px}
}
@media print {.foodomer-header {display: none}}

/* Application account chrome only; logout remains a native POST form. */
.sidebar {display: flex; flex-direction: column}
.foodomer-sidebar-account {margin-top: auto; padding-top: 24px; min-width: 0}
.foodomer-account {display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-width: 0; max-width: 100%; font-size: 12px}
.foodomer-account .account-username {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary)}
.foodomer-account button.account-logout {flex: 0 0 auto; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--brand-primary); font: inherit; cursor: pointer; box-shadow: none}
.foodomer-account button.account-logout:hover {background: var(--surface-muted); text-decoration: underline}
.foodomer-account a.account-password {order: 3; flex: 1 0 100%; display: inline-flex; align-items: center; min-height: 32px; padding: 0 0 4px; color: var(--brand-primary); text-decoration: none; white-space: nowrap}
.foodomer-account a.account-password:hover {text-decoration: underline; text-underline-offset: 3px}
.foodomer-header .foodomer-account {max-width: 220px}
@media(max-width:900px) {a.foodomer-wordmark {font-size:28px}.sidebar {display:none}}

/* Quiet sidebar account actions; retain the native submit button and focus ring. */
:is(.home-account, .foodomer-sidebar-account) .foodomer-account {
  width: 100%; justify-content: space-between;
}
:is(.home-account, .foodomer-sidebar-account) .account-username {
  color: #334155;
}
:is(.home-account, .foodomer-sidebar-account) button.account-logout {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; background-image: none;
  color: var(--brand-primary); font: 500 12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  padding: 8px 4px; min-height: 44px; box-shadow: none;
}
:is(.home-account, .foodomer-sidebar-account) button.account-logout:hover {
  background: transparent; text-decoration: underline; text-underline-offset: 3px;
}

/* Official artwork: intrinsic aspect ratio, no cropping or recoloring. */
a.foodomer-wordmark {display: inline-block; max-width: 100%}
.foodomer-logo {display: block; width: 170px; max-width: 100%; height: auto}
@media(max-width:900px) {.foodomer-logo {width:160px}}

/* Sidebar artwork only; header and login sizing remain independent. */
.sidebar .foodomer-logo {width:200px}