/* Portal V2 Audit Hotfix Batch 1 (P0) · 2026-05-18 */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}

* { box-sizing: border-box; }

img, video, canvas, iframe, svg {
  max-width: 100%;
}

table {
  max-width: 100%;
}

/* Common wide containers that frequently overflow on mobile */
.topbar, .hero, .kpis, .main, .relay,
.capsule-grid, .section, .category-section, .category-header,
[class*="container"], [class*="wrap"], [class*="shell"] {
  max-width: 100%;
  min-width: 0;
}

.capsule, .panel, .card, .stat-card, .kpi, .module {
  min-width: 0;
}

.capsule-name, .capsule-en, .capsule-status, .capsule-time,
.info, .small, .val, .lbl {
  overflow-wrap: anywhere;
}

/* Mobile (< 768px) force 1-col */
@media (max-width: 768px) {
  .topbar, .hero, .kpis, .main, .relay,
  .capsule-grid, .section, .category-section,
  [class*="container"], [class*="wrap"], [class*="shell"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .main { grid-template-columns: 1fr !important; }
  .relay { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 30px !important; }
  .panel { padding: 18px !important; }
  table { font-size: 14px !important; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 56px !important;
  }
  .topbar-meta {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .capsule-grid {
    grid-template-columns: 1fr !important;
  }
  .capsule.large {
    grid-column: auto !important;
  }
}

@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr !important; }
}

/* Back-to-portal button (injected by JS) */
.back-to-portal {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.88);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(184,149,106,0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 28px rgba(10,10,10,0.35);
}
.back-to-portal:hover {
  border-color: rgba(184,149,106,0.75);
  color: rgba(250,250,250,0.98);
  transform: translateX(-2px);
}

/* Portal capsule readability guard.
   Some browser/link states can leave child text black while the capsule turns dark. */
.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active),
.capsule.completed.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active) {
  background: #FAFAFA !important;
  border-color: #B8956A !important;
  color: #0A0A0A !important;
  box-shadow: none !important;
}

.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active)::before {
  display: none !important;
}

.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active) .capsule-name {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active) .capsule-en {
  color: #B8956A !important;
  -webkit-text-fill-color: #B8956A !important;
}

.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active) .capsule-status,
.capsule.featured:not(.focus-now):not(:hover):not(:focus-visible):not(:active) .capsule-time {
  color: #6B6862 !important;
  -webkit-text-fill-color: #6B6862 !important;
}

.capsule:is(:hover, :focus) {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.capsule:is(:hover, :focus, :focus-visible, :active),
.capsule.capsule-chosen {
  color: #FAFAFA !important;
}

.capsule:is(:active, :focus-visible),
.capsule.capsule-chosen {
  background: #B8956A !important;
  border-color: #B8956A !important;
  color: #FAFAFA !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-name,
.capsule.capsule-chosen .capsule-name {
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}

.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-status,
.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-time,
.capsule.capsule-chosen .capsule-status,
.capsule.capsule-chosen .capsule-time {
  color: rgba(250,250,250,0.78) !important;
  -webkit-text-fill-color: rgba(250,250,250,0.78) !important;
}

.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-en,
.capsule.capsule-chosen .capsule-en {
  color: #D4B98E !important;
  -webkit-text-fill-color: #D4B98E !important;
}

.capsule:is(:active, :focus-visible) .capsule-en,
.capsule.capsule-chosen .capsule-en {
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}

.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-name,
.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-en,
.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-status,
.capsule:is(:hover, :focus, :focus-visible, :active) .capsule-time,
.capsule.capsule-chosen .capsule-name,
.capsule.capsule-chosen .capsule-en,
.capsule.capsule-chosen .capsule-status,
.capsule.capsule-chosen .capsule-time {
  transition: none !important;
}