:root { --ink:#1f2933; --muted:#64707d; --line:#d9dee3; --bg:#f5f9fb;
  /* BetterHealth brand (betterhealthllc.org logo): blue "Better", green "Health" */
  --brand-blue:#2A98DA; --brand-green:#0BB574;
  --brand:#1A73AD;        /* darker blue for text and buttons, readable on white (WCAG AA) */
  --brand-green-dark:#087A4E; --brand-tint:#e8f4fb; --green-tint:#e3f6ee;
  --red:#f8cbad; --amber:#ffe699; --green:#c6efce; --hold:#d9e1f2; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); }
.top { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; padding:.5rem 1rem; background:#fff; color:var(--ink);
  border-bottom:4px solid transparent; border-image:linear-gradient(90deg, var(--brand-blue), var(--brand-green)) 1; }
.top a { color:var(--ink); text-decoration:none; }
.brand { display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.brand img { height:38px; width:auto; }
.brand .b1 { color:var(--brand-blue); } .brand .b2 { color:var(--brand-green); }
.brand .b3 { color:var(--muted); font-weight:400; font-size:.85em; margin-left:.15rem; }
.top nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; flex:1; }
.top nav a { padding:.2rem 0; border-bottom:2px solid transparent; font-weight:500; }
.top nav a:hover, .top nav a.on, .top nav a[aria-current] { color:var(--brand); border-bottom-color:var(--brand-green); }
.logout { display:flex; gap:.5rem; align-items:center; } .who { color:var(--muted); font-size:.9em; }
button.link { background:none; border:0; color:var(--brand); text-decoration:underline; cursor:pointer; font:inherit; }
main { max-width:1200px; margin:0 auto; padding:1rem; }
h1 { font-size:1.4rem; margin:.5rem 0; color:#14384f; } h2 { font-size:1.1rem; margin:.6rem 0; } h3 { margin:.3rem 0; font-size:1rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; margin:.8rem 0; box-shadow:0 1px 2px rgba(16,40,64,.04); }
.narrow { max-width:460px; margin:3rem auto; }
.muted { color:var(--muted); } .small { font-size:.85em; }
.alert { background:var(--red); padding:.6rem .8rem; border-radius:6px; }
.head-row { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; align-items:center; }
.btn { display:inline-block; padding:.45rem .8rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink);
  text-decoration:none; cursor:pointer; font:inherit; }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.primary:hover { background:#155f8f; }
.btn:hover { border-color:var(--brand-blue); }
.btn.small { padding:.2rem .5rem; font-size:.85em; }
.btn.selected { background:var(--green-tint); border-color:var(--brand-green); color:var(--brand-green-dark); font-weight:600; }
input, select, textarea { font:inherit; padding:.4rem; border:1px solid var(--line); border-radius:6px; max-width:100%; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.6rem 1rem; align-items:end; }
.form-grid label { display:flex; flex-direction:column; gap:.2rem; font-size:.9em; }
.form-grid label.check { flex-direction:row; align-items:center; gap:.4rem; }
.form-grid .wide { grid-column:1 / -1; }
.inline { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.grid { width:100%; border-collapse:collapse; } .grid th, .grid td { border-bottom:1px solid var(--line); padding:.35rem .4rem; text-align:left; vertical-align:top; }
.grid th { font-size:.85em; color:var(--muted); }
.scroll { overflow-x:auto; }
tr.red td { background:#fdeee5; } tr.amber td { background:#fff6d6; } tr.green td { background:#eef9ef; }
.pill { display:inline-block; padding:.05rem .5rem; border-radius:999px; background:#eceff2; font-size:.85em; white-space:nowrap; }
.pill.red { background:var(--red); } .pill.amber { background:var(--amber); } .pill.green { background:var(--green); } .pill.hold { background:var(--hold); }
.tag { display:inline-block; font-size:.75em; padding:0 .4rem; border-radius:4px; background:#eceff2; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem; }
.tile { border:1px solid var(--line); border-top:3px solid var(--brand-green); border-radius:8px; padding:.5rem; display:flex; flex-direction:column; background:#fff; }
a.tile:hover { border-top-color:var(--brand-blue); }
.tile b { font-size:1.4rem; color:var(--brand); } .tile span { font-size:.8em; color:var(--muted); }
.tile.red { background:var(--red); } .tile.amber { background:var(--amber); }
.task .time { font-weight:600; color:var(--brand); }
.status-form { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; } .status-form input { flex:1 1 220px; }
.foot { text-align:center; color:var(--muted); font-size:.8em; padding:1.5rem; }
.check-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px, 280px) auto; gap:.5rem; align-items:center; padding:.35rem 0; border-bottom:1px solid var(--line); }
.check-row.late { background:#fdeee5; }
.check-row label.check { display:flex; gap:.5rem; align-items:flex-start; }
a.tile { text-decoration:none; color:var(--ink); }
.handbook table { border-collapse:collapse; width:100%; } .handbook th, .handbook td { border-bottom:1px solid var(--line); padding:.3rem; text-align:left; vertical-align:top; }
.handbook ul { padding-left:1.2rem; }
@media (max-width:640px) { .check-row { grid-template-columns:1fr; } }
/* History */
.grid.history td.num, .grid td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.grid.history th.section { text-align:left; background:#eef1f5; color:var(--brand); font-size:.9em; }
.grid.history svg { color:var(--brand); display:block; }
form.inline label { margin-right:.5rem; }
/* Reports */
.nowrap { white-space:nowrap; }
.report-actions { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; }
.report-head h1 { margin:.2rem 0; }
.report-table th, .report-table td { font-size:.85em; }
.report-table thead th { position:sticky; top:0; background:#fff; }
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background:#fff; }
  header.top, .demo-banner, .demo-sub, footer.foot, .no-print, #toast { display:none !important; }
  main { max-width:none; padding:0; margin:0; }
  .report-table { width:100%; border-collapse:collapse; }
  .report-table th, .report-table td { border:1px solid #999; padding:3px 5px; font-size:9pt; }
  .report-table thead { display:table-header-group; }   /* headings repeat on every page */
  .report-table thead th { position:static; background:#e8f4fb; }
  .report-table tr { page-break-inside:avoid; }
  a { color:inherit; text-decoration:none; }
}

/* Brand touches */
.login-logo { display:block; margin:0 auto .5rem; height:110px; width:auto; }
.foot { border-top:1px solid var(--line); }
.foot .b1 { color:var(--brand-blue); font-weight:600; } .foot .b2 { color:var(--brand-green); font-weight:600; }
.report-head .report-logo { height:30px; width:auto; vertical-align:middle; margin-right:.4rem; }
.grid.history th.section { background:var(--brand-tint); color:var(--brand); }
/* Waiting for me */
.top nav .count { display:inline-block; min-width:1.3em; padding:0 .35em; border-radius:999px; background:var(--brand-green); color:#fff; font-size:.8em; text-align:center; }
.work { border-left:4px solid var(--brand-blue); }
.work.overdue { border-left-color:#d9534f; }
.work-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; }
.work p { margin:.4rem 0; }
.work-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.work-actions input { flex:1 1 260px; }

/* Claude features */
.answer { white-space: pre-wrap; line-height: 1.5; }
p.lead { font-size: 1.1em; font-weight: 600; }
form.inline { display: inline; }
details.card summary { cursor: pointer; font-weight: 600; }
svg.spark { color: var(--brand-blue, #1f3864); vertical-align: middle; }
svg.spark.better { color: var(--brand-green, #2e7d32); }
svg.spark.worse { color: #c77700; }

/* Header menus and the always-visible Ask button */
.top nav { align-items:center; }
.menu { position:relative; }
.menu-btn { background:none; border:0; padding:.2rem 0; font:inherit; font-weight:500; color:inherit; cursor:pointer; border-bottom:2px solid transparent; }
.menu.on > .menu-btn, .menu-btn:hover { color:var(--brand); border-bottom-color:var(--brand-green); }
.menu .drop { display:none; position:absolute; top:100%; left:-.6rem; z-index:30; min-width:13rem; padding:.3rem 0; background:#fff;
  border:1px solid #d9e1ea; border-radius:8px; box-shadow:0 6px 18px rgba(20,40,70,.12); flex-direction:column; }
.menu:hover .drop, .menu.open .drop, .menu:focus-within .drop { display:flex; }
.top nav .menu .drop a { padding:.4rem .9rem; border-bottom:0; white-space:nowrap; }
.top nav .menu .drop a:hover, .top nav .menu .drop a.on { background:var(--green-tint); }
.top nav .menu .drop a.sub { padding-left:1.8rem; font-size:.95em; }
.top nav .menu .drop a.sub::before { content:"↳ "; color:var(--muted); }
.ask-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .8rem; border-radius:999px; background:var(--brand-green-dark);
  color:#fff !important; font-weight:600; white-space:nowrap; }
.ask-btn:hover { filter:brightness(.95); text-decoration:none; }

/* ------------------------------------------------------------------ phones and small tablets */
.nav-toggle { display:none; align-items:center; gap:.35rem; padding:.45rem .75rem; border:1px solid var(--line); border-radius:8px;
  background:#fff; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; }
.nav-toggle .count, .menu-btn .count, .top nav a .count { display:inline-block; min-width:1.3em; padding:0 .35em; border-radius:999px;
  background:var(--brand-green-dark); color:#fff; font-size:.75em; text-align:center; }
/* Header: the menu folds behind a "Menu" button below 1024px wide (tablets and phones). */
.top nav { order:2; } .ask-btn { order:3; margin-left:auto; } .nav-toggle { order:4; } .top .logout { order:5; }
@media (max-width:1024px) {
  .top { gap:.5rem; padding:.45rem .7rem; position:sticky; top:0; z-index:40; }
  .brand img { height:32px; } .brand .b3 { display:none; }
  .ask-btn { margin-left:auto; padding:.45rem .8rem; }
  .nav-toggle { display:inline-flex; }
  .top nav, .top .logout { display:none; }
  .top nav { order:10; } .top .logout { order:11; }
  .top.open nav { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; flex-basis:100%; gap:0;
    max-height:75vh; overflow-y:auto; }
  .top nav .menu { width:100%; }
  .top.open .logout { display:flex; flex-basis:100%; justify-content:space-between; padding:.6rem 0 .2rem; border-top:1px solid var(--line); }
  .top nav > a, .top nav .drop a { padding:.7rem .3rem; border-bottom:1px solid var(--line); font-size:1rem; }
  .top nav > a.on, .top nav .drop a.on { border-bottom-color:var(--line); background:var(--green-tint); }
  .menu .drop, .menu:hover .drop { display:flex; position:static; box-shadow:none; border:0; border-radius:0; padding:0; min-width:0; }
  .top nav .menu .drop a { padding-left:1.1rem; }
  .top nav .menu .drop a.sub { padding-left:2rem; }
  .menu-btn { width:100%; text-align:left; padding:.75rem .3rem .3rem; cursor:default; color:var(--muted); font-size:.78rem;
    text-transform:uppercase; letter-spacing:.04em; border-bottom:0 !important; }
  .menu-btn > span[aria-hidden], .menu-btn .count { display:none; }
}
@media (max-width:760px) {
  body { font-size:16px; }
  main { padding:.6rem; }
  h1 { font-size:1.25rem; }
  .card { padding:.8rem; border-radius:8px; }
  /* Wide tables scroll sideways inside their card instead of stretching the page. */
  table.grid, table.report-table, .handbook table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .grid th, .grid td { padding:.45rem .4rem; }
  /* Comfortable tap targets; 16px text stops phones zooming into form fields. */
  input, select, textarea { font-size:16px; min-height:2.6rem; }
  input[type=checkbox], input[type=radio] { min-height:0; width:1.3rem; height:1.3rem; }
  .btn { min-height:2.6rem; padding:.55rem .9rem; } .btn.small { min-height:2.2rem; padding:.35rem .7rem; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid input:not([type=checkbox]):not([type=radio]), .form-grid select, .form-grid textarea { width:100%; }
  .head-row { align-items:flex-start; }
  .report-actions { flex-wrap:wrap; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  details summary { padding:.4rem 0; }
}
@media print { .nav-toggle, .ask-btn { display:none !important; } }