/* Approved mobile visual polish: Inkspira-first glass UI. */
:root {
  --accent: #BC387C;
  --accent-deep: #85304F;
  --ink: #080909;
  --paper: #F1F0EC;
  --text: #FFFFFF;
}

/* The definitive logo is a pre-rendered transparent vector asset. No runtime filters. */
.brand-mark,
.brand-mark .brand-logo {
  filter: none !important;
  transform: none !important;
}

.brand-mark {
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
}

.brand-row .brand-mark {
  width: 136px !important;
  height: 56px !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 0 0 136px;
}

.brand-row .brand-logo,
.auth-card .brand-logo,
.boot-screen .brand-logo {
  object-fit: contain !important;
  object-position: left center !important;
}

.auth-card .brand-mark {
  width: min(260px, 76vw) !important;
  height: 92px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make glass content breathe; copy should never sit on the frame edge. */
.panel,
.metric,
.automation-panel,
.capture-ai-review-item,
.capture-ai-document,
.scheduler-row,
.automation-attention,
.automation-approval-row,
.command-card,
.readiness-card,
.production-card,
.cost-simulator-card,
.recovery-card,
.decision-lab-verdict,
.decision-lab-metric,
.human-preflight-sheet {
  padding-left: clamp(20px, 3vw, 30px) !important;
  padding-right: clamp(20px, 3vw, 30px) !important;
}

.metric {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.metric + .metric {
  padding-left: clamp(20px, 3vw, 30px) !important;
}

.panel {
  padding-top: clamp(22px, 3vw, 32px) !important;
  padding-bottom: clamp(22px, 3vw, 32px) !important;
}

/* Keep the visual hierarchy predominantly Inkspira magenta, black and white. */
.eyebrow,
.nav-button[aria-current="page"],
.metric-value,
.page-head h1 {
  text-shadow: none;
}

.nav-button[aria-current="page"] {
  border-color: rgba(188,56,124,.52) !important;
  background: linear-gradient(120deg, rgba(188,56,124,.24), rgba(133,48,79,.14) 62%, rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(188,56,124,.12) !important;
}

@media (max-width: 860px) {
  /* Header scrolls away; the options toolbar becomes the top persistent control. */
  .topbar {
    position: relative !important;
    top: auto !important;
    margin-top: calc(8px + env(safe-area-inset-top)) !important;
  }

  .mobile-tabs {
    position: sticky !important;
    top: calc(env(safe-area-inset-top) + 6px) !important;
    z-index: 40 !important;
    margin: 8px !important;
    padding: 8px !important;
    border-color: rgba(255,255,255,.15) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.07), rgba(188,56,124,.045)),
      rgba(8,9,9,.80) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.34), 0 0 32px rgba(188,56,124,.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
  }

  .workspace {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page-head {
    padding-left: 4px;
    padding-right: 4px;
  }

  .brand-row {
    gap: 12px !important;
  }

  .brand-copy strong {
    font-size: 15px !important;
  }

  .brand-copy span {
    max-width: 28vw !important;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-left: 16px !important;
    padding-right: 14px !important;
  }

  .brand-row .brand-mark {
    width: 122px !important;
    height: 50px !important;
    flex-basis: 122px;
  }

  .workspace {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .panel,
  .metric,
  .automation-panel,
  .capture-ai-review-item,
  .capture-ai-document,
  .scheduler-row,
  .automation-attention,
  .automation-approval-row,
  .command-card,
  .readiness-card,
  .production-card,
  .cost-simulator-card,
  .recovery-card,
  .decision-lab-verdict,
  .decision-lab-metric,
  .human-preflight-sheet {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .mobile-tabs .nav-button {
    min-height: 44px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}