/* CRYSTALLine on top of sphinx-book-theme.
 *
 * The theme is CRYSTALClear's, so the two sites stay a family; the colours are
 * the logo's own — the cyan-teal of "Line" and the green of the lattice — and
 * the rest is room to breathe: wider text, framed screenshots, cards that
 * carry a picture.
 */

:root,
html[data-theme="light"] {
  --crystal-cyan: #1795b5;
  --crystal-cyan-bright: #20a0c0;
  --crystal-green: #7ac143;
  --crystal-ink: #1b2b34;

  --pst-color-primary: var(--crystal-cyan);
  --pst-color-link: var(--crystal-cyan);
  --pst-color-link-hover: var(--crystal-cyan-bright);
  --pst-color-inline-code: #0f6a80;
  --crystal-surface: #f5fbfd;
  --crystal-border: rgba(23, 149, 181, 0.22);
}

html[data-theme="dark"] {
  --crystal-cyan: #45c2dd;
  --crystal-cyan-bright: #6fd4ea;
  --crystal-green: #9fdb6a;
  --crystal-ink: #e6f1f5;

  --pst-color-primary: var(--crystal-cyan);
  --pst-color-link: var(--crystal-cyan);
  --pst-color-link-hover: var(--crystal-cyan-bright);
  --pst-color-inline-code: #8fd9ea;
  --crystal-surface: rgba(69, 194, 221, 0.06);
  --crystal-border: rgba(69, 194, 221, 0.25);
}

/* ── the landing page ───────────────────────────────────────────────── */
.crystal-hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

/* The landing page's document title: the logo carries it visually, so it is
 * here for Sphinx, the toctree and screen readers, and hidden from sight.
 * Scoped to the heading, never the section — a class on the section hides the
 * whole page with it. */
section#crystalline > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.crystal-hero img {
  max-width: min(420px, 80%);
  margin: 0 auto 1.25rem;
}

.crystal-hero .crystal-tagline {
  font-size: 1.3rem;
  line-height: 1.5;
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  color: var(--crystal-ink);
}

.crystal-hero .crystal-tagline strong { color: var(--crystal-cyan); }

/* The install line, sitting under the tagline like a command you can take. */
.crystal-hero div.highlight {
  max-width: 26rem;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--crystal-border);
  border-radius: 10px;
}

/* ── screenshots ────────────────────────────────────────────────────── */
/* A screenshot is the argument on this site, so it gets a frame rather than
 * being dropped flat on the page. */
.crystal-shot img,
.crystal-hero + p img,
article img.crystal-framed {
  border: 1px solid var(--crystal-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(12, 45, 60, 0.18);
  margin: 1.2rem auto 0.4rem;
}

html[data-theme="dark"] .crystal-shot img {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.crystal-shot + p,
.crystal-caption {
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.8;
}

/* ── cards ──────────────────────────────────────────────────────────── */
.sd-card {
  border: 1px solid var(--crystal-border) !important;
  border-radius: 12px;
  background: var(--crystal-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(12, 45, 60, 0.16);
}

.sd-card-title {
  color: var(--crystal-cyan);
  font-weight: 600;
}

.sd-card img { border-radius: 8px; }

/* Buttons in the logo's colours rather than the theme's default blue. */
.sd-btn-primary {
  background-color: var(--crystal-cyan) !important;
  border-color: var(--crystal-cyan) !important;
}

.sd-btn-primary:hover {
  background-color: var(--crystal-cyan-bright) !important;
  border-color: var(--crystal-cyan-bright) !important;
}

.sd-btn-outline-primary {
  color: var(--crystal-cyan) !important;
  border-color: var(--crystal-cyan) !important;
}

.sd-btn-outline-primary:hover {
  background-color: var(--crystal-cyan) !important;
  color: #fff !important;
}

/* ── text ───────────────────────────────────────────────────────────── */
/* The default measure is narrow for pages that carry wide screenshots. */
.bd-main .bd-content .bd-article-container { max-width: 60rem; }

h1, h2, h3 { color: var(--crystal-ink); }

h2 {
  border-bottom: 2px solid var(--crystal-border);
  padding-bottom: 0.25rem;
  margin-top: 2.5rem;
}

/* Tables read as data here — k points, shortcuts, formats — so they get lines
 * and a tinted header rather than the theme's near-invisible default. */
table.docutils thead th {
  background: var(--crystal-surface);
  border-bottom: 2px solid var(--crystal-border) !important;
}

kbd, .kbd {
  background: var(--crystal-surface);
  border: 1px solid var(--crystal-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.05em 0.45em;
  font-size: 0.85em;
}


/* ── images in dark mode ────────────────────────────────────────────── */
/* pydata-sphinx-theme paints a white background behind content images in dark
 * mode, so that dark line art stays readable. Our logo is a transparent PNG
 * and our screenshots are photographs of a window: both came out sitting in a
 * white box. The logo has a lifted variant for dark mode instead. */
html[data-theme="dark"] .bd-content img,
html[data-theme="dark"] .bd-content .sd-card img,
html[data-theme="dark"] .navbar-brand img {
  background-color: transparent !important;
}

/* The landing-page logo, likewise: one file for each mode. */
.crystal-logo-dark { display: none; }
html[data-theme="dark"] .crystal-logo-light { display: none; }
html[data-theme="dark"] .crystal-logo-dark { display: block; margin: 0 auto; }