/* ====== Base Styles ====== */
@font-face {
  font-family: 'IBM Plex Sans'; /* @font-face */
  font-style: normal;
  font-weight: 100 700; /* @font-face range; var(--font-weight-regular) scale applies to components */
  font-display: swap;
  src: url('../fonts/IBMPlexSans/IBMPlexSans-Variable.woff2') format('woff2-variations'),
       url('../fonts/IBMPlexSans/IBMPlexSans-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans'; /* @font-face */
  font-style: italic;
  font-weight: 100 700; /* @font-face range; var(--font-weight-regular) scale applies to components */
  font-display: swap;
  src: url('../fonts/IBMPlexSans/IBMPlexSans-Italic-Variable.woff2') format('woff2-variations'),
       url('../fonts/IBMPlexSans/IBMPlexSans-Italic-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono'; /* @font-face */
  font-style: normal;
  font-weight: 400; /* @font-face static face; var(--font-weight-regular) scale applies to components */
  font-display: swap;
  src: url('../fonts/IBMPlexMono/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
}

:root {
  /* Neutral slate scale (cool, pairs with the brand blue) */
  --slate-50:  #f7f9fb; /* :root */
  --slate-100: #eef2f6; /* :root */
  --slate-200: #dde4ec; /* :root */
  --slate-300: #c4cfdb; /* :root */
  --slate-400: #92a2b5; /* :root */
  --slate-500: #5f7184; /* :root */
  --slate-600: #44566b; /* :root */
  --slate-700: #2f3e51; /* :root */
  --slate-800: #1e2a39; /* :root */
  --slate-900: #111927; /* :root */

  --primary-red: #D94A40; /* Primary red */
  --secondary-blue: #2278BD; /* Secondary blue */
  --accent-yellow: #E3B40D; /* Accent yellow */
  --analysis-tools-green: #2ECC71; /* Analysis Tools tab accent */
  --analysis-tools-green-dark: #1f8f4d; /* Analysis Tools readable accent text */
  --analysis-tools-green-soft-bg: #edfdf4; /* Analysis Tools control surface */
  --analysis-tools-green-soft-border: #bcefd0; /* Analysis Tools soft border */
  --chlorine-green: #2BB069; /* Scientific/positive accent */
  --primary-blue: var(--secondary-blue); /* Back-compat for existing styles */
  --hover-blue: var(--secondary-blue); /* Keep within palette */
  --hover-red: var(--primary-red); /* Keep within palette */
  --disabled-gray: #999; /* Disabled button color */
  --dark-gray: var(--slate-800); /* Primary text color */
  --light-gray: var(--slate-50); /* Background color */
  --section-header-gray: var(--slate-200); /* Table section header color */
  --secondary-blue-dark: #1B6097; /* :root */

  /* Semantic status / panel tokens */
  --info-bg: #E6F2FF; /* :root */
  --info-border: #cddcee; /* :root */
  --info-text: #35506b; /* :root */
  --info-strong: var(--secondary-blue);

  --highlight-bg: #FFF8D8; /* :root */
  --highlight-border: #f0d59b; /* :root */
  --highlight-text: #8a5b00; /* :root */

  --warning-bg: #FDECEA; /* :root */
  --warning-border: #f2b8b5; /* :root */
  --warning-text: #a12622; /* :root */
  --warning-strong: #d32f2f; /* :root */

  --support-bg: #fff7e6; /* :root */
  --support-border: #ead3a1; /* :root */
  --support-text: #7a5a17; /* :root */
  --support-strong: #9a6700; /* :root */

  --success-bg: #ebf8f0; /* :root */
  --success-border: #bfe7cf; /* :root */
  --success-text: #1f6f3d; /* :root */
  --success-strong: var(--chlorine-green);

  --surface-white: #fff; /* :root */
  --surface-muted: var(--slate-50);
  --surface-border: var(--slate-200);
  --surface-border-soft: var(--slate-100);
  --surface-border-strong: var(--slate-300);
  --surface-white-alpha-55: rgba(255, 255, 255, 0.55); /* :root */
  --surface-white-alpha-90: rgba(255, 255, 255, 0.9); /* :root */
  --surface-white-alpha-92: rgba(255, 255, 255, 0.92); /* :root */
  --text-muted: var(--slate-500);
  --text-subtle: var(--slate-500);
  --text-muted-strong: var(--slate-600);
  --text-ink: var(--slate-900);
  --text-slate: var(--slate-600);
  --tooltip-bg: #111827; /* :root */
  --tooltip-text: #fff; /* :root */
  --tooltip-padding: 6px 10px;
  --tooltip-radius: 4px;
  --tooltip-font-size: var(--text-sm);
  --tooltip-font-weight: var(--font-weight-regular);
  --tooltip-line-height: 1.4;
  --tooltip-max-width: 250px;
  --tooltip-offset: 8px;
  --tooltip-z-index: 1000;
  --neutral-divider: var(--slate-100);
  --neutral-track: var(--slate-200);
  --neutral-line: var(--slate-300);
  --neutral-disabled-bg: var(--slate-100);
  --neutral-disabled-text: var(--slate-400);
  --neutral-disabled-border: var(--slate-200);
  --neutral-hover-bg: var(--slate-50);
  --neutral-hover-border: var(--slate-300);

  --interactive-hover-bg: var(--slate-100);
  --interactive-hover-border: var(--slate-200);
  --interactive-selected-bg: #d4e7f7; /* :root */
  --interactive-selected-border: #95c0e9; /* :root */
  --interactive-selected-text: #0c4a82; /* :root */
  --interactive-hover-strong-bg: #e0eef9; /* :root */
  --interactive-hover-strong-border: #aecde9; /* :root */
  --interactive-hover-strong-text: #134e85; /* :root */
  --interactive-drop-bg: #eaf3fc; /* :root */
  --interactive-drop-border: #84b7ec; /* :root */
  --interactive-blue-alpha-08: rgba(34, 120, 189, 0.08); /* :root */
  --interactive-blue-alpha-12: rgba(34, 120, 189, 0.12); /* :root */
  --interactive-blue-alpha-14: rgba(34, 120, 189, 0.14); /* :root */
  --interactive-blue-alpha-16: rgba(34, 120, 189, 0.16); /* :root */
  --interactive-blue-alpha-20: rgba(34, 120, 189, 0.20); /* :root */
  --interactive-blue-alpha-25: rgba(34, 120, 189, 0.25); /* :root */
  --interactive-blue-alpha-45: rgba(34, 120, 189, 0.45); /* :root */
  --interactive-blue-alpha-90: rgba(34, 120, 189, 0.90); /* :root */

  --noncanonical-text: #8b4f13; /* :root */
  --noncanonical-bg: #fff8ee; /* :root */
  --noncanonical-border: #f0d7b8; /* :root */
  --noncanonical-focus: #c98537; /* :root */
  --noncanonical-hover-bg: #ffdcae; /* :root */
  --noncanonical-hover-border: #cf9958; /* :root */
  --noncanonical-hover-text: #6b390b; /* :root */
  --noncanonical-active-bg: #ffdcb0; /* :root */
  --noncanonical-active-text: #6e3e10; /* :root */
  --noncanonical-shadow: rgba(207, 153, 88, 0.22); /* :root */

  --node-border: #9fa7b4; /* :root */
  --node-hover-bg: #eef6ff; /* :root */
  --node-selected-border: #f39c12; /* :root */
  --node-selected-bg: #fff4dc; /* :root */
  --node-selected-text: #8c5208; /* :root */
  --node-selected-text-alt: #9a6700; /* :root */
  --node-occupied-border: #cfd5de; /* :root */
  --node-occupied-bg: #f1f3f6; /* :root */
  --node-occupied-text: #8b94a3; /* :root */
  --node-annotated-text: #1e5ea3; /* :root */

  --input-invalid-border: #c62828; /* :root */
  --input-invalid-bg: #fff5f5; /* :root */
  --graph-notice-bg: #fff3f1; /* :root */
  --graph-notice-border: #efc2ba; /* :root */
  --graph-unsupported-bg: #fff6f2; /* :root */
  --graph-unsupported-border: #f2c7ba; /* :root */
  --graph-notice-text: #8a5448; /* :root */

  --support-area-default: #5d6b7a; /* :root */
  --support-area-chemistry: #2f80ed; /* :root */
  --support-area-residue: #27ae60; /* :root */
  --support-area-topology: #9b51e0; /* :root */
  --support-area-synthesis: #f2994a; /* :root */
  --fingerprint-tag-approx-bg: #ffe5c7; /* :root */
  --fingerprint-tag-approx-border: #f4b16a; /* :root */
  --fingerprint-tag-terminal-text: #0c5460; /* :root */
  --fingerprint-tag-terminal-bg: #d7f2f6; /* :root */
  --fingerprint-tag-terminal-border: #8ad0dc; /* :root */
  --fingerprint-tag-unavailable-text: #5d6770; /* :root */
  --fingerprint-tag-unavailable-bg: #edf1f4; /* :root */
  --fingerprint-tag-unavailable-border: #c8d2da; /* :root */
  --zscale-neg-strong-bg: #e6f2ff; /* :root */
  --zscale-neg-strong-text: #124c82; /* :root */
  --zscale-neg-soft-bg: #f3f8ff; /* :root */
  --zscale-neg-soft-text: #35506b; /* :root */
  --zscale-pos-soft-bg: #fdf1ef; /* :root */
  --zscale-pos-soft-text: #8a5448; /* :root */
  --zscale-pos-strong-bg: #fdecea; /* :root */
  --zscale-pos-strong-text: #a12622; /* :root */

  /* Additive design tokens (Phase 3) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Typographic scale - 5 sizes, no in-between */
  --text-sm:   12px;  /* table headers, chart axis labels, fine print */
  --text-base: 14px;  /* body, table cells, form labels, callouts */
  --text-md:   16px;  /* subsection within a card */
  --text-xl:   20px;  /* card title */
  --text-3xl:  32px;  /* H1 page title only */

  /* Weight scale */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line-height scale (paired with the type scale) */
  --leading-tight:  1.2;   /* H1, large titles */
  --leading-normal: 1.3;   /* card titles, subsection headers */
  --leading-body:   1.4;   /* body paragraphs, table cells */
  --leading-body-current: var(--leading-body);

  --border-width-hairline: 1px;
  --card-top-strip-width: 3px;

  /* Density scale: locked universal value. */
  --density-scale: 0.7;
  --pad-card-y: max(8px, calc((var(--space-4) - var(--border-width-hairline)) * var(--density-scale)));
  --pad-card-x: max(8px, calc((var(--space-4) - var(--border-width-hairline)) * var(--density-scale)));
  --pad-card-header-y: calc(var(--space-3) * var(--density-scale));
  --pad-card-header-x: calc(var(--space-4) * var(--density-scale));
  --gap-control: calc(var(--space-2) * var(--density-scale));
  --gap-toolbar: calc(var(--space-2) * var(--density-scale));
  --gap-card-grid: calc(var(--space-4) * var(--density-scale));
  --gap-control-wide-min: calc(52px * var(--density-scale));
  --gap-control-wide-fluid: calc(8vw * var(--density-scale));
  --gap-control-wide-max: calc(96px * var(--density-scale));
  --chart-container-basis: calc(350px * var(--density-scale));
  --pad-dashboard-x: calc(20px * var(--density-scale));
  --pad-dashboard-bottom: calc(40px * var(--density-scale));
  --pad-summary-strip: calc(10px * var(--density-scale));
  --margin-summary-strip: calc(20px * var(--density-scale));

  --radius-sm: 4px;
  --radius-card: 6px; /* card corners; tighter than --radius-md (8px) to match the 0.7 density visual rhythm */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); /* :root */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); /* :root */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* :root */
  --shadow-focus-blue: 0 0 0 3px var(--interactive-blue-alpha-20);
  --shadow-focus-blue-soft: 0 0 0 3px var(--interactive-blue-alpha-12);
  --shadow-focus-blue-subtle: 0 0 0 3px var(--interactive-blue-alpha-14);
  --shadow-blue-lift: 0 6px 14px var(--interactive-blue-alpha-16);
  --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 100vmax rgba(0, 0, 0, 0.5); /* :root */
  --shadow-tooltip: 0 2px 5px rgba(0, 0, 0, 0.2); /* :root */
  --shadow-tooltip-soft: 0 2px 5px rgba(0, 0, 0, 0.1); /* :root */
  --shadow-popover-soft: 0 8px 24px rgba(0, 0, 0, 0.08); /* :root */
  --divider-muted-alpha: rgba(79, 93, 105, 0.16); /* :root */
  --divider-highlight-alpha: rgba(133, 100, 4, 0.22); /* :root */
  --highlight-chip-border: rgba(133, 100, 4, 0.24); /* :root */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  --z-sticky: 110;
  --z-ui-controls: 120;
  --z-menu: 200;
  --z-overlay: 10000;

  --analysis-control-width: 248px;
  --analysis-control-gap: 8px;

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
               'Cascadia Code', Consolas, monospace;
  --font-feature-sans: 'tnum';
  /* tnum: tabular nums */
  --font-feature-mono: 'tnum', 'zero', 'ss05';
  /* tnum: tabular nums; zero/ss05: Plex Mono numeric alternates */

  /* Table system */
  --table-font-size-body: 13px;
  --table-font-size-head: var(--text-sm);
  --table-head-color: var(--slate-500);
  --table-head-weight: var(--font-weight-medium);
  --table-head-letter-spacing: 0.04em;
  --table-cell-pad-y: max(5px, calc(8px * var(--density-scale)));
  --table-cell-pad-x: max(8px, calc(12px * var(--density-scale)));
  --table-row-border: 1px solid var(--slate-100);
  --table-head-border: 1px solid var(--slate-200);
  --table-row-hover-bg: var(--slate-50);
}

body {
  margin: 0; /* Remove large default margin */
  padding: 0; /* Remove default padding */
  font-family: var(--font-sans); /* Clean, modern font */
  font-feature-settings: var(--font-feature-sans);
  font-weight: var(--font-weight-regular); /* Normal font weight */
  color: var(--dark-gray); /* Dark gray text color for readability */
  background: var(--light-gray); /* Light gray background for a clean look */
  line-height: var(--leading-body);
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  flex-shrink: 0;
  stroke-width: 2;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.icon-lg {
  width: 20px;
  height: 20px;
}

/* Typographic scale - heading roles
   -------------------------------------------------
   h1            page title (Peptalyzer)
   h2            card title
   h3            subsection within a card
   h4            sub-subsection (rare; use sparingly)
   ------------------------------------------------- */
h1 {
  font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--secondary-blue); margin: 0;
}

h2,
.card-header h2,
.card-header h3 {
  font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-normal); color: var(--text-ink); margin: 0;
}

h3 {
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-weight-semibold); line-height: var(--leading-normal); color: var(--text-ink); margin: 0;
}

h4 {
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--leading-normal); color: var(--text-ink); margin: 0;
}

body {
  font-size: var(--text-base); line-height: var(--leading-body);
}

.site-header {
  background: var(--surface-white);
  border-bottom: 1px solid var(--neutral-divider);
  padding: 14px 20px;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center; /* Center the title and logo */
}

.logo {
  height: 48px; /* Increased from 36px */
  width: auto;
}

.dashboard-container {
  padding: 0 var(--pad-dashboard-x) var(--pad-dashboard-bottom);
  max-width: 1400px;
  margin: 0 auto;
  min-width: 0;
}

/* ====== Loading Overlay ====== */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-white-alpha-90);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loading-logo-wrap {
  width: clamp(68px, 9vw, 92px);
  aspect-ratio: 1 / 1;
  border: 2px solid var(--interactive-blue-alpha-20);
  border-top-color: var(--secondary-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: peptalyzer-spin 1.2s linear infinite;
}

.loading-logo {
  max-width: 62%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: peptalyzer-pulse 1.6s ease-in-out infinite;
}

.loading-text {
  font-weight: var(--font-weight-semibold);
  color: var(--secondary-blue);
}

.loading-progress {
  width: min(280px, 72vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--neutral-track);
  box-shadow: inset 0 0 0 1px var(--surface-border);
}

.loading-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-red);
  transition: width var(--transition-base);
}

.loading-progress-text {
  min-height: 18px;
  max-width: min(340px, 82vw);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-align: center;
}

.synthesis-lazy-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--space-4) var(--space-3);
  color: var(--text-muted);
}

.synthesis-lazy-progress {
  width: min(360px, 80vw);
}

@keyframes peptalyzer-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes peptalyzer-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(0.92);
  }
}

.site-footer a {
  color: var(--secondary-blue);       /* Your primary "Peptide Blue" */
  text-decoration: none; /* No underline by default */
  font-weight: var(--font-weight-bold);      /* Bold text to make it stand out */
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--secondary-blue-dark);       /* Darker blue on hover */
  text-decoration: underline;
}

/* ====== Input, Select, Button Styles ====== */
input,
select,
textarea,
button {
  margin: 10px 0; /* Adds vertical spacing */
  padding: 0.5rem; /* Adds internal padding for click/tap targets */
  font-family: var(--font-sans);
  font-size: var(--text-md); /* Ensures consistent font sizing */
  box-sizing: border-box; /* Includes padding and border in width calculations */
}

/* Highlight elements on focus for accessibility */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 2px solid var(--primary-blue); /* Blue outline for focus */
  outline-offset: 2px; /* Adds space between the element and the outline */
}

.sequence-row input,
.sequence-row textarea,
.sequence-row select {
  width: 100%; /* Makes inputs and selects full width in their container */
}

/* Primary Button Styles */
button {
  background-color: var(--primary-red); /* Primary red color */
  color: var(--surface-white); /* White text */
  border: none; /* Removes default button border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth hover transition */
}

/* Button hover effect */
button:hover {
  background-color: var(--hover-red); /* Keep within palette */
  filter: brightness(0.95);
}

/* Disabled/Loading Button Styles */
button:disabled,
button.loading {
  background-color: var(--disabled-gray); /* Greyed out appearance */
  cursor: not-allowed; /* Visual indication of non-interactivity */
}

/* Scoped interaction improvements (additive) */
button[type="submit"] {
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-base);
}

button[type="submit"]:hover:not(:disabled) {
  box-shadow: var(--shadow-sm);
}

button[type="submit"]:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-blue);
}

button[type="submit"]:active:not(:disabled) {
  transform: translateY(1px);
}

button[type="submit"]:disabled {
  box-shadow: none;
  transform: none;
}

/* ====== Form Layout ====== */
.control-deck {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-white);
  padding: 15px 20px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}

.form-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.control-deck.unpinned {
  position: relative; /* Removes sticky behavior but keeps button anchored */
  box-shadow: none; /* Optional: remove shadow when not sticky */
  border-bottom: 1px solid var(--neutral-divider); /* Add border instead */
}

.deck-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: var(--z-ui-controls); /* Above form elements */
  display: flex;
  gap: 8px;
}

.deck-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--primary-blue);
  margin: 0;
  padding: 5px;
  width: auto;
  height: auto;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.deck-btn:hover {
  background-color: var(--interactive-blue-alpha-08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  z-index: 2000;
}

.deck-btn.is-active {
  background-color: var(--interactive-blue-alpha-12);
  box-shadow: var(--shadow-sm);
}

.deck-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  z-index: 2000;
}

.deck-btn:active {
  transform: scale(0.97);
}

/* View Settings Menu */
.view-settings-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 220px;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#viewSettingsMenu.view-settings-menu {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.view-settings-menu.menu-min-180 {
  width: max-content;
  min-width: 180px;
}

.view-settings-menu.resource-links-menu {
  width: max-content;
  min-width: 0;
  padding: 6px;
  gap: 4px;
}

.view-settings-menu.resource-links-menu .dropdown-link {
  margin: 0;
  padding: 4px 6px;
  font-size: var(--text-base);
  line-height: 1.25;
  border-radius: 6px;
  text-align: left;
  white-space: nowrap;
}

.view-settings-menu.noncanonical-info-menu {
  width: max-content;
  min-width: 250px;
  left: calc(100% + 10px);
  right: auto;
  top: -4px;
}

.view-settings-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.view-settings-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--surface-border-soft);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.view-settings-persistence-note {
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--info-text);
  margin-top: -2px;
  margin-bottom: 2px;
}

.view-settings-select-all {
  flex: 1;
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.view-settings-reset-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0;
  padding: 0;
  align-self: center;
}

.view-settings-section {
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  margin-top: 8px;
  border-bottom: 1px solid var(--surface-border-soft);
  padding-bottom: 3px;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.5px;
}

.view-settings-section-title {
  flex: 1;
  min-width: 0;
}

.view-settings-section-order-controls {
  margin-left: auto;
}

.view-settings-card-row {
  justify-content: space-between;
  margin-left: 15px;
  border-radius: 6px;
  padding: 1px 3px;
}

.view-settings-card-label {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 2px 0;
  overflow: hidden;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-settings-card-label:hover,
.view-settings-card-label:focus-visible {
  background: transparent;
  color: var(--interactive-selected-text);
  filter: none;
  text-decoration: underline;
  transform: none;
}

.view-settings-card-toggle {
  flex: 0 0 auto;
}

.view-settings-card-row[draggable="true"] {
  cursor: grab;
}

.view-settings-card-row.is-dragging {
  opacity: 0.55;
}

.view-settings-card-row.is-drop-target {
  background: var(--interactive-drop-bg);
  outline: 1px dashed var(--interactive-drop-border);
}

.view-settings-order-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}

.view-settings-order-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--secondary-blue);
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1;
  border-radius: 0;
  outline: none;
}

.view-settings-order-btn:hover:not(:disabled),
.view-settings-order-btn:focus-visible:not(:disabled) {
  background: transparent;
  filter: none;
  color: var(--interactive-selected-text);
  box-shadow: none;
  transform: none;
}

.view-settings-order-btn:disabled {
  background: transparent;
  color: var(--slate-400);
  cursor: default;
  box-shadow: none;
  transform: none;
}

.card-hidden {
  display: none !important;
}

.dropdown-link {
  text-decoration: none;
  color: var(--dark-gray);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: var(--text-base);
  display: block;
  text-align: left;
  transition: background-color 0.2s;
}

.dropdown-link:hover {
  background-color: var(--info-bg);
  color: var(--primary-blue);
}

.input-main {
  display: flex;
  align-items: stretch;
  gap: 10px;
  justify-content: center; /* Center the group */
}

.analyze-action-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 8px;
}

.mobile-analyze-row {
  display: none;
}

.sequence-styles-menu {
  width: max-content;
  min-width: 300px;
  right: 0;
  top: calc(100% + 6px);
}

.sequence-styles-title {
  font-weight: var(--font-weight-bold);
  color: var(--dark-gray);
  margin-bottom: 4px;
}

.sequence-styles-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.input-main input,
.input-main textarea,
.sequence-input-wrap {
  flex: 0 1 600px; /* Allow shrinking, limit max width */
  min-width: 220px;
}

.input-main input,
.input-main textarea {
  min-width: 220px;
  resize: vertical; /* Allow vertical resizing */
  font-family: var(--font-sans);
  min-height: 44px; /* Ensure consistent touch target size */
  height: 44px; /* Force single line initial state */
}

.sequence-input-wrap {
  position: relative;
}

.sequence-input-wrap textarea {
  width: 100%;
  padding-right: 38px;
}

.sequence-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--info-text);
  font-size: var(--text-md);
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sequence-clear-btn:hover,
.sequence-clear-btn:focus-visible {
  background: var(--info-bg);
  color: var(--interactive-selected-text);
}

.input-main select {
  margin: 10px 0; /* Match input margin */
}

.terminus-select {
  appearance: auto;
  -webkit-appearance: menulist;
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
  height: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 12px;
  background: var(--surface-white);
  color: var(--dark-gray);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 1px 0 var(--surface-white-alpha-92);
  line-height: 1.1;
  font-size: var(--text-base);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.terminus-select:hover {
  border-color: var(--neutral-hover-border);
  background: var(--neutral-hover-bg);
}

.terminus-select:focus,
.terminus-select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-color: var(--interactive-selected-border);
  box-shadow: var(--shadow-focus-blue-soft);
}

.terminus-select:disabled {
  background: var(--neutral-disabled-bg);
  color: var(--neutral-disabled-text);
  border-color: var(--neutral-disabled-border);
  opacity: 0.82;
  box-shadow: none;
  cursor: not-allowed;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap-control) * 2);
  margin-top: 10px;
  align-items: flex-start;
  justify-content: center;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--analysis-control-gap);
  min-width: 160px;
  justify-content: flex-start;
}

.mobile-control-toggle {
  display: none;
}

.mobile-control-panel {
  display: contents;
}

.control-group label {
  font-weight: var(--font-weight-semibold);
}

.control-panel-heading,
.ss-inputs-heading {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  color: var(--dark-gray);
  margin: 0;
}

.control-value-badge {
  display: inline-block;
  min-width: 0;
  margin-left: 4px;
  padding: 0;
  color: var(--interactive-selected-text);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ph-group,
.disulfide-group,
.noncanonical-group {
  align-items: center;
}

.ph-group .control-panel-heading,
.ss-pairs-label,
.noncanonical-header label {
  width: var(--analysis-control-width);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  color: var(--dark-gray);
}

.ph-group .control-panel-heading {
  gap: 4px;
}

.ph-slider-wrap {
  width: var(--analysis-control-width);
  margin-top: 0;
  padding: 0;
}

.ph-slider-input {
  --ph-progress: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--secondary-blue) 0,
    var(--secondary-blue) var(--ph-progress),
    var(--neutral-track) var(--ph-progress),
    var(--neutral-track) 100%
  );
  cursor: pointer;
  box-shadow: none;
}

.ph-slider-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-blue-subtle);
}

.ph-slider-input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.ph-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 1px solid var(--surface-white);
  border-radius: 50%;
  background: var(--secondary-blue);
  box-shadow: 0 0 0 2px var(--interactive-blue-alpha-16);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ph-slider-input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--secondary-blue) 0,
    var(--secondary-blue) var(--ph-progress),
    var(--neutral-track) var(--ph-progress),
    var(--neutral-track) 100%
  );
}

.ph-slider-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid var(--surface-white);
  border-radius: 50%;
  background: var(--secondary-blue);
  box-shadow: 0 0 0 2px var(--interactive-blue-alpha-16);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.ph-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ss-inputs {
  display: flex;
  gap: 8px;
}

.ss-inputs-heading {
  margin-bottom: 6px;
}

.disulfide-group .ss-count-mode .ss-inputs-heading,
.disulfide-group .ss-count-mode .ss-inputs {
  width: 148px;
}

.ss-input-group {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.ss-input-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  color: var(--text-subtle);
}

.ss-number-wrap {
  position: relative;
  width: 70px;
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  background: var(--surface-white);
  overflow: hidden;
  box-sizing: border-box;
}

.ss-number-wrap:focus-within {
  border-color: var(--interactive-selected-border);
  box-shadow: var(--shadow-focus-blue-soft);
}

.ss-number-wrap input {
  width: 100%;
  margin: 0;
  padding: 0 19px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ss-number-wrap input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.ss-number-wrap input[type="number"]::-webkit-outer-spin-button,
.ss-number-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ss-inline-stepper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--surface-border-soft);
  background: var(--surface-muted);
}

.ss-inline-step-btn {
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-muted);
  color: var(--text-subtle);
  box-shadow: none;
}

.ss-inline-step-btn + .ss-inline-step-btn {
  border-top: 1px solid var(--surface-border-soft);
}

.ss-inline-step-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.ss-inline-step-btn-up::before {
  border-bottom: 5px solid currentColor;
}

.ss-inline-step-btn-down::before {
  border-top: 5px solid currentColor;
}

.ss-inline-step-btn:hover:not(:disabled),
.ss-inline-step-btn:focus-visible:not(:disabled) {
  background: var(--interactive-hover-strong-bg);
  color: var(--interactive-selected-text);
  box-shadow: none;
}

.ss-inline-step-btn:disabled {
  color: var(--disabled-gray);
  cursor: not-allowed;
}

.ss-pairs-group {
  margin-top: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.ss-pairs-label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.disulfide-picker {
  width: var(--analysis-control-width);
  margin-top: 0;
  box-sizing: border-box;
}

.disulfide-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.disulfide-keyboard-panel {
  width: 332px;
  max-height: min(74vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.disulfide-keyboard-panel .peptide-keyboard-panel-header {
  justify-content: space-between;
}

.disulfide-pair-usage {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.ss-pair-rows {
  display: grid;
  gap: 8px;
}

.ss-pair-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ss-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.ss-inter-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.ss-inter-endpoint {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.ss-pair-arrow {
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.ss-pair-select {
  width: 100%;
  min-width: 0;
}

.ss-pair-select-unit {
  min-width: 88px;
}

.ss-pair-remove-btn {
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
}

.ss-pair-actions {
  display: flex;
  justify-content: flex-end;
}

.ss-pair-add-btn {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.ss-inter-config {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ss-inter-config-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-subtle);
}

.ss-inter-availability {
  min-height: 0;
}

.ss-topology-section + .ss-topology-section {
  border-top: 1px solid var(--surface-border-soft);
  margin-top: 10px;
  padding-top: 10px;
}

.ss-topology-section .peptide-keyboard-title-row {
  justify-content: flex-start;
}

.ss-topology-section .peptide-keyboard-title {
  margin-right: auto;
}

.ss-topology-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

.ss-builder-config {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ss-lane-builder {
  position: relative;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 10px 8px;
  min-height: 84px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  --ss-lane-content-width: 100%;
}

.ss-lane-builder.is-scrollable,
.ss-sidechain-lane-builder.is-scrollable {
  scrollbar-color: var(--primary-blue) var(--interactive-blue-alpha-12);
  scrollbar-width: thin;
  box-shadow:
    inset -18px 0 18px -20px var(--interactive-blue-alpha-90),
    inset 18px 0 18px -20px var(--interactive-blue-alpha-45);
}

.ss-lane-builder.is-scrollable::after,
.ss-sidechain-lane-builder.is-scrollable::after {
  content: "\203A";
  position: sticky;
  right: 8px;
  top: 0;
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--interactive-blue-alpha-25);
  border-radius: 999px;
  background: var(--surface-white-alpha-92);
  color: var(--primary-blue);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  pointer-events: none;
  z-index: 4;
}

.ss-bond-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ss-lane-content-width, 100%);
  height: 100%;
  pointer-events: none;
}

.ss-lane-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
  min-height: 46px;
  margin-bottom: 10px;
  width: var(--ss-lane-content-width, 100%);
  min-width: 100%;
}

.ss-lane-row:last-child {
  margin-bottom: 0;
}

.ss-lane-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-subtle);
  text-align: center;
}

.ss-lane-track {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
}

.ss-lane-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1px solid var(--neutral-line);
  z-index: 0;
}

.ss-lane-nodes {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ss-cys-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--node-border);
  background: var(--surface-white);
  color: var(--dark-gray);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  z-index: 2;
}

.ss-cys-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-white);
  z-index: -1;
}

.ss-cys-node:hover:not(:disabled),
.ss-cys-node:focus-visible:not(:disabled) {
  border-color: var(--interactive-selected-border);
  background: var(--node-hover-bg);
  color: var(--interactive-selected-text);
  box-shadow: none;
}

.ss-cys-node.is-selected {
  border-color: var(--node-selected-border);
  background: var(--node-selected-bg);
  color: var(--node-selected-text);
}

.ss-cys-node.is-occupied {
  border-color: var(--node-occupied-border);
  background: var(--node-occupied-bg);
  color: var(--node-occupied-text);
}

.ss-cys-node.is-paired {
  font-weight: var(--font-weight-bold);
}

.ss-cys-node:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.ss-bond-list {
  display: grid;
  gap: 6px;
}

.ss-bond-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}

.ss-bond-label {
  font-size: var(--text-sm);
  color: var(--dark-gray);
}

.ss-sidechain-lane-builder {
  position: relative;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-muted);
  min-height: 52px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  --ss-lane-content-width: 100%;
}

.ss-sidechain-residue-picker {
  position: relative;
  display: grid;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  min-height: 0;
}

.ss-sidechain-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 42px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--node-border);
  background: var(--surface-white);
  color: var(--dark-gray);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  z-index: 1;
}

.ss-sidechain-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-white);
  z-index: -1;
}

.ss-sidechain-node:hover:not(:disabled),
.ss-sidechain-node:focus-visible:not(:disabled) {
  border-color: var(--interactive-selected-border);
  background: var(--node-hover-bg);
  color: var(--interactive-selected-text);
  box-shadow: none;
}

.ss-sidechain-node.is-selected {
  border-color: var(--node-selected-border);
  background: var(--node-selected-bg);
  color: var(--node-selected-text-alt);
}

.ss-sidechain-node.is-annotated {
  border-color: var(--secondary-blue);
  color: var(--node-annotated-text);
  background: var(--interactive-hover-strong-bg);
}

.ss-sidechain-selection-hint {
  margin-top: 4px;
}

.ss-sidechain-picker-controls {
  display: grid;
  gap: 6px;
}

.ss-sidechain-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ss-sidechain-picker-row select {
  margin: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
  color: var(--dark-gray);
  font-size: var(--text-sm);
  line-height: 1.2;
  box-shadow: none;
}

.ss-sidechain-picker-row select:focus,
.ss-sidechain-picker-row select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-color: var(--interactive-selected-border);
}

.ss-sidechain-picker-row .peptide-keyboard-info-btn {
  margin: 0;
  min-width: 56px;
}

.topology-info-menu {
  min-width: min(300px, calc(100vw - 28px));
  max-width: min(340px, calc(100vw - 28px));
  right: 0;
  left: auto;
  box-sizing: border-box;
}

.topology-info-floating {
  position: fixed !important;
  z-index: calc(var(--z-menu) + 30);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.topology-info-menu .sequence-styles-row {
  grid-template-columns: 1fr;
}

.ss-sidechain-annotation-list {
  display: grid;
  gap: 6px;
}

.ss-terminal-editor-rows {
  display: grid;
  gap: 8px;
}

.ss-terminal-editor-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.ss-terminal-editor-row-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-subtle);
}

.ss-terminal-editor-row select {
  margin: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
  color: var(--dark-gray);
  font-size: var(--text-sm);
  line-height: 1.2;
  box-shadow: none;
}

.ss-terminal-editor-row select:focus,
.ss-terminal-editor-row select:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-color: var(--interactive-selected-border);
}

.ss-sidechain-advanced-entry {
  border: 1px solid var(--surface-border-soft);
  border-radius: 8px;
  background: var(--surface-white);
  overflow: hidden;
}

.ss-sidechain-advanced-entry > summary {
  padding: 7px 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-subtle);
  user-select: none;
}

.ss-sidechain-advanced-entry[open] > summary {
  border-bottom: 1px solid var(--surface-border-soft);
}

.ss-sidechain-advanced-body {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
}

.ss-sidechain-advanced-body label {
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.ss-sidechain-advanced-body input {
  margin: 0;
}

.ss-count-mode {
  border-top: 1px solid var(--info-border);
  padding-top: 8px;
}

.ss-count-mode summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--info-text);
}

.ss-count-mode summary::-webkit-details-marker {
  display: none;
}

.ss-count-mode summary::after {
  content: "▾";
  margin-left: 8px;
  font-size: var(--text-sm);
  color: var(--text-subtle);
  transition: transform var(--transition-fast);
}

.ss-count-mode[open] summary::after {
  transform: rotate(180deg);
}

.ss-count-mode[open] .ss-inputs-heading {
  margin-top: 8px;
}

.ss-count-note {
  margin-top: 8px;
}

.noncanonical-picker {
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  background: var(--surface-white);
}

.noncanonical-group {
  min-width: var(--analysis-control-width);
}

.noncanonical-header {
  display: flex;
  justify-content: center;
  width: var(--analysis-control-width);
  min-height: 22px;
}

.noncanonical-header label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.noncanonical-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  width: var(--analysis-control-width);
  position: relative;
}

.noncanonical-picker {
  min-width: var(--analysis-control-width);
  margin: 0;
  width: var(--analysis-control-width);
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

.noncanonical-picker summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-muted);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.noncanonical-picker summary::-webkit-details-marker {
  display: none;
}

.noncanonical-picker summary::after {
  content: "▾";
  color: var(--text-subtle);
  font-size: var(--text-sm);
  margin-left: 8px;
  transition: transform var(--transition-fast);
}

.noncanonical-picker[open] summary {
  border-bottom: 1px solid var(--surface-border-soft);
}

.noncanonical-picker[open] summary::after {
  transform: rotate(180deg);
}

.noncanonical-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.peptide-keyboard-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  background: var(--surface-white);
  border: 1px solid var(--surface-border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-menu);
  box-sizing: border-box;
}

.peptide-keyboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--info-border);
}

.peptide-keyboard-panel-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--info-text);
}

.peptide-keyboard-panel-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.peptide-keyboard-close-btn {
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-subtle);
  padding: 0;
  margin: 0;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.peptide-keyboard-close-btn:hover {
  background-color: var(--interactive-hover-bg);
  color: var(--interactive-selected-text);
  border-color: var(--interactive-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.peptide-keyboard-close-btn:focus,
.peptide-keyboard-close-btn:focus-visible {
  background-color: var(--interactive-hover-bg);
  color: var(--interactive-selected-text);
  border-color: var(--interactive-hover-border);
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.peptide-keyboard-close-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.peptide-keyboard-section {
  display: grid;
  gap: 6px;
  position: relative;
}

.peptide-keyboard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.peptide-keyboard-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--info-border);
  border-radius: 999px;
  background: var(--info-bg);
}

.peptide-keyboard-mode-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: 6px 9px;
  margin: 0;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.peptide-keyboard-mode-btn.is-active {
  background: var(--interactive-selected-bg);
  color: var(--interactive-selected-text);
  box-shadow: inset 0 0 0 1px var(--interactive-selected-border);
}

.peptide-keyboard-mode-btn:hover,
.peptide-keyboard-mode-btn:focus-visible {
  background: var(--interactive-hover-strong-bg);
  color: var(--interactive-selected-text);
}

.peptide-keyboard-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--info-text);
}

.peptide-keyboard-info-btn {
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-subtle);
  padding: 0;
  margin: 0;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  box-sizing: border-box;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.peptide-keyboard-info-btn:hover {
  background-color: var(--interactive-hover-bg);
  color: var(--interactive-selected-text);
  border-color: var(--interactive-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.peptide-keyboard-info-btn:focus,
.peptide-keyboard-info-btn:focus-visible {
  background-color: var(--interactive-hover-bg);
  color: var(--interactive-selected-text);
  border-color: var(--interactive-hover-border);
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.peptide-keyboard-info-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.peptide-keyboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.peptide-keyboard-grid-noncanonical {
  gap: 7px;
}

.peptide-key-btn,
.peptide-key-action-btn {
  border: 1px solid var(--info-border);
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--interactive-selected-text);
  text-align: center;
  padding: 7px 10px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  min-width: 38px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.peptide-key-btn-canonical {
  background: var(--surface-white);
}

.peptide-key-btn-canonical.is-three-letter {
  min-width: 52px;
}

.peptide-key-btn-noncanonical {
  color: var(--noncanonical-text);
  background: var(--noncanonical-bg);
  border-color: var(--noncanonical-border);
  min-width: 58px;
}

.peptide-keyboard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.peptide-key-action-btn {
  min-width: 0;
  background: var(--surface-white);
}

.peptide-key-action-btn-wide {
  grid-column: span 1;
}

.peptide-key-btn:hover:not(:disabled),
.peptide-key-btn:focus-visible:not(:disabled),
.peptide-key-action-btn:hover:not(:disabled),
.peptide-key-action-btn:focus-visible:not(:disabled) {
  background: var(--interactive-hover-strong-bg) !important;
  border-color: var(--interactive-selected-border) !important;
  color: var(--interactive-selected-text) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue-lift);
}

.peptide-key-btn:focus-visible,
.peptide-key-action-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.peptide-key-btn:active:not(:disabled),
.peptide-key-action-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
  background: var(--interactive-selected-bg);
  border-color: var(--interactive-selected-border);
  color: var(--interactive-selected-text);
}

.peptide-key-btn-noncanonical:focus-visible {
  outline: 2px solid var(--noncanonical-focus);
  outline-offset: 2px;
}

.peptide-key-btn-noncanonical:hover:not(:disabled),
.peptide-key-btn-noncanonical:focus-visible:not(:disabled) {
  background: var(--noncanonical-hover-bg) !important;
  border-color: var(--noncanonical-hover-border) !important;
  color: var(--noncanonical-hover-text) !important;
  box-shadow: 0 6px 14px var(--noncanonical-shadow);
}

.peptide-key-btn-noncanonical:active:not(:disabled) {
  background: var(--noncanonical-active-bg);
  border-color: var(--noncanonical-hover-border);
  color: var(--noncanonical-active-text);
}

.control-note {
  font-size: var(--text-sm);
  color: var(--info-strong);
  line-height: 1.3;
  min-height: 16px;
  margin-top: 6px;
}

.control-note.is-error {
  color: var(--warning-text);
}

.noncanonical-reference-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--info-text);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--info-border);
}

.noncanonical-reference-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  align-items: start;
  font-size: var(--text-sm);
  color: var(--dark-gray);
}

.noncanonical-reference-row span:first-child {
  font-weight: var(--font-weight-bold);
  color: var(--interactive-selected-text);
}

@media (max-width: 768px) {
  #noncanonicalInfoMenu {
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 8px) !important;
  }

  .noncanonical-picker {
    border: 0;
    background: transparent;
  }

  .noncanonical-picker summary {
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    background: var(--surface-white);
  }

  .peptide-keyboard-panel {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
    margin-top: 8px;
    padding: 10px;
    background: var(--surface-white);
    border: 1px solid var(--surface-border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
  }

  .disulfide-keyboard-panel {
    max-height: 68vh;
    overflow-y: auto;
  }
}

.sequence-error {
  margin-top: 6px;
  color: var(--warning-text);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#sequence.input-invalid {
  border: 1px solid var(--input-invalid-border);
  background: var(--input-invalid-bg);
}

.status-message,
.submit-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: var(--leading-body);
  border: 1px solid transparent;
  opacity: 1;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.submit-status.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}

.status-message.is-info,
.submit-status.is-info {
  color: var(--info-strong);
  background: var(--info-bg);
  border-color: var(--info-border);
}

.status-message.is-success,
.submit-status.is-success {
  color: var(--success-text);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.status-message.is-error,
.submit-status.is-error {
  color: var(--warning-text);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

/* ====== Slider and Button Row (legacy) ====== */
.form-action-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* ====== Dashboard Grid Layout ======
   Sequence-analysis cards are rebalanced into dynamic left/right columns by JS.
   This avoids fixed-column holes and also avoids CSS-grid row gaps when cards
   have very different heights. */
.sequence-fixed-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card-grid);
  margin-bottom: var(--gap-card-grid);
}

.results-grid {
  display: flex;
  gap: var(--gap-card-grid);
  align-items: flex-start;
}

.left-col,
.right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-card-grid);
  min-width: 0; /* Prevent flex overflow */
}

@media (max-width: 768px) {
  .sequence-fixed-stack {
    gap: var(--gap-card-grid);
    margin-bottom: var(--gap-card-grid);
  }

  .results-grid {
    flex-direction: column;
  }
  .left-col, .right-col {
    width: 100%;
  }
  .right-col:empty {
    display: none;
  }
}

.bottom-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card-grid);
  min-width: 0;
}

.support-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card-grid);
  min-width: 0;
}

/* ====== Result Tabs ====== */
.result-tabs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 6px 4px;
  border-top: 1px solid var(--neutral-divider);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.result-tab {
  --result-tab-accent: var(--secondary-blue);
  --result-tab-active-text: var(--result-tab-accent);

  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-white);
  border: 1px solid var(--surface-border-soft);
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 9px 16px;
  position: relative;
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.result-tab-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

.result-tab-icon--analysis-tools {
  fill: none;
}

.result-tab[data-tab-target="sequence"] {
  --result-tab-accent: var(--secondary-blue);
}

.result-tab[data-tab-target="synthesis"] {
  --result-tab-accent: var(--primary-red);
}

.result-tab[data-tab-target="analytical"] {
  --result-tab-accent: var(--analysis-tools-green);
  --result-tab-active-text: var(--analysis-tools-green-dark);
}

.result-tab[data-tab-target="support"] {
  --result-tab-accent: var(--accent-yellow);
  --result-tab-active-text: var(--support-strong);
}

.result-tab:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--result-tab-active-text);
  background: var(--neutral-hover-bg);
  border-color: var(--result-tab-accent);
}

.result-tab.is-active {
  background: var(--surface-white);
  color: var(--result-tab-active-text);
  border-bottom-color: var(--result-tab-accent);
  box-shadow: inset 0 2px 0 var(--result-tab-accent);
  font-weight: var(--font-weight-bold);
}

.result-tab:disabled,
.result-tab[aria-disabled="true"] {
  color: var(--neutral-disabled-text);
  cursor: not-allowed;
  opacity: 0.55;
}

.result-tab[data-tab-target="support"]:disabled,
.result-tab[data-tab-target="support"][aria-disabled="true"] {
  background: var(--surface-white);
  border-color: var(--support-border);
  border-bottom-color: transparent;
  color: var(--support-text);
  opacity: 0.72;
}

.result-tab[data-tab-target="support"]:disabled:hover,
.result-tab[data-tab-target="support"][aria-disabled="true"]:hover {
  background: var(--surface-white);
  color: var(--support-text);
  opacity: 1;
}

.result-tab-disabled-tooltip {
  position: fixed;
  z-index: 11000;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--support-border);
  border-radius: 4px;
  background: var(--support-bg);
  box-shadow: var(--shadow-sm);
  color: var(--dark-gray);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
}

.result-tab:focus-visible {
  outline: 2px solid var(--result-tab-accent);
  outline-offset: -2px;
}

.result-tab-panel[hidden] { display: none; }

@media (max-width: 600px) {
  .result-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding: 6px 4px 0;
  }

  .result-tab {
    min-width: 0;
    width: 100%;
    height: 64px;
    box-sizing: border-box;
    align-self: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px 6px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }

  .result-tab.is-active {
    font-weight: var(--font-weight-semibold);
  }

  .result-tab-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .result-tab span {
    display: block;
    max-width: 100%;
  }
}

/* Side-by-side chart and table */
.chart-table-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.chart-container {
  flex: 0 0 var(--chart-container-basis);
  display: flex;
  flex-direction: column;
}

#card-charge-body .chart-table-row > .chart-container {
  flex-basis: 350px;
  max-width: 100%;
}

/* Keep both Amino Acids pie charts balanced and contained in-card */
#card-amino-acids-body .chart-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
}

#card-amino-acids-body .chart-table-row > .chart-container {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

#classPiePlot {
  overflow: visible;
}

/* Allow text-tooltip to escape the table in the Molecular Size card */
#card-molecular-size-body .table-container {
  overflow: visible;
}

#classPiePlot .plot-container,
#classPiePlot .svg-container {
  overflow: visible !important;
}

#classPiePlot svg {
  overflow: visible !important;
}

#card-amino-acids-body .graph-toolbar {
  width: 100%;
  min-height: 48px;
  align-items: flex-start;
}

#naturePiePlot,
#naturePiePlot-placeholder {
  height: 300px;
}

#classPiePlot,
#classPiePlot-placeholder {
  height: 300px;
}

#classPiePlot {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.mini-table-container {
  flex: 0 0 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
}

/* Custom Legend for Pie Charts */
.custom-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--light-gray);
  border-radius: 6px;
  font-size: var(--text-sm);
}

.legend-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-value {
  font-weight: var(--font-weight-bold);
}

/* ====== Result Card Component ====== */
.result-card {
  background: var(--surface-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.result-card[hidden] {
  display: none !important;
}

/* Tab-driven card accent - single source of truth for card top strip color. */
#panel-sequence { --tab-accent: var(--secondary-blue); }
#panel-synthesis { --tab-accent: var(--primary-red); }
#panel-analytical {
  --tab-accent: var(--analysis-tools-green);
  --analysis-tools-accent: var(--analysis-tools-green);
  --analysis-tools-active-text: var(--analysis-tools-green-dark);
  --analysis-tools-soft-bg: var(--analysis-tools-green-soft-bg);
  --analysis-tools-soft-border: var(--analysis-tools-green-soft-border);
}
#panel-support { --tab-accent: var(--accent-yellow); }

.card,
.result-card {
  border-top: var(--card-top-strip-width) solid var(--tab-accent, var(--slate-200));
}

.result-card.dragging {
  opacity: 0.5;
  border: 2px dashed var(--slate-300);
}

.result-card.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  overflow-y: auto;
}

/* Fullscreen Graph Mode */
.plotly-graph.fullscreen {
  position: fixed;
  top: clamp(12px, 2vh, 20px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1120px) !important;
  max-width: 1120px !important;
  height: calc(100vh - clamp(24px, 4vh, 40px)) !important;
  max-height: calc(100vh - clamp(24px, 4vh, 40px)) !important;
  z-index: 9999;
  background: var(--surface-white);
  padding: 14px;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  overflow: hidden; /* Prevent square graph corners from bleeding out */
}

/* Dedicated Close Button for Fullscreen Modal */
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
  background: var(--surface-white);
  border: none;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  color: var(--text-subtle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-tooltip-soft);
}

.modal-close-btn:hover {
  background-color: var(--interactive-hover-bg);
  color: var(--dark-gray);
}

/* Force hide Plotly native modebar to prevent duplicate icons */
.js-plotly-plot .plotly .modebar {
  display: none !important;
}

/* Net charge warning toolbar button */
#netChargeWarningBtn,
#piWarningBtn,
#identityPiWarningBtn,
#sequenceScopeWarningBtn,
#fingerprintWarningBtn,
#epsilon205WarningBtn,
#polarityWarningBtn,
#chargePieWarningBtn,
#secondaryStructureWarningBtn,
#bioMetricsWarningBtn,
#molecularSizeWarningBtn,
#residueTopologyWarningBtn,
#hydropathyWarningBtn,
#hydropathySummaryWarningBtn,
#hoppWoodsWarningBtn,
#wimleyWhiteWarningBtn,
#sppsWarningBtn,
#rescueWarningBtn,
#cleavageWarningBtn,
#zscaleInfoBtn,
#helicalMapWarningBtn,
#eisenbergModeWarningBtn,
#betaStrandModeWarningBtn {
  color: var(--warning-strong);
  border-color: var(--warning-border);
}

#netChargeWarningBtn.is-active,
#piWarningBtn.is-active,
#identityPiWarningBtn.is-active,
#sequenceScopeWarningBtn.is-active,
#fingerprintWarningBtn.is-active,
#epsilon205WarningBtn.is-active,
#polarityWarningBtn.is-active,
#chargePieWarningBtn.is-active,
#secondaryStructureWarningBtn.is-active,
#bioMetricsWarningBtn.is-active,
#molecularSizeWarningBtn.is-active,
#residueTopologyWarningBtn.is-active,
#hydropathyWarningBtn.is-active,
#hydropathySummaryWarningBtn.is-active,
#hoppWoodsWarningBtn.is-active,
#wimleyWhiteWarningBtn.is-active,
#sppsWarningBtn.is-active,
#rescueWarningBtn.is-active,
#cleavageWarningBtn.is-active,
#zscaleInfoBtn.is-active,
#sppsAssumptionsBtn.is-active,
#helicalMapWarningBtn.is-active,
#eisenbergModeWarningBtn.is-active,
#betaStrandModeWarningBtn.is-active {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

#sppsAssumptionsBtn.is-active {
  background-color: var(--info-bg);
  color: var(--info-strong);
  border-color: var(--info-border);
}

.graph-warning {
  font-size: var(--text-sm);
  color: var(--highlight-text);
  margin-top: 8px;
  line-height: var(--leading-body);
}

.graph-warning-spaced {
  margin-bottom: 16px;
}

.fingerprint-axis-row-wrap {
  display: grid;
  gap: 3px;
  margin: 2px 0;
  color: var(--text-ink);
  line-height: 1.25;
}

.fingerprint-axis-row-wrap.is-disabled {
  color: var(--text-muted);
}

.fingerprint-axis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.fingerprint-axis-main {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.fingerprint-axis-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.fingerprint-axis-checkbox {
  margin: 0;
  flex: 0 0 auto;
}

.fingerprint-axis-label {
  display: block;
  min-width: 0;
}

.fingerprint-axis-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
}

.fingerprint-axis-tag-terminal {
  min-width: 20px;
}

.fingerprint-axis-tag-approx {
  color: var(--noncanonical-active-text);
  background: var(--fingerprint-tag-approx-bg);
  border-color: var(--fingerprint-tag-approx-border);
}

.fingerprint-axis-tag-terminal-termini-aware {
  color: var(--fingerprint-tag-terminal-text);
  background: var(--fingerprint-tag-terminal-bg);
  border-color: var(--fingerprint-tag-terminal-border);
}

.fingerprint-axis-tag-unavailable {
  color: var(--fingerprint-tag-unavailable-text);
  background: var(--fingerprint-tag-unavailable-bg);
  border-color: var(--fingerprint-tag-unavailable-border);
}

.fingerprint-empty-state {
  color: var(--text-muted);
}

.fingerprint-axis-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider-muted-alpha);
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--text-slate);
}

.fingerprint-axis-legend-label {
  font-weight: var(--font-weight-bold);
  color: var(--text-ink);
}

.fingerprint-axis-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fingerprint-axis-legend-note {
  color: var(--text-muted);
}

.fingerprint-axis-reason-toggle {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  border-radius: 999px;
  color: var(--info-strong);
  border-color: var(--info-border);
  background: var(--info-bg);
  flex: 0 0 auto;
  box-shadow: none;
}

.fingerprint-axis-reason-toggle:hover,
.fingerprint-axis-reason-toggle:focus-visible {
  background: var(--interactive-hover-strong-bg);
  color: var(--interactive-selected-text);
  border-color: var(--interactive-hover-strong-border);
  box-shadow: none;
}

.fingerprint-axis-reason {
  padding: 5px 7px;
  margin-left: 19px;
  border-left: 2px solid var(--info-border);
  color: var(--info-text);
  background: var(--info-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.result-sequence-box {
  max-height: 120px;
  overflow-x: auto;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-white);
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-feature-mono);
  line-height: var(--leading-body);
  white-space: pre;
  text-align: left;
  tab-size: 2;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

.sequence-position-marker {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--primary-blue);
}

.spps-warning-box {
  display: none;
  margin-top: 15px;
  padding: 12px;
  background-color: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 4px;
  color: var(--highlight-text);
  line-height: var(--leading-body);
}

.spps-warning-item {
  margin-top: 8px;
}

.synthesis-scope-note {
  display: block;
  margin-top: 0;
}

.synthesis-scope-note .spps-warning-item {
  margin-top: 0;
}

.spps-warning-item-first {
  margin-bottom: 6px;
}

.spps-warning-meta {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--divider-highlight-alpha);
}

.spps-warning-meta.is-muted {
  color: var(--support-text);
}

.spps-warning-meta-label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}

.spps-warning-meta-list {
  margin: 0;
  padding-left: 18px;
}

.spps-warning-meta-list li + li {
  margin-top: 3px;
}

.spps-assumptions-panel {
  display: grid;
  gap: 10px;
  color: var(--text-ink);
}

.spps-assumptions-summary {
  padding: 10px 12px;
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  line-height: var(--leading-body);
}

.spps-assumptions-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.spps-assumptions-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-white);
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--support-text);
}

.spps-assumptions-table-container {
  overflow: visible;
}

.spps-assumptions-table-shell {
  background: var(--surface-white);
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
}

.result-card .table-primary.spps-assumptions-table {
  table-layout: auto;
}

.spps-assumptions-table {
  min-width: 1100px;
  margin: 0;
}

.spps-assumptions-table td:not(.spps-assumptions-basis) {
  white-space: nowrap;
}

.cleavage-control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.rescue-control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.cleavage-linker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.rescue-threshold {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  max-width: none;
}

.cleavage-top-controls {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.rescue-top-controls {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.cleavage-linker label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--info-text);
  white-space: nowrap;
}

.rescue-threshold label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--info-text);
  white-space: nowrap;
}

.rescue-help-anchor,
.rescue-map-toggle {
  position: relative;
}

.rescue-help-anchor {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--support-text) 55%, transparent);
  text-underline-offset: 3px;
}

.rescue-help-anchor::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--tooltip-offset));
  z-index: var(--tooltip-z-index);
  width: max-content;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-bg);
  box-shadow: var(--shadow-tooltip);
  color: var(--tooltip-text);
  content: attr(data-tooltip);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-decoration: none;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
  visibility: hidden;
  white-space: normal;
}

.rescue-help-anchor:hover::after,
.rescue-help-anchor:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.cleavage-linker select {
  width: min(56vw, 380px);
  min-height: 32px;
}

.rescue-threshold select {
  width: 150px;
  min-height: 32px;
}

.cleavage-column__rationale,
.cleavage-copy-status,
.rescue-copy-status,
.calc-copy-status {
  margin: 0;
  color: var(--support-text);
  line-height: var(--leading-body);
}

.cleavage-copy-status,
.rescue-copy-status,
.calc-copy-status {
  display: block;
  min-height: 18px;
}

.calc-form {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.calc-form-section {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--surface-border-soft);
  border-left: 5px solid var(--primary-red);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.calc-form-section-title {
  color: var(--primary-red);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calc-form-section > summary,
.calc-double-couple > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
}

.calc-form-section > summary::marker,
.calc-form-section > summary::-webkit-details-marker,
.calc-double-couple > summary::marker,
.calc-double-couple > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.calc-form-section > summary::before,
.calc-double-couple > summary::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  content: "";
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  transition: transform var(--transition-fast);
}

.calc-form-section[open] > summary,
.calc-double-couple[open] > summary {
  padding-bottom: 8px;
}

.calc-form-section[open] > summary::before,
.calc-double-couple[open] > summary::before {
  transform: rotate(90deg);
}

.calc-section-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 14px;
}

.calc-secondary-btn {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--support-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-base), border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}

.calc-secondary-btn:hover,
.calc-secondary-btn:focus-visible {
  background: var(--surface-white);
  border-color: var(--primary-red);
  color: var(--primary-red);
  filter: brightness(0.95);
  box-shadow: var(--shadow-sm);
}

.calc-secondary-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-blue);
}

.calc-secondary-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.calc-secondary-btn:disabled {
  box-shadow: none;
  transform: none;
}

.calc-form-section > .calc-form-grid {
  padding: 0 14px;
}

.calc-form-section > .calc-form-grid:last-child,
.calc-form-section > .calc-working-concentrations:last-child {
  padding-bottom: 14px;
}

.calc-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  align-items: end;
}

.calc-form label {
  display: grid;
  gap: 4px;
  flex: 0 0 118px;
  width: 118px;
  min-width: 0;
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.calc-form input,
.calc-form select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--text-ink);
  font: inherit;
  font-size: var(--text-base);
  line-height: 36px;
}

.calc-form input[type="number"] {
  width: 100%;
  padding-right: 4px;
}

.calc-form select {
  width: 100%;
  padding-right: 28px;
}

.calc-form input:disabled {
  background: var(--neutral-disabled-bg);
  color: var(--neutral-disabled-text);
  cursor: not-allowed;
}

.calc-working-concentrations {
  display: grid;
  gap: 5px;
  padding: 0 14px;
}

.calc-working-title {
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.calc-working-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
}

.calc-working-cell {
  display: grid;
  gap: 1px;
  flex: 0 0 118px;
  width: 118px;
  min-width: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-sm);
  background: var(--highlight-bg);
}

/* Tokenized to match .data-table appearance (grid-layout pseudo-table) */
.calc-working-cell label {
  overflow: hidden;
  display: block;
  width: auto;
  min-width: 0;
  flex: initial;
  color: var(--table-head-color);
  font-size: var(--table-font-size-head);
  font-weight: var(--table-head-weight);
  letter-spacing: var(--table-head-letter-spacing);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-working-cell input {
  width: 100%;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0 5px;
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--text-ink);
  font-size: var(--table-font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 26px;
}

.calc-working-cell input:disabled {
  background: var(--neutral-disabled-bg);
  color: var(--neutral-disabled-text);
  cursor: not-allowed;
}

.calc-strategy-alignment {
  justify-self: start;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 10px 14px 14px;
  padding: 9px 10px;
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-sm);
  background: var(--highlight-bg);
  color: var(--highlight-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.calc-strategy-alignment.is-mismatch {
  border-color: var(--highlight-border);
  background: var(--highlight-bg);
  color: var(--highlight-text);
}

.calc-strategy-alignment.is-secondary,
.calc-strategy-alignment.is-no-override {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}

.calc-readout {
  align-self: end;
  flex: 0 0 118px;
  width: 118px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--highlight-bg);
  color: var(--highlight-text);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

#calc-resin-mass-preview {
  flex: 0 1 max-content;
  width: max-content;
  min-width: 118px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-double-couple {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 1px solid var(--surface-border-soft);
  border-left: 5px solid var(--primary-red);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.calc-field-title {
  padding: 0 14px;
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.calc-chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 6px;
  padding: 0 14px 14px;
}

.calc-pass-card {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid var(--pass-border, var(--surface-border-soft));
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--pass-border, var(--surface-border-soft));
  background: var(--surface-white);
  color: var(--text-ink);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.calc-form .calc-pass-card {
  display: flex;
  width: 100%;
  min-width: 0;
}

.calc-pass-card .mono {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-pass-card.pass-count-1 {
  --pass-border: var(--surface-border-strong);
}

.calc-pass-card.pass-count-2 {
  --pass-border: var(--interactive-selected-border);
}

.calc-pass-card.pass-count-3 {
  --pass-border: var(--support-strong);
}

.calc-pass-card.pass-count-4 {
  --pass-border: var(--noncanonical-focus);
}

.calc-pass-card.pass-count-5 {
  --pass-border: var(--warning-strong);
}

.calc-pass-card.pass-count-6 {
  --pass-border: var(--support-area-topology);
}

.calc-pass-stepper {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.calc-pass-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  min-width: 22px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted-strong);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.calc-pass-step-btn:hover,
.calc-pass-step-btn:focus-visible {
  background: var(--interactive-drop-bg);
  color: var(--primary-red);
  filter: none;
}

.calc-pass-step-btn:active {
  transform: translateY(1px);
}

.calc-pass-card input {
  width: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--surface-border-soft);
  border-right: 1px solid var(--surface-border-soft);
  border-radius: 0;
  font-size: var(--text-sm);
  line-height: 26px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.calc-pass-card input::-webkit-outer-spin-button,
.calc-pass-card input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.calc-per-residue-scroll-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.result-card .calc-per-residue-table {
  width: max(100%, 1400px);
  min-width: 1400px;
  table-layout: fixed;
}

.result-card .calc-per-residue-table th,
.result-card .calc-per-residue-table td {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.result-card .calc-per-residue-table thead th {
  text-transform: none;
}

.result-card .calc-per-residue-table th:first-child,
.result-card .calc-per-residue-table td:first-child {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.result-card .calc-per-residue-table th:nth-child(2),
.result-card .calc-per-residue-table td:nth-child(2) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.result-card .calc-per-residue-table th:last-child,
.result-card .calc-per-residue-table td:last-child {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  white-space: normal;
  text-align: left;
}

.result-card .calc-per-residue-table thead th:not(:nth-child(2)):not(:last-child) {
  text-align: right;
}

.result-card .calc-per-residue-table thead th:nth-child(2),
.result-card .calc-per-residue-table tbody td:nth-child(2) {
  text-align: left;
}

.result-card .calc-per-residue-table tbody td:not(:nth-child(2)):not(:last-child),
#calc-batch-totals-table tbody td:last-child {
  text-align: right;
}

#calc-batch-totals-table tbody td:first-child {
  text-align: left;
}

/* Intentional exception to .data-table system: total row emphasis */
.calc-per-residue-total-row td {
  font-weight: var(--font-weight-bold);
}

.calc-notes-empty {
  color: var(--support-text);
}

.calc-notes-disclosure {
  max-width: 260px;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.calc-notes-disclosure summary {
  width: max-content;
  cursor: pointer;
  color: var(--primary-red);
  font-weight: var(--font-weight-bold);
  list-style: disclosure-closed;
}

.calc-notes-disclosure[open] summary {
  margin-bottom: 5px;
  list-style: disclosure-open;
}

.calc-notes-disclosure ul {
  margin: 0;
  padding-left: 16px;
}

.calc-notes-disclosure li + li {
  margin-top: 4px;
}

.calc-output {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.calc-output > section,
.calc-output-section,
.calc-output-section > .table-container {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.calc-output-section {
  display: grid;
  gap: 8px;
}

.calc-input-warnings {
  padding: 8px 10px;
  border: 1px solid var(--warning-border, var(--highlight-border));
  border-radius: var(--radius-sm);
  background: var(--warning-bg, var(--highlight-bg));
  color: var(--text-color);
}

.calc-input-warnings ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.calc-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calc-output-header h4 {
  margin: 0;
  color: var(--primary-red);
}

.calc-lock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--highlight-bg);
  color: var(--highlight-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.calc-lock-link {
  border: 0;
  background: transparent;
  color: var(--primary-red);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
}

.rescue-skipped-message,
.rescue-empty-message {
  padding: 12px;
  margin: 12px 0;
  background: var(--highlight-bg);
  color: var(--highlight-text);
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-sm);
  line-height: var(--leading-body);
}

.rescue-windows-summary {
  margin: 8px 0 12px;
  color: var(--text-ink);
}

.rescue-windows-summary__title {
  margin-bottom: 5px;
  color: var(--primary-red);
  font-weight: var(--font-weight-bold);
}

.rescue-windows-summary__list {
  margin: 0;
  padding-left: 18px;
}

.rescue-result-notes {
  margin-top: 8px;
  color: var(--support-text);
  line-height: var(--leading-body);
}

.rescue-result-notes__title {
  margin-bottom: 3px;
  font-weight: var(--font-weight-semibold);
}

.rescue-result-notes ul {
  margin: 0;
  padding-left: 18px;
}

.rescue-sequence-map {
  margin: 16px 0 18px;
  padding: 14px 12px 16px;
  border: 1px solid var(--support-border);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.rescue-sequence-map__header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rescue-sequence-map__header h4 {
  margin: 0;
  color: var(--primary-red);
}

.rescue-sequence-map__header span {
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-sequence-map__header-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: flex-end;
}

.rescue-map-control-block {
  margin: 0 0 10px;
  overflow: visible;
}

.rescue-map-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  overflow: visible;
  padding-bottom: 2px;
}

.rescue-map-toggle {
  flex: 0 0 auto;
}

.rescue-map-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rescue-map-toggle span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--support-border);
  border-radius: 999px;
  background: var(--surface-white);
  color: var(--text-muted-strong);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.rescue-map-toggle input:checked + span {
  border-color: var(--secondary-blue-dark);
  background: var(--interactive-hover-strong-bg);
  color: var(--secondary-blue-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--secondary-blue-dark) 18%, transparent);
}

.rescue-map-toggle--sequence input:checked + span {
  border-color: var(--warning-strong);
  background: var(--warning-bg);
  color: var(--warning-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning-strong) 16%, transparent);
}

.rescue-map-toggle:hover span {
  border-color: var(--interactive-hover-strong-border);
  background: var(--interactive-drop-bg);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--secondary-blue-dark) 12%, transparent);
}

.rescue-map-toggle--sequence:hover span {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--warning-strong) 12%, transparent);
}

.rescue-map-toggle input:focus-visible + span {
  outline: 2px solid var(--secondary-blue-dark);
  outline-offset: 2px;
}

.rescue-map-toggle input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.rescue-sequence-map__direction {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 0;
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-sequence-map__viewport {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 32px 6px 34px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.rescue-sequence-map__rail {
  position: relative;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--rescue-map-count, 1), minmax(34px, 34px));
  align-items: center;
  width: max-content;
  min-width: 100%;
  padding: 10px 0 4px;
  overflow: visible;
  touch-action: pan-x;
  --rescue-map-hit-pad: 17px;
  --rescue-map-line-left: 17px;
  --rescue-map-line-right: 17px;
  --rescue-map-line-top: 50%;
}

.rescue-sequence-map__rail::before {
  position: absolute;
  top: var(--rescue-map-line-top);
  right: var(--rescue-map-line-right);
  left: var(--rescue-map-line-left);
  z-index: 0;
  height: 2px;
  background: color-mix(in srgb, var(--text-muted-strong) 28%, transparent);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.rescue-sequence-map__rail.is-focused {
  grid-template-columns: repeat(var(--rescue-map-count, 1), minmax(28px, 42px));
  justify-content: center;
}

.rescue-sequence-map__rail.is-selecting {
  cursor: crosshair;
  user-select: none;
}

.rescue-sequence-map__hit-area {
  position: absolute;
  top: calc(-1 * var(--rescue-map-hit-pad));
  right: 0;
  bottom: calc(-1 * var(--rescue-map-hit-pad));
  left: 0;
  z-index: 0;
  cursor: crosshair;
}

.rescue-sequence-map__zoom-box {
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: none;
  width: 0;
  border: 1px solid color-mix(in srgb, var(--secondary-blue-dark) 90%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--secondary-blue-dark) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-white) 80%, transparent);
  pointer-events: none;
}

.rescue-sequence-map__rail.is-selecting .rescue-sequence-map__zoom-box {
  display: block;
}

.rescue-sequence-map__residue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(34px, 100%);
  max-width: 34px;
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid var(--slate-400);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface-white) 0, var(--slate-50) 50%, var(--surface-border-soft) 100%);
  color: var(--text-ink);
  cursor: crosshair;
  line-height: 1;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.rescue-sequence-map__residue.is-window {
  border-color: var(--noncanonical-focus);
  background: radial-gradient(circle at 35% 30%, var(--noncanonical-bg) 0, var(--noncanonical-hover-bg) 58%, var(--noncanonical-hover-border) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--noncanonical-focus) 16%, transparent);
}

.rescue-sequence-map__residue.is-covered {
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, color-mix(in srgb, var(--success-strong) 34%, transparent) 54%, color-mix(in srgb, var(--success-strong) 34%, transparent) 62%, transparent 64%),
    radial-gradient(circle at 35% 30%, var(--success-bg) 0, var(--success-bg) 55%, var(--success-border) 100%);
}

.rescue-sequence-map__residue.is-window.is-covered {
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, color-mix(in srgb, var(--success-strong) 40%, transparent) 54%, color-mix(in srgb, var(--success-strong) 40%, transparent) 62%, transparent 64%),
    radial-gradient(circle at 35% 30%, var(--support-bg) 0, var(--noncanonical-hover-bg) 48%, var(--success-border) 100%);
}

.rescue-sequence-map__residue.is-marked {
  border-width: 2px;
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px var(--interactive-blue-alpha-20),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__residue.is-focus-preview {
  z-index: 5;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 6px color-mix(in srgb, var(--secondary-blue-dark) 24%, transparent),
    0 5px 12px color-mix(in srgb, var(--text-ink) 20%, transparent);
}

.rescue-sequence-map__residue:hover,
.rescue-sequence-map__residue:focus-visible {
  z-index: 6;
  border-color: var(--tooltip-bg);
  box-shadow:
    0 0 0 3px var(--surface-white),
    0 0 0 6px color-mix(in srgb, var(--tooltip-bg) 18%, transparent),
    0 8px 18px color-mix(in srgb, var(--tooltip-bg) 22%, transparent);
  outline: none;
  transform: translateY(-4px) scale(1.12);
}

.rescue-sequence-map__residue.is-pseudoproline {
  border-color: var(--success-strong);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px color-mix(in srgb, var(--success-strong) 22%, transparent),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__residue.is-dmb,
.rescue-sequence-map__residue.is-hmb,
.rescue-sequence-map__residue.is-hmsb {
  border-color: var(--secondary-blue-dark);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px color-mix(in srgb, var(--secondary-blue-dark) 24%, transparent),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__residue.is-o-acyl-isopeptide {
  border-color: var(--support-area-topology);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px color-mix(in srgb, var(--support-area-topology) 22%, transparent),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__residue.is-solubility-tag {
  border-color: var(--text-slate);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px color-mix(in srgb, var(--text-slate) 22%, transparent),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__residue.is-sar {
  border-color: var(--warning-strong);
  box-shadow:
    0 0 0 2px var(--surface-white),
    0 0 0 5px color-mix(in srgb, var(--warning-strong) 24%, transparent),
    0 3px 8px color-mix(in srgb, var(--text-ink) 16%, transparent);
}

.rescue-sequence-map__position {
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-sequence-map__token {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-sequence-map__marker {
  position: absolute;
  top: calc(-12px - (var(--marker-index, 0) * 16px));
  right: -10px;
  z-index: 4;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  border: 2px solid var(--surface-white);
  border-radius: 999px;
  background: var(--secondary-blue-dark);
  color: var(--surface-white);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 18px;
  text-align: center;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tooltip-bg) 18%, transparent),
    0 4px 8px color-mix(in srgb, var(--tooltip-bg) 24%, transparent);
}

.rescue-sequence-map__marker.is-pseudoproline {
  background: var(--success-strong);
}

.rescue-sequence-map__marker.is-o-acyl-isopeptide {
  background: var(--support-area-topology);
}

.rescue-sequence-map__marker.is-solubility-tag {
  background: var(--text-slate);
}

.rescue-sequence-map__marker.is-sar {
  background: var(--warning-strong);
}

.rescue-sequence-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-sequence-map__legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.rescue-sequence-map__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--secondary-blue-dark);
}

.rescue-sequence-map__legend i.is-window {
  border: 1px solid var(--graph-notice-border);
  background: var(--graph-notice-bg);
}

.rescue-sequence-map__legend i.is-covered {
  border: 2px solid var(--success-strong);
  background: var(--success-bg);
}

.rescue-sequence-map__legend i.is-pseudoproline {
  background: var(--success-strong);
}

.rescue-sequence-map__legend i.is-o-acyl-isopeptide {
  background: var(--support-area-topology);
}

.rescue-sequence-map__legend i.is-solubility-tag {
  background: var(--text-slate);
}

.rescue-sequence-map__legend i.is-sar {
  background: var(--warning-strong);
}

.rescue-plan-section {
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--support-border);
  border-radius: var(--radius-sm);
  background: var(--support-bg);
}

.rescue-plan-section > h4 {
  margin: 0 0 8px;
  color: var(--primary-red);
}

.rescue-plan-section__intro {
  margin: 0 0 10px;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.rescue-plan-list {
  display: grid;
  gap: 10px;
}

.rescue-plan {
  border: 1px solid var(--support-border);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.rescue-plan.is-preferred {
  border-color: var(--support-border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--support-text) 8%, transparent);
}

.rescue-plan__summary-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px 9px 32px;
  cursor: pointer;
  list-style: none;
}

.rescue-plan__summary-row::marker,
.rescue-plan__summary-row::-webkit-details-marker {
  display: none;
  content: "";
}

.rescue-plan__summary-row::before {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--support-text);
  content: "";
  transition: transform var(--transition-fast);
}

.rescue-plan[open] .rescue-plan__summary-row::before {
  transform: rotate(90deg);
}

.rescue-plan[open] .rescue-plan__summary-row {
  border-bottom: 1px solid var(--support-border);
}

.rescue-plan__title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  color: var(--text-ink);
  font-weight: var(--font-weight-bold);
}

.rescue-plan__preferred,
.rescue-plan__count,
.rescue-plan__rank {
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-plan__preferred,
.rescue-plan__rank {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--support-border);
  border-radius: var(--radius-xs);
  background: var(--support-bg);
}

.rescue-plan__summary {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.rescue-plan__metrics {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-body);
}

.rescue-plan__steps,
.rescue-plan__notes {
  margin: 0;
  padding: 0 10px 10px 28px;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.rescue-plan__steps {
  padding: 0 10px 10px 32px;
}

.rescue-plan__steps > li + li {
  margin-top: 7px;
}

.rescue-plan__steps p {
  margin: 3px 0;
}

.rescue-plan__steps ul {
  margin: 3px 0 0;
  padding-left: 18px;
  color: var(--support-text);
}

.rescue-plan__notes {
  margin-top: 8px;
  color: var(--support-text);
}

.rescue-plan__step-kind {
  display: inline-block;
  min-width: 42px;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--secondary-blue-dark);
  color: var(--surface-white);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.rescue-plan__step-kind.is-pseudoproline {
  background: var(--success-strong);
}

.rescue-plan__step-kind.is-o-acyl-isopeptide {
  background: var(--support-area-topology);
}

.rescue-plan__step-kind.is-solubility-tag {
  background: var(--text-slate);
}

.rescue-candidate-section {
  margin-top: 14px;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.rescue-candidate-section__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: baseline;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text-ink);
  font-weight: var(--font-weight-bold);
  list-style: none;
}

.rescue-candidate-section__summary::marker,
.rescue-candidate-section__summary::-webkit-details-marker {
  display: none;
  content: "";
}

.rescue-candidate-section__summary span {
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.rescue-candidate-section__intro {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--support-text);
  line-height: var(--leading-body);
}

.rescue-candidates {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.rescue-candidate {
  padding: 0;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
}

.rescue-candidate__details {
  display: block;
}

.rescue-candidate__summary {
  position: relative;
  display: block;
  padding: 10px 12px 10px 32px;
  cursor: pointer;
  color: var(--text-ink);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  list-style: none;
}

.rescue-candidate__summary-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.5fr) minmax(150px, auto);
  gap: 8px;
  align-items: center;
  width: 100%;
}

.rescue-candidate__summary::marker,
.rescue-candidate__summary::-webkit-details-marker {
  display: none;
  content: "";
}

.rescue-candidate__summary::before {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--support-text);
  content: "";
  transition: transform var(--transition-fast);
}

.rescue-candidate__details[open] .rescue-candidate__summary::before {
  transform: rotate(90deg);
}

.rescue-candidate__details[open] .rescue-candidate__summary {
  border-bottom: 1px solid var(--surface-border-soft);
  color: var(--primary-red);
}

.rescue-candidate__summary-main,
.rescue-candidate__summary-target,
.rescue-candidate__summary-delta {
  min-width: 0;
}

.rescue-candidate__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--support-border);
  border-radius: var(--radius-xs);
  background: var(--support-bg);
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  vertical-align: middle;
}

.rescue-candidate__summary-target {
  overflow: hidden;
  color: var(--text-muted-strong);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rescue-candidate__summary-delta {
  color: var(--support-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-align: right;
  white-space: normal;
}

.rescue-candidate__content {
  padding: 10px 12px 11px;
}

.rescue-candidate p {
  margin: 0 0 5px;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.rescue-candidate__reagent {
  font-weight: var(--font-weight-semibold);
}

.rescue-candidate__notes {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--support-text);
}

.rescue-sequence-altering-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border-soft);
}

.rescue-global-support-section {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
}

.rescue-global-support-section > h4 {
  margin: 0 0 5px;
  color: var(--success-text);
}

.rescue-global-support-note {
  margin: 0 0 8px;
  color: var(--success-text);
  line-height: var(--leading-body);
}

.rescue-global-support-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.rescue-global-support-list p {
  margin: 3px 0;
}

.rescue-global-support-list ul {
  margin: 3px 0 0;
  padding-left: 18px;
  color: var(--success-text);
}

.rescue-sequence-altering-section > h4 {
  margin: 0 0 5px;
  color: var(--primary-red);
}

.rescue-sequence-altering-note {
  margin: 0 0 8px;
  color: var(--support-text);
  line-height: var(--leading-body);
}

.cleavage-columns {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 14px;
}

.cleavage-column {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
}

.cleavage-column[hidden] {
  display: none !important;
}

.cleavage-columns--single .cleavage-column--primary {
  flex: 1 1 100%;
}

.cleavage-column h4 {
  margin: 0;
  color: var(--text-ink);
}

.cleavage-cocktail-name {
  margin: 0;
  color: var(--text-muted-strong);
  line-height: 1.35;
}

.cleavage-table-shell {
  overflow-x: auto;
}

.result-card .table-primary.cleavage-table {
  min-width: 460px;
  table-layout: auto;
}

.result-card .table-primary.cleavage-table td {
  width: auto;
  white-space: normal;
  word-break: normal;
}

.result-card .table-primary.cleavage-table td.numeric {
  text-align: right;
  white-space: nowrap;
}

.cleavage-role-cell {
  color: var(--support-text);
}

.cleavage-conditions {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
  padding-top: 2px;
}

.cleavage-conditions dt {
  font-weight: var(--font-weight-semibold);
  color: var(--support-text);
}

.cleavage-conditions dd {
  margin: 0;
  color: var(--text-ink);
}

.cleavage-section {
  margin-top: 8px;
  border-top: 1px solid var(--surface-border-soft);
}

.cleavage-section summary {
  cursor: pointer;
  padding: 9px 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-ink);
}

.cleavage-section summary::marker,
.cleavage-section summary::-webkit-details-marker {
  color: var(--support-text);
  font-size: var(--text-sm);
}

.cleavage-section[open] summary {
  color: var(--primary-red);
}

.cleavage-section ul,
.cleavage-condition-notes {
  margin: 0 0 4px;
  padding-left: 18px;
}

.cleavage-section li {
  margin-bottom: 4px;
}

.cleavage-section-note {
  color: var(--support-text);
  line-height: var(--leading-body);
  margin: 10px 0 0;
}

.cleavage-section-note a {
  color: var(--primary-red);
  font-weight: var(--font-weight-bold);
}

.cleavage-manual-message {
  padding: 12px;
  margin: 12px 0;
  background: var(--highlight-bg);
  color: var(--highlight-text);
  border: 1px solid var(--highlight-border);
  border-radius: var(--radius-sm);
  line-height: var(--leading-body);
}

.cleavage-copy-menu-wrap {
  position: relative;
}

.rescue-copy-menu-wrap {
  position: relative;
}

.spps-assumptions-table th:nth-child(1),
.spps-assumptions-table td:nth-child(1) {
  min-width: 78px;
}

.spps-assumptions-table th:nth-child(2),
.spps-assumptions-table td:nth-child(2) {
  min-width: 68px;
}

.spps-assumptions-table th:nth-child(3),
.spps-assumptions-table td:nth-child(3) {
  min-width: 58px;
}

.spps-assumptions-table th:nth-child(4),
.spps-assumptions-table td:nth-child(4),
.spps-assumptions-table th:nth-child(5),
.spps-assumptions-table td:nth-child(5) {
  min-width: 88px;
}

.spps-assumptions-table th:nth-child(6),
.spps-assumptions-table td:nth-child(6),
.spps-assumptions-table th:nth-child(7),
.spps-assumptions-table td:nth-child(7) {
  min-width: 74px;
}

.spps-assumptions-table th:nth-child(8),
.spps-assumptions-table td:nth-child(8) {
  min-width: 88px;
}

.spps-assumptions-table th:nth-child(9),
.spps-assumptions-table td:nth-child(9),
.spps-assumptions-table th:nth-child(10),
.spps-assumptions-table td:nth-child(10) {
  min-width: 60px;
}

.spps-assumptions-table td:nth-child(2),
.spps-assumptions-table td:nth-child(3),
.spps-assumptions-table td:nth-child(4),
.spps-assumptions-table td:nth-child(5),
.spps-assumptions-table td:nth-child(6),
.spps-assumptions-table td:nth-child(7),
.spps-assumptions-table td:nth-child(8),
.spps-assumptions-table td:nth-child(9),
.spps-assumptions-table td:nth-child(10) {
  text-align: center;
}

.spps-assumptions-basis-head,
.spps-assumptions-basis {
  min-width: 340px;
}

.spps-assumptions-basis-head {
  white-space: nowrap;
}

.spps-assumptions-basis {
  line-height: 1.35;
  color: var(--text-slate);
  white-space: normal;
}

.analysis-support-summary {
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  line-height: var(--leading-body);
}

.analysis-support-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  vertical-align: text-bottom;
}

.analysis-support-summary-icon.is-warning {
  color: var(--warning-strong);
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.analysis-support-table-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.analysis-support-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.analysis-tools-support-container {
  margin-bottom: 18px;
}

#analysis-support-detail-matrix.hidden {
  display: none;
}

.analysis-support-filter-label {
  font-size: var(--text-sm);
  color: var(--info-text);
  font-weight: var(--font-weight-semibold);
}

.analysis-support-filter-select {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--neutral-track);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--text-ink);
  font-size: var(--text-sm);
}

.analysis-support-filter-input {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--neutral-track);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--text-ink);
  font-size: var(--text-sm);
}

.analytical-actions-row {
  margin-bottom: 6px;
}

.fragment-ion-dashboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

#panel-analytical .fragment-ion-dashboard {
  border-color: var(--analysis-tools-soft-border);
  background: var(--analysis-tools-soft-bg);
}

#panel-analytical .analysis-support-filter-label {
  color: var(--analysis-tools-active-text);
}

#panel-analytical .fragment-ion-dashboard .analysis-support-filter-input:focus,
#panel-analytical .fragment-ion-dashboard .analysis-support-filter-select:focus,
#panel-analytical .fragment-plot-toolbar .analysis-support-filter-select:focus,
#panel-analytical .fragment-ion-pagination-row .analysis-support-filter-select:focus {
  border-color: var(--analysis-tools-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.16);
  outline: none;
}

#panel-analytical .fragment-ion-check-row input[type="checkbox"] {
  accent-color: var(--analysis-tools-accent);
}

.fragment-ion-dashboard-main,
.fragment-ion-pagination-row {
  align-items: flex-end;
  gap: 10px;
}

.fragment-ion-dashboard-main {
  display: grid;
  grid-template-columns:
    minmax(112px, 0.7fr)
    minmax(116px, 0.7fr)
    minmax(220px, 1.3fr)
    minmax(160px, 1fr)
    minmax(260px, 2fr);
  align-items: start;
}

.precursor-ion-dashboard-main {
  grid-template-columns:
    minmax(104px, 0.6fr)
    minmax(104px, 0.6fr)
    minmax(216px, 1fr)
    minmax(150px, 1fr)
    minmax(134px, 0.8fr)
    minmax(118px, 0.7fr)
    minmax(190px, 1.2fr);
}

.fragment-ion-pagination-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.fragment-ion-dashboard-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fragment-ion-page-size-group {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.fragment-ion-dashboard .analysis-support-filter-input,
.fragment-ion-dashboard .analysis-support-filter-select {
  width: 100%;
  height: 32px;
  margin: 0;
}

.fragment-ion-page-size-group .analysis-support-filter-select {
  height: 32px;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  flex: 0 0 84px;
}

.fragment-ion-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 32px;
  align-items: center;
}

.fragment-ion-check-row .analysis-support-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}

.fragment-ion-check-row input[type="checkbox"] {
  margin: 0;
}

.precursor-adduct-row {
  gap: 6px 8px;
}

.precursor-charge-adduct-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.precursor-charge-adduct-inline #precursorMaxCharge {
  flex: 1 1 88px;
  min-width: 88px;
}

.precursor-adduct-menu {
  position: relative;
  flex: 0 0 auto;
}

.precursor-adduct-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-white);
  color: var(--analysis-tools-active-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.precursor-adduct-menu > summary::marker,
.precursor-adduct-menu > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.precursor-adduct-menu[open] > summary,
.precursor-adduct-menu > summary:focus-visible {
  border-color: var(--analysis-tools-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.16);
  outline: none;
}

.precursor-adduct-menu .precursor-adduct-row {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: calc(var(--z-menu) + 5);
  width: max-content;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-white);
  box-shadow: 0 14px 30px rgba(17, 25, 39, 0.16);
}

.precursor-adduct-option.hidden {
  display: none;
}

.fragment-ion-check-row .precursor-adduct-option {
  gap: 5px;
}

.fragment-ion-dashboard .precursor-adduct-max {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 28px;
  min-height: 28px;
  padding: 3px 6px;
  text-align: center;
}

.fragment-plot-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
}

.analytical-graph-toolbar {
  margin-top: 10px;
  margin-bottom: 6px;
}

.analytical-graph-toolbar-row {
  width: 100%;
  justify-content: space-between;
}

.analytical-graph-toolbar .fragment-plot-toolbar {
  justify-content: flex-start;
  margin: 0;
}

.analytical-graph-actions {
  align-items: center;
}

.analytical-table-controls {
  justify-content: space-between;
}

.analytical-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.analytical-table-controls .toolbar-buttons {
  gap: 6px;
}

.fragment-plot-toolbar .analysis-support-filter-select {
  width: auto;
  min-width: 120px;
  height: 32px;
}

.precursor-formula-summary {
  min-width: 0;
}

.precursor-formula-summary.hidden {
  display: none;
}

.precursor-formula-copy-wrap {
  position: relative;
  min-width: 0;
}

.precursor-formula-text {
  display: block;
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-ink);
  background: var(--surface-white);
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  padding: 5px 28px 5px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}

.precursor-formula-text.is-placeholder {
  color: var(--disabled-gray);
  font-family: inherit;
  font-weight: var(--font-weight-regular);
}

#panel-analytical .precursor-formula-copy-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--info-text);
  box-shadow: none;
  transform: none;
}

#panel-analytical .precursor-formula-copy-btn .icon {
  width: 12px;
  height: 12px;
}

#panel-analytical .precursor-formula-copy-btn:hover,
#panel-analytical .precursor-formula-copy-btn:focus-visible {
  background: var(--info-bg);
  color: var(--analysis-tools-active-text);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.precursor-formula-text sub {
  font-size: 0.72em;
  line-height: 0;
}

.precursor-utility-section {
  margin: 12px 0;
}

#precursorObservedMatchSection {
  margin-bottom: 20px;
}

#precursorObservedMatchSection .table-container {
  margin-top: 8px;
}

.precursor-utility-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.precursor-utility-header h4 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--info-text);
}

#panel-analytical .precursor-utility-header h4 {
  color: var(--analysis-tools-active-text);
}

#panel-analytical .analytical-actions-row .tool-btn:hover,
#panel-analytical .analytical-graph-toolbar .tool-btn:hover,
#panel-analytical .analytical-table-controls .tool-btn:hover,
#panel-analytical .precursor-utility-header .tool-btn:hover,
#panel-analytical .fragment-ion-page-controls .tool-btn:hover {
  color: var(--analysis-tools-active-text);
  border-color: var(--analysis-tools-soft-border);
  background: var(--analysis-tools-soft-bg);
}

#panel-analytical .analytical-actions-row .tool-btn:focus-visible,
#panel-analytical .analytical-graph-toolbar .tool-btn:focus-visible,
#panel-analytical .analytical-table-controls .tool-btn:focus-visible,
#panel-analytical .precursor-utility-header .tool-btn:focus-visible,
#panel-analytical .fragment-ion-page-controls .tool-btn:focus-visible {
  outline-color: var(--analysis-tools-accent);
}

.fragment-ion-page-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
}

.fragment-ion-page-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.fragment-ion-page-input {
  width: 44px;
  height: 32px;
  min-height: 32px;
  padding: 2px 5px;
  border: 1px solid var(--neutral-track);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  color: var(--text-ink);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.fragment-ion-page-input::-webkit-outer-spin-button,
.fragment-ion-page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fragment-ion-scope-notes {
  text-align: left;
  margin: 6px 0 8px;
}

.fragment-ion-scope-notes p {
  margin: 0;
}

.fragment-ion-scope-notes p + p {
  margin-top: 3px;
}

.analytical-plot {
  min-height: 260px;
  margin: 8px 0 10px;
}

.analytical-plot-placeholder {
  height: 260px;
  margin: 8px 0 10px;
  color: var(--disabled-gray);
}

.analytical-plot-note {
  margin: -2px 0 8px;
  color: var(--text-muted-strong);
}

@media (max-width: 560px) {
  .fragment-ion-dashboard-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .fragment-ion-pagination-row {
    align-items: center;
  }
}

.analysis-support-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid transparent;
}

.analysis-support-status.is-supported {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.analysis-support-status.is-partial {
  background: var(--highlight-bg);
  color: var(--highlight-text);
  border-color: var(--highlight-border);
}

.analysis-support-status.is-unsupported {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

#analysis-support-table,
#analysis-tools-support-table {
  table-layout: auto;
  width: 100%;
}

#analysis-support-table th,
#analysis-support-table td,
#analysis-tools-support-table th,
#analysis-tools-support-table td {
  width: auto;
}

#analysis-support-table th:nth-child(1),
#analysis-support-table td:nth-child(1),
#analysis-tools-support-table th:nth-child(1),
#analysis-tools-support-table td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}

#analysis-support-table tr.analysis-support-row {
  border-left: 3px solid transparent;
}

#analysis-support-table tr.analysis-support-row.is-chemistry {
  border-left-color: var(--support-area-chemistry);
}

#analysis-support-table tr.analysis-support-row.is-residue {
  border-left-color: var(--support-area-residue);
}

#analysis-support-table tr.analysis-support-row.is-topology {
  border-left-color: var(--support-area-topology);
}

#analysis-support-table tr.analysis-support-row.is-synthesis {
  border-left-color: var(--support-area-synthesis);
}

#analysis-support-table td.analysis-support-feature-cell {
  position: relative;
}

.analysis-support-area-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  vertical-align: middle;
  background: var(--support-area-default);
}

#analysis-support-table tr.is-chemistry .analysis-support-area-dot {
  background: var(--support-area-chemistry);
}

#analysis-support-table tr.is-residue .analysis-support-area-dot {
  background: var(--support-area-residue);
}

#analysis-support-table tr.is-topology .analysis-support-area-dot {
  background: var(--support-area-topology);
}

#analysis-support-table tr.is-synthesis .analysis-support-area-dot {
  background: var(--support-area-synthesis);
}

#analysis-support-table th:nth-child(2),
#analysis-support-table td:nth-child(2),
#analysis-tools-support-table th:nth-child(2),
#analysis-tools-support-table td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

#analysis-support-table th:nth-child(3),
#analysis-support-table td:nth-child(3),
#analysis-tools-support-table th:nth-child(3),
#analysis-tools-support-table td:nth-child(3) {
  width: auto;
  white-space: normal;
}

/* Card Header */
.card-header {
  background: transparent;
  padding: var(--pad-card-header-y) var(--pad-card-header-x);
  border-bottom: var(--border-width-hairline) solid var(--surface-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border-radius: 8px 8px 0 0;
}

.card-header h2,
.card-header h3 {
  color: var(--text-ink);
}

.card-header.toggle-header[tabindex]:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.toggle-icon {
  font-size: var(--text-sm);
  opacity: 0.62;
  transition: transform 0.3s ease;
}

.result-card.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.result-card.collapsed .card-header {
  border-radius: 8px;
}

.result-card.collapsed .card-body {
  display: none;
}

.card-body {
  padding: var(--pad-card-y) var(--pad-card-x);
}

.result-summary-strip {
  background: var(--surface-muted);
  padding: var(--pad-summary-strip);
  border-radius: 0;
  margin-bottom: var(--margin-summary-strip);
  text-align: center;
  border: none;
}

.result-summary-label-inline {
  display: inline;
  margin-bottom: 0;
}

.result-summary-value-primary {
  font-weight: var(--font-weight-bold);
  color: var(--primary-blue);
  font-size: var(--text-md);
}

.result-summary-value-plain {
  background: none;
  padding: 0;
}

.result-summary-secondary {
  margin-left: 5px;
  color: var(--text-subtle);
}

/* Standardize Sub-Chart Titles */
.sub-chart-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold); /* Bold */
  margin: 0; /* Remove margin as it's now in flex container */
}

/* ====== Graph Toolbar ====== */
.graph-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-toolbar);
  margin-bottom: 2px;
  margin-top: 10px; /* Reduced spacing between stacked charts */
}

.graph-toolbar > .sub-chart-title,
.graph-toolbar > .toolbar-inline {
  width: 100%;
  flex: 0 1 auto;
  min-width: 0;
}

.graph-toolbar.graph-toolbar-spaced {
  margin-top: 20px;
}

.graph-toolbar.graph-toolbar-flush {
  margin-top: 0;
}

.graph-toolbar.graph-toolbar-topology {
  justify-content: flex-start;
}

/* Remove top margin for the first toolbar in a card */
.card-body > .graph-toolbar:first-child {
  margin-top: 0;
}

.topology-section-title {
  font-size: var(--text-md);
  margin: 6px 0 12px;
  color: var(--text-muted-strong);
  border-bottom: 1px solid var(--surface-border-soft);
  padding-bottom: 6px;
}

.toolbar-buttons {
  display: flex;
  gap: var(--gap-toolbar);
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.graph-toolbar > .toolbar-buttons {
  width: 100%;
  justify-content: flex-end;
}

.toolbar-buttons.toolbar-buttons-relative {
  position: relative;
}

.toolbar-justify {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  text-align: left;
}

.toolbar-justify.toolbar-justify-spaced {
  margin-bottom: 10px;
}

.toolbar-justify > .toolbar-inline {
  width: 100%;
  justify-content: flex-end;
}

.toolbar-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.toolbar-inline > .sub-chart-title {
  min-width: 0;
}

.toolbar-inline.toolbar-inline-gap-sm {
  gap: 6px;
}

.wimley-toolbar-main {
  min-width: 0;
}

.wimley-toolbar-selects {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.wimley-toolbar-selects .mini-select {
  min-width: 0;
}

.sub-chart-title.sub-chart-title-tight {
  margin: 0;
}

.pi-caption-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
}

.table-spaced {
  margin-bottom: 20px;
}

.table-caption-top {
  caption-side: top;
  padding-bottom: 10px;
  color: var(--dark-gray);
}

.graph-note-inline {
  font-size: var(--text-sm);
  color: var(--text-subtle);
  margin-bottom: 5px;
}

.topology-note-cards,
.signal-reason-cards {
  display: grid;
  gap: 8px;
}

.topology-note-card,
.signal-reason-card {
  border: 1px solid var(--surface-border-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 8px 10px;
}

.topology-note-card-title,
.signal-reason-card-title {
  margin: 0 0 4px;
  color: var(--dark-gray);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.topology-note-card-line,
.signal-reason-card-line {
  margin: 0;
  line-height: var(--leading-body);
  color: var(--text-slate);
  font-size: var(--text-sm);
}

.topology-note-card-line + .topology-note-card-line,
.signal-reason-card-line + .signal-reason-card-line {
  margin-top: 3px;
}

/* Topology legend */
.topo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 6px 2px 4px;
  font-size: var(--text-sm);
  color: var(--text-slate);
}

.topo-window-note {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 4px 0 8px;
  padding: 3px 8px;
  border: 1px solid var(--info-border);
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.topo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.topo-legend-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.topo-legend-arc {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-top: 2px solid;
  border-radius: 50% 50% 0 0;
  flex-shrink: 0;
}

.topo-legend-arc-dashed {
  border-top-style: dashed;
}

.topo-legend-square {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.topo-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topo-legend-node-nc {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--warning-strong);
  background: transparent;
  flex-shrink: 0;
}

/* Loop badges inside interpretation cards */
.loop-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0;
}

.loop-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--interactive-drop-bg);
  border: 1px solid var(--interactive-hover-strong-border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--text-sm);
  color: var(--text-muted-strong);
}

.loop-badge-pos {
  font-weight: var(--font-weight-semibold);
  color: var(--secondary-blue-dark);
}

.loop-badge-label {
  color: var(--text-slate);
}

.loop-badge-count {
  background: var(--interactive-selected-bg);
  border-radius: 4px;
  padding: 0 4px;
  font-size: var(--text-sm);
  color: var(--interactive-selected-text);
}

.branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--surface-border-soft);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: var(--text-sm);
  color: var(--text-muted-strong);
}

.branch-badge-pos {
  font-weight: var(--font-weight-semibold);
}

.branch-badge-cat {
  border-radius: 3px;
  padding: 0 4px;
  font-size: var(--text-sm);
  color: var(--surface-white);
}

.wimley-total-summary {
  margin: 6px 0 10px 0;
  color: var(--text-muted-strong);
  line-height: var(--leading-body);
}

.zone-blue {
  color: var(--primary-blue);
}

.zone-yellow {
  color: var(--highlight-text);
}

.zone-gray {
  color: var(--disabled-gray);
}

.tool-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  color: var(--text-subtle);
  font-size: var(--text-base);
  min-height: 32px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); /* Prevent layout jumps */
  margin: 0; /* Override global button margin */
  position: relative;
  z-index: 1;
}

.tool-btn:hover {
  background-color: var(--interactive-hover-bg);
  color: var(--primary-blue);
  border-color: var(--interactive-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  z-index: 2000;
}

.tool-btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  z-index: 2000;
}

.tool-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.icon-hover-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-9999px, -9999px);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-radius);
  max-width: min(280px, calc(100vw - 12px));
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.icon-hover-tooltip.visible {
  opacity: 1;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  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;
}

.table-container {
  position: relative;
  overflow-x: auto; /* Enables horizontal scrolling if needed */
  overflow-y: visible;
  width: 100%; /* Full width */
}

.audit-table-container {
  padding-top: 38px;
  margin-top: -38px;
}

.table-container.table-container-fixed-controls {
  overflow-x: visible;
}

.table-scroll-shell {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.table-copy-btn {
  margin: 0;
  padding: 0;
  min-height: 32px;
  border: 1px solid var(--surface-border-soft) !important;
  background: var(--surface-white) !important;
}

.tool-link-btn {
  text-decoration: none;
  display: inline-block;
}

.control-row-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 6px;
}

.control-row-end.control-row-gap {
  gap: 6px;
}

.control-row-end.control-row-tight {
  margin-bottom: 5px;
}

.control-row-end.control-row-relative {
  position: relative;
}

.zscale-header-controls {
  flex-wrap: nowrap;
  gap: 6px;
}

.zscale-header-controls > .toolbar-buttons {
  flex: 0 0 auto;
}

.mini-select {
  margin: 0;
  padding: 4px 8px;
  font-size: var(--text-sm);
}

.mini-select.mini-select-gap-right {
  margin-right: 6px;
}

/* ====== Results Table Families ====== */
/* Removed per-table override (unified to .data-table system) */
.table-primary,
.table-composition,
.table-mini,
.table-audit {
  min-width: 400px; /* Minimum width for ultra-minimalist style */
  table-layout: auto; /* Adjust column widths based on content */
}

.data-table th.sortable-col {
  position: relative;
  padding-right: calc(var(--table-cell-pad-x) + var(--table-cell-pad-y));
}

.data-table th.sortable-col::after {
  content: "↕";
  position: absolute;
  right: calc(var(--table-cell-pad-x) / 3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--table-font-size-head);
  opacity: 0.85;
}

.data-table th.sortable-col[data-sort-dir="asc"]::after {
  content: "▲";
}

.data-table th.sortable-col[data-sort-dir="desc"]::after {
  content: "▼";
}

/* Primary and mini summary tables share balanced two-column layout inside cards */
#identity-table,
#molecular-characteristics-table,
#molecular-size-table,
#secondary-structure-table,
#bio-predictive-metrics-table,
#charge-properties-table {
  table-layout: fixed;
}

#identity-table td,
#molecular-characteristics-table td,
#molecular-size-table td,
#secondary-structure-table td,
#bio-predictive-metrics-table td,
#charge-properties-table td {
  width: 50%;
  white-space: normal; /* Allow wrapping */
  word-break: break-word;
}

.result-card #zscale-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

.result-card #zscale-table th,
.result-card #zscale-table td {
  width: auto;
  min-width: 58px;
  text-align: right;
  word-break: normal;
}

.result-card #zscale-table td {
  white-space: nowrap;
}

.result-card #zscale-table th:first-child,
.result-card #zscale-table td:first-child {
  min-width: 54px;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
}

.result-card #zscale-table td:first-child {
  background: var(--surface-white);
}

.result-card #zscale-table th:nth-child(2),
.result-card #zscale-table td:nth-child(2) {
  position: static;
  left: auto;
  z-index: auto;
}

.result-card #zscale-table th:nth-child(3),
.result-card #zscale-table td:nth-child(3) {
  position: static;
  left: auto;
  z-index: auto;
}

.result-card #zscale-table thead th:first-child {
  z-index: 2;
  background: var(--surface-white);
}

/* Intentional exception to .data-table system: z-scale heatmap cells */
.result-card #zscale-table td.zscale-heat-neg-strong {
  background: var(--zscale-neg-strong-bg);
  color: var(--zscale-neg-strong-text);
}

.result-card #zscale-table td.zscale-heat-neg-soft {
  background: var(--zscale-neg-soft-bg);
  color: var(--zscale-neg-soft-text);
}

.result-card #zscale-table td.zscale-heat-neutral {
  background: var(--surface-muted);
  color: var(--dark-gray);
}

.result-card #zscale-table td.zscale-heat-pos-soft {
  background: var(--zscale-pos-soft-bg);
  color: var(--zscale-pos-soft-text);
}

.result-card #zscale-table td.zscale-heat-pos-strong {
  background: var(--zscale-pos-strong-bg);
  color: var(--zscale-pos-strong-text);
}

.zscale-conclusion {
  margin-top: 15px;
  padding: 12px;
  background-color: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 4px;
  color: var(--highlight-text);
  line-height: var(--leading-body);
}

.zscale-conclusion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 8px 0;
}

.zscale-conclusion-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-white-alpha-55);
  border: 1px solid var(--highlight-chip-border);
  color: var(--highlight-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.zscale-conclusion-summary {
  margin: 0;
  color: var(--highlight-text);
  line-height: var(--leading-body);
}

.zscale-conclusion .sub-chart-title {
  color: var(--highlight-text);
}

/* Specific override for Amino Acid Counts table:
   keep table width stable with balanced, readable column proportions. */
.table-composition {
  table-layout: fixed;
  width: 100%;
}

#ionicCompositionTable {
  table-layout: auto;
  width: max-content;
  min-width: 760px;
}

#ionicCompositionTable td {
  white-space: nowrap;
}

#aaCountsTable {
  table-layout: fixed;
  width: 100%;
}

.table-composition td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#aaCountsTable th:nth-child(1), #aaCountsTable td:nth-child(1) { width: 14%; } /* AA */
#aaCountsTable th:nth-child(2), #aaCountsTable td:nth-child(2) { width: 14%; } /* Count */
#aaCountsTable th:nth-child(3), #aaCountsTable td:nth-child(3) { width: 12%; } /* % */
#aaCountsTable th:nth-child(4), #aaCountsTable td:nth-child(4) { width: 34%; } /* Nature */
#aaCountsTable th:nth-child(5), #aaCountsTable td:nth-child(5) { width: 26%; } /* Residue Class */

/* Removed per-table override (unified to .data-table system) */
.table-audit {
  table-layout: fixed;
  min-width: 760px;
}

#audit-table th,
#audit-table td {
  width: auto; /* Reset the 50% force */
}
#audit-table th:nth-child(1), #audit-table td:nth-child(1) { width: 104px; white-space: nowrap; } /* Risk */
#audit-table th:nth-child(2), #audit-table td:nth-child(2) { width: 16%; } /* Issue */
#audit-table th:nth-child(3), #audit-table td:nth-child(3) { width: 12%; } /* Location */
#audit-table th:nth-child(4), #audit-table td:nth-child(4) { width: auto; } /* Action */

.audit-issue-cell {
  font-weight: var(--font-weight-bold);
}

.audit-action-cell {
  min-width: 0;
}

.audit-action-summary {
  color: var(--dark-gray);
  line-height: 1.35;
  margin-bottom: 4px;
}

.audit-row-details {
  border-top: 1px solid var(--surface-border-soft);
  margin-top: 5px;
  padding-top: 4px;
}

.audit-row-details summary {
  color: var(--primary-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  list-style: none;
}

.audit-row-details summary::-webkit-details-marker {
  display: none;
}

.audit-row-details summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 0.16s ease;
}

.audit-row-details[open] summary::before {
  transform: rotate(90deg);
}

.audit-row-details__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 6px;
  padding: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--surface-border-soft);
  border-radius: var(--radius-sm);
}

.audit-row-details__label {
  color: var(--muted-gray);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.audit-row-details__body {
  line-height: 1.35;
}

.audit-row-details__body ul {
  margin: 0;
  padding-left: 16px;
}

.plotly-graph {
  display: none;
  width: 100%;
  max-width: 100%;
  min-height: 300px; /* Reduced from 350px */
  box-sizing: border-box;
  overflow: hidden;
}

#residueTopologyPlot.plotly-graph {
  min-height: 0;
}

.hydropathy-chart img,
.ph-chart img,
.polarity-chart img,
.beta-sheet-chart img,
.charge-pie-chart img {
  width: 100%; /* Full width in container */
  max-height: 300px; /* Reduced from 350px */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Block layout */
  object-fit: contain; /* Contain image within the box */
}

/* ====== Graph Captions ====== */
.graph-caption {
  color: var(--text-subtle);
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}

/* ====== Graph Placeholders with Animation ====== */
.no-data-box {
  width: 100%; /* Full width */
  height: 200px; /* Fixed height */
  display: flex; /* Flexbox layout */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  border: 2px dashed var(--disabled-gray); /* Dashed gray border */
  color: var(--disabled-gray); /* Light gray text */
  font-weight: var(--font-weight-bold); /* Bold placeholder text */
  background-color: var(--light-gray); /* Matches page background */
  text-align: center; /* Center text alignment */
  animation: pulse 2s infinite; /* Pulsing animation */
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.graph-placeholder {
  background: var(--surface-muted);
  border: 2px dashed var(--surface-border);
  color: var(--disabled-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px; /* Reduced from 350px */
  border-radius: 6px;
  font-weight: var(--font-weight-medium);
  padding: 20px;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: var(--leading-body);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  box-sizing: border-box;
}

.graph-placeholder.is-unsupported {
  background: var(--graph-unsupported-bg);
  border-color: var(--graph-unsupported-border);
  color: var(--graph-notice-text);
}

.graph-placeholder.is-notice {
  background: var(--graph-notice-bg);
  border-color: var(--graph-notice-border);
  color: var(--graph-notice-text);
}

.graph-placeholder.is-message {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.graph-placeholder.small {
  height: 300px; /* Match pie chart height */
}

/* ====== Responsive Adjustments ====== */
@media (min-width: 769px) {
  .controls-row {
    gap: clamp(var(--gap-control-wide-min), var(--gap-control-wide-fluid), var(--gap-control-wide-max));
  }

  .ph-group .control-panel-heading,
  .ph-group .ph-slider-wrap {
    width: var(--analysis-control-width);
  }

  .ph-group,
  .disulfide-group,
  .noncanonical-group {
    flex: 0 0 var(--analysis-control-width);
  }
}

@media (max-width: 1200px) {
  .control-deck {
    padding-top: 15px;
  }

  .deck-controls {
    position: relative;
    justify-content: flex-end;
    margin: 0 0 8px;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 0 var(--pad-dashboard-x) var(--pad-dashboard-bottom);
  }

  .control-deck {
    padding: 12px;
  }

  .input-main {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .input-main textarea {
    flex: 1 1 0;
    min-width: 0;
  }

  .sequence-input-wrap {
    flex: 1 1 0;
    min-width: 0;
  }

  .terminus-select {
    width: 68px;
    min-width: 68px;
    height: 40px;
    min-height: 40px;
    padding: 0 6px;
    font-size: var(--text-base);
  }

  #calcButton {
    flex: 1 1 auto;
    width: auto;
    margin-top: 0;
  }

  .analyze-action-group {
    width: auto;
    margin-left: auto;
  }

  .analyze-action-group #calcButton {
    flex: 1 1 auto;
    width: auto;
  }

  #calcButton {
    display: none;
  }

  .mobile-analyze-row {
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .mobile-analyze-btn {
    width: 100%;
    min-height: 44px;
  }

  .ss-inputs-heading {
    display: none;
  }

  .sequence-styles-menu {
    left: auto;
    right: 0;
    min-width: 0;
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }

  .peptide-keyboard-title-row {
    align-items: flex-start;
  }

  .peptide-keyboard-mode-toggle {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .controls-row {
    gap: 10px;
    margin-top: 8px;
    align-items: stretch;
  }

  .control-group {
    min-width: 0;
  }

  .ph-group,
  .disulfide-group,
  .noncanonical-group {
    flex: 1 1 100%;
    width: 100%;
    align-items: stretch;
  }

  .ph-group {
    order: 1;
  }

  .disulfide-group {
    order: 2;
  }

  .noncanonical-group {
    order: 3;
  }

  .mobile-collapsible-control {
    gap: 0;
  }

  .mobile-control-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--info-border);
    border-radius: 8px;
    background: var(--surface-white);
    color: var(--interactive-selected-text);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .mobile-control-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-control-toggle-value {
    flex: 0 0 auto;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
  }

  .mobile-control-toggle:hover,
  .mobile-control-toggle:focus-visible {
    background: var(--interactive-hover-strong-bg);
    border-color: var(--interactive-hover-strong-border);
    color: var(--interactive-hover-strong-text);
  }

  .mobile-control-toggle[aria-expanded="true"] {
    background: var(--interactive-hover-strong-bg);
    border-color: var(--interactive-hover-strong-border);
    color: var(--interactive-hover-strong-text);
  }

  .mobile-control-panel {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ph-group .mobile-control-toggle {
    display: none;
  }

  .ph-group .mobile-control-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-soft);
    border-radius: 8px;
    background: var(--surface-white);
    box-sizing: border-box;
  }

  .disulfide-group.mobile-open .mobile-control-panel {
    display: grid;
    gap: 0;
    justify-items: stretch;
    align-content: stretch;
  }

  .mobile-collapsible-control.mobile-open .mobile-control-panel {
    display: grid;
    gap: 8px;
  }

  .disulfide-group .ss-pairs-group {
    margin-top: 0;
    width: 100%;
  }

  .mobile-collapsible-control.mobile-open .mobile-control-panel .ss-inputs {
    justify-content: center;
  }

  .disulfide-group .ss-number-wrap {
    min-height: 44px;
  }

  .disulfide-group .ss-number-wrap input {
    height: 42px;
    padding: 0 27px 0 10px;
  }

  .disulfide-group .ss-inline-stepper {
    width: 26px;
  }

  .disulfide-group .ss-inline-step-btn::before {
    border-left-width: 5px;
    border-right-width: 5px;
  }

  .disulfide-group .ss-inline-step-btn-up::before {
    border-bottom-width: 6px;
  }

  .disulfide-group .ss-inline-step-btn-down::before {
    border-top-width: 6px;
  }

  .mobile-collapsible-control.mobile-open .mobile-control-panel input[type="range"] {
    width: 100%;
    margin: 0;
  }

  .ph-group .control-panel-heading {
    width: 100%;
    justify-content: center;
    min-height: 20px;
  }

  .ph-group .control-value-badge {
    margin-left: 2px;
  }

  .ph-slider-wrap {
    width: 100%;
    padding: 0;
  }

  .ph-slider-wrap,
  .noncanonical-header,
  .noncanonical-controls,
  .ss-pairs-label,
  .disulfide-picker {
    width: 100%;
  }

  .ss-pairs-label {
    min-height: 20px;
  }

  .disulfide-picker {
    border-radius: 8px;
  }

  .disulfide-keyboard-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    max-height: none;
    overflow-y: visible;
    margin-top: 8px;
  }

  /* When header is pinned (sticky), the topology editor must scroll within the viewport */
  .control-deck:not(.unpinned) .disulfide-keyboard-panel {
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
  }

  .ph-slider-input {
    height: 4px;
  }

  .ph-slider-input::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -4.5px;
    box-shadow: 0 0 0 1px var(--interactive-blue-alpha-14);
  }

  .ph-slider-input::-moz-range-thumb {
    width: 13px;
    height: 13px;
    box-shadow: 0 0 0 1px var(--interactive-blue-alpha-14);
  }

  .ph-scale {
    margin-top: 3px;
  }

  .noncanonical-controls {
    flex-wrap: wrap;
  }

  .noncanonical-picker {
    min-width: 0;
    width: 100%;
  }

  .noncanonical-header,
  .noncanonical-controls {
    width: 100%;
  }

  .peptide-keyboard-panel {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 8px;
  }

  .noncanonical-picker summary,
  .peptide-keyboard-mode-btn,
  .peptide-keyboard-info-btn,
  .peptide-keyboard-close-btn,
  .peptide-key-btn,
  .peptide-key-action-btn {
    touch-action: manipulation;
  }

  .rescue-sequence-map {
    margin-top: 20px;
    margin-bottom: 22px;
    padding-top: 16px;
    padding-bottom: 18px;
  }

  .rescue-sequence-map__viewport {
    padding-top: 38px;
    padding-bottom: 42px;
  }

  .rescue-sequence-map__rail {
    touch-action: pan-x;
  }

  .calc-form-grid,
  .calc-working-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
  }

  .calc-form-grid > label,
  .calc-working-cell {
    width: auto;
    min-width: 0;
  }

  .calc-form-grid > label {
    flex: initial;
  }

  .calc-working-cell {
    flex: initial;
  }

  .calc-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .result-card {
    border-radius: var(--radius-md);
  }

  .card-header {
    padding: 10px 12px;
  }

  .card-body {
    padding: var(--pad-card-y) var(--pad-card-x);
  }

  .cleavage-control-row,
  .rescue-control-row,
  .rescue-top-controls,
  .cleavage-top-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .cleavage-top-controls,
  .rescue-top-controls {
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-start;
  }

  .cleavage-linker {
    align-items: stretch;
    flex: 1 1 0;
    justify-content: flex-start;
    max-width: none;
    min-width: 0;
  }

  .rescue-threshold {
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    min-width: 0;
  }

  .cleavage-linker label {
    width: 100%;
  }

  .cleavage-copy-menu-wrap,
  .rescue-copy-menu-wrap {
    align-self: flex-end;
  }

  .cleavage-linker select {
    width: 100%;
  }

  .rescue-threshold select {
    width: 150px;
  }

  .rescue-plan__summary-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .rescue-plan__count {
    justify-self: start;
  }

  .rescue-candidate__summary-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .rescue-candidate__summary-target {
    white-space: normal;
  }

  .rescue-candidate__summary-delta {
    text-align: left;
  }

  .cleavage-columns {
    flex-direction: column;
  }

  .result-card .table-primary.cleavage-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .result-card .table-primary.cleavage-table th:nth-child(1),
  .result-card .table-primary.cleavage-table td:nth-child(1) {
    width: 28%;
  }

  .result-card .table-primary.cleavage-table th:nth-child(2),
  .result-card .table-primary.cleavage-table td:nth-child(2) {
    width: 16%;
  }

  .result-card .table-primary.cleavage-table th:nth-child(3),
  .result-card .table-primary.cleavage-table td:nth-child(3) {
    width: 17%;
  }

  .result-card .table-primary.cleavage-table th:nth-child(4),
  .result-card .table-primary.cleavage-table td:nth-child(4) {
    width: 39%;
  }

  .deck-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .tool-btn {
    min-height: 36px;
    padding: 6px 8px;
  }

  .graph-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .graph-toolbar > .sub-chart-title {
    width: 100%;
  }

  .graph-toolbar > .toolbar-inline {
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .graph-toolbar > .toolbar-inline > .sub-chart-title {
    flex: 0 0 100%;
    width: 100%;
  }

  .graph-toolbar > .toolbar-inline .mini-select {
    flex: 1 1 140px;
    min-width: 0;
    width: auto;
    margin-right: 0;
  }

  .graph-toolbar > .toolbar-buttons {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .wimley-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .wimley-toolbar-main {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .wimley-toolbar-title {
    width: 100%;
  }

  .wimley-toolbar-selects {
    width: 100%;
    align-items: stretch;
    gap: 8px;
  }

  .wimley-toolbar-selects .mini-select {
    flex: 1 1 140px;
    min-width: 0;
    width: auto;
    margin-right: 0;
  }

  .wimley-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  #fingerprintAxesMenu {
    position: fixed;
    top: var(--fingerprint-menu-top, 12px);
    left: var(--fingerprint-menu-left, 12px) !important;
    right: auto !important;
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hydropathy-chart img,
  .ph-chart img,
  .polarity-chart img,
  .beta-sheet-chart img,
  .charge-pie-chart img {
    max-height: 200px; /* Smaller graphs on small screens */
  }

  .graph-placeholder {
    height: 200px; /* Match graph height */
    padding: 14px;
  }

  #ionicCompositionTable {
    min-width: 760px;
    width: max-content;
  }

  /* Stack charts and legends vertically on mobile */
  .chart-table-row {
    flex-direction: column;
    margin-bottom: 20px;
    gap: 0; /* Reduce gap between chart and legend on mobile */
  }

  .chart-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--chart-container-basis);
  }

  #card-amino-acids-body .chart-table-row > .chart-container {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  #card-amino-acids-body .chart-table-row {
    display: flex;
    flex-direction: column;
  }

  .mini-table-container {
    width: 100%;
    justify-content: center;
    margin-top: -30px; /* Pull legend closer to chart to cover Plotly bottom margin */
  }

  /* Reset margin when placeholder is active to prevent overlap */
  .chart-table-row.has-placeholder .mini-table-container {
    margin-top: 10px;
  }

  #audit-table td:nth-child(1) .cat-pill {
    width: max-content;
    min-height: 0;
    padding: 3px 6px;
    white-space: nowrap;
  }

  #audit-table td:nth-child(1) .cat-pill::after {
    bottom: 100%;
    top: auto;
    left: 0;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8px;
    white-space: normal;
  }

  #audit-table th:nth-child(1), #audit-table td:nth-child(1) {
    width: 96px !important;
  }

  #audit-table {
    min-width: 760px;
  }

  .audit-row-details__grid {
    grid-template-columns: 1fr;
  }

  /* Vertical status pills for Analysis Support on mobile to save width */
  #analysis-support-table td:nth-child(2) .analysis-support-status,
  #analysis-tools-support-table td:nth-child(2) .analysis-support-status {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: max-content;
    min-width: 0;
    min-height: 0;
    padding: 6px 2px;
    white-space: nowrap;
  }

  #analysis-support-table th:nth-child(2),
  #analysis-support-table td:nth-child(2),
  #analysis-tools-support-table th:nth-child(2),
  #analysis-tools-support-table td:nth-child(2) {
    width: 30px !important;
  }

  #analysis-support-table,
  #analysis-tools-support-table {
    min-width: 760px;
  }

  .table-container,
  .table-scroll-shell,
  .analysis-support-table-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  .table-container.table-container-fixed-controls {
    overflow-x: visible;
  }

  /* Removed per-table override (unified to .data-table system) */
  .table-primary,
  .table-composition,
  .table-mini,
  .table-audit {
    min-width: 100%;
  }

  #ionicCompositionTable {
    min-width: 760px;
  }
}

/* ====== Timestamp ====== */
.timestamp {
  margin-top: 2rem; /* Space above timestamp */
  color: var(--text-muted); /* Muted gray color */
  text-align: right; /* Align to the right */
}

.site-footer {
  text-align: center;
}

/* ====== Logo Sizing ====== */
.peptide-logo {
  max-height: 60px;         /* constrain height */
  width: auto;              /* auto scale width */
  display: inline-block;    /* inline alignment */
  margin-right: 10px;       /* space between image and text */
  vertical-align: middle;   /* aligns with text */
}

@media (max-width: 768px) {
  .peptide-logo {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .peptide-logo {
    max-width: 80px;
  }
}

@media (max-width: 340px) {
  .calc-form-grid,
  .calc-working-grid {
    grid-template-columns: 1fr;
  }
}

/* --- pH tooltip (Peptalyzer) --- */
.ph-slider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative; /* for absolute tooltip positioning */
}

.ph-info-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid var(--primary-blue);   /* brand blue */
  background: var(--info-bg);               /* light blue tint */
  color: var(--primary-blue);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-sans);
  font-size: var(--text-sm);
  line-height: 18px;
  font-weight: var(--font-weight-bold);
  cursor: help;
  text-align: center;
}

.ph-info-badge:focus {
  outline: 2px solid var(--accent-yellow);               /* Accent focus ring */
  outline-offset: 2px;
}

.ph-tooltip {
  position: absolute;
  left: calc(100% + 10px);  /* to the right of the slider group */
  top: 50%;
  transform: translateY(-50%);
  min-width: 280px;
  max-width: 340px;
  background: var(--light-gray);            /* var(--light-gray) */
  color: var(--dark-gray);                  /* var(--dark-gray)333 */
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow-popover-soft);
  z-index: 50;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-in-out, visibility 120ms ease-in-out;
}

/* show on hover or keyboard focus */
.ph-info-badge:hover + .ph-tooltip,
.ph-info-badge:focus + .ph-tooltip {
  opacity: 1;
  visibility: visible;
}

/* pointer triangle */
.ph-info-badge + .ph-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--surface-border) transparent transparent;
}
.ph-info-badge + .ph-tooltip::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--light-gray) transparent transparent;
}

/* Mobile: position tooltip below */
@media (max-width: 640px) {
  .ph-tooltip {
    left: 0;
    right: auto;
    top: calc(100% + 8px);
    transform: none;
  }
  .ph-info-badge + .ph-tooltip::before,
  .ph-info-badge + .ph-tooltip::after {
    display: none;
  }
}

/* ====== Text Tooltip (for H and fc) ====== */
.text-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
  display: inline-block;
}

.text-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-radius);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  width: max-content;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
  z-index: var(--tooltip-z-index);
  pointer-events: none;
  box-shadow: var(--shadow-tooltip);
}

.text-tooltip.text-tooltip-preline::after {
  white-space: pre-line;
}

.text-tooltip.text-tooltip-anchor-left::after {
  left: 0;
  transform: none;
}

.text-tooltip.text-tooltip-below::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 5px;
}

.text-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.text-tooltip:focus::after,
.text-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.download-btn:hover {
  color: var(--primary-blue);
}

.download-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Location & Motif Column */
#audit-table td:nth-child(3) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-feature-mono);
}

.mono,
.data-table td.mono,
.data-table th.mono,
.data-table.mono td,
.data-table.mono th,
.data-table td[data-type="num"],
#sequence,
.sequence-input-wrap textarea,
.calc-readout,
.calc-output,
.calc-working-cell,
.result-summary-value-primary,
.result-summary-value-plain,
.control-value-badge,
.disulfide-pair-usage,
.chart-table-row td,
.audit-container td,
.calc-chip-list,
#identity-table td:nth-child(2),
#molecular-characteristics-table td:nth-child(2),
#molecular-size-table td:nth-child(2),
#secondary-structure-table td:nth-child(2),
#bio-predictive-metrics-table td:nth-child(2),
#charge-properties-table td:nth-child(2),
#zscale-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-feature-mono);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--table-font-size-body);
  color: var(--text-ink);
}

.data-table thead th {
  font-family: var(--font-sans);
  font-size: var(--table-font-size-head);
  font-weight: var(--table-head-weight);
  color: var(--table-head-color);
  text-transform: uppercase;
  letter-spacing: var(--table-head-letter-spacing);
  text-align: left;
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: var(--table-head-border);
  background: transparent;
  /* Plex width tolerance (preserved from prior commit) */
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.3;
  vertical-align: bottom;
}

.data-table tbody td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: var(--table-row-border);
  vertical-align: top;
  line-height: var(--leading-body);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: var(--table-row-hover-bg);
}

/* Numeric alignment — auto-detected via existing conventions */
.data-table th[data-type="num"],
.data-table thead th.num {
  text-align: right;
}

.data-table tbody td[data-type="num"],
.data-table tbody td.mono,
.data-table tbody td.num {
  text-align: right;
}

#fragment-ion-table th:not(:nth-child(5)),
#fragment-ion-table td:not(:nth-child(5)) {
  text-align: center;
}

#precursor-ion-table th,
#precursor-ion-table td,
#precursor-observed-match-table th,
#precursor-observed-match-table td {
  text-align: center;
}

.precursor-ion-table {
  min-width: 1080px;
}

.precursor-observed-match-table {
  min-width: 760px;
}

.precursor-ion-table sup,
.precursor-observed-match-table sup {
  font-size: 0.72em;
  line-height: 0;
}

.precursor-isotope-group-row td {
  background: var(--surface-muted);
  font-weight: var(--font-weight-semibold);
}

#panel-analytical .precursor-isotope-group-row td {
  background: var(--analysis-tools-soft-bg);
}

.precursor-isotope-detail-row td {
  background: var(--surface-white);
}

.precursor-isotope-ion-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.precursor-isotope-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--info-text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.precursor-isotope-toggle-spacer {
  display: inline-block;
  width: 20px;
  height: 20px;
}

#panel-analytical .precursor-isotope-toggle {
  color: var(--analysis-tools-active-text);
}

.precursor-isotope-toggle:hover,
.precursor-isotope-toggle:focus-visible {
  background: var(--interactive-hover-bg);
}

#panel-analytical .precursor-isotope-toggle:hover,
#panel-analytical .precursor-isotope-toggle:focus-visible {
  background: var(--analysis-tools-soft-bg);
}

#fragment-ion-table {
  table-layout: fixed;
  min-width: 900px;
}

#fragment-ion-table th:nth-child(5),
#fragment-ion-table td:nth-child(5) {
  width: 22%;
  max-width: 18rem;
}

#fragment-ion-table th:nth-child(5),
#fragment-ion-table td:nth-child(5) {
  text-align: left;
}

#fragment-ion-table td:nth-child(7) sub {
  font-size: 0.72em;
  line-height: 0;
}

.fragment-sequence-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fragment-sequence-text,
.fragment-sequence-preview,
.fragment-sequence-full {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-mono);
}

.fragment-sequence-text,
.fragment-sequence-preview {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.fragment-sequence-details summary {
  color: var(--analysis-tools-active-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
  list-style: none;
  max-width: 100%;
}

.fragment-sequence-details summary::-webkit-details-marker {
  display: none;
}

.fragment-sequence-details summary::before {
  content: "";
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 0.16s ease;
}

.fragment-sequence-details[open] summary::before {
  transform: rotate(90deg);
}

.fragment-sequence-full {
  color: var(--text-ink);
  margin-top: 5px;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

/* Optional sticky header — opt-in via modifier */
.data-table--sticky thead th {
  position: sticky;
  top: 0;
  background: var(--surface-white);
  z-index: 1;
}

.data-table--sticky thead th.sortable-col {
  position: sticky;
}

.calc-output-header h4,
.calc-output button,
.calc-output .tool-btn {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-sans);
}

/* Category Pill Styling */
.cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    white-space: nowrap;
    cursor: help; /* Changes cursor to a question mark on hover */
    text-transform: uppercase;
    position: relative;   /* Anchor for tooltip */
    border: 1px solid transparent;
}

/* Tooltip for Category Pills */
.cat-pill::after {
    content: attr(data-tooltip); /* Use data-tooltip attribute */
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    margin-bottom: var(--tooltip-offset);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    font-size: var(--tooltip-font-size);
    line-height: var(--tooltip-line-height);
    width: max-content;
    max-width: var(--tooltip-max-width);
    white-space: normal;
    text-align: left;
    text-transform: none; /* Reset uppercase from pill */
    font-weight: var(--tooltip-font-weight);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    z-index: var(--tooltip-z-index);
    pointer-events: none;
    box-shadow: var(--shadow-tooltip);
}

.cat-pill:hover::after {
    opacity: 1;
    visibility: visible;
}

.cat-critical { background-color: var(--warning-strong); color: var(--tooltip-text); }
.cat-danger { background-color: var(--warning-bg); color: var(--dark-gray); }
.cat-monitor { background-color: var(--highlight-bg); color: var(--dark-gray); }
.cat-structural { background-color: var(--secondary-blue); color: var(--tooltip-text); }
.cat-safe { background-color: var(--chlorine-green); color: var(--tooltip-text); }

.audit-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.audit-header-row .sub-chart-title {
  margin: 0;
}

.audit-copy-icon-btn {
  margin: 0;
  border: 1px solid var(--surface-border-soft) !important;
  background: var(--surface-white) !important;
  padding: 0;
  min-height: 32px;
}

.audit-copy-icon-btn:disabled {
  background: var(--surface-white) !important;
  opacity: 0.45;
  cursor: not-allowed;
}

#copySequenceBtn {
  border: 1px solid var(--surface-border-soft) !important;
  background: var(--surface-white) !important;
  border-radius: var(--radius-sm);
  min-height: 32px;
  padding: 0;
}

.sequence-copy-controls {
  align-items: flex-start;
  gap: 8px;
}

.sequence-copy-menu-wrap {
  position: relative;
}

.sequence-copy-menu .sequence-copy-menu-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.sequence-copy-menu .sequence-copy-menu-item:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 1px;
}

.audit-copy-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.app-tooltip {
  position: fixed;
  z-index: var(--tooltip-z-index);
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  box-shadow: var(--shadow-tooltip);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast);
}

.app-tooltip.is-open {
  opacity: 1;
  transform: translateY(0);
}

.app-tooltip[data-placement="below"] {
  transform: translateY(-2px);
}

.app-tooltip[data-placement="below"].is-open {
  transform: translateY(0);
}