/* Visual language from the Google Slides template "Board meeting, geometric":
   warm grey paper, deep teal ink, rust accent, 1px ink rules in a ledger grid,
   square corners, a light serif for reading and Inter for labels. */
:root {
  --paper: #eaeaea;
  --ink: #032c3c;
  --rust: #ba351a;
  --blush: #e6c5b8;
  --stone: #e1dcd8;

  --bg: var(--paper);
  --surface: #f8f7f5;
  --surface-hover: #ffffff;
  --text: var(--ink);
  --muted: #3f5963;
  --border: rgb(3 44 60 / 0.28);
  --rule: var(--ink);
  --accent: var(--rust);
  --accent-text: #ffffff;
  --accent-soft: var(--blush);
  --mark: var(--blush);
  --user: transparent;
  --error: #9b1c1c;
  --hl: #f4e4dc;
  --hl-edge: var(--rust);
  --hero-bg: var(--ink);
  --hero-text: var(--stone);
  --hero-rule: rgb(225 220 216 / 0.55);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
/* Dark theme: follows the system unless the header toggle sets data-theme on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #011a24;
    --surface: #06394c;
    --surface-hover: #0a4a62;
    --text: #f1eeeb;
    --muted: #b9c8cd;
    --border: rgb(225 220 216 / 0.28);
    --rule: rgb(225 220 216 / 0.6);
    --accent: #e8805f;
    --accent-text: var(--ink);
    --accent-soft: rgb(230 197 184 / 0.2);
    --mark: rgb(230 197 184 / 0.32);
    --error: #f19999;
    --hl: rgb(230 197 184 / 0.13);
    --hl-edge: #e8805f;
    --hero-bg: var(--ink);
    --hero-rule: rgb(225 220 216 / 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --hl: rgb(230 197 184 / 0.13);
    --hl-edge: #e8805f;
    --bg: #011a24;
    --surface: #06394c;
    --surface-hover: #0a4a62;
    --text: #f1eeeb;
    --muted: #b9c8cd;
    --border: rgb(225 220 216 / 0.28);
    --rule: rgb(225 220 216 / 0.6);
    --accent: #e8805f;
    --accent-text: var(--ink);
    --accent-soft: rgb(230 197 184 / 0.2);
    --mark: rgb(230 197 184 / 0.32);
    --error: #f19999;
    --hero-bg: var(--ink);
    --hero-rule: rgb(225 220 216 / 0.4);
    color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: 24px; }
@media (min-width: 1100px) { .wrap { max-width: 1240px; padding-inline: 48px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header: a teal title block with a small meta line, like the template's title slide. */
header.site { background: var(--hero-bg); color: var(--hero-text); border-bottom: 1px solid var(--rule); }
header.site .wrap { padding-block: 20px 40px; }
.meta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 44px; border-bottom: 1px solid var(--hero-rule);
  font-size: 0.85rem; letter-spacing: 0.01em;
}
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--hero-rule); border-radius: 0; background: transparent; color: var(--hero-text);
  font: 500 0.8rem var(--sans); padding: 6px 12px; transition: background-color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { border-color: var(--blush); background: rgb(225 220 216 / 0.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle[hidden] { display: none; }
.meta-actions { display: flex; gap: 8px; }
.theme-toggle .moon, :root[data-theme-now="dark"] .theme-toggle .sun { display: none; }
:root[data-theme-now="dark"] .theme-toggle .moon { display: inline; }

header.site h1 {
  margin: 0 0 14px; font: 300 clamp(2.3rem, 6vw, 3.4rem)/1.08 var(--serif);
  letter-spacing: -0.01em; color: var(--hero-text);
}
.lede { margin: 0; max-width: 38em; color: var(--blush); }

main.wrap { flex: 1; padding-block: 32px 24px; display: flex; flex-direction: column; }

/* Example questions: numbered cells, like the template's summary grid. */
.hint { margin: 0 0 12px; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.examples {
  display: grid; grid-template-columns: repeat(2, 1fr); counter-reset: ex;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.examples button {
  counter-increment: ex; text-align: left; cursor: pointer;
  border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--surface); color: var(--text);
  padding: 18px 22px 22px; font: 400 1.05rem/1.4 var(--sans);
  transition: background-color 0.15s;
}
.examples button::before {
  content: counter(ex) "."; display: block; margin-bottom: 4px;
  font: 400 0.95rem var(--serif); color: var(--accent);
}
.examples button:hover, .examples button:focus-visible { background: var(--surface-hover); outline: none; }
.examples button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* Thread: each question starts with a rust arrow; a rule separates one exchange from the next. */
#thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.msg.user {
  position: relative; white-space: pre-wrap; padding: 4px 0 0 52px; margin-bottom: 18px;
  font: 300 clamp(1.4rem, 3.4vw, 1.75rem)/1.3 var(--serif);
}
.msg.user + .msg.bot { margin-bottom: 0; }
.msg.bot + .msg.user { border-top: 1px solid var(--rule); margin-top: 32px; padding-top: 32px; }
.msg.user::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 34px; height: 26px; background: var(--accent);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.msg.bot + .msg.user::before { top: calc(32px + 0.42em); }
:root {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath d='M1 14H34M24 2.5C25.5 8 29 12 34 14C29 16 25.5 20 24 25.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.msg.bot {
  margin-left: 52px; padding: 22px 26px 24px; font: 400 1.075rem/1.65 var(--serif);
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
}
.msg.bot p { margin: 0 0 12px; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.bot strong { font-weight: 600; }
.msg.bot > ul, .msg.bot > ol { margin: 0 0 12px; padding-left: 22px; }
.msg.bot > ul > li, .msg.bot > ol > li { margin-bottom: 4px; }
.msg.bot > ul > li::marker, .msg.bot > ol > li::marker { color: var(--accent); }
.msg.bot .error { color: var(--error); font-family: var(--sans); }
.cite {
  cursor: pointer; display: inline-block; min-width: 1.5em; padding: 0 5px; margin: 0 1px;
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  font: 600 0.68em/1.5 var(--sans); text-align: center; text-decoration: none; vertical-align: 2px;
  transition: background-color 0.15s, color 0.15s;
}
.cite:hover, .cite:focus-visible, .cite.is-active { background: var(--accent); color: var(--accent-text); outline: none; }
.typing { font-family: var(--sans); color: var(--muted); font-size: 0.95rem; }
/* Loading: a rust segment runs along a ruled line, like the template's rules. */
.loading { display: grid; gap: 14px; padding: 4px 0 6px; font-family: var(--sans); }
.loading-label { color: var(--accent); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; }
.loading-label::after { content: "\2026"; }
.loading-bar { position: relative; display: block; height: 1px; max-width: 420px; background: var(--rule); overflow: hidden; }
.loading-bar::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 34%; height: 3px; background: var(--accent);
  animation: ledger 1.3s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes ledger { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.cite, .sources a { scroll-margin-block: 16px 96px; }
.typing::after { content: "\2026"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.sources { margin: 22px -26px -24px; padding: 14px 26px 6px; border-top: 1px solid var(--rule); font-family: var(--sans); }
.sources summary {
  cursor: pointer; padding-bottom: 8px; color: var(--accent);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
}
.sources ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.sources li { font-size: 0.92rem; padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.sources li:last-child { border-bottom: 0; }
.sources li .n { color: var(--accent); margin-right: 8px; font-family: var(--serif); }
.sources li a { color: var(--text); text-decoration-color: var(--border); }
.sources li a:hover { text-decoration-color: var(--accent); }
.sources li .crumb { display: block; color: var(--muted); font-size: 0.8rem; margin-left: 1.7em; }

/* Ask bar: a ruled box pinned to the bottom of the window. */
form#ask {
  position: sticky; bottom: 16px; display: flex; align-items: stretch; margin-top: 32px;
  background: var(--surface); border: 1px solid var(--rule);
  box-shadow: 0 0 0 16px var(--bg);
}
#q {
  flex: 1; border: 0; resize: none; background: transparent; color: var(--text);
  font: 300 1.15rem/1.4 var(--serif); padding: 14px 18px; max-height: 200px; outline: none;
}
#q::placeholder { color: var(--muted); opacity: 0.8; }
#send {
  border: 0; border-radius: 0; background: var(--accent); color: var(--accent-text);
  font: 600 0.95rem var(--sans); letter-spacing: 0.02em; padding: 0 26px; cursor: pointer;
  transition: filter 0.15s;
}
#send:hover { filter: brightness(1.08); }
#send:disabled { opacity: 0.45; cursor: default; filter: none; }
form#ask:focus-within { border-color: var(--accent); }
/* The ask bar lines up with the answer boxes instead of spanning the full width. */
form#ask { margin-left: 52px; }
#intro:not([hidden]) ~ form#ask { margin-left: 0; }
@media (min-width: 1100px) {
  /* Same width as the answer's text column: stop at the rule before the sources column. */
  form#ask { max-width: calc(100% - 52px - 373px); }
  /* Before the first question, end on the border after the third example tile. */
  #intro:not([hidden]) ~ form#ask { max-width: 75%; }
}

/* Wide screens: answers get a reading column with their sources beside it. */
@media (min-width: 1100px) {
  header.site h1 { font-size: 4rem; }
  .examples { grid-template-columns: repeat(4, 1fr); }
  .examples button { min-height: 150px; }
  .msg.user { font-size: 2rem; }
  .msg.bot {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px;
    font-size: 1.125rem; padding: 28px 32px 30px;
  }
  .msg.bot > :not(.sources) { grid-column: 1; max-width: 46em; }
  .msg.bot > .sources {
    grid-column: 2; grid-row: 1 / span 40; align-self: stretch;
    margin: -28px -32px -30px 0; padding: 22px 28px 16px; border-top: 0; border-left: 1px solid var(--rule);
  }
}

/* The source panel docks 440px on the right; keep sources below the answer
   unless the rest of the window still fits the two-column layout. */
@media (min-width: 1100px) and (max-width: 1539px) {
  body.panel-open .msg.bot { display: block; padding: 22px 26px 24px; }
  body.panel-open .msg.bot > :not(.sources) { max-width: none; }
  body.panel-open form#ask { max-width: none; }
  body.panel-open .msg.bot > .sources {
    margin: 22px -26px -24px; padding: 14px 26px 6px; border-left: 0; border-top: 1px solid var(--rule);
  }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .meta { margin-bottom: 32px; }
  .examples { grid-template-columns: 1fr; }
  .examples button { padding: 14px 16px 16px; }
  .msg.user { padding-left: 40px; }
  .msg.user::before { width: 28px; height: 22px; }
  .msg.bot { margin-left: 0; padding: 18px 16px 20px; }
  .sources { margin-inline: -16px; padding-inline: 16px; }
  #q { padding: 12px 14px; }
  #send { padding: 0 18px; }
  form#ask { margin-left: 0; }
}

/* ---- source panel ---- */
/* From the citation-panel branch, restyled to the template: a teal title
   header with a rust top rule and its own light edge, so it never merges with
   the page header beside it; the passage reads in the serif. */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cite.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.sources a.is-active { font-weight: 600; text-decoration-color: var(--accent); }

.panel {
  position: fixed; z-index: 20; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); border: 1px solid var(--rule);
}
.panel[hidden], .panel-backdrop[hidden] { display: none; }
.panel-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 16px 24px;
  background: var(--hero-bg); color: var(--hero-text);
  border-top: 3px solid var(--accent); border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--hero-rule); margin-left: -1px;
}
.panel-id { flex: 1; min-width: 0; }
.panel-head h2 {
  margin: 0; font: 300 1.45rem/1.25 var(--serif); color: var(--hero-text); overflow-wrap: anywhere;
}
.panel-head h2:focus { outline: none; }
.panel-head h2:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; }
.panel-n { display: block; margin-bottom: 4px; color: var(--blush); font: 600 0.8rem var(--sans); letter-spacing: 0.01em; }
.panel-close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -2px -2px 0 0;
  border: 1px solid var(--hero-rule); background: transparent; color: var(--hero-text); cursor: pointer;
}
.panel-close:hover { border-color: var(--blush); color: var(--blush); }
.panel-close:focus-visible { outline-color: var(--blush); }
.panel-meta {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 0.82rem; color: rgb(225 220 216 / 0.8);
}
.panel-meta .tag { border: 1px solid var(--blush); color: var(--blush); padding: 0 8px; font-weight: 600; }
.panel-meta .crumb { flex-basis: 100%; overflow-wrap: anywhere; }
.panel-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; }
.panel-claim { padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); font: 400 0.95rem/1.5 var(--serif); }
.panel-claim .claim-label { display: block; color: var(--accent); font: 600 0.8rem var(--sans); letter-spacing: 0.01em; margin-bottom: 4px; }
.panel-claim q { display: block; quotes: none; }
.panel-claim q + q { margin-top: 6px; }
.panel-note { margin: 0 0 14px; font-size: 0.88rem; color: var(--muted); border-left: 3px solid var(--rule); padding-left: 10px; }
.panel-body { margin-top: 18px; font: 400 1rem/1.65 var(--serif); overflow-wrap: anywhere; }
.panel-body p, .panel-body ul { margin: 0 0 12px; }
.panel-body ul { padding-left: 20px; }
.panel-body li > div { margin-bottom: 6px; }
.panel-body h3, .panel-body h4, .panel-body h5, .panel-body h6 { font: 600 1rem/1.4 var(--sans); margin: 18px 0 8px; }
.panel-body .tbl { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--rule); }
.panel-body table { border-collapse: collapse; width: 100%; font: 0.86rem/1.45 var(--sans); }
.panel-body th, .panel-body td { text-align: left; vertical-align: top; padding: 6px 9px; border-bottom: 1px solid var(--border); overflow-wrap: normal; }
.panel-body th { background: var(--bg); font-weight: 600; }
.panel-body .hl { background: var(--hl); border-left: 3px solid var(--hl-edge); margin-left: -11px; padding-left: 8px; }
.panel-body tr.hl { border-left: 0; }
.panel-body tr.hl > :first-child { border-left: 3px solid var(--hl-edge); }
.panel-body mark { background: var(--mark); color: inherit; font-weight: 600; padding: 0 2px; }
.panel-foot { border-top: 1px solid var(--rule); padding: 14px 24px; font-size: 0.9rem; }
.panel-foot a { font-weight: 600; }
.panel-foot a::after { content: " \2197"; }
.panel-backdrop { position: fixed; inset: 0; z-index: 19; background: rgb(1 26 36 / 0.55); }

@media (min-width: 960px) {
  body.panel-open { padding-right: 440px; }
  .panel { top: 0; right: 0; bottom: 0; width: 440px; border-width: 0 0 0 1px; }
}
@media (max-width: 959.98px) {
  .panel { left: 0; right: 0; bottom: 0; height: min(88vh, 100% - 24px); border-bottom: 0; }
  .panel { animation: sheet-in 0.18s ease-out; }
  body.panel-open { overflow: hidden; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .panel, .typing::after { animation: none; }
  .loading-bar::after { animation: none; width: 100%; opacity: 0.6; }
}