/* justiceapex.ai components. Uses only the custom properties in justiceapex-tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; margin: 0; color: var(--color-ink); overflow-wrap: break-word; }
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); margin-bottom: var(--space-4); }
h3 { font-size: var(--text-h3); line-height: 1.3; margin-bottom: var(--space-2); }
p { margin: 0 0 var(--space-4); }

.wrap { max-width: var(--width-page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.read { max-width: var(--width-read); }
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
}
.small { font-size: var(--text-small); color: var(--color-muted); }
.section { padding: var(--space-7) 0; border-top: var(--border-width) solid var(--color-rule); }

/* Skip link */
.skip {
  position: absolute; left: var(--space-3); top: -4rem; z-index: 10;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-3) var(--space-4); min-height: var(--tap-min);
}
.skip:focus { top: var(--space-3); }

/* Header and navigation */
.site-header { border-bottom: var(--border-width) solid var(--color-rule); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); color: var(--color-ink); text-decoration: none; font-family: var(--font-serif); font-size: 1.25rem; }
.brand svg { width: 2rem; height: 1.7rem; flex: none; }
.brand svg path { fill: var(--color-accent); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); color: var(--color-ink); text-decoration: none; font-size: var(--text-small); border-bottom: var(--border-strong) solid transparent; }
.site-nav a:hover { border-bottom-color: var(--color-rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }

/* Footer */
.site-footer { border-top: var(--border-width) solid var(--color-rule); margin-top: var(--space-8); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-7); font-size: var(--text-small); color: var(--color-muted); }
.site-footer p { margin: 0; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-muted); }
.site-footer a:hover { color: var(--color-ink); }

/* Hero */
.hero { padding: var(--space-7) 0 var(--space-8); }
.hero h1 { max-width: 16em; }
.hero .lead { font-size: var(--text-lead); max-width: var(--width-read); margin: var(--space-5) 0 0; }
.hero .company-line { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-rule); max-width: var(--width-read); }

/* Long-form text */
.prose { max-width: var(--width-read); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--space-2); }

/* Status lines for HAVEN, each with its own status word */
.status-list { list-style: none; margin: 0; padding: 0; max-width: var(--width-read); }
.status-list li { padding: var(--space-4) 0; border-top: var(--border-width) solid var(--color-rule); }
.status-list li:last-child { border-bottom: var(--border-width) solid var(--color-rule); }
.status-word { display: block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-1); }

/* Numbered how it works sequence */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 48rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--border-width) solid var(--color-rule); }
.steps li:last-child { border-bottom: var(--border-width) solid var(--color-rule); }
.steps li::before { content: counter(step); font-family: var(--font-mono); font-size: 1rem; color: var(--color-accent); border: var(--border-width) solid var(--color-accent); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
.steps h3 { margin-bottom: var(--space-1); }
.steps p { margin: 0; }

/* Figure with caption and the word Illustration */
.figure { margin: 0; max-width: 48rem; }
.figure-frame { background: var(--color-surface); border: var(--border-width) solid var(--color-rule); box-shadow: var(--shadow-card); padding: var(--space-5); }
.figure-frame svg { display: block; width: 100%; height: auto; }
.figure-frame svg * { vector-effect: non-scaling-stroke; }
.figure figcaption { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-muted); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; border: var(--border-width) solid var(--color-muted); color: var(--color-muted); padding: 0.1875rem var(--space-2); }
.figure-pause { margin-top: var(--space-3); }

/* Statement block for what HAVEN is not */
.statement { max-width: var(--width-read); border-left: var(--border-strong) solid var(--color-accent); padding: var(--space-2) 0 var(--space-2) var(--space-5); }
.statement .label { margin-bottom: var(--space-2); }
.statement p { font-family: var(--font-serif); font-size: var(--text-h3); line-height: 1.4; margin: 0; }

/* Panel with expandable sections (details and summary, works without scripts) */
.panel { max-width: 48rem; border-top: var(--border-width) solid var(--color-ink); }
.panel details { border-bottom: var(--border-width) solid var(--color-rule); }
.panel summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap-min); padding: var(--space-4) 0; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: var(--text-h3); line-height: 1.3; }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: var(--border-strong) solid var(--color-accent); border-bottom: var(--border-strong) solid var(--color-accent); transform: rotate(45deg); transition: transform var(--motion-base) var(--ease); }
.panel details[open] summary::after { transform: rotate(-135deg); }
.panel .panel-body { padding: 0 0 var(--space-5); max-width: var(--width-read); }
.panel .panel-body > :last-child { margin-bottom: 0; }

/* Buttons and links that look like buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: var(--space-3) var(--space-5); background: var(--color-accent); color: var(--color-on-accent); border: var(--border-strong) solid var(--color-accent); font: 600 1rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer; border-radius: var(--radius-0); transition: background-color var(--motion-fast) var(--ease); }
.button:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-on-accent); }
.button[disabled], .button[aria-disabled="true"] { cursor: not-allowed; opacity: 1; background: var(--color-panel); color: var(--color-muted); border-color: var(--color-field-border); }
.button-quiet { background: transparent; color: var(--color-accent); }
.button-quiet:hover { background: var(--color-panel); color: var(--color-accent-strong); border-color: var(--color-accent-strong); }

/* Form and its states */
.form { max-width: var(--width-form); }
.field { margin: 0 0 var(--space-5); }
.field label, .field .field-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.field .hint { display: block; font-size: var(--text-small); color: var(--color-muted); margin-bottom: var(--space-2); }
.field input, .field textarea { display: block; width: 100%; min-height: var(--tap-min); padding: var(--space-3); font: 1rem/1.4 var(--font-sans); color: var(--color-ink); background: var(--color-surface); border: var(--border-strong) solid var(--color-field-border); border-radius: var(--radius-0); }
.field textarea { min-height: 9rem; resize: vertical; }
.field.is-focus input, .field.is-focus textarea, .field input:focus, .field textarea:focus { border-color: var(--color-focus); outline: var(--focus-ring); outline-offset: 0; }
.field.is-error input, .field.is-error textarea { border-color: var(--color-error); background: var(--color-error-bg); }
.field .error-text { display: block; margin-top: var(--space-2); color: var(--color-error); font-weight: 600; font-size: var(--text-small); }
.required-mark { color: var(--color-muted); font-weight: 400; }
.error-summary { border: var(--border-strong) solid var(--color-error); background: var(--color-error-bg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); max-width: var(--width-form); }
.error-summary h3 { color: var(--color-error); font-size: 1.125rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: var(--space-2); }
.error-summary ul { margin: 0; padding-left: 1.25rem; }

/* Notice block */
.notice { max-width: var(--width-read); background: var(--color-notice); border-left: var(--border-strong) solid var(--color-accent); padding: var(--space-4) var(--space-5); }
.notice > :last-child { margin-bottom: 0; }
.notice.is-error { background: var(--color-error-bg); border-left-color: var(--color-error); }
.notice.is-error strong { color: var(--color-error); }
.notice.is-success { background: var(--color-success-bg); border-left-color: var(--color-success); }
.notice.is-success strong { color: var(--color-success); }

/* Card for a link to another property or page */
.door-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.door { display: block; height: 100%; padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-rule); box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none; min-height: var(--tap-min); }
.door:hover { border-color: var(--color-accent); }
.door .door-title { display: block; font-family: var(--font-serif); font-size: var(--text-h3); line-height: 1.3; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; margin-bottom: var(--space-2); }
.door .door-line { display: block; font-size: var(--text-small); color: var(--color-muted); }

/* Plain 404 */
.not-found { padding: var(--space-8) 0; }
.not-found .link-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.not-found .link-list a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* Component sheet chrome only, never shipped on a page */
.sheet-note { background: var(--color-panel); border: var(--border-width) dashed var(--color-field-border); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; font-size: var(--text-small); color: var(--color-ink); }
.sheet-title { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-4); }
.theme-scope { background: var(--color-paper); color: var(--color-ink); }
.sheet-block { padding: var(--space-6) 0; border-top: var(--border-width) solid var(--color-rule); }
.sheet-state { margin: 0 0 var(--space-6); }
.sheet-state > .sheet-title { margin-bottom: var(--space-3); }

@media (max-width: 40rem) {
  .steps li { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
  .figure-frame { padding: var(--space-3); }
  .panel summary { font-size: 1.1875rem; }
  .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}