/* Disability Tech Index — shared design system (periwinkle "Calm & Happy").
   Bright-but-muted, accessible: body text ≥4.5:1, control borders ≥3:1, tint
   text colors are all ≥4.5:1 on their tint. One stylesheet for chat + dashboard
   + admin so the product feels consistent. */

:root{
  --bg:#fbfbfd; --surface:#ffffff; --side:#f2f3f8; --ink:#232633; --muted:#566074;
  --line:#e6e7f0; --field:#6a7180;                 /* control borders ≥3:1 */
  --accent:#4f5bd5; --accent-strong:#3c46b0; --accent-soft:#e3e5fa; --accent-ink:#3c46b0;
  --accent-fg:#ffffff; --focus:#2f3aa8; --danger:#a3303f; --warn-bg:#fbf2dd; --warn-ink:#7a5512; --warn-ln:#e8cf94;
  /* soft section tints + an accessible text color for each */
  --t-lav:#efeffb;  --t-lav-ink:#3b3f86;
  --t-mint:#e9f5ef; --t-mint-ink:#0c5440;
  --t-blush:#fbeef4;--t-blush-ink:#8a2f52;
  --t-sky:#e9f1fc;  --t-sky-ink:#1c4f86;
  --radius:12px; --radius-sm:8px;
  --maxw:760px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14161d; --surface:#1b1e27; --side:#171a22; --ink:#eceef5; --muted:#a7afc2;
    --line:#2a2e3a; --field:#5b6273; --accent:#8f97ee; --accent-strong:#aab1f4; --accent-soft:#272b44; --accent-ink:#c3c8fa;
    --accent-fg:#10121b; --focus:#aab1f4; --danger:#f0a3ad;
    --t-lav:#23263c; --t-lav-ink:#c7caf3; --t-mint:#16291f; --t-mint-ink:#9fe1c4;
    --t-blush:#2c1a26; --t-blush-ink:#f2b6cf; --t-sky:#16243a; --t-sky-ink:#a9cdf3;
    --warn-bg:#2c2415; --warn-ink:#f0d28a; --warn-ln:#5a4a22;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); min-height:100vh;
  font:16px/1.6 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--accent-strong); text-underline-offset:2px; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 14px; border-radius:0 0 8px 0; z-index:20; }
.skip:focus{ left:0; }
h1{ font-size:21px; } h2{ font-size:18px; }
h3{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 8px; }

/* ---------- app shell ---------- */
.shell{ display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.sidebar{ background:var(--side); border-right:1px solid var(--line); padding:18px 14px 14px;
  display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.brand img,.brand .logo{ width:30px; height:30px; border-radius:8px; flex:none; }
.brand b{ color:var(--accent-strong); font-size:14.5px; line-height:1.2; }
.navitem{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted);
  padding:8px 11px; border-radius:var(--radius-sm); border:0; background:none; width:100%; text-align:left; cursor:pointer; text-decoration:none; }
.navitem:hover{ background:#e9eaf4; }
.navitem[aria-current="page"],.navitem.on{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.side-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8a90a6; margin:16px 0 4px 11px; }
.side-foot{ margin-top:auto; border-top:1px solid var(--line); padding-top:12px; font-size:13px; color:var(--muted); }
.content{ padding:26px 36px 60px; max-width:1100px; width:100%; }
.tiles2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .tiles2{ grid-template-columns:1fr; } }
.bottomnav{ display:none; }

@media (max-width: 780px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .content{ padding:18px 16px 84px; }
  .bottomnav{ display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--surface);
    border-top:1px solid var(--line); z-index:10; }
  .bottomnav a{ flex:1; text-align:center; padding:9px 0 8px; font-size:11px; color:var(--muted); text-decoration:none; }
  .bottomnav a[aria-current="page"]{ color:var(--accent-ink); font-weight:600; }
  .bottomnav i{ display:block; font-size:20px; margin-bottom:2px; }
}

/* ---------- components ---------- */
.btn{ background:var(--accent); color:var(--accent-fg); border:0; border-radius:var(--radius-sm);
  padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; }
.btn:hover{ background:var(--accent-strong); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:var(--radius-sm); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--field); }
.btn-ghost:hover{ background:#eef0f6; }
.btn-link{ background:none; border:0; color:var(--accent-strong); text-decoration:underline; padding:4px; cursor:pointer; font:inherit; }
.btn-danger{ background:var(--surface); color:var(--danger); border:1px solid #e0b6bd; }

label{ display:block; font-weight:600; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%; padding:10px 12px; font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--field); border-radius:var(--radius-sm); }
textarea{ resize:vertical; min-height:72px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:0 0 16px; }
.tile{ border-radius:var(--radius); padding:14px 16px; margin:0 0 12px; }
.tile.lav{ background:var(--t-lav); } .tile.lav h3{ color:var(--t-lav-ink); }
.tile.mint{ background:var(--t-mint); } .tile.mint h3{ color:var(--t-mint-ink); }
.tile.blush{ background:var(--t-blush); } .tile.blush h3{ color:var(--t-blush-ink); }
.tile.sky{ background:var(--t-sky); } .tile.sky h3{ color:var(--t-sky-ink); }

.chip{ display:inline-block; font-size:12.5px; padding:3px 11px; border-radius:20px; background:var(--accent-soft); color:var(--accent-ink); }
.muted{ color:var(--muted); font-size:14px; }
.warn{ font-size:14px; color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-ln); border-radius:var(--radius-sm); padding:8px 11px; margin:8px 0 0; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

table.dl{ width:100%; border-collapse:collapse; font-size:14px; }
table.dl td{ padding:6px 0; vertical-align:top; }
td.dl-k{ width:170px; color:var(--muted); font-weight:600; padding-right:14px; }

/* ---------- split-screen auth (matches the chat landing) ---------- */
.auth-split{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-left{ display:flex; flex-direction:column; padding:26px clamp(20px,5vw,56px); max-width:560px; width:100%; margin:0 auto; }
.auth-head{ display:flex; justify-content:space-between; align-items:center; }
.auth-brand{ display:flex; align-items:center; gap:9px; }
.auth-brand img{ border-radius:50%; }
.auth-brand b{ color:var(--accent-strong); font-size:1rem; }
.auth-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 0; }
.auth-eyebrow{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:600; color:var(--accent-strong); margin:0 0 6px; }
.auth-h{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.12; letter-spacing:-.01em; margin:0 0 10px; }
.auth-sub{ color:var(--muted); margin:0 0 22px; max-width:46ch; }
.auth-foot{ color:var(--muted); font-size:.8rem; }
.auth-right{ background:var(--accent); display:flex; align-items:center; justify-content:center; padding:clamp(40px,7vw,96px); }
.auth-img{ max-width:100%; max-height:72vh; border-radius:22px; box-shadow:0 12px 40px rgba(0,0,0,.20); }
@media (max-width:860px){
  .auth-split{ grid-template-columns:1fr; min-height:auto; }
  .auth-right{ display:none; }
  .auth-left{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }