:root {
  color-scheme: light dark;
  --bg: #f4f1e9;
  --surface: #fbfaf6;
  --surface-strong: #ebe6da;
  --fg: #19211f;
  --muted: #5b6561;
  --line: #c9c5ba;
  --line-strong: #808884;
  --accent: #a6432c;
  --accent-strong: #7e2f20;
  --accent-soft: #efddd5;
  --button-ink: #ffffff;
  --good: #2f674c;
  --good-soft: #dfeadf;
  --bad: #96372f;
  --bad-soft: #f2deda;
  --warn: #77571c;
  --warn-soft: #eee5cf;
  --focus: #7e2f20;
  --content: 72rem;
  --reading: 47rem;
  --wide: 61rem;
  --space-1: .375rem;
  --space-2: .625rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5.5rem;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111513;
    --surface: #171c19;
    --surface-strong: #222925;
    --fg: #edf1ee;
    --muted: #abb4af;
    --line: #39423d;
    --line-strong: #68736d;
    --accent: #e57d5a;
    --accent-strong: #f09a7e;
    --accent-soft: #38241d;
    --button-ink: #161b18;
    --good: #86c19d;
    --good-soft: #1c3025;
    --bad: #ef9289;
    --bad-soft: #37211f;
    --warn: #ddbd75;
    --warn-soft: #342d1e;
    --focus: #f09a7e;
  }
}

* { box-sizing: border-box; }
html { min-width: 20rem; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { min-height: 2.75rem; }
button, summary, input[type="file"] { touch-action: manipulation; }

.site-header {
  border-top: .3rem solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.header-inner {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
  padding: 1.1rem 0 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: 1.1rem;
}
.brand { margin: 0; line-height: 1; }
.brand a {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: .85rem;
  color: inherit;
  text-decoration: none;
}
.brand-name {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.035em;
}
.brand-method {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--muted);
}
#account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: .86rem;
}
#account[hidden] { display: none; }
#account button { margin: 0; min-height: 2.25rem; padding: .35rem .7rem; }

.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line);
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .7rem;
  min-height: 3.55rem;
  padding: 1rem 1.15rem .9rem 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
}
.steps li + li { padding-left: 1.15rem; }
.steps li:last-child { border-right: 0; }
.steps li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: transparent;
}
.step-number {
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.step-name {
  font-size: .94rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.steps li[data-step="check"] .step-name { font-weight: 760; }
.steps li.done { color: var(--fg); }
.steps li.done .step-number { color: var(--good); }
.steps li.current { color: var(--fg); }
.steps li.current .step-number { color: var(--accent); }
.steps li.current::after { background: var(--accent); }

main {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
  padding: clamp(2.8rem, 7vw, 5.8rem) 0 6rem;
}
main > section,
main > form {
  width: min(100%, var(--reading));
  margin: 0;
}
#result, #develop { width: min(100%, var(--wide)); }
#signin { width: min(100%, 32rem); }

h2, h3, legend { text-wrap: balance; }
h2 {
  max-width: 20ch;
  margin: 0 0 1.15rem;
  font-size: clamp(2.25rem, 5.6vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 720;
}
h3 {
  margin: 2.75rem 0 .8rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 680;
}
h3 small {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .015em;
  color: var(--muted);
  font-weight: 500;
}
p { max-width: 67ch; margin: 0 0 1.15rem; }
ul { padding-left: 1.25rem; }
li + li { margin-top: .35rem; }
strong { font-weight: 700; }
a { color: var(--accent-strong); text-underline-offset: .18em; }

#start > h2,
#signin > h2,
#intake > h2,
#researching > h2,
#issued > h2,
#build > h2 { margin-bottom: 1.25rem; }
#start > h2::before,
#signin > h2::before,
#intake > h2::before,
#researching > h2::before,
#result > h2::before,
#develop > h2::before,
#pay > h2::before,
#issued > h2::before,
#build > h2::before {
  display: block;
  width: 2.7rem;
  height: .22rem;
  margin-bottom: 1.15rem;
  background: var(--accent);
  content: "";
}

#status, #error {
  width: min(100%, var(--reading));
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--line-strong);
  background: var(--surface);
}
#status { color: var(--muted); }
#error { color: var(--bad); border-color: var(--bad); font-weight: 650; }

button {
  appearance: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  background: var(--accent);
  color: var(--button-ink);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -.008em;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
button:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
button.secondary:hover:not(:disabled) { background: var(--surface-strong); color: var(--fg); border-color: var(--fg); }
button.linkish {
  min-height: 2.75rem;
  padding: .3rem 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: .22em;
}
button.linkish:hover:not(:disabled) { background: transparent; color: var(--fg); }
.back-action { margin-top: var(--space-2); }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin: 1.5rem 0;
}
#start > .choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
#start > .choice button {
  min-height: 7.25rem;
  padding: 1.3rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  font-size: 1.08rem;
}
#start > .choice button:last-child { border-right: 0; }
#start > .choice button::after {
  display: block;
  margin-top: .75rem;
  color: var(--accent);
  content: "→";
  font-size: 1.3rem;
  font-weight: 500;
}
#start > .choice button:hover { background: var(--accent-soft); color: var(--fg); }

label {
  display: block;
  margin: 1.05rem 0;
  color: var(--fg);
  font-size: .92rem;
  font-weight: 650;
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .72rem .78rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-weight: 450;
  line-height: 1.45;
}
textarea { min-height: 6rem; resize: vertical; }
select { cursor: pointer; }
input[type="checkbox"] {
  display: inline-block;
  width: 1.15rem;
  min-height: 1.15rem;
  margin: 0 .55rem 0 0;
  vertical-align: -.16rem;
  accent-color: var(--accent);
}
input[type="file"] {
  padding: .6rem 0;
  border: 0;
  background: transparent;
}
::placeholder { color: var(--muted); opacity: .88; }

fieldset {
  min-width: 0;
  margin: 3rem 0 0;
  padding: 1.2rem 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
}
legend {
  padding: 0 1rem 0 0;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 700;
}
.hint {
  margin: .3rem 0 1rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
  font-weight: 450;
}

.row {
  margin: 1rem 0;
  padding: .5rem 0 .5rem 1.15rem;
  border: 0;
  border-left: 2px solid var(--line);
}
.row:focus-within { border-left-color: var(--accent); }
#outcomes .row,
#constraints .row { margin-bottom: 1.5rem; }

.verdict {
  margin: 1.7rem 0 2.25rem;
  padding: 1.25rem 1.4rem;
  border: 0;
  border-left: 4px solid var(--muted);
  border-radius: 0;
  background: var(--surface-strong);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 720;
}
.verdict.good { border-color: var(--good); background: var(--good-soft); }
.verdict.bad { border-color: var(--bad); background: var(--bad-soft); }
.verdict.unsure { border-color: var(--warn); background: var(--warn-soft); }
.status-supported { color: var(--good); font-weight: 680; }
.status-contradicted, .status-conflicted { color: var(--bad); font-weight: 680; }
.status-uncertain, .status-untested { color: var(--warn); font-weight: 680; }
.warn { color: var(--warn); }

.table-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--line-strong) transparent;
}
#claims {
  width: 100%;
  margin: .7rem 0 2rem;
  border-collapse: collapse;
  font-size: .93rem;
}
th, td {
  padding: .85rem .7rem .85rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-weight: 750;
}
th + th, td + td { padding-left: .8rem; }

#decide, #decided, #approve-box, #build-status {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--fg);
}
#decide h3, #decided h3 { margin-top: 0; }
.downloads { display: flex; flex-wrap: wrap; gap: .65rem; }
.downloads button { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.downloads button:hover { background: var(--surface-strong); color: var(--fg); border-color: var(--fg); }

.chat {
  max-height: 24rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 1rem 0;
  padding: .25rem .15rem .25rem 0;
  scrollbar-color: var(--line-strong) transparent;
}
.chat:empty { display: none; }
.msg {
  max-width: min(88%, 38rem);
  padding: .8rem .95rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  line-height: 1.5;
}
.msg.customer {
  align-self: flex-end;
  background: var(--fg);
  color: var(--bg);
}
.msg.assistant {
  align-self: flex-start;
  border-left: 3px solid var(--accent);
  background: var(--surface-strong);
}
.proposal {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: var(--surface);
}

.work { list-style: none; margin: 1rem 0 3.5rem; padding: 0; border-top: 1px solid var(--line); }
.work li { margin: 0; }
.work button {
  position: relative;
  width: 100%;
  min-height: 4.25rem;
  padding: 1rem 2.25rem 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
}
.work button::after {
  content: "→";
  position: absolute;
  right: .2rem;
  top: 50%;
  color: var(--accent);
  transform: translateY(-50%);
}
.work button:hover { background: transparent; color: var(--accent-strong); }
.work .meta { margin-top: .2rem; color: var(--muted); font-size: .84rem; font-weight: 450; }

#work-box > h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -.035em;
}
#work-box > h2::before { display: none; }

details {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 650;
}
summary::after { content: "+"; color: var(--accent); font-size: 1.25rem; }
details[open] summary::after { content: "−"; }
details > p { margin-top: .65rem; color: var(--muted); }

.busy { position: relative; padding-left: 1.1rem; }
.busy::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--accent);
}
.blockers li { color: var(--warn); }
pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--surface-strong);
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .84rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: .55rem 1.25rem;
  margin: 1.25rem 0;
}
dt { color: var(--muted); }
dd { margin: 0; font-weight: 650; }

.pay-lines { list-style: none; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--line); }
.pay-lines li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.pay-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
  padding-top: .9rem;
  border-top: 2px solid var(--fg);
  font-size: 1.15rem;
}

@media (max-width: 47.99rem) {
  .header-inner, main { width: min(calc(100% - 1.5rem), var(--content)); }
  .topbar { align-items: center; }
  .brand a { grid-template-columns: 1fr; gap: .28rem; }
  .brand-method { font-size: .68rem; }
  #account { align-items: flex-end; flex-direction: column; gap: .25rem; text-align: right; }
  .steps li { grid-template-columns: 1fr; gap: .1rem; min-height: 3.8rem; padding: .85rem .55rem .72rem 0; }
  .steps li + li { padding-left: .7rem; }
  .step-number { font-size: .62rem; }
  .step-name { font-size: .82rem; }
  main { padding-top: 2.8rem; padding-bottom: 4rem; }
  h2 { font-size: clamp(2.15rem, 12vw, 3.35rem); }
  #start > .choice { grid-template-columns: 1fr; }
  #start > .choice button { min-height: 5.5rem; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  #start > .choice button:last-child { border-bottom: 0; }
  .choice { gap: .6rem; }
  .choice > button { flex: 1 1 10rem; }
  #claims { min-width: 42rem; white-space: normal; }
  .downloads { align-items: stretch; flex-direction: column; }
  .downloads button { width: 100%; }
  dl { grid-template-columns: 1fr; gap: .15rem; }
  dd { margin-bottom: .7rem; }
}

@media (min-width: 48rem) and (max-width: 75rem) {
  .header-inner, main { width: min(calc(100% - 3rem), var(--content)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
