/**
 * Octavital Frontend 2.0 — visual foundation (F0C constitution)
 *
 * Opt-in only. Selectors are scoped to .ov-2 / .ov-page / .ov-*.
 * Do not restyle Bootstrap / Vuexy globals (.btn-primary, .card, a, --bs-*).
 * Do not encode Case / D&A / MH / TM / Journey / entitlement business enums.
 *
 * Quality bar: calm, precise, controlled, expensive, international,
 * enterprise, maritime / P&I-grade. Hierarchy and geometry over decoration.
 *
 * Global family (do not switch to Inter):
 *   "Source Sans 3", "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif
 *
 * Login 57/43 split, cinematic brand panel, ship/world atmosphere, and
 * floating access-card elevation are LOGIN-SPECIFIC. They must not be
 * copied onto Dashboard, Case, Admin, Organization, Ship, or Crew.
 *
 * Load AFTER Vuexy / Bootstrap CSS.
 */

/* -------------------------------------------------------------------------- */
/* Tokens — hosted on opt-in roots and primitives (inherit to descendants)    */
/* -------------------------------------------------------------------------- */

.ov-2,
.ov-page,
.ov-login,
.ov-workspace,
.ov-header,
.ov-section,
.ov-stack,
.ov-grid,
.ov-rail,
.ov-panel,
.ov-btn,
.ov-icon-btn,
.ov-link,
.ov-nav-link,
.ov-breadcrumb,
.ov-field,
.ov-input,
.ov-select,
.ov-check,
.ov-radio,
.ov-textarea,
.ov-file,
.ov-label,
.ov-helper,
.ov-error,
.ov-badge,
.ov-status,
.ov-table-wrap,
.ov-table,
.ov-pagination,
.ov-filters,
.ov-empty,
.ov-metric,
.ov-alert,
.ov-busy,
.ov-modal,
.ov-drawer,
.ov-sheet,
.ov-identity,
.ov-meta,
.ov-num,
.ov-kicker,
.ov-axis,
.ov-actions,
.ov-frame,
.ov-footer,
.ov-surface,
.ov-trust,
.ov-toast,
.ov-secret,
.ov-touch {
  /* Locked operational palette — do not replace with bright blue. */
  --ov-brand-primary: #1b3a6b;
  --ov-brand-primary-hover: #163056;
  --ov-brand-accent: #0e6b66;

  --ov-ink: #1e293b;
  --ov-text: #334155;
  --ov-text-secondary: #475569;
  --ov-text-muted: #64748b;

  --ov-paper: #ffffff;
  --ov-wash: #f4f6f8;
  --ov-line: #e2e8f0;
  --ov-inverse: #ffffff;

  --ov-success: #1f7a4d;
  --ov-warning: #b45309;
  --ov-danger: #b42318;
  --ov-info: #2f5a9a;

  --ov-success-wash: #e8f4ee;
  --ov-warning-wash: #f8eee4;
  --ov-danger-wash: #f8e8e6;
  --ov-info-wash: #e8eef6;
  --ov-primary-wash: #e8eef4;
  --ov-accent-wash: #e6f2f1;

  /* Inverse / brand-surface tonals — additions for Login and future dark surfaces.
     Do not use as the operational page background. */
  --ov-navy-950: #0b1628;
  --ov-navy-900: #12233d;
  --ov-brand-blue: #1a4a8a;
  --ov-inverse-muted: rgba(255, 255, 255, 0.68);
  --ov-inverse-subtle: rgba(255, 255, 255, 0.42);
  --ov-inverse-line: rgba(255, 255, 255, 0.12);
  --ov-surface-inverse: var(--ov-navy-950);
  --ov-surface-inverse-raised: var(--ov-navy-900);

  /* 4px scale; 8px rhythm is dominant. No arbitrary 13/27/37 values. */
  --ov-space-1: 4px;
  --ov-space-2: 8px;
  --ov-space-3: 12px;
  --ov-space-4: 16px;
  --ov-space-5: 20px;
  --ov-space-6: 24px;
  --ov-space-8: 32px;
  --ov-space-10: 40px;
  --ov-space-12: 48px;
  --ov-space-16: 64px;
  --ov-space-20: 80px;
  --ov-space-24: 96px;
  --ov-space-rhythm: var(--ov-space-2);

  /* Radius constitution. Existing control/panel/overlay values stay for current
     Login consumers; named roles are the source of truth for new surfaces. */
  --ov-radius-control: 4px;
  --ov-radius-panel: 6px;
  --ov-radius-overlay: 8px;
  --ov-radius-badge: 6px;
  --ov-radius-input: 8px;
  --ov-radius-button: 8px;
  --ov-radius-panel-sm: 10px;
  --ov-radius-card: 16px;
  --ov-radius-overlay-max: 16px;

  /* Elevation roles. Prefer border + surface. Floating is not the panel default.
     No Vuexy purple shadow. */
  --ov-shadow-0: none;
  --ov-shadow-1: 0 1px 2px rgba(27, 58, 107, 0.06);
  --ov-shadow-2: 0 4px 12px rgba(27, 58, 107, 0.1);
  --ov-elev-surface: none;
  --ov-elev-raised: 0 1px 2px rgba(14, 30, 55, 0.06);
  --ov-elev-floating: 0 16px 45px rgba(14, 30, 55, 0.07);
  --ov-elev-modal: 0 8px 28px rgba(14, 30, 55, 0.12);
  --ov-elev-focus: 0 0 0 2px var(--ov-paper), 0 0 0 4px rgba(27, 58, 107, 0.35);

  --ov-focus-ring: var(--ov-elev-focus);

  --ov-font: "Source Sans 3", "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif;
  --ov-font-weight-regular: 400;
  --ov-font-weight-medium: 500;
  --ov-font-weight-semibold: 600;
  --ov-font-body: 15px;
  --ov-font-table: 14px;
  --ov-font-table-compact: 13px;
  --ov-line-body: 1.45;

  --ov-type-display-lg: 40px;
  --ov-type-heading-xl: 28px;
  --ov-type-heading-lg: 20px;
  --ov-type-heading-md: 16px;
  --ov-type-body-lg: 16px;
  --ov-type-body-md: 15px;
  --ov-type-body-sm: 13px;
  --ov-type-label: 12px;
  --ov-type-caption: 12px;
  --ov-type-metric: 24px;

  --ov-duration-micro: 140ms;
  --ov-duration-refine: 240ms;
  --ov-duration-enter: 360ms;
  --ov-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --ov-control-height: 36px;
  --ov-control-height-compact: 32px;
  --ov-icon-btn-size: 36px;
  --ov-touch-min: 44px;

  --ov-z-sticky: 20;
  --ov-z-dropdown: 1000;
  --ov-z-drawer: 1080;
  --ov-z-modal: 1090;
  --ov-z-toast: 1100;
  --ov-z-tooltip: 1110;

  --ov-workspace-pad: 20px;

  box-sizing: border-box;
  font-family: var(--ov-font);
}

.ov-2 *,
.ov-2 *::before,
.ov-2 *::after,
.ov-page *,
.ov-page *::before,
.ov-page *::after,
.ov-login *,
.ov-login *::before,
.ov-login *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* Page + workspace (variants exist; do not apply globally in templates yet)  */
/* Stable frame. Controlled fluid workspace. Deliberate breakpoints.          */
/* Operational pages may be denser than Login. Never inherit 57/43 split.     */
/* -------------------------------------------------------------------------- */

.ov-page {
  color: var(--ov-text, #334155);
  font-size: var(--ov-font-body, 15px);
  line-height: var(--ov-line-body, 1.45);
  background: transparent;
  min-width: 0;
}

.ov-frame {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.ov-workspace {
  width: 100%;
  margin-inline: auto;
  padding: var(--ov-workspace-pad, 20px);
  min-width: 0;
}

.ov-workspace--admin {
  max-width: 1760px;
  --ov-control-height: 32px;
  --ov-icon-btn-size: 32px;
  --ov-font-table: 13px;
  --ov-workspace-pad: 16px;
}

.ov-workspace--org {
  max-width: 1680px;
  --ov-workspace-pad: 20px;
}

.ov-workspace--ship {
  max-width: 960px;
  --ov-control-height: 40px;
  --ov-icon-btn-size: 40px;
}

.ov-workspace--ship-ops {
  max-width: 1680px;
  --ov-control-height: 40px;
  --ov-icon-btn-size: 40px;
}

.ov-workspace--crew,
.ov-page--crew {
  --ov-font-body: 16px;
  --ov-control-height: 44px;
  --ov-icon-btn-size: 44px;
  --ov-workspace-pad: 16px;
}

.ov-workspace--crew {
  max-width: 640px;
}

.ov-page--crew {
  font-size: 16px;
}

@media (min-width: 768px) {
  .ov-workspace--crew {
    max-width: 720px;
  }
}

@media (max-width: 1024px) {
  .ov-workspace--admin,
  .ov-workspace--org,
  .ov-workspace--ship-ops {
    --ov-workspace-pad: 16px;
  }
}

@media (max-width: 768px) {
  .ov-workspace {
    --ov-workspace-pad: 16px;
  }
}

@media (max-width: 430px) {
  .ov-workspace {
    --ov-workspace-pad: 12px;
  }
}

/* -------------------------------------------------------------------------- */
/* Type roles                                                                 */
/* Controlled weights: 400 / 500 / 600. Avoid 700/800 as default hierarchy.   */
/* display-lg is Login-grade atmosphere type — not an operational page title. */
/* -------------------------------------------------------------------------- */

.ov-type-display-lg,
.ov-type-heading-xl,
.ov-type-heading-lg,
.ov-type-heading-md,
.ov-type-body-lg,
.ov-type-body-md,
.ov-type-body-sm,
.ov-type-label,
.ov-type-caption,
.ov-type-metric {
  margin: 0;
  font-family: var(--ov-font);
}

.ov-type-display-lg {
  font-size: var(--ov-type-display-lg, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ov-ink, #1e293b);
}

.ov-type-heading-xl {
  font-size: var(--ov-type-heading-xl, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ov-ink, #1e293b);
}

.ov-type-heading-lg {
  font-size: var(--ov-type-heading-lg, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ov-ink, #1e293b);
}

.ov-type-heading-md {
  font-size: var(--ov-type-heading-md, 16px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ov-ink, #1e293b);
}

.ov-type-body-lg {
  font-size: var(--ov-type-body-lg, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ov-text, #334155);
}

.ov-type-body-md {
  font-size: var(--ov-type-body-md, 15px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ov-text, #334155);
}

.ov-type-body-sm {
  font-size: var(--ov-type-body-sm, 13px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ov-text-secondary, #475569);
}

.ov-type-label {
  font-size: var(--ov-type-label, 12px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ov-text-muted, #64748b);
}

.ov-type-caption {
  font-size: var(--ov-type-caption, 12px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ov-text-muted, #64748b);
}

.ov-type-metric {
  font-size: var(--ov-type-metric, 24px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ov-ink, #1e293b);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ov-title,
.ov-header__title {
  margin: 0;
  font-family: var(--ov-font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ov-ink, #1e293b);
}

.ov-section__title {
  margin: 0;
  font-family: var(--ov-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ov-ink, #1e293b);
}

.ov-panel__title {
  margin: 0;
  font-family: var(--ov-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ov-ink, #1e293b);
}

.ov-kicker {
  margin: 0;
  font-family: var(--ov-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ov-text-muted, #64748b);
}

.ov-body {
  font-size: var(--ov-font-body, 15px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ov-text, #334155);
}

.ov-num,
.ov-metric__value,
.ov-table td.ov-num,
.ov-table th.ov-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ov-identity {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ov-ink, #1e293b);
  font-weight: 600;
}

.ov-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ov-text-muted, #64748b);
}

/* -------------------------------------------------------------------------- */
/* Layout primitives                                                          */
/* -------------------------------------------------------------------------- */

/* Alignment axes — neighbors share one inset. No independent section offsets. */

.ov-axis {
  --ov-axis-pad: 0px;
  min-width: 0;
  padding-inline: var(--ov-axis-pad);
}

.ov-axis--page {
  --ov-axis-pad: var(--ov-workspace-pad, 20px);
}

.ov-axis--section,
.ov-axis--panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ov-axis--start {
  align-items: flex-start;
}

.ov-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ov-space-2, 8px);
  min-width: 0;
}

.ov-actions--start {
  justify-content: flex-start;
}

.ov-actions--stretch {
  justify-content: stretch;
}

.ov-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ov-space-4, 16px);
  margin-bottom: var(--ov-space-6, 24px);
  min-width: 0;
}

.ov-header__main {
  min-width: 0;
  flex: 1 1 16rem;
}

.ov-header__context {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ov-text-muted, #64748b);
}

.ov-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ov-space-2, 8px);
}

.ov-section {
  margin-bottom: var(--ov-space-6, 24px);
  min-width: 0;
}

.ov-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ov-space-3, 12px);
  margin-bottom: var(--ov-space-3, 12px);
}

.ov-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-4, 16px);
  min-width: 0;
}

.ov-stack--tight {
  gap: var(--ov-space-2, 8px);
}

.ov-stack--loose {
  gap: var(--ov-space-6, 24px);
}

.ov-grid {
  display: grid;
  gap: var(--ov-space-4, 16px);
  min-width: 0;
  grid-template-columns: 1fr;
}

.ov-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ov-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ov-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .ov-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ov-grid--2,
  .ov-grid--3,
  .ov-grid--4 {
    grid-template-columns: 1fr;
  }
}

.ov-panel {
  background: var(--ov-paper, #ffffff);
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-panel, 6px);
  box-shadow: var(--ov-shadow-0, none);
  padding: var(--ov-space-4, 16px) var(--ov-space-5, 20px);
  min-width: 0;
}

.ov-panel--sm {
  border-radius: var(--ov-radius-panel-sm, 10px);
}

.ov-panel--card {
  border-radius: var(--ov-radius-card, 16px);
}

.ov-panel--raised {
  box-shadow: var(--ov-elev-raised);
}

.ov-panel--floating {
  border-radius: var(--ov-radius-card, 16px);
  box-shadow: var(--ov-elev-floating);
}

.ov-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ov-space-3, 12px);
  margin-bottom: var(--ov-space-3, 12px);
}

/* Metric rail — not one card per metric */

.ov-rail {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  background: var(--ov-paper, #ffffff);
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-panel, 6px);
  padding: var(--ov-space-3, 12px) var(--ov-space-4, 16px);
}

.ov-rail__item {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--ov-space-1, 4px) var(--ov-space-4, 16px);
  border-left: 1px solid var(--ov-line, #e2e8f0);
  text-decoration: none;
  color: inherit;
}

.ov-rail__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.ov-rail__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ov-text-muted, #64748b);
}

.ov-metric,
.ov-rail__value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ov-ink, #1e293b);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ov-workspace--org .ov-rail__value,
.ov-workspace--org .ov-metric {
  font-size: 28px;
}

@media (max-width: 768px) {
  .ov-rail {
    flex-direction: column;
    gap: 0;
  }

  .ov-rail__item {
    padding: var(--ov-space-3, 12px) 0;
    border-left: 0;
    border-top: 1px solid var(--ov-line, #e2e8f0);
  }

  .ov-rail__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

.ov-rail--utility,
.ov-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ov-space-3, 12px) var(--ov-space-4, 16px);
  min-width: 0;
}

.ov-rail--utility {
  justify-content: flex-end;
  gap: var(--ov-space-2, 8px);
}

.ov-footer {
  justify-content: space-between;
  margin-top: var(--ov-space-8, 32px);
  padding-top: var(--ov-space-4, 16px);
  border-top: 1px solid var(--ov-line, #e2e8f0);
  color: var(--ov-text-muted, #64748b);
  font-size: var(--ov-type-caption, 12px);
  font-weight: 400;
  line-height: 1.4;
}

/* Inverse / brand surface — opt-in. Not an operational workspace default.
   Ship/world imagery is Login-only and must not be added here. */
.ov-surface--inverse,
.ov-surface--brand {
  background: var(--ov-surface-inverse, #0b1628);
  color: var(--ov-inverse, #ffffff);
}

.ov-surface--inverse .ov-type-body-lg,
.ov-surface--inverse .ov-type-body-md,
.ov-surface--brand .ov-type-body-lg,
.ov-surface--brand .ov-type-body-md {
  color: var(--ov-inverse-muted);
}

.ov-surface--inverse .ov-type-caption,
.ov-surface--inverse .ov-type-label,
.ov-surface--brand .ov-type-caption,
.ov-surface--brand .ov-type-label {
  color: var(--ov-inverse-subtle);
}

/* Credential rail — logo-led, short labels, optical mark normalization.
   Reserved slots keep layout when official artwork is swapped in.
   Never invent official ISO/certification seals. */
.ov-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ov-space-5, 20px) var(--ov-space-6, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ov-trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ov-space-2, 8px);
  min-width: 0;
}

.ov-trust__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 96px;
  height: 48px;
  padding: var(--ov-space-2, 8px);
  background: var(--ov-paper, #ffffff);
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-badge, 6px);
}

.ov-trust__asset {
  display: block;
  width: auto;
  max-width: 80px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.ov-trust__mark--slot {
  background: var(--ov-wash, #f4f6f8);
}

.ov-trust__label {
  font-size: var(--ov-type-caption, 12px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ov-text-secondary, #475569);
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------- */
/* Actions + links                                                            */
/* -------------------------------------------------------------------------- */

.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-2, 8px);
  min-height: var(--ov-control-height, 36px);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--ov-radius-control, 4px);
  font-family: var(--ov-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  background: var(--ov-brand-primary, #1b3a6b);
  color: var(--ov-inverse, #ffffff);
  box-shadow: none;
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--ov-duration-micro, 140ms);
  transition-timing-function: var(--ov-ease, ease);
}

.ov-btn:hover {
  background: var(--ov-brand-primary-hover, #163056);
  color: var(--ov-inverse, #ffffff);
  text-decoration: none;
}

.ov-btn:focus-visible,
.ov-icon-btn:focus-visible,
.ov-link:focus-visible,
.ov-nav-link:focus-visible,
.ov-input:focus-visible,
.ov-select:focus-visible,
.ov-textarea:focus-visible,
.ov-check__input:focus-visible,
.ov-radio__input:focus-visible,
.ov-file__input:focus-visible {
  outline: none;
  box-shadow: var(--ov-focus-ring);
}

.ov-btn:disabled,
.ov-btn[aria-disabled="true"],
.ov-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ov-btn--primary {
  background: var(--ov-brand-primary, #1b3a6b);
  border-color: var(--ov-brand-primary, #1b3a6b);
  color: var(--ov-inverse, #ffffff);
}

.ov-btn--secondary {
  background: var(--ov-paper, #ffffff);
  border-color: var(--ov-line, #e2e8f0);
  color: var(--ov-ink, #1e293b);
}

.ov-btn--secondary:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-ink, #1e293b);
  border-color: var(--ov-text-muted, #64748b);
}

.ov-btn--ghost,
.ov-btn--tertiary {
  background: transparent;
  border-color: transparent;
  color: var(--ov-ink, #1e293b);
}

.ov-btn--ghost:hover,
.ov-btn--tertiary:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-ink, #1e293b);
}

.ov-btn--danger {
  background: var(--ov-paper, #ffffff);
  border-color: var(--ov-danger, #b42318);
  color: var(--ov-danger, #b42318);
}

.ov-btn--danger:hover {
  background: var(--ov-danger, #b42318);
  color: var(--ov-inverse, #ffffff);
}

.ov-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--ov-brand-primary, #1b3a6b);
  font-weight: 500;
  padding-inline: var(--ov-space-2, 8px);
  box-shadow: none;
}

.ov-btn--text:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-brand-primary-hover, #163056);
}

.ov-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ov-icon-btn-size, 36px);
  height: var(--ov-icon-btn-size, 36px);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ov-radius-control, 4px);
  background: transparent;
  color: var(--ov-text-secondary, #475569);
  cursor: pointer;
  font-family: var(--ov-font);
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--ov-duration-micro, 140ms);
  transition-timing-function: var(--ov-ease, ease);
}

.ov-icon-btn:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-ink, #1e293b);
}

.ov-icon-btn [hidden] {
  display: none !important;
}

.ov-workspace--crew .ov-btn,
.ov-page--crew .ov-btn,
.ov-workspace--crew .ov-icon-btn,
.ov-page--crew .ov-icon-btn {
  min-height: 44px;
}

.ov-workspace--crew .ov-icon-btn,
.ov-page--crew .ov-icon-btn {
  width: 44px;
  height: 44px;
}

.ov-link {
  color: var(--ov-brand-accent, #0e6b66);
  font-family: var(--ov-font);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ov-link:hover {
  color: var(--ov-brand-primary, #1b3a6b);
  text-decoration: underline;
}

.ov-link--inline {
  font-weight: 500;
}

.ov-link--operational,
.ov-link--row {
  color: var(--ov-brand-primary, #1b3a6b);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ov-link--operational:hover,
.ov-link--row:hover {
  color: var(--ov-brand-primary-hover, #163056);
  text-decoration: underline;
}

.ov-link--external::after {
  content: " ↗";
  font-weight: 400;
  speak: never;
}

.ov-link--text {
  color: var(--ov-text-secondary, #475569);
  font-weight: 500;
  text-decoration: none;
}

.ov-link--text:hover {
  color: var(--ov-ink, #1e293b);
  text-decoration: underline;
}

.ov-link--account {
  display: block;
  padding: 8px 12px;
  color: var(--ov-ink, #1e293b);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.ov-link--account:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-ink, #1e293b);
  text-decoration: none;
}

.ov-link--danger {
  color: var(--ov-danger, #b42318);
  font-weight: 600;
  text-decoration: none;
}

.ov-link--danger:hover {
  color: var(--ov-danger, #b42318);
  text-decoration: underline;
}

.ov-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--ov-ink, #1e293b);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  border-radius: var(--ov-radius-control, 4px);
  overflow-wrap: anywhere;
}

.ov-nav-link:hover {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-ink, #1e293b);
  text-decoration: none;
}

.ov-nav-link.is-active,
.ov-nav-link[aria-current="page"] {
  background: var(--ov-primary-wash, #e8eef4);
  color: var(--ov-brand-primary, #1b3a6b);
  box-shadow: inset 3px 0 0 var(--ov-brand-primary, #1b3a6b);
}

.ov-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ov-text-muted, #64748b);
}

.ov-breadcrumb a,
.ov-breadcrumb .ov-link {
  color: var(--ov-text-muted, #64748b);
  font-weight: 500;
  text-decoration: none;
}

.ov-breadcrumb a:hover,
.ov-breadcrumb .ov-link:hover {
  color: var(--ov-ink, #1e293b);
  text-decoration: underline;
}

.ov-breadcrumb__current {
  color: var(--ov-ink, #1e293b);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.ov-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ov-label {
  font-family: var(--ov-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ov-ink, #1e293b);
}

.ov-helper {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ov-text-muted, #64748b);
}

.ov-error {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ov-danger, #b42318);
}

.ov-input,
.ov-select,
.ov-textarea,
.ov-file__input {
  display: block;
  width: 100%;
  min-height: var(--ov-control-height, 36px);
  padding: 6px 12px;
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-control, 4px);
  background: var(--ov-paper, #ffffff);
  color: var(--ov-ink, #1e293b);
  font-family: var(--ov-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
}

.ov-input::placeholder,
.ov-textarea::placeholder {
  color: var(--ov-text-muted, #64748b);
}

.ov-textarea {
  min-height: 96px;
  resize: vertical;
}

.ov-input[aria-invalid="true"],
.ov-select[aria-invalid="true"],
.ov-textarea[aria-invalid="true"],
.ov-field.is-invalid .ov-input,
.ov-field.is-invalid .ov-select,
.ov-field.is-invalid .ov-textarea {
  border-color: var(--ov-danger, #b42318);
}

.ov-input:disabled,
.ov-select:disabled,
.ov-textarea:disabled {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-text-muted, #64748b);
  cursor: not-allowed;
}

.ov-check,
.ov-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: var(--ov-text, #334155);
  cursor: pointer;
}

.ov-check__input,
.ov-radio__input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--ov-brand-primary, #1b3a6b);
  cursor: pointer;
}

.ov-check__input {
  border-radius: var(--ov-radius-control, 4px);
}

.ov-workspace--crew .ov-check,
.ov-page--crew .ov-check,
.ov-workspace--crew .ov-radio,
.ov-page--crew .ov-radio {
  min-height: 44px;
  align-items: center;
}

.ov-workspace--crew .ov-input,
.ov-page--crew .ov-input,
.ov-workspace--crew .ov-select,
.ov-page--crew .ov-select,
.ov-workspace--crew .ov-file__input,
.ov-page--crew .ov-file__input {
  min-height: 44px;
}

.ov-file {
  display: block;
  min-width: 0;
}

.ov-secret {
  position: relative;
  min-width: 0;
}

.ov-secret > .ov-input {
  padding-right: 48px;
}

.ov-secret > .ov-icon-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}

/* -------------------------------------------------------------------------- */
/* Status / badge — namespaces only; no domain enum colour mapping            */
/* -------------------------------------------------------------------------- */

.ov-badge,
.ov-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-badge, 6px);
  background: var(--ov-paper, #ffffff);
  color: var(--ov-text-secondary, #475569);
  font-family: var(--ov-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ov-badge--pill,
.ov-status--pill {
  border-radius: 999px;
  padding-inline: var(--ov-space-3, 12px);
}

.ov-status--priority,
.ov-status--sla,
.ov-status--journey,
.ov-status--da,
.ov-status--mh,
.ov-status--tm,
.ov-status--entitlement {
  /* Presentation namespaces for later mapping. Do not bind business enums here. */
}

.ov-status--quiet {
  background: var(--ov-wash, #f4f6f8);
  color: var(--ov-text-muted, #64748b);
}

.ov-status--emphasis {
  border-color: var(--ov-brand-primary, #1b3a6b);
  color: var(--ov-brand-primary, #1b3a6b);
}

.ov-status--accent {
  border-color: var(--ov-brand-accent, #0e6b66);
  color: var(--ov-brand-accent, #0e6b66);
}

/* -------------------------------------------------------------------------- */
/* Data: table, filters, pagination, empty                                    */
/* -------------------------------------------------------------------------- */

.ov-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ov-space-3, 12px);
  margin-bottom: var(--ov-space-4, 16px);
  margin-inline: 0;
}

.ov-filters .ov-field {
  flex: 1 1 12rem;
}

.ov-table-wrap {
  width: 100%;
  min-width: 0;
  margin-inline: 0;
  overflow: visible;
}

.ov-table-wrap--scroll {
  overflow-x: auto;
}

.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ov-font);
  font-size: var(--ov-font-table, 14px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ov-text, #334155);
  background: var(--ov-paper, #ffffff);
}

.ov-table th,
.ov-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ov-line, #e2e8f0);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ov-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ov-text-secondary, #475569);
  background: var(--ov-wash, #f4f6f8);
}

.ov-table--compact th,
.ov-table--compact td {
  padding: 6px 8px;
  font-size: 13px;
}

.ov-table--comfortable th,
.ov-table--comfortable td {
  padding: 14px 12px;
}

.ov-table--compact {
  font-size: 13px;
}

.ov-workspace--admin .ov-table--compact th,
.ov-workspace--admin .ov-table--compact td {
  font-size: 13px;
}

.ov-table__col--optional,
.ov-hide-lg {
  /* visible on wide operational screens */
}

@media (max-width: 1024px) {
  .ov-table__col--optional,
  .ov-hide-lg {
    display: none;
  }
}

@media (max-width: 768px) {
  .ov-table__col--tablet-hide,
  .ov-hide-md {
    display: none;
  }

  .ov-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .ov-filters .ov-field {
    flex: 1 1 auto;
  }
}

.ov-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ov-text-secondary, #475569);
}

.ov-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ov-text-secondary, #475569);
  font-size: 15px;
}

.ov-empty p {
  margin: 0 0 16px;
  max-width: 28rem;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------- */
/* Feedback + overlays                                                        */
/* -------------------------------------------------------------------------- */

.ov-alert {
  padding: 12px 16px;
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-panel, 6px);
  background: var(--ov-paper, #ffffff);
  color: var(--ov-text, #334155);
  font-size: 15px;
}

.ov-alert--success {
  background: var(--ov-success-wash, #e8f4ee);
  border-color: var(--ov-success, #1f7a4d);
  color: var(--ov-success, #1f7a4d);
}

.ov-alert--warning {
  background: var(--ov-warning-wash, #f8eee4);
  border-color: var(--ov-warning, #b45309);
  color: var(--ov-warning, #b45309);
}

.ov-alert--danger {
  background: var(--ov-danger-wash, #f8e8e6);
  border-color: var(--ov-danger, #b42318);
  color: var(--ov-danger, #b42318);
}

.ov-alert--info {
  background: var(--ov-info-wash, #e8eef6);
  border-color: var(--ov-info, #2f5a9a);
  color: var(--ov-info, #2f5a9a);
}

.ov-busy[aria-busy="true"],
.ov-busy.is-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.ov-modal,
.ov-drawer,
.ov-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ov-z-modal, 1090);
  display: none;
}

.ov-modal.is-open,
.ov-drawer.is-open,
.ov-sheet.is-open {
  display: block;
}

.ov-modal__backdrop,
.ov-drawer__backdrop,
.ov-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 41, 59, 0.4);
}

.ov-modal__dialog {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 10vh auto 0;
  background: var(--ov-paper, #ffffff);
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-overlay, 8px);
  box-shadow: var(--ov-shadow-2);
  padding: 24px;
}

.ov-modal__dialog--max,
.ov-sheet__panel--max {
  border-radius: var(--ov-radius-overlay-max, 16px);
}

.ov-modal--confirm .ov-modal__dialog {
  max-width: 400px;
  box-shadow: var(--ov-elev-modal);
}

.ov-toast {
  z-index: var(--ov-z-toast, 1100);
  min-width: 0;
  max-width: 24rem;
  padding: var(--ov-space-3, 12px) var(--ov-space-4, 16px);
  background: var(--ov-paper, #ffffff);
  border: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-panel-sm, 10px);
  box-shadow: var(--ov-elev-raised);
  color: var(--ov-text, #334155);
  font-family: var(--ov-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.ov-toast--success {
  border-color: var(--ov-success, #1f7a4d);
  background: var(--ov-success-wash, #e8f4ee);
}

.ov-toast--danger {
  border-color: var(--ov-danger, #b42318);
  background: var(--ov-danger-wash, #f8e8e6);
}

.ov-toast--warning {
  border-color: var(--ov-warning, #b45309);
  background: var(--ov-warning-wash, #f8eee4);
}

.ov-toast--info {
  border-color: var(--ov-info, #2f5a9a);
  background: var(--ov-info-wash, #e8eef6);
}

.ov-input,
.ov-select,
.ov-textarea {
  transition-property: border-color, box-shadow, background-color;
  transition-duration: var(--ov-duration-micro, 140ms);
  transition-timing-function: var(--ov-ease, ease);
}

.ov-touch .ov-btn,
.ov-touch .ov-icon-btn,
.ov-touch .ov-input,
.ov-touch .ov-select,
.ov-touch .ov-file__input,
.ov-touch .ov-check,
.ov-touch .ov-radio {
  min-height: var(--ov-touch-min, 44px);
}

.ov-touch .ov-icon-btn {
  width: var(--ov-touch-min, 44px);
  height: var(--ov-touch-min, 44px);
}

.ov-drawer {
  z-index: var(--ov-z-drawer, 1080);
}

.ov-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: min(400px, 100%);
  height: 100%;
  background: var(--ov-paper, #ffffff);
  border-left: 1px solid var(--ov-line, #e2e8f0);
  box-shadow: var(--ov-shadow-2);
  padding: 20px;
  overflow: auto;
  border-radius: 0;
}

.ov-sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  max-height: 85vh;
  overflow: auto;
  background: var(--ov-paper, #ffffff);
  border-top: 1px solid var(--ov-line, #e2e8f0);
  border-radius: var(--ov-radius-overlay, 8px) var(--ov-radius-overlay, 8px) 0 0;
  box-shadow: var(--ov-shadow-2);
  padding: 20px 16px;
}

/* Internal scroll chrome hide — visual only.
   Does not change overflow, dimensions, or scroll behavior.
   Opt-in: .ov-scrollbar-clean, or compose onto a confirmed internal region. */
.ov-scrollbar-clean,
.ov-drawer__panel,
.ov-sheet__panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ov-scrollbar-clean::-webkit-scrollbar,
.ov-drawer__panel::-webkit-scrollbar,
.ov-sheet__panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (max-width: 768px) {
  .ov-drawer__panel {
    width: 100%;
  }

  .ov-modal__dialog {
    margin: 8vh 16px 0;
    width: auto;
  }
}

@media (max-width: 430px) {
  .ov-header__title,
  .ov-title {
    font-size: 22px;
  }

  .ov-type-display-lg {
    font-size: 28px;
  }

  .ov-type-heading-xl {
    font-size: 24px;
  }
}

/* -------------------------------------------------------------------------- */
/* Motion — opacity, color, border only. No floating cards / parallax / bounce */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ov-2,
  .ov-page,
  .ov-login,
  .ov-workspace {
    --ov-duration-micro: 0.01ms;
    --ov-duration-refine: 0.01ms;
    --ov-duration-enter: 0.01ms;
  }

  .ov-2 *,
  .ov-2 *::before,
  .ov-2 *::after,
  .ov-page *,
  .ov-page *::before,
  .ov-page *::after,
  .ov-login *,
  .ov-login *::before,
  .ov-login *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive constitution — composition change, not continuous shrinking.    */
/* Mandatory viewports: 1440×900, 1366×768, 1024×768, 768×1024,               */
/* 430×932, 390×844, 360×800. Tablet is first-class. Mobile is not            */
/* compressed desktop. Primary action remains discoverable.                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 1366px) {
  .ov-workspace--admin,
  .ov-workspace--org,
  .ov-workspace--ship-ops {
    --ov-workspace-pad: 16px;
  }
}

@media (max-width: 1024px) {
  .ov-type-display-lg {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .ov-header {
    align-items: stretch;
  }

  .ov-header__actions,
  .ov-actions {
    justify-content: flex-start;
  }

  .ov-type-display-lg {
    font-size: 32px;
  }

  .ov-panel--floating {
    box-shadow: var(--ov-elev-raised);
  }
}

@media (max-width: 390px) {
  .ov-workspace {
    --ov-workspace-pad: 12px;
  }
}

@media (max-width: 360px) {
  .ov-header__actions .ov-btn,
  .ov-actions .ov-btn {
    flex: 1 1 auto;
  }

  .ov-type-display-lg {
    font-size: 28px;
  }
}

/* -------------------------------------------------------------------------- */
/* Login / Secure Access — LOGIN-SPECIFIC production composition.             */
/* 57/43 split, cinematic navy brand panel, vessel/network atmosphere,        */
/* floating access card, and corporate utility slots must not leak into       */
/* Dashboard, Case, Admin, Organization, Ship, or Crew workspaces.            */
/* External slots are corporate links — never OAuth / SSO labels.             */
/* There is no Forgot Password control in the locked Login reference.         */
/* -------------------------------------------------------------------------- */

body.ov-login {
  --ov-login-axis: 56px;
  --ov-login-card-max: 420px;
  --ov-login-split-brand: 57%;
  --ov-login-split-access: 43%;
  --ov-login-brand-surface: #00162f;
  --ov-login-access-surface: #fbfcff;
  --ov-login-accent: #087cff;
  --ov-login-accent-2: #1680f2;
  --ov-login-card-elev: var(--ov-elev-floating);
  --ov-login-card-radius: 13px;
  --ov-control-height: 52px;
  --ov-icon-btn-size: 44px;
  --ov-radius-control: var(--ov-radius-input, 8px);

  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--ov-login-access-surface);
  color: #07142e;
}

.ov-login__shell {
  display: grid;
  min-height: 100dvh;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "access"
    "brand";
}

.ov-login__access {
  grid-area: access;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 47% 42%, #fff 0 26%, #fbfcff 67%, #f6f9fd 100%);
}

.ov-login__contours {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at 118% 22%, transparent 0 34px, rgba(38, 105, 201, 0.07) 35px 36px);
}

.ov-login__brand {
  grid-area: brand;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: var(--ov-login-brand-surface);
  color: var(--ov-inverse, #ffffff);
}

.ov-login__vessel-photo,
.ov-login__shade,
.ov-login__network {
  position: absolute;
  pointer-events: none;
}

.ov-login__vessel-photo {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%;
}

.ov-login__shade {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 17, 42, 0.94) 0%, rgba(0, 20, 48, 0.76) 51%, rgba(0, 20, 46, 0.38) 100%),
    linear-gradient(180deg, rgba(0, 13, 33, 0.38), rgba(0, 14, 35, 0.08) 44%, rgba(0, 13, 31, 0.88) 100%);
}

.ov-login__network {
  z-index: 2;
  top: 44px;
  left: 43%;
  width: min(57%, calc(100% - 43%));
  max-width: 100%;
  max-height: 265px;
}

.ov-login__network picture {
  display: block;
  width: 100%;
}

.ov-login__network-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 265px;
  object-fit: contain;
  opacity: 0.24;
  filter: saturate(1.2) brightness(0.78);
  mix-blend-mode: screen;
}

.ov-login__network-svg {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ov-login__axis {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 32px 20px 28px;
}

.ov-login__identity,
.ov-login__proof,
.ov-login__disclaimer,
.ov-login__headline,
.ov-login__position,
.ov-login__kicker,
.ov-login__descriptor,
.ov-login__proof-kicker {
  margin-inline: 0;
  text-align: left;
}

.ov-login__logo {
  display: block;
  width: 196px;
  height: 40px;
  object-fit: cover;
  object-position: center 12%;
  mix-blend-mode: screen;
}

.ov-login__descriptor {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 249, 253, 0.88);
}

.ov-login__kicker {
  display: inline-flex;
  align-items: center;
  margin: 28px 0 0;
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1386ff;
  border-bottom: 2px solid #1386ff;
}

.ov-login__headline {
  margin: 17px 0 0;
  max-width: 650px;
  font-size: clamp(32px, 3.45vw, 53px);
  font-weight: 610;
  line-height: 1.075;
  letter-spacing: -0.04em;
  color: #f8faff;
}

.ov-login__emphasis {
  color: var(--ov-login-accent-2);
  font-weight: 670;
}

.ov-login__blue-rule {
  display: block;
  width: 52px;
  height: 2px;
  margin: 27px 0 17px;
  background: #1687ff;
}

.ov-login__position {
  margin: 0;
  max-width: min(680px, 100%);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.96);
}

.ov-login__atmosphere {
  flex: 1 1 120px;
  min-height: 72px;
}

.ov-login__proof {
  margin-top: auto;
}

.ov-login__proof-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
}

.ov-login__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 1px solid rgba(170, 200, 230, 0.34);
  border-radius: 10px;
  background: rgba(4, 22, 48, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.ov-login__cred {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  position: relative;
}

.ov-login__cred:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  border-bottom: 1px solid rgba(132, 171, 216, 0.28);
}

.ov-login__cred-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 32px;
  height: 36px;
  color: rgba(255, 255, 255, 0.96);
}

.ov-login__cred-mark--slot {
  color: #fff;
}

.ov-login__cred-mark--iso {
  width: 36px;
  height: 36px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
}

.ov-login__cred-asset {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ov-login__cred-shield {
  display: block;
}

.ov-login__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

.ov-login__lockup-std {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ov-login__lockup-code {
  display: none;
}

.ov-login__cred-label {
  min-width: 0;
  max-width: 9.4em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  overflow-wrap: break-word;
}

.ov-login__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.ov-login__disclaimer svg {
  flex: 0 0 auto;
  color: #7f94ba;
}

.ov-login__utility {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin: 0 0 24px;
  color: #06132d;
  font-size: 14px;
  font-weight: 650;
}

.ov-login__lang,
.ov-login__support {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.ov-login__support {
  cursor: pointer;
}

.ov-login__support:hover {
  color: var(--ov-ink, #1e293b);
}

.ov-login__utility-rule {
  width: 1px;
  height: 16px;
  background: var(--ov-line, #e2e8f0);
}

.ov-login__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(var(--ov-login-card-max), calc(100% - 0px));
  margin: 0 auto;
  flex: 1 1 auto;
}

.ov-login__card {
  width: 100%;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.89);
  border: 1px solid #e0e6f0;
  border-radius: var(--ov-login-card-radius);
  box-shadow: var(--ov-login-card-elev);
  backdrop-filter: blur(12px);
}

.ov-login__card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: auto;
  margin: 0 auto 14px;
  overflow: visible;
  background: transparent;
}

.ov-login__oc-mark {
  display: block;
  width: 66px;
  height: auto;
  max-width: 100%;
  overflow: visible;
  object-fit: contain;
  object-position: center;
  filter:
    saturate(1.40)
    contrast(1.18)
    brightness(1.06)
    drop-shadow(0 0 12px rgba(36, 123, 255, 0.17));
}

.ov-login__heading {
  margin: 0;
  font-size: 31px;
  font-weight: 690;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-align: center;
  color: #07142e;
}

.ov-login__lede {
  margin: 8px 0 25px;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  color: #3f5584;
}

.ov-login__card > .ov-alert {
  margin-bottom: 16px;
}

.ov-login__error-list {
  margin: 8px 0 0;
  padding-left: 1.15rem;
}

.ov-login__error-list li + li {
  margin-top: 4px;
}

.ov-login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ov-login .ov-label {
  font-size: 13px;
  font-weight: 600;
}

.ov-login .ov-input {
  min-height: 50px;
  padding: 12px 14px 12px 47px;
  border-radius: 6px;
  font-size: 13px;
  color: #1a2438;
  background: #ffffff;
  border-color: #d5dbe3;
}

.ov-login .ov-input::placeholder {
  color: #6b7280;
  opacity: 1;
}

.ov-login .ov-input:focus-visible {
  outline: none;
  border-color: #197bf0;
  box-shadow: 0 0 0 3px rgba(25, 123, 240, 0.12);
}

.ov-login__control,
.ov-login__secret {
  position: relative;
  min-width: 0;
}

.ov-login__control-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  display: flex;
  color: var(--ov-text-muted, #64748b);
  transform: translateY(-50%);
  pointer-events: none;
}

.ov-login__secret .ov-input {
  padding-right: 48px;
}

.ov-login__secret .ov-icon-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}

.ov-login__secret .ov-icon-btn svg[data-ov-icon="hide"] {
  display: none !important;
}

.ov-login__secret .ov-icon-btn[aria-pressed="true"] svg[data-ov-icon="show"] {
  display: none !important;
}

.ov-login__secret .ov-icon-btn[aria-pressed="true"] svg[data-ov-icon="hide"] {
  display: block !important;
}

.ov-login .ov-check {
  min-height: 44px;
  align-items: center;
}

.ov-login .ov-btn.ov-login__submit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding-inline: 17px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #001633, #001b3f);
  border-color: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.ov-login .ov-btn.ov-login__submit span {
  grid-column: 2;
}

.ov-login .ov-btn.ov-login__submit svg {
  grid-column: 3;
  justify-self: end;
}

.ov-login .ov-btn.ov-login__submit:hover {
  filter: brightness(1.15);
  background: linear-gradient(90deg, #001633, #001b3f);
  border-color: transparent;
}

.ov-login .ov-btn.ov-login__submit:disabled {
  opacity: 0.72;
  cursor: wait;
  pointer-events: none;
}

.ov-login__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 16px;
  color: #8a97ad;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ov-login__divider::before,
.ov-login__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ov-line, #e2e8f0);
}

.ov-login__corporate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ov-login__ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d7dde6;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  color: #1f2937;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.ov-login__ext:hover {
  border-color: #c5ceda;
  background: #ffffff;
  color: #1f2937;
}

.ov-login__ext:focus-visible {
  outline: 2px solid #197bf0;
  outline-offset: 2px;
}

.ov-login__ext-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.ov-login__access-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: #7a8796;
}

.ov-login__access-assurance svg {
  flex: 0 0 auto;
  opacity: 0.72;
}

.ov-login__privacy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 16px 20px;
  border: 1px solid #e4ebf3;
  border-radius: 10px;
  background: #f7f9fc;
}

.ov-login__privacy-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 40px;
  color: #1570ef;
}

.ov-login__privacy-mark svg {
  width: 28px;
  height: 32px;
}

.ov-login__privacy-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.ov-login__privacy-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ov-login__privacy-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5b6b80;
}

.ov-login__privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1570ef;
  text-decoration: none;
  white-space: nowrap;
}

.ov-login__privacy-link:hover {
  text-decoration: underline;
}

.ov-login__footer {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.4;
  color: #48608e;
  text-align: center;
}

.ov-login__brand,
.ov-login__card {
  animation: ov-login-enter var(--ov-duration-enter, 360ms) var(--ov-ease, ease) both;
}

.ov-login__card {
  animation-duration: var(--ov-duration-refine, 240ms);
  animation-name: ov-login-enter-card;
}

@keyframes ov-login-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ov-login-enter-card {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ov-login .ov-btn,
.ov-login .ov-icon-btn,
.ov-login .ov-input,
.ov-login .ov-login__ext,
.ov-login .ov-login__support {
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--ov-duration-micro, 140ms);
  transition-timing-function: var(--ov-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  .ov-login__brand,
  .ov-login__card {
    animation: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Login responsive — tablet/mobile recomposition only.                       */
/* Desktop 1280+ split remains the locked visual authority below.             */
/* 1024–1279: compact landscape split. 768–1023 portrait: brand header.       */
/* <=767: access-first band. Never stack the full desktop brand panel.        */
/* -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .ov-login__access {
    min-height: 0;
  }

  .ov-login__kicker,
  .ov-login__headline,
  .ov-login__blue-rule,
  .ov-login__position,
  .ov-login__atmosphere,
  .ov-login__proof-kicker,
  .ov-login__rail,
  .ov-login__network {
    display: none;
  }
}

/* 360 / 390 / 430 — one access-first viewport, not stacked desktop panels */
@media (max-width: 767px) {
  .ov-login__shell {
    grid-template-areas:
      "brand"
      "access";
    grid-template-rows: auto minmax(min-content, 1fr);
    min-height: 100dvh;
    max-width: 100%;
    overflow-x: clip;
  }

  .ov-login__brand {
    display: grid;
    grid-template-rows: minmax(80px, 104px) auto;
    min-height: 0;
    height: auto;
  }

  .ov-login__vessel-photo {
    object-position: center 42%;
  }

  .ov-login__shade {
    background:
      linear-gradient(180deg, rgba(0, 17, 42, 0.72) 0%, rgba(0, 16, 38, 0.88) 100%),
      linear-gradient(90deg, rgba(0, 17, 42, 0.55), rgba(0, 20, 48, 0.28));
  }

  .ov-login__axis {
    display: contents;
    min-height: 0;
    padding: 0;
  }

  .ov-login__identity {
    grid-row: 1;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 16px 20px;
  }

  .ov-login__logo {
    width: 168px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
  }

  .ov-login__descriptor {
    margin: 6px 0 0;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .ov-login__proof {
    grid-row: 2;
    z-index: 3;
    margin: 0;
    padding: 8px 20px 10px;
    background: rgba(0, 14, 33, 0.72);
  }

  .ov-login__disclaimer {
    margin: 0;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
  }

  .ov-login__disclaimer br {
    display: none;
  }

  .ov-login__access {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .ov-login__utility {
    margin-bottom: 12px;
  }

  .ov-login__card {
    padding: 22px 20px 18px;
  }

  .ov-login__lede {
    margin: 6px 0 18px;
  }

  .ov-login__privacy {
    grid-template-columns: auto 1fr;
    min-height: 0;
    padding: 12px 14px;
    gap: 12px;
  }

  .ov-login__privacy-link {
    grid-column: 2;
    width: auto;
    justify-content: flex-start;
  }

  .ov-login__footer {
    margin-top: 16px;
  }
}

@media (max-width: 540px) {
  .ov-login__corporate {
    grid-template-columns: minmax(0, 1fr);
  }

  .ov-login__access-assurance {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* Short mobile/tablet heights — keep controls, drop decoration */
@media (max-width: 1023px) and (max-height: 700px) {
  .ov-login__vessel-photo {
    display: none;
  }

  .ov-login__descriptor {
    display: none;
  }

  .ov-login__utility {
    margin-bottom: 8px;
  }

  .ov-login__card {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .ov-login__lede {
    margin-bottom: 12px;
  }

  .ov-login__form {
    gap: 12px;
  }

  .ov-login__privacy {
    padding: 10px 12px;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  .ov-login__brand {
    grid-template-rows: minmax(64px, 80px) auto;
  }

  .ov-login__identity {
    padding: 12px 16px;
  }
}

/* 768–1023 portrait tablet — compact brand header + login, not stacked desktop */
@media (min-width: 768px) and (max-width: 1023px) {
  .ov-login__shell {
    grid-template-areas:
      "brand"
      "access";
    grid-template-rows: auto minmax(min-content, 1fr);
    min-height: 100dvh;
    max-width: 100%;
    overflow-x: clip;
  }

  .ov-login__brand {
    display: grid;
    grid-template-rows: minmax(100px, 120px) auto;
    min-height: 0;
    height: auto;
  }

  .ov-login__vessel-photo {
    object-position: center 40%;
  }

  .ov-login__shade {
    background:
      linear-gradient(180deg, rgba(0, 17, 42, 0.68) 0%, rgba(0, 16, 38, 0.86) 100%),
      linear-gradient(90deg, rgba(0, 17, 42, 0.5), rgba(0, 20, 48, 0.24));
  }

  .ov-login__axis {
    display: contents;
    min-height: 0;
    padding: 0;
  }

  .ov-login__identity {
    grid-row: 1;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px 36px;
  }

  .ov-login__logo {
    width: 176px;
    height: 36px;
  }

  .ov-login__descriptor {
    margin: 8px 0 0;
  }

  .ov-login__proof {
    grid-row: 2;
    z-index: 3;
    margin: 0;
    padding: 10px 36px 12px;
    background: rgba(0, 14, 33, 0.7);
  }

  .ov-login__disclaimer {
    margin: 0;
    max-width: 42rem;
  }

  .ov-login__access {
    padding: 28px 40px 24px;
  }

  .ov-login__utility {
    margin-bottom: 16px;
  }

  .ov-login__stage {
    width: min(var(--ov-login-card-max), 100%);
  }

  .ov-login__footer {
    text-align: center;
    max-width: var(--ov-login-card-max);
    margin-inline: auto;
    width: 100%;
  }
}

/* Landscape tablet 768–1023 — restrained compact split when height allows */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 540px) {
  .ov-login__shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "brand access";
  }

  .ov-login__brand {
    display: block;
    height: 100%;
    min-height: 0;
  }

  .ov-login__axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    height: 100%;
    padding: 28px 24px 20px;
  }

  .ov-login__identity {
    display: block;
    padding: 0;
  }

  .ov-login__proof {
    padding: 0;
    background: transparent;
  }

  .ov-login__access {
    height: 100%;
    min-height: 0;
    padding: 20px 28px 16px;
  }

  .ov-login__utility {
    margin-bottom: 8px;
  }
}

/* 1024–1279 — compact split, not the locked 1280 desktop density */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ov-login__shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "brand access";
  }

  .ov-login__brand {
    display: block;
    height: 100dvh;
    min-height: 0;
  }

  .ov-login__vessel-photo {
    object-position: center 58%;
  }

  .ov-login__axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    height: 100%;
    padding: 32px 32px 24px;
  }

  .ov-login__identity {
    display: block;
    padding: 0;
  }

  .ov-login__descriptor {
    display: block;
    margin-top: 12px;
  }

  .ov-login__proof {
    padding: 0;
    background: transparent;
  }

  .ov-login__disclaimer {
    margin: 0;
    max-width: 28rem;
  }

  .ov-login__access {
    height: 100dvh;
    min-height: 0;
    padding: 24px 32px 18px;
  }

  .ov-login__utility {
    margin-bottom: 10px;
  }

  .ov-login__stage {
    width: min(var(--ov-login-card-max), 100%);
    justify-content: center;
  }

  .ov-login__footer {
    text-align: center;
    max-width: var(--ov-login-card-max);
    margin-inline: auto;
    width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 800px) {
  .ov-login__access {
    padding: 16px 28px 12px;
  }

  .ov-login__utility {
    margin-bottom: 4px;
  }

  .ov-login__card {
    padding: 16px 20px 14px;
  }

  .ov-login__lede {
    margin: 4px 0 10px;
  }

  .ov-login__form {
    gap: 10px;
  }

  .ov-login__privacy {
    min-height: 0;
    padding: 8px 10px;
  }

  .ov-login__footer {
    margin-top: 10px;
  }
}

/* Desktop 1280+ — locked 57/43 cinematic composition */
@media (min-width: 1280px) {
  body.ov-login {
    --ov-login-axis: 68px;
  }

  .ov-login__shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 57fr) minmax(520px, 43fr);
    grid-template-areas: "brand access";
  }

  .ov-login__brand {
    height: 100dvh;
    min-height: 100dvh;
  }

  .ov-login__axis {
    min-height: 100dvh;
    padding: 52px var(--ov-login-axis) 36px;
  }

  .ov-login__logo {
    width: 182px;
    height: 37px;
  }

  .ov-login__descriptor {
    margin-top: 14px;
    font-size: 11px;
  }

  .ov-login__kicker {
    margin-top: 36px;
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 18px;
  }

  .ov-login__headline {
    margin-top: 14px;
    font-size: clamp(34px, 2.7vw, 42px);
    max-width: 520px;
    line-height: 1.12;
    letter-spacing: -0.032em;
  }

  .ov-login__blue-rule {
    width: 42px;
    margin: 22px 0 14px;
  }

  .ov-login__position {
    max-width: min(540px, 86%);
    font-size: 15px;
    line-height: 1.7;
  }

  .ov-login__atmosphere {
    min-height: 120px;
  }

  .ov-login__proof-kicker {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .ov-login__rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
    min-height: 84px;
    padding: 0;
  }

  .ov-login__cred {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  .ov-login__cred-label {
    font-size: 12px;
    line-height: 1.4;
  }

  .ov-login__disclaimer {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
  }

  .ov-login__cred:not(:last-child)::after {
    top: 21px;
    right: 0;
    bottom: 21px;
    left: auto;
    border: 0;
    border-right: 1px solid rgba(132, 171, 216, 0.28);
  }

  .ov-login__access {
    height: 100dvh;
    min-height: 100dvh;
    padding: 28px 36px 20px;
  }

  .ov-login__utility {
    position: static;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: 0 0 8px;
  }

  .ov-login__lang,
  .ov-login__support {
    min-height: 28px;
  }

  .ov-login__stage {
    flex: 1 1 auto;
    min-height: 0;
    width: min(var(--ov-login-card-max), 100%);
    margin: 0 auto;
    justify-content: center;
    gap: 12px;
    padding: 0;
  }

  .ov-login__card {
    padding: 20px 24px 18px;
  }

  .ov-login__card-mark {
    width: 68px;
    height: auto;
    margin-bottom: 10px;
  }

  .ov-login__heading {
    font-size: 24px;
  }

  .ov-login__lede {
    margin: 4px 0 14px;
  }

  .ov-login__form {
    gap: 12px;
  }

  .ov-login .ov-input {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .ov-login .ov-check {
    min-height: 28px;
  }

  .ov-login__submit {
    min-height: 44px;
    margin-top: 0;
  }

  .ov-login__divider {
    margin: 12px 0 10px;
  }

  .ov-login__ext {
    min-height: 44px;
  }

  .ov-login__access-assurance {
    margin-top: 18px;
  }

  .ov-login__privacy {
    padding: 10px 12px;
  }

  .ov-login__privacy-copy p {
    font-size: 11px;
    line-height: 1.4;
  }

  .ov-login__footer {
    position: static;
    flex: 0 0 auto;
    margin: 14px 0 0;
    text-align: center;
  }
}

@media (min-width: 1280px) and (max-height: 800px) {
  .ov-login__axis {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .ov-login__headline {
    font-size: 34px;
  }

  .ov-login__atmosphere {
    min-height: 48px;
  }

  .ov-login__vessel-photo {
    object-position: center 60%;
  }

  .ov-login__kicker {
    margin-top: 22px;
  }

  .ov-login__access {
    padding: 16px 32px 12px;
  }

  .ov-login__utility {
    margin-bottom: 4px;
  }

  .ov-login__card {
    padding: 16px 22px 14px;
  }

  .ov-login__lede {
    margin-bottom: 10px;
  }

  .ov-login__form {
    gap: 10px;
  }

  .ov-login__divider {
    margin: 10px 0 8px;
  }

  .ov-login__card-mark {
    width: 62px;
    height: auto;
    margin-bottom: 8px;
  }

  .ov-login__privacy {
    padding: 8px 10px;
  }

  .ov-login__access-assurance {
    margin-top: 8px;
  }

  .ov-login__footer {
    margin-top: 10px;
  }
}

@media (min-width: 1440px) {
  body.ov-login {
    --ov-login-axis: 76px;
    --ov-login-card-max: 443px;
  }
}

@media (min-width: 1500px) and (min-height: 1040px) {
  .ov-login__axis {
    padding-top: 56px;
  }

  .ov-login__identity {
    margin-top: 4px;
  }

  .ov-login__card-mark {
    width: 68px;
    height: auto;
    margin-bottom: 12px;
  }

  .ov-login__heading {
    font-size: 28px;
  }
}