/* CI3 diagnostic integration overrides
   Purpose: keep the baked-in diagnostic route full-width on web while retaining
   a clean stacked layout on mobile. This sits after the generated Tailwind CSS. */

html,
body,
#root {
  width: 100%;
  min-width: 320px;
}

body {
  overflow-x: clip;
}

#root :is(h1, h2, h3, h4, p, span, button, a, summary) {
  overflow-wrap: anywhere;
}

#root .line-clamp-1 {
  display: inline !important;
  overflow: visible !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
}

@media (min-width: 760px) {
  #root > div > main {
    width: 100%;
    max-width: none;
    padding-right: clamp(18px, 2.5vw, 42px);
    padding-left: clamp(18px, 2.5vw, 42px);
  }

  #root > div > main > section:first-of-type > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr) !important;
    align-items: start !important;
    gap: clamp(24px, 4vw, 64px) !important;
  }

  #root > div > main > section:first-of-type > div:first-child > details {
    display: block !important;
    min-width: 0;
  }

  #root > div > main > section:first-of-type > div:first-child > details > summary {
    display: none !important;
  }

  #root > div > main > section:first-of-type > div:first-child > details > div {
    display: block !important;
  }

  #root > div > main .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1180px) {
  #root > div > main > section:first-of-type {
    min-height: calc(100vh - 11rem);
  }

  #root > div > main > section:first-of-type > div:first-child {
    padding: clamp(2rem, 3.5vw, 4rem) !important;
  }

  #root > div > main .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 759px) {
  #root > div > main {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  #root > div > main > section:first-of-type > div:first-child {
    grid-template-columns: 1fr !important;
  }

  #root > div > main .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* The Plat4m premium diagnostic skin */
:root {
  --ci3-ink: #141310;
  --ci3-ink-soft: #2d2924;
  --ci3-paper: #f5f0e8;
  --ci3-ivory: #fffdf9;
  --ci3-sand: #eae1d5;
  --ci3-orange: #ee6b24;
  --ci3-orange-deep: #c94d0b;
  --ci3-line-dark: rgba(255, 253, 249, 0.14);
  --ci3-line-warm: rgba(255, 182, 140, 0.24);
  --ci3-serif: "Playfair Display", Georgia, serif;
  --ci3-sans: "DM Sans", Arial, sans-serif;
  --ci3-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.diagnostic-cle-page {
  min-height: 100vh;
  color: var(--ci3-ivory);
  background:
    radial-gradient(circle at 86% 9%, rgba(238, 107, 36, 0.22), transparent 29rem),
    radial-gradient(circle at 10% 88%, rgba(255, 182, 140, 0.08), transparent 24rem),
    linear-gradient(115deg, #0c0b0a 0%, #171511 50%, #332316 100%) !important;
  font-family: var(--ci3-sans);
  -webkit-font-smoothing: antialiased;
}

body.diagnostic-cle-page::before,
body.diagnostic-cle-page::after {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body.diagnostic-cle-page::before {
  right: -22rem;
  bottom: -24rem;
  width: 48rem;
  height: 48rem;
  border: 1px solid rgba(255, 253, 249, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 4.6rem rgba(255, 253, 249, 0.025);
}

body.diagnostic-cle-page::after {
  inset: 0;
  opacity: 0.18;
  background-image: radial-gradient(rgba(255, 182, 140, 0.42) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, transparent 0%, transparent 45%, #000 78%, transparent 100%);
}

body.diagnostic-cle-page #root,
body.diagnostic-cle-page #root > div {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: var(--ci3-ivory) !important;
  font-family: var(--ci3-sans) !important;
}

.diagnostic-cle-back {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
  border: 1px solid var(--ci3-line-warm);
  color: var(--ci3-ink);
  background: #ffb68c;
  box-shadow: 0 1.1rem 2.9rem rgba(0, 0, 0, 0.24);
  font: 700 0.68rem/1 var(--ci3-mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.diagnostic-cle-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.32);
}

body.diagnostic-cle-page #root .fixed.inset-x-0.top-0 {
  border-bottom: 1px solid var(--ci3-line-dark) !important;
  background:
    linear-gradient(90deg, rgba(10, 9, 8, 0.97), rgba(24, 20, 16, 0.95), rgba(47, 31, 18, 0.92)) !important;
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.diagnostic-cle-page #root .fixed.inset-x-0.top-0 > div {
  min-height: 5.45rem;
}

body.diagnostic-cle-page #root img[src*="ci3-logo"] {
  width: clamp(3.3rem, 5.3vw, 4.9rem) !important;
  height: clamp(3.3rem, 5.3vw, 4.9rem) !important;
  object-fit: contain;
  filter: drop-shadow(0 0.8rem 1.8rem rgba(0, 0, 0, 0.28));
}

body.diagnostic-cle-page #root main {
  position: relative;
}

body.diagnostic-cle-page #root h1,
body.diagnostic-cle-page #root h2,
body.diagnostic-cle-page #root h3 {
  font-family: var(--ci3-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.046em !important;
}

body.diagnostic-cle-page #root h1 {
  max-width: 58rem;
  font-size: clamp(3.2rem, 7vw, 6.6rem) !important;
  line-height: 0.93 !important;
}

body.diagnostic-cle-page #root h2 {
  font-size: clamp(2rem, 3.4vw, 4.2rem) !important;
  line-height: 1.02 !important;
}

body.diagnostic-cle-page #root h3 {
  font-size: clamp(1.35rem, 2.1vw, 2.3rem) !important;
  line-height: 1.08 !important;
}

body.diagnostic-cle-page #root p,
body.diagnostic-cle-page #root li,
body.diagnostic-cle-page #root label {
  line-height: 1.65;
}

body.diagnostic-cle-page #root [class*="text-slate-100"],
body.diagnostic-cle-page #root [class*="text-white"] {
  color: var(--ci3-ivory) !important;
}

body.diagnostic-cle-page #root [class*="text-slate-200"],
body.diagnostic-cle-page #root [class*="text-slate-300"] {
  color: #eadfD2 !important;
}

body.diagnostic-cle-page #root [class*="text-slate-400"],
body.diagnostic-cle-page #root [class*="text-slate-500"] {
  color: #b9ab9c !important;
}

body.diagnostic-cle-page #root [class*="text-indigo"],
body.diagnostic-cle-page #root [class*="text-orange"] {
  color: #ffb68c !important;
}

body.diagnostic-cle-page #root [class*="bg-slate-950"],
body.diagnostic-cle-page #root [class*="bg-slate-900"],
body.diagnostic-cle-page #root [class*="bg-slate-800"] {
  background-color: rgba(20, 19, 16, 0.56) !important;
}

body.diagnostic-cle-page #root [class*="bg-slate-900/20"],
body.diagnostic-cle-page #root [class*="bg-slate-900/30"],
body.diagnostic-cle-page #root [class*="bg-slate-900/40"],
body.diagnostic-cle-page #root [class*="bg-slate-900/45"],
body.diagnostic-cle-page #root [class*="bg-slate-900/50"],
body.diagnostic-cle-page #root [class*="bg-slate-900/60"],
body.diagnostic-cle-page #root [class*="bg-slate-900/70"] {
  background-color: rgba(255, 253, 249, 0.045) !important;
}

body.diagnostic-cle-page #root [class*="bg-indigo-500/"],
body.diagnostic-cle-page #root [class*="bg-indigo-900/"],
body.diagnostic-cle-page #root [class*="bg-indigo-950/"] {
  background-color: rgba(255, 182, 140, 0.08) !important;
}

body.diagnostic-cle-page #root [class*="border-slate"],
body.diagnostic-cle-page #root [class*="border-indigo"] {
  border-color: var(--ci3-line-dark) !important;
}

body.diagnostic-cle-page #root [class*="rounded-2xl"],
body.diagnostic-cle-page #root [class*="rounded-xl"],
body.diagnostic-cle-page #root [class*="rounded-lg"] {
  border-radius: 0.15rem !important;
}

body.diagnostic-cle-page #root [class*="shadow"] {
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.18) !important;
}

body.diagnostic-cle-page #root [class*="bg-gradient-to-br"],
body.diagnostic-cle-page #root [class*="bg-gradient-to-tr"] {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 182, 140, 0.24) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(238, 107, 36, 0.24), transparent 22rem),
    linear-gradient(145deg, rgba(255, 253, 249, 0.105), rgba(255, 253, 249, 0.035)) !important;
}

body.diagnostic-cle-page #root [class*="bg-gradient-to-br"]::after,
body.diagnostic-cle-page #root [class*="bg-gradient-to-tr"]::after {
  position: absolute;
  right: -13rem;
  bottom: -15rem;
  width: 31rem;
  height: 31rem;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 253, 249, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 3.2rem rgba(255, 253, 249, 0.018);
}

body.diagnostic-cle-page #root [class*="bg-gradient-to-br"] > *,
body.diagnostic-cle-page #root [class*="bg-gradient-to-tr"] > * {
  position: relative;
  z-index: 1;
}

body.diagnostic-cle-page #root button,
body.diagnostic-cle-page #root a[role="button"],
body.diagnostic-cle-page #root [class*="bg-indigo-600"] {
  border-radius: 0.12rem !important;
}

body.diagnostic-cle-page #root [class*="bg-indigo-600"] {
  border: 1px solid rgba(255, 182, 140, 0.22) !important;
  background: var(--ci3-orange-deep) !important;
  color: var(--ci3-ivory) !important;
  box-shadow: 0 1rem 2.7rem rgba(201, 77, 11, 0.24) !important;
}

body.diagnostic-cle-page #root button:hover,
body.diagnostic-cle-page #root a:hover {
  transform: translateY(-1px);
}

body.diagnostic-cle-page #root input,
body.diagnostic-cle-page #root textarea,
body.diagnostic-cle-page #root select {
  border-color: rgba(255, 253, 249, 0.16) !important;
  color: var(--ci3-ivory) !important;
  background-color: rgba(20, 19, 16, 0.58) !important;
}

body.diagnostic-cle-page #root input::placeholder,
body.diagnostic-cle-page #root textarea::placeholder {
  color: rgba(234, 223, 210, 0.56) !important;
}

body.diagnostic-cle-page #root input[type="range"] {
  accent-color: var(--ci3-orange);
}

body.diagnostic-cle-page #root input[type="checkbox"],
body.diagnostic-cle-page #root input[type="radio"] {
  accent-color: var(--ci3-orange-deep);
}

body.diagnostic-cle-page #root details {
  border-color: rgba(255, 253, 249, 0.13) !important;
}

body.diagnostic-cle-page #root summary {
  transition: color 0.22s ease, background 0.22s ease;
}

body.diagnostic-cle-page #root summary:hover {
  color: #ffb68c !important;
}

body.diagnostic-cle-page #root .grid.grid-cols-2.gap-2 > * {
  min-width: 0;
}

body.diagnostic-cle-page #root .workspace-scrollbar {
  scrollbar-color: #c94d0b rgba(255, 253, 249, 0.08);
}

@media (min-width: 1180px) {
  body.diagnostic-cle-page #root > div > main {
    padding-top: 9.75rem !important;
  }

  body.diagnostic-cle-page #root > div > main > section:first-of-type > div:first-child {
    border: 1px solid rgba(255, 182, 140, 0.22) !important;
    background:
      linear-gradient(135deg, rgba(255, 253, 249, 0.06), rgba(255, 253, 249, 0.025)),
      rgba(20, 19, 16, 0.48) !important;
    box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.2) !important;
  }
}

@media (max-width: 900px) {
  .diagnostic-cle-back {
    right: 0.75rem;
    bottom: 0.75rem;
    min-height: 3rem;
    padding-inline: 0.95rem;
    font-size: 0.62rem;
  }

  body.diagnostic-cle-page #root .fixed.inset-x-0.top-0 > div {
    min-height: 4.9rem;
  }

  body.diagnostic-cle-page #root > div > main {
    padding-top: 9rem !important;
  }

  body.diagnostic-cle-page #root h1 {
    font-size: clamp(2.7rem, 12vw, 4.8rem) !important;
  }
}

@media (max-width: 560px) {
  body.diagnostic-cle-page::after {
    opacity: 0.09;
  }

  body.diagnostic-cle-page #root > div > main {
    padding-right: 0.9rem !important;
    padding-left: 0.9rem !important;
  }

  body.diagnostic-cle-page #root h1 {
    font-size: clamp(2.35rem, 12.5vw, 3.65rem) !important;
  }

  body.diagnostic-cle-page #root h2 {
    font-size: clamp(1.8rem, 8vw, 2.7rem) !important;
  }

  body.diagnostic-cle-page #root [class*="p-8"],
  body.diagnostic-cle-page #root [class*="p-10"],
  body.diagnostic-cle-page #root [class*="sm:p-8"],
  body.diagnostic-cle-page #root [class*="lg:p-10"] {
    padding: 1.25rem !important;
  }

  body.diagnostic-cle-page #root .grid.grid-cols-2.gap-2 {
    grid-template-columns: 1fr !important;
  }
}