/* DiffScope company, legal and support pages (/faq /support /privacy /terms /license /security /about /press).
   Loaded after /styles.css and uses its theme tokens, so both themes work automatically. */

/* ---------- shared fixes inside .prose ---------- */
.prose .card h3, .prose .glance-item h3, .prose .asset h3 { margin-top: 0; }
.prose .card-grid { margin-top: 20px; }
.prose .card p { font-size: 15px; line-height: 1.6; }
.prose .faq-group + .faq-group { margin-top: 0; }
.prose .faq-group:first-child h2 { margin-top: 0; }
.prose .faq { margin-top: 16px; }
.prose .faq summary { font-size: 16.5px; line-height: 1.45; padding: 18px 4px; }
.prose .faq summary .ico { flex-shrink: 0; }
.prose .faq-body { font-size: 15.5px; line-height: 1.7; }
.prose .faq-body > * { margin: 0; }
.prose .faq-body ol, .prose .faq-body ul { padding-left: 1.3em; }
.prose .faq-body .code { margin: 0; }
.prose .faq details { scroll-margin-top: 88px; }
.prose .faq details:target summary, .prose .faq details[open] summary { color: var(--text); }
.prose .faq details[open] summary:hover { color: var(--accent); }
.prose ol[type="a"] { list-style-type: lower-alpha; }
.prose li > .code { margin-top: 10px; margin-bottom: 10px; }

/* ---------- "coming soon" contact callout ---------- */
.callout.contact-soon { --c: var(--accent-2); }

/* ---------- at-a-glance tiles (privacy, security) ---------- */
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.glance-item {
  padding: 20px 20px 22px; border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  scroll-margin-top: 88px;
}
.glance-item .card-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; }
.glance-item .card-icon .ico { width: 18px; height: 18px; }
.prose .glance-item h3 { font-size: 16.5px; line-height: 1.35; }
.glance-item p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.glance-item:nth-child(even) .card-icon {
  color: var(--accent-2); background: var(--accent-2-soft);
  border-color: color-mix(in srgb, var(--accent-2) 25%, transparent);
}

/* ---------- licence: may / may not summary ---------- */
.license-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ls-col { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.ls-yes { border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.ls-no { border-color: color-mix(in srgb, var(--red) 32%, transparent); background: color-mix(in srgb, var(--red) 5%, var(--surface)); }
.ls-title { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); }
.ls-title .ico { width: 18px; height: 18px; color: var(--green); }
.ls-x { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.ls-x::before, .ls-x::after {
  content: ""; position: absolute; left: 8px; top: 2px; width: 2px; height: 14px; border-radius: 1px;
  background: var(--red); transform: rotate(45deg);
}
.ls-x::after { transform: rotate(-45deg); }
.prose .ls-col ul { margin-top: 8px; padding-left: 1.2em; font-size: 15px; line-height: 1.6; }
.prose .ls-yes li::marker { color: var(--green); }
.prose .ls-no li::marker { color: var(--red); }

/* ---------- full licence text ---------- */
.license-text {
  margin-top: 20px; padding: 28px 32px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 15.5px; line-height: 1.7;
}
.license-text > * + * { margin-top: 14px; }
.prose .license-text h3 { margin-top: 28px; font-size: 17px; }
.prose .license-text h3 + * { margin-top: 8px; }
.license-text .lt-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.license-text ol { padding-left: 1.6em; }
.legal-caps { font-size: 0.94em; color: var(--text-2); }
.license-pre code { font-size: 12.5px; line-height: 1.6; }

/* ---------- troubleshooting / numbered steps ---------- */
.prose .steps-list { padding-left: 1.4em; }

/* ---------- about ---------- */
.page-hero--center h1 { text-wrap: balance; }
.about-prose { margin: 0 auto; }
.about-prose + .principles { margin-top: 20px; }
.principles { max-width: 760px; margin-left: auto; margin-right: auto; }
.principles + .about-prose { margin-top: 56px; }
.prose [data-release="size"], .page-meta [data-release] { white-space: nowrap; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.principle p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.principles .principle:nth-child(2) .card-icon,
.principles .principle:nth-child(3) .card-icon {
  color: var(--accent-2); background: var(--accent-2-soft);
  border-color: color-mix(in srgb, var(--accent-2) 25%, transparent);
}

/* ---------- press: quotes ---------- */
.prose blockquote.quote-box {
  padding: 18px 22px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; background: var(--surface); font-style: normal; color: var(--text);
}

/* ---------- press: facts table ---------- */
.prose table.facts th {
  width: 34%; padding: 11px 16px; border-top: 1px solid var(--border); background: var(--bg-2);
  color: var(--text); font-size: 14px; font-weight: 600; text-align: left; vertical-align: top;
}
.prose table.facts tr:first-child th, .prose table.facts tr:first-child td { border-top: 0; }

/* ---------- press: logo assets ---------- */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.asset { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.asset-preview {
  display: grid; place-items: center; height: 170px; padding: 22px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #eef1f6 25%, transparent 25%), linear-gradient(-45deg, #eef1f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef1f6 75%), linear-gradient(-45deg, transparent 75%, #eef1f6 75%);
  background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  border-bottom: 1px solid var(--border);
}
.asset-preview--tile { background: #0b1324; }
.asset-preview img { max-width: 100%; max-height: 126px; width: auto; height: auto; object-fit: contain; }
.asset-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.prose .asset-info p { margin: 0; font-size: 14px; line-height: 1.55; }
.prose .asset-info .asset-meta { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.asset-info .btn { align-self: flex-start; margin-top: auto; text-decoration: none; }
.prose .asset-info .btn { color: var(--text); }
.asset-info .asset-meta + .btn { margin-top: 10px; }

/* ---------- press: colour swatches ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.swatch-chip { height: 84px; display: flex; align-items: flex-end; padding: 10px 12px; color: #ffffff; }
.swatch-chip[data-ink="dark"] { color: #0b1324; }
.swatch-chip span { font: 600 13px/1 var(--mono); letter-spacing: 0.02em; user-select: all; }
.swatch-chip[data-c="0EA5E9"] { background: #0EA5E9; }
.swatch-chip[data-c="0369A1"] { background: #0369A1; }
.swatch-chip[data-c="F97316"] { background: #F97316; }
.swatch-chip[data-c="FBBF24"] { background: #FBBF24; }
.swatch-chip[data-c="6B7280"] { background: #6B7280; }
.swatch-chip[data-c="CBD5E1"] { background: #CBD5E1; }
.prose .swatch p { margin: 0; padding: 0 12px; }
.prose .swatch .swatch-name { padding-top: 10px; font-weight: 650; color: var(--text); font-size: 14.5px; }
.prose .swatch .swatch-role { padding-bottom: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- press: screenshots ---------- */
.shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prose .press-shot { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.press-shot-img { display: block; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.press-shot-img img { display: block; width: 100%; height: auto; }
.prose .press-shot figure img, .prose .press-shot img { border: 0; border-radius: 0; }
.prose .press-shot figcaption { display: grid; gap: 2px; margin: 0; padding: 12px 16px 14px; text-align: left; font-size: 14px; color: var(--text-2); }
.press-shot figcaption strong { color: var(--text); font-size: 15px; }
.press-shot-links { display: flex; gap: 16px; margin-top: 6px; font-size: 13.5px; font-weight: 600; }
.prose .press-shot-links a { text-decoration: none; }
.prose .press-shot-links a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .shot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .glance, .license-summary, .principles { grid-template-columns: 1fr; }
  .license-text { padding: 20px 18px; font-size: 15px; }
  .prose table.facts th { width: 38%; padding: 10px 12px; }
  .prose .faq summary { font-size: 16px; gap: 14px; }
  .asset-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.code pre.license-pre { white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; }