/* Pet Care Loop, global styles. Tokens from her own site + booked sheet.
   Page-specific styles live in each page. Class names here are a contract
   (B2): other pages rely on them, so rename nothing. */
:root {
  --midnight: #1f0d45;
  --purple: #542b7a;
  --lilac: #dbb2d4;
  --lilac-soft: #f3e6f1;
  --lilac-pill: rgba(219, 178, 212, 0.35);
  --gold: #f2a61c;
  --gold-dark: #d98f0d;
  --bg: #fbf7fb;
  --card: #ffffff;
  --line: #e9d9e6;
  --ink: #2a2033;
  --nav-ink: #4a3b5c;
  --muted: #6f6478;
  --ok: #1f9d6b;
  --warn: #c2410c;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 13, 69, 0.06), 0 4px 16px rgba(31, 13, 69, 0.05);
  --shadow-pop: 0 2px 6px rgba(31, 13, 69, 0.08), 0 16px 40px rgba(31, 13, 69, 0.16);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --side-w: 236px;
  --tabbar-h: 0px;
  --mtop-h: 0px;
  /* Theme tokens (10-30 dark mode). Light values equal the old literals. */
  color-scheme: light;
  --surface: #fff;          /* sidebar, top bar, tab bar */
  --field: #fff;            /* inputs and selects */
  --pop-bg: #fff;           /* popovers, dropdowns */
  --seg-on: #fff;           /* the chosen segment */
  --hover: #f6f4f8;
  --nav-on: #f3eef8;
  --purple-fill: #542b7a;   /* purple as a background behind white text */
  --purple-fill-hover: #45226a;
  --midnight-fill: #1f0d45; /* midnight as a background behind white text */
  --brand-deep: #1f0d45;    /* the brand panel: stays deep in both themes */
  --on-gold: #1f0d45;
  --ok-bg: #e3f6ee; --ok-ink: #1f7a55; --ok-line: #bfe6d4; --ok-text: #155c40;
  --warn-bg: #fdeee6; --warn-ink: #b2410c; --warn-line: #f6cdb7; --warn-text: #7c2d0b;
  --gold-bg: #fdf1d8; --gold-ink: #7a4e00; --gold-line: #f4dca6; --gold-text: #5c3b00;
  --red-bg: #fdecea; --red-ink: #b42318;
  --grey-bg: #efedf1; --grey-ink: #5b5466;
  --info-line: #e2cde0;
  --track: #d9cfe0;
  --scrim: rgba(31, 13, 69, 0.35);
  --chart: #7c4da6;         /* chart bars */
  --chart-on: #542b7a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45; }
a { color: var(--purple); }
h1, h2, h3 { font-family: var(--display); color: var(--midnight); margin: 0 0 8px; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
h3 { font-size: 16px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num, .money, time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Type scale */
.h-page { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--midnight); line-height: 1.2; margin: 0; }
.h-sec { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--midnight); line-height: 1.3; margin: 0 0 8px; }
.label-caps { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* ---------- App shell (owner) ---------- */
html { background: var(--bg); min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--bg); }
/* The sidebar sticks and scrolls on its own, so a long page never shows a seam under it. */
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 8px 14px 16px; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; }
.side-head { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; }
.side .logo { display: block; flex: 1 1 auto; min-width: 0; padding: 8px 6px 12px; margin: 0; }
.side .logo img { width: 156px; max-width: 100%; height: auto; display: block; image-rendering: auto; }
.navlist { display: flex; flex-direction: column; gap: 2px; }
.side .nav { color: var(--nav-ink); text-decoration: none; padding: 9px 12px; min-height: 40px; border-radius: 10px; font-weight: 600; font-size: 14px; display: flex; gap: 11px; align-items: center; }
.side .nav .ico { color: var(--purple); display: inline-flex; flex: none; }
.side .nav:hover { background: var(--lilac-soft); }
.side .nav.on { background: var(--lilac-pill); color: var(--purple); font-weight: 700; }
.side .side-group { padding: 18px 12px 6px; display: flex; align-items: center; gap: 6px; }
.side .nav .badge-count { margin-left: auto; }
button.nav { width: 100%; border: 0; background: transparent; font-family: var(--body); cursor: pointer; text-align: left; }
.nav-edit-bar { margin: 0 0 2px; }
.nav-edit-actions { padding: 6px 4px 8px; }
.nav-edit-actions .row { gap: 6px; }
.nav-edit-tip { margin: 0 0 8px; }
/* Menu edit mode: handles show, links stop navigating (nav.js), rows read as movable. */
.navlist .drag-handle { display: none; }
.navlist.editing .drag-handle { display: inline-flex; margin-left: -6px; }
.navlist.editing .nav, .navlist.editing .sheet-link, .navlist.editing .side-group, .navlist.editing .sheet-group { cursor: default; background: var(--surface); }
.navlist.editing .nav:hover, .navlist.editing .sheet-link:hover { background: var(--lilac-soft); }
.navlist.editing .side-group, .navlist.editing .sheet-group { color: var(--purple); }
.navlist .dragging { background: var(--lilac-soft) !important; box-shadow: var(--shadow-pop); position: relative; z-index: 2; }
.more-list:not(.editing) .in-tabs { display: none; }
.sheet-group { display: flex; align-items: center; gap: 6px; padding: 14px 12px 4px; }
.sheet-link .badge-count { margin-left: auto; }
.sheet.editing .sheet-link.out { display: none; }
.side .spacer { flex: 1; min-height: 16px; }
.side .nav.out { color: var(--muted); }
.side .nav.out .ico { color: var(--muted); }
.mainwrap { min-width: 0; display: flex; flex-direction: column; }
.mtop { display: none; }
.main { padding: 28px 32px 64px; max-width: 1280px; width: 100%; min-width: 0; }
.main.wide { max-width: none; }
.main.fill { position: relative; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: 20px 24px 12px; }
.main.fill > .fill-body, .main.fill > [data-fill] { flex: 1 1 auto; min-height: 0; }

/* Page header: title left, actions right, optional .sub under the title */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.top h1 { margin: 0; }
.top .sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.top .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Bottom tab bar + More sheet (phones only) */
.tabs { display: none; }
@media (max-width: 820px) {
  :root { --tabbar-h: calc(64px + env(safe-area-inset-bottom)); --mtop-h: 52px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .mtop { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .mtop img { height: 34px; width: auto; display: block; }
  .mtop .mtitle { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--midnight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop .bell { margin-right: -6px; }
  .mtop + main .dup-mobile { display: none; }
  .main { padding: 18px 16px calc(var(--tabbar-h) + 32px); }
  .main.fill { height: calc(100vh - var(--tabbar-h) - 52px); height: calc(100dvh - var(--tabbar-h) - 52px); padding: 12px 16px 8px; }
  .top { margin-bottom: 16px; align-items: flex-start; }
  .tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar-h); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(31, 13, 69, 0.06); padding: 6px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); z-index: 50; justify-content: space-around; align-items: flex-start; }
  .tabs a, .tabs button { position: relative; min-height: 48px; flex: 1 1 0; min-width: 0; color: var(--nav-ink); text-decoration: none; font: 600 11px var(--body); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 2px; background: none; border: 0; cursor: pointer; }
  .tabs .tico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 999px; color: var(--nav-ink); }
  .tabs .on { color: var(--purple); font-weight: 700; }
  .tabs .on .tico { background: var(--lilac-pill); color: var(--purple); }
  .tabs .badge-count { position: absolute; top: 0; left: calc(50% + 8px); }
  .iconbtn { width: 44px; height: 44px; }
}
.sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 79; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--pop-bg); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-pop); padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 10px; }
.sheet-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--nav-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.sheet-link .ico { color: var(--purple); display: inline-flex; }
.sheet-link.on { background: var(--lilac-pill); color: var(--purple); font-weight: 700; }
.sheet-link.out, .sheet-link.out .ico { color: var(--muted); }

/* ---------- Building blocks ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .g2, .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat .n { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--midnight); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

/* Buttons: .btn is the ONE gold main action per screen. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1.5px solid transparent; border-radius: 10px; padding: 8px 16px; font: 700 14px var(--body); line-height: 1.2; cursor: pointer; text-decoration: none; background: var(--gold); color: var(--on-gold); white-space: nowrap; }
.btn:hover { background: var(--gold-dark); }
.btn.purple { background: var(--purple-fill); color: #fff; }
.btn.purple:hover { background: var(--purple-fill-hover); }
.btn.line, .btn.ghost { background: var(--card); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); }
.btn.line:hover, .btn.ghost:hover { background: var(--lilac-soft); border-color: var(--purple); }
.btn.quiet { background: transparent; color: var(--purple); border-color: transparent; padding-left: 10px; padding-right: 10px; }
.btn.quiet:hover { background: var(--lilac-soft); }
.btn.danger { background: var(--card); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.btn.danger:hover { background: var(--warn-bg); border-color: var(--warn); }
.btn.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: 8px; }
.btn.big { padding: 18px 20px; font-size: 18px; border-radius: 14px; width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: default; }
.btn svg { flex: none; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 999px; border: 0; background: transparent; color: var(--purple); cursor: pointer; padding: 0; }
.iconbtn:hover { background: var(--lilac-soft); }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--lilac-soft); color: var(--purple); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.gold { background: var(--gold-bg); color: var(--gold-ink); }
.pill.grey { background: var(--grey-bg); color: var(--grey-ink); }

/* Color system: every c-* sets three custom properties (values = look.ts COLOR). */
.c-purple { --c-ink: #542B7A; --c-bg: #EFE4F6; --c-solid: #7C4DA6; }
.c-gold { --c-ink: #7A4E00; --c-bg: #FDF1D8; --c-solid: #F2A61C; }
.c-red { --c-ink: #B42318; --c-bg: #FDECEA; --c-solid: #E5484D; }
.c-orange { --c-ink: #B2410C; --c-bg: #FDEEE6; --c-solid: #F2703F; }
.c-green { --c-ink: #1F7A55; --c-bg: #E3F6EE; --c-solid: #1F9D6B; }
.c-blue { --c-ink: #1D4ED8; --c-bg: #E6EEFD; --c-solid: #3B6FE0; }
.c-teal { --c-ink: #0E6F78; --c-bg: #E0F4F5; --c-solid: #0E9AAE; }
.c-pink { --c-ink: #A3255F; --c-bg: #FCE7F1; --c-solid: #DB2777; }
.c-grey { --c-ink: #5B5466; --c-bg: #EFEDF1; --c-solid: #8A8494; }
.c-navy { --c-ink: #1E2A5A; --c-bg: #E5E8F4; --c-solid: #2E3F86; }
.c-lime { --c-ink: #3F6212; --c-bg: #EEF7DC; --c-solid: #65A30D; }
.c-brown { --c-ink: #6B4423; --c-bg: #F3EAE1; --c-solid: #8A5A2B; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; color: var(--c-ink, var(--purple)); background: var(--c-bg, var(--lilac-soft)); }
.tag .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 -4px 0 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: 0.65; cursor: pointer; font: 700 13px/1 var(--body); }
.tag .x:hover { opacity: 1; background: rgba(31, 13, 69, 0.1); }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--c-solid, var(--purple)); }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--c-solid, var(--purple)); }
.rail { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c-solid, var(--purple)); }

/* Alerts: one full-width row per need, action on the right. */
.alertbar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 16px; margin: 0 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--lilac-soft); color: var(--midnight); font-size: 14px; font-weight: 600; }
.alertbar > svg, .alertbar > .ico { flex: none; color: var(--purple); }
.alertbar > .txt, .alertbar > p, .alertbar > span:not(.ico) { flex: 1 1 auto; min-width: 0; margin: 0; }
.alertbar > .btn, .alertbar > a.btn, .alertbar > .actions { margin-left: auto; flex: none; }
.alertbar.info { background: var(--lilac-soft); border-color: var(--info-line); }
.alertbar.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.alertbar.warn > svg, .alertbar.warn > .ico { color: var(--warn); }
.alertbar.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); }
.alertbar.ok > svg, .alertbar.ok > .ico { color: var(--ok); }
.alertbar.wait { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-text); }
.alertbar.wait > svg, .alertbar.wait > .ico { color: var(--gold-ink); }
@media (max-width: 520px) { .alertbar { flex-wrap: wrap; } .alertbar > .btn, .alertbar > .actions { margin-left: 0; } }
.sample-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 16px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; }
.sample-banner::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--lilac); flex: none; }

/* Segmented control */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--lilac-soft); max-width: 100%; overflow-x: auto; }
.seg > a, .seg > button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--nav-ink); font: 600 13px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg > a:hover, .seg > button:hover { color: var(--purple); }
.seg > .on { background: var(--seg-on); color: var(--purple); font-weight: 700; box-shadow: 0 1px 3px rgba(31, 13, 69, 0.12); }

/* Popover */
.pop { position: absolute; z-index: 70; background: var(--pop-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-pop); }

/* Scrollers with always-visible bars */
.scroll-x { overflow-x: auto; }
.scroll-x::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll-x::-webkit-scrollbar-track { background: rgba(219, 178, 212, 0.18); border-radius: 999px; }
.scroll-x::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--purple) 35%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll-x::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--purple) 55%, transparent); }
.scroll-x::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { .scroll-x { scrollbar-color: rgba(84, 43, 122, 0.35) rgba(219, 178, 212, 0.18); } }

/* Forms */
input:where(:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'])), select, textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: 15px var(--body); background: var(--field); color: var(--ink); }
input:where(:not([type='checkbox'], [type='radio'])):focus, select:focus, textarea:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--purple); width: 18px; height: 18px; }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 5px; }
.field { margin-bottom: 14px; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; height: 48px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
tbody tr:hover > td { background: var(--lilac-soft); }

/* On/off switch */
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--track); border-radius: 999px; transition: 0.15s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }

.sample { font-size: 11px; color: var(--muted); background: var(--grey-bg); border-radius: 6px; padding: 1px 6px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.toast { position: fixed; bottom: calc(var(--tabbar-h) + 20px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 14px; background: var(--midnight-fill); color: #fff; padding: 10px 12px 10px 18px; min-height: 44px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-pop); z-index: 99; animation: wg-rise 0.18s ease-out; }
.toast.warn, .toast.err { background: #B42318; }
.toast.info { background: var(--purple-fill); }
.toast-act { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; background: transparent; color: #fff; font: 700 13px var(--body); cursor: pointer; }
.toast-act:hover { background: rgba(255, 255, 255, 0.12); }
@keyframes wg-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Phone doors (walker + client) */
.phone { max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; }
.phone-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.phone-top img { height: 48px; mix-blend-mode: multiply; }

/* ---------- Round 2 shared primitives (CONTRACTS section 5). Use, never restyle. ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: calc(var(--mtop-h) + 16px); }
.h-sec, h2, h3 { scroll-margin-top: calc(var(--mtop-h) + 16px); }

/* Styled select: every <select> gets .sel (or .sel-sm). */
select.sel, .sel { appearance: none; -webkit-appearance: none; width: auto; max-width: 100%; min-height: 40px; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--field); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23542B7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; color: var(--ink); font: 600 14px var(--body); cursor: pointer; text-overflow: ellipsis; }
.sel:hover { border-color: color-mix(in srgb, var(--purple) 40%, transparent); }
.sel.full { width: 100%; }
select.sel-sm, .sel.sel-sm, .sel-sm { min-height: 32px; height: 32px; padding: 0 30px 0 10px; border-radius: 8px; background-position: right 9px center; background-size: 14px; font-size: 13px; }
@media (pointer: coarse) { select.sel, .sel { min-height: 44px; height: 44px; } }

/* Inline edit: looks like text until hovered or focused. JS adds .saving then .saved. */
.ie { display: block; width: 100%; min-height: 40px; padding: 8px 32px 8px 10px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: transparent no-repeat right 10px center / 14px; color: var(--ink); font: inherit; line-height: 1.45; cursor: text; transition: border-color 0.15s ease-out, background-color 0.15s ease-out; overflow-wrap: anywhere; }
textarea.ie { min-height: 40px; resize: none; overflow: hidden; field-sizing: content; }
.ie:empty::before, .ie[data-empty]::before { content: attr(data-placeholder); color: var(--muted); font-weight: 500; }
.ie::placeholder { color: var(--muted); font-weight: 500; }
.ie:hover, .ie:focus, .ie:focus-visible { border-color: var(--line); background-color: var(--field); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E"); }
.ie:focus, .ie:focus-visible { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent); }
.ie.saving { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6478' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E"); }
.ie.saved { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F9D6B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 16px; animation: ie-saved 1.2s ease-out forwards; }
@keyframes ie-saved { 0%, 60% { border-color: rgba(31, 157, 107, 0.6); } 100% { border-color: transparent; background-image: none; } }
.ie[aria-invalid='true'] { border-color: #E5484D; }

/* Color swatches: 12 tag colors, 28px dots in 40px targets. Put .c-<color> on each .swatch. */
.swatches { display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; }
@media (min-width: 521px) { .swatches.one-row { grid-template-columns: repeat(12, 40px); } }
.swatch { position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.swatch::before { content: ''; width: 28px; height: 28px; border-radius: 999px; background: var(--c-solid, var(--purple)); box-shadow: inset 0 0 0 1px rgba(31, 13, 69, 0.08); transition: transform 0.15s ease-out; }
.swatch:hover::before { transform: scale(1.08); }
.swatch[aria-pressed='true']::before { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c-solid, var(--purple)); }
.swatch[aria-pressed='true']::after { content: ''; position: absolute; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }

/* Toggle chips: fewer than 7 choices. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--nav-ink); font: 600 13px var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease-out, border-color 0.15s ease-out; }
.chip:hover { border-color: color-mix(in srgb, var(--purple) 40%, transparent); color: var(--purple); }
.chip[aria-pressed='true'], .chip.on { background: var(--lilac-pill); border-color: var(--purple); color: var(--purple); font-weight: 700; }
.chip .dot { width: 10px; height: 10px; }
.chip .n { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'] .n { color: var(--purple); }
@media (pointer: coarse) { .chip { min-height: 44px; } }

/* Stale badge: amber "2 days here", red "5 days, reach out". */
.age { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--muted); white-space: nowrap; }
.age::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 999px; background: currentColor; }
.age.amber { color: var(--gold-ink); }
.age.amber::before { background: #F2A61C; }
.age.red { color: var(--red-ink); }
.age.red::before { background: #E5484D; }

/* Red count bubble. */
.badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #E5484D; color: #fff; font: 700 11px/1 var(--body); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--card); }

/* Level dots for alerts. */
.lvl-dot { width: 10px; height: 10px; flex: none; border-radius: 999px; background: var(--lilac); }
.lvl-dot.red { background: #E5484D; }
.lvl-dot.amber { background: #F2A61C; }
.lvl-dot.info { background: var(--lilac); }

/* Drag handle: a 32px grab target with a 6-dot icon. */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: none; border: 0; border-radius: 8px; background: transparent; cursor: grab; touch-action: none; color: var(--muted); }
.drag-handle::before { content: ''; width: 10px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='2' cy='2' r='1.7'/%3E%3Ccircle cx='8' cy='2' r='1.7'/%3E%3Ccircle cx='2' cy='8' r='1.7'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='2' cy='14' r='1.7'/%3E%3Ccircle cx='8' cy='14' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='2' cy='2' r='1.7'/%3E%3Ccircle cx='8' cy='2' r='1.7'/%3E%3Ccircle cx='2' cy='8' r='1.7'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='2' cy='14' r='1.7'/%3E%3Ccircle cx='8' cy='14' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.drag-handle:hover { color: var(--purple); background-color: var(--lilac-soft); }
.drag-handle:active { cursor: grabbing; }
.drag-handle:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; color: var(--purple); }
@media (pointer: coarse) { .drag-handle { width: 44px; height: 44px; } }

/* Sticky footers never cover content. */
.sticky-foot { position: sticky; bottom: 0; z-index: 5; background: var(--card); }
.has-sticky-foot { padding-bottom: var(--foot-h, 72px); scroll-padding-bottom: var(--foot-h, 72px); }

/* Alerts bell + dropdown */
.bell { position: relative; flex: none; color: var(--purple); }
.bell .badge-count { position: absolute; top: 2px; right: 0; }
.bell-pop { position: fixed; z-index: 90; padding: 0; width: 360px; max-height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; overflow: hidden; animation: wg-pop 0.15s ease-out; }
.bell-pop[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.bell-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--midnight); }
.bell-list { overflow-y: auto; padding: 6px; }
.bell-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; min-height: 48px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-family: var(--body); color: var(--ink); cursor: pointer; }
.bell-row:hover, .bell-row:focus-visible { background: var(--lilac-soft); }
.bell-row .lvl-dot { margin-top: 5px; }
.bell-t { display: block; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--midnight); }
.bell-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bell-age { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.bell-more { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; font-size: 13px; text-decoration: none; }
@keyframes wg-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Count bubble that is a to-do, not an alarm (Requests in the menu). */
.badge-count.soft { background: var(--purple-fill); }

/* Star rating, read only. <span class="stars" style="--v:4.6" role="img" aria-label="4.6 out of 5"></span> */
.stars { --v: 0; position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; white-space: nowrap; color: var(--line); vertical-align: -1px; }
.stars::before { content: '\2605\2605\2605\2605\2605'; }
.stars::after { content: '\2605\2605\2605\2605\2605'; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 20%); overflow: hidden; color: var(--gold); }
.stars.lg { font-size: 22px; }

/* KPI row: big number, caps label, optional small line under. Wraps to 2 across on phones. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.kpi .n { display: block; font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--midnight); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi .d { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.kpi .d.up { color: var(--ok); }
.kpi .d.down { color: var(--warn); }
@media (max-width: 420px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

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

/* Setup home link on each setup page. */
.back-setup { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0 6px; font-size: 13px; font-weight: 600; color: var(--purple); text-decoration: none; }
.back-setup:hover { text-decoration: underline; }

/* Sidebar head: logo centered, menu pencil on the right. The bell sits top right of the page. */
.side-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 0; }
.side-head .logo { grid-column: 2; display: flex; justify-content: center; padding: 8px 0 12px; }
.side-head .nav-pencil { grid-column: 3; color: var(--purple); }
.side-head + .nav-edit-actions { padding: 0 4px 10px; }
.dtop { position: sticky; top: 0; z-index: 45; height: 60px; margin-bottom: -60px; display: flex; justify-content: flex-end; align-items: center; padding: 0 20px; pointer-events: none; }
.dtop .bell { pointer-events: auto; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
@media (min-width: 821px) {
  .dtop ~ .main { padding-top: 60px; }
  .dtop ~ .main.fill { padding-top: 62px; }
}
@media (max-width: 820px) {
  .dtop { display: none; }
  .mtop { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .mtop .mlogo { grid-column: 2; grid-row: 1; display: block; }
  .mtop .mtitle { grid-column: 1; grid-row: 1; font-size: 15px; }
  .mtop .bell { grid-column: 3; grid-row: 1; justify-self: end; }
  .mtop [data-tc-slot] { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 40px; }
}

/* ── Arrange (agent G): Today and the client popup. public/arrange.js, src/lib/arrange.ts ── */
[data-arr-list] > [data-arr-off] { display: none !important; }
.td-headr { display: flex; align-items: center; gap: 6px; }
.td-arr { display: flex; flex-direction: column; gap: 24px; }
.td-arr > .td-top { margin-bottom: 0; }
.td-top[data-arr-first="stats"] { grid-template-columns: 280px minmax(0, 1fr); }
.td-split[data-arr-first="day"] { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.td-top[data-arr-n="1"], .td-split[data-arr-n="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .td-split[data-arr-first] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .td-top[data-arr-first] { grid-template-columns: minmax(0, 1fr); } }
.cp-pane > .cp-linkstate { order: 999; }
.arr-pencil[aria-pressed="true"] { background: var(--lilac-soft); color: var(--purple); }
.arr-panel { position: fixed; z-index: 95; top: 76px; right: 16px; width: 340px; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px 12px 12px; font-family: var(--body); }
.arr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.arr-head b { font-size: 16px; color: var(--midnight); }
.arr-tip { margin: 4px 4px 10px; }
.arr-gt { padding: 10px 4px 4px; }
.arr-rows { display: flex; flex-direction: column; gap: 2px; }
.arr-row { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 2px; border-radius: 10px; background: var(--card); }
.arr-row:hover { background: var(--lilac-soft); }
.arr-row.dragging { background: var(--lilac-soft); box-shadow: var(--shadow-pop); position: relative; z-index: 2; }
.arr-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--midnight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr-row.is-off .arr-name { color: var(--muted); font-weight: 500; }
.arr-hid { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.arr-btn { width: 36px; height: 36px; color: var(--muted); }
.arr-btn:hover { color: var(--purple); }
.arr-eye[aria-pressed="true"] { color: var(--purple); }
.arr-foot { display: flex; gap: 6px; padding: 12px 4px 0; margin-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .arr-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; max-height: 62dvh; border-radius: 18px 18px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .arr-btn { width: 44px; height: 44px; }
}
@media (min-width: 1100px) { html:has(#client-drawer:not([hidden]):not(.cd--full)) .arr-panel.arr-client { right: 656px; } }

/* ── Sidebar, calmer (10-28): sentence-case group names, ink icons, purple only
   on the page you are on, quiet counts. The pencil sits on the first group line. */
.side .side-head { position: relative; margin-bottom: 0; }
.side .side-head .nav-pencil { position: absolute; right: 0; top: calc(100% + 10px); width: 32px; height: 32px; color: var(--muted); }
.side .side-head .nav-pencil:hover { color: var(--purple); }
.side .side-group { text-transform: none; letter-spacing: 0; font: 600 12.5px var(--body); color: var(--muted); padding: 20px 12px 6px; }
.side .navlist > .side-group:first-child { padding-top: 16px; }
.side .nav { font-weight: 500; min-height: 36px; padding: 7px 12px; border-radius: 8px; color: var(--nav-ink); position: relative; }
.side .nav .ico { color: #8a8094; }
.side .nav:hover { background: var(--hover); }
.side .nav:hover .ico { color: var(--nav-ink); }
.side .nav.on { background: var(--nav-on); color: var(--midnight); font-weight: 650; }
.side .nav.on .ico { color: var(--purple); }
.side .nav.on::before { content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--purple); }
.side .nav .badge-count.soft { background: transparent; color: var(--muted); box-shadow: none; font: 600 12px var(--body); min-width: 0; padding: 0; }
.side .nav .badge-count:not(.soft) { height: 17px; min-width: 17px; font-size: 10.5px; box-shadow: none; }

/* Bigger logo on the computer (10-28): the pencil now sits on the Daily line, so the logo gets the full width. */
.side .side-head { grid-template-columns: minmax(0, 1fr); }
.side .side-head .logo { grid-column: 1; padding: 14px 0 10px; }
.side .logo img { width: 204px; mix-blend-mode: multiply; }
.mtop .mlogo img { mix-blend-mode: multiply; }

/* Simpler menu: five up top, the rest folded under More (desktop sidebar). */
.side .navlist .nav.more-item { display: none; }
.side .navlist.more-open .nav.more-item, .side .navlist.editing .nav.more-item { display: flex; }
.side .side-more { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--muted); border-radius: 8px; }
.side .side-more:hover { background: var(--lilac-soft); color: var(--purple); }
.side .side-more .badge-count { margin-left: 0; }
.side-more-car { margin-left: auto; width: 8px; height: 8px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease-out; }
.side .navlist.more-open .side-more-car { transform: rotate(-135deg) translate(-2px, -2px); }

/* ── Left side, one system (round 8, agent A). Every row sits on the same 12px inset,
   the page you are on is the soft pill only (no colored edge bar), group names
   (Daily, More) share one style, every count is the same quiet pill, and Sign out
   sits under a hairline. Phones: logo left, page name beside it, icons right. */
.side .nav.on::before { content: none; }
.side .side-group, .side .side-more { font: 600 12.5px/18px var(--body); color: var(--muted); letter-spacing: 0; text-transform: none; }
.side .side-more { margin-top: 14px; padding: 8px 12px; min-height: 34px; }
.side .side-more:hover, .side .side-more[aria-expanded="true"] { background: none; color: var(--purple); }
.side .side-head .nav-pencil { top: calc(100% + 9px); width: 30px; height: 30px; right: 4px; border-radius: 8px; }
.side .side-head .nav-pencil svg { width: 16px; height: 16px; }
.side .nav .badge-count, .side .nav .badge-count.soft, .side .side-more .badge-count, .side .side-more .badge-count.soft {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--lilac-soft); color: var(--purple);
  font: 700 11px/18px var(--body); box-shadow: none; font-variant-numeric: tabular-nums; }
.side .nav.on .badge-count { background: var(--card); }
.side .spacer { border-bottom: 1px solid var(--line); margin: 0 4px 8px; }
.side > .nav.out { flex: none; }
/* The white sidebar column runs the full page height, even past the sticky panel. */
.shell { background: linear-gradient(to right, var(--surface) calc(var(--side-w) - 1px), var(--line) calc(var(--side-w) - 1px) var(--side-w), var(--bg) var(--side-w)); }
@media (max-width: 820px) {
  .shell { background: var(--bg); }
  .mtop { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .mtop .mlogo { grid-column: 1; grid-row: 1; }
  .mtop .mlogo img { height: 36px; }
  .mtop .mtitle { grid-column: 2; grid-row: 1; font-size: 16px; padding-left: 10px; border-left: 1px solid var(--line); line-height: 24px; }
}
/* ── Menu icons (10-30): color tiles, like iPhone Settings. Each glyph is a white line drawing
   (stroke 2, round caps) on a 28px rounded square in its own color. Related pages share a hue:
   daily orange/red, people blue, money green, messaging teal, marketing pink/orange, system grey,
   Setup in Wiggle purple. The page you are on gets a soft tinted row, nothing else. */
.gi { --tile: #8e8e93; flex: none; display: block; width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--tile); stroke: #fff; }
.gi-today { --tile: #f08c2b; }
.gi-calendar { --tile: #e0435a; }
.gi-check { --tile: #f0663a; }
.gi-pipeline { --tile: #3b6fe0; }
.gi-team { --tile: #5856d6; }
.gi-clock { --tile: #0a84c6; }
.gi-money { --tile: #1f8a5b; }
.gi-pricing { --tile: #2e9e6a; }
.gi-chart { --tile: #12806f; }
.gi-inbox { --tile: #0e9aae; }
.gi-chat { --tile: #13a3a0; }
.gi-reply { --tile: #2b8fb0; }
.gi-social { --tile: #d9437f; }
.gi-holiday { --tile: #e8603c; }
.gi-star { --tile: #e5a00d; }
.gi-automations { --tile: #8a55d6; }
.gi-bell { --tile: #6b7a8f; }
.gi-trash { --tile: #8e8e93; }
.gi-settings { --tile: #542b7a; }
.gi-more, .gi-pencil, .gi-signout { --tile: #8e8e93; }

.side .nav .ico, .sheet-link .ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side .nav { gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.side .nav.on, .sheet-link.on { background: var(--lilac-soft); color: var(--midnight); font-weight: 700; }
.side .nav.on .badge-count { background: var(--card); }
.side .side-group, .side .side-more { color: var(--muted); }
.side .side-more:hover, .side .side-more[aria-expanded="true"] { color: var(--purple); }
.side .side-head .nav-pencil { width: 36px; height: 36px; }
.side .side-head .nav-pencil .gi { width: 26px; height: 26px; padding: 5px; }
button.sheet-link { width: 100%; background: none; border: 0; font: 600 15px var(--body); color: var(--nav-ink); text-align: left; cursor: pointer; }

/* Phone bottom tabs: smaller 24px tiles; the tab you are on shows its label in purple. */
.tabs .tico .gi { width: 24px; height: 24px; padding: 4px; border-radius: 7px; }
.tabs .on .tico { background: none; }
.tabs .on { color: var(--purple); }

/* "runs on Pet Care Loop": the small mark and the words, quiet, above Sign out. */
.dl-sig-slot { padding: 6px 12px 8px; }
.dl-sig-slot.sheet-slot { padding: 14px 12px 6px; }
.dl-sig { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--body); color: var(--muted); text-decoration: none; }
.dl-sig b { font-weight: 700; color: var(--midnight); }
.dl-sig-mark { flex: none; overflow: visible; }

/* VIP tiers: the tier tag reads as a badge (client page, Paid clients board). */
.tag.cp-tier { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--c-solid, currentColor); }
.tag.cp-tier svg { flex: none; color: var(--c-solid, currentColor); }
.pl-flag.pl-tier { font-weight: 800; }

/* ── Dark mode (10-30). The sun/moon button in the top bar sets <html data-theme>; the
   choice is kept per browser ('wyt-theme') and starts from the system setting. Deep
   purple-tinted surfaces, cards a step lighter, Wiggle purple brightened for text,
   purple FILLS (--purple-fill) kept deep enough for white text, gold stays warm. ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #13101a;
  --surface: #19141f;
  --card: #1f1928;
  --field: #18131f;
  --pop-bg: #251e30;
  --seg-on: #3a2e4c;
  --hover: #261f31;
  --nav-on: #2e2440;
  --line: #3a2f49;
  --ink: #ece6f3;
  --nav-ink: #d4c9e1;
  --muted: #a99cba;
  --midnight: #f5effc;
  --purple: #c8a5f3;
  --purple-fill: #7a4bb4;
  --purple-fill-hover: #8a5ac5;
  --midnight-fill: #31254a;
  --on-gold: #1f0d45;
  --lilac: #9d7bb6;
  --lilac-soft: #2a2137;
  --lilac-pill: rgba(200, 165, 243, 0.16);
  --gold: #f2a61c;
  --gold-dark: #ffb836;
  --ok: #3fcf8e;
  --warn: #ff8f5e;
  --ok-bg: #15302a; --ok-ink: #7fe0b3; --ok-line: #24533f; --ok-text: #a9ecca;
  --warn-bg: #3a2019; --warn-ink: #ffab85; --warn-line: #613222; --warn-text: #ffc6ac;
  --gold-bg: #33280f; --gold-ink: #f6c862; --gold-line: #5c4615; --gold-text: #f9d98f;
  --red-bg: #3b1a20; --red-ink: #ff9ea1;
  --grey-bg: #2a2532; --grey-ink: #c6bed1;
  --info-line: #463760;
  --track: #4a3e5c;
  --scrim: rgba(6, 3, 12, 0.62);
  --chart: #a57de0;
  --chart-on: #d6bcf8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.55);
}
/* Tag colors: same hues, dark tinted chips. Works for class colors and the inline ones the drawer sets. */
[data-theme="dark"] :is(.c-purple, .c-gold, .c-red, .c-orange, .c-green, .c-blue, .c-teal, .c-pink, .c-grey, .c-navy, .c-lime, .c-brown, [style*="--c-solid"]) {
  --c-bg: color-mix(in srgb, var(--c-solid) 24%, #1f1928) !important;
  --c-ink: color-mix(in srgb, var(--c-solid) 42%, #ffffff) !important;
}
[data-theme="dark"] .c-navy { --c-solid: #5f73c9; }
[data-theme="dark"] .c-brown { --c-solid: #b07b48; }
[data-theme="dark"] .c-grey { --c-solid: #8f889c; }
[data-theme="dark"] .tag .x:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .seg > .on { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .scroll-x::-webkit-scrollbar-track { background: rgba(200, 165, 243, 0.08); }
[data-theme="dark"] .side .nav .ico { color: #9a8fa8; }
[data-theme="dark"] .badge-count { box-shadow: 0 0 0 2px var(--surface); }
[data-theme="dark"] .swatch::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .toast { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-pop); }
[data-theme="dark"] select.sel, [data-theme="dark"] .sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C8A5F3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] ::placeholder { color: #8c7f9d; }
[data-theme="dark"] input[type='checkbox'], [data-theme="dark"] input[type='radio'] { accent-color: #9b6fd6; }
/* Dark mode logo: same size, no plate. The dog keeps its colors with a light edge, the lettering turns light. */
[data-theme="dark"] .side .logo img, [data-theme="dark"] .mtop .mlogo img { content: url('/brand/logo-tight-dark.png'); mix-blend-mode: normal; }
:root[data-theme="dark"] .lg-logo { content: url('/brand/logo-dark.png'); mix-blend-mode: normal; }
.dl-sig-mark { border-radius: 8px; }
/* Maps keep their light tiles; the panels, popups and controls around them go dark. */
[data-theme="dark"] .leaflet-container { background: #2a2433; }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--pop-bg); color: var(--ink); box-shadow: var(--shadow-pop); }
[data-theme="dark"] .leaflet-popup-content-wrapper a { color: var(--purple); }
[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
[data-theme="dark"] .leaflet-bar, [data-theme="dark"] .leaflet-control-layers { border-color: var(--line) !important; box-shadow: var(--shadow); }
[data-theme="dark"] .leaflet-bar a, [data-theme="dark"] .leaflet-control-layers { background: var(--pop-bg); color: var(--ink); border-bottom-color: var(--line); }
[data-theme="dark"] .leaflet-bar a:hover { background: var(--hover); }
[data-theme="dark"] .leaflet-control-attribution, [data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(31, 25, 40, 0.82) !important; color: var(--muted); }
[data-theme="dark"] .leaflet-control-attribution a, [data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--purple); }
[data-theme="dark"] .leaflet-tooltip { background: var(--pop-bg); color: var(--ink); border-color: var(--line); }
/* The sign in page: the button lifts off the dark page. */
:root[data-theme="dark"] .lg-btn { background: var(--purple-fill); }
:root[data-theme="dark"] .lg-seg a[aria-current="page"] { background: var(--seg-on); }
:root[data-theme="dark"] .lg-btn:hover { background: var(--purple-fill-hover); }

/* Sun / moon: the light switch in the top bar, beside the phone, the sound and the bell. */
.theme-tg { color: var(--purple); }
.theme-tg .tg-moon { display: none; }
[data-theme="dark"] .theme-tg .tg-sun { display: none; }
[data-theme="dark"] .theme-tg .tg-moon { display: inline; }
.dtop .theme-tg { pointer-events: auto; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); margin-right: 8px; }
.dtop .theme-tg:hover { background: var(--lilac-soft); }
.mtop .theme-tg { display: none; }
@media (max-width: 820px) {
  .mtop .theme-tg { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; margin-right: 120px; }
}
[data-theme="dark"] .dl-btn.call[disabled] .dl-ic { background: #3d3350; color: #8f84a0; }

/* ── Round 2 (#41): a solid top bar on the computer, and the chat bubble docked next to the bell.
   The bar used to be see-through with floating icons, so the icons and the bubble sat on top of
   buttons ("Used up", Send, +). Now content scrolls under a solid bar and nothing floats. ── */
@media (min-width: 821px) {
  :root { --mtop-h: 60px; }
  .dtop { background: var(--bg); border-bottom: 1px solid var(--line); pointer-events: auto; }
  .dtop-tc { display: inline-flex; margin-right: 8px; }
  .dtop .tc-bub.tc-docked { width: 40px; height: 40px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--purple); border-radius: 999px; }
  .dtop .tc-bub.tc-docked:hover { background: var(--lilac-soft); }
}

/* 11-01 owner panel round 2 (#28): no bare "Choose File". Every file input gets a real button. */
input[type='file'] { font: inherit; font-size: 14px; color: var(--muted); max-width: 100%; }
input[type='file']::file-selector-button {
  font: inherit; font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 16px; margin-right: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer;
}
input[type='file']:hover::file-selector-button { border-color: var(--purple); color: var(--purple); }
input[type='file']:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 10px; }
input[type='file']:disabled::file-selector-button { opacity: .55; cursor: default; }