/* COMPOSE consolidated stylesheet: 8-platform-hardening.css.
   Product-area bundle keeps runtime visual ownership traceable.
   Source sections below are retained as named ownership markers for CSS contracts. */


/* ==== Source section: css/13-boot-health.css ==== */

@layer hardening {
/* ────────────────────────────────────────────────────────────────────────────
   BOOT HEALTH / DEGRADED STARTUP
   ──────────────────────────────────────────────────────────────────────────── */
.boot-health-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)) 20px;
  background: color-mix(in srgb, var(--bg-card) 76%, transparent);
  backdrop-filter: blur(12px);
}

.boot-health-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
}

.boot-health-eyebrow {
  margin: 0 0 8px;
  font-size: var(--ui-type-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-error);
}

.boot-health-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
}

.boot-health-body,
.boot-health-help,
.boot-health-reset-note,
.boot-health-meta {
  margin: 0 0 10px;
  color: var(--text-sec);
  line-height: 1.55;
}

.boot-health-details {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.boot-health-details summary {
  cursor: pointer;
  font-weight: 600;
}


.boot-health-details--diagnostics {
  margin-top: 14px;
}

.boot-health-diagnostics {
  margin: 12px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--ui-type-meta);
  line-height: 1.45;
  color: var(--text-sec);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(240px, 40vh);
  overflow: auto;
}

.boot-health-status {
  min-height: 1.25em;
  margin: 14px 0 0;
  color: var(--text-sec);
  font-size: var(--ui-type-meta);
}

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

.boot-health-list-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill-subtle);
  border: 1px solid var(--border);
}

.boot-health-step {
  font-weight: 600;
  color: var(--text);
}

.boot-health-error {
  font-family: var(--font-mono);
  font-size: var(--ui-type-meta);
  color: var(--text-sec);
  white-space: pre-wrap;
  word-break: break-word;
}

.boot-health-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.boot-health-reset-note {
  font-size: var(--ui-type-body);
}

body[data-boot-state='degraded'] #app {
  pointer-events: none;
  user-select: none;
}
}


/* ==== Source section: css/15-platform-responsive.css ==== */

@layer hardening {
/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Platform / responsive QA hardening
   D7 keeps platform-specific behaviour late in the cascade so Safari/iOS fixes
   do not leak back into the canonical design primitives.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

#app,
#main,
#canvas,
#app-header,
#topbar,
#toolbar-row,
.topbar-centre,
.topbar-right,
.toolbar-inner,
.sp,
.sp-body,
.sp-card,
.sp-state {
  min-width: 0;
}

button,
input,
textarea,
select {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button,
[role="button"],
.btn,
.ui-action-btn,
.sp-action-btn,
.header-action-btn,
.tb-btn,
.topbar-btn {
  -webkit-appearance: none;
  appearance: none;
}

@supports (-webkit-touch-callout: none) {
  .btn,
  .ui-action-btn,
  .sp-action-btn,
  .header-action-btn,
  .tb-btn,
  .topbar-btn,
  .dropdown-item {
    line-height: var(--platform-native-control-line-height);
    min-width: 0;
  }

  .sp-action-btn,
  .ui-action-btn,
  .btn {
    align-self: center;
    flex: 0 0 auto;
  }

  .field-input,
  .field-select,
  .field-textarea,
  .ui-control,
  .sp-select,
  .research-input {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
  }
}

@media (any-hover: none) {
  .btn:hover:not(.is-hovered),
  .ui-action-btn:hover:not(.is-hovered),
  .sp-action-btn:hover:not(.is-hovered),
  .tb-btn:hover:not(.is-hovered) {
    background: var(--control-bg-subtle);
    color: var(--control-fg);
  }

  .btn--primary:hover:not(.is-hovered),
  .ui-action-btn--primary:hover:not(.is-hovered),
  .sp-action-btn--primary:hover:not(.is-hovered) {
    background: var(--control-primary-bg);
    color: var(--control-primary-fg);
  }

  .btn--danger:hover:not(.is-hovered),
  .ui-action-btn--danger:hover:not(.is-hovered),
  .sp-action-btn--danger:hover:not(.is-hovered) {
    background: var(--control-danger-bg);
    color: var(--control-danger-fg);
  }
}

@media (pointer: coarse) {
  .header-action-btn,
  .tb-btn,
  .topbar-btn,
  .sp-close,
  .sp-subnav-btn,
  .sp-action-btn,
  .ui-action-btn,
  .btn {
    min-height: var(--platform-touch-target);
  }
}

@media (max-width: 767px) {
  #app-header {
    flex-basis: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    min-height: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  #topbar,
  #toolbar-row {
    min-width: 0;
  }

  .topbar-centre {
    flex: 1 1 auto;
  }

  .topbar-right {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar-right::-webkit-scrollbar { display: none; }

  .header-action-btn,
  .topbar-btn {
    width: var(--platform-touch-target);
    height: var(--platform-touch-target);
  }

  .header-action-btn svg,
  .topbar-btn svg {
    width: var(--platform-compact-icon-size);
    height: var(--platform-compact-icon-size);
  }

  #sidebar {
    height: var(--platform-mobile-sidebar-h) !important;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - var(--platform-mobile-top-gap)) !important;
    border-radius: var(--platform-mobile-sidebar-radius) var(--platform-mobile-sidebar-radius) 0 0 !important;
  }

  .sp-body,
  .ui-panel-body {
    padding-bottom: var(--platform-mobile-panel-bottom-pad) !important;
  }

  .sp-footer,
  .research-footer-card,
  .workspace-support-footer {
    padding-bottom: max(var(--panel-footer-gap), env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 520px) {
  .topbar-divider { display: none; }

  .topbar-wordcount {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-title-control {
    padding-inline: 8px;
  }

  .header-action-btn,
  .topbar-btn {
    width: var(--platform-compact-header-action-size);
    height: var(--platform-compact-header-action-size);
    min-height: var(--platform-compact-header-action-size);
  }
}

@media (max-width: 380px) {
  .topbar-wordcount { display: none; }
  .topbar-right { gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #overlay,
  .topbar-right,
  .sp-body,
  .ui-panel-body {
    scroll-behavior: auto !important;
  }
}
}