:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #5b6977;
  --paper: #f7f3eb;
  --panel: #fffdf8;
  --line: #d8d2c7;
  --accent: #176b5b;
  --accent-dark: #0f4b40;
  --accent-soft: #dff2ec;
  --warning: #91520d;
  --warning-soft: #fff1d6;
  --note: #315b89;
  --note-soft: #eaf3ff;
  --shadow: 0 16px 40px rgb(45 38 28 / 10%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 0%, rgb(23 107 91 / 10%), transparent 28rem),
    var(--paper);
  line-height: 1.55;
}

a { color: var(--accent-dark); }
a:hover { text-decoration-thickness: 2px; }

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .9em;
}

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: -.03em;
  text-decoration: none;
}

.status-pill,
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 750;
}

.status-pill {
  padding: .35rem .7rem;
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.hero { padding: 5rem 0 3rem; }

.eyebrow {
  margin: 0 0 .6rem;
  color: var(--accent-dark);
  font-size: .77rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 900px;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 7vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.065em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

h3 {
  margin-bottom: .8rem;
  font-size: 1.15rem;
}

.lede {
  max-width: 760px;
  color: #394653;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.boundary {
  max-width: 920px;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--accent);
  background: rgb(255 253 248 / 72%);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr);
  gap: 1rem;
  align-items: start;
}

.input-panel,
.method-panel,
.result,
.sources {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.input-panel,
.method-panel { padding: clamp(1rem, 3vw, 1.7rem); }

.field-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}

.field-heading label,
.select-label { font-weight: 800; }

.field-heading span,
.field-help,
.privacy-line,
.parse-report,
.source-note { color: var(--muted); font-size: .88rem; }

textarea,
select,
button { font: inherit; }

textarea,
select {
  width: 100%;
  border: 1px solid #b9b1a5;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
}

textarea {
  min-height: 350px;
  padding: 1rem;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .92rem;
  line-height: 1.5;
  tab-size: 2;
}

select { margin-top: .45rem; padding: .7rem .8rem; }

textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid #f2a93b;
  outline-offset: 2px;
}

.select-label { display: block; margin-top: 1rem; }
.field-help { margin: .45rem 0 0; }
.input-error { min-height: 1.5rem; margin: .7rem 0 0; color: #a62f24; font-weight: 750; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }

.button {
  min-height: 44px;
  padding: .68rem 1rem;
  border: 1px solid #aba398;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-weight: 760;
}

.button:hover { border-color: var(--ink); }
.button--primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.button--primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button--quiet { color: var(--muted); background: transparent; }
.privacy-line { margin: .85rem 0 0; }

.method-panel { position: sticky; top: 1rem; }
.method-panel ol { padding-left: 1.3rem; }
.method-panel li + li { margin-top: .65rem; }
.method-panel p:last-child { margin-bottom: 0; color: var(--muted); }

.result,
.sources { margin-top: 1rem; padding: clamp(1rem, 3vw, 2rem); }

.result:focus { outline: none; }
.result__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.result__header h2 { margin-bottom: 0; }

.result-state {
  max-width: 280px;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  text-align: right;
}

.result-state[data-state="REVIEW_NEEDED"] { color: #713c00; background: var(--warning-soft); }
.result-state[data-state="NO_HEADINGS_OBSERVED"] { color: var(--note); background: var(--note-soft); }

.summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: .65rem;
  margin-top: 1.3rem;
}

.metric { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.metric__label { display: block; color: var(--muted); font-size: .78rem; }
.metric__value { display: block; margin-top: .15rem; font-size: 1.55rem; line-height: 1; }
.parse-report { margin: .8rem 0 0; }

.result-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1.6rem;
}

.issue-list,
.outline-list { padding: 0; margin: 0; list-style: none; }
.issue-list { display: grid; gap: .6rem; }

.issue {
  padding: .8rem;
  border-left: 4px solid var(--warning);
  border-radius: 8px;
  background: var(--warning-soft);
}

.issue--note { border-color: var(--note); background: var(--note-soft); }
.issue__title { display: block; }
.issue__detail { margin: .3rem 0 .5rem; color: #4c4338; font-size: .9rem; }
.issue__code { color: var(--muted); font-size: .72rem; }

.outline-list { display: grid; gap: .55rem; }
.outline-item {
  margin-left: var(--indent, 0);
  padding: .75rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.outline-item__top { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.outline-item__index { color: var(--muted); font-size: .78rem; }
.outline-item__level { color: var(--accent-dark); font-size: .78rem; font-weight: 800; }
.pill { padding: .1rem .45rem; color: #725000; background: #fff0bd; }
.outline-item__text { display: block; margin-top: .25rem; }
.outline-item__text--empty { color: #a62f24; }
.outline-item__snippet { display: block; overflow-wrap: anywhere; margin-top: .35rem; color: var(--muted); font-size: .72rem; }

.unknown-card { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #f0eee8; }
.unknown-card h3 { margin-bottom: .5rem; }
.unknown-card ul { margin-bottom: 0; padding-left: 1.2rem; }

.sources { margin-bottom: 1rem; }
.sources ul { padding-left: 1.2rem; }
.sources li + li { margin-top: .6rem; }

.empty-state { color: var(--muted); }

footer { padding: 1rem 0 2.5rem; color: var(--muted); font-size: .85rem; }

@media (max-width: 820px) {
  .hero { padding-top: 3.5rem; }
  .workspace,
  .result-grid { grid-template-columns: 1fr; }
  .method-panel { position: static; }
  .summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .site-header { align-items: flex-start; padding-top: .8rem; }
  .status-pill { max-width: 150px; text-align: center; }
  h1 { font-size: 2.55rem; }
  .hero { padding-top: 2.5rem; }
  .result__header { display: block; }
  .result-state { display: inline-block; max-width: none; margin-top: .8rem; text-align: left; }
  .summary { grid-template-columns: 1fr 1fr; }
  .field-heading { display: block; }
  .field-heading span { display: block; margin-top: .15rem; }
  .actions .button { width: 100%; }
  .outline-item { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.consent-panel{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft)}
.consent-panel h2{font-size:1.1rem;margin-bottom:.45rem}.consent-panel p{font-size:.9rem}.consent-panel output{display:block;margin-top:.7rem}.support-nav{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 2rem}.support-page{max-width:760px;padding:5rem 0}.support-page h1{font-size:clamp(2.4rem,6vw,4.6rem)}