/*
 * AI Dedicated Pages: scoped, variable-driven styling.
 *
 * Every visual value is a CSS custom property scoped to .aidp. On this site the
 * properties read the live Signal :root tokens; each carries a clean neutral
 * fallback so the same module looks intentional when it lifts into the plugin
 * and lands on a foreign theme. Everything is scoped under .aidp with a light
 * reset so a host theme cannot bleed in. No decorative motif. No new tokens.
 */

.aidp {
	/* Live token reads (single site-level source) with portable fallbacks. */
	--aidp-accent:    var(--accent, #e11d62);
	--aidp-accent-2:  var(--accent-dark, #b21850);
	--aidp-on-accent: var(--accent-ink, #ffffff);
	--aidp-ink:       var(--ink, #16161b);
	--aidp-text:      var(--text, #33333b);
	--aidp-muted:     var(--muted, #767680);
	--aidp-bg:        var(--bg, #ffffff);
	--aidp-surface:   var(--surface, #ffffff);
	--aidp-hairline:  var(--line, rgba(20, 20, 28, 0.12));
	--aidp-hairline-soft: var(--line-soft, rgba(20, 20, 28, 0.07));
	--aidp-font-body: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--aidp-font-head: var(--font-display, var(--aidp-font-body));
	--aidp-font-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
	--aidp-radius:    var(--radius, 8px);

	/* Module-owned values (no matching site token; fixed, overridable). */
	--aidp-measure:   70ch;
	--aidp-space:     clamp(40px, 6vw, 72px);

	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 64px) 28px clamp(56px, 8vw, 96px);
	font-family: var(--aidp-font-body);
	color: var(--aidp-text);
	background: var(--aidp-bg);
	-webkit-font-smoothing: antialiased;
}

/* Light reset, scoped, so an aggressive host theme cannot bleed in. */
.aidp * { box-sizing: border-box; }
.aidp h1, .aidp h2, .aidp h3, .aidp h4, .aidp p, .aidp ul, .aidp ol, .aidp dl, .aidp dd, .aidp figure, .aidp blockquote, .aidp pre { margin: 0; }
.aidp ul, .aidp ol { padding-left: 1.25em; }
.aidp a { color: var(--aidp-accent); text-decoration: none; }
.aidp a:hover { color: var(--aidp-accent-2); text-decoration: underline; }
.aidp img { max-width: 100%; height: auto; }

/* ---- Designed document header (accent keyline + title + standfirst) ---- */
.aidp-header { border-top: 3px solid var(--aidp-accent); padding-top: clamp(20px, 2.6vw, 30px); margin-bottom: clamp(28px, 4vw, 44px); }
.aidp-eyebrow { font-family: var(--aidp-font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aidp-accent); margin-bottom: 0.9rem; }
.aidp-title { font-family: var(--aidp-font-head); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--aidp-ink); }
.aidp-standfirst { margin-top: 1rem; max-width: 60ch; font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--aidp-text); }
.aidp-updated { margin-top: 1.1rem; font-family: var(--aidp-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--aidp-muted); }

/* ---- "At a glance" panel (Organization / Service furniture) ---- */
.aidp-glance { border: 1px solid var(--aidp-hairline); border-radius: var(--aidp-radius); padding: clamp(16px, 2vw, 22px); margin-bottom: clamp(28px, 4vw, 44px); }
.aidp-glance-k { font-family: var(--aidp-font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aidp-muted); margin-bottom: 14px; }
.aidp-glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; }
.aidp-glance-cell dt { font-family: var(--aidp-font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aidp-muted); }
.aidp-glance-cell dd { margin: 0.3rem 0 0; font-size: 0.98rem; color: var(--aidp-ink); }

/* ---- Body: optional contents rail + document at a reading measure ---- */
.aidp-body.has-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) {
	.aidp-body.has-toc { grid-template-columns: 220px minmax(0, 1fr); }
}
.aidp-toc { align-self: start; }
@media (min-width: 960px) {
	.aidp-toc { position: sticky; top: 90px; }
}
.aidp-toc-k { font-family: var(--aidp-font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aidp-muted); margin-bottom: 12px; }
.aidp-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; border-left: 1px solid var(--aidp-hairline); }
.aidp-toc li { padding-left: 14px; }
.aidp-toc a { color: var(--aidp-muted); font-size: 0.9rem; line-height: 1.35; }
.aidp-toc a:hover { color: var(--aidp-accent); text-decoration: none; }

.aidp-doc { max-width: var(--aidp-measure); }
.aidp-body:not(.has-toc) .aidp-doc { margin: 0 auto; }

/* ---- Section rhythm by H2 (chapters via breathing room + a hairline) ---- */
.aidp-section { padding-top: var(--aidp-space); margin-top: var(--aidp-space); border-top: 1px solid var(--aidp-hairline-soft); }
.aidp-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.aidp-h2 { font-family: var(--aidp-font-head); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--aidp-ink); scroll-margin-top: 90px; }

/* ---- Prose ---- */
.aidp-doc p { margin-top: 1.05rem; font-size: 1.05rem; line-height: 1.7; color: var(--aidp-text); }
.aidp-doc .aidp-h3, .aidp-doc .aidp-h4 { font-family: var(--aidp-font-head); font-weight: 700; color: var(--aidp-ink); letter-spacing: -0.01em; line-height: 1.2; scroll-margin-top: 90px; }
.aidp-doc .aidp-h3 { font-size: 1.25rem; margin-top: 1.9rem; }
.aidp-doc .aidp-h4 { font-size: 1.06rem; margin-top: 1.5rem; }
.aidp-doc ul, .aidp-doc ol { margin-top: 1.05rem; }
.aidp-doc li { margin-top: 0.45rem; font-size: 1.05rem; line-height: 1.65; color: var(--aidp-text); }
.aidp-doc li::marker { color: var(--aidp-muted); }
.aidp-code { font-family: var(--aidp-font-mono); font-size: 0.9em; background: var(--aidp-hairline-soft); padding: 0.12em 0.4em; border-radius: 5px; color: var(--aidp-ink); }
.aidp-pre { margin-top: 1.05rem; font-family: var(--aidp-font-mono); font-size: 0.86rem; line-height: 1.5; background: var(--aidp-surface); border: 1px solid var(--aidp-hairline); border-radius: var(--aidp-radius); padding: 14px 16px; overflow: auto; color: var(--aidp-ink); }
.aidp-quote { margin-top: 1.05rem; padding-left: 1em; border-left: 3px solid var(--aidp-accent); color: var(--aidp-text); font-size: 1.08rem; line-height: 1.6; }
.aidp-hr { margin: var(--aidp-space) 0 0; border: 0; border-top: 1px solid var(--aidp-hairline); }

/* ---- FAQ furniture: hairline rows (the .faq pattern, via the variables) ---- */
.aidp-faq { margin-top: 1.2rem; border-top: 1px solid var(--aidp-hairline); }
.aidp-faq-item { padding: 20px 0; border-bottom: 1px solid var(--aidp-hairline); }
.aidp-faq-q { font-family: var(--aidp-font-head); font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--aidp-ink); }
.aidp-faq-a { margin-top: 0.5rem; font-size: 1.02rem; line-height: 1.65; color: var(--aidp-text); }

/* ---- Closing line for a stray human visitor ---- */
.aidp-foot { margin-top: var(--aidp-space); padding-top: 1.4rem; border-top: 1px solid var(--aidp-hairline); }
.aidp-foot p { font-size: 0.92rem; line-height: 1.6; color: var(--aidp-muted); }
.aidp-foot a { font-weight: 600; }