/* Colours, type and the top bar. Split unchanged from the T-201 demo index.html. */
:root{
  --bg:#f4f5f3; --card:#ffffff; --ink:#1c1f22; --muted:#5f6871; --line:#dde1e5; --soft:#eef0f2;
  --accent:#0b6e75; --accent-ink:#ffffff; --accent-soft:#e3f1f1;
  --warn-bg:#fff4d6; --warn-ink:#5a4300; --warn-line:#f0dca0;
  --ok-bg:#e8f4ec; --ok-ink:#1f5a35; --ok-line:#bfdcc9;
  --stand-bg:#fdebd8; --stand-ink:#7a3e05;
  --l0:#7f93a8; --l1:#4f9a9f; --l2:#c2a378;
  --stage-bg:#e9ecee;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit}
.hidden{display:none !important}
.topbar{height:52px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-weight:650;letter-spacing:.1px}
.brand small{font-weight:500;color:var(--muted);margin-left:8px}
.local{margin-left:auto;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#2f8f55;display:inline-block}
/* T-267: "Sign out" in the top bar when Clerk sign-in is on */
.signout{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none}
.signout:hover{color:var(--ink);text-decoration:underline}