/*
 * Eclipse Chat site theme.
 * Layout: sticky translucent header -> optional intro band (editorial headline + eclipse mark) -> content column -> footer.
 * The "chat app screen" layout drops the footer and lets the app fill the window.
 * Uses the --ec-* tokens from tokens.css. Typography rules never reach into the chat app (.ec).
 */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ecp *, .ecp *::before, .ecp *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ec-bg);
  color: var(--ec-fg);
  font: 17px/1.6 var(--ec-font-ui);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: 3px; }

.ecp { min-height: 100dvh; display: flex; flex-direction: column; }
.ecp-main { flex: 1; min-width: 0; }
.ecp-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.ecp-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ec-accent); color: var(--ec-on-accent); font-weight: 650; text-decoration: none; }
.ecp-skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- brand ---------- */
.ecp-mark { width: 32px; height: 32px; flex: none; display: block; }
.ecp-mark-sun { fill: var(--ec-accent); }
.ecp-mark-corona { fill: none; stroke: var(--ec-accent); stroke-opacity: .28; stroke-width: 1; }
.ecp-mark--sm { width: 26px; height: 26px; }
.ecp-mark--lg { width: 96px; height: 96px; }
.ecp-wordmark { margin: 0; font-family: var(--ec-font-display); font-size: 23px; font-weight: 600; line-height: 1; letter-spacing: -.015em; font-variation-settings: "opsz" 40; white-space: nowrap; }
.ecp-wordmark em { font-style: italic; font-weight: 400; color: var(--ec-accent-ink); }
.ecp-wordmark--sm { font-size: 19px; }

/* ---------- header ---------- */
.ecp-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--ec-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--ec-line);
}
.ecp-header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; padding-block: 10px; }
.ecp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ec-fg); text-decoration: none; flex: none; }
.ecp-nav { margin-left: auto; min-width: 0; }
.ecp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ecp-nav ul::-webkit-scrollbar { display: none; }
.ecp-nav a, .ecp-lang a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px;
  color: var(--ec-muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.ecp-nav a:hover, .ecp-lang a:hover { background: var(--ec-hover); color: var(--ec-fg); }
.ecp-nav a.is-active { color: var(--ec-accent-ink); background: var(--ec-accent-soft); }
.ecp-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--ec-accent-line); }
.ecp-lang { display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--ec-line); }
.ecp-nav:not(:has(li)) + .ecp-lang, .ecp-brand + .ecp-lang { margin-left: auto; }
.ecp-lang a { height: 32px; padding: 0 10px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ecp-lang a.is-active { color: var(--ec-fg); box-shadow: inset 0 0 0 1px var(--ec-line-strong); }
.ecp-lang .is-unavailable { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ec-faint); text-decoration: line-through; text-decoration-color: var(--ec-line-strong); cursor: default; }

/* ---------- intro band ---------- */
.ecp-intro {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ec-line);
  background:
    radial-gradient(60% 90% at 88% 20%, var(--ec-accent-soft), transparent 70%),
    linear-gradient(180deg, var(--ec-bg), var(--ec-surface-2));
}
.ecp-intro-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 8vw, 112px); }
.ecp-intro-copy { min-width: 0; }
.ecp-mark--hero { width: min(340px, 100%); height: auto; justify-self: end; }
.ecp-mark--hero .ecp-mark-corona { stroke-dasharray: 2 3; stroke-opacity: .45; }
.ecp-mark--hero mask circle { animation: ecp-eclipse 2.2s cubic-bezier(.6, 0, .25, 1) .2s both; }
@keyframes ecp-eclipse { from { transform: translate(14px, -12px); } }

/* ---------- content typography (never inside the chat app) ---------- */
.ecp-content { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.ecp-prose :is(h1, h2, h3, h4, h5, h6):not(.ec *) { color: var(--ec-fg); text-wrap: balance; margin: 0 0 .5em; }
.ecp-prose :is(h1, h2):not(.ec *) { font-family: var(--ec-font-display); font-weight: 560; letter-spacing: -.02em; line-height: 1.08; }
.ecp-prose h1:not(.ec *) { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-variation-settings: "opsz" 120; }
.ecp-prose h2:not(.ec *) { font-size: clamp(1.75rem, 3vw, 2.5rem); font-variation-settings: "opsz" 72; }
.ecp-prose h3:not(.ec *) { font-size: 1.3rem; font-weight: 680; letter-spacing: -.01em; line-height: 1.3; }
.ecp-prose h4:not(.ec *) { font-size: 1.05rem; font-weight: 700; }
.ecp-prose :is(h1, h2) em:not(.ec *) { font-style: italic; font-weight: 420; color: var(--ec-accent-ink); }
.ecp-intro .ecp-prose h1:not(.ec *), .ecp-intro-copy h1:not(.ec *) { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.ecp-prose :is(p, ul, ol, blockquote, table, figure):not(.ec *) { margin: 0 0 1.1em; }
.ecp-prose :is(p, li):not(.ec *) { max-width: 68ch; }
.ecp-intro-copy p:not(.ec *) { font-size: 1.15rem; color: var(--ec-muted); }
/* Editorial headline: the subheader of an intro element continues the headline in italic accent */
.ecp-intro-copy .frame > header :is(h2, h3, h4, h5, p):not(:first-child):not(.ec *) { margin-top: -.15em; font-family: var(--ec-font-display); font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-style: italic; font-weight: 420; line-height: 1.08; letter-spacing: -.02em; color: var(--ec-accent-ink); font-variation-settings: "opsz" 120; }
.ecp-prose a:not(.ec *) { color: var(--ec-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ecp-prose a:not(.ec *):hover { text-decoration-thickness: 2px; }
.ecp-prose :is(ul, ol):not(.ec *) { padding-left: 1.3em; }
.ecp-prose li:not(.ec *) { margin: .3em 0; }
.ecp-prose li::marker { color: var(--ec-accent); }
.ecp-prose blockquote:not(.ec *) { padding: 4px 0 4px 20px; border-left: 3px dashed var(--ec-accent-line); font-family: var(--ec-font-display); font-size: 1.3rem; font-style: italic; line-height: 1.45; color: var(--ec-fg); }
.ecp-prose hr:not(.ec *) { border: 0; border-top: 1px solid var(--ec-line); margin: 2.5em 0; }
.ecp-prose :is(code, kbd):not(.ec *) { font-family: var(--ec-font-mono); font-size: .88em; padding: .1em .35em; border-radius: 6px; background: var(--ec-surface-2); border: 1px solid var(--ec-line); }
.ecp-prose img:not(.ec *) { border-radius: 14px; }
.ecp-prose figcaption:not(.ec *), .ecp-prose .image-caption:not(.ec *) { margin-top: 8px; font-size: .88rem; color: var(--ec-muted); }
.ecp-prose table.contenttable { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: 14px; overflow: hidden; }
.ecp-prose table.contenttable :is(th, td) { padding: 10px 14px; border-bottom: 1px solid var(--ec-line); text-align: left; }
.ecp-prose table.contenttable th { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ec-faint); background: var(--ec-surface-2); }
.ecp-prose .ce-table-wrap, .ecp-prose .table-responsive { overflow-x: auto; }

/* fluid_styled_content frames */
.ecp-prose .frame { margin: 0; }
.ecp-prose .frame + .frame { margin-top: clamp(32px, 4vw, 48px); }
.ecp-prose .frame-space-before-extra-small { margin-top: 8px !important; }
.ecp-prose .frame-space-before-small { margin-top: 16px !important; }
.ecp-prose .frame-space-before-medium { margin-top: 32px !important; }
.ecp-prose .frame-space-before-large { margin-top: 64px !important; }
.ecp-prose .frame-space-before-extra-large { margin-top: 104px !important; }
.ecp-prose .frame-space-after-extra-small { margin-bottom: 8px; }
.ecp-prose .frame-space-after-small { margin-bottom: 16px; }
.ecp-prose .frame-space-after-medium { margin-bottom: 32px; }
.ecp-prose .frame-space-after-large { margin-bottom: 64px; }
.ecp-prose .frame-space-after-extra-large { margin-bottom: 104px; }
.ecp-prose .frame-ruler-before { padding-top: 32px; border-top: 1px solid var(--ec-line); }
.ecp-prose .frame-ruler-after { padding-bottom: 32px; border-bottom: 1px solid var(--ec-line); }
.ecp-prose .frame-indent { padding-inline: clamp(0px, 8vw, 96px); }
.ecp-prose .frame-indent-left { padding-left: clamp(0px, 8vw, 96px); }
.ecp-prose .frame-indent-right { padding-right: clamp(0px, 8vw, 96px); }
.ecp-prose .frame > header:not(.ec *) { margin-bottom: 12px; }
.ecp-prose .frame > header h2:not(.ec *) + p { margin-top: -.2em; color: var(--ec-muted); }

/* ---------- footer ---------- */
.ecp-footer { border-top: 1px solid var(--ec-line); background: var(--ec-rail); color: var(--ec-muted); font-size: 14px; }
.ecp-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 48px; padding-block: 36px calc(28px + env(safe-area-inset-bottom, 0px)); }
.ecp-footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.ecp-footer-brand .ecp-wordmark { color: var(--ec-fg); }
.ecp-tagline { margin: 8px 0 0; }
.ecp-footer-note { display: grid; gap: 10px; justify-items: start; }
.ecp-footer-note p { margin: 0; max-width: 52ch; line-height: 1.55; }
.ecp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--ec-success-soft); color: var(--ec-success); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ecp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ecp-copy { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 18px; border-top: 1px dashed var(--ec-line-strong); font-size: 12.5px; color: var(--ec-faint); }

/* ---------- chat app screen layout ---------- */
.ecp--app { height: 100dvh; min-height: 560px; }
.ecp--app .ecp-main { display: flex; flex-direction: column; min-height: 0; padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.ecp-app-area { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 1680px; margin-inline: auto; }
.ecp-app-area > .frame, .ecp-app-area > div > .frame { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 !important; }
.ecp-app-area .frame-type-eclipsechat_app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ecp-app-area .frame-type-eclipsechat_app > header, .ecp-app-area .ec-ce-intro { display: none; }
.ecp-app-area .ec-ce { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ecp-app-area .ec { flex: 1; height: auto; min-height: 480px; }
.ecp-app-area .ec-ce-notice { justify-content: center; }
.ecp-app-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--ec-muted); border: 1.5px dashed var(--ec-accent-line); border-radius: 22px; background: var(--ec-surface); }
.ecp-app-empty p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ecp-intro-inner { grid-template-columns: minmax(0, 1fr); }
  .ecp-mark--hero { width: 132px; justify-self: start; order: -1; }
  .ecp-footer-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .ecp-header-inner { flex-wrap: wrap; gap: 6px 12px; min-height: 60px; }
  .ecp-nav { order: 3; flex: 1 1 100%; margin-left: 0; }
  .ecp-lang { margin-left: auto; border-left: 0; padding-left: 0; }
  .ecp--app .ecp-header-inner { flex-wrap: nowrap; }
  .ecp--app .ecp-nav { display: none; }
  .ecp--app .ecp-main { padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ecp *, .ecp *::before, .ecp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* app screen: header spans the same width as the app */
.ecp--app .ecp-wrap { max-width: 1712px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }