/* ==========================================================================
   Constellation — application home page

   The URL registered as the "Application home page" on the Google OAuth
   consent screen. Its job is to state the app name, explain the app's
   purpose, and show exactly how the app uses Google Drive data.

   Kept out of search-theme.css deliberately: that file is linked from
   index.html so every visitor downloads it, and this is a standalone static
   page outside the React SPA. Token fallbacks mirror search-theme.css :root
   so a rebrand carries through, and the page stays readable if that
   stylesheet fails to load.
   ========================================================================== */

.cst-page {
  margin: 0;
  background: var(--color-bg-primary, #f5efe6);
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.cst-page :focus-visible {
  outline: 2px solid var(--color-accent, #b83225);
  outline-offset: 3px;
}

/* Small caps utility label. Mono, because every place it appears the text is
   a literal identifier rather than prose. */
.cst-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.cst-hero {
  background: var(--color-bg-footer, #0a0a0f);
  color: var(--color-text-light, #f5efe6);
  padding: 2rem var(--section-pad, 1.5rem) 3.5rem;
  overflow: hidden;
}

.cst-hero-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
}

.cst-brandbar {
  max-width: 68rem;
  margin: 0 auto 3.5rem;
}

.cst-brandbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: rgba(245, 239, 230, 0.62);
  transition: color 0.2s ease;
}

.cst-brandbar a:hover {
  color: rgba(245, 239, 230, 0.95);
}

.cst-brandbar img {
  width: 1.4rem;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.cst-hero .cst-eyebrow {
  color: var(--color-accent, #b83225);
  display: block;
  margin-bottom: 1.1rem;
}

.cst-hero h1 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: clamp(2.75rem, 8.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--color-text-light, #f5efe6);
}

.cst-tagline {
  font-size: clamp(1.08rem, 2.2vw, 1.32rem);
  font-weight: 300;
  color: rgba(245, 239, 230, 0.82);
  margin: 0 0 1.5rem;
  max-width: 30ch;
}

.cst-hero-body {
  color: rgba(245, 239, 230, 0.66);
  font-size: 1rem;
  margin: 0 0 2rem;
  max-width: 44ch;
}

.cst-access {
  border-left: 2px solid var(--color-accent, #b83225);
  padding-left: 1rem;
  font-size: 0.92rem;
  color: rgba(245, 239, 230, 0.72);
}

.cst-access strong {
  color: rgba(245, 239, 230, 0.95);
  font-weight: 700;
}

/* ── Constellation figure (the signature element) ───────────────────────── */

.cst-figure {
  width: 100%;
  height: auto;
}

.cst-figure .cst-edge {
  stroke: rgba(245, 239, 230, 0.28);
  stroke-width: 1;
}

.cst-figure .cst-node-ring {
  fill: none;
  stroke: rgba(245, 239, 230, 0.5);
  stroke-width: 1;
}

.cst-figure .cst-node-core { fill: var(--color-text-light, #f5efe6); }

.cst-figure .cst-hub-ring {
  fill: none;
  stroke: var(--color-accent, #b83225);
  stroke-width: 1.5;
}

.cst-figure .cst-hub-core { fill: var(--color-accent, #b83225); }

.cst-figure .cst-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(245, 239, 230, 0.75);
}

.cst-figure .cst-label-hub {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--color-text-light, #f5efe6);
}

.cst-figure .cst-star { fill: rgba(245, 239, 230, 0.5); }

/* One orchestrated load sequence: edges draw outward from the hub, then the
   nodes and labels settle in behind them. */
@media (prefers-reduced-motion: no-preference) {
  .cst-figure .cst-edge {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: cst-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .cst-figure .cst-edge:nth-of-type(2) { animation-delay: 0.12s; }
  .cst-figure .cst-edge:nth-of-type(3) { animation-delay: 0.24s; }

  .cst-figure .cst-node,
  .cst-figure .cst-star {
    opacity: 0;
    animation: cst-fade 0.7s ease forwards;
  }
  .cst-figure .cst-node:nth-of-type(1) { animation-delay: 0.55s; }
  .cst-figure .cst-node:nth-of-type(2) { animation-delay: 0.68s; }
  .cst-figure .cst-node:nth-of-type(3) { animation-delay: 0.81s; }
  .cst-figure .cst-star { animation-delay: 0.9s; animation-duration: 1.2s; }
}

@keyframes cst-draw { to { stroke-dashoffset: 0; } }
@keyframes cst-fade { to { opacity: 1; } }

/* ── Document body ──────────────────────────────────────────────────────── */

.cst-main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 var(--section-pad, 1.5rem);
}

.cst-section { padding: 3.5rem 0; }
.cst-section + .cst-section { border-top: 1px solid var(--color-border, #d4c5b5); }

.cst-section h2 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  color: var(--color-text, #1a1a1a);
}

.cst-section h3 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.08rem;
  font-weight: 500;
  margin: 2rem 0 0.4rem;
}

.cst-section p { margin: 0 0 1rem; }
.cst-section ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.cst-section li { margin-bottom: 0.4rem; }
.cst-section a { color: var(--color-accent, #b83225); }
.cst-section a:hover { color: var(--color-accent-hover, #8f2319); }

.cst-lede {
  font-size: 1.12rem;
  font-weight: 300;
  color: var(--color-text, #1a1a1a);
}

/* Capability list — what the app does, in the user's own vocabulary. */
.cst-does {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* <div> wrappers, not <li>: a <dl> may only contain dt/dd pairs, optionally
   grouped in divs. */
.cst-does > div { margin: 0; }

.cst-does dt {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.cst-does dd {
  margin: 0;
  font-size: 0.96rem;
  color: var(--color-muted, #6b5f58);
}

/* Wide tables scroll in their own container; the page body never does. */
.cst-table-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; }

.cst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 36rem;
}

.cst-table th,
.cst-table td {
  border: 1px solid var(--color-border, #d4c5b5);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.cst-table th {
  background: var(--color-bg-secondary, #ede3d8);
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-weight: 500;
}

.cst-table code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.83rem;
  word-break: break-all;
  color: var(--color-text, #1a1a1a);
}

.cst-callout {
  background: var(--color-card-bg, #fff9f4);
  border: 1px solid var(--color-border, #d4c5b5);
  border-left: 4px solid var(--color-accent, #b83225);
  border-radius: 4px;
  padding: 1.2rem 1.45rem;
  margin: 1.5rem 0;
}

.cst-callout p:last-child { margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.cst-footer {
  background: var(--color-bg-footer, #0a0a0f);
  color: rgba(245, 239, 230, 0.6);
  padding: 2.5rem var(--section-pad, 1.5rem);
  margin-top: 2rem;
  font-size: 0.9rem;
}

.cst-footer-inner {
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.cst-footer a {
  color: rgba(245, 239, 230, 0.78);
  margin-right: 1.25rem;
  text-decoration: none;
}

.cst-footer a:hover { color: #fff; text-decoration: underline; }
.cst-footer p { margin: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cst-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cst-brandbar { margin-bottom: 2.5rem; }
  .cst-tagline, .cst-hero-body { max-width: none; }
}

@media print {
  .cst-hero { background: #fff; color: #000; }
  .cst-hero h1, .cst-tagline, .cst-hero-body { color: #000; }
  .cst-footer { display: none; }
}