/*
  BeAServant app styles (2026 refresh).
  Loaded after styles.css on every page. Defines the color tokens (light + dark), the app bar /
  phone tab bar, and modern versions of the site's existing button, form and table classes, so
  pages that still use the older markup pick up the new look too.
*/

/* ============================================================== tokens */
:root {
  color-scheme: light dark;
  --brand: #1e5799;          /* the site's blue */
  --brand-strong: #153f70;
  --brand-soft: #e3edf9;
  --heart: #c8202f;          /* the logo's red */
  --accent: #f2a516;         /* the old footer-button amber */
  --accent-ink: #3d2a00;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #1d2735;
  --ink-2: #4a5566;
  --muted: #6b7686;
  --line: #d8dee8;
  --focus: #2f7de1;
  --ok: #1d7a3a;
  --danger: #c22a2a;
  --danger-soft: #fde8e8;
  --warn-soft: #fff6d6;
  --warn-ink: #7a5300;
  --info-soft: #e5efff;
  --done-soft: #eceef1;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
  --radius: 10px;
  --radius-sm: 6px;
  --tabbar-h: 62px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #7fb0f0;
    --brand-strong: #a9c9f5;
    --brand-soft: #1b2b44;
    --heart: #ff6b76;
    --accent: #f2b03a;
    --accent-ink: #241900;
    --bg: #0f1520;
    --surface: #182130;
    --surface-2: #1d2738;
    --ink: #e6ebf2;
    --ink-2: #c3ccd8;
    --muted: #93a0b2;
    --line: #2d3a4f;
    --focus: #7fb0f0;
    --ok: #6bd08c;
    --danger: #ff8080;
    --danger-soft: #3a1d22;
    --warn-soft: #3a3115;
    --warn-ink: #f3d27a;
    --info-soft: #1c2c47;
    --done-soft: #222a36;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%);
  }
}

/* ============================================================== base */
html { -webkit-text-size-adjust: 100%; }
body, .tasks-layout > *, .task-row > * { min-width: 0; }
.task-assignee select, .task-new select, .task-new input { min-width: 0; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; color: var(--ink); }
h2 { font-size: 1.25rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); }
center { display: block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================== app bar */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); flex: 0 0 auto; }
.brand img { width: 40px; height: 40px; }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: .2px; white-space: nowrap; }
.brand-name b { color: var(--heart); font-weight: 800; }

.nav { display: flex; gap: 4px; margin-left: 8px; flex: 1 1 auto; }
.nav a {
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.nav a:hover { background: var(--brand-soft); color: var(--brand-strong); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); }
.nav svg, .tabbar svg, .menu-list svg { width: 20px; height: 20px; flex: 0 0 auto; }

.appbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.appbar-actions .btn, .appbar-actions .buttonFooter { white-space: nowrap; margin: 0; }
.appbar-actions svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* dropdown menus built on <details> */
.dropdown { position: relative; }
.dropdown > summary {
  white-space: nowrap;
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); font-weight: 600; font-size: .9rem; background: var(--surface);
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary svg { width: 20px; height: 20px; flex: 0 0 auto; }
.dropdown > summary:hover, .dropdown[open] > summary { background: var(--brand-soft); color: var(--brand-strong); }
.dropdown .avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--surface); font-size: .8rem; font-weight: 800;
}
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}
.menu-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.menu-list a:hover { background: var(--brand-soft); }
.menu-list .menu-head { padding: 8px 10px 6px; font-size: .8rem; color: var(--muted); }
.menu-list .menu-head strong { display: block; color: var(--ink); font-size: .95rem; }
.menu-list hr { margin: 6px 0; }

.page-head { max-width: 1200px; margin: 18px auto 10px; padding: 0 16px; }
.page-head h1 { margin: 0; font-size: 1.6rem; }
.page-head .subtitle { margin: 2px 0 0; color: var(--muted); font-size: 1rem; }

/* phone tab bar */
.tabbar { display: none; }

@media (max-width: 1060px) {
  .appbar .dropdown .label { display: none; } /* make room for the tabs: menus show just their icons */
}
@media (max-width: 760px) {
  .nav { display: none; }
  .brand-name { font-size: 1.05rem; }
  .brand img { width: 34px; height: 34px; }
  .appbar .label { display: none; }
  .appbar-actions a.login-btn { display: none; } /* "Log in" is on the tab bar */
  .appbar-actions .btn-accent { padding: 6px 10px; }
  .tabbar {
    display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -1px 3px rgb(0 0 0 / 8%);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600;
  }
  .tabbar a[aria-current="page"] { color: var(--brand); }
  .tabbar svg { width: 24px; height: 24px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .page-head { margin-top: 12px; }
  .page-head h1 { font-size: 1.3rem; }
}

/* ============================================================== footer */
.site-footer {
  max-width: 1200px; margin: 28px auto 0; padding: 16px; border-top: 1px solid var(--line);
  text-align: center; color: var(--muted); font-size: .85rem;
}
.site-footer .tagline { font-weight: 600; margin-bottom: 6px; }
.site-footer .tagline .TallCaps { font-size: 1.1em; color: var(--brand); }
.site-footer nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.site-footer select { margin-left: 8px; font-size: .8rem; }
#results { max-width: 1200px; margin: 0 auto; padding: 0 16px; font-size: .8rem; color: var(--muted); }

/* ============================================================== buttons (incl. the site's older classes) */
.btn, .ButtonEditText, .ButtonEditTextSmall, .buttonFooter, .ButtonXtrNow, .ButtonDelete, .ButtonGrnNow, .UserName {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; margin: 2px;
  border-radius: 8px; border: 1px solid transparent;
  font: 600 .92rem/1.2 var(--font); text-decoration: none; text-shadow: none; cursor: pointer;
  box-shadow: none; filter: none; vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.btn, .ButtonEditText, .ButtonEditTextSmall, .UserName { background: var(--brand); color: #fff; }
.btn:hover, .ButtonEditText:hover, .ButtonEditTextSmall:hover, .UserName:hover { background: var(--brand-strong); color: #fff; }
.ButtonEditTextSmall { min-height: 28px; padding: 3px 9px; font-size: .8rem; }
.buttonFooter, .btn-secondary { background: var(--surface); color: var(--brand-strong); border-color: var(--line); }
.buttonFooter:hover, .btn-secondary:hover { background: var(--brand-soft); color: var(--brand-strong); }
.ButtonXtrNow, .btn-accent { background: var(--accent); color: var(--accent-ink); }
.ButtonXtrNow:hover, .btn-accent:hover { filter: brightness(1.05); color: var(--accent-ink); }
.ButtonDelete, .btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ButtonDelete:hover, .btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.ButtonDelete[disabled], button[disabled] { opacity: .55; cursor: not-allowed; }
.ButtonGrnNow { background: var(--ok); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn, .ButtonEditText, .ButtonEditTextSmall, .UserName, .ButtonGrnNow { color: #0f1520; }
  .btn:hover, .ButtonEditText:hover, .ButtonEditTextSmall:hover, .UserName:hover { color: #0f1520; }
  /* secondary / accent buttons keep their own text colors (the rules above would otherwise make them dark-on-dark) */
  .btn.btn-secondary, .btn.btn-secondary:hover { color: var(--brand-strong); }
  .btn.btn-accent, .btn.btn-accent:hover { color: var(--accent-ink); }
}
.btn.btn-secondary { background: var(--surface); color: var(--brand-strong); border-color: var(--line); }
.btn.btn-secondary:hover { background: var(--brand-soft); }
.btn.btn-accent { background: var(--accent); color: var(--accent-ink); }
/* plain buttons the pages create without a class */
button:not([class]), input[type=button]:not([class]), input[type=submit]:not([class]), input[type=reset]:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px; margin: 2px;
  font: 600 .9rem/1.2 var(--font); color: var(--brand-strong); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; vertical-align: middle;
}
button:not([class]):hover, input[type=button]:not([class]):hover, input[type=submit]:not([class]):hover { background: var(--brand-soft); }
.btn img, .ButtonEditText img, .ButtonDelete img, .buttonFooter img { width: 18px; height: 18px; }
.icon { width: 18px; height: 18px; vertical-align: -3px; }
.btn-icon { padding: 6px 9px; }

/* ============================================================== forms */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=search], input[type=number], input:not([type]), select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; max-width: 100%; box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--brand); vertical-align: middle; }
input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.textentry, .widetextentry { width: 100%; max-width: 32rem; }
.widetextentry { max-width: 100%; }
label { cursor: pointer; }

/* ============================================================== cards / layout helpers */
.card, .tabcontent {
  background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px !important; margin: 0 auto 16px !important; box-sizing: border-box;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.highlight { background: var(--warn-soft); color: var(--warn-ink); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.notice { background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--radius); padding: 10px 14px; margin: 0 auto 14px; max-width: 1200px; box-sizing: border-box; }
.notice a { color: inherit; font-weight: 700; }

/* generic tables (admin, log, to-do...) */
table { border-collapse: collapse; max-width: 100%; }
table, tr, td, th { border-color: var(--line) !important; }
@media (max-width: 760px) {
  table:not(.cards-on-phone) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* the older "divTable" layout */
.divTable { display: table; width: 100%; }
.divTableRow { display: table-row; }
.divTableHeading, .divTableHead { display: table-header-group; background: var(--surface-2); font-weight: 600; }
.divTableCell, .divTableHead { display: table-cell; padding: 6px 10px; }
.divTableBody { display: table-row-group; }
.divTableFoot { display: table-footer-group; background: var(--surface-2); font-weight: 600; }

@media (max-width: 760px) {
  /* older two-column "divTable" forms and lists stack on phones (the Tasks board has its own card layout) */
  .divTable:not(.task-table) { display: block; }
  .divTable:not(.task-table) > .divTableBody, .divTable:not(.task-table) .divTableRow { display: block; }
  .divTable:not(.task-table) .divTableRow { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .divTable:not(.task-table) .divTableCell { display: block; text-align: left !important; padding: 2px 0; }
  .divTable:not(.task-table)[id^=admintable] .divTableCell, .divTable:not(.task-table)[id^=logtable] .divTableCell, .divTable:not(.task-table)[id^=todotable] .divTableCell { padding: 4px 12px; border: 0 !important; }
  .divTable:not(.task-table) input:not([type=checkbox]):not([type=radio]), .divTable:not(.task-table) textarea, .divTable:not(.task-table) select { width: 100%; }
  textarea { width: 100%; }
}

/* The site-admin tables (to-do, admin, log) color their rows with fixed pastel backgrounds,
   so they always use the light palette; otherwise dark mode would put light text on light rows. */
[id^=todotable], [id^=admintable], [id^=logtable] {
  color-scheme: light;
  --ink: #1d2735; --ink-2: #4a5566; --muted: #6b7686; --surface: #ffffff; --surface-2: #f8fafc; --line: #d8dee8;
  --brand: #1e5799; --brand-strong: #153f70; --brand-soft: #e3edf9; --danger: #c22a2a; --danger-soft: #fde8e8;
  color: var(--ink); background: var(--surface);
}
[id^=todotable] a, [id^=admintable] a, [id^=logtable] a { color: var(--brand); }

/* ============================================================== Tasks page */
.tasks-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 0 16px; align-items: start; }
.tasks-layout .legend { position: sticky; top: 76px; }
.tasks-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
#TaskTable { display: table-row-group; }
.task-head { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
.task-head .divTableCell { padding: 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
.task-row .divTableCell, .task-new .divTableCell { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.task-new { background: var(--surface-2); }
.task-new input, .task-new select { width: 100%; margin-bottom: 6px; }
.task-row { position: relative; }
.task-row .divTableCell:first-child { border-left: 5px solid transparent; }
.task-row.is-unassigned { background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); }
.task-row.is-unassigned .divTableCell:first-child { border-left-color: var(--heart); }
.task-row.is-mine { background: var(--info-soft); }
.task-row.is-mine .divTableCell:first-child { border-left-color: var(--brand); }
.task-row.is-done, .task-row.is-locked { background: var(--done-soft); color: var(--muted); }
.task-row.is-done .divTableCell:first-child, .task-row.is-locked .divTableCell:first-child { border-left-color: var(--muted); }
.task-actions { white-space: nowrap; text-align: center; width: 1%; }
.task-actions .btn-icon { width: 38px; height: 38px; min-height: 38px; padding: 0; }
.task-actions .ButtonEditText, .task-actions .buttonFooter { padding: 6px 10px; }
.task-title { font-weight: 700; font-size: 1.05rem; }
.task-meta { font-size: .9rem; color: var(--ink-2); margin-top: 3px; }
.task-meta .label { color: var(--muted); font-size: .8rem; margin-right: 3px; }
.task-dates > div { padding: 3px 6px; border-radius: 6px; margin-bottom: 3px; white-space: nowrap; }
.date-soon { background: var(--warn-soft); }
.date-overdue { background: var(--danger-soft); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; margin-left: 4px; }
.badge-soon { background: var(--accent); color: var(--accent-ink); }
.badge-overdue { background: var(--danger); color: #fff; }
@media (prefers-color-scheme: dark) { .badge-overdue { color: #1a0b0b; } }
.prio { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 999px; font-size: .85rem; margin-top: 4px; }
.prio-2 { background: var(--info-soft); }
.prio-3 { background: var(--warn-soft); color: var(--warn-ink); }
.prio-4 { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); font-weight: 700; }
.prio-5 { background: var(--danger-soft); color: var(--danger); font-weight: 800; }
.task-assignee { min-width: 10rem; }
.task-assignee select { width: 100%; }
.star-btn { cursor: pointer; vertical-align: middle; width: 26px; height: 26px; }
.legend { font-size: .85rem; color: var(--ink-2); }
.legend ul { padding-left: 0; list-style: none; margin: 0 0 10px; }
.legend li { padding: 6px 8px; border-radius: 6px; margin-bottom: 4px; border-left: 5px solid transparent; }
.legend .is-unassigned { background: var(--danger-soft); border-left-color: var(--heart); }
.legend .is-mine { background: var(--info-soft); border-left-color: var(--brand); }
.legend .is-done { background: var(--done-soft); border-left-color: var(--muted); }
.legend-inline { display: none; }
.download-link { text-align: center; margin: 12px 0; font-size: .85rem; }

@media (max-width: 980px) {
  .tasks-layout { grid-template-columns: minmax(0, 1fr); }
  .tasks-layout > .legend { display: none; }
  .legend-inline { display: block; max-width: 1280px; margin: 14px auto 0; padding: 0 16px; box-sizing: border-box; }
  .legend-inline summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 6px 0; }
}

/* toolbar: filter tabs, search, add */
.task-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 1280px; margin: 0 auto 14px; padding: 0 16px; box-sizing: border-box; }
.filter-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; max-width: 100%; }
.filter-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); font: 600 .9rem var(--font); padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.filter-tabs button:hover { background: var(--brand-soft); }
.filter-tabs button.active { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .filter-tabs button.active { color: #0f1520; } }
.filter-tabs .count { font-size: .75rem; min-width: 1.4em; padding: 1px 6px; border-radius: 999px; background: var(--done-soft); color: var(--ink-2); text-align: center; }
.filter-tabs button.active .count { background: rgb(255 255 255 / 25%); color: inherit; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }
.search-box input { width: 14rem; padding-left: 34px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center / 16px; }
.task-row[hidden] { display: none !important; }
.tasks-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.task-row.is-done .act-edit, .task-row.is-done .act-complete { display: none; }
@media (max-width: 760px) {
  .task-toolbar { flex-direction: column; align-items: stretch; }
  .filter-tabs { border-radius: var(--radius); }
  .filter-tabs button { flex: 1 0 auto; padding: 7px 10px; }
  .toolbar-right { width: 100%; }
  .search-box { flex: 1; }
  .search-box input { width: 100%; }
}

.purge-row { width: 100%; text-align: right; }
.badge-repeat { background: var(--brand-soft); color: var(--brand-strong); text-transform: none; letter-spacing: 0; font-weight: 700; }
.date-field { display: flex; gap: 6px; align-items: center; }
.date-field input { flex: 1; min-width: 0; }
.today-btn { min-height: 0; padding: 6px 10px; margin: 0; font-size: .85rem; }

/* add / edit task dialog */
.task-dialog { width: min(560px, 94vw); }
.task-dialog form { margin: 0; }
.task-dialog .dialog-body label:first-of-type { margin-top: 0; }
.task-dialog input:not([type=hidden]), .task-dialog select, .task-dialog textarea { width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: .85rem; margin: 10px 0 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }

/* phones: each task becomes a card */
@media (max-width: 760px) {
  .tasks-board { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .tasks-board .divTable, .tasks-board .divTableBody, #TaskTable { display: block; }
  .task-head { display: none; }
  .task-row, .task-new {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; min-width: 0;
    margin: 0 0 12px; padding: 12px 12px 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: var(--shadow); border-left-width: 6px;
  }
  .task-row .divTableCell, .task-new .divTableCell { display: block; padding: 0; border: 0 !important; }
  .task-row .task-main { grid-column: 1 / -1; order: 1; }
  .task-row .task-dates { grid-column: 1; order: 2; }
  .task-row .task-cat { grid-column: 2; order: 3; text-align: right; }
  .task-row .task-assignee { grid-column: 1 / -1; order: 4; }
  .task-row .task-actions { grid-column: 1 / -1; order: 5; width: auto; text-align: left; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px !important; border-top: 1px solid var(--line) !important; }
  .task-row.is-unassigned { border-left-color: var(--heart); }
  .task-row.is-mine { border-left-color: var(--brand); }
  .task-row.is-done, .task-row.is-locked { border-left-color: var(--muted); }
  .task-new { grid-template-columns: 1fr; border-left-color: var(--accent); }
  .task-new .divTableCell::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
  .task-new .task-actions { order: 9; text-align: left; }
  .task-dates > div { display: inline-block; }
}

/* ============================================================== Members page */
.members-table { margin: 0 auto 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line) !important; overflow: hidden; }
.members-table td { padding: 8px 10px; vertical-align: middle; }
.members-table .members-head td { background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.members-table .is-me { background: var(--brand-soft) !important; }
.members-table .ButtonEditText.editdata { background: transparent; color: var(--ink); border: 1px dashed var(--line); font-weight: 600; justify-content: flex-start; width: 100% !important; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-table .ButtonEditText.editdata:hover { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 760px) {
  .members-table, .members-table tbody { display: block; border: 0 !important; background: transparent; box-shadow: none; }
  .members-table { margin: 0 16px 16px; overflow: visible; }
  .members-table tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; margin-bottom: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: var(--shadow); }
  .members-table tr.members-head { display: none; }
  .members-table td { display: block; padding: 0; border: 0 !important; text-align: left !important; }
  .members-table td[data-label] { grid-column: span 2; }
  .members-table td.wide, .members-table td[colspan] { grid-column: 1 / -1; }
  .members-table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
  .members-table td.perm { grid-column: span 1; text-align: center !important; }
  .members-table td.filler { display: none; }
}

.pending-invites { max-width: 900px; }
.pending-invites h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pending-invites ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pending-invites li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.invite-link { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.invite-link input { flex: 1 1 18rem; }
@media (max-width: 760px) { .pending-invites { margin: 0 16px 16px !important; } }

/* ============================================================== My Info, account forms */
.perm-chip { display: inline-block; padding: 2px 10px; margin: 2px 2px 2px 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: .88rem; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  font[color=blue], font[color="#000099"], font[color=BLUE] { color: var(--brand); }
  font[color=red], font[color=RED] { color: var(--danger); }
}
.skill { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; margin: 3px; background: var(--surface-2); }
.logindiv { max-width: 440px; margin: 24px auto !important; background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px !important; box-sizing: border-box; text-align: left; }
.logindiv input[type=text], .logindiv input[type=password], .logindiv input[type=email] { width: 100%; }
@media (max-width: 760px) { .logindiv { width: calc(100% - 32px); margin: 16px auto !important; } }
.stack-form h2 { margin: 0 0 6px; }
.stack-form label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .92rem; }
.stack-form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.stack-form .notice { margin: 8px 0; }
.btn-block { display: flex; width: 100%; margin: 16px 0 0; min-height: 44px; font-size: 1rem; }
.login-links { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; }
.login-links p { margin: 4px 0; }
.mainlogo { width: 200px; height: 200px; }

/* ============================================================== welcome page (logged out) */
.welcome { padding-top: 24px; }
.hero { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: center; }
.hero .mainlogo { width: 240px; height: 240px; padding: 0; }
.hero h1 { font-size: 2rem; margin: 6px 0 12px; }
.hero p { font-size: 1.05rem; color: var(--ink-2); max-width: 46rem; }
.hero .eyebrow { font-size: .9rem; font-weight: 600; color: var(--muted); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-actions .btn { min-height: 46px; padding: 10px 22px; font-size: 1rem; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 36px auto 0; }
.plans .card { margin: 0 !important; display: flex; flex-direction: column; }
.plan h2 { margin: 0; font-size: 1.15rem; }
.plan .price { font-size: 1.6rem; font-weight: 800; margin: 4px 0 8px; color: var(--ink); }
.plan .price .muted { font-size: .95rem; font-weight: 500; }
.plan ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); flex: 1; }
.plan li { margin-bottom: 4px; }
.plan .btn { align-self: flex-start; }
.plans-note { text-align: center; font-size: .9rem; margin: 12px auto 0; max-width: 760px; }
.plans-3, .plans-4 { max-width: 1100px; }
.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan .plan-tagline { margin: 0; font-size: .9rem; }
.plan form { margin: 0; }
.plan button[disabled] { opacity: .55; cursor: not-allowed; }
.pricing .lead { max-width: 760px; margin: 0 auto; text-align: center; color: var(--ink-2); }
.pricing-faq { max-width: 760px; margin: 24px auto 0 !important; }
.pricing-faq h2 { margin-top: 0; }
.pricing-faq h3 { font-size: 1rem; margin: 16px 0 4px; }
.pricing-faq p { margin: 0; color: var(--ink-2); }
@media (max-width: 1000px) { .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plans, .plans-3, .plans-4 { grid-template-columns: 1fr; } }
.terms { padding-top: 4px; }
.sample-shot { margin: 36px auto 0; max-width: 720px; text-align: center; }
.sample-shot img { border-radius: var(--radius); box-shadow: 0 8px 30px rgb(0 0 0 / 15%); border: 1px solid var(--line); }
.sample-shot figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .hero .mainlogo { width: 150px; height: 150px; margin: 0 auto; }
  .hero h1 { font-size: 1.5rem; }
  .hero-actions { justify-content: center; }
}

/* ============================================================== dialog (popup.js) */
dialog.app-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: min(640px, 92vw); max-height: 85vh; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / 35%); }
dialog.app-dialog::backdrop { background: rgb(15 21 32 / 55%); }
dialog.app-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
dialog.app-dialog header h2 { margin: 0; font-size: 1.15rem; }
dialog.app-dialog .dialog-body { padding: 16px 18px; overflow: auto; max-height: calc(85vh - 70px); }
.popup { background: var(--surface); color: var(--ink); }
.popup h2 { color: var(--ink); }

/* ============================================================== older page-level pieces */
.topfade { background: none; }
.topbar, .sidebar, .bottombar { font-size: .9rem; }
.TallCaps { color: var(--brand); }

/* ============================================================== toasts (app.js) */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 12px 16px; border-radius: var(--radius); background: #1d2735; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
  font-size: .95rem; opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast-error { background: var(--danger); }
.toast-action { background: transparent; border: 0; color: #9cc3ff; font: 700 .95rem var(--font); cursor: pointer; padding: 4px 6px; text-transform: uppercase; letter-spacing: .03em; }
@media (prefers-color-scheme: dark) { .toast { background: #e6ebf2; color: #0f1520; } .toast-action { color: #1e5799; } }
@media (max-width: 760px) { .toast { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); } }
#results { display: none; } /* its messages are shown as toasts */

@media (prefers-reduced-motion: reduce) {
  .heartbeat, .bounce { animation: none !important; }
  * { transition: none !important; }
}

@media print {
  .appbar, .tabbar, .site-footer, .task-actions { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* FAQ: links to other pages sit inside sentences, so keep them inline-sized */
.faq a.ButtonEditText { min-height: 0; padding: 1px 8px; margin: 0 1px; font-size: .9em; vertical-align: baseline; border-radius: 6px; }


/* AdSense units (authenticate.php ShowAdUnit) */
.ad-unit { max-width: 970px; margin: 24px auto 0; padding: 0 16px; box-sizing: border-box; min-height: 0; }