/* ─────────────────────────────────────────────────────────────────────────
   Community Compass — design tokens + base
   Warm, community-first: parchment bg, terracotta accent, forest secondary.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Type */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-ui: "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Warm parchment palette */
  --bg: #f6f1e7;
  --bg-2: #efe7d4;
  --surface: #fbf8f1;
  --surface-2: #ffffff;
  --ink: #1f1a14;
  --ink-2: #3d342a;
  --mute: #74695a;
  --mute-2: #968974;
  --hairline: #e3d9c2;
  --hairline-2: #d4c7a9;

  /* Accents */
  --accent: #c25e3a;        /* terracotta — compass needle */
  --accent-ink: #8a3f23;
  --accent-soft: #f4d9c8;
  --secondary: #2d5d4f;     /* forest — community */
  --secondary-soft: #d6e5dd;
  --gold: #c89b5a;          /* warm gold — premium / pro */
  --danger: #b04a3a;
  --good: #4f7d4f;

  /* Shadows / radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(31,26,20,.04), 0 1px 0 rgba(31,26,20,.03);
  --shadow-md: 0 1px 2px rgba(31,26,20,.04), 0 8px 24px -12px rgba(31,26,20,.12);
  --shadow-lg: 0 1px 2px rgba(31,26,20,.05), 0 24px 60px -28px rgba(31,26,20,.22);
}

/* Dark mode */
[data-theme="dark"]{
  --bg: #16130f;
  --bg-2: #1d1915;
  --surface: #1f1b16;
  --surface-2: #25201a;
  --ink: #f0e9da;
  --ink-2: #d5cab3;
  --mute: #a59880;
  --mute-2: #7a6f5a;
  --hairline: #322b22;
  --hairline-2: #443a2c;
  --accent-soft: #3a2418;
  --secondary-soft: #1d2f28;
}

/* Palette variants */
[data-palette="forest"]{
  --accent: #2d5d4f;
  --accent-ink: #1a3a30;
  --accent-soft: #d6e5dd;
  --secondary: #c25e3a;
  --secondary-soft: #f4d9c8;
}
[data-palette="ink"]{
  --accent: #1f1a14;
  --accent-ink: #000;
  --accent-soft: #e3d9c2;
  --secondary: #c25e3a;
  --secondary-soft: #f4d9c8;
}
[data-palette="dusk"]{
  --accent: #6b4c8a;
  --accent-ink: #4a2f63;
  --accent-soft: #e0d3ee;
  --secondary: #c89b5a;
  --secondary-soft: #f0e2c6;
}

/* Type pairing variants */
[data-fontpair="serif-only"]{
  --font-display: "Source Serif 4", "Newsreader", Georgia, serif;
  --font-ui: "Source Serif 4", "Newsreader", Georgia, serif;
}
[data-fontpair="sans-only"]{
  --font-display: "Inter Tight", "Geist", system-ui, sans-serif;
  --font-ui: "Geist", "Inter Tight", system-ui, sans-serif;
}

/* ─── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* Display headings use the serif */
.display, h1.display, h2.display, h3.display{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mono { font-family: var(--font-mono); }

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app{
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100%;
  background: var(--bg);
}
.app--noside{ grid-template-columns: 1fr; }

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
.side{
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  min-height: 0;
}
.side__brand{
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.side__brand-text{
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.side__brand-text small{
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 4px;
  font-weight: 500;
}

.side__group{ margin-top: 18px; }
.side__group-label{
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-2);
  font-weight: 600;
  padding: 0 8px 6px;
}
.side__item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  position: relative;
}
.side__item:hover{ background: var(--bg-2); color: var(--ink); }
.side__item--active{
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.side__item--active::before{
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.side__item-ico{
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: currentColor; opacity: .85;
  flex: none;
}
.side__item-badge{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--bg-2);
  color: var(--mute);
  padding: 1px 6px;
  border-radius: 999px;
}
.side__item--active .side__item-badge{ background: rgba(194,94,58,.18); color: var(--accent-ink); }

.side__foot{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.side__user{
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
}
.side__user:hover{ background: var(--bg-2); }
.side__user-name{ font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.side__user-role{ font-size: 11.5px; color: var(--mute); margin-top: 2px; }

/* ─── Top bar ───────────────────────────────────────────────────────────── */
.top{
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(8px);
}
.top__crumbs{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink);
}
.top__crumbs em{ font-style: italic; color: var(--mute); font-weight: 400; }
.top__sub{
  margin-left: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--mute);
  letter-spacing: 0;
}
.top__spacer{ flex: 1; }
.top__role{
  display: flex; align-items: center; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  font-size: 12.5px;
}
.top__role button{
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--mute);
  font-weight: 500;
}
.top__role button.is-active{
  background: var(--ink);
  color: var(--surface);
}
[data-theme="dark"] .top__role button.is-active{ background: var(--accent); color: #fff; }

/* ─── Main content ──────────────────────────────────────────────────────── */
.main{
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.scroll{
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 60px;
}
.scroll--tight { padding: 0; }

.row { display: flex; gap: 12px; align-items: center; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.grid { display: grid; gap: 16px; }

/* ─── Card ──────────────────────────────────────────────────────────────── */
.card{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card--pad-lg{ padding: 24px; }
.card--feature{ background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.card__hd{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card__title{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.card__title--display{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}
.card__action{
  font-size: 12.5px; color: var(--accent-ink); font-weight: 600;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: transform .04s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(0.5px); }
.btn--primary{
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
[data-theme="dark"] .btn--primary{ background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover{ background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--accent{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--accent:hover{ background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-2);
}
.btn--ghost:hover{ background: var(--surface); border-color: var(--mute-2); }
.btn--quiet{ color: var(--mute); }
.btn--quiet:hover{ color: var(--ink); background: var(--bg-2); }
.btn--sm{ padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn--lg{ padding: 12px 22px; font-size: 15px; }
.btn--block{ width: 100%; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; }

/* ─── Inputs ───────────────────────────────────────────────────────────── */
.field{ display: flex; flex-direction: column; gap: 6px; }
.field__label{
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.field__hint{ font-size: 12px; color: var(--mute); }
.input, .textarea, .select{
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  font-family: var(--font-ui);
}
.input:focus, .textarea:focus, .select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea{ resize: vertical; min-height: 84px; line-height: 1.45; }

/* ─── Pills / badges ────────────────────────────────────────────────────── */
.pill{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--mute);
  letter-spacing: 0.02em;
}
.pill--accent{ background: var(--accent-soft); color: var(--accent-ink); }
.pill--green { background: var(--secondary-soft); color: var(--secondary); }
.pill--gold{ background: #f3e4c4; color: #7c5a1d; }
.pill--ghost{ background: transparent; border: 1px solid var(--hairline-2); color: var(--mute); }
.pill__dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

/* ─── Tables ────────────────────────────────────────────────────────────── */
.table{
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
.table th{
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.table td{
  padding: 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tr:last-child td{ border-bottom: 0; }
.table tr:hover td{ background: var(--bg-2); }
.table .mono{ font-size: 12.5px; }

/* ─── Logo (compass rose) ───────────────────────────────────────────────── */
.logo{
  width: 28px; height: 28px;
  position: relative;
  display: inline-block;
  flex: none;
}
.logo svg{ width: 100%; height: 100%; display: block; }
.logo--lg{ width: 56px; height: 56px; }
.logo--xl{ width: 84px; height: 84px; }

/* ─── Misc ──────────────────────────────────────────────────────────────── */
.divider{ height: 1px; background: var(--hairline); border: 0; margin: 14px 0; }
.divider--dotted{ background: none; border-top: 1px dashed var(--hairline-2); }
.text-mute{ color: var(--mute); }
.text-sm{ font-size: 12.5px; }
.text-xs{ font-size: 11.5px; }
.text-display{ font-family: var(--font-display); }
.text-mono{ font-family: var(--font-mono); }
.tabnum{ font-variant-numeric: tabular-nums; }

.kbd{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--hairline-2);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--mute);
}

/* ─── Striped image placeholder ─────────────────────────────────────────── */
.placeholder{
  background:
    repeating-linear-gradient(135deg,
      var(--bg-2) 0 10px,
      transparent 10px 20px),
    var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 12px;
}

/* ─── Auth screen ───────────────────────────────────────────────────────── */
.auth{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 100%;
  background: var(--bg);
}
.auth__hero{
  position: relative;
  background: var(--ink);
  color: #f0e9da;
  padding: 56px 56px 40px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.auth__hero::after{
  content: ""; position: absolute; inset: -50% -10% auto auto;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,94,58,.25), transparent 60%);
  pointer-events: none;
}
.auth__brand{
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.auth__brand-name{
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.auth__brand-name small{
  display: block; margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,233,218,.55);
  font-weight: 500;
}
.auth__hero-body{
  margin-top: auto;
  position: relative; z-index: 1;
  max-width: 480px;
}
.auth__hero-title{
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.auth__hero-title em{ font-style: italic; color: var(--accent); }
.auth__hero-lede{
  margin-top: 18px;
  font-size: 15.5px;
  color: rgba(240,233,218,.7);
  line-height: 1.55;
  max-width: 420px;
}
.auth__hero-feats{
  margin-top: 36px;
  display: grid; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(240,233,218,.12);
}
.auth__hero-feat{
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start;
  font-size: 13.5px;
  color: rgba(240,233,218,.85);
}
.auth__hero-feat svg{ width: 18px; height: 18px; opacity: .8; }
.auth__hero-feat b{ color: #f0e9da; font-weight: 600; }

.auth__panel{
  display: grid; place-items: center;
  padding: 56px 32px;
}
.auth__card{
  width: 100%; max-width: 420px;
}
.auth__title{
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 1.1;
}
.auth__lede{
  margin-top: 8px;
  color: var(--mute);
  font-size: 14px;
}
.auth__tabs{
  display: flex; gap: 4px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 999px;
  margin: 24px 0 22px;
}
.auth__tabs button{
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
}
.auth__tabs button.is-active{
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.auth__form{ display: grid; gap: 14px; }
.auth__form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth__foot{
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
}
.auth__foot a{ color: var(--accent-ink); font-weight: 600; }
.auth__role-pick{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 6px;
}
.auth__role-pick button{
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.auth__role-pick button:hover{ border-color: var(--mute-2); }
.auth__role-pick button.is-active{
  border-color: var(--accent);
  background: var(--accent-soft);
}
.auth__role-pick-title{ font-weight: 600; font-size: 14px; }
.auth__role-pick-sub{ font-size: 12px; color: var(--mute); margin-top: 4px; }

/* ─── Chat ──────────────────────────────────────────────────────────────── */
.chat{
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.chat__stream{
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 28px 0 28px;
}
.chat__inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}
.chat__welcome{
  padding: 40px 0 24px;
  text-align: center;
}
.chat__welcome h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.chat__welcome p{
  margin-top: 10px;
  color: var(--mute);
  font-size: 14.5px;
}
.chat__suggestions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.chat__suggestion{
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  transition: border-color .12s, transform .04s;
}
.chat__suggestion:hover{ border-color: var(--accent); }
.chat__suggestion-cat{
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  margin-bottom: 6px;
}
.chat__suggestion-q{
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.msg{ margin: 0 0 22px; }
.msg__role{
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.msg__role .logo{ width: 14px; height: 14px; }
.msg__user .msg__bubble{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 80%;
}
.msg__bot .msg__bubble{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.msg__bot p{ margin: 0 0 12px; }
.msg__bot p:last-child{ margin-bottom: 0; }
.msg__bot strong{ color: var(--ink); font-weight: 600; }
.msg__cite{
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 1px 7px 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin: 0 2px;
  vertical-align: 0.5px;
}
.msg__cite:hover{ background: var(--accent); color: #fff; }
.msg__actions{
  margin-top: 10px;
  display: flex; gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--mute);
}
.msg__actions button{
  color: var(--mute);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.msg__actions button:hover{ background: var(--bg-2); color: var(--ink); }

.msg__sources{
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.msg__sources-hd{
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-2);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.msg__source{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px dashed var(--hairline);
  font-size: 13px;
}
.msg__source:first-child{ border-top: 0; padding-top: 2px; }
.msg__source-num{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
}
.msg__source-doc{ font-weight: 600; color: var(--ink); font-size: 13px; }
.msg__source-quote{ color: var(--mute); font-size: 12.5px; margin-top: 3px; font-style: italic; }
.msg__source-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }

/* ─── Chat composer ─────────────────────────────────────────────────────── */
.composer{
  padding: 12px 28px 22px;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.composer__inner{
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  padding: 10px 10px 10px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.composer__inner:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.composer textarea{
  resize: none;
  border: 0; outline: 0; background: transparent;
  padding: 10px 4px;
  font-size: 15px;
  line-height: 1.45;
  width: 100%;
  max-height: 200px;
  font-family: var(--font-ui);
}
.composer__send{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--surface);
  display: grid; place-items: center;
}
[data-theme="dark"] .composer__send{ background: var(--accent); }
.composer__send:hover{ background: var(--accent-ink); color: #fff; }
.composer__send[disabled]{ background: var(--bg-2); color: var(--mute); }
.composer__meta{
  max-width: 760px; margin: 8px auto 0;
  display: flex; gap: 12px; align-items: center;
  font-size: 11.5px;
  color: var(--mute);
}
.composer__meta .row{ gap: 8px; }

/* ─── Stat tile ─────────────────────────────────────────────────────────── */
.stat{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.stat__label{
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.stat__value{
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--ink);
  margin-top: 8px;
  display: flex; align-items: baseline; gap: 6px;
}
.stat__value .unit{
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--mute);
  font-weight: 500;
}
.stat__delta{
  margin-top: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--good);
}
.stat__delta--down{ color: var(--danger); }
.stat__spark{
  margin-top: 10px;
  height: 32px;
}

/* ─── Bylaws library ────────────────────────────────────────────────────── */
.bylaw{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: start;
}
.bylaw__ico{
  width: 44px; height: 56px;
  background:
    linear-gradient(180deg, var(--surface-2) 0 14px, transparent 14px),
    repeating-linear-gradient(180deg, var(--bg-2) 0 2px, transparent 2px 8px),
    var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  position: relative;
}
.bylaw__ico::after{
  content: ""; position: absolute; top: 0; right: 0;
  width: 12px; height: 12px;
  background: linear-gradient(225deg, var(--bg) 50%, var(--hairline-2) 50%);
  border-bottom-left-radius: 3px;
}
.bylaw__title{
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.bylaw__meta{ margin-top: 4px; font-size: 12.5px; color: var(--mute); }
.bylaw__meta .mono{ color: var(--ink-2); }

/* ─── Roster ────────────────────────────────────────────────────────────── */
.avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--secondary-soft);
  color: var(--secondary);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 12px;
  font-family: var(--font-ui);
  flex: none;
}
.avatar--lg{ width: 48px; height: 48px; font-size: 16px; }
.avatar--sm{ width: 24px; height: 24px; font-size: 10px; }
.avatar--t{ background: var(--accent-soft); color: var(--accent-ink); }
.avatar--g{ background: #e7d6b3; color: #7c5a1d; }
.avatar--b{ background: #d7e0ea; color: #2f4d6e; }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.set__nav{
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 24px;
}
.set__nav button{
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--mute);
  font-weight: 500;
}
.set__nav button.is-active{ background: var(--bg-2); color: var(--ink); }

/* ─── Token meter ───────────────────────────────────────────────────────── */
.meter{
  background: var(--bg-2);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}
.meter__bar{
  height: 100%;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
  border-radius: 3px;
  transition: width .3s ease;
}

/* ─── Banner ────────────────────────────────────────────────────────────── */
.banner{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--secondary-soft);
  color: var(--secondary);
  border-radius: var(--r-md);
  font-size: 13.5px;
  border: 1px solid color-mix(in oklab, var(--secondary) 12%, transparent);
}
.banner__ico{ flex: none; }
.banner b{ color: var(--secondary); font-weight: 600; }

/* ─── Login chooser modal ───────────────────────────────────────────────── */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(31,26,20,.4);
  display: grid; place-items: center;
  z-index: 50;
  backdrop-filter: blur(4px);
}
.modal{
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 28px;
  width: min(440px, calc(100vw - 40px));
  box-shadow: var(--shadow-lg);
}

/* ─── Empty / loading ───────────────────────────────────────────────────── */
.empty{
  text-align: center;
  padding: 48px 24px;
  color: var(--mute);
}
.empty .logo{ margin-bottom: 12px; opacity: .35; }

/* Scrollbar */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: var(--hairline-2);
  border-radius: 5px;
  border: 2px solid var(--bg);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--mute-2); border: 2px solid var(--bg); background-clip: content-box; }

/* Trend chart */
.chart{
  position: relative;
  height: 200px;
}
.chart svg{ width: 100%; height: 100%; overflow: visible; }
.chart__grid line{ stroke: var(--hairline); stroke-width: 1; }
.chart__axis text{ fill: var(--mute); font-size: 11px; font-family: var(--font-mono); }
.chart__line{ fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--secondary{ stroke: var(--secondary); stroke-dasharray: 4 4; }
.chart__area{ fill: url(#g-accent); opacity: .25; }
.chart__dot{ fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* ─── Hamburger / drawer chrome (visible only on mobile) ────────────────── */
.top__menu{
  display: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--ink);
  margin-right: -4px;
}
.top__menu:hover{ background: var(--bg-2); }
.side__close{
  display: none;
  margin-left: auto;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--mute);
}
.side__close:hover{ background: var(--bg-2); color: var(--ink); }
.side__role-mobile{ display: none; }
.side-backdrop{ display: none; }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤ 960px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
  /* ── Sidebar becomes a slide-in drawer ─────────────────────────────── */
  .app{ grid-template-columns: 1fr; }
  .side{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 84vw);
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .side--open{ transform: translateX(0); }
  .side-backdrop{
    display: block;
    position: fixed; inset: 0;
    background: rgba(31,26,20,.45);
    z-index: 65;
    backdrop-filter: blur(2px);
    animation: fadeIn .15s ease;
  }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  .side__close{ display: inline-flex; }
  .side__item--active::before{ left: -10px; }

  /* show role switcher inside the drawer instead of top bar */
  .side__role-mobile{
    display: block;
    margin: 10px 0 4px;
    padding: 12px;
    background: var(--bg-2);
    border-radius: var(--r-md);
  }
  .side__role-mobile .top__role{ display: flex; }

  /* ── Top bar ───────────────────────────────────────────────────────── */
  .top{ padding: 12px 16px; gap: 8px; }
  .top__menu{ display: inline-flex; }
  .top__crumbs{ font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top__sub{ display: none; }
  .top__role{ display: none; }  /* moves to sidebar */

  /* ── Scroll + general spacing ──────────────────────────────────────── */
  .scroll{ padding: 18px 16px 80px; }
  .card{ padding: 16px; }
  .card--pad-lg{ padding: 18px; }

  /* ── Auth screen stacks ───────────────────────────────────────────── */
  .auth{ grid-template-columns: 1fr; }
  .auth__hero{
    padding: 28px 24px 24px;
    min-height: auto;
  }
  .auth__hero-title{ font-size: 32px; line-height: 1.08; }
  .auth__hero-lede{ font-size: 14px; margin-top: 12px; }
  .auth__hero-feats{
    margin-top: 22px;
    padding-top: 18px;
    gap: 10px;
  }
  .auth__hero-feat{ font-size: 13px; }
  .auth__panel{ padding: 28px 20px 48px; }
  .auth__card{ max-width: 100%; }
  .auth__title{ font-size: 24px; }
  .auth__tabs{ margin: 18px 0 16px; padding: 3px; }
  .auth__tabs button{ font-size: 12px; padding: 7px 8px; }
  .auth__role-pick{ grid-template-columns: 1fr; }

  /* ── Grids: collapse two-col layouts ───────────────────────────────── */
  .grid{ grid-template-columns: 1fr !important; gap: 12px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — phone (≤ 640px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  /* Default page padding tightens further */
  .scroll{ padding: 14px 14px 80px; }
  .card{ padding: 14px; border-radius: var(--r-md); }
  .card--pad-lg{ padding: 16px; }

  /* ── Stat tiles compact ────────────────────────────────────────────── */
  .stat{ padding: 14px 16px; }
  .stat__value{ font-size: 28px; }

  /* ── Chat ──────────────────────────────────────────────────────────── */
  .chat__inner{ padding: 0 16px; }
  .chat__welcome{ padding: 24px 0 12px; }
  .chat__welcome h1{ font-size: 26px; }
  .chat__welcome p{ font-size: 13.5px; }
  .chat__suggestions{ grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .chat__suggestion{ padding: 12px 14px; }
  .chat__suggestion-q{ font-size: 15.5px; }
  .msg__user .msg__bubble{ max-width: 92%; font-size: 14.5px; }
  .msg__bot .msg__bubble{ font-size: 15px; }
  .composer{ padding: 10px 14px 16px; }
  .composer__inner{ padding: 8px 8px 8px 12px; }
  .composer textarea{ font-size: 16px; padding: 8px 4px; }  /* 16px stops iOS auto-zoom */
  .composer__meta{ display: none; }
  .msg__sources{ padding: 10px 12px; }
  .msg__source{ grid-template-columns: 26px 1fr; gap: 10px; }
  .msg__source-meta{ grid-column: 2 / 3; font-size: 10.5px; margin-top: 2px; }

  /* ── Inputs: prevent iOS zoom on focus ─────────────────────────────── */
  .input, .textarea, .select{ font-size: 16px; }

  /* ── Auth title smaller ────────────────────────────────────────────── */
  .auth__hero{ padding: 22px 18px 22px; }
  .auth__hero-title{ font-size: 28px; }
  .auth__brand-name{ font-size: 22px; }
  .auth__brand-name small{ font-size: 9.5px; }
  .auth__hero-feats{ display: none; }  /* keep hero compact on phones */
  .auth__panel{ padding: 22px 16px 40px; }
  .auth__form-row{ grid-template-columns: 1fr; }

  /* ── Card headers: stack action under title when tight ─────────────── */
  .card__hd{ flex-wrap: wrap; gap: 8px; }

  /* ── Manager dashboard — hero card stacks ──────────────────────────── */
  .card--feature .row{ flex-wrap: wrap; }
  .card--feature .row > div{ width: 100%; }
  .card--feature .row > div[style*="background: var(--hairline)"]{ display: none; }

  /* ── Bylaw row collapses to 2-row stack ────────────────────────────── */
  .bylaw{
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .bylaw > .row{
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .bylaw__title{ font-size: 17px; }
  .bylaw__meta{ font-size: 12px; line-height: 1.55; }

  /* ── Tables get horizontal scroll ──────────────────────────────────── */
  .card:has(> .table){ overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .table{ min-width: 640px; }
  .table th, .table td{ padding: 10px 12px; }

  /* Roster tab bar can scroll horizontally */
  .top__role{ overflow-x: auto; white-space: nowrap; max-width: 100%; }

  /* ── Settings stacks ───────────────────────────────────────────────── */
  .scroll > div[style*="grid-template-columns: 200px"]{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .set__nav{
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .set__nav button{ white-space: nowrap; padding: 8px 12px; flex: none; }
  .set__nav button.is-active{ background: var(--accent-soft); color: var(--accent-ink); }

  /* ── Bylaw reader: hide TOC, full-width body ───────────────────────── */
  .scroll article[style*="font-family"]{ font-size: 15.5px !important; }
  .scroll > div[style*="grid-template-columns: 180px"],
  .scroll div[style*="grid-template-columns: 180px 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .scroll nav[style*="position: sticky"]{ display: none; }

  /* ── Admin overview: feature card stacks ───────────────────────────── */
  .card--feature[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .card--feature [style*="borderLeft"],
  .card--feature [style*="border-left"]{
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--hairline);
    padding-top: 16px !important;
  }
  .card--feature .display{ font-size: 36px !important; }

  /* ── Modal: tighter ───────────────────────────────────────────────── */
  .modal{ padding: 22px; width: calc(100vw - 24px); }

  /* ── Charts: shorter on phone ──────────────────────────────────────── */
  .chart{ height: 200px !important; }

  /* ── Tweaks panel: bottom-sheet feel on small screens ──────────────── */
  .twk-panel{
    width: calc(100vw - 24px) !important;
    right: 12px !important; bottom: 12px !important;
    max-height: 70vh;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — narrow phones (≤ 380px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px){
  .top{ padding: 10px 12px; }
  .top__crumbs{ font-size: 16px; }
  .scroll{ padding: 12px 12px 80px; }
  .auth__hero-title{ font-size: 24px; }
  .chat__welcome h1{ font-size: 22px; }
  .stat__value{ font-size: 24px; }
  .display, .card__title--display{ font-size: 20px !important; }
  /* Hide non-essential right-side bell on very narrow */
  .top > .btn--ghost{ display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Better touch targets on touch devices
   ═════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse){
  .btn{ min-height: 40px; }
  .btn--sm{ min-height: 34px; }
  .side__item{ padding: 10px 12px; }
  .auth__tabs button{ padding: 10px 12px; }
}