@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/roboto-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/roboto-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/roboto-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
}
:root {
  --vela-gap: var(--md-sys-spacing-gap-xl, 24px);
  --vela-border: 1px solid var(--md-sys-color-outline-variant);
  font-family: Roboto, sans-serif;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  color-scheme: light;
  font-synthesis: none;
}
[data-theme="dark"] {
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: clamp(28px, 2.3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
h3 {
  font-size: 17px;
  font-weight: 500;
}
a {
  color: var(--md-sys-color-primary);
  text-underline-offset: 3px;
}
button,
input {
  font: inherit;
}
.icon {
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
  font-feature-settings: "liga";
}
.eyebrow,
.auth-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--md-sys-color-on-surface-variant);
}
.muted,
.page-subtitle,
.cell-meta,
.metric-note,
.capacity-note {
  color: var(--md-sys-color-on-surface-variant);
}
.skip-link {
  position: fixed;
  inset-block-start: -80px;
  inset-inline-start: 16px;
  z-index: 10000;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 12px;
}
.skip-link:focus {
  inset-block-start: 8px;
}
.startup {
  padding: 48px;
  display: grid;
  gap: 24px;
  max-inline-size: 1100px;
  margin: auto;
}
.app-shell {
  display: flex;
  position: relative;
  min-block-size: 100dvh;
}
#rail {
  flex: 0 0 auto;
  position: sticky;
  inset-block-start: 0;
  --md-navigation-rail-container-color: var(--md-sys-color-surface-container);
  --md-navigation-rail-expanded-width: 248px;
  --md-navigation-rail-padding-block: 26px;
  --md-navigation-rail-header-space: 26px;
  --md-navigation-rail-logo-icon-size: 40px;
  --md-navigation-rail-destinations-gap: 6px;
  border-inline-end: var(--vela-border);
}
#rail::part(logo) {
  min-block-size: 62px;
}
/* Keep one stationary brand mark; the rail fades only the expanded wordmark. */
#rail::part(logo-contracted) {
  opacity: 1;
  pointer-events: none;
}
.brand-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 700;
  font-size: 25px;
}
.brand-full {
  flex: none;
  padding-inline-start: 52px;
  white-space: nowrap;
}
.brand-word {
  font-size: 32px;
  letter-spacing: -0.05em;
  font-weight: 600;
  line-height: 1;
}
.brand-caption {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-start: 6px;
  color: var(--md-sys-color-on-surface-variant);
}
#rail::part(footer) {
  border-block-start: var(--vela-border);
  padding-block-start: 20px;
}
.rail-account {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rail-account-copy {
  flex: 1;
  min-inline-size: 0;
}
.rail-account-copy > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-account-copy span {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
.rail-account md-tooltip {
  flex: 0 0 auto;
}
.workspace {
  flex: 1;
  min-inline-size: 0;
}
#appbar {
  --md-app-bar-container-color: var(--md-sys-color-surface-container-low);
  --md-app-bar-padding-inline-start: 28px;
  --md-app-bar-padding-inline-end: 26px;
  --md-app-bar-trailing-gap: 12px;
  border-block-end: var(--vela-border);
}
.bar-headline {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.bar-headline .icon {
  color: var(--md-sys-color-primary);
  font-size: 21px;
}
.bar-headline small {
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
  padding-inline-start: 12px;
  border-inline-start: var(--vela-border);
}
.account-button {
  --md-icon-button-container-width: 40px;
  --md-icon-button-container-height: 40px;
}
#main {
  padding: clamp(20px, 2.6vw, 42px);
  outline: none;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 28px;
}
.page-heading .eyebrow {
  margin-block-end: 10px;
}
.page-subtitle {
  margin-block-start: 10px;
  font-size: 14px;
}
.page-actions,
.panel-heading,
.table-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.panel-heading,
.table-heading {
  margin-block-end: 20px;
}
.panel-heading p,
.table-heading p {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  margin-block-start: 4px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-block-end: 24px;
}
md-card {
  inline-size: 100%;
  min-inline-size: 0;
  --md-card-container-color: var(--md-sys-color-surface-container-lowest);
}
.metric-card {
  --md-card-padding: 22px;
  --md-card-container-color: var(--md-sys-color-surface-container-lowest);
}
.metric-card:first-child {
  --md-card-container-color: var(--md-sys-color-primary-container);
  --md-card-outline-color: transparent;
  color: var(--md-sys-color-on-primary-container);
}
.metric-card .icon {
  color: var(--md-sys-color-primary);
}
.metric-value {
  display: block;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-block: 10px 8px;
  font-variant-numeric: tabular-nums;
}
.metric-note {
  font-size: 12px;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  gap: 24px;
  margin-block-end: 24px;
  align-items: stretch;
}
.chart-card,
.attention-card {
  --md-card-padding: 24px;
}
.chart-card md-area-chart {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  --md-area-chart-container-color: transparent;
}
.chart-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-block-end: 14px;
}
.chart-summary strong {
  font-size: 32px;
  font-weight: 500;
}
.attention-list,
.activity-list {
  display: grid;
  gap: 18px;
}
.attention-item,
.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  border-block-end: var(--vela-border);
}
.attention-item:last-child,
.activity-item:last-child {
  border: 0;
}
.attention-item > div,
.activity-item > div {
  flex: 1;
}
.attention-item p,
.activity-item p {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  margin-block-start: 4px;
}
.runs-table {
  display: block;
  inline-size: 100%;
}
.table-filters {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(150px, 1fr) minmax(
      150px,
      1fr
    );
  gap: 16px;
  padding: 20px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 20px;
}
md-table-container {
  inline-size: 100%;
  --md-table-container-shape: var(--md-sys-shape-corner-large);
}
md-table-cell {
  min-inline-size: 0;
}
.cell-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.cell-meta {
  display: block;
  font-size: 11px;
  margin-block-start: 3px;
}
.analyst-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.catalog-grid,
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.compound-card,
.analyst-card,
.review-card {
  --md-card-padding: 24px;
}
.compound-card h2,
.analyst-card h2,
.review-card h2 {
  margin-block: 12px 8px;
}
.compound-card > p,
.analyst-card > p,
.review-card > p {
  color: var(--md-sys-color-on-surface-variant);
}
.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-block: 22px;
}
.detail-grid dt {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
.detail-grid dd {
  margin: 5px 0 0;
  font-weight: 500;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.capacity-note {
  display: flex;
  justify-content: space-between;
  margin-block: 22px 8px;
  font-size: 12px;
}
.analyst-card md-meter {
  display: block;
  margin-block-end: 20px;
}
.empty-state {
  padding: 54px 24px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.empty-state > .icon {
  color: var(--md-sys-color-primary);
  font-size: 40px;
}
.workspace-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 36px 24px;
}
.workspace-footer a {
  color: inherit;
}
.mobile-navigation {
  display: none;
}
.loading-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-block: 28px;
}
.auth-page {
  display: grid;
  grid-template-columns: minmax(360px, 46%) minmax(460px, 1fr);
  min-block-size: 100dvh;
  background: var(--md-sys-color-surface-container-lowest);
}
.auth-story {
  position: relative;
  padding: clamp(32px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  overflow: hidden;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.auth-brand strong {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
}
.auth-mark {
  display: grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.auth-mark .icon {
  font-size: 28px;
}
.auth-brand-caption {
  display: block;
  font-size: 11px;
  margin-block-start: 6px;
  letter-spacing: 0.08em;
}
.auth-story-content {
  margin-block: 64px;
  max-inline-size: 580px;
}
.auth-story .auth-eyebrow {
  color: inherit;
  opacity: 0.75;
}
.auth-story h2 {
  font-size: clamp(42px, 4.25vw, 68px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.07;
  margin-block: 24px;
}
.auth-story h2 em {
  font-style: normal;
  color: var(--md-sys-color-primary);
}
.auth-story-intro {
  font-size: 16px;
  max-inline-size: 35ch;
  line-height: 1.65;
}
.auth-workflow {
  margin-block-start: 44px;
  --md-card-padding: 24px;
  --md-card-container-color: transparent;
  --md-card-outline-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary-container) 24%,
    transparent
  );
  color: inherit;
}
.auth-workflow > div {
  display: flex;
  align-items: start;
  gap: 15px;
}
.auth-workflow-icon .icon {
  font-size: 28px;
}
.auth-workflow p {
  font-size: 13px;
  line-height: 1.6;
  margin-block-start: 6px;
}
.auth-workflow ol {
  padding-inline-start: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  font-size: 11px;
  margin-block: 24px 0;
}
.auth-story-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.auth-form-area {
  padding: 30px clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  outline: none;
}
.auth-topline,
.auth-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
}
.auth-form-content {
  max-inline-size: 430px;
  inline-size: 100%;
  margin: 52px auto;
}
.auth-form-content.auth-signup {
  margin-block: 28px;
}
.auth-form-symbol {
  display: inline-grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  color: var(--md-sys-color-primary);
  margin-block-end: 24px;
}
.auth-form-symbol .icon {
  font-size: 28px;
}
.auth-form-content h1 {
  margin-block: 12px;
  font-size: 38px;
}
.auth-intro {
  color: var(--md-sys-color-on-surface-variant);
  margin-block-end: 28px;
}
.auth-fields {
  display: grid;
  gap: 10px;
}
.auth-fields md-text-field {
  inline-size: 100%;
}
.auth-error {
  color: var(--md-sys-color-error);
  font-size: 12px;
}
.auth-error:empty {
  display: none;
}
.auth-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-block-end: 8px;
}
.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  gap: 4px;
  margin-block: 14px 22px;
}
.auth-demo-card {
  --md-card-padding: 22px;
  --md-card-container-color: var(--md-sys-color-surface-container-low);
}
.auth-demo-card > p {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  margin-block-start: 5px;
}
.auth-credentials {
  margin-block: 18px;
  font-size: 12px;
  display: grid;
  gap: 8px;
}
.auth-credentials > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.auth-credentials dt {
  color: var(--md-sys-color-on-surface-variant);
}
.auth-credentials dd {
  margin: 0;
  font-weight: 500;
}
.auth-disclosure {
  display: flex;
  gap: 8px;
  align-items: start;
  font-size: 10px;
  color: var(--md-sys-color-on-surface-variant);
  margin-block-start: 22px;
  line-height: 1.6;
}
.auth-disclosure .icon {
  font-size: 16px;
}
.auth-code-card {
  text-align: center;
  --md-card-padding: 20px;
  --md-card-container-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  margin-block-end: 14px;
}
.auth-code-card span,
.auth-code-card p {
  font-size: 12px;
}
.auth-code {
  display: block;
  font-size: 28px;
  letter-spacing: 0.28em;
  margin-block: 6px;
}
.auth-verification md-otp-field {
  inline-size: 100%;
}
.auth-verification md-otp-field::part(cells) {
  justify-content: center;
}
.auth-verification md-otp-field::part(supporting-text) {
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}
.auth-mfa-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px;
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
@media (min-width: 1800px) {
  #main {
    padding: 44px;
  }
  .overview-grid {
    grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1fr);
  }
}
@media (max-width: 1150px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .catalog-grid,
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .auth-story {
    padding: 36px;
  }
  .auth-story h2 {
    font-size: 48px;
  }
  .auth-story-content {
    margin-block: 50px;
  }
}
@media (max-width: 850px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .auth-page {
    grid-template-columns: 1fr;
  }
  .auth-story {
    display: none;
  }
  .auth-form-area {
    min-block-size: 100dvh;
    padding: 24px;
  }
  .auth-form-content {
    margin-block: 40px;
  }
  .table-filters {
    grid-template-columns: 1fr;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }
  .bar-headline small {
    display: none;
  }
}
@media (max-width: 599px) {
  #rail {
    display: none;
  }
  .mobile-navigation {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--md-sys-z-index-navigation, 200);
    padding-block-end: env(safe-area-inset-bottom);
    background: var(--md-sys-color-surface-container);
    --md-sys-density-scale: 0;
  }
  .workspace {
    padding-block-end: 85px;
  }
  #appbar {
    --md-app-bar-padding-inline-start: 16px;
    --md-app-bar-padding-inline-end: 12px;
    --md-app-bar-trailing-gap: 6px;
  }
  #main {
    padding: 24px 16px;
  }
  .page-heading {
    align-items: start;
    flex-direction: column;
    margin-block-end: 24px;
  }
  .catalog-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .metric-value {
    font-size: 34px;
  }
  .metric-card {
    --md-card-padding: 18px;
  }
  .workspace-footer {
    margin-inline: 16px;
    flex-direction: column;
  }
  .bar-headline {
    font-size: 12px;
    gap: 6px;
  }
  .auth-form-footer {
    font-size: 10px;
  }
  .loading-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
.symbol {
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
  font-feature-settings: "liga";
}
.metric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}
.metric-heading .symbol {
  color: var(--md-sys-color-primary);
  padding: 9px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
}
.metric-primary .metric-heading {
  color: inherit;
}
.metric-primary .metric-heading .symbol {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-primary-container) 8%,
    transparent
  );
}
.chart-footnote {
  font-size: 10px;
  color: var(--md-sys-color-on-surface-variant);
  margin-block-start: 14px;
}
.chart-summary > span {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}
.panel-heading .eyebrow {
  margin-block-end: 8px;
}
.attention-card .page-subtitle {
  margin-block-end: 16px;
}
.attention-card > .text-link {
  display: inline-block;
  margin-block-start: 24px;
}
.attention-card .attention-note {
  font-size: 11px;
}
.text-link {
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}
.table-heading {
  padding: 22px 24px;
  margin: 0;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 24px;
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
.worklist-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.worklist-tools .filter-chips {
  padding: 0;
}
.table-filters {
  padding-inline: 0;
}
.section-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 24px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}
.compound-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--md-sys-color-primary);
  font-size: 12px;
  margin-block-end: 24px;
}
.compound-kicker .symbol {
  font-size: 32px;
}
.compound-summary {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-block-start: 20px;
}
.compound-owner {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-block-end: 16px;
  font-size: 12px;
}
.review-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  font-size: 12px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
}
.review-note .symbol {
  color: var(--md-sys-color-primary);
  font-size: 20px;
}
.review-owner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block: 20px;
  font-size: 12px;
}
.analyst-profile {
  display: flex;
  gap: 14px;
  align-items: center;
}
.analyst-profile h2 {
  font-size: 17px;
  margin: 0;
}
.analyst-profile .page-subtitle {
  font-size: 12px;
  margin-block-start: 5px;
}
.analyst-specialty {
  font-size: 12px;
  margin-block: 22px;
  color: var(--md-sys-color-on-surface-variant);
}
.overlay-form {
  display: block;
}
.new-run-dialog::part(container) {
  inline-size: min(740px, calc(100vw - 48px));
  max-inline-size: 740px;
}
.detail-sheet {
  --md-side-sheet-width: 560px;
  --md-side-sheet-max-width: 620px;
}
.settings-sheet {
  --md-side-sheet-width: 420px;
  --md-side-sheet-max-width: 460px;
  --md-color-picker-width: 100%;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin-block: 24px;
}
.form-span {
  grid-column: 1 / -1;
}
.form-grid md-text-field,
.form-grid md-number-field,
.form-grid md-select,
.overlay-form md-text-field,
.overlay-form md-select {
  inline-size: 100%;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 12px;
}
.form-error {
  color: var(--md-sys-color-error);
  margin-block: 12px;
  font-size: 13px;
}
.form-error:empty {
  display: none;
}
.overlay-intro,
.detail-caption {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.6;
}
.detail-content {
  display: grid;
  gap: 18px;
}
.detail-content > p {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
}
.detail-kicker {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--md-sys-color-primary);
}
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-status {
  display: inline-flex;
}
.detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 8px 0;
}
.detail-facts dt,
.detail-metrics dt {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
.detail-facts dd,
.detail-metrics dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 500;
}
.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-block: 18px;
}
.detail-metrics dd {
  font-size: 28px;
  letter-spacing: -0.025em;
}
.detail-section {
  border-block-start: var(--vela-border);
  padding-block-start: 22px;
  margin-block-start: 4px;
}
.detail-section h3 {
  margin-block-end: 16px;
}
.detail-section > p {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin-block-end: 16px;
}
.detail-section md-progress-indicator {
  display: block;
  margin-block-end: 10px;
}
.detail-note {
  --md-card-padding: 18px;
}
.detail-note p {
  margin-block: 10px;
}
.detail-note small {
  color: var(--md-sys-color-on-surface-variant);
}
.detail-note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.research-notes {
  --md-list-item-expanded-panel-padding-block: 12px;
  --md-list-item-expanded-panel-padding-inline: 16px;
}
.research-notes md-list-item::part(supporting-text) {
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.settings-section {
  display: grid;
  gap: 14px;
  padding-block: 8px 22px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
  border-block-end: var(--vela-border);
}
.settings-copy {
  display: grid;
  gap: 5px;
  font-size: 13px;
}
.settings-copy span {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 599px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .new-run-dialog::part(container) {
    inline-size: calc(100vw - 24px);
  }
  .auth-verification md-otp-field {
    --md-otp-field-cell-width: 40px;
    --md-otp-field-cell-gap: 6px;
  }
  .table-heading {
    padding: 18px;
  }
  .table-heading .text-link {
    white-space: nowrap;
  }
  .metrics-grid {
    gap: 12px;
  }
  .metric-heading .symbol {
    font-size: 19px;
    padding: 6px;
  }
}

.mobile-navigation[hidden] {
  display: none;
}