/* ACA brand: #1D4A94 blue, #FFC125 gold, League Spartan headers,
   bold/structured/angular per BRAND.md */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&display=swap');

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #101418;
  --muted: #5c6672;
  --line: #d9d9d9;
  --brand: #1D4A94;
  --brand-soft: #e9eef8;
  --accent: #FFC125;
  --accent-ink: #4a3502;
  --user: #1D4A94;
  --radius: 6px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: "League Spartan", var(--font);
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); height:100vh; display:flex; justify-content:center; }
.app { width:100%; max-width:760px; height:100vh; display:flex; flex-direction:column; background:var(--panel); border-inline:1px solid var(--line); }
header { padding:14px 20px; border-bottom:3px solid var(--brand); display:flex; align-items:center; gap:12px; }
header .badge { width:42px; height:42px; border-radius:4px; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; letter-spacing:.5px; border-bottom:3px solid var(--accent); }
header h1 { font-family:var(--font-head); font-size:17px; font-weight:700; margin:0; letter-spacing:.2px; }
header p { font-size:12px; margin:2px 0 0; color:var(--muted); }
.header-right { margin-inline-start:auto; display:flex; gap:8px; align-items:center; }
.lang-toggle button { border:1px solid var(--line); background:#fff; color:var(--ink); padding:6px 11px; border-radius:4px; cursor:pointer; font-size:13px; font-family:var(--font); font-weight:600; }
.lang-toggle button.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.level-select { border:1px solid var(--line); background:#fff; color:var(--ink); padding:6px 8px; border-radius:4px; font-size:13px; font-family:var(--font); cursor:pointer; max-width:175px; }
.level-select:focus { border-color:var(--brand); outline:none; }
.staff-tag { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); background:var(--accent); padding:4px 10px; border-radius:3px; font-weight:700; }
.chat { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.msg { max-width:82%; padding:12px 14px; border-radius:var(--radius); line-height:1.55; font-size:15px; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:var(--user); color:#fff; }
.msg.bot { align-self:flex-start; background:var(--brand-soft); color:var(--ink); border-inline-start:3px solid var(--brand); }
.msg.bot .source { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
/* Finished answers are rendered from safe Markdown into real markup */
.msg.md { white-space:normal; }
.msg.md p { margin:6px 0; }
.msg.md h4 { font-family:var(--font-head); font-size:15px; margin:10px 0 4px; }
.msg.md ul { margin:6px 0; padding-inline-start:20px; }
.msg.md li { margin:3px 0; }
.msg.md table { border-collapse:collapse; margin:8px 0; font-size:13.5px; background:#fff; }
.msg.md th, .msg.md td { border:1px solid var(--line); padding:5px 10px; text-align:start; }
.msg.md th { background:var(--brand); color:#fff; font-weight:600; }
.msg.md hr { border:none; border-top:1px solid var(--line); margin:8px 0; }
.suggestions { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 10px; }
.suggestions button { border:1px solid var(--brand); background:#fff; color:var(--brand); padding:7px 13px; border-radius:4px; cursor:pointer; font-size:13px; font-weight:600; }
.suggestions button:hover { background:var(--brand-soft); }
.composer { display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); }
.composer input { flex:1; border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-size:15px; font-family:var(--font); outline:none; }
.composer input:focus { border-color:var(--brand); }
.composer button { background:var(--brand); color:#fff; border:none; border-radius:4px; padding:0 20px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--font-head); letter-spacing:.3px; }
.composer button:hover { background:#163a75; }
.composer button:disabled { opacity:.5; cursor:default; }
.lead { align-self:flex-start; max-width:82%; background:#fff; border:1px solid var(--accent); border-inline-start:4px solid var(--accent); border-radius:var(--radius); padding:14px; }
.lead h4 { margin:0 0 8px; font-size:14px; font-family:var(--font-head); }
.lead input { width:100%; margin-bottom:8px; padding:9px 11px; border:1px solid var(--line); border-radius:4px; font-size:14px; }
.lead button { background:var(--accent); color:var(--accent-ink); border:none; border-radius:4px; padding:9px 15px; font-weight:700; cursor:pointer; }
/* --- Parent tools: fee calculator + documents checklist (homepage only) --- */
.tools { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 20px 0; }
@media (max-width:640px){ .tools { grid-template-columns:1fr; } }
/* prospect homepage: quiet register-interest strip below the chat composer.
   A static footer element in the app column, so it can never overlap the chat
   or the input at any viewport size. */
.lead-strip { display:flex; align-items:center; gap:10px; margin:0 16px 12px;
  background:var(--brand); border:1px solid var(--brand); border-radius:6px;
  padding:9px 14px; flex:none; }
.lead-strip svg { width:17px; height:17px; fill:none; stroke:var(--accent);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.lead-strip .lb-text { font-size:12.5px; line-height:1.4; color:#fff; }
.lead-strip .lb-btn { margin-inline-start:auto; background:var(--accent);
  color:var(--accent-ink); border:none; border-radius:6px; padding:7px 14px;
  font-family:var(--font-head); font-weight:700; font-size:12px; cursor:pointer;
  white-space:nowrap; flex:none; }
.lead-strip .lb-btn:hover { filter:brightness(1.06); }
@media (max-width:640px){
  .lead-strip { flex-direction:column; align-items:stretch; text-align:center; }
  .lead-strip svg { align-self:center; }
  .lead-strip .lb-btn { margin-inline-start:0; width:100%; }
}
.tool { border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:var(--radius); background:#fff; }
.tool summary { cursor:pointer; list-style:none; padding:10px 14px; font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--brand); display:flex; align-items:center; gap:8px; }
.tool summary::-webkit-details-marker { display:none; }
.tool summary::after { content:"+"; margin-inline-start:auto; color:var(--accent-ink); background:var(--accent); width:18px; height:18px; border-radius:3px; display:grid; place-items:center; font-size:14px; font-weight:700; flex:none; }
.tool[open] summary::after { content:"\2212"; }
.tool .tool-body { padding:0 14px 12px; }
.tool .row { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.tool .field label { font-size:12px; color:var(--muted); display:block; margin-bottom:3px; }
.tool select { border:1px solid var(--line); border-radius:4px; padding:7px 9px; font-size:13px; font-family:var(--font); background:#fff; min-width:110px; }
.tool select:focus { border-color:var(--brand); outline:none; }
.fc-add-wrap { align-self:flex-end; }
.fc-row { display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.fc-row .who { flex:1; }
.fc-row .fee { font-weight:700; color:var(--brand); font-family:var(--font-head); }
.fc-x { background:#fff; border:1px solid var(--line); color:#b3261e; border-radius:3px; width:20px; height:20px; line-height:1; cursor:pointer; font-size:13px; flex:none; padding:0; }
.fc-x:hover { border-color:#b3261e; }
#fc-out { margin-top:10px; }
.fc-total { font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--brand); }
.fc-total .cur { font-size:14px; }
.fc-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.fc-inst { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.fc-inst > div { border:1px solid var(--line); border-radius:4px; padding:8px 6px; text-align:center; }
.fc-inst .amt { font-weight:700; color:var(--brand); font-family:var(--font-head); font-size:15px; }
.fc-inst .when { font-size:11px; color:var(--muted); margin-top:2px; }
.caveats { margin-top:10px; border-inline-start:3px solid var(--accent); padding-inline-start:10px; }
.caveats p { font-size:11.5px; color:var(--muted); margin:3px 0; }
.dc-list { margin:10px 0 6px; padding:0; list-style:none; }
.dc-list li { font-size:13px; margin:7px 0; padding-inline-start:24px; position:relative; line-height:1.45; }
.dc-list li::before { content:""; position:absolute; inset-inline-start:0; top:1px; width:13px; height:13px; border:2px solid var(--brand); border-radius:3px; }
.tool .btn-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tool button.act { background:var(--brand); color:#fff; border:none; border-radius:4px; padding:8px 14px; font-weight:700; cursor:pointer; font-size:13px; font-family:var(--font); }
.tool button.act:hover { background:#163a75; }
.tool button.ghost { background:#fff; color:var(--brand); border:1px solid var(--brand); border-radius:4px; padding:8px 14px; font-weight:600; cursor:pointer; font-size:13px; font-family:var(--font); }
.tool button.ghost:hover { background:var(--brand-soft); }
.tool .unavailable { font-size:13px; color:var(--muted); }

/* --- Quick-action tiles (/parents) --- */
/* Quick-action tiles: compact pill/chip form at equal widths — the row spans
   exactly the chat width (same 20px side padding); wraps to a 2x2 equal grid
   on narrow screens. The chat keeps the vertical space. */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 20px 0; }
@media (max-width:640px){ .tiles { grid-template-columns:1fr 1fr; } }
.tile { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px;
        padding:7px 10px; min-width:0;
        background:#fff; border:1px solid var(--line); border-inline-start:3px solid var(--brand);
        border-radius:6px; cursor:pointer; text-decoration:none; color:var(--ink);
        font-family:var(--font); font-size:12.5px; font-weight:700; white-space:nowrap; }
.tile:hover { background:var(--brand-soft); }
.tile svg { width:15px; height:15px; stroke:var(--brand); fill:none; stroke-width:1.8; flex:none; }
.tile .ext { display:none; }

/* --- Staff onboarding banner (/staff): slim strip --- */
.onboard { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:8px 20px 0;
           padding:5px 10px; background:var(--brand-soft); border-inline-start:3px solid var(--accent);
           border-radius:6px; }
.onboard-title { font-family:var(--font-head); font-weight:700; font-size:12px; color:var(--brand); }
.ob-link { border:1px solid var(--brand); background:#fff; color:var(--brand); border-radius:6px;
           padding:3px 9px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font); }
.ob-link:hover { background:var(--brand); color:#fff; }
.ob-x { margin-inline-start:auto; background:none; border:none; font-size:15px; color:var(--muted);
        cursor:pointer; padding:1px 5px; line-height:1; }
.ob-x:hover { color:var(--ink); }

/* --- School calendar widget (/parents + /staff) --- */
.cal-sum { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.cal-upcoming { font-family:var(--font); font-weight:400; }
details[open] .cal-upcoming { display:none; }
.cal-ev { display:flex; align-items:baseline; gap:7px; font-size:12.5px; margin:5px 0; }
.cal-ev .cal-when { color:var(--muted); white-space:nowrap; }
.cal-ev .cal-what { font-weight:600; }
.cal-ev .cal-cd { color:var(--accent-ink); background:var(--accent); border-radius:3px; padding:1px 6px; font-size:11px; white-space:nowrap; }
.chip { width:10px; height:10px; border-radius:2px; display:inline-block; flex:none; align-self:center; }
.chip.gold, .dot.gold { background:var(--accent); }
.chip.mut, .dot.mut { background:#9aa3ad; }
.chip.blue, .dot.blue { background:var(--brand); }
.cal-views { display:flex; gap:6px; margin-bottom:10px; }
.cal-views button { border:1px solid var(--line); background:#fff; color:var(--ink); padding:5px 12px;
                    border-radius:4px; cursor:pointer; font-size:12.5px; font-weight:600; font-family:var(--font); }
.cal-views button.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.cal-nav { display:flex; gap:6px; justify-content:flex-end; margin-bottom:-24px; position:relative; z-index:1; }
.cal-arrow { border:1px solid var(--line); background:#fff; width:24px; height:24px; border-radius:4px; cursor:pointer; font-size:14px; line-height:1; color:var(--brand); }
.cal-month { margin-bottom:10px; }
.cal-mname { font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--brand); margin:6px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-grid.names div { font-size:10px; color:var(--muted); text-align:center; padding:2px 0; font-weight:600; }
.cal-cell { min-height:30px; border:1px solid var(--line); border-radius:3px; font-size:11px; padding:2px 3px;
            display:flex; flex-direction:column; justify-content:space-between; background:#fff; }
.cal-cell.empty { border:none; background:none; }
.cal-cell.today { border-color:var(--brand); border-width:2px; font-weight:700; }
.cal-cell .dots { display:flex; gap:2px; }
.dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.cal-3wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:700px){ .cal-3wrap { grid-template-columns:1fr; } }
.cal-3wrap .cal-cell { min-height:20px; font-size:9.5px; }
.cal-list { margin-top:10px; border-top:1px solid var(--line); padding-top:6px; }
.cal-ygroup { margin-bottom:12px; }
#cal-legend { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
#cal-legend > span { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }

.disclosure { font-size:10.5px; color:var(--muted); text-align:center; margin:0; padding:6px 16px 10px; }

.gate { margin:auto; max-width:340px; text-align:center; padding:24px; }
.gate h1 { font-family:var(--font-head); }
.gate input { width:100%; padding:11px; border:1px solid var(--line); border-radius:4px; margin:12px 0; font-size:15px; }
.gate button { width:100%; background:var(--brand); color:#fff; border:none; border-radius:4px; padding:11px; font-size:15px; font-weight:700; cursor:pointer; }
.gate .err { color:#b3261e; font-size:13px; min-height:18px; }
.dots span { animation:blink 1.2s infinite both; }
.dots span:nth-child(2){ animation-delay:.2s } .dots span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }