/* modou dsp — Technology, Support and the legal documents.
   Loaded only on those templates (inc/enqueue.php).

   Everything here builds on the vocabulary already in main.css —
   .section, .section-inner, .section-head, .eyebrow, .glass-panel,
   .tech-stages, .btn — rather than introducing a parallel one. The three
   page types share a rhythm: an eyebrow, a heading, a lead paragraph,
   then the substance. */

/* ── Shared page rhythm ───────────────────────────────────────────────
   Consecutive sections would otherwise pay the full --space-section twice
   over at every boundary, which on these long pages reads as the page
   having fallen apart rather than as generous spacing. */
.tech-block,
.support-block,
.legal-doc { padding-top: 0; }

.tech-hero,
.support-hero,
.legal-hero { padding-bottom: var(--space-lg); }

.page-tech .section-head,
.page-support .section-head { margin-bottom: var(--space-sm); }

/* ── Technology ───────────────────────────────────────────────────── */

/* The second line under each stage: why the stage exists at all. Set
   quieter and rule-marked so the four-verb spine still scans on its own
   for a reader who is skimming. */
.tech-why {
  margin: 0.55rem 0 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--product-accent-dim);
  color: var(--text-faint);
  font-size: var(--text-sm);
  max-width: 62ch;
}

/* The comparison. Two states of the same idea, so they are set as one
   line with an arrow between them rather than as two columns — a
   two-column table invites reading down one side, which turns an
   architectural argument into a scorecard. */
.tech-contrast {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border-overlay);
  border: 1px solid var(--border-overlay);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.tech-contrast li {
  margin: 0;
  padding: var(--space-md);
  background: var(--bg-charcoal);
}

.tech-contrast-pair {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-sm);
  margin-bottom: 0.5rem;
}

.tech-contrast-from {
  color: var(--text-faint);
  font-size: var(--text-base);
  /* Struck through would read as "wrong". It is not wrong, it is the
     other starting point — so it is only set back. */
}

.tech-contrast-arrow { color: var(--product-accent); }

.tech-contrast-to {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.tech-contrast li p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 72ch;
}

/* Instruments — read from the catalogue, so the card has to survive a
   product with no short description and a name of any length. */
.tech-instruments {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.tech-instruments li { margin: 0; }

.tech-instruments a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border-overlay);
  border-radius: var(--radius-card);
  background: var(--bg-charcoal);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo);
}

.tech-instruments a:hover {
  border-color: var(--product-accent);
  background: var(--bg-charcoal-hover);
  transform: translateY(-2px);
}

.tech-instruments h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.tech-instruments p {
  margin: 0 0 var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Pushed to the bottom so the link sits on one line across the row even
   when the descriptions differ in length. */
.tech-instrument-more {
  margin-top: auto;
  color: var(--product-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Specification table. Checkable facts, set like reference material. */
.tech-spec {
  width: 100%;
  margin: var(--space-lg) 0 0;
  border-collapse: collapse;
  text-align: left;
}

.tech-spec th,
.tech-spec td {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-overlay);
  vertical-align: top;
  font-size: var(--text-sm);
}

.tech-spec th {
  width: 34%;
  padding-right: var(--space-md);
  font-weight: 600;
  color: var(--text-primary);
}

.tech-spec td { color: var(--text-muted); }

.tech-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ── Support ──────────────────────────────────────────────────────── */

.support-shortcuts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.support-shortcuts li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-overlay);
  border-radius: var(--radius-card);
  background: var(--bg-charcoal);
}

.support-shortcuts h2 {
  margin: 0 0 0.4rem;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.support-shortcuts p {
  margin: 0 0 var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.support-shortcut-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--product-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.support-shortcut-cta span {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.support-shortcuts li:hover .support-shortcut-cta span { transform: translateX(3px); }

.support-licence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.support-licence-grid article { padding: var(--space-md); }

/* The one number someone came to the section for. */
.support-figure {
  margin: 0.4rem 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--product-accent);
}

.support-licence-grid p:last-child {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.support-manuals {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.support-manuals li { margin: 0; }

.support-manuals a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-overlay);
  border-radius: var(--radius-card);
  background: var(--bg-charcoal);
  color: var(--text-muted);
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}

.support-manuals a:hover { color: var(--product-accent); border-color: var(--product-accent); }
.support-manual-name { font-weight: 600; }

/* FAQ — native <details>, so it works with no JavaScript. */
.support-faq {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border-overlay);
}

.support-faq details { border-bottom: 1px solid var(--border-overlay); }

.support-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* A tap target, not a line of text. */
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* Safari draws its own triangle unless this is removed. */
.support-faq summary::-webkit-details-marker { display: none; }

.support-faq summary:hover { color: var(--product-accent); }

.support-faq-chevron {
  flex: none;
  color: var(--text-faint);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.support-faq details[open] .support-faq-chevron { transform: rotate(180deg); }

.support-faq-body { padding: 0 0 var(--space-md); }

.support-faq-body p {
  margin: 0;
  color: var(--text-muted);
  max-width: 76ch;
}

.support-contact { padding: var(--space-xl); }
.support-contact h2 { margin: 0.4rem 0 var(--space-sm); font-size: var(--text-xl); }
.support-contact p { color: var(--text-muted); max-width: 66ch; margin: 0; }

/* ── modou DSP Central ─────────────────────────────────────────────── */

.page-central .central-hero { padding-bottom: var(--space-lg); }
.page-central .central-block { padding-top: 0; }

/* The two installers. Both are always offered; only the order changes with
   the detected platform, so the layout must not make the first one look
   like the only one. */
.central-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.central-download {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  /* Taller than a plain .btn: it carries a second line of version and
     size, which is what someone checks before running an installer. */
  padding: 0.7rem 1.5rem;
  text-align: left;
}

.central-download-label { font-weight: 700; }

.central-download-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* The secondary button inherits the theme's outline treatment; its meta
   line needs the muted colour rather than the accent's. */
.central-download.btn-secondary .central-download-meta { opacity: 0.6; }

/* Cards rather than buttons on the download page itself, where the pair is
   the main event instead of one call to action among several. */
.central-downloads--full { gap: var(--space-md); }

.central-downloads--full .central-download {
  flex: 1 1 15rem;
  padding: var(--space-md) var(--space-lg);
}

.central-pending {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px dashed var(--border-overlay);
  border-radius: var(--radius-card);
  color: var(--text-faint);
  font-size: var(--text-sm);
}

/* Reuses .tech-spec, but this one has a real header row. */
.central-builds thead th {
  color: var(--text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  width: auto;
}

.central-builds tbody th { width: 30%; }

.central-does { margin-top: var(--space-lg); }

@media (max-width: 620px) {
  /* Full width, stacked: two half-width installer buttons on a phone put
     the platform name on two lines each. */
  .central-downloads--full .central-download { flex: 1 1 100%; }

  .central-builds thead { display: none; }
  .central-builds tbody th,
  .central-builds tbody td { display: block; width: auto; }
  .central-builds tbody tr { display: block; padding: var(--space-sm) 0; }
  .central-builds tbody th { border-bottom: none; padding-bottom: 0.2rem; }
}

/* ── Legal documents ──────────────────────────────────────────────── */

.legal-effective {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Contents beside the document on a wide screen, above it otherwise.
   Sticky, because the reason to have a contents list on a document this
   long is to move around inside it after you have started reading. */
.legal-doc .section-inner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--space-xl) + var(--space-md));
  font-size: var(--text-sm);
}

.legal-toc ol {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  counter-reset: legal-toc;
}

.legal-toc li {
  margin: 0;
  counter-increment: legal-toc;
}

.legal-toc a {
  display: block;
  padding: 0.35rem 0;
  color: var(--text-faint);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--border-overlay);
}

.legal-toc a:hover { color: var(--product-accent); }

.legal-section { padding-bottom: var(--space-lg); }
.legal-section + .legal-section { border-top: 1px solid var(--border-overlay); padding-top: var(--space-lg); }

/* Clause anchors land under the sticky header, not behind it. */
.legal-section { scroll-margin-top: 96px; }

.legal-section h2 {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.legal-num { color: var(--product-accent); font-size: var(--text-sm); }

.legal-section h3 {
  margin: var(--space-md) 0 0.3rem;
  font-size: var(--text-base);
}

.legal-section p,
.legal-section li {
  color: var(--text-muted);
  max-width: 74ch;
}

.legal-section p { margin: 0 0 var(--space-sm); }
.legal-section ul { margin: 0 0 var(--space-sm); padding-left: 1.1rem; }
.legal-section li { margin: 0 0 0.4rem; }
.legal-section a { color: var(--product-accent); }
.legal-section a:hover { text-decoration: underline; }

/* Definition pairs — entity, address, contact. */
.legal-facts {
  margin: 0 0 var(--space-sm);
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 0.5rem var(--space-md);
}

.legal-facts dt {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.legal-facts dd { margin: 0; color: var(--text-muted); }

.legal-summary { list-style: none; padding-left: 0; }

.legal-summary li {
  position: relative;
  padding-left: var(--space-md);
  color: var(--text-primary);
}

.legal-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--product-accent);
}

.legal-table {
  width: 100%;
  margin: 0 0 var(--space-sm);
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.legal-table th,
.legal-table td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--border-overlay);
  vertical-align: top;
}

.legal-table thead th {
  color: var(--text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.legal-table td { color: var(--text-muted); }

.legal-quote {
  margin: 0 0 var(--space-sm);
  padding: var(--space-md);
  border-left: 2px solid var(--product-accent);
  background: var(--bg-charcoal);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--text-primary);
}

/* An unfilled legal field. Loud on purpose — see inc/legal-info.php. */
.legal-todo {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

@media (max-width: 900px) {
  /* Contents above the document rather than beside it. Not sticky here:
     a sticky block at the top of a narrow screen eats the reading area
     it was meant to help with. */
  .legal-doc .section-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .legal-toc { position: static; }
  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 var(--space-md);
  }
}

@media (max-width: 620px) {
  .tech-spec th,
  .tech-spec td { display: block; width: auto; padding-right: 0; }
  .tech-spec th { border-bottom: none; padding-bottom: 0.2rem; }

  .legal-facts { grid-template-columns: 1fr; gap: 0.2rem; }
  .legal-facts dd { margin-bottom: var(--space-sm); }

  .support-contact { padding: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-instruments a,
  .support-shortcut-cta span,
  .support-faq-chevron { transition: none; }
}