/* First rollout: Vessel summary and Work Orders. Forms, dialogs and other views
   retain their existing layout contracts. Keep this scope until each is reviewed. */
body:is([data-active-view="vessel"], [data-active-view="work-orders"]):not(.auth-locked) {
  --canvas-ink: #193343;
  --canvas-muted: #526777;
  --canvas-line: #e2eaee;
  --canvas-accent: #007c8e;
  --canvas-space: clamp(20px, 2vw, 36px);
  --canvas-bottom-space: var(--canvas-space);

  & .workspace-global-header {
    background: #fff;
    box-shadow: none;
  }
  & :is(.workspace-global-heading, .workspace-global-title) h1 {
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
  & :is(.workspace-global-heading, .workspace-global-title) p { color: var(--canvas-muted); line-height: 1.5; }
}

body[data-active-view="vessel"][data-vessel-tool="menu"]:not(.auth-locked) .vessel-profile-dashboard {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  gap: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--canvas-ink);

  & .vessel-dashboard-top-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(390px, 1fr);
    gap: var(--canvas-space);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    align-items: start;
  }
  & .vessel-dashboard-photo-card {
    height: 100%;
    min-height: 320px;
    border-radius: 12px;
  }
  & .vessel-dashboard-status-card {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto;
    padding: 8px 0 0;
    gap: 16px;
  }
  & .vessel-status-card-head h3 { font-size: 24px; line-height: 1.25; }
  & .vessel-status-card-head p { font-size: 15px; line-height: 1.5; }
  & .vessel-health-factor-list { margin: 0; }
  & .vessel-health-factor-row {
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    background: #fbf5eb;
    box-shadow: none;
    padding: 10px 12px;
  }
  & .vessel-health-factor-row :is(strong, small) { font-size: 14px; }
  & .vessel-status-system-grid { gap: 0 20px; padding: 0; margin: 0; }
  & .vessel-status-system {
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--canvas-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  & .vessel-status-system-icon {
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  & :is(.vessel-status-system-icon, .vessel-activity-icon) svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
  }
  & .vessel-status-system-icon svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  & .vessel-status-system-name { font-size: 15px; line-height: 28px; overflow-wrap: anywhere; }
  & .vessel-status-system-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.5;
  }
  & .vessel-status-system-reason { font-size: 14px; overflow-wrap: anywhere; }
  & .vessel-status-system:is(.is-attention, .is-critical, .is-muted) {
    background: transparent;
    border-bottom-color: var(--canvas-line);
    & :is(.vessel-status-system-icon, .vessel-status-system-pill) { background: transparent; border: 0; }
  }
  & .vessel-dashboard-tab-strip {
    min-height: 52px;
    gap: 8px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--canvas-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    overflow: visible;
  }
  & .vessel-dashboard-tab-strip button[data-vessel-tool-open] {
    min-height: 52px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--canvas-muted);
    font-size: 15px;
    font-weight: 600;
  }
  & .vessel-dashboard-tab-strip button[aria-current="page"] {
    color: var(--canvas-accent);
    border-bottom-color: var(--canvas-accent);
  }
  & .vessel-dashboard-tab-strip button[data-vessel-action="add"] {
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--canvas-accent);
    white-space: normal;
  }
  & .vessel-dashboard-card-grid {
    gap: var(--canvas-space);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    align-items: start;
  }
  & .vessel-dashboard-info-card { padding: 0; height: auto; }
  & .vessel-dashboard-info-card h3 { margin: 0 0 16px; font-size: 18px; line-height: 1.4; }
  & .vessel-dashboard-kv-list div { min-height: 36px; gap: 16px; border: 0; }
  & .vessel-dashboard-kv-list strong { overflow-wrap: anywhere; }
  & .vessel-inline-link {
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    justify-content: start;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--canvas-accent);
    font-size: 15px;
    white-space: normal;
    text-align: left;
  }
  & .vessel-summary-empty { padding: 0; gap: 8px; }
  & .vessel-summary-empty p { margin: 0; }
  & .vessel-activity-row {
    min-height: 64px;
    padding: 8px 0;
    gap: 12px;
    border-radius: 0;
    box-shadow: none;
  }
  & .vessel-activity-icon { width: 32px; height: 32px; border: 0; background: transparent; }
  & .vessel-activity-copy strong { white-space: normal; overflow-wrap: anywhere; }
  & button:focus-visible { outline: 2px solid var(--canvas-accent); outline-offset: 3px; }
  & :is(.vessel-inline-link, .vessel-activity-row, .vessel-dashboard-tab-strip button):hover { background-color: #f1f7f8; }
}

/* Fit the desktop summary by adapting whitespace, not text or touch targets. */
@media (min-width: 1221px) and (max-height: 980px) {
  body[data-active-view="vessel"][data-vessel-tool="menu"]:not(.auth-locked) {
    --canvas-space: clamp(16px, 2vh, 24px);
    & .vessel-profile-dashboard .vessel-dashboard-status-card {
      grid-template-rows: auto auto auto;
      gap: 10px;
      padding-top: 0;
    }
    & .vessel-profile-dashboard .vessel-dashboard-info-card h3 { margin-bottom: 10px; }
  }
}

/* The legacy shell marks its card frame and auto-height important. Override only
   that boundary here, keeping one bounded, scrollable content area per view. */
body:is([data-active-view="vessel"][data-vessel-tool="menu"], [data-active-view="work-orders"]):not(.auth-locked) .view-panel.active[data-view-panel] {
  height: 100% !important;
  min-height: 0 !important;
  padding: var(--canvas-space) var(--canvas-space) var(--canvas-bottom-space) !important;
  border: 0;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Lazy page styles must not override the shell's modal background scroll lock. */
body:is([data-active-view="vessel"], [data-active-view="work-orders"]):not(.auth-locked):is(.modal-open, .work-order-detail-open, .health-factor-detail-open, .work-order-queue-open) .view-panel.active[data-view-panel] {
  overflow: hidden !important;
}

/* Desktop weekly list, not its editing forms or the full-history dialog. */
@media (min-width: 761px) {
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section[data-view-panel="work-orders"] .work-order-week-card {
    width: 100%;
    min-width: 0;
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;

    & .work-order-week-header { gap: 20px; align-items: center; }
    & .work-order-week-title-row h3 { font-size: 24px; line-height: 1.3; }
    & :is(.app-screen-note, .small-copy) { font-size: 14px; line-height: 1.5; color: var(--canvas-muted); }
    & .work-order-week-actions button { min-height: 44px; font-size: 15px; border-radius: 8px; box-shadow: none; }
    & .work-order-week-actions .secondary-button {
      border: 1px solid #bccdd5;
      padding: 10px 16px;
      background: #fff;
      color: var(--canvas-ink);
      font: inherit;
      font-weight: 600;
    }
    & :is(.eyebrow, .metric-label) { color: var(--canvas-muted); }
    & .work-order-week-actions .work-order-open-queue-button { border-color: transparent; background: transparent; color: var(--canvas-accent); }
    & #work-order-summary-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 24px 40px;
      padding: 20px 0;
      border: 0;
      border-block: 1px solid var(--canvas-line);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    & .work-order-summary-card {
      flex: 1 1 150px;
      min-height: 64px;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 12px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    & .work-order-summary-card::after { display: none; }
    & .work-order-summary-icon { width: 28px; height: 28px; border: 0; background: transparent; box-shadow: none; }
    & .work-order-summary-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
    & .report-summary-value { font-size: 28px; font-variant-numeric: tabular-nums; }
    & .metric-label { font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
    & .work-order-preview-topline { padding: 0; }
    & :is(.work-order-preview-shell, .work-order-preview-list) {
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    & .work-order-preview-row {
      grid-template-columns: 44px minmax(0, 1fr) auto 20px;
      gap: 16px;
      min-height: 104px;
      padding: 18px 8px;
      border: 0;
      border-bottom: 1px solid var(--canvas-line);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      text-align: left;
    }
    & .work-order-preview-row:hover { background: #f1f7f8; }
    & .work-order-preview-row:focus-visible { outline: 2px solid var(--canvas-accent); outline-offset: -2px; }
    & .work-order-preview-thumb { width: 44px; height: 44px; border: 0; border-radius: 6px; background: #f1f7f8; }
    & .work-order-preview-thumb svg { width: 24px; height: 24px; stroke-width: 1.75; }
    & .work-order-preview-title-line strong { font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
    & .work-order-preview-tags { gap: 4px 14px; }
    & .work-order-preview-tags span {
      max-width: none;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--canvas-muted);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    & .work-order-preview-tags span[data-tone="attention"] { color: #945600; font-weight: 600; }
    & :is(.work-order-preview-assignment, .work-order-preview-date) { font-size: 14px; line-height: 1.5; color: var(--canvas-muted); white-space: normal; overflow-wrap: anywhere; }
    & .work-order-preview-trailing .status-badge { font-size: 13px; letter-spacing: 0; text-transform: none; }
    & .compact-empty-state { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 32px 0; }
  }
}

@media (max-width: 1220px) {
  body[data-active-view="vessel"][data-vessel-tool="menu"]:not(.auth-locked) .vessel-profile-dashboard {
    & .vessel-dashboard-top-grid { grid-template-columns: 1fr; }
    & .vessel-dashboard-photo-card { height: 300px; min-height: 0; }
    & .vessel-dashboard-card-grid { grid-template-columns: 1fr; gap: 28px; }
    & .vessel-dashboard-info-card + .vessel-dashboard-info-card { padding-top: 24px; border-top: 1px solid var(--canvas-line); }
  }
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section[data-view-panel="work-orders"] .work-order-week-card .work-order-week-header {
    grid-template-columns: 1fr;
    & .work-order-week-actions { justify-content: start; }
  }
}

@media (max-width: 760px) {
  body:is([data-active-view="vessel"], [data-active-view="work-orders"]):not(.auth-locked) {
    --canvas-bottom-space: calc(80px + var(--safe-area-bottom, 0px));
  }
  body[data-active-view="vessel"][data-vessel-tool="menu"]:not(.auth-locked) .vessel-profile-dashboard {
    & .vessel-dashboard-tab-strip { gap: 0; }
    & .vessel-dashboard-tab-strip button[data-vessel-tool-open] { padding: 10px; font-size: 14px; }
    & .vessel-dashboard-tab-strip button[data-vessel-action="add"] { margin-left: 0; }
    & .vessel-dashboard-photo-card { height: 260px; }
  }
  body[data-active-view="vessel"]:not(.auth-locked) .mobile-vessel-field-page {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    & .mobile-vessel-tabs { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
    & .mobile-vessel-tabs button { font-size: 14px; }
    & .mobile-vessel-tabs button[aria-current] { background: transparent; }
    & .mobile-vessel-action-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
    & .mobile-vessel-system-copy small { font-size: 14px; line-height: 1.5; }
    & .mobile-vessel-section-head h4 { font-size: 18px; }
    & .mobile-vessel-info-item {
      padding: 12px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    & .mobile-vessel-info-icon { border: 0; background: transparent; }
    & .mobile-vessel-info-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
    & .mobile-vessel-info-item .detail-label { font-size: 13px; letter-spacing: 0; text-transform: none; }
    & .mobile-vessel-info-item strong { font-size: 15px; overflow-wrap: anywhere; }
  }
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-mobile-queue {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    & .work-order-mobile-row-list { border: 0; border-radius: 0; box-shadow: none; }
    & .work-order-mobile-row { border: 0; border-bottom: 1px solid var(--canvas-line); border-radius: 0; box-shadow: none; background: transparent; }
    & .work-order-mobile-row-main strong { font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
    & :is(.work-order-mobile-row-subline, .work-order-mobile-row-helper, .work-order-mobile-date) { font-size: 14px; line-height: 1.5; color: var(--canvas-muted); }
    & .work-order-mobile-thumb svg { width: 24px; height: 24px; stroke-width: 1.75; }
    & .work-order-mobile-thumb.is-empty { border: 0; border-radius: 6px; background: #f1f7f8; box-shadow: none; }
    & .work-order-mobile-row:focus-visible { outline: 2px solid var(--canvas-accent); outline-offset: -2px; }
  }
}

@media (max-width: 400px) {
  body[data-active-view="vessel"][data-vessel-tool="menu"]:not(.auth-locked) .vessel-profile-dashboard {
    & .vessel-status-system-grid { grid-template-columns: 1fr; }
    & .vessel-status-card-head { flex-wrap: wrap; }
  }
}