:root {
  --bg: #f4f3f0;
  --card: #ffffff;
  --panel: #fffdf9;
  --ink: #1f1e1b;
  --muted: #6b6760;
  --line: #e3e0da;
  --soft: #ebe8e1;
  --edge: #8e877a;
  --navbg: #fbfaf7;
  --navink: #625d52;
  --navactive-bg: #e5ecdf;
  --navactive-ink: #334d35;
  --warn: #a13f31;
  --brand: #344c3c;
  --accent: #3e5d43;
  --accent-ink: #ffffff;
  --btn-bg: #fffdf9;
  --btn-line: #dcd4c5;
  --head-bg: #f9f8f5;
  --rail-bg: #fbfaf8;
  --rail-line: #d7cbb7;
  --today: #fff6df;
  --empty: #dedede;
  --empty-line: #b9b5ad;
  --red: #c00000;
  --openblue: #0d4dbf;
  --chip-bg: #ddf3e1;
  --chip-ink: #1d6b32;
  --chip-late-bg: #fbe2e0;
  --chip-late-ink: #9b2b22;
  --note-bg: #fff8dc;
  --note-line: #eedd9a;
  --hrs-line: #bfe0b5;
  --hrs-bar: #8fd48a;
  --open-line: #ebd98a;
  --open-bar: #f2d45c;
  --alpha: #2f5f9e;
  --bravo: #d98324;
  --charlie: #2e8b8b;
  --tier0: #a9a49b;
  --rail2-bg: #eeece3;
  --rail2-active: #dfe6d7;
  --rail2-active-ink: #3d5539;
  --avatar-bg: #737d59;
  --sms-bg: #fff0d6;
  --sms-ink: #835b19;
  --sms-line: #e5ce9f;
  --danger: #973c32;
  --danger-bg: #fbe9e4;
  --sheet: #f4f1ea;
  --focus: #c97b2d;
  --loctitle: #344c3c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #2a2a2a;
    --card: #333333;
    --panel: #383838;
    --ink: #eceae5;
    --muted: #a9a6a0;
    --line: #454545;
    --soft: #3f3f3f;
    --edge: #5c5c5c;
    --navbg: #222222;
    --navink: #c9c6c0;
    --navactive-bg: #3b4a3e;
    --navactive-ink: #d6e6d2;
    --btn-bg: #383838;
    --btn-line: #555555;
    --head-bg: #383838;
    --rail-bg: #343434;
    --rail-line: #555555;
    --today: #4a4330;
    --empty: #454545;
    --empty-line: #666666;
    --note-bg: #4a4426;
    --note-line: #7a6b2a;
    --sheet: #2e2e2e;
    --rail2-bg: #333333;
    --rail2-active: #3b4a3e;
    --rail2-active-ink: #d6e6d2;
    --sms-bg: #4a3e24;
    --sms-ink: #e6c98a;
    --sms-line: #7a6b2a;
    --danger-bg: #4a2e2a;
    --chip-bg: #2f4a35;
    --chip-ink: #bfe6c4;
    --chip-late-bg: #4a2825;
    --chip-late-ink: #f0b6b0;
    --loctitle: #cfe3c9;
  }
}
:root[data-theme='dark'] {
  --bg: #2a2a2a;
  --card: #333333;
  --panel: #383838;
  --ink: #eceae5;
  --muted: #a9a6a0;
  --line: #454545;
  --soft: #3f3f3f;
  --edge: #5c5c5c;
  --navbg: #222222;
  --navink: #c9c6c0;
  --navactive-bg: #3b4a3e;
  --navactive-ink: #d6e6d2;
  --btn-bg: #383838;
  --btn-line: #555555;
  --head-bg: #383838;
  --rail-bg: #343434;
  --rail-line: #555555;
  --today: #4a4330;
  --empty: #454545;
  --empty-line: #666666;
  --note-bg: #4a4426;
  --note-line: #7a6b2a;
  --sheet: #2e2e2e;
  --rail2-bg: #333333;
  --rail2-active: #3b4a3e;
  --rail2-active-ink: #d6e6d2;
  --sms-bg: #4a3e24;
  --sms-ink: #e6c98a;
  --sms-line: #7a6b2a;
  --danger-bg: #4a2e2a;
  --chip-bg: #2f4a35;
  --chip-ink: #bfe6c4;
  --chip-late-bg: #4a2825;
  --chip-late-ink: #f0b6b0;
  --loctitle: #cfe3c9;
}
/* The calendars keep their light cells in every theme. */
.calwrap,
.schwrap {
  --card: #ffffff;
  --panel: #fffdf9;
  --ink: #1f1e1b;
  --muted: #6b6760;
  --line: #e3e0da;
  --soft: #ebe8e1;
  --edge: #8e877a;
  --head-bg: #f9f8f5;
  --rail-bg: #fbfaf8;
  --rail-line: #d7cbb7;
  --btn-bg: #fffdf9;
  --btn-line: #dcd4c5;
  --today: #fff6df;
  --empty: #dedede;
  --empty-line: #b9b5ad;
  --note-bg: #fff8dc;
  --note-line: #eedd9a;
  --chip-bg: #ddf3e1;
  --chip-ink: #1d6b32;
  --chip-late-bg: #fbe2e0;
  --chip-late-ink: #9b2b22;
  color: var(--ink);
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    Roboto,
    sans-serif;
  font-size: 14px;
  line-height: 1.35;
}
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--btn-line);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
textarea {
  min-height: 70px;
  resize: vertical;
}
label {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
  margin: 10px 0 4px;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.hidden {
  display: none !important;
}
/* ---- top bar ---- */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px;
  background: var(--navbg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  margin-right: 6px;
}
.brand i {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.nav {
  display: flex;
  gap: 2px;
  flex: 1;
}
.nav button {
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--navink);
  font-size: 13.5px;
  background: none;
  border: none;
}
.nav button.on {
  background: var(--navactive-bg);
  color: var(--navactive-ink);
}
.nav button.warn {
  color: var(--warn);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav button.warn b {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warn);
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}
.me {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  margin-left: auto;
  white-space: nowrap;
}
.me b {
  display: block;
}
.me small {
  color: var(--muted);
}
.theme {
  margin-left: 6px;
  height: 32px;
  padding: 2px;
}
.theme button {
  padding: 0 8px;
  font-size: 12px;
}
.viewas {
  height: 30px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 6px;
  margin-left: 6px;
  color: var(--muted);
}
.av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.av.soft {
  background: var(--soft);
  color: var(--ink);
}
#burger {
  display: none;
  width: 40px;
  height: 36px;
  border: 1px solid var(--btn-line);
  border-radius: 8px;
  background: var(--btn-bg);
  font-size: 18px;
}
/* ---- page ---- */
.page {
  padding: 18px 24px 40px;
  max-width: 1440px;
  margin: 0 auto;
}
.h1 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.h1 h1 {
  display: none;
}
.h1 .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}
.panel {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 12px 16px;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.grow {
  flex: 1 1 auto;
}
.btn {
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--btn-line);
  border-radius: 8px;
  background: var(--btn-bg);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn.pri {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn.sms {
  background: var(--sms-bg);
  color: var(--sms-ink);
  border-color: var(--sms-line);
}
.btn.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #e3b9b0;
}
.btn.sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.seg {
  display: inline-flex;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  gap: 2px;
}
.seg button {
  padding: 0 12px;
  border-radius: 5px;
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
  background: none;
  border: none;
}
.seg button.on {
  background: var(--soft);
  color: var(--ink);
  font-weight: 600;
}
select.ctl {
  width: auto;
  height: 36px;
  padding: 0 10px;
  font-weight: 600;
}
.stat {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.stat b {
  font-size: 20px;
  font-weight: 700;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.stat span {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.stat .w {
  margin-left: auto;
  color: var(--warn);
  cursor: pointer;
}
.stat .w b {
  color: var(--warn);
}
.chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.chip.late {
  background: var(--chip-late-bg);
  color: var(--chip-late-ink);
}
.chip.tag {
  background: var(--soft);
  color: var(--ink);
}
.chip.res {
  background: var(--sms-bg);
  color: var(--sms-ink);
}
.chip.app {
  background: var(--chip-late-bg);
  color: var(--chip-late-ink);
}
.chip.t-alpha {
  background: var(--alpha);
  color: #fff;
}
.chip.t-bravo {
  background: var(--bravo);
  color: #fff;
}
.chip.t-charlie {
  background: var(--charlie);
  color: #fff;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.toast.on {
  opacity: 1;
}
/* ---- calendar toolbar ---- */
.caltb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.caltb .sp {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.phn {
  display: none;
}
.tloc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  padding: 2px 4px;
  background: none;
  border: none;
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--loctitle);
}
.tloc .caret {
  font-size: 16px;
}
.locwrap {
  position: relative;
  display: inline-block;
}
.locpop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.locpop button {
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}
.locpop button.cur {
  background: var(--soft);
}
.locpop button:hover {
  background: var(--navactive-bg);
}
.tloc:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.calhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-right: 8px;
}
.ttl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  flex-wrap: wrap;
}
.ttl .arrows {
  display: inline-flex;
  gap: 4px;
}
.ttl .arrows button {
  width: 32px;
  height: 28px;
  border: 1px solid var(--btn-line);
  border-radius: 7px;
  background: var(--card);
  font-size: 12px;
}
.lastupd {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 6px;
}
.caltb {
  margin-bottom: 10px;
}
/* ---- comfortable cards ---- */
.calwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#cards {
  min-width: 1100px;
}
.wkcard {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.wkcard.last {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.chead,
.cwk {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
}
.chead {
  background: var(--head-bg);
  border-bottom: 1px solid var(--line);
}
.chead div {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.cwk {
  border-bottom: 1px solid var(--line);
}
.cwk:last-child {
  border-bottom: none;
}
.crail {
  grid-row: 1 / span var(--rows, 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-right: 1px solid var(--line);
  background: var(--rail-bg);
}
.crail small {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.crail button {
  width: 48px;
  height: 24px;
  border: 1px solid var(--rail-line);
  border-radius: 6px;
  background: var(--card);
  font-size: 10.5px;
  font-weight: 600;
}
.cday {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--rows, 3);
  border-right: 1px solid var(--line);
  background: var(--card);
  min-width: 0;
}
.cday:last-child {
  border-right: none;
}
.cday.out {
  background: var(--soft);
}
.cday.out .cdnum {
  color: var(--muted);
}
.cday.tdy {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.cdtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px 4px;
  height: 30px;
  gap: 4px;
}
.cdnum {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.dnote {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cgrp {
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-content: start;
  border-top: 1px solid var(--line);
}
.cgh {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.cslot {
  border: 1px solid var(--line);
  border-left: 5px solid var(--tier0);
  border-radius: 6px;
  padding: 6px 9px;
  min-height: 36px;
  background: var(--card);
  font-size: 13px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.cslot:hover {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.cslot.t-alpha {
  border-left-color: var(--alpha);
}
.cslot.t-bravo {
  border-left-color: var(--bravo);
}
.cslot.t-charlie {
  border-left-color: var(--charlie);
}
.cslot.hrs {
  border-color: var(--hrs-line);
  border-left: 12px solid var(--hrs-bar) !important;
}
.cslot.ph {
  border-color: var(--open-line);
  border-left: 12px solid var(--open-bar) !important;
}
.cslot.empty {
  background: var(--empty);
  border: 1px dashed var(--empty-line);
  color: #5a5750;
  font-size: 12.5px;
}
.cnm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap {
  color: var(--red);
}
.opennm {
  color: var(--openblue);
  font-weight: 700;
}
.chh {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
}
.cph,
.cbk {
  font-size: 11.5px;
  color: var(--muted);
}
.cnote {
  font-size: 11.5px;
  color: var(--red);
  font-style: italic;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 11.5px;
  padding: 8px 12px;
  background: var(--rail-bg);
  border: 1px solid var(--edge);
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend .sw {
  display: inline-block;
  width: 18px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
}
/* ---- classic table ---- */
#classic {
  min-width: 960px;
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  table-layout: fixed;
}
#classic th {
  background: var(--head-bg);
  border: 1px solid var(--edge);
  padding: 6px 4px;
  font-size: 12px;
}
#classic th.railh {
  width: 64px;
}
#classic td {
  border: 1px solid var(--edge);
  vertical-align: top;
  padding: 0;
}
#classic td.railtd {
  width: 64px;
  text-align: center;
  vertical-align: middle;
  background: var(--rail-bg);
}
#classic td.railtd button {
  width: 48px;
  height: 22px;
  font-size: 10.5px;
  margin: 2px 0;
  border: 1px solid var(--rail-line);
  border-radius: 6px;
  background: var(--card);
}
#classic td.tdy {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.dts {
  font-weight: 700;
  font-size: 12px;
  padding: 3px 6px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--line);
  color: #b03a2e;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
td.out .dts {
  color: var(--muted);
  background: var(--soft);
}
.mband {
  padding: 3px 5px 4px;
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  cursor: pointer;
  color: #1f1e1b;
}
.mband:last-child {
  border-bottom: none;
}
.mband:hover {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.mband .bt {
  display: block;
  font-weight: 700;
  font-size: 10px;
  color: #444;
}
.mband .bw {
  font-size: 12.5px;
}
.mband .bs {
  display: block;
  font-size: 10.5px;
  color: #555;
}
/* ---- editor dialog ---- */
dialog {
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 0;
  background: var(--card);
  color: var(--ink);
  width: min(560px, 94vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.edtop {
  padding: 14px 18px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.edkick {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
}
.edtitle {
  font-size: 19px;
  font-weight: 700;
  margin: 2px 0;
}
.edsub {
  font-size: 12.5px;
  color: var(--muted);
}
.edx {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 18px;
}
.edbody {
  padding: 6px 18px 14px;
}
.edsec {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin: 16px 0 0;
}
.edcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.edcols3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.edcols4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pdfgrid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.pdfgrid td {
  padding: 2px 3px 2px 0;
}
.pdfgrid td.del {
  width: 36px;
}
.pdfgrid input {
  padding: 6px 8px;
  font-size: 13px;
}
.edrep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--soft);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
}
.edrep select {
  width: 80px;
}
.edfoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.edfoot .grow {
  flex: 1;
}
.warns {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.warnline {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
}
/* ---- side panels (phone) ---- */
#scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}
.side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 88vw;
  background: var(--brand);
  color: #f3efe6;
  z-index: 50;
  transform: translateX(105%);
  transition: transform 0.18s ease;
  padding: 10px 12px 14px;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side.open {
  transform: none;
}
.sideh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  padding: 2px 2px 4px;
}
.sideh button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #f3efe6;
  font-weight: 600;
}
.ag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 6px 8px 8px;
}
.agh {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #bfcdbf;
  margin: 0 0 4px 2px;
}
.ag button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 9px 8px;
  font-size: 14px;
  background: none;
  border: none;
  font-weight: 600;
  color: #f3efe6;
  border-radius: 8px;
}
.ag button.cur {
  background: rgba(255, 255, 255, 0.18);
}
#drawer {
  left: 0;
  right: auto;
  transform: translateX(-105%);
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.25);
  padding: 16px 14px;
}
#drawer .dwho {
  padding: 4px 8px 10px;
}
#drawer .dwho b {
  display: block;
  font-size: 20px;
  line-height: 1.15;
}
#drawer .dwho small {
  display: block;
  font-size: 12px;
  color: #bfcdbf;
  margin-top: 2px;
}
#drawer .dnav {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#drawer .dnav button {
  font-size: 16px;
  padding: 11px 10px;
}
#drawer .dfoot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#drawer .dfoot button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 10px;
  font-size: 15px;
  background: none;
  border: none;
  color: #f3efe6;
  border-radius: 8px;
  font-weight: 600;
}
#drawer .dfoot button.dim {
  color: #bfcdbf;
  font-weight: 500;
}
#drawer.open {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .side {
    transition: none;
  }
}
/* ---- split screens ---- */
.split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: start;
}
.rail2 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--rail2-bg);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 12px;
}
.rail2 button {
  text-align: left;
  padding: 7px 12px;
  border-radius: 7px;
  border: none;
  background: none;
  font-weight: 600;
  color: var(--navink);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.rail2 button span:last-child {
  font-weight: 500;
  color: var(--muted);
}
.rail2 button.on {
  background: var(--rail2-active);
  color: var(--rail2-active-ink);
}
.list {
  display: flex;
  flex-direction: column;
}
.rowitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.rowitem:last-child {
  border-bottom: none;
}
.rowitem.on {
  background: var(--soft);
  border-radius: 8px;
}
.rowitem .nm {
  font-weight: 600;
}
.rowitem .sub {
  color: var(--muted);
  font-size: 12px;
}
.rowitem .right {
  margin-left: auto;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.backbtn {
  display: none;
}
.kv {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 12px;
  font-size: 13px;
  margin-top: 6px;
}
.kv b {
  color: var(--muted);
  font-weight: 600;
}
.sites {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.siterow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.siterow .grow {
  flex: 1;
}
.load {
  background: var(--soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  margin-top: 8px;
}
.load.bad {
  background: var(--danger-bg);
  color: var(--danger);
}
/* ---- schedule grid ---- */
.schwrap {
  overflow-x: auto;
}
table.sch {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  background: var(--card);
  table-layout: fixed;
}
.sch th {
  background: var(--head-bg);
  border: 1px solid var(--line);
  padding: 6px 4px;
  font-size: 11.5px;
  text-align: center;
}
.sch th:first-child {
  width: 180px;
  text-align: left;
  padding-left: 10px;
}
.sch th.tot {
  width: 90px;
}
.sch td {
  border: 1px solid var(--line);
  padding: 5px 6px;
  vertical-align: top;
  font-size: 12.5px;
  text-align: center;
}
.sch td:first-child {
  text-align: left;
  font-weight: 600;
}
.sch td.tot {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sch .loc {
  display: block;
  font-weight: 600;
}
.sch .tm {
  display: block;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11.5px;
}
.sch .bk {
  display: block;
  font-style: italic;
  color: var(--muted);
  font-size: 11.5px;
}
.sch tr.bad td.tot {
  color: var(--warn);
}
/* ---- print page (calendar PDF buttons) ---- */
.printhead {
  display: none;
}
@media print {
  body.printcal .top,
  body.printcal .caltb,
  body.printcal .h1,
  body.printcal .row:not(.printhead),
  body.printcal .stat,
  body.printcal p.muted,
  body.printcal .side,
  body.printcal #scrim,
  body.printcal .dnote,
  body.printcal .toast {
    display: none !important;
  }
  body.printcal .page {
    padding: 0;
    max-width: none;
  }
  body.printcal .printhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 15px;
    margin: 0 0 8px;
  }
  body.printcal .printhead span {
    font-size: 11px;
    color: var(--muted);
    max-width: 60%;
  }
  body.printcal .calwrap {
    overflow: visible;
  }
  body.printcal #cards,
  body.printcal #classic,
  body.printcal table.sch {
    min-width: 0;
    width: 100%;
  }
  body.printcal .schwrap {
    overflow: visible;
  }
  body.printcal .wkcard {
    box-shadow: none;
    break-inside: avoid;
  }
  body.printcal .crail,
  body.printcal .railtd,
  body.printcal th.railh,
  body.printcal .chead div:first-child {
    display: none;
  }
  body.printcal .chead,
  body.printcal .cwk {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
/* ---- person / site cards ---- */
.cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcard {
  display: grid;
  grid-template-columns: 44px 1.4fr 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pcard .av {
  width: 40px;
  height: 40px;
}
.pmain b {
  font-size: 15px;
}
.plbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.pcol {
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tabs .tabn {
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.ccard {
  cursor: pointer;
}
.ccard:hover {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.mact {
  display: none;
  gap: 8px;
}
.mb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-width: 64px;
  padding: 0 12px;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.mb.call {
  background: var(--accent);
  color: #fff;
}
.mb.text {
  background: var(--sms-bg);
  color: var(--sms-ink);
}
.mb.mail {
  background: #b5b25a;
  color: #2b2b1a;
}
.mb.off {
  opacity: 0.35;
}
.mact.big {
  display: flex;
  flex-wrap: wrap;
}
.mact.big .mb {
  min-width: 100px;
}
dialog.wide {
  width: min(900px, 96vw);
}
/* ---- DAR ---- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tabs button {
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: var(--muted);
}
.tabs button.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.report {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.entry:last-child {
  border-bottom: none;
}
.entry b {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.token {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--soft);
  padding: 2px 6px;
  border-radius: 5px;
}
/* ---- messages ---- */
.note {
  border: 1px solid var(--note-line);
  background: var(--note-bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  color: #1f1e1b;
}
.note .meta {
  font-size: 11.5px;
  color: #6b6760;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.thread {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--card);
}
.thread.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.thread .meta {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.msg {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--soft);
  margin-bottom: 6px;
  font-size: 13px;
  max-width: 80%;
}
.msg.me {
  background: var(--navactive-bg);
  margin-left: auto;
}
.msg .who {
  font-size: 11px;
  color: var(--muted);
  display: block;
}
.smsflag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sms-ink);
  background: var(--sms-bg);
  border: 1px solid var(--sms-line);
  border-radius: 999px;
  padding: 1px 8px;
}
/* ---- warnings ---- */
.wtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wtable th {
  text-align: left;
  font-size: 11.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
}
.wtable td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--warn);
}
.sev.med {
  background: var(--bravo);
}
.sev.ok {
  background: var(--charlie);
}
/* ---- phone ---- */
@media (max-width: 900px) {
  .nav,
  .me,
  .viewas,
  .theme {
    display: none;
  }
  .calbtn {
    margin-left: auto;
  }
  #burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .top {
    padding: 0 12px;
    gap: 10px;
  }
  .page {
    padding: 12px 12px 30px;
  }
  .caltb .desk {
    display: none !important;
  }
  .phn {
    display: inline-flex;
  }
  .tloc {
    font-size: 16px;
    gap: 4px;
    padding: 6px 2px;
  }
  .tloc .caret {
    font-size: 11px;
  }
  .caltb .sp {
    margin-left: auto;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split .detail {
    display: none;
  }
  .split.detail-open .detail {
    display: block;
  }
  .split.detail-open .listpane {
    display: none;
  }
  .backbtn {
    display: inline-flex;
    margin-bottom: 8px;
  }
  .kv {
    grid-template-columns: 1fr;
  }
  .pcard {
    grid-template-columns: 40px 1fr auto;
  }
  .pcard .pcol {
    grid-column: 2 / span 2;
  }
  .ccard {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    padding: 14px 16px;
    gap: 8px 14px;
  }
  .ccard .av {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    font-size: 20px;
    grid-row: 1;
  }
  .ccard .pmain b {
    font-size: 19px;
  }
  .ccard .pcol {
    display: none;
  }
  .ccard .mact {
    display: flex;
    grid-column: 2;
  }
  .ccard .desk {
    display: none;
  }
  .edcols,
  .edcols3,
  .edcols4 {
    grid-template-columns: 1fr;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
  dialog,
  dialog.wide {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }
}
@media (min-width: 901px) {
  #actions,
  #drawer {
    display: none;
  }
}