/* AstroNexus scientific UI. Final presentation layer; application contracts stay intact. */
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-SemiBold.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url('../assets/fonts/Geist-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root {
  color-scheme: light;
  --font-ui: Geist, 'Noto Sans Bengali', 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --canvas: var(--an-white);
  --surface: var(--an-white);
  --surface-muted: var(--an-surface);
  --ink: var(--an-ink);
  --muted: var(--an-body);
  --subtle: var(--an-body);
  --blue: var(--an-primary);
  --blue-deep: var(--an-primary-hover);
  --blue-bright: var(--an-primary);
  --blue-tint: var(--an-tint);
  --border: var(--an-rule);
  --border-strong: var(--an-rule);
  --green: #287150;
  --red: #a53637;
  /* Legacy variable names remain aliases for existing UI components. */
  --black: var(--canvas);
  --white: var(--ink);
  --navy: var(--surface-muted);
  --orange: var(--blue);
  --orange-hover: var(--blue-deep);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --radius-control: 3px;
  --radius-panel: 3px;
  --content-width: 1200px;
  --ease-ui: cubic-bezier(.2,.7,.3,1);
  --layer-navigation: 5;
  --layer-focus: 10;
}
body { background: var(--canvas); color: var(--ink); font: 400 16px/1.6 var(--font-ui); }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }
:where(button, a, input, textarea, select, summary) { -webkit-tap-highlight-color: transparent; }
:focus-visible, .workspace-page :is(input,textarea,button,a):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 4px;
}
:where(a,button,summary) { touch-action: manipulation; }
:where(a,button,input,select,textarea,summary) { transition: background-color 160ms var(--ease-ui), color 160ms var(--ease-ui), border-color 160ms var(--ease-ui), box-shadow 160ms var(--ease-ui); }
:where(button,.button,.nav-action):active:not(:disabled) { transform: translateY(1px); }
:where(input,select,textarea) { accent-color: var(--blue); }
:where(input,textarea,select):disabled { cursor: not-allowed; opacity: .65; }
.nav-shell, .hero, .landing-inner, .page-shell, .footer-inner { width: min(calc(100% - 80px), var(--content-width)); margin-inline: auto; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); z-index: var(--layer-navigation); }
.nav-shell { gap: var(--space-5); min-height: 80px; }
.site-header .brand { border: 0; padding: 0; gap: 9px; }
.site-header .brand img, .footer-brand img { width: 40px; height: 40px; object-fit: contain; }
.brand-lockup strong, .site-header .brand-lockup strong { color: #213d51; font-size: 18px; font-weight: 600; letter-spacing: -.045em; text-transform: none; }
.brand-lockup small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; margin-top: 3px; }
.site-nav { gap: var(--space-5); }
.site-nav a { font-size: 13px; font-weight: 500; color: var(--muted); padding-block: 28px; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--blue-deep); }
.site-nav a[aria-current='page']::after { background: var(--blue); height: 2px; }
.nav-action, .button.primary { color: #fff; background: var(--blue); border: 1px solid var(--blue); box-shadow: 0 1px 2px rgb(25 49 66 / 4%); }
.nav-action { padding: 10px 14px; min-height: 42px; border-radius: var(--radius-control); font-size: 12px; font-weight: 500; }
.nav-action span { color: inherit; }
.nav-action:hover, .nav-action[aria-current='page'], .button.primary:hover:not(:disabled) { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.button { min-height: 44px; gap: var(--space-4); padding: 11px 17px; border-radius: var(--radius-control); font-size: 13px; font-weight: 500; }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: 0 1px 2px rgb(25 49 66 / 3%); }
.button.secondary:hover { background: var(--surface-muted); border-color: #9cadba; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.text-action { color: var(--blue-deep); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.text-action:hover { color: #07425f; text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font: 500 11px/1.5 var(--font-ui); letter-spacing: .12em; color: var(--blue-deep); margin-bottom: var(--space-4); }
.language-switch { gap: 3px; color: var(--subtle); }
.language-switch button { min-width: 44px; min-height: 44px; padding: 8px 3px; color: var(--muted); font-size: 11px; font-weight: 500; border-bottom: 0; border-radius: 4px; }
.language-switch button.is-active, .language-switch button[aria-pressed='true'] { color: var(--blue-deep); border-bottom: 0; }
.language-switch button:hover { background: var(--surface-muted); }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: var(--layer-focus); transform: translateY(-200%); background: var(--surface); color: var(--blue-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 12px 20px; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
#portal-main { display: block; scroll-margin-top: 20px; }
/* Existing product forms, account, job status and research resources. */
.page-heading h1, .account-form-section h1, .account-detail h1, .research-heading h1, .workspace-hero h1, .start-main h1 { font-size: clamp(32px,3.2vw,44px); font-weight: 600; line-height: 1.17; }
.page-heading { padding-bottom: var(--space-6); border-color: var(--border); }
.page-heading p:last-child, .account-lead, .research-intro, .start-intro { font-size: 16px; color: var(--muted); max-width: 65ch; }
.page-sequence, .form-section-index, .start-number { color: var(--subtle); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; }
.form-card, .progress-card, .receipt, .lookup-card, .status-card { border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 2px 8px rgb(25 49 66 / 2%); }
.form-card { padding: var(--space-6); }
.form-section-heading h2, .card-heading h2 { font-size: 22px; }
.form-section-heading p, .form-helper, .status-help p { color: var(--muted); font-size: 14px; }
:where(input[type='text'],input[type='email'],input[type='password'],input[type='number'],select,textarea), .workspace-name input, .workspace-table-wrap input, #custom-genes { border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--ink); background: var(--surface); min-height: 46px; font-size: 16px; }
input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
:where(input[type='text'],input[type='email'],input[type='password'],input[type='number'],select,textarea):focus { border-color: var(--blue); outline: 3px solid rgb(20 107 146 / 22%); outline-offset: 1px; }
:where(input,select,textarea)[aria-invalid='true'] { border-color: var(--red); outline-color: var(--red); background: #fffafa; }
.file-picker, .workspace-picker { background: var(--canvas); border: 1px dashed var(--border-strong); border-radius: var(--radius-panel); }
.file-grid { gap: var(--space-4); }
.file-picker:first-child { border-left: 1px dashed var(--border-strong); }
.file-picker:hover, .file-picker:focus-within, .workspace-picker:hover { background: var(--blue-tint); border-color: var(--blue); }
.file-picker:focus-within, .workspace-picker:focus-within, .workspace-mode:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; }
.file-picker .mate { color: var(--blue-deep); border-radius: 4px; border-color: var(--border); background: var(--blue-tint); font-family: var(--font-mono); }
.file-picker:hover .mate, .file-picker:focus-within .mate { background: var(--blue-tint); color: var(--blue-deep); }
.file-select-label { color: var(--blue-deep); border-color: var(--border-strong); border-radius: var(--radius-control); background: var(--surface); }
.service-note, .status-help, .validation-note { border-color: var(--border); background: var(--surface-muted); border-radius: var(--radius-control); color: var(--muted); }
.validation-note { border: 1px solid var(--border); }
.service-dot { background: var(--blue); }
.form-message:not(:empty), .account-message:not(:empty) { background: #fbefef; color: var(--red); border-radius: 4px; border-color: var(--red); }
.form-message:is([data-cloud-key='cloud.credit_ready'],[data-cloud-key='cloud.queued_short'],[data-cloud-key='submit.cancelled']):not(:empty) { background: #edf5ef; color: #286044; border-color: #287150; }
.form-message[data-cloud-key='cloud.resume_notice']:not(:empty) { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue); }
.form-message[data-cloud-key='cloud.no_credit']:not(:empty) { background: #fbf5e9; color: #835d18; border-color: #b1842f; }
.status-pill { border-radius: 4px; background: var(--blue-tint); color: var(--blue-deep); border: 1px solid #cee0e9; padding: 5px 9px; font-size: 12px; font-weight: 500; }
.status-pill.complete { background: #edf5ef; color: #286044; border-color: #d3e5d9; }
.status-pill.failed { background: #fbefef; color: var(--red); border-color: #edcfcf; }
.status-pill.warning { background: #fbf5e9; color: #835d18; border-color: #ecdfc0; }
.status-identifiers { background: var(--surface-muted); border-color: var(--border); border-radius: var(--radius-control); }
.status-identifiers strong, .progress-label > span:last-child { font-variant-numeric: tabular-nums; }
progress { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--border); }
progress::-webkit-progress-value { background: var(--blue); border-radius: 3px; }
progress::-moz-progress-bar { background: var(--blue); border-radius: 3px; }
.timeline li.current::before { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.delivery-actions { background: var(--blue-tint); border-color: var(--border); border-radius: var(--radius-control); }
.start-options { gap: var(--space-5); }
.start-option { padding: var(--space-6); border-color: var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.start-option h2 { font-size: 28px; }
.start-option > p, .start-note, .start-help details p { color: var(--muted); }
.start-input strong, .start-receive strong { color: var(--ink); font-weight: 500; }
.start-help, .start-help details, .account-form { border-color: var(--border); }
.account-form { border-top-width: 1px; }
.account-table-wrap, .workspace-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-control); }
.account-table-wrap table, .workspace-table-wrap table { font-variant-numeric: tabular-nums; }
.account-table-wrap th, .workspace-table-wrap th { color: var(--muted); background: var(--surface-muted); font-size: 12px; font-weight: 500; }
.account-table-wrap :is(th,td), .workspace-table-wrap :is(th,td) { border-color: var(--border); padding: 14px 16px; }
.workspace-hero { background: var(--surface-muted); border-color: var(--border); }
.workspace-mode { min-height: 170px; border-radius: var(--radius-control); border-color: var(--border); }
.workspace-mode strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.workspace-mode small { color: var(--muted); }
.workspace-mode.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-tint); }
.workspace-review { border-color: var(--border) !important; border-radius: var(--radius-panel); background: var(--surface-muted); }
.workspace-state { border-color: var(--blue); color: var(--muted); }
.workspace-content > section, .workspace-summary, .workspace-summary div { border-color: var(--border); }
.workspace-summary dd, .workspace-summary dt { color: var(--ink); }
.workspace-help, .workspace-picker span { color: var(--muted); }
.workspace-content:has(#genome-table-body:empty) .workspace-table-wrap { background: var(--surface-muted); }
.detail-hero { background: var(--surface-muted); }
.detail-hero h1, .comparative-hero h1 { font-size: clamp(36px,3.5vw,50px); }
.detail-hero-aside, .comparative-card, .concept-step { border-color: var(--border); border-radius: var(--radius-control); }
.comparative-card { background: var(--surface); box-shadow: none; }
.concept-note { border-color: var(--border); background: var(--blue-tint); }
.research-heading { border-color: var(--border); }
.resource-nav a { border-color: var(--border); border-radius: 4px; }
.research-callout, .research-note { border-color: var(--border); background: var(--surface-muted); }
.account-page { min-height: 100dvh; }
.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.footer-inner { gap: var(--space-6); padding-block: var(--space-7); }
.footer-inner p { color: var(--muted); font-size: 12px; }
.footer-links a, .footer-links > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.footer-links nav { gap: 18px; }
@media (max-width: 1100px) {
  .nav-shell { flex-wrap: wrap; justify-content: space-between; gap: 0 20px; padding-block: 12px 4px; }
  .site-nav { order: 3; flex: 1; width: auto; margin: 0; }
  .site-nav a { padding-block: 12px; }
  .language-switch { order: 4; }
}
@media (max-width: 760px) {
  .nav-shell, .hero, .landing-inner, .page-shell, .footer-inner { width: calc(100% - 40px); }
  .nav-shell { gap: 6px 16px; padding-block: 12px 8px; }
  .site-nav { width: 100%; flex: auto; gap: 0 18px; }
  .site-nav a { padding-block: 10px; min-height: 44px; }
  .language-switch { width: auto; margin-left: auto; }
  body:not(.platform-home) .nav-shell::before { content: ''; flex-basis: 100%; order: 3; }
  body:not(.platform-home) .site-nav { order: 4; flex: 1; width: 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  body:not(.platform-home) .site-nav a { flex: none; white-space: nowrap; }
  body:not(.platform-home) .site-nav a:focus-visible { outline-offset: -3px; }
  body:not(.platform-home) .language-switch { order: 5; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-links { text-align: left; align-items: flex-start; }
  .footer-links nav { justify-content: flex-start; }
  .form-card { padding: var(--space-5); }
  .page-heading { padding-top: var(--space-7); }
  .workspace-table-wrap { border: 0; border-radius: 0; }
  .workspace-table-wrap tr { border-color: var(--border); border-radius: var(--radius-control); }
  .workspace-table-wrap td { padding: 8px; }
  .start-option { padding: var(--space-5); }
  .account-main { padding-top: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}