/* One look for every part of the app (the owner, 2026-10-09): the bus app, Sunday School, visitation and the office
   share these colours, header, tabs, buttons and cards; each part has its own accent colour (html data-app) so people
   who use more than one always know where they are. Pages keep their own layout rules after this file. */
:root {
  --bg:#FBFAF7; --surface:#fff; --ink:#212730; --muted:#61697A; --line:#E4E1D8; --neutral-soft:#ECEAE3;
  --good:#2E7D46; --good-soft:#E3F1E7; --warn:#A8481B; --warn-soft:#F8E4DA; --mid:#8A6D00; --mid-soft:#F5EAC4;
  --accent:#B36A00; --accent-soft:#F6ECDA; --on-accent:#fff;
  --radius:12px; --radius-sm:10px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[data-app="class"]  { --accent:#2D5FA6; --accent-soft:#E3ECF8; }
html[data-app="visit"]  { --accent:#2F6B5A; --accent-soft:#E2EEE9; }
html[data-app="office"] { --accent:#4A55A2; --accent-soft:#E8EAF6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14181F; --surface:#1B212A; --ink:#E8E6E0; --muted:#9BA4B0; --line:#2C343F; --neutral-soft:#242B35;
    --good:#6FBF8A; --good-soft:#1C3324; --warn:#E08A5E; --warn-soft:#3A2218; --mid:#E5C458; --mid-soft:#3A3212;
    --accent:#EFA83E; --accent-soft:#352914; --on-accent:#14181F;
  }
  html[data-app="class"]:not([data-theme="light"])  { --accent:#7FA8E8; --accent-soft:#1C2A40; }
  html[data-app="visit"]:not([data-theme="light"])  { --accent:#6FBFA4; --accent-soft:#1E3029; }
  html[data-app="office"]:not([data-theme="light"]) { --accent:#9AA4EC; --accent-soft:#252A4A; }
}
html, body { background:var(--bg); color:var(--ink); }

/* the header bar: the same in every part — white, a thin line under it, the accent as a strip along the top */
.appbar { background:var(--surface) !important; border-top:3px solid var(--accent); border-bottom:1px solid var(--line) !important; }

/* tabs across the top: the accent under the one that is open */
.uitabs { display:flex; gap:2px; }
.uitabs > a, .uitabs > button { flex:none; padding:9px 12px 10px; color:var(--muted); background:transparent; border:0; border-bottom:3px solid transparent;
  border-radius:0; font:inherit; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; cursor:pointer; }
.uitabs > .on { color:var(--accent); border-bottom-color:var(--accent); }

/* the Apps button takes the accent of the part it is in */
.appmenu > button { color:var(--accent) !important; border-color:var(--line) !important; background:var(--surface) !important; }
.appmenu .appmenu-pop a.on { background:var(--accent-soft) !important; }
.appmenu .appmenu-pop a .k { color:var(--accent) !important; }
/* on a phone the Apps button is just its icon, like the other header buttons */
@media (max-width:480px) { .appmenu > button { border-color:transparent !important; background:transparent !important; } }

/* the header row, the same in every part: the part's mark and title, then (right) its actions, Apps and Sign out;
   the sections as tabs under it */
.apphead { display:flex; align-items:center; gap:10px; padding:10px 0 8px; min-width:0; }
.apphead h1 { font-size:18px; font-weight:700; margin:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.apphead .grow { flex:1; }
.apphead .sub { color:var(--muted); font-size:13px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appmark { flex:none; width:30px; height:30px; border-radius:9px; background:var(--accent-soft); display:grid; place-items:center; font-size:17px; line-height:1; }
.signout { color:var(--muted); font-size:14px; text-decoration:none; white-space:nowrap; }
.signout:hover, .signout:focus-visible { color:var(--accent); }
.uitabs { overflow-x:auto; scrollbar-width:none; }
.uitabs::-webkit-scrollbar { display:none; }
@media (max-width:600px) { .apphead .sub { display:none; } .apphead .wide { display:none; } }
@media (min-width:601px) { .apphead .narrow { display:none; } }
@media (max-width:480px) { .apphead { gap:8px; } .apphead h1 { font-size:16.5px; } }