:root {
  --ink: #1b2430;
  --muted: #5f6b7a;
  --faint: #8a94a3;
  --rule: #dde2e8;
  --paper: #ffffff;
  --page: #f4f5f7;
  --navy: #1c3557;
  --navy-dark: #142740;
  --question: #e9edf2;
  --ok: #2d6a3e;
  --warn: #8a5b0a;
  --bad: #9a2a2a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-family: var(--sans);
  font-size: 15px;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
a { color: var(--navy); }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.topbar { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 2; }
.topbar-inner {
  max-width: 860px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-weight: 600; letter-spacing: 0.01em; }
.edition { font-size: 0.8rem; color: #c3cdd9; }
.link-button {
  white-space: nowrap; flex-shrink: 0;
  background: none; border: 1px solid #4d6584; color: #fff; border-radius: 3px;
  padding: 4px 12px; font-size: 0.85rem; cursor: pointer;
}
.link-button:hover { border-color: #fff; }

/* Conversation */
.thread { max-width: 860px; margin: 0 auto; padding: 28px 20px 170px; }

.intro { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 24px 28px; }
.intro h1 { font-family: var(--serif); font-weight: normal; font-size: 1.5rem; margin: 0 0 10px; }
.intro h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin: 22px 0 6px; font-weight: 600;
}
.intro p { margin: 0; color: #344050; }
.samples { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.samples li { border-bottom: 1px solid var(--rule); }
.sample {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 10px 2px; color: var(--navy);
}
.sample:hover { background: var(--page); }
.fineprint { margin-top: 18px !important; font-size: 0.8rem; color: var(--faint) !important; }

.turn { margin-bottom: 26px; }
.question {
  margin-left: auto; max-width: 78%; width: fit-content;
  background: var(--question); border-radius: 4px; padding: 10px 14px; white-space: pre-wrap;
}
.answer {
  margin-top: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
  padding: 18px 22px;
}

.answer-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 12px;
}
.verdict { font-weight: 600; font-size: 0.92rem; }
.verdict.answered { color: var(--ok); }
.verdict.partial { color: var(--warn); }
.verdict.refused, .verdict.error { color: var(--bad); }
.verdict.working { color: var(--muted); font-weight: normal; }

.confidence { font-size: 0.85rem; color: var(--muted); }
.confidence summary { cursor: pointer; list-style: none; }
.confidence summary::-webkit-details-marker { display: none; }
.confidence summary strong.high { color: var(--ok); }
.confidence summary strong.medium { color: var(--warn); }
.confidence summary strong.low { color: var(--bad); }
.confidence table { margin-top: 6px; border-collapse: collapse; font-size: 0.82rem; }
.confidence td { padding: 1px 12px 1px 0; }
.confidence p { margin: 4px 0 0; font-size: 0.78rem; color: var(--faint); max-width: 320px; }

.progress { color: var(--muted); font-size: 0.88rem; margin: 0 0 8px; }
.progress::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.points { margin: 0; padding-left: 22px; font-family: var(--serif); font-size: 1.02rem; }
.points li { margin-bottom: 14px; padding-left: 4px; }
.points li p { margin: 0; }
.points.draft { color: #4a5563; }
.cite { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.cite a { text-decoration: none; border-bottom: 1px solid #b7c3d3; }
.cite a:hover { border-bottom-color: var(--navy); }
.cite .sep { color: var(--faint); margin: 0 6px; }
.quote {
  margin: 6px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--rule);
  font-size: 0.9rem; color: var(--muted); font-style: italic;
}
.unverified p:first-child { color: var(--muted); }
.flag { font-family: var(--sans); font-size: 0.8rem; color: var(--bad); margin-top: 4px; }

.notice { font-size: 0.88rem; padding: 8px 12px; border-left: 3px solid; margin: 10px 0; background: #fafbfc; }
.notice.gap { border-color: #c9a24a; }
.notice.warn { border-color: var(--bad); color: var(--bad); }
.notice p { margin: 0; }
.notice strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; color: var(--muted); }
.message { margin: 0 0 8px; }

.section-title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  font-weight: 600; margin: 20px 0 6px;
}
.refs { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.refs th, .refs td { border-top: 1px solid var(--rule); padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.refs th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.refs td:first-child { width: 28px; color: var(--muted); }
.refs td:last-child { width: 36%; }
.refs .doc { color: var(--faint); font-size: 0.8rem; }

.source { border-top: 1px solid var(--rule); padding: 7px 0; font-size: 0.88rem; }
.source summary { cursor: pointer; }
.source summary .heading { color: var(--muted); }
.source p { white-space: pre-wrap; margin: 6px 0 0; font-family: var(--serif); font-size: 0.92rem; }
.amended { color: var(--faint); font-size: 0.8rem; }

.meta { margin: 16px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 0.78rem; }
.error-text { color: var(--bad); }

/* Composer */
.composer {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--page);
  border-top: 1px solid var(--rule); padding: 12px 20px 10px;
}
.composer-inner { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
textarea {
  flex: 1; font: inherit; padding: 10px 12px; border: 1px solid #c4ccd6; border-radius: 4px;
  background: #fff; resize: none; max-height: 180px; line-height: 1.45;
}
textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
#submit {
  padding: 10px 22px; border: 0; border-radius: 4px; background: var(--navy); color: #fff;
  font-weight: 600; cursor: pointer;
}
#submit:hover { background: var(--navy-dark); }
#submit:disabled { opacity: 0.55; cursor: default; }
.composer-hint { max-width: 820px; margin: 6px auto 0; font-size: 0.75rem; color: var(--faint); }

@media (max-width: 640px) {
  :root { font-size: 14px; }
  .thread { padding: 16px 12px 160px; }
  .intro { padding: 18px 16px; }
  .answer { padding: 14px 14px; }
  .question { max-width: 92%; }
  .composer { padding: 10px 12px 8px; }
  .composer-hint { display: none; }
  .topbar-inner { padding: 8px 12px; }
  .edition { font-size: 0.74rem; }
  .refs thead { display: none; }
  .refs tr, .refs td { display: block; width: auto !important; }
  .refs tr { border-top: 1px solid var(--rule); padding: 6px 0; }
  .refs td { border: 0; padding: 2px 0; }
}