/* AiTrendz inner pages (SITE-SPEC §3.2–3.7, /privacy). Builds on home.css components. Tokens only. */

/* ---------- Page head (.phead) ---------- */
.phead { position: relative; overflow: hidden; padding: calc(var(--at-header-height) + var(--at-space-7)) 0 var(--at-space-7); border-bottom: 1px solid var(--at-color-border); background: var(--at-gradient-page); }
.phead h1 { max-width: 18ch; margin: 0 0 var(--at-space-4); font-size: var(--at-text-3xl); letter-spacing: var(--at-tracking-display); line-height: 1.02; }
.phead-lede { max-width: 40rem; margin: 0 0 var(--at-space-4); font-size: var(--at-text-lg); color: var(--at-color-muted); }
.phead-net { position: absolute; right: -2rem; top: calc(var(--at-header-height) + var(--at-space-4)); width: min(28rem, 60vw); height: auto; opacity: 0.3; pointer-events: none; }
.phead-net .pl-g line { stroke: var(--at-color-chart-link); stroke-width: 1; }
.phead-line { fill: none; stroke: var(--at-color-primary); stroke-width: 3; }
.phead-hz { stroke: var(--at-color-accent); stroke-dasharray: 6 6; }
.phead-n { fill: var(--at-color-primary); } .phead-si { fill: var(--at-color-accent); }
.phead .container { position: relative; }
@media (min-width: 60rem) { .phead { min-height: 26rem; } .phead h1 { font-size: var(--at-text-hero); } .phead-net { opacity: 0.45; } }
.curated-row { margin: 0 0 var(--at-space-2); }
.edition { margin: 0; font-family: var(--at-font-mono); font-size: var(--at-text-sm); color: var(--at-color-muted); display: flex; gap: var(--at-space-3); align-items: center; flex-wrap: wrap; }

.sec-tight { padding: var(--at-space-7) 0; }
.ch-title { display: flex; align-items: baseline; gap: var(--at-space-3); margin: 0 0 var(--at-space-5); font-size: var(--at-text-2xl) !important; max-width: none !important; }
.ch-n { font-family: var(--at-font-mono); font-size: var(--at-text-sm); color: var(--at-color-primary); }

/* ---------- Filter chips ---------- */
.fbar { display: grid; gap: var(--at-space-3); margin-bottom: var(--at-space-5); }
.fchips { display: flex; gap: var(--at-space-2); overflow-x: auto; padding-bottom: var(--at-space-1); margin-bottom: var(--at-space-4); }
.fbar .fchips { margin-bottom: 0; }
.fchip { flex: none; min-height: var(--at-tap-min); padding: 0 var(--at-space-4); font: inherit; font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-text); background: var(--at-color-surface); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-pill); cursor: pointer; }
.fchip:hover { border-color: var(--at-color-primary); }
.fchip[aria-pressed="true"] { color: var(--at-color-on-primary); background: var(--at-color-primary); border-color: var(--at-color-primary); }
.fchip:focus-visible, .inp:focus-visible, .fsort select:focus-visible, .fsearch input:focus-visible { box-shadow: var(--at-focus-ring); outline: 2px solid transparent; }
.fsort, .fsearch { display: grid; gap: var(--at-space-1); }
.fsort select, .fsearch input { min-height: var(--at-tap-min); padding: 0 var(--at-space-3); font: inherit; color: var(--at-color-text); background: var(--at-color-bg); border: 1.5px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); }
@media (min-width: 60rem) { .fbar { grid-template-columns: 1fr auto; align-items: end; } .fsort select { min-width: 12rem; } }
.board-tools { display: grid; gap: var(--at-space-3); margin-bottom: var(--at-space-4); }
@media (min-width: 37.5rem) { .board-tools { grid-template-columns: auto 1fr; } .fsearch input { max-width: 22rem; } }

.proj-grid-3 { margin-bottom: var(--at-space-4); }
@media (min-width: 37.5rem) { .proj-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 80rem) { .proj-grid-3 { grid-template-columns: repeat(3, 1fr); } .proj-grid-3 .proj-feature { grid-column: 1 / -1; } }
.proj[hidden] { display: none; }

/* ---------- State panels (loading / empty / error) ---------- */
.state-panel { margin: 0 0 var(--at-space-5); padding: var(--at-space-5); text-align: center; border: 1px dashed var(--at-color-border-strong); border-radius: var(--at-radius-lg); background: var(--at-color-bg-deep); }
.state-panel[hidden] { display: none; }
.state-panel p { margin: 0 0 var(--at-space-2); color: var(--at-color-muted); }
.state-h { font-family: var(--at-font-display); font-size: var(--at-text-lg); color: var(--at-color-text) !important; }
.state-error { border-color: var(--at-color-error); border-style: solid; }
.state-ctas { display: flex; flex-wrap: wrap; gap: var(--at-space-3); justify-content: center; margin: var(--at-space-3) 0 0; }
.phead .state-ctas { justify-content: flex-start; }
.sk-card { display: grid; gap: var(--at-space-3); min-height: 8rem; }
.sk { position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--at-color-border), transparent); animation: shimmer 1.4s var(--at-ease-in-out) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-w50 { width: 50%; } .sk-w60 { width: 60%; } .sk-w75 { width: 75%; } .sk-w90 { width: 90%; }
.kempty[hidden] { display: none; }
.kempty-h { margin: 0; font-size: var(--at-text-sm) !important; color: var(--at-color-muted); }

/* ---------- Trends ---------- */
.chapters { position: sticky; top: var(--at-header-height); z-index: 5; background: var(--at-color-overlay); border-bottom: 1px solid var(--at-color-border); backdrop-filter: blur(12px); }
.chapters ol { display: flex; gap: var(--at-space-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.chapters a { display: inline-flex; align-items: center; gap: var(--at-space-2); min-height: var(--at-tap-min); padding: 0 var(--at-space-3); white-space: nowrap; color: var(--at-color-text); text-decoration: none; border-bottom: 2px solid transparent; }
.chapters a:hover, .chapters a[aria-current="true"] { border-bottom-color: var(--at-color-primary); }
.tlist { display: grid; gap: var(--at-space-4); margin-bottom: var(--at-space-4); }
.tlist[aria-busy="true"] .tcard:not(.sk-card) { display: none; }
@media (min-width: 37.5rem) { .tlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .tlist { grid-template-columns: repeat(3, 1fr); } }
.tcard[hidden] { display: none; }
.src { font-family: var(--at-font-mono); font-size: var(--at-text-xs); }
.src a { color: var(--at-color-primary); }
.si-band { margin-bottom: var(--at-space-5); padding: var(--at-space-6) var(--at-space-5); border: 1px solid var(--at-color-accent); border-radius: var(--at-radius-xl); background: var(--at-color-accent-soft); }
.si-h { font-size: var(--at-text-2xl) !important; margin: 0 0 var(--at-space-3); }
.si-note { margin: var(--at-space-3) 0 0; font-family: var(--at-font-mono); font-size: var(--at-text-sm); color: var(--at-color-accent); }
.tlist-si .tcard { border-color: var(--at-color-accent); }
.sources { margin: 0 0 var(--at-space-4); padding-left: var(--at-space-5); display: grid; gap: var(--at-space-2); }
.sources a { color: var(--at-color-primary); }
.follow-strip { padding: var(--at-space-4) var(--at-space-5); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); background: var(--at-color-surface); }
.follow-strip p { margin: 0; }

/* ---------- Ideas ---------- */
.steps { display: grid; gap: var(--at-space-3); margin: var(--at-space-5) 0 0; padding: 0; list-style: none; max-width: 56rem; }
.steps li { display: grid; gap: var(--at-space-1); padding: var(--at-space-4); background: var(--at-color-overlay); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); }
.steps span:last-child { color: var(--at-color-muted); font-size: var(--at-text-sm); }
@media (min-width: 37.5rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.form-band { display: grid; gap: var(--at-space-6); padding: var(--at-space-6) var(--at-space-5); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-xl); background: var(--at-gradient-panel); }
.form-copy h2 { font-size: var(--at-text-2xl) !important; margin-bottom: var(--at-space-3) !important; }
.form-copy p { color: var(--at-color-muted); }
@media (min-width: 64rem) { .form-band { grid-template-columns: 1fr 1.3fr; padding: var(--at-space-7); } }
.legend-pipe { display: grid; gap: var(--at-space-3); margin: var(--at-space-5) 0 0; }
.legend-pipe div { display: grid; gap: var(--at-space-1); }
.legend-pipe dt { display: flex; align-items: center; gap: var(--at-space-2); font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; }
.legend-pipe dd { margin: 0; font-size: var(--at-text-sm); color: var(--at-color-muted); }
@media (min-width: 60rem) { .legend-pipe { grid-template-columns: repeat(4, 1fr); } }
.kcard[hidden] { display: none; }
.kdetails { margin: 0 0 var(--at-space-3); font-size: var(--at-text-sm); color: var(--at-color-muted); }
.kvote[aria-busy="true"] { opacity: 0.7; cursor: progress; }
/* Visible vote rate-limit note (the live region announces it; this copy is not live, so it is read once) */
.kvote-note { margin: var(--at-space-2) 0 0; font-size: var(--at-text-xs); line-height: 1.5; color: var(--at-color-error); }

/* ---------- Forms (.xform, SITE-SPEC §2.7) ---------- */
.xform { display: grid; gap: var(--at-space-4); }
.fld { display: grid; gap: var(--at-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.fld > label, .fld > legend { font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); padding: 0; }
.req, .opt { margin-left: var(--at-space-2); text-transform: none; letter-spacing: 0; color: var(--at-color-muted); }
.req { color: var(--at-color-text); }
.hint { margin: 0; font-size: var(--at-text-sm); color: var(--at-color-muted); }
.inp { width: 100%; min-height: 3.25rem; padding: var(--at-space-3); font: inherit; font-size: 1rem; color: var(--at-color-text); background: var(--at-color-bg); border: 1.5px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); transition: border-color var(--at-duration-fast) var(--at-ease-out); }
textarea.inp { min-height: 6rem; resize: vertical; }
.inp:focus { border-color: var(--at-color-primary); }
/* Invalid: same border width plus an inset line, so the field doesn't change size (QA B4) */
.inp[aria-invalid="true"] { border-color: var(--at-color-error); box-shadow: inset 0 0 0 1px var(--at-color-error); }
.inp[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--at-color-error), 0 0 0 calc(var(--at-focus-width) + var(--at-focus-offset)) var(--at-focus-halo); }
.inp[readonly] { opacity: 0.7; }
/* Error slots keep one line reserved, so an error appearing on blur doesn't move the next control (QA B4) */
.fld-err { margin: 0; min-height: 1.5em; font-size: var(--at-text-sm); line-height: 1.5; color: var(--at-color-error); }
/* Narrow screens (incl. 200% text, where 37.49rem is reached sooner): reserve two lines, as messages can wrap (QA B4 retest) */
@media (max-width: 37.49rem) { .fld-err { min-height: 3em; } }
.counter { margin: 0; justify-self: end; font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-muted); }
.counter.is-near { color: var(--at-color-warning); } .counter.is-over { color: var(--at-color-error); }
.seg { display: flex; flex-wrap: wrap; gap: var(--at-space-2); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: var(--at-tap-min); padding: 0 var(--at-space-4); font-size: var(--at-text-sm); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-pill); }
.seg input:checked + span { border-color: var(--at-color-accent); background: var(--at-color-accent-soft); }
.seg input:focus-visible + span { box-shadow: var(--at-focus-ring); outline: 2px solid transparent; }
.check { display: flex; gap: var(--at-space-3); align-items: flex-start; font-size: var(--at-text-sm); }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--at-color-primary); }
.check input[aria-invalid="true"] { outline: 2px solid var(--at-color-error); outline-offset: 2px; }
.form-send { display: flex; flex-wrap: wrap; gap: var(--at-space-3); align-items: center; justify-content: space-between; }
.err-summary { padding: var(--at-space-4); border: 2px solid var(--at-color-error); border-radius: var(--at-radius-md); background: var(--at-color-bg-deep); }
.err-summary[hidden] { display: none; }
.err-h { margin: 0 0 var(--at-space-2); font-size: var(--at-text-base) !important; color: var(--at-color-error); }
.err-summary ul { margin: 0; padding-left: var(--at-space-5); }
.err-summary a { color: var(--at-color-text); }
.form-status:empty { display: none; }
.form-status.is-error { padding: var(--at-space-3) var(--at-space-4); border: 1px solid var(--at-color-error); border-radius: var(--at-radius-md); color: var(--at-color-text); }
.form-status.is-ok { color: var(--at-color-success); }
.success-panel { display: grid; gap: var(--at-space-3); padding: var(--at-space-6) var(--at-space-5); text-align: center; border: 1px solid var(--at-color-success); border-radius: var(--at-radius-lg); background: var(--at-color-bg-deep); animation: fade-in var(--at-duration-slow) var(--at-ease-out) both; }
.success-panel[hidden] { display: none; }
.success-panel h3 { margin: 0; font-size: var(--at-text-xl); }
.success-panel p { margin: 0; color: var(--at-color-muted); }
.success-ico { font-size: var(--at-text-2xl); color: var(--at-color-success) !important; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--at-space-6); }
@media (min-width: 64rem) { .contact-grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.other-h { margin: 0 0 var(--at-space-4); font-size: var(--at-text-xl) !important; }
.other-ways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--at-space-4); }
.other-ways li { color: var(--at-color-muted); }
.other-ways b { display: block; color: var(--at-color-text); }
.faq { display: grid; gap: var(--at-space-3); max-width: 48rem; }
.faq details { border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); background: var(--at-color-surface); }
.faq summary { min-height: var(--at-tap-min); padding: var(--at-space-3) var(--at-space-4); cursor: pointer; font-weight: var(--at-weight-semibold); }
.faq p { margin: 0; padding: 0 var(--at-space-4) var(--at-space-4); color: var(--at-color-muted); }

/* ---------- About ---------- */
.about-hero { padding-top: calc(var(--at-header-height) + var(--at-space-7)); }
.about-hero .giant { font-size: clamp(4.5rem, 16vw, 14.5rem); }
.about-hero { overflow-x: clip; }
.about-lede { margin: var(--at-space-2) 0; font-size: var(--at-text-lg); }
.bio p { font-size: var(--at-text-lg); color: var(--at-color-text); }
.bio a { color: var(--at-color-primary); }
.statement { margin: var(--at-space-5) 0 !important; padding-left: var(--at-space-4); border-left: 3px solid var(--at-color-accent); font-family: var(--at-font-display); font-size: var(--at-text-2xl) !important; font-weight: var(--at-weight-bold); line-height: var(--at-leading-tight); letter-spacing: var(--at-tracking-heading); }
.moves-plain .move h3 { margin-top: var(--at-space-3); }
.elsewhere { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--at-space-3); max-width: 40rem; }
.elsewhere li { display: flex; align-items: center; gap: var(--at-space-4); min-height: 4rem; padding: 0 var(--at-space-4); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); background: var(--at-color-surface); }
.ew-ico { font-family: var(--at-font-mono); color: var(--at-color-primary); }
.elsewhere b { margin-right: var(--at-space-2); }

/* ---------- Closing band (no form) ---------- */
.band-ctas { display: flex; flex-wrap: wrap; gap: var(--at-space-3); margin: 0; }
@media (max-width: 37.49rem) { .band-ctas .btn, .state-ctas .btn { width: 100%; justify-content: center; } }

/* ---------- Privacy prose ---------- */
.prose { max-width: 44rem; }
.prose h2 { margin: var(--at-space-6) 0 var(--at-space-3); font-size: var(--at-text-xl); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--at-color-text); line-height: var(--at-leading-base); }
.prose ul { padding-left: var(--at-space-5); display: grid; gap: var(--at-space-2); }
.prose a { color: var(--at-color-primary); }

/* ---------- 404 ---------- */
.phead-404 { min-height: 70vh; display: grid; align-content: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .sk::after, .success-panel { animation: none; } }
[data-motion="reduced"] .sk::after, [data-motion="reduced"] .success-panel { animation: none; }
.board[hidden], .tlist[hidden], .state-panel[hidden], .ktabs[hidden], .board-tools[hidden] { display: none; }