/* Lead Sheets: airy dashboard. Periwinkle canvas, borderless white cards with soft blue-tinted shadows,
   one blue accent, geometric type. Progress rings are the signature element. */
:root {
  --canvas: #F4F5F9;
  --surface: #FFFFFF;
  --surface-2: #F6F7FA;
  --ink: #1C2033;
  --ink-2: #6F7489;
  --ink-3: #A4A8B8;
  --line: #EDEEF3;
  --line-2: #DFE1E9;
  --blue: #3375BF;   /* the scheme's blue: buttons, links, rings */
  --blue-ink: #FFFFFF;
  --blue-soft: #E8F0F9;
  --blue-tint: #CFE0F2;
  --track: #EDF0F8;
  --green: #2F8F3A;   /* text shades of the scheme's green, yellow and red */
  --green-soft: #E6F5E4;
  --amber: #946A05;
  --amber-soft: #FDF4DA;
  --red: #C23B34;
  --red-soft: #FBE9E7;
  --shadow: 0 1px 2px rgba(28, 32, 51, .04), 0 10px 30px rgba(28, 32, 51, .05);
  --shadow-s: 0 1px 2px rgba(28, 32, 51, .05), 0 4px 12px rgba(28, 32, 51, .05);
  --radius-l: 22px;
  --radius-m: 14px;
  --radius-s: 10px;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0E1016; --surface: #171A22; --surface-2: #1E222C; --ink: #EEF0F5; --ink-2: #9CA1B2; --ink-3: #646A7C;
    --line: #252934; --line-2: #2F3440; --blue: #6FA6E3; --blue-ink: #0B1430; --blue-soft: #1B2A42; --blue-tint: #24395A;
    --track: #272B36; --green: #7ED07F; --green-soft: #17301B; --amber: #F3C24C; --amber-soft: #33290F; --red: #F07467; --red-soft: #3A1A1C;
    --shadow: 0 18px 40px rgba(0, 0, 0, .35); --shadow-s: 0 6px 16px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0E1016; --surface: #171A22; --surface-2: #1E222C; --ink: #EEF0F5; --ink-2: #9CA1B2; --ink-3: #646A7C;
  --line: #252934; --line-2: #2F3440; --blue: #6FA6E3; --blue-ink: #0B1430; --blue-soft: #1B2A42; --blue-tint: #24395A;
  --track: #272B36; --green: #7ED07F; --green-soft: #17301B; --amber: #F3C24C; --amber-soft: #33290F; --red: #F07467; --red-soft: #3A1A1C;
  --shadow: 0 18px 40px rgba(0, 0, 0, .35); --shadow-s: 0 6px 16px rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 12.5px; }
.blue { color: var(--blue); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 0 24px; background: var(--surface);
  display: flex; flex-direction: column; box-shadow: 1px 0 0 var(--line); z-index: 4; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 28px 38px; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 35%, transparent); }
.brand-mark svg { width: 19px; height: 19px; stroke: var(--blue-ink); }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: .02em; line-height: 1.1; }
.brand-sub { font-size: 11px; color: var(--ink-2); }
.nav { display: grid; gap: 6px; padding: 0 16px; }
.nav a { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav a.on { color: var(--blue); background: var(--blue-soft); }
.nav a.on::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
/* Continue: the sheet this person last worked on, under Sheets */
.nav a.nav-sub { margin: -4px 0 4px 34px; padding: 6px 12px; gap: 8px; font-size: 13px; border-radius: 10px; color: var(--ink-2); }
/* shown only while the mouse is over Sheets (or the link itself), so the menu stays still otherwise */
.nav a.nav-sub { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height .18s ease, padding .18s ease, margin .18s ease, opacity .15s ease, visibility 0s linear .18s; }
.nav a.nav-sheets:hover + a.nav-sub, .nav a.nav-tasks:hover + a.nav-sub, .nav a.nav-sub:hover, .nav a.nav-sheets:focus-visible + a.nav-sub, .nav a.nav-tasks:focus-visible + a.nav-sub, .nav a.nav-sub:focus-visible {
  max-height: 40px; padding-top: 6px; padding-bottom: 6px; margin-top: -4px; margin-bottom: 4px; opacity: 1; visibility: visible; transition-delay: 0s; }
.nav a.nav-sub .nav-sub-k { color: var(--ink-3); font-size: 12px; }
.nav a.nav-sub .nav-sub-v { font-weight: 600; color: var(--blue); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.nav-sub.here { background: var(--surface-2); }
.nav a.nav-sub::before { display: none; }
.cont-card { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius-l); background: var(--surface);
  box-shadow: var(--shadow); color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.cont-card:hover { text-decoration: none; border-color: var(--blue-soft); }
.cont-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.cont-ic svg { width: 20px; height: 20px; stroke: currentColor; }
.cont-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cont-k { font-size: 12px; color: var(--ink-3); }
.cont-t b { font-size: 15px; }
.cont-c { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont-go { flex: none; font-size: 13px; font-weight: 600; color: var(--blue); }
.nav svg { width: 20px; height: 20px; stroke: currentColor; flex: none; }
.side-cta { margin: auto 18px 0; padding: 14px 14px 14px 18px; border-radius: var(--radius-m); background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between; color: var(--blue); font-weight: 500; box-shadow: var(--shadow-s); }
.side-cta:hover { text-decoration: none; background: var(--blue-soft); }
.side-cta .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: var(--blue-ink); display: grid; place-items: center;
  font-size: 19px; line-height: 1; box-shadow: 0 6px 14px color-mix(in srgb, var(--blue) 40%, transparent); }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 20px; padding: 26px 40px 6px; }
.topbar .ptitle { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0; min-width: 0; }
.topbar .search { margin-left: auto; }
.who { display: flex; align-items: center; gap: 10px; position: relative; }
.who summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.who summary::-webkit-details-marker { display: none; }
.who .menu { position: absolute; right: 0; top: 46px; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 8px; min-width: 180px; z-index: 10; }
.who .menu a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); }
.who .menu a:hover { background: var(--surface-2); text-decoration: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 55%, #9BC1FF));
  color: var(--blue-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.mode { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mode.live { background: var(--green-soft); color: var(--green); }

main { padding: 22px 40px 64px; max-width: 1320px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0; }
.lede { color: var(--ink-2); margin: 4px 0 0; font-size: 14px; }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 12px; gap: 12px; }
.panel-head .k { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.panel-body { padding: 4px 28px 24px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr); gap: 24px; align-items: start; }
.dash .wide { grid-column: span 2; }
.dash .side { grid-column: 3; grid-row: 1 / span 2; }
.stack { display: grid; gap: 24px; }

/* key figures strip (admin) */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; }
.figure { padding: 20px 24px; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.figure .v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.figure .v small { font-size: 14px; color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
.figure .k { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: url(#fade); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .dot { fill: var(--surface); stroke: var(--blue); stroke-width: 3; }
.axis { display: flex; justify-content: space-between; padding: 6px 10px 0; font-size: 11.5px; color: var(--ink-3); }
.peak { position: absolute; transform: translate(-50%, -100%); margin-top: -14px; padding: 8px 12px; border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow); text-align: center; pointer-events: none; white-space: nowrap; }
.peak b { display: block; font-size: 16px; line-height: 1.2; }
.peak span { font-size: 11px; color: var(--ink-2); }
.chart-wrap { position: relative; padding: 18px 28px 22px; }

/* ---------- progress ring (the signature) ---------- */
.ring { --size: 46px; width: var(--size); height: var(--size); flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .t { stroke: var(--track); }
.ring .p { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.ring .lab { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ring.big { --size: 132px; }
.ring.big .lab { font-size: 26px; letter-spacing: -0.02em; }
.ring.big .lab > div { text-align: center; line-height: 1.1; }
.ring.big .lab span { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; text-align: center; max-width: 76px; margin: 4px auto 0; line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .ring .p { transition: none; } }

.profile { text-align: center; padding: 26px 28px 8px; }
.profile .ring { margin: 18px auto 16px; }
.profile .name { font-size: 17px; font-weight: 600; }
.profile .role { color: var(--ink-2); font-size: 12.5px; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 6px; }
.minis div { background: var(--surface-2); border-radius: 12px; padding: 10px 6px; }
.minis b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.minis span { font-size: 11px; color: var(--ink-2); }
.profile .minis { margin: 18px 0 4px; gap: 10px; }
.profile .minis div { padding: 12px 8px 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; }
.profile .minis b { font-size: 20px; line-height: 1.15; }
.profile .minis span { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.divider { height: 1px; background: var(--line); margin: 18px 28px 0; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; gap: 4px; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-m); }
a.row { color: inherit; }
a.row:hover { background: var(--surface-2); text-decoration: none; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { color: var(--ink-2); font-size: 12.5px; }
.chev { width: 16px; height: 16px; stroke: var(--blue); flex: none; }
.tile { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex: none; font-weight: 600; font-size: 12px; }
.tile svg { width: 19px; height: 19px; stroke: currentColor; }
.tile.soft { background: var(--blue-soft); }
.card-row { box-shadow: var(--shadow-s); background: var(--surface); }

/* ---------- tables ---------- */
.table-pad { padding: 0 16px 14px; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.data th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12px; padding: 10px 14px; background: var(--surface); position: sticky; top: 0; }
table.data td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: var(--surface-2); }
table.data td.r, table.data th.r { text-align: right; }
.district { font-weight: 600; font-size: 14.5px; }

/* ---------- pills and buttons ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--shine), var(--dot, currentColor); }
.pill.todo { color: var(--ink-2); background: var(--surface-2); }
.pill.part { color: var(--amber); background: var(--amber-soft); --dot: var(--fam-yellow); }
.pill.done { color: var(--green); background: var(--green-soft); --dot: var(--fam-green); }
.pill.off { color: var(--ink-3); background: transparent; border: 1px dashed var(--line-2); }
.pill.off::before { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 9px 18px;
  font: 500 13.5px/1.2 var(--font); cursor: pointer; background: var(--blue); color: var(--blue-ink); white-space: nowrap;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--blue) 28%, transparent); }
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.quiet { background: var(--blue-soft); color: var(--blue); box-shadow: none; }
.btn.small { padding: 6px 13px; font-size: 12.5px; border-radius: 10px; }
.btn.danger { background: var(--red-soft); color: var(--red); box-shadow: none; }
.btn[disabled] { opacity: .45; cursor: default; filter: none; }

.banner { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: var(--radius-m); background: var(--amber-soft); color: var(--amber); font-size: 13.5px; margin-bottom: 22px; }
.flash { padding: 12px 18px; border-radius: var(--radius-m); background: var(--blue-soft); color: var(--blue); margin-bottom: 20px; font-size: 13.5px; }

/* forms */
input[type=text], input[type=password], input[type=search], select {
  font: 14px var(--font); color: var(--ink); background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
label.f, span.f { display: block; font-size: 12.5px; color: var(--ink-2); margin: 14px 0 6px; }
.search { position: relative; max-width: 340px; width: 100%; display: block; }
.search input { padding-left: 40px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-s); }
.search svg { position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); stroke: var(--ink-3); }

/* auth pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth .panel { width: 100%; max-width: 400px; padding: 38px; }
.auth h1 { font-size: 24px; margin: 22px 0 4px; }
.auth .btn { width: 100%; margin-top: 24px; padding: 12px; font-size: 14.5px; }
/* the demo site's sign-in: demo code and one button per role */
.demo-enter { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.demo-enter h2 { font-size: 17px; margin: 0 0 4px; }
.demo-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.auth .demo-roles .btn { margin-top: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; min-height: 44px; }
.demo-roles .btn b { font-size: 13.5px; font-weight: 600; }
.demo-roles .btn span { font-size: 12px; color: var(--ink-3); font-weight: 400; }

/* centre hero on the tracker page */
.hero { display: flex; gap: 30px; align-items: center; padding: 28px 30px; }
.hero .facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hero .facts div { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 10px 16px; }
.hero .facts b { display: block; font-size: 18px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.next-up { margin-left: auto; padding: 20px 22px; border-radius: var(--radius-m); background: var(--blue-soft); min-width: 250px; }
.next-up .d { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--blue); line-height: 1.2; }

/* job progress */
.working { padding: 52px 32px; text-align: center; }
.spinner { width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%; border: 4px solid var(--track); border-top-color: var(--blue); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.steps { list-style: none; padding: 0; margin: 24px auto 0; max-width: 360px; text-align: left; }
.steps li { padding: 7px 0; color: var(--ink-3); display: flex; gap: 12px; align-items: center; font-size: 13.5px; }
.steps li.on { color: var(--ink); font-weight: 500; }
.steps li.ok { color: var(--ink-2); }
.steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--track); flex: none; }
.steps li.on::before { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.steps li.ok::before { background: var(--green); }

/* results entry: segmented control per business */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 5px 9px; border-radius: 8px; font-size: 12px; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.seg label:hover { color: var(--ink); }
.seg input:checked + label { background: var(--surface); color: var(--blue); font-weight: 600; box-shadow: var(--shadow-s); }
.seg button { padding: 5px 9px; border: 0; border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-2); background: transparent; white-space: nowrap; }   /* buttons that act straight away */
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--blue); font-weight: 600; box-shadow: var(--shadow-s); }
.seg input:focus-visible + label { outline: 2px solid var(--blue); }
.seg input[value=appointment]:checked + label { color: var(--green); }
.seg input[value=connected]:checked + label { color: var(--amber); }   /* Spoke: warm, not yet won */
.seg input[value=bad]:checked + label, .seg input[value=do_not_call]:checked + label { color: var(--red); }
.savebar { position: sticky; bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px;
  padding: 12px 14px 12px 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-m); box-shadow: var(--shadow); }

.pbar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 80px; }
.pbar i { display: block; height: 100%; background: var(--fam-blue); border-radius: 3px; }

.empty { padding: 30px 28px; text-align: center; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }
.crumb { font-size: 12.5px; margin: 0 0 12px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash .wide { grid-column: 1 / -1; }
  .dash .side { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 960px) {
  .grid-2, .dash { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .next-up { margin-left: 0; width: 100%; }
  .hero { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 10px 14px; box-shadow: 0 1px 0 var(--line); overflow-x: auto; }
  .brand { padding: 0 10px 0 0; }
  .brand-name, .brand-sub, .side-cta span:first-child { display: none; }
  .nav { display: flex; gap: 2px; padding: 0; }
  .nav a { padding: 9px 11px; }
  .nav a span { display: none; }
  .nav a.on::before { display: none; }
  .side-cta { margin: 0 0 0 auto; padding: 4px; background: none; box-shadow: none; }
  .topbar { padding: 18px 16px 0; flex-wrap: wrap; }
  .topbar .search { order: 3; max-width: none; }
  .who summary span { display: none; }
  main { padding: 18px 16px 48px; }
  h1 { font-size: 22px; }
  .hide-sm { display: none; }
  .hero { padding: 22px; gap: 18px; }
  .panel-head { padding: 20px 20px 10px; }
  .panel-body { padding: 4px 20px 20px; }
  .list { padding: 4px 8px 12px; }
  table.data { display: block; overflow-x: auto; }
  table.data th { position: static; }
  table.data th, table.data td { padding: 10px 8px; }
  .savebar { flex-wrap: wrap; }
  .banner { display: block; }
  .chart-wrap { padding: 14px 16px 18px; }
}
.panel > table.data { width: calc(100% - 32px); margin: 0 16px 16px; }
.list { grid-template-columns: minmax(0, 1fr); }

/* ---------- colour scheme for colour elements: soft spheres ----------
   Five core colours (green, blue, purple, red, yellow) and five extras. Use these for anything that needs colour
   beyond the blue accent: people, chart segments, status dots. Text stays on the --green/--amber/--red ink colours. */
:root { --fam-green: #5FBC5F; --fam-blue: #3375BF; --fam-purple: #9333E0; --fam-red: #D6463F; --fam-yellow: #ECB542;
  --fam-teal: #1FA595; --fam-orange: #EE7A2E; --fam-pink: #DE3F8A; --fam-indigo: #4B4FD3; --fam-lime: #8DB82C;
  --fam-green-hi: #96D681; --fam-blue-hi: #70B3C8; --fam-purple-hi: #BF72F4; --fam-red-hi: #E5735A; --fam-yellow-hi: #FADF64;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
  --shine: radial-gradient(circle at 62% 36%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%); }

/* ---------- data-cleaning visuals ---------- */
:root { /* the five main removal reasons use the five primaries; the less common ones use the extras */
  --c-phone: var(--fam-blue); --c-dupes: var(--fam-purple); --c-closed: var(--fam-red); --c-lowconf: var(--fam-yellow); --c-tps: var(--fam-green);
  --c-chain: var(--fam-teal); --c-dnc: var(--fam-orange); --c-wrong: var(--fam-pink);
  --hatch: repeating-linear-gradient(135deg, var(--blue-tint) 0 2px, transparent 2px 8px); }
.d-track { stroke: var(--track); }
.d-phone { stroke: var(--c-phone); background: var(--c-phone); } .d-dupes { stroke: var(--c-dupes); background: var(--c-dupes); }
.d-closed { stroke: var(--c-closed); background: var(--c-closed); } .d-chain { stroke: var(--c-chain); background: var(--c-chain); }
.d-lowconf { stroke: var(--c-lowconf); background: var(--c-lowconf); } .d-tps { stroke: var(--c-tps); background: var(--c-tps); }
.d-dnc { stroke: var(--c-dnc); background: var(--c-dnc); } .d-wrong { stroke: var(--c-wrong); background: var(--c-wrong); }
.donut { position: relative; width: 210px; height: 210px; margin: 6px auto 10px; }
.donut svg { width: 100%; height: 100%; transform: rotate(0deg); }
.donut-mid { position: absolute; inset: 44px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-s); display: grid; place-content: center; text-align: center; }
.donut-mid span { font-size: 11.5px; color: var(--ink-2); }
.donut-mid b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; background-image: var(--shine); }
.legend .grow { flex: 1; min-width: 0; }
.legend .pc { width: 38px; text-align: right; font-size: 12px; }

.wf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: end; padding: 8px 28px 26px; }
.wf-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.wf-num { text-align: center; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.wf-num.neg { color: var(--c-closed); font-weight: 500; }
.wf-bar { height: 190px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.wf-solid { background: linear-gradient(180deg, var(--fam-blue-hi), var(--fam-blue) 70%); border-radius: 0; }
.wf-solid.soft { background: linear-gradient(180deg, color-mix(in oklab, var(--fam-blue) 55%, var(--surface)), color-mix(in oklab, var(--fam-blue) 72%, var(--surface))); }
.wf-solid.strong { background: linear-gradient(180deg, var(--fam-green-hi), var(--fam-green) 70%); }
.wf-hatch { background: var(--hatch), color-mix(in srgb, var(--c-closed) 14%, var(--surface)); border-bottom: 2px solid var(--c-closed); }
.wf-lab { text-align: center; font-size: 11.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.3; height: 46px; }
.bars-axis span { flex: 1 1 0; min-width: 0; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.kpi { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: end; }
.kpi .t { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); }
.kpi .v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 11.5px; color: var(--ink-3); }
.kpi .delta { font-size: 12px; font-weight: 600; color: var(--blue); text-align: right; }
.kpi .delta.down { color: var(--c-closed); }
.spark { width: 110px; height: 38px; display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.toggle { display: inline-flex; gap: 6px; }
.toggle a { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line-2); }
.toggle a:hover { text-decoration: none; color: var(--ink); }
.toggle a.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.bars { display: flex; gap: 12px; align-items: stretch; height: 250px; padding: 54px 28px 0; }
.bars .b { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.bars .fill { border-radius: 12px; min-height: 8px; background: var(--hatch), var(--surface-2); }
.bars .b.is-peak .fill { background: linear-gradient(var(--blue) 0 34px, transparent 34px), var(--hatch), var(--surface-2); background-color: var(--surface-2); }
.bars .tip { position: absolute; left: 50%; transform: translateX(-50%); background: var(--surface); box-shadow: var(--shadow); border-radius: 12px; padding: 7px 12px; text-align: center; white-space: nowrap; z-index: 2; }
.bars .tip span { display: block; font-size: 11px; color: var(--ink-2); }
.bars .tip b { font-size: 16px; }
.bars-axis { display: flex; gap: 12px; padding: 10px 28px 24px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.bars-axis .on { color: var(--ink); font-weight: 600; }
.clean-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 28px 24px; }
.clean-notes div { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); }
.clean-notes b { color: var(--ink); font-size: 15px; display: block; }

@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kpis { gap: 14px; } .kpi { padding: 14px 16px; } .kpi .v { font-size: 22px; } .spark { width: 70px; }
  .wf { grid-template-columns: repeat(7, 64px); overflow-x: auto; padding: 8px 16px 20px; gap: 10px; }
  .bars, .bars-axis { gap: 5px; padding-left: 14px; padding-right: 14px; }
  .bars-axis { font-size: 9.5px; }
}

.panel-head { flex-wrap: wrap; }
@media (max-width: 960px) { .clean-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .clean-notes { padding: 0 16px 20px; } .toggle a { padding: 5px 10px; } }
.bars .tip.r { left: auto; right: 0; transform: none; }
.bars .tip.l { left: 0; transform: none; }

/* ---------- people badges ---------- */
/* Neutral circle with the initial, and the person's colour as a small dot (Craig, 22 Oct 2026: the glossy spheres looked cheap) */
.av { --c: var(--fam-blue); position: relative; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px var(--surface); }
.av:not(.empty)::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 34%; height: 34%; min-width: 7px; min-height: 7px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.pair .av:nth-child(1) { z-index: 3; } .pair .av:nth-child(2) { z-index: 2; } .pair .av:nth-child(3) { z-index: 1; }   /* each dot stays visible where badges overlap */
.av.s { width: 22px; height: 22px; font-size: 10.5px; }
.av.l { width: 40px; height: 40px; font-size: 16px; }
.av.empty { background: var(--surface-2); color: var(--ink-3); box-shadow: 0 0 0 1.5px var(--line-2) inset, 0 0 0 2px var(--surface); font-weight: 500; }
.pair { display: inline-flex; flex: none; }
.pair .av + .av { margin-left: -7px; }
.people { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.person { display: flex; align-items: center; gap: 10px; }
.person .r { font-size: 11.5px; color: var(--ink-2); line-height: 1.2; }
.person .n { font-weight: 500; line-height: 1.3; }
select.inline { width: auto; padding: 6px 10px; font-size: 13px; border-radius: 10px; }

/* ---------- radius search ---------- */
.rs { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 0; align-items: stretch; }
.rs-left { min-width: 0; }
.rs-form { padding: 6px 28px 26px; display: grid; gap: 16px; align-content: start; }
.rs-map { min-height: 460px; border-radius: 0 var(--radius-l) var(--radius-l) 0; overflow: hidden; background: var(--surface-2); position: relative; isolation: isolate; z-index: 0; }
#map { position: absolute; inset: 0; }
.slider { display: grid; gap: 8px; }
.slider .top { display: flex; justify-content: space-between; align-items: baseline; }
.slider output { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.slider output small { font-size: 14px; color: var(--ink-2); font-weight: 500; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(var(--blue), var(--blue)) 0/var(--fill, 50%) 100% no-repeat, var(--track); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.04); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 30%, transparent); }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.ticks button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ticks button:hover { color: var(--blue); background: var(--blue-soft); }
.rs-count { background: var(--surface-2); border-radius: var(--radius-m); padding: 14px 16px; }
.rs-count b { font-size: 26px; letter-spacing: -.02em; display: block; line-height: 1.2; }
.rs-count .muted { font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 500; }
.chip.out { background: var(--surface-2); color: var(--ink-3); }
.legend-map { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: color-mix(in srgb, var(--surface) 92%, transparent); border-radius: 12px; padding: 8px 12px; font-size: 12px; box-shadow: var(--shadow-s); display: grid; gap: 4px; }
.legend-map i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.leaflet-container { font-family: var(--font); background: var(--surface-2); }

/* ---------- planner (timeline) ---------- */
.plan-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.plan-stats .kpi { grid-template-columns: auto 1fr; align-items: center; gap: 0 14px; }
.plan-stats .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; grid-row: span 2; }
.dot.now { background: var(--blue-soft); color: var(--blue); } .dot.soon { background: var(--amber-soft); color: var(--amber); }
.dot.done { background: var(--green-soft); color: var(--green); } .dot.un { background: var(--surface-2); color: var(--ink-2); }
.dot svg { width: 20px; height: 20px; stroke: currentColor; }
.gantt { --label: 250px; position: relative; overflow-x: auto; }
.g-inner { min-width: 900px; position: relative; }
.g-head { display: grid; grid-template-columns: var(--label) 1fr; position: sticky; top: 0; z-index: 3; background: var(--surface); }
.g-months, .g-weeks, .g-track { position: relative; }
.g-months { height: 26px; }
.g-months span { position: absolute; top: 4px; font-size: 12.5px; font-weight: 600; padding-left: 8px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.g-weeks { height: 24px; border-bottom: 1px solid var(--line); }
.g-weeks span { position: absolute; top: 2px; font-size: 11px; color: var(--ink-3); padding-left: 6px; }
.g-row { display: grid; grid-template-columns: var(--label) 1fr; min-height: 62px; border-bottom: 1px solid var(--line); }
.g-row:last-child { border-bottom: 0; }
.g-row:hover { background: var(--surface-2); }
.g-label { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 28px; min-width: 0; position: sticky; left: 0; z-index: 2; background: inherit; }
.g-label a { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / var(--n, 16))); }
.g-track .g-today::before { display: none; }
.g-track .g-today { opacity: .55; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-closed); z-index: 2; pointer-events: none; }
.g-today::before { content: "Today"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; color: #fff; background: var(--c-closed); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.g-head .g-today::before { top: 2px; }
.bar { position: absolute; top: 13px; height: 36px; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; cursor: pointer;
  border: 0; font: inherit; text-align: left; overflow: hidden; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.bar:hover, .bar:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow); z-index: 2; }
.bar .lbl { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.bar .pct { font-size: 11px; font-weight: 600; margin-left: auto; position: relative; white-space: nowrap; }
.bar .pair, .bar .lbl { position: relative; }
.bar.now { background: var(--blue-tint); color: var(--blue); box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 22%, transparent); }
.bar.now .fill { position: absolute; inset: 0 auto 0 0; background: var(--blue); opacity: .18; }
.bar.done { background: var(--green-soft); color: var(--green); }
.bar.next { background: var(--hatch), var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar .av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 80%, transparent); }
.g-empty { padding: 40px 28px; text-align: center; color: var(--ink-2); }
.key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); align-items: center; }
.key i { display: inline-block; width: 22px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.key .k-now { background: var(--blue-tint); } .key .k-done { background: var(--green-soft); } .key .k-next { background: var(--hatch), var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.navbtns { display: flex; gap: 6px; }

dialog { border: 0; border-radius: var(--radius-l); padding: 0; box-shadow: 0 30px 80px rgba(20, 30, 70, .25); background: var(--surface); color: var(--ink); width: min(480px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(20, 28, 60, .28); backdrop-filter: blur(3px); }
dialog form { padding: 26px 28px 24px; }
dialog h2 { margin-bottom: 4px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; align-items: center; }
.dlg-actions .spacer { margin-right: auto; }
input[type=date], input[type=time] { font: 14px var(--font); color: var(--ink); background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 9px 12px; width: 100%; }
textarea { font: 14px var(--font); color: var(--ink); background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; width: 100%; resize: vertical; min-height: 60px; }
.durs { display: flex; gap: 6px; margin-top: 8px; }
.durs button { font: 500 12px var(--font); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.durs button:hover { color: var(--blue); border-color: var(--blue); }

@media (max-width: 1180px) { .plan-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .rs { grid-template-columns: minmax(0, 1fr); } .rs-map { border-radius: 0 0 var(--radius-l) var(--radius-l); min-height: 340px; } }
@media (max-width: 760px) { .gantt { --label: 150px; } .g-label { padding-left: 14px; gap: 8px; } .g-label .pair { display: none; } .plan-stats { gap: 14px; } .rs-form { padding: 6px 16px 20px; } }
.tiles { filter: grayscale(.9) brightness(1.04) contrast(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tiles { filter: grayscale(1) invert(.92) brightness(.9) contrast(.9); } }
:root[data-theme="dark"] .tiles { filter: grayscale(1) invert(.92) brightness(.9) contrast(.9); }

/* search panel keeps a fixed shape while the slider moves */
.rs-count { height: 170px; overflow: hidden; display: flex; flex-direction: column; }
.rs-count b { white-space: nowrap; }
#rsSub { display: block; min-height: 38px; line-height: 1.5; }
.rs-count .chips { height: 62px; overflow: hidden; align-content: flex-start; }
#rsGo { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.slider output { min-width: 110px; text-align: right; }
@media (max-width: 960px) { .rs { grid-template-columns: minmax(0, 1fr); } .rs-map { border-radius: 0 0 var(--radius-l) var(--radius-l); min-height: 340px; } }

/* call-by warnings */
.pill.bad { color: var(--red); background: var(--red-soft); --dot: var(--fam-red); }
.tile.warn { background: var(--amber-soft); color: var(--amber); }
.tile.bad { background: var(--red-soft); color: var(--red); }
.callby { margin-bottom: 24px; box-shadow: var(--shadow), inset 4px 0 0 var(--amber); }
.callby .row { gap: 12px; }
.callby .row form { margin-left: 4px; }

/* ======================================================================
   Neutral controls, colour for meaning.
   Buttons, the active menu item and other controls are navy and grey, so the
   five scheme colours only appear where they mean something (people, status,
   data). Blue still marks links and "in progress".
   ====================================================================== */
:root { --ctl: #1F2547; --ctl-ink: #FFFFFF; --ctl-soft: #ECEEF5; --ctl-soft-ink: #1F2547; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ctl: #E9EBF1; --ctl-ink: #14161D; --ctl-soft: #262A35; --ctl-soft-ink: #E9EBF1; } }
:root[data-theme="dark"] { --ctl: #E9EBF1; --ctl-ink: #14161D; --ctl-soft: #262A35; --ctl-soft-ink: #E9EBF1; }

.btn { background: var(--ctl); color: var(--ctl-ink); box-shadow: 0 6px 14px color-mix(in srgb, var(--ctl) 22%, transparent); }
.btn:hover { filter: none; background: color-mix(in oklab, var(--ctl) 88%, var(--surface)); }
.btn.quiet { background: var(--ctl-soft); color: var(--ctl-soft-ink); }
.btn.quiet:hover { background: color-mix(in oklab, var(--ctl-soft) 80%, var(--ink-3)); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.brand-mark { background: var(--ctl); box-shadow: 0 6px 16px color-mix(in srgb, var(--ctl) 25%, transparent); }
.brand-mark svg { stroke: var(--ctl-ink); }
.nav a.on { color: var(--ink); background: var(--ctl-soft); font-weight: 600; }
.nav a.on::before { background: var(--ctl); }
.side-cta { color: var(--ink); }
.side-cta:hover { background: var(--ctl-soft); }
.side-cta .plus { background: var(--ctl); color: var(--ctl-ink); box-shadow: 0 6px 14px color-mix(in srgb, var(--ctl) 25%, transparent); }
.avatar { background: var(--ctl); color: var(--ctl-ink); }
.tile { background: var(--ctl-soft); color: var(--ctl-soft-ink); }
.tile.soft { background: var(--surface-2); color: var(--ink-2); }
.next-up { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.next-up .d { color: var(--ink); }
.seg input:checked + label { color: var(--ink); }
.ticks button:hover { color: var(--ink); background: var(--ctl-soft); }
input[type=range] { background: linear-gradient(var(--ctl), var(--ctl)) 0/var(--fill, 50%) 100% no-repeat, var(--track); }
.kpi .delta { color: var(--green); }
.ring .p { stroke: var(--fam-green); }

/* Businesses printed: solid pale bars, the busiest one in full colour */
.bars .fill { background: color-mix(in oklab, var(--fam-blue) 20%, var(--surface)); }
.bars .b.is-peak .fill { background: linear-gradient(180deg, var(--fam-blue-hi), var(--fam-blue) 60%); box-shadow: 0 10px 22px color-mix(in srgb, var(--fam-blue) 28%, transparent); }
.bars .b:hover .fill { background: color-mix(in oklab, var(--fam-blue) 38%, var(--surface)); }
.bars .b.is-peak:hover .fill { background: linear-gradient(180deg, var(--fam-blue-hi), var(--fam-blue) 60%); }

/* Insight card */
.insight { margin-bottom: 24px; padding: 22px 26px; display: grid; grid-template-columns: minmax(220px, .8fr) 3fr; gap: 22px; align-items: center;
  background: var(--surface); }
.insight-head { display: flex; gap: 14px; align-items: center; }
.insight-head h2 { margin: 0; }
.insight-icon { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--grain), radial-gradient(circle at 62% 36%, var(--fam-red-hi) 0%, var(--fam-red) 64%); background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fam-red) 30%, transparent); }
.insight-icon svg { width: 22px; height: 22px; stroke: #fff; }
.insight-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.insight-item { background: var(--surface-2); border-radius: var(--radius-m); padding: 14px 16px; }
.insight-item .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.insight-item .tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--shine), var(--dot, var(--ink-3)); }
.t-call-by { --dot: var(--fam-red); } .t-appointments { --dot: var(--fam-green); } .t-calls { --dot: var(--fam-blue); }
.t-plan { --dot: var(--fam-purple); } .t-progress { --dot: var(--fam-yellow); } .t-getting-started { --dot: var(--fam-blue); }
.insight-item p { margin: 0; font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1000px) { .insight { grid-template-columns: minmax(0, 1fr); } }

/* Striped district meter */
.meter { display: flex; gap: 3px; height: 30px; }
.meter i { flex: 1 1 0; min-width: 2px; border-radius: 3px; background: var(--track); }
.meter i.d { background: linear-gradient(180deg, var(--fam-green-hi), var(--fam-green)); }
.meter i.p { background: linear-gradient(180deg, var(--fam-yellow-hi), var(--fam-yellow)); }
.meter-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.meter-key i { display: inline-block; width: 4px; height: 13px; border-radius: 2px; background: var(--track); margin-right: 6px; vertical-align: -2px; }
.meter-key i.d { background: var(--fam-green); } .meter-key i.p { background: var(--fam-yellow); }
.meter-key b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.hero-meter { margin-top: 16px; max-width: 460px; }
.hero-meter .meter { height: 22px; }
.profile .meter { margin-top: 4px; }
.profile .meter-key { justify-content: flex-start; text-align: left; }

/* Breakdown strip with ranked list */
.strip-head { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; }
.strip-head b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.strip-head span { color: var(--ink-2); font-size: 12.5px; }
.strip { display: flex; gap: 4px; height: 30px; margin-bottom: 16px; }
.strip i { flex: 1 1 0; min-width: 6px; border-radius: 8px; background-image: var(--shine); }
.legend.ranked i { width: 4px; height: 16px; border-radius: 2px; background-image: none; }
.legend.ranked .pc { width: 42px; }
.legend.ranked b { width: 56px; text-align: right; }

/* Phone: sheet rows wrap their buttons; wide tables scroll inside their card */
@media (max-width: 760px) {
  .sheet-row { flex-wrap: wrap; }
  .sheet-row .grow { flex-basis: calc(100% - 60px); }
  table.data { display: block; overflow-x: auto; }
  table.data th { position: static; }
}


/* ======================================================================
   Refinement pass: quieter surfaces, colour only as accents.
   ====================================================================== */
/* Headline figures: a small sphere marks each one; the line stays the scheme blue */
.kpi .t { display: flex; align-items: center; gap: 8px; }
.kpi .t::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--shine), var(--k, var(--fam-blue)); }
.kpi:nth-child(1) { --k: var(--fam-blue); } .kpi:nth-child(2) { --k: var(--fam-red); }
.kpi:nth-child(3) { --k: var(--fam-purple); } .kpi:nth-child(4) { --k: var(--fam-green); }
.spark path { stroke: var(--k, var(--fam-blue)); stroke-width: 1.8; }
.kpi .delta { color: var(--ink-3); font-weight: 500; }

/* Found to ready: only the first and last bars carry colour */

/* Cards and lists: fewer lines, more air */
.panel-head { padding-bottom: 8px; }
.list .row + .row { border-top-color: var(--line); }
.minis div { background: var(--surface-2); }
.insight { box-shadow: var(--shadow); }
.insight-icon { width: 44px; height: 44px; }

/* Rows of cards line up: cards in a row share the tallest one's height */
.dash { align-items: stretch; }
.meter-key { gap: 6px 12px; font-size: 11.5px; }
.profile .meter-key span { white-space: nowrap; }

/* Light or dark switch in the top bar (remembered on this browser; otherwise follows the computer's setting) */
.theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.theme-btn:hover { color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } }

/* Cleaning chart: a true waterfall. Neutral start, each removal in its reason's colour (same as the strip and
   donut), green for what is left to call. */
.wf-bar { background: transparent; border-radius: 10px; }
.wf-solid.found { background: color-mix(in oklab, var(--ink) 78%, var(--surface)); border-radius: 10px 10px 0 0; }
.wf-solid.ready { background: var(--fam-green); border-radius: 10px 10px 0 0; }
.wf-rest { background: color-mix(in oklab, var(--ink-3) 14%, var(--surface-2)); }
.wf-cut { border-radius: 8px 8px 0 0; background-image: none; }
.wf-bar > :last-child { border-radius: 0 0 10px 10px; }
.wf-solid.found, .wf-solid.ready { border-radius: 10px; }
.wf-num.neg { color: var(--ink-2); }
.wf-lab i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.wf-note { margin: -14px 28px 22px; font-size: 11.5px; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wf-solid.found { background: color-mix(in oklab, var(--ink) 50%, var(--surface)); } }
:root[data-theme="dark"] .wf-solid.found { background: color-mix(in oklab, var(--ink) 50%, var(--surface)); }

/* Centres allocated to someone else: visible, not openable */
.row.locked { cursor: default; }
.row.locked .title { color: var(--ink-2); }
.row.locked:hover { background: none; }
.lock { color: var(--ink-3); display: grid; place-items: center; flex: none; }
.lock svg { width: 17px; height: 17px; stroke: currentColor; }
.locked-name { color: var(--ink-2); }
/* empty team badge: not the empty-state box */
.av.empty { padding: 0; font-size: 12px; text-align: center; }
.av.empty.s { font-size: 10.5px; } .av.empty.l { font-size: 16px; }

/* Allocations */
.handover { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end; }
.handover .check { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; white-space: nowrap; }
.handover .check input { width: auto; }
.alloc-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.alloc-row select { min-width: 150px; }
@media (max-width: 900px) { .handover { grid-template-columns: minmax(0, 1fr); } }

.view-switch { align-self: flex-start; margin-top: 6px; }   /* the Sales tabs sit in the same place on every Sales page */

/* Telesales picker (several people per centre) */
.picker { position: relative; display: inline-block; }
.picker summary { list-style: none; cursor: pointer; font-size: 13px; padding: 6px 30px 6px 10px; border-radius: 10px; background: var(--surface-2);
  color: var(--ink); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; position: relative; }
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: ''; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg); }
.picker[open] summary { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); background: var(--surface); }
.picker-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 280px; overflow: auto;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-l, 0 18px 50px rgba(20, 30, 70, .18)); padding: 6px; }
.picker-menu label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.picker-menu label:hover { background: var(--surface-2); }
.picker-menu input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }
dialog .picker, dialog .picker summary { display: block; max-width: none; }
dialog .picker summary { font-size: 14px; padding: 10px 30px 10px 14px; border-radius: 12px; }

/* Sales runs and contact history */
.run-card { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.run-card .grow { min-width: 200px; }
.run-list { display: grid; gap: 2px; }
.run-row { display: grid; grid-template-columns: minmax(240px, 2.4fr) repeat(5, minmax(60px, 1fr)); gap: 12px; align-items: center; padding: 14px 28px; border-top: 1px solid var(--line); }
.run-row.head { border-top: 0; padding-top: 0; padding-bottom: 4px; font-size: 11.5px; color: var(--ink-3); }
.run-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.run-row .n { font-size: 11.5px; color: var(--ink-3); display: none; }
.run-row .when { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.run-row .who { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 700px) { .run-row { padding: 14px 18px; } .run-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .run-row .first { grid-column: 1 / -1; } .run-row.head { display: none; } .run-row .n { display: block; } }
.contacts { max-height: 420px; overflow: auto; }
.tier { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; margin-top: 4px; }
.tier.t1 { background: var(--amber-soft); color: var(--amber); } .tier.chk { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line-2); } .tier.t2 { background: var(--surface-2); color: var(--ink-2); }
.tier-head td { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.for-who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.for-who select { width: auto; }
.chips-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chips-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chips-pick label { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.chips-pick input:checked + label { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.chips-pick input:focus-visible + label { outline: 2px solid var(--blue); }
.note-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--blue); cursor: pointer; margin-top: 4px; }
.note-text { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.task-note { display: flex; gap: 12px; align-items: center; }
#dnc .contacts { padding: 0 14px; }
.alloc-row .picker summary { min-width: 170px; }

/* Do not call: locked results */
.seg.locked { cursor: not-allowed; }
.seg.locked label { cursor: not-allowed; }
.seg.locked input:not(:checked) + label { opacity: .55; }
.lock-msg { margin-top: 8px; font-size: 12.5px; color: var(--red); background: var(--red-soft); padding: 7px 10px; border-radius: 9px; max-width: 420px; }
.dnc-lock { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--red); }
.dnc-lock svg { width: 13px; height: 13px; stroke: currentColor; flex: none; }
.banner svg { width: 17px; height: 17px; stroke: currentColor; flex: none; }
#dnc .found { max-height: 360px; overflow: auto; margin: 10px 14px 0; }
#dnc .found td { vertical-align: top; }
#dnc .found input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); }
.tag-mini { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); margin-left: 6px; }
.tag-mini.red { background: var(--red-soft); color: var(--red); }
[hidden] { display: none !important; }
#dtab svg { width: 13px; height: 13px; vertical-align: -2px; stroke: currentColor; fill: none; margin-right: 3px; }

/* (i) tooltips */
button.tip { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-left: 4px; border: 0; background: none; color: var(--ink-3); cursor: help; vertical-align: -3px; border-radius: 50%; }
button.tip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
button.tip:hover, button.tip:focus-visible { color: var(--blue); outline: none; }
button.tip:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.tipbox { position: fixed; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px; border-radius: 10px; background: #1E2440; color: #fff;
  font-size: 12.5px; line-height: 1.45; font-weight: 400; box-shadow: 0 10px 30px rgba(20, 30, 70, .25); pointer-events: none; }
:root[data-theme="dark"] .tipbox { background: #F2F3F7; color: #1E2440; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tipbox { background: #F2F3F7; color: #1E2440; } }

.web-link { display: inline-block; font-size: 12px; margin-top: 3px; color: var(--blue); text-decoration: none; word-break: break-all; }
.web-link:hover { text-decoration: underline; }
.web-dead { font-size: 12px; margin-top: 3px; color: var(--ink-3); }

.login-note { margin: 4px 22px 10px; padding: 10px 14px; border-radius: var(--radius-m); font-size: 13.5px; }
.login-note.ok { background: var(--green-soft); color: var(--green); }
.login-note.bad { background: var(--red-soft); color: var(--red); }

/* Call notes on the results page */
.res-cell { white-space: nowrap; }
.res-cell .lock-msg { white-space: normal; }
.note-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; vertical-align: middle; border: 0; border-radius: 9px;
  background: none; color: var(--ink-3, #9AA0AE); cursor: pointer; }
.note-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.note-btn:hover { background: var(--surface-2); color: var(--ink); }
.note-btn.has { color: var(--blue); background: var(--blue-soft); }
.note-btn:focus-visible { outline: 2px solid var(--blue); }
.note-text { font-size: 12px; color: var(--ink-2); margin-top: 4px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prev-note { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-style: italic; }
@media (max-width: 760px) {   /* results on a phone: business on top, result buttons and note underneath */
  .res-table thead { display: none; }
  .res-table tr.res-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); border-top: 1px solid var(--line); }
  .res-table tr.res-row > td { border-top: 0; }
  .res-table tr.res-row > td:last-child { grid-column: 2; padding-top: 0; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .res-table .seg { flex-wrap: wrap; }
  .res-table .note-btn { margin-left: 0; }
  .res-table .lock-msg { flex-basis: 100%; }
  .note-text { white-space: normal; }
}

/* Team page */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.tcard { padding: 22px 24px 18px; display: flex; flex-direction: column; }
.tcard-head { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.tcard-head h2 { margin: 0; font-size: 17px; }
.tcard-head .av { width: 40px; height: 40px; font-size: 15px; flex: none; }
.tcard-head .tnum { color: inherit; }
.tcard-head .tnum:not(:disabled) { color: var(--blue); }
.tappt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; flex: none; }
.tcard-head .tappt .tnum { font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--green); }
.tcard-head .tappt.none .tnum { color: var(--ink-3); }
.tappt span { font-size: 11px; color: var(--ink-2); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.tstats { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tstats col.w { width: 54px; }
.tstats thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: right; padding: 12px 0 6px 8px; }
.tstats tbody th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstats tbody tr:first-child th, .tstats tbody tr:first-child td { border-top: 0; }
.tstats td { text-align: right; padding: 9px 0 9px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.tstats td.tr { font-weight: 600; color: var(--ink); }
.tstats td.tt { color: var(--ink-3); }
.tstats .tnil { color: var(--ink-3); font-weight: 400; }
.tnote { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.figure .k .of { display: block; color: var(--ink-3); font-size: 11.5px; }
.tquiet { margin-top: 24px; padding: 18px 24px; }
.tquiet h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tquiet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.tquiet li { display: flex; align-items: center; gap: 10px; }
.tquiet li .av { width: 30px; height: 30px; font-size: 13px; }
.tquiet li div { display: flex; flex-direction: column; line-height: 1.3; }
.tquiet li b { font-weight: 600; font-size: 14px; }
.tnum { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; font-variant-numeric: tabular-nums; }
.tnum:hover:not(:disabled) { text-decoration: underline; }
.tnum:disabled { color: var(--ink-3); cursor: default; }
.tnum:focus-visible { outline: 2px solid var(--blue); border-radius: 4px; }
dialog.wide-dlg { width: min(760px, calc(100vw - 32px)); }
.dlg-body { padding: 26px 28px 24px; }
.list-wrap { max-height: 60vh; overflow: auto; border-radius: 12px; }
.page-head .toggle { flex-wrap: wrap; }
.toggle a { white-space: nowrap; }
/* District targets on the centre page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input.tgt { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
table.data tr.off td { opacity: .55; }
table.data tr.off td.tg-cell { opacity: 1; }
.carry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 28px 12px; padding: 9px 10px 9px 16px;
  border-radius: var(--radius-m); background: var(--blue-soft); color: var(--blue); font-size: 13px; }
.carry-x { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.carry-x:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); }
@media (max-width: 760px) { .carry { margin: 0 16px 12px; } }
.dash .full { grid-column: 1 / -1; }
/* Map: still until clicked */
.map-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 500; pointer-events: none; padding: 5px 12px; border-radius: 999px;
  background: rgba(30, 36, 64, .78); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.rs-map:hover .map-hint, .rs-map.live .map-hint { opacity: 1; }
.rs-map #map { cursor: pointer; }
.rs-map.live #map, .rs-map.live .leaflet-container { cursor: grab; }
.leaflet-bar a.map-home { display: grid; place-items: center; width: 30px; height: 30px; background: #fff; color: #1E2440; }
.leaflet-bar a.map-home svg { width: 17px; height: 17px; stroke: currentColor; }
/* Call-backs */
.cb-row { margin-top: 2px; }
.cb-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cb-fields select { flex: 0 1 130px; width: auto; }
.cb-fields select:disabled { opacity: .5; }
.cb-datebtn { flex: 1 1 170px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px;
  background: var(--surface-2); color: var(--ink-2); font: 14px var(--font); cursor: pointer; text-align: left; }
.cb-datebtn svg { width: 18px; height: 18px; stroke: currentColor; flex: none; }
.cb-datebtn.set { color: var(--ink); font-weight: 500; }
.cb-datebtn:hover, .cb-datebtn[aria-expanded=true] { border-color: var(--line-2); }
.cb-datebtn:focus-visible { outline: 2px solid var(--blue); }
.cb-cal { margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.cb-quick { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.cb-quick button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 12.5px var(--font); cursor: pointer; }
.cb-quick button:hover { border-color: var(--ink-3); }
.cb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cb-head b { font-size: 14px; }
.cb-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--ink); cursor: pointer; }
.cb-nav svg { width: 16px; height: 16px; stroke: currentColor; }
.cb-nav:hover:not(:disabled) { background: var(--surface); }
.cb-nav:disabled { opacity: .3; cursor: default; }
.cb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cb-dow { font-size: 11px; color: var(--ink-3); padding: 4px 0; }
.cb-grid button { aspect-ratio: 1; max-height: 38px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 13px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.cb-grid button:hover:not(:disabled) { background: var(--surface); }
.cb-grid button.is-today { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 600; }
.cb-grid button.is-sel { background: var(--ctl); color: var(--ctl-ink); font-weight: 600; box-shadow: none; }
.cb-grid button:disabled { color: var(--ink-3); opacity: .45; cursor: default; }
.cb-grid button:focus-visible { outline: 2px solid var(--blue); }
.cb-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--blue-soft); color: var(--blue); }
.cb-chip svg { width: 13px; height: 13px; stroke: currentColor; }
.cb-chip.late { background: var(--red-soft); color: var(--red); }
.cb-chip[hidden] { display: none; }
tr.res-row:target { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.cb-bar { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 20px; padding: 11px 16px; border: 0; border-radius: var(--radius-m);
  background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cb-bar > svg { width: 20px; height: 20px; stroke: var(--ink-2); flex: none; }
.cb-title { font-weight: 600; margin-right: 4px; }
.cb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cb-badge b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-badge.today { background: var(--blue-soft); color: var(--blue); }
.cb-badge.late { background: var(--red-soft); color: var(--red); }
.cb-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--blue); font-size: 13px; font-weight: 600; }
.cb-go svg { width: 15px; height: 15px; stroke: currentColor; }
.cb-bar:hover { box-shadow: var(--shadow); }
.cb-bar:focus-visible { outline: 2px solid var(--blue); }
.cb-h { font-size: 12.5px; color: var(--ink-2); margin: 18px 0 6px; text-transform: none; }
.cb-h.late { color: var(--red); }
.cb-list { list-style: none; margin: 0; padding: 0; }
.cb-list li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); transition: opacity .25s; }
.cb-list li.gone { opacity: 0; }
.cb-when { flex: none; width: 92px; font-weight: 600; font-size: 13px; padding-top: 2px; }
.cb-name { font-weight: 600; }
.cb-list .grow { min-width: 0; flex: 1; }
@media (max-width: 760px) { .cb-list li { flex-wrap: wrap; } .cb-when { width: 100%; } }
.note-del { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--red); font: 13px var(--font); font-weight: 600; cursor: pointer; }
.note-del svg { width: 19px; height: 19px; stroke: currentColor; }
.note-del span { display: none; }
.note-del:hover { background: var(--red-soft); }
.note-del.sure { background: var(--red-soft); }
.note-del.sure span { display: inline; }
.note-del:focus-visible { outline: 2px solid var(--red); }
.cb-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 12.5px; }
.cb-title { white-space: nowrap; }
@media (max-width: 480px) { .cb-go-w { display: none; } .cb-go svg { width: 18px; height: 18px; } .cb-bar { gap: 8px; padding: 11px 12px; } }
/* Find on this sheet */
.res-tools { flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.row-find { position: relative; flex: 1 1 280px; max-width: 420px; }
.row-find svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--ink-3); }
.row-find input { width: 100%; padding: 9px 12px 9px 36px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); font: 14px var(--font); color: var(--ink); }
.row-find input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
/* category suggestions under the search box */
.cat-drop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max(100%, 340px); max-height: min(420px, 60vh); overflow-y: auto;
  padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 16px 40px rgba(20, 30, 70, .18), 0 0 0 1px var(--line); }
.cat-h { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cat-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.cat-opt:hover, .cat-opt:focus-within { background: var(--surface-2); }
.cat-opt input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; margin: 0; }
.cat-opt span { flex: 1; min-width: 0; }
.cat-opt b { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cat-opt[aria-selected="true"] span { font-weight: 600; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.cat-done { border: 0; border-radius: 999px; padding: 5px 14px; background: var(--ink); color: #fff; font: 600 12.5px var(--font); cursor: pointer; }
.cat-chips { display: contents; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 5px 8px 5px 12px; background: var(--blue-soft); color: var(--blue);
  font: 600 12.5px var(--font); cursor: pointer; max-width: 260px; }
.cat-chip span { font-size: 15px; line-height: 1; opacity: .7; }
.cat-chip:hover span { opacity: 1; }
.cat-clear { border: 0; background: none; color: var(--ink-3); font: 500 12.5px var(--font); cursor: pointer; text-decoration: underline; }
.res-tools #leftN { margin-left: auto; }

/* Add a business (call results) */
.add-biz { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 11px; border: 0; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 500 13px var(--font); cursor: pointer; white-space: nowrap; }
.add-biz svg { width: 16px; height: 16px; stroke: currentColor; }
.add-biz:hover { filter: brightness(.97); }
.add-biz:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) { .add-biz span { display: none; } .add-biz { padding: 9px; } }
.add-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .add-two { grid-template-columns: 1fr; } }
#addDlg input[aria-invalid] { border-color: var(--red); }
.tier.add { background: var(--blue-soft); color: var(--blue); }
.add-rm { border: 0; background: none; color: var(--ink-3); font: 11.5px var(--font); margin-left: 6px; padding: 1px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.add-rm.sure { color: var(--red); }
tr.just-added td { animation: added-glow 2.4s ease-out; }
@keyframes added-glow { from { background: var(--blue-soft); } to { background: transparent; } }
.login-warn { color: var(--amber); font-size: 12.5px; }
.part-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); vertical-align: 1px; }
.split-offer { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }

/* Separate TPS/CTPS list */
.tps-btn { display: inline-flex; align-items: center; gap: 7px; }
.tps-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.tps-btn.off { opacity: .55; cursor: not-allowed; }
.tps-warn, .tps-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13.5px; line-height: 1.45; }
.tps-warn p { margin: 0; color: var(--ink); } .tps-warn b, .tps-alert b { color: var(--red); }
.tps-alert { margin-bottom: 18px; } .tps-alert div { color: var(--ink); } .tps-alert b { display: block; margin-bottom: 2px; }
.tps-warn svg, .tps-alert svg { width: 20px; height: 20px; stroke: var(--red); flex: none; margin-top: 1px; }
.tps-approve h2 { margin: 0; }
.tps-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; max-width: 640px; }
.tps-confirm input { width: auto; margin-top: 3px; accent-color: var(--blue); }
.tps-ok { margin: -4px 0 16px; }
.tps-ok .linkish { border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; padding: 0 0 0 6px; text-decoration: underline; text-underline-offset: 2px; }
.tps-email { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12.5px; }
.tps-email a { color: var(--blue); text-decoration: none; } .tps-email a:hover { text-decoration: underline; }
.tier.reg { background: var(--red-soft); color: var(--red); font-weight: 600; }
#forWho.need { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.for-need { color: var(--red); margin-left: 10px; }
#stopBtn.sure { background: var(--red-soft); color: var(--red); }
.figure .v.low-credit { color: var(--amber); }
.figure .low-note { display: block; color: var(--amber); }
/* List check (owner only) */
.lc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; align-items: end; }
.lc-form .lc-live { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.lc-form .lc-live input { width: auto; accent-color: var(--blue); }
.lc-figs { padding: 0 24px; margin: 6px 0 14px; }
.lc-table td:first-child { text-align: left; } .lc-table tr:not(.lc-main) td:first-child { color: var(--ink-3); padding-left: 22px; }
.lc-table tr.lc-main td { font-weight: 600; }
.lc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
button.tip.addr-tip { margin-left: 6px; vertical-align: -2px; }
button.tip.addr-tip svg { stroke-width: 1.5; stroke-linejoin: round; }
/* Admin: categories on/off */
.cat-tools { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cat-tools .check { display: flex; gap: 8px; align-items: center; cursor: pointer; } .cat-tools .check input { width: auto; accent-color: var(--blue); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 18px; padding: 4px 2px; }
.cat-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.cat-item:hover { background: var(--surface-2); } .cat-item input { width: auto; margin: 0; accent-color: var(--blue); }
.cat-item.is-off span:nth-child(2) { color: var(--ink-3); text-decoration: line-through; }
.cat-save { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.cat-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cat-details > summary::-webkit-details-marker { display: none; }
.cat-sum { display: flex; align-items: center; gap: 12px; flex: none; }
.cat-details .when-open, .cat-details[open] .when-shut { display: none; } .cat-details[open] .when-open { display: inline; }
.cat-details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-l); }
.cat-save { position: sticky; bottom: 0; background: var(--surface); padding-bottom: 12px; z-index: 2; }
/* No answer: attempts badge and message left */
/* sits on the button's top-right corner, like an app badge, so nothing else moves */
.seg label.na-lab { position: relative; }
.seg label .tries { position: absolute; top: -7px; right: -7px; z-index: 2; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--blue); color: #fff; font: 600 10.5px/1 var(--font); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.seg input:not(:checked) + label .tries { display: none; }
.vm-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; margin-left: 6px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink-3); font: 500 12px var(--font); cursor: pointer; vertical-align: middle; }
.vm-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.vm-btn:hover { color: var(--ink-2); }
.vm-btn.on { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.seg input[value=call_back]:checked + label { color: var(--amber); }
/* a thin coloured line round the whole result box for the results that need following up */
.seg:has(input[value=call_back]:checked) { box-shadow: inset 0 0 0 1.5px var(--amber); }
.seg:has(input[value=appointment]:checked) { box-shadow: inset 0 0 0 1.5px var(--green); }
.seg:has(input[value=no_answer]:checked) { box-shadow: inset 0 0 0 1.5px var(--blue); }
/* Call-back bar on a sheet: sticks to the top while scrolling */
.cbar { position: sticky; top: 0; z-index: 8; margin: 0 0 6px; padding: 8px 28px; background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: 0 0 14px 14px; }
.cbar.stuck { box-shadow: 0 8px 20px rgba(20, 30, 70, .10); }
.cbar-line { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13px; min-width: 0; }
.cbar-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.cbar-ic svg { width: 16px; height: 16px; stroke: currentColor; }
.cbar.has-late .cbar-ic { background: var(--red-soft, #fdecec); color: var(--red); }
.cbar.has-soon:not(.has-late) .cbar-ic { background: var(--amber-soft, #fff4e0); color: var(--amber); }
.cbar-k { flex: none; font-weight: 600; color: var(--ink); }
.cbar-late, .cbar-next { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cbar-late { flex: 0 1 auto; padding-right: 10px; border-right: 1px solid var(--line); }
.cbar-next { flex: 1 1 auto; }
.cbar-n { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--red-soft, #fdecec); color: var(--red); font-size: 11.5px; font-weight: 600; }
.cbar-lab { flex: none; color: var(--ink-3); font-size: 12px; }
.cbar-none { color: var(--ink-3); }
.cbi { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.cbi:hover { background: var(--surface-2); text-decoration: none; }
.cbi-t { flex: none; padding: 2px 7px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink); }
.cbi.late .cbi-t { background: var(--red-soft, #fdecec); color: var(--red); }
.cbi.up .cbi-t { background: var(--blue-soft); color: var(--blue); }
.cbi.soon .cbi-t { background: var(--amber-soft, #fff4e0); color: var(--amber); }
.cbi b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbi-s { flex: none; font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 5px; }
.cbi-w { flex: none; font-size: 12px; color: var(--ink-3); }
.cbi.late .cbi-w { color: var(--red); }
.cbi.soon .cbi-w { color: var(--amber); font-weight: 600; }
.cbar-all { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 4px 8px 4px 12px; font: 500 12.5px var(--font); cursor: pointer; }
.cbar-all svg { width: 14px; height: 14px; stroke: currentColor; transition: transform .15s; }
.cbar-all .m-s { display: none; }
@media (max-width: 760px) { .cbar-all .m-s { display: inline; } }
.cbar-all[aria-expanded="true"] svg { transform: rotate(180deg); }
.cbar-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 24px; padding: 10px 0 6px; }
.cbp-g h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cbp-g.late h4 { color: var(--red); }
.cbp-g .cbi { display: flex; width: 100%; box-sizing: border-box; }
.cbp-g .cbi-w { margin-left: auto; }
.cbp-more { display: block; padding: 4px 4px 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 760px) {
  .cbar { padding: 6px 10px; }
  .cbar-k, .cbar-lab, .cbi-s, .cbar-late .cbi { display: none; }
  .cbar-late { flex: none; padding-right: 0; border-right: 0; }
  .cbar-next .cbi { padding: 4px 2px 4px 0; }
  .cbar-all { padding: 4px 6px 4px 10px; }
  .cbar-all .m-l { display: none; }
  .cbar-line { gap: 8px; }
}
/* reopening a sheet where you left off */
tr.resume-hl > td { animation: resumeHl 2.6s ease-out; }
@keyframes resumeHl { 0%, 35% { background: rgba(60, 110, 220, .10); } 100% { background: transparent; } }
.resume-pill { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px;
  box-shadow: 0 10px 30px rgba(20, 30, 70, .25); transition: opacity .5s; }
.resume-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-pill button { flex: none; border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, .16); color: #fff; font: 600 12.5px var(--font); cursor: pointer; }
.resume-pill.out { opacity: 0; }
@media (max-width: 760px) { .resume-pill { bottom: calc(140px + env(safe-area-inset-bottom)); } }
.seg input[value=not_interested]:checked + label { color: var(--ink); }
.seg label .tries.msg { padding: 0 3px; } .seg label .tries.msg svg { width: 13px; height: 13px; stroke: #fff; display: block; }
/* Better (preferred) number */
.alt-num { font-weight: 600; color: var(--ink); }
.alt-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 600 10.5px var(--font); vertical-align: 1px; }
.alt-kind { display: flex; gap: 7px; align-items: center; margin-top: 8px; font-size: 13px; cursor: pointer; width: fit-content; }
.alt-kind input { width: auto; margin: 0; accent-color: var(--blue); }
/* Do not call reason pop-up */
.dnc-dlg { width: min(360px, calc(100vw - 32px)); }
.dnc-pick { display: grid; gap: 8px; }
.dnc-pick button { text-align: left; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: 500 14px var(--font); cursor: pointer; }
.dnc-pick button:hover { background: var(--surface-2); }
.dnc-pick button.on { background: var(--blue-soft); border-color: transparent; color: var(--blue); font-weight: 600; }

/* Results save as you go */
#changed.save-bad { color: var(--red); font-weight: 600; }

/* Note on a row: a chip like the call-back one, one line, the full note on hover */
.note-chip { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 5px; max-width: 34ch; padding: 3px 10px 3px 8px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font-size: 12.5px; cursor: default; }
.note-chip svg { width: 14px; height: 14px; stroke: var(--ink-2); flex: none; }
.note-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-scroll { overflow-x: auto; }   /* a narrow screen scrolls the table inside its panel instead of spilling past it */
.note-chip[hidden] { display: none; }
@media (max-width: 760px) { .note-chip span { white-space: normal; } }
/* Earlier notes and hide buttons beside the note button */
.hist-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; padding: 0; vertical-align: middle; border: 0; border-radius: 9px;
  background: none; color: var(--ink-3, #9AA0AE); cursor: pointer; }
.hist-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.biz-name { font-weight: 600; }
.hist-btn:hover { background: var(--surface-2); color: var(--ink); }
.hist-btn[hidden] { display: none; }
.hist-btn:focus-visible { outline: 2px solid var(--blue); }
tr.is-hid { background: var(--surface-2); }
tr.is-hid .phone-cell, tr.is-hid .res-cell, tr.is-hid td > .small, tr.is-hid .web-link, tr.is-hid .note-chip, tr.is-hid .tier { opacity: .5; }
tr.is-hid .biz-name { color: var(--ink-3, #9AA0AE); }
/* Earlier notes in the note pop-up */
.hist-link { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--blue); font: 500 13px var(--font); cursor: pointer; }
.hist-link:hover { text-decoration: underline; }
.hist-list { margin-top: 8px; max-height: 210px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; color: var(--ink-2); }
.hist-list:not(:has(.hist-item)) { padding: 10px 12px; }
.hist-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px 9px 12px; border-top: 1px solid var(--line); color: var(--ink); }
.hist-item:first-child { border-top: 0; }
.hist-item > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hist-meta { font-size: 11.5px; color: var(--ink-3, #9AA0AE); margin-bottom: 2px; }
.hist-del { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--ink-3, #9AA0AE); cursor: pointer; }
.hist-del svg { width: 16px; height: 16px; stroke: currentColor; }
.hist-del:hover { background: var(--red-soft); color: var(--red); }

/* Note pop-up: 'Add' preferred number or website, folded away until needed */
.add-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.add-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font: 500 12.5px var(--font); cursor: pointer; }
.add-chip svg { width: 15px; height: 15px; stroke: currentColor; }
.add-chip:hover { color: var(--ink); background: var(--surface-2); }
.add-chip.on { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.add-chip:focus-visible { outline: 2px solid var(--blue); }
.add-box[hidden] { display: none; }

/* Toggle switches on the results toolbar */
.switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch[hidden] { display: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .knob { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); transition: background .15s; }
.switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 70, .25); transition: transform .15s; }
.switch input:checked + .knob { background: var(--blue); }
.switch input:checked + .knob::after { transform: translateX(14px); }
.switch input:checked ~ * { color: var(--ink); }
.switch.kbd input:focus-visible + .knob { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch:hover .knob { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); }

/* Show switch in place of the row number, centred in its column. The row number sits on the white dot:
   on (blue, dot right) = shown; off (grey, dot left) = hidden. */
.res-table .show-col { width: 92px; min-width: 92px; padding-left: 22px; padding-right: 8px; text-align: center; white-space: nowrap; }
/* Show circle in place of the row number: tap to hide (a thin diagonal line goes through the number), tap again to show. */
.row-switch { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--ink-2); font: 600 10.5px/1 var(--font); cursor: pointer; vertical-align: middle; transition: border-color .15s, background .15s; }
.row-switch:hover { border-color: var(--blue); color: var(--blue); }
.row-switch .knob { display: none; }
.row-switch .n { position: relative; display: block; }
.row-switch[aria-checked="false"] { background: var(--surface-2); color: var(--ink-3); }
.row-switch[aria-checked="false"] .n::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 1px; background: var(--ink-2); transform: rotate(-45deg); }
tr.res-row.fading { opacity: 0; transition: opacity .35s ease; }
.row-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Filters on their own line under 'still to call' and Add business, aligned to the right */
.res-filters { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin-top: 4px; }
.res-filters .switch { line-height: 20px; }
@media (max-width: 760px) { .res-filters { justify-content: flex-start; margin-top: 0; } }

/* Fixed column widths, so filtering rows (To call only, Hidden, Find) never makes the columns jump */
@media (min-width: 761px) {
  .res-table { table-layout: fixed; width: 100%; min-width: 1180px; }
  .res-table th.show-col { width: 92px; }
  .res-table th.phone-col { width: 196px; }
  .res-table th.result-col { width: 600px; }
}

/* Earlier notes: a small clock badge on the corner of the note button, so it takes no width of its own */
.note-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.res-table .note-wrap .note-btn { margin-left: 0; }
.note-wrap .hist-btn { position: absolute; top: -7px; right: -9px; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: var(--surface);
  color: var(--blue); box-shadow: 0 0 0 1px var(--line-2); }
.note-wrap .hist-btn svg { width: 12px; height: 12px; stroke-width: 2.2; }
.note-wrap .hist-btn:hover { background: var(--blue-soft); }
/* Tighter edges: narrower Show column and result column; Business gets the room */
@media (min-width: 761px) {
  .res-table th.show-col { width: 74px; }
  .res-table .show-col { padding-left: 18px; padding-right: 4px; }
  .res-table th.phone-col { width: 182px; }
  .res-table th.result-col { width: 556px; }
  .res-table td.res-cell { padding-right: 12px; }
}

/* Do not call: the search stays open; only the 'On the list' table folds away */
.dnc-list { border-top: 1px solid var(--line); }


/* ======================================================================
   Sales: appointments booked from the sheets, the rep's pages and the price schedule.
   Same cards, pills and tokens as the rest of the tool.
   ====================================================================== */
.pill.arrange { color: var(--ink-2); background: var(--surface-2); --dot: var(--ink-3); }
.pill.booked { color: var(--blue); background: var(--blue-soft); --dot: var(--fam-blue); }
.pill.won { color: var(--green); background: var(--green-soft); --dot: var(--fam-green); }
.pill.follow { color: var(--amber); background: var(--amber-soft); --dot: var(--fam-yellow); }
.pill.lost { color: var(--red); background: var(--red-soft); --dot: var(--fam-red); }

/* Date tile: day and weekday */
.dtile { width: 46px; height: 50px; border-radius: 12px; background: var(--ctl-soft); color: var(--ctl-soft-ink); display: grid; place-content: center; text-align: center; flex: none; line-height: 1.05; }
.dtile b { font-size: 17px; font-weight: 600; }
.dtile span { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.dtile.today { background: var(--ctl); color: var(--ctl-ink); }
.dtile.today span { color: color-mix(in srgb, var(--ctl-ink) 75%, transparent); }
.dtile.tbc { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* Appointment cards */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.acard { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.acard-top { display: flex; gap: 12px; align-items: flex-start; }
.acard-top .grow { flex: 1; min-width: 0; }
.acard-biz { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
a.acard-biz { color: inherit; }
.acard-cat { font-size: 12.5px; color: var(--ink-2); }
.acard-meta { display: grid; gap: 7px; font-size: 13px; }
.acard-meta div { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.acard-meta div span { min-width: 0; overflow-wrap: anywhere; }
.acard-meta svg { width: 16px; height: 16px; stroke: var(--ink-3); flex: none; margin-top: 2px; }
.acard-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
.acard-foot .grow { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.filters .toggle { flex-wrap: wrap; }
.filters .toggle a b { font-weight: 600; margin-left: 5px; }
.filters select { width: auto; min-width: 160px; box-shadow: var(--shadow-s); border-radius: 999px; padding: 7px 38px 7px 16px; font-size: 13px; -webkit-appearance: none; appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7489' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; }
.cb-bar .cb-badge.warn { background: var(--amber-soft); color: var(--amber); }
a.cb-bar { text-decoration: none; }

/* Big tap targets for a rep on a phone */
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: var(--surface-2);
  color: var(--ink); font-size: 12px; font-weight: 500; text-align: center; min-height: 64px; }
a.act:hover { text-decoration: none; background: var(--ctl-soft); }
.act svg { width: 22px; height: 22px; stroke: currentColor; }
.act.main { background: var(--ctl); color: var(--ctl-ink); }
a.act.main:hover { background: color-mix(in oklab, var(--ctl) 88%, var(--surface)); }
.act.off { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cal-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Facts about the business */
.facts-list > div { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
.facts-list > div:first-child { border-top: 0; padding-top: 2px; }
.facts-list svg { width: 18px; height: 18px; stroke: var(--ink-3); flex: none; margin-top: 2px; }
.facts-list .k { font-size: 11.5px; color: var(--ink-3); }
.facts-list .v { font-size: 14px; overflow-wrap: anywhere; }

/* Notes */
.thread { display: grid; gap: 10px; }
.thread .n { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.thread .by { font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; white-space: normal; }

/* Outcome form */
.big-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.big-choice input { position: absolute; opacity: 0; pointer-events: none; }
.big-choice label { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; font-weight: 500; cursor: pointer; min-height: 46px; }
.big-choice label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--shine), var(--dot, var(--ink-3)); flex: none; }
.big-choice input:checked + label { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ctl), var(--shadow-s); }
.big-choice input:focus-visible + label { outline: 2px solid var(--blue); }
.o-won { --dot: var(--fam-green); } .o-follow { --dot: var(--fam-yellow); } .o-lost { --dot: var(--fam-red); } .o-noshow { --dot: var(--fam-purple); } .o-cancelled { --dot: var(--ink-3); }
.ad-line { background: var(--surface-2); border-radius: 14px; padding: 14px 16px 16px; margin-top: 12px; }
.ad-line .two label.f { margin-top: 8px; }
.ad-line select, .ad-line input[type=text] { background: var(--surface); }
.ad-line .sum { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding-top: 8px; }
.ad-line .sum .num { white-space: nowrap; }
.ad-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
.ad-x { border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.ad-x:hover { color: var(--red); background: var(--red-soft); }
.money { position: relative; }
.money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-weight: 500; pointer-events: none; }
.money input { padding-left: 28px; font-weight: 600; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-top: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ctl); flex: none; }
.note-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 13px; }
.note-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.note-ok svg, .note-warn svg { width: 18px; height: 18px; stroke: currentColor; flex: none; margin-top: 1px; }
input[type=date], input[type=time], input[type=email], input[type=month], input[type=number] { font: 14px var(--font); color: var(--ink); background: var(--surface-2);
  border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; width: 100%; }
input[type=date]:focus, input[type=time]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, textarea:focus {
  outline: none; border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
.sale-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sale-lines td { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.sale-lines td.r { text-align: right; white-space: nowrap; padding-left: 12px; }
.sale-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.sale-total b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

/* On the call sheet: the booked visit under the business name */
.ap-chip { display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--green-soft); color: var(--green); border: 0; font-family: inherit; cursor: pointer; }
.ap-chip svg { width: 13px; height: 13px; stroke: currentColor; }
.ap-chip[hidden] { display: none; }
.when-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Price schedule */
.stack { grid-template-columns: minmax(0, 1fr); }
.stack > * { min-width: 0; }
.price-in { width: 104px; text-align: right; padding: 7px 10px; font-variant-numeric: tabular-nums; }
.price-grid-wrap { overflow-x: auto; padding: 0 16px 8px; }
.price-grid-wrap table.data { min-width: 520px; }
.pct-in { width: 72px; text-align: right; padding: 6px 10px; }
.setup-rows { display: grid; gap: 8px; }
.setup-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr) auto; gap: 8px; align-items: center; }
.term-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); gap: 8px; align-items: center; }
.ctl-tick { width: 18px; height: 18px; accent-color: var(--ctl); }

@media (max-width: 760px) {
  .acards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .acard { padding: 18px 18px 16px; }
  .acts { gap: 8px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .setup-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setup-row > :last-child { grid-column: 1 / -1; }
  .filters select { flex: 1; }
}

.dist-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.dist-pill svg { width: 14px; height: 14px; stroke: currentColor; flex: none; }
.dist-pill b { font-weight: 600; }
.dp { display: block; }

/* Appointment history: a quiet timeline, folded away until wanted */
.hist-panel > summary:focus { outline: none; }
.hist-panel > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-l); }
.hist-panel:not([open]) > summary { padding-bottom: 22px; }
.timeline { list-style: none; margin: 0; padding: 4px 28px 24px; }
.timeline li { position: relative; padding: 0 0 16px 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; border-radius: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); }
.timeline li.first .tl-dot { background: var(--shine), var(--fam-blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tl-text { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.tl-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 760px) { .timeline { padding: 4px 20px 20px; } }

/* Sales rep logins have no search box: this keeps the buttons on the right, as for everyone else */
.topbar-gap { margin-left: auto; }
@media (max-width: 760px) { .topbar-gap ~ .mode { display: none; } }   /* a rep's phone: title, light or dark and their menu on one line */

/* Who booked a visit, and which garden centre it is for */
.who-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; flex: none; }
.who-pill .av { box-shadow: none; }
.site-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--fam-green) 12%, var(--surface)); color: var(--green); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.site-sub { color: var(--green); font-weight: 500; }
/* The rep's sites from the Planner */
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: -6px 0 22px; }
.site-card { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 16px 20px 18px; display: grid; gap: 4px; }
.site-card.now { box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in oklab, var(--fam-green) 45%, transparent); }
.site-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.site-name { font-size: 17px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.site-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.site-team > .small { margin-right: 2px; }
@media (max-width: 760px) { .site-cards { gap: 12px; margin-top: -10px; } .row .who-pill span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; } }

/* ---------- messages on an appointment, notifications and the small map ---------- */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
@media (max-width: 760px) { .nav-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); } }
.msg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.msg-pill svg { width: 14px; height: 14px; stroke: currentColor; }
.msg-pill:hover { text-decoration: none; filter: brightness(.97); }

.chat { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px 2px 4px; overscroll-behavior: contain; }
.chat .m { max-width: 86%; align-self: flex-start; }
.chat .m .t { background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.chat .m.mine { align-self: flex-end; text-align: right; }
.chat .m.mine .t { background: var(--ctl); color: var(--ctl-ink); border-radius: 14px 14px 4px 14px; text-align: left; }
.chat .m .by { font-size: 11.5px; color: var(--ink-3); margin: 0 4px 3px; }
.chat-empty { margin: 0; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-form textarea { min-height: 42px; height: 42px; resize: none; line-height: 1.45; padding: 10px 12px; }
.chat-form .btn { flex: none; height: 42px; }

.inbox .msg-dot { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red-soft); color: var(--red); font-weight: 600; font-size: 13px; }
.inbox .msg-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .msg-last b { font-weight: 500; color: var(--ink); }
.inbox .row > .small { flex: none; }

.push-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; margin-bottom: 20px; border-radius: var(--radius-m); background: var(--blue-soft); color: var(--ink); font-size: 13.5px; }
.push-nudge > svg { width: 20px; height: 20px; stroke: var(--blue); flex: none; }
.push-nudge .grow { flex: 1; min-width: 0; }
.nudge-x { flex: none; border: 0; background: none; color: var(--ink-2); font-size: 20px; line-height: 1; padding: 2px 4px; cursor: pointer; }

.notif-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.notif-btns .btn[hidden] { display: none; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; }
.ios-share { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); vertical-align: -5px; }
.ios-share svg { width: 15px; height: 15px; stroke: var(--blue); }
.tick-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.tick-list li { position: relative; padding-left: 24px; }
.tick-list li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 11px; height: 6px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* the visit box with the map down its right-hand side, top to bottom; left out on a phone */
.panel.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
.visit-main { min-width: 0; }
.visit-map { position: relative; min-height: 260px; border-radius: 0 var(--radius-l) var(--radius-l) 0; overflow: hidden; background: var(--surface-2); }
.visit-map #miniMap { position: absolute; inset: 0; z-index: 0; }
.visit-map .leaflet-control-attribution { font-size: 9.5px; }
@media (max-width: 760px) { .panel.has-map { display: block; } .visit-map { display: none; } }
/* the appointment page in one column, in the order a rep needs it: the visit, the business, the notes (what telesales
   learned on the call), then how it went */
@media (max-width: 960px) {
  .appt-grid { display: flex; flex-direction: column; align-items: stretch; }
  .appt-grid > .stack { display: contents; }
  .appt-grid .o-visit { order: 1; } .appt-grid .o-biz { order: 2; } .appt-grid .o-notes { order: 3; }
  .appt-grid .o-out { order: 4; } .appt-grid .o-cancel { order: 5; } .appt-grid .o-hist { order: 6; }
}
/* on a phone each part opens and closes from its title; shut, it shows one line saying what is inside */
.acc-btn, .acc-sub { display: none; }
@media (max-width: 760px) {
  .acc > .panel-head, .acc > .visit-main > .panel-head { cursor: pointer; flex-wrap: nowrap; align-items: center; -webkit-tap-highlight-color: transparent; }
  .acc .acc-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -10px -12px -10px auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
  .acc .acc-btn::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(3px) rotate(-135deg); transition: transform .2s; }
  .acc.shut .acc-btn::before { transform: translateY(-3px) rotate(45deg); }   /* shut: points down, open: points up */
  .acc .acc-btn:focus-visible { outline: 2px solid var(--blue); }
  .acc.shut > .panel-head ~ *, .acc.shut > .visit-main > .panel-head ~ *, .acc.shut > .visit-map { display: none; }
  .acc.shut > .panel-head, .acc.shut > .visit-main > .panel-head { padding-bottom: 20px; }
  .acc.shut .acc-sub { display: block; }
}
@media (prefers-reduced-motion: reduce) { .acc .acc-btn::before { transition: none; } }

/* ---------- sales overview: the board ---------- */
.period-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 18px; }
.period-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.period-nav h2 { margin: 0; font-size: 18px; min-width: 0; }
.period-nav .btn.small { padding: 7px 9px; }
.hbars { display: grid; gap: 14px; padding: 8px 28px 26px; }
.hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; align-items: center; gap: 14px; }
.hb-who { display: flex; align-items: center; gap: 10px; font-weight: 500; min-width: 0; white-space: nowrap; }
.hb-who > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 30px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.hb-fill { height: 100%; border-radius: 10px; background: color-mix(in oklab, var(--fam-blue) 20%, var(--surface)); }
.hbar.top .hb-fill { background: linear-gradient(90deg, var(--fam-blue), var(--fam-blue-hi)); box-shadow: 0 8px 18px color-mix(in srgb, var(--fam-blue) 26%, transparent); }
.hbar.green .hb-fill { background: color-mix(in oklab, var(--fam-green) 24%, var(--surface)); }
.hbar.green.top .hb-fill { background: linear-gradient(90deg, var(--fam-green), var(--fam-green-hi)); box-shadow: 0 8px 18px color-mix(in srgb, var(--fam-green) 26%, transparent); }
.hbar.me .hb-who > span:last-child { color: var(--blue); font-weight: 600; }
.hb-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.hb-val span { display: block; font-size: 11.5px; color: var(--ink-2); font-weight: 400; }
.hb-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 28px 22px; border-top: 1px solid var(--line); }
.hb-total b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.hbars.compact { padding: 4px 22px 18px; gap: 10px; }
.hbars.compact .hbar { grid-template-columns: 96px minmax(0, 1fr) 76px; gap: 10px; }
.hbars.compact .hb-track { height: 22px; border-radius: 8px; }
.hbars.compact .hb-fill { border-radius: 8px; }
.who-cell { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
table.data tr.tot td { font-weight: 600; }
@media (max-width: 760px) {
  .hbars { padding: 6px 18px 20px; }
  .hbar { grid-template-columns: 92px minmax(0, 1fr) 82px; gap: 10px; }
  .hb-who .av { display: none; }
  .hb-total { padding: 12px 18px 18px; }
}

/* the rep's line on the board, at the top of My Apps */
.board-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 20px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); color: inherit; }
.board-card:hover { text-decoration: none; }
.board-card .rank { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: 16px; }
.board-card .grow { flex: 1; min-width: 0; }
.board-card .big { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- calendar ---------- */
.cal-head { align-items: center; flex-wrap: wrap; gap: 12px; }
.cal-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-key { display: inline-flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-right: 4px; }
.cal-key > a, .cal-key > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; padding: 2px 8px 2px 2px; border-radius: 999px; }
.cal-key > a:hover { background: var(--surface-2); text-decoration: none; }
.cal-key > a.on { background: var(--blue-soft); color: var(--blue); }
.cal-key > a.dim { opacity: .45; }
.cal { display: grid; grid-template-columns: 56px repeat(5, minmax(0, 1fr)); padding: 0 20px 22px; }
.cal-h { padding: 10px 8px 12px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cal-h b { display: block; font-size: 18px; color: var(--ink); font-weight: 600; }
.cal-h.today b { display: grid; place-items: center; width: 32px; height: 32px; margin: 1px 0 -4px -7px; border-radius: 50%; background: var(--ctl); color: var(--ctl-ink); font-size: 15px; }
.cal-any-lab { font-size: 11px; color: var(--ink-3); padding: 8px 10px 8px 0; text-align: right; border-bottom: 1px solid var(--line); }
.cal-any { display: grid; gap: 4px; padding: 6px 5px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-any .ev { position: static; }
.cal-times { position: relative; height: calc(var(--hpx) * var(--hours)); }
.cal-times span { position: absolute; right: 10px; font-size: 11px; color: var(--ink-3); transform: translateY(-50%); }
.cal-times span:first-child { transform: none; }
.cal-day { position: relative; height: calc(var(--hpx) * var(--hours)); border-left: 1px solid var(--line);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--hpx) - 1px), var(--line) calc(var(--hpx) - 1px) var(--hpx)); }
.cal-day.today { background-color: color-mix(in oklab, var(--blue-soft) 45%, transparent); }
.ev { position: absolute; left: 5px; right: 5px; display: block; border-radius: 10px; padding: 6px 8px; font-size: 12px; line-height: 1.3; overflow: hidden;
  background: color-mix(in oklab, var(--c, var(--fam-blue)) 14%, var(--surface)); color: var(--ink); }
.ev:hover { text-decoration: none; background: color-mix(in oklab, var(--c, var(--fam-blue)) 22%, var(--surface)); }
.ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .t { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; }
.ev .t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--shine), var(--c, var(--fam-blue)); flex: none; }
.ev.done { opacity: .62; }
.cal-tbc { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 28px 24px; }
.cal-tbc .ev { position: static; min-width: 200px; }
.cal-month { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 20px 22px; }
.cal-cell { min-height: 112px; padding: 6px 5px 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.cal-cell:nth-of-type(5n + 1) { border-left: 0; }
.cal-cell.other { background: var(--surface-2); }
.cal-cell.other .cal-dn { color: var(--ink-3); }
.cal-cell .ev { position: static; padding: 4px 7px; }
.cal-dn { font-size: 12.5px; font-weight: 600; padding: 0 3px 2px; }
.cal-cell.today .cal-dn { color: var(--blue); }
.cal-agenda { display: none; padding: 0 18px 18px; }
.cal-agenda .ev { position: static; margin-bottom: 6px; padding: 9px 12px; font-size: 13px; }
.cal-agenda .ev .t { font-size: 12px; }
.ag-day { font-size: 13px; margin: 14px 0 8px; color: var(--ink-2); font-weight: 600; }
.ag-day.today { color: var(--blue); }
.ag-day:first-child { margin-top: 4px; }
.sync-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sync-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 960px) { .sync-help { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cal, .cal-month { display: none; }
  .cal-agenda { display: block; }
  .cal-tbc { padding: 0 18px 20px; }
  .cal-tbc .ev { min-width: 0; flex: 1 1 100%; }
}
.head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Service: plan and features */
.feat-rows { display: grid; gap: 0; }
.feat-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.feat-row:first-child { border-top: 0; padding-top: 4px; }
.feat-row .switch { margin-top: 2px; }
.feat-row .switch input:disabled + .knob { opacity: .55; }
.feat-row b { font-weight: 600; margin-right: 8px; }
.feat-row p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); max-width: 760px; }
.feat-row .grow { flex: 1; min-width: 0; }

/* ---------- Messages page ---------- */
.msg-btn { position: relative; display: grid; place-items: center; text-decoration: none; }
.msg-btn:hover { text-decoration: none; }
.msg-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--canvas); }
.msg-dot[hidden], .nav-badge[hidden] { display: none; }
.msg-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.msg-list .list { padding: 8px; }
.thread-row { align-items: flex-start; }
.thread-row.on { background: var(--blue-soft); }
.thread-row.unread .title { font-weight: 600; }
.thread-row.unread .thread-last { color: var(--ink); }
.thread-av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ctl-soft); color: var(--ctl-soft-ink); font-weight: 600; }
.thread-av i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 10px; background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 0 4px; box-shadow: var(--shadow-s); }
.thread-subj { color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.unread-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.msg-pane { min-height: 420px; }
.msg-pick { padding: 80px 24px; }
.thread-head h2 { margin: 2px 0 0; overflow-wrap: anywhere; }
.thread-chat { max-height: 58vh; min-height: 220px; }
.msg-back { display: none; }
.pick-people label { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding-top: 7px; padding-bottom: 7px; }
.pick-role { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.new-msg input[type=text] { width: 100%; }
@media (max-width: 760px) {
  .msg-wrap { grid-template-columns: minmax(0, 1fr); }
  .msg-wrap.in-thread .msg-list, .msg-wrap:not(.in-thread) .msg-pane, .msg-head.in-thread { display: none; }
  .msg-back { display: inline-block; }
  .thread-chat { max-height: 62vh; }
}
/* dashboard: telesales calls for managers */
.tc-list { display: grid; gap: 10px; padding: 4px 22px 18px; }
.tc-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px 44px; align-items: center; gap: 10px; }
.tc-row .hb-track { height: 22px; border-radius: 8px; }
.tc-row .hb-fill { border-radius: 8px; background: color-mix(in oklab, var(--fam-green) 24%, var(--surface)); }
.tc-n { text-align: right; line-height: 1.2; }
.tc-n b { font-weight: 600; }
.tc-n span { display: block; font-size: 11px; color: var(--ink-2); }
.tbl-scroll { overflow-x: auto; padding: 0 16px 16px; }
.tbl-scroll table.data { width: 100%; margin: 0; }
table.data.perf th { white-space: nowrap; }
/* Appointments: Quick view shows the top of every card (business, stage, when, rep); Full view shows everything */
.acards.quick .acard-meta > div:not(:first-child) { display: none; }
.acards.quick .acard { gap: 12px; }
.filters .grow { flex: 1; }
.view-q { white-space: nowrap; }
/* the board: number of sales beside each bar, and weekly targets when set */
.hbar.has-count { grid-template-columns: 150px minmax(0, 1fr) 58px 110px; }
.hbars.compact .hbar.has-count { grid-template-columns: 96px minmax(0, 1fr) 46px 76px; }
.hb-count { text-align: center; line-height: 1.15; }
.hb-count b { display: block; font-size: 17px; font-weight: 600; }
.hbars.compact .hb-count b { font-size: 14px; }
.hb-count span { font-size: 11px; color: var(--ink-2); }
.hb-track { position: relative; }
.hb-tg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ink); }
.hbars.compact .hb-tg { font-size: 11px; right: 7px; }
.team-target { margin: 2px 28px 8px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--blue-soft); }
.tt-top { display: flex; justify-content: space-between; align-items: baseline; }
.tt-top b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--blue); }
.tt-bar { height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--blue) 14%, var(--surface)); margin: 8px 0; overflow: hidden; }
.tt-bar div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fam-blue), var(--fam-blue-hi)); }
.tt-sub { font-size: 13px; color: var(--ink-2); }
.tt-sub b { color: var(--ink); font-weight: 600; }
.tg-fold { padding: 0 28px 20px; }
.tg-fold summary { list-style: none; display: inline-flex; }
.tg-form { margin-top: 12px; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.tg-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13.5px; }
.tg-row .money { max-width: 130px; }
@media (max-width: 760px) {
  .hbar.has-count { grid-template-columns: 84px minmax(0, 1fr) 40px 76px; gap: 8px; }
  .team-target { margin: 2px 18px 8px; }
  .tg-fold { padding: 0 18px 18px; }
}
/* Sales overview: recent sales, three across, filling the width */
.sale-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 4px 16px 16px; }
.sale-tile { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-m); color: inherit; min-width: 0; }
.sale-tile:hover { background: var(--surface-2); text-decoration: none; }
.sale-tile .grow { flex: 1; min-width: 0; }
.sale-tile .title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sale-tile .sub { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sale-tile .sub b { color: var(--ink); font-weight: 600; }
@media (max-width: 1180px) { .sale-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sale-tiles { grid-template-columns: minmax(0, 1fr); padding: 4px 8px 12px; } }

/* ======================================================================
   Phone sizes. Good practice on a phone: body text 15px, secondary text at least 13px, labels and badges at
   least 11 to 12px; anything you tap at least 44px tall (Apple's guide; WCAG 2.2 asks for 24px at the very least);
   form fields at 16px, or an iPhone zooms the page in when you tap them.
   ====================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .lede { font-size: 15px; }
  h2 { font-size: 18px; }

  /* secondary text: 12.5px on a computer, 13.5px on a phone */
  .small, .row .sub, .sub, .kpi .t, .crumb, .acard-cat, .tl-meta, .figure .k, label.f, .f, .who-pill, .site-pill, .dist-pill,
  .sale-tile .sub, .cal-key a, .cal-key span, .note-chip span, .meter-key, .clean-notes > div, .thread-meta .small { font-size: 13.5px; }
  /* labels, badges and small captions */
  .pill, .panel-head .k, .k, .kpi .delta, .delta, th, table.data th, .tag, .seg label, .insight-item .tag { font-size: 12.5px; }
  .kpi .s, .hb-count span, .hb-val span, .tc-n span, .ev .t, .cal-agenda .ev .t, .pick-role, .bars .tip span, .facts-list .k { font-size: 12.5px; }
  .dtile span { font-size: 11.5px; }
  .bars-axis, .axis span, .g-weeks span, .g-months span, .bar .lbl, .key span, .wf-lab { font-size: 11.5px; }
  .nav-badge, .msg-dot, .unread-dot { font-size: 11px; }

  /* form fields: 16px stops the iPhone zooming in; 44px tall to tap */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select { min-height: 44px; }
  .search input { min-height: 44px; }
  input[type=checkbox], input[type=radio], .ctl-tick { width: 22px; height: 22px; }

  /* buttons and controls: 44px tall */
  .btn, .btn.small, summary.btn, a.btn { min-height: 44px; font-size: 14px; }
  .btn.small { padding-left: 14px; padding-right: 14px; }
  .period-nav .btn.small, .period-nav a.btn { min-width: 44px; }
  .toggle a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13.5px; padding: 0 14px; }
  .seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  .chips-pick label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .cal-key a { display: inline-flex; align-items: center; min-height: 40px; }
  .note-btn { width: 44px; height: 44px; }
  .add-biz { min-height: 44px; min-width: 44px; justify-content: center; }
  .row-switch { min-width: 44px; height: 36px; }
  .acts .act { min-height: 56px; font-size: 13px; }

  /* the top bar and menu */
  .theme-btn { width: 44px; height: 44px; }
  .topbar .msg-btn { display: none; }   /* Messages is already in the menu bar along the top */
  .who summary { min-height: 44px; }
  .nav a { min-height: 44px; min-width: 44px; justify-content: center; }
  .side-cta { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nudge-x { min-width: 44px; min-height: 44px; }

  /* text links that act as buttons: a 44px tap area without moving the layout */
  .panel-head a.small, .period-nav a.small, a.msg-back, .card-link, .r > a.small, a.web-link, .v > a, .g-label > a {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; margin-bottom: -12px; }
  a.msg-back { margin-top: -10px; }
  .acard-biz { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .filters label, label.small.muted:has(input) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

  /* the round (i) help buttons stay small to look at but are 44px to tap */
  button.tip { position: relative; }
  button.tip::after { content: ""; position: absolute; inset: -13px; }
  .tnum { position: relative; }
  .tnum::after { content: ""; position: absolute; inset: -12px -8px; }

  /* the rest found in the check */
  select.inline, .filters select, .picker summary { font-size: 16px; min-height: 44px; }
  .picker summary { display: flex; align-items: center; }
  .check input[type=checkbox], label.check input { width: 22px; min-width: 22px; height: 22px; }
  .ap-chip, .cb-chip { font-size: 12.5px; min-height: 36px; padding: 4px 12px 4px 10px; }
  summary.note-link { display: inline-flex !important; align-items: center; min-height: 44px; }
  .minis span, .n .by, .wf-lab, .hbars.compact .hb-tg, .hb-tg { font-size: 12.5px; }
  .acard-foot .grow { font-size: 13.5px; }
  .ev b { font-size: 13.5px; }
  /* longer words at the bigger size: let these wrap rather than run past the edge */
  .dist-pill { white-space: normal; max-width: 100%; }
  .cal-btns .btn { padding: 8px 10px; font-size: 13.5px; text-align: center; white-space: normal; line-height: 1.25; }
  select.inline { max-width: 100%; }
  /* call results on a phone: the row number has its own column, so it no longer sits over the business name */
  .res-table tr.res-row { grid-template-columns: 52px minmax(0, 1fr); }
  .res-table tr.res-row > td.show-col { width: auto; min-width: 0; padding: 12px 4px 0 10px; text-align: left; }
  .res-table .row-switch { min-width: 40px; height: 36px; }
}
@media (max-width: 400px) {   /* the smallest phones */
  .kpi .spark { display: none; }
  .kpi .delta { margin-top: 2px; }
  .topbar .mode-w { display: none; }
  /* figure boxes: the change sits under "This week" rather than squeezing it onto two lines */
  .kpi { grid-template-columns: minmax(0, 1fr); }
  .kpi .delta { text-align: left; }
  /* the Sales tabs stay on one line (sizes here are before the phone one-size-up below, so 12.5 shows as 13.5) */
  .page-head .view-switch { display: grid; grid-template-columns: auto auto auto; gap: 6px; justify-content: start; }
  .page-head .view-switch a { padding: 0 11px; font-size: 12.5px; justify-content: center; }
}
/* the calendar's controls on a phone: the dates on one line, the reps underneath, then Today, Week and Month,
   with a line before the visits start */
@media (max-width: 760px) {
  .cal-head { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .cal-head .period-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
  .cal-head .period-nav h2 { text-align: center; }
  .cal-tools { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; }
  .cal-tools .cal-key { gap: 4px 6px; margin: 0; }
  .cal-tools .toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }   /* Today, Week, Month, List: one line, equal */
  .cal-tools .toggle a { justify-content: center; }
  .cal-head .cal-tools a.cal-sync { display: none; }   /* the Sync section further down the page does this on a phone */
  .cal-agenda { padding-top: 2px; }
  .cal-agenda .ag-day:first-child { margin-top: 2px; }
  .cal-agenda .ev { margin-bottom: 8px; }
}

/* shorter labels on a phone: "Appointments booked" reads "Apps booked" */
.lbl-s { display: none; }
@media (max-width: 760px) { .lbl-l { display: none; } .lbl-s { display: inline; } }

/* a top-bar title that only repeats the page heading or back link: hidden on a computer (its space is kept so nothing moves);
   on a phone the top bar keeps it, beside the light/dark and name buttons, and the repeat below steps aside */
.topbar .ptitle.same { visibility: hidden; }
@media (max-width: 760px) {
  .topbar .ptitle.same { visibility: visible; }
  main h1.dup-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still read out by screen readers */
  main .crumb.dup-c { display: none; }
  .top-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blue); font-weight: 600; }
  .top-back::before { content: ""; width: 9px; height: 9px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); margin: 0 2px 0 4px; }
  .top-back:hover { text-decoration: none; }
  /* the top bar is always one row: title on the left, light/dark, Live and your initials on the right; a long title shortens rather than pushing your initials down */
  .topbar { column-gap: 10px; }
  .topbar .ptitle { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .theme-btn, .topbar .mode, .topbar .who { flex: none; }
  .topbar .search { flex-basis: 100%; }
  .top-back { max-width: 100%; font-size: 16px; }
  .top-back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the page area takes the spare height on a short page, never the menu bar */
  .shell { grid-template-rows: auto 1fr; align-content: start; }
}

/* Call-backs pop-up: a group per day, a time pill, then the business, who it's for, and the note */
.cb-dlg { width: min(720px, calc(100vw - 32px)); }
.cb-dlg .dlg-body { padding: 24px 26px 18px; }
/* fixed size: the header and person filter stay put, the list scrolls inside */
dialog.cb-dlg { height: min(780px, calc(100dvh - 48px)); max-height: none; overflow: hidden; }
.cb-dlg .dlg-body { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-bottom: 0; }
.cbd-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; margin: 12px -26px 0; padding: 0 26px 18px; border-top: 1px solid transparent; transition: border-color .15s; }
.cbd-scroll.moved { border-top-color: var(--line); }
.cbd-scroll > .cbd-day:first-child { margin-top: 6px; }
.cbd-empty { margin: 48px 0; text-align: center; color: var(--ink-3, var(--ink-2)); font-size: 14px; }
.cbd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cbd-head h2 { margin: 0; }
.cbd-late { color: var(--red); font-weight: 600; }
.cbd-x { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; flex: none; }
.cbd-x:hover { color: var(--ink); }
.cbd-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cbd-who button { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: 500 12.5px var(--font); cursor: pointer; }
.cbd-who button.on { background: var(--ctl, var(--ink)); border-color: transparent; color: var(--ctl-ink, #fff); }
.cbd-day { margin-top: 18px; }
.cbd-day[hidden] { display: none; }
.cbd-day h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.cbd-day h3 .n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; display: inline-grid; place-items: center; }
.cbd-day.late h3 { color: var(--red); } .cbd-day.late h3 .n { background: var(--red-soft); color: var(--red); }
.cbd-day.today h3 { color: var(--blue); } .cbd-day.today h3 .n { background: var(--blue-soft); color: var(--blue); }
.cbd-list { list-style: none; margin: 0; padding: 0; }
.cbd-list li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); transition: opacity .25s; }
.cbd-list li:first-child { border-top: 0; }
.cbd-list li[hidden] { display: none; } .cbd-list li.gone { opacity: 0; }
.cbd-time { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cbd-time span { display: inline-block; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cbd-time .d { background: none; padding: 0 2px; color: var(--ink-3); font-weight: 500; font-size: 11.5px; }
.cbd-day.late .cbd-time span:not(.d) { background: var(--red-soft); color: var(--red); }
.cbd-day.today .cbd-time span { background: var(--blue-soft); color: var(--blue); }
.cbd-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cbd-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.cbd-name:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.cbd-tel { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.cbd-tel svg { width: 13px; height: 13px; stroke: currentColor; }
.cbd-tel:hover { color: var(--blue); }
.cbd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.cbd-person { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.av.xs { width: 18px; height: 18px; font-size: 10px; }
.cbd-note { margin-top: 7px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 13px; line-height: 1.45; cursor: pointer; }
.cbd-note > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cbd-note.open > span { -webkit-line-clamp: unset; display: block; }
.cbd-note.short { cursor: default; }
.cbd-done { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.cbd-done svg { width: 14px; height: 14px; stroke: currentColor; }
.cbd-done:hover { border-color: transparent; background: var(--green-soft, #E3F5EA); color: var(--green); }
.cbd-done:disabled { opacity: .5; }
@media (max-width: 600px) {
  .cb-dlg .dlg-body { padding: 18px 16px 0; }
  .cbd-scroll { margin: 10px -16px 0; padding: 0 16px 14px; }
  dialog.cb-dlg { height: calc(100dvh - 32px); }
  .cbd-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .cbd-time { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* Calendar: Today always works; when today is already showing it lights up today instead of looking switched off */
@keyframes today-flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--blue); background-color: color-mix(in oklab, var(--blue-soft) 80%, transparent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
[data-today].flash { animation: today-flash 1.4s ease-out; border-radius: 10px; }

/* Calendar, List view: the week ahead, a day to a row (the same rows on a phone) */
.cal-rows { padding: 2px 20px 18px; }
.cr-day { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 12px 8px; border-top: 1px solid var(--line); }
.cr-day:first-child { border-top: 0; }
.cr-day.today { background: color-mix(in oklab, var(--blue-soft) 40%, transparent); border-radius: 12px; }
.cr-date { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: start; }
.cr-date b { grid-row: 1 / 3; font-size: 26px; font-weight: 600; line-height: 1; }
.cr-date span { font-size: 13px; font-weight: 600; color: var(--ink); }
.cr-date small { font-size: 12px; color: var(--ink-3); }
.cr-day.today .cr-date span { color: var(--blue); }
.cr-items { display: grid; gap: 6px; align-content: start; }
.cr-ev { position: static; display: grid; grid-template-columns: 88px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 14px; font-size: 13.5px; }
.cr-ev .cr-time { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cr-ev .cr-time::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--shine), var(--c, var(--fam-blue)); flex: none; }
.cr-ev.tk-ev .cr-time::before { display: none; }
.cr-ev .t { font-size: 12.5px; }
.cr-ev .t::before { display: none; }
.cr-none { margin: 6px 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) {
  .cal-rows { padding: 0 12px 14px; }
  .cr-day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 6px; }
  .cr-date { grid-template-columns: auto auto 1fr; grid-template-rows: auto; }
  .cr-date b { grid-row: auto; font-size: 18px; }
  .cr-ev { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
  .cr-ev .t { grid-column: 2; white-space: normal; }
}

/* Sites calendar: a colour per kind of next step, and overdue ones outlined */
.cal-key .kdot { width: 10px; height: 10px; border-radius: 50%; background: var(--shine), var(--c); margin-left: 6px; }
.ev.late:not(.tk-ev) { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--red) 55%, var(--surface)); }

/* Messages, To: a typing box with name tags; matches drop down underneath */
.to-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 6px 8px; margin-top: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; cursor: text; }
.to-box:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
.to-chips { display: contents; }
.to-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 12px; min-height: 34px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 500; font-size: 13.5px; }
.to-chip button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.to-chip button:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.to-box input[type=text] { flex: 1 1 120px; min-width: 120px; width: auto; min-height: 36px; padding: 4px 6px; border: 0; background: none; box-shadow: none; }
.to-box input[type=text]:focus { box-shadow: none; background: none; }
.to-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); max-height: 300px; overflow: auto; }
.to-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.to-list li b { font-weight: 500; }
.to-list li span { color: var(--ink-3); font-size: 12.5px; }
.to-list li.on, .to-list li:hover { background: var(--surface-2); }
.to-list li.none { color: var(--ink-3); cursor: default; }
.to-list li.none:hover { background: none; }
@media (max-width: 760px) { .to-box input[type=text] { min-height: 36px; } }

/* ---------- phone menu: a floating bar along the bottom, where the thumb is (computers keep the side menu) ----------
   sizes here are written one point under what shows (the phone text step adds one) */
.nav-more, .more-sheet { display: none; }
@media (max-width: 760px) {
  .sidebar { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; height: auto; display: block;
    padding: 6px; border-radius: 30px; overflow: visible; background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 10px 30px rgba(28, 32, 51, .16), 0 0 0 1px color-mix(in srgb, var(--line-2) 70%, transparent); }
  .sidebar .brand, .sidebar .side-cta, .sidebar .nav > a.nav-sub { display: none; }
  .sidebar .nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 0; }
  .sidebar .nav > a, .sidebar .nav > .nav-more { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 58px; padding: 7px 2px 6px; border: 0; border-radius: 24px; background: none; color: var(--ink-2); font: 500 11px/1.15 var(--font); cursor: pointer; }
  .sidebar .nav > a > span:not(.lbl-l):not(.nav-badge), .sidebar .nav > .nav-more > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .nav > a > .lbl-l { display: none; }
  .sidebar .nav > a svg, .sidebar .nav > .nav-more svg { width: 23px; height: 23px; flex: none; }
  .sidebar .nav > a.on, .sidebar .nav > .nav-more.on, .sidebar .nav > .nav-more.open { background: var(--surface-2); color: var(--ink); font-weight: 600; }
  .sidebar .nav > a[data-more] { display: none; }
  .sidebar .nav > .nav-more { display: flex; }
  .sidebar .nav > a[data-msg] { order: 9; }   /* Messages last in the phone bar, before More */
  .sidebar .nav > .nav-more { order: 10; }
  .sidebar .nav-badge { position: absolute; top: 3px; left: calc(50% + 5px); right: auto; }
  .more-sheet:not([hidden]) { display: grid; position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 230px; padding: 8px; gap: 2px; border-radius: 22px;
    background: var(--surface); box-shadow: 0 12px 34px rgba(28, 32, 51, .2), 0 0 0 1px var(--line); }
  .more-sheet .more-item { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--ink); font-weight: 500; }
  .more-sheet .more-item:hover { background: var(--surface-2); text-decoration: none; }
  .more-sheet .more-item.on { background: var(--surface-2); }
  .more-sheet .more-item.on::before { display: none; }
  .more-sheet .more-item svg { width: 22px; height: 22px; color: var(--ink-2); stroke: currentColor; flex: none; }
  .more-sheet .more-item .lbl-s { display: none; }
  .more-sheet .more-item .lbl-l, .more-sheet .more-item span { display: inline; }
  /* room at the bottom of every page for the bar, and bars that stick to the bottom sit above it */
  main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .savebar, .cat-save { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(18px, env(safe-area-inset-top)); }
}

/* the back and forward arrows beside a date (Sales board, Calendar): quiet chevrons, so the date is what you read */
.period-nav .btn.quiet { background: none; box-shadow: none; color: var(--ink-2); }
.period-nav .btn.quiet:hover { background: var(--surface-2); color: var(--ink); }
.period-nav .btn.quiet svg { width: 16px; height: 16px; }
/* the Sales board's dates on a phone match the Calendar: date centred between the arrows, then the periods as equal pills */
@media (max-width: 760px) {
  .period-bar { flex-direction: column; align-items: stretch; gap: 4px; margin: -14px 0 16px; }   /* the arrow row is 44px tall to tap: these gaps make the visible spacing even */
  .period-bar .period-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
  .period-bar .period-nav h2 { text-align: center; }
  .period-bar .period-nav > a.small:not(.btn) { grid-column: 1 / -1; justify-self: center; margin: -8px 0 -10px; }
  .period-bar .toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .period-bar .toggle a { justify-content: center; padding: 0 6px; }
}

/* ---------- Admin, Logins: one tidy line per person, Manage opens a small panel underneath ---------- */
.login-list { padding: 2px 16px 8px; }
.login { border-top: 1px solid var(--line); }
.login:first-child { border-top: 0; }
.login > summary { list-style: none; display: grid; grid-template-columns: 40px 220px 170px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 14px; cursor: pointer; }
.login > summary::-webkit-details-marker { display: none; }
.login > summary:hover { background: var(--surface-2); }
.login[open] > summary { background: var(--surface-2); border-radius: 14px 14px 0 0; }
.login > summary:hover .login-av, .login[open] .login-av, .login > summary:hover .role-pill, .login[open] .role-pill { background: var(--surface); }
.login-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.login-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.login-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-who .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-pill { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink-2); background: var(--surface-2); }
.login-what { color: var(--ink-2); font-size: 13px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.warn-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 500; white-space: nowrap; }
.warn-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.login-manage { justify-self: end; }
.login:not([open]) > summary .when-open, .add-login:not([open]) > summary .when-open { display: none; }
.login:not([open]) > summary .when-shut, .add-login:not([open]) > summary .when-shut { display: inline; }
.login[open] > summary .when-shut, .add-login[open] > summary .when-shut { display: none; }
.login[open] > summary .when-open, .add-login[open] > summary .when-open { display: inline; }
.login-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; padding: 4px 12px 14px 66px; background: var(--surface-2); border-radius: 0 0 14px 14px; margin-bottom: 6px; }
.lp-box { background: var(--surface); border-radius: 12px; padding: 12px 14px; margin: 0; }
.lp-k { display: block; font-size: 12px; color: var(--ink-3); margin: 0 0 6px; }
.lp-row { display: flex; gap: 8px; align-items: center; }
.lp-row input, .lp-row select { flex: 1; min-width: 0; }
.lp-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.lp-foot form { margin: 0; }
.add-login { padding: 4px 28px 22px; border-top: 1px solid var(--line); }
.add-login > summary { list-style: none; margin-top: 16px; }
.add-login > summary::-webkit-details-marker { display: none; }
.add-login[open] > summary { background: var(--ctl-soft); color: var(--ctl-soft-ink); box-shadow: none; }
.add-login form { margin-top: 14px; padding: 6px 20px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); max-width: 820px; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.add-foot { margin-top: 16px; }
@media (max-width: 760px) {
  .login-list { padding: 2px 6px 8px; }
  .login > summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 8px; }
  .login > summary .role-pill { grid-column: 2; grid-row: 2; }
  .login > summary .login-what { grid-column: 2 / -1; grid-row: 3; }
  .login > summary .login-manage { grid-column: 3; grid-row: 1; }
  .login-panel { padding: 4px 8px 12px; grid-template-columns: minmax(0, 1fr); }
  .add-login { padding: 4px 16px 18px; }
  .add-grid { grid-template-columns: minmax(0, 1fr); }
}

/* pull down to refresh (the tool opened from a phone's Home Screen) */
.ptr { position: fixed; top: 0; left: 50%; z-index: 80; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; opacity: 0;
  transform: translate(-50%, -50px); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow); pointer-events: none; margin-top: env(safe-area-inset-top); }
.ptr svg { width: 20px; height: 20px; }
.ptr.ready { color: var(--blue); }
.ptr.spin svg { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.spin svg { animation: none; } }

/* the Dashboard on a phone */
.cb-badges { display: contents; }
@media (max-width: 760px) {
  /* call-backs: title and counts on one line, the arrow at the end; the counts only wrap if they truly cannot fit */
  .cb-bar { display: flex; align-items: center; gap: 8px; text-align: left; padding: 12px 14px; }
  .cb-bar .cb-title { flex: none; margin-right: 2px; }
  .cb-bar .cb-team { display: none; }
  .cb-bar .cb-badges { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
  .cb-bar .cb-badges:empty { display: none; }
  .cb-bar .cb-badge { padding: 3px 9px; }
  .cb-bar .cb-go { flex: none; margin-left: auto; }
}
@media (max-width: 380px) {
  .cb-bar { gap: 6px; padding: 12px 10px; }
  .cb-bar .cb-badges { gap: 4px; }
  .cb-bar .cb-title { margin-right: 0; }
  .cb-bar .cb-badge { padding: 3px 7px; gap: 4px; }
  /* the four number tiles: keep the little i inside the tile on small phones */
  .kpis { gap: 10px; } .kpi { padding-left: 12px; padding-right: 12px; } .kpi .t { gap: 6px; }
}
@media (max-width: 760px) {
  #printed { scroll-margin-top: 12px; }
  /* any bar shows its date and number when tapped */
  .bars .b { cursor: pointer; }
  .bars.has-tap .b.is-peak .tip:not(.tap) { display: none; }
  .bars .b.tapped .fill { background: color-mix(in oklab, var(--fam-blue) 45%, var(--surface)); }
  .bars-axis:has(span:nth-child(9)) span:nth-child(even):not(.on) { visibility: hidden; }   /* many bars: every other date, so they do not run together */
  /* found to ready: slides sideways only, and the labels have room */
  .wf { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x proximity; }
  .wf-col { scroll-snap-align: start; }
  .wf-lab { height: auto; min-height: 46px; }
  .wf-note { margin-top: 0; }
}
/* the tool opened from a phone's Home Screen: a strip behind the clock and battery, so pages do not scroll under them */
@media (max-width: 760px) and (display-mode: standalone) {
  body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--canvas); z-index: 75; }
}

/* a garden centre's sheets: on a phone the status on its own line, then Print, Mark as worked and Results on one line */
.sheet-acts { display: contents; }
@media (max-width: 760px) {
  .sheet-row { row-gap: 10px; }
  .sheet-row > .pill { margin-left: 60px; }
  .sheet-row .sheet-acts { display: flex; flex-basis: 100%; gap: 8px; padding-left: 60px; }
  .sheet-row .sheet-acts > a, .sheet-row .sheet-acts > form { flex: 1 1 auto; }
  .sheet-row .sheet-acts > form { display: flex !important; }
  .sheet-row .sheet-acts .btn { justify-content: center; }
  .sheet-row .sheet-acts .btn { width: 100%; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}
@media (max-width: 400px) { .sheet-row > .pill, .sheet-row .sheet-acts { margin-left: 0; padding-left: 0; } }

/* the Planner timeline on a phone: each centre's name sits on its own line above its bar and stays in view while the chart slides sideways */
@media (max-width: 760px) {
  .gantt { overscroll-behavior-x: contain; }
  .g-inner { min-width: 760px; }
  .g-head { grid-template-columns: minmax(0, 1fr); }
  .g-head > div:first-child { display: none; }
  .g-row { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .g-row:hover { background: none; }
  .g-label { justify-self: start; max-width: calc(100vw - 64px); padding: 10px 12px 0; background: none; z-index: 3; }
  .g-label > a, .g-label .locked-name { font-size: 13px; font-weight: 600; margin-top: -14px; margin-bottom: -14px; }
  .g-track { height: 48px; }
  .bar { top: 6px; }
}

/* Team on a phone: the four periods on one line, equal widths, like the Sales board */
.period-note { display: none; }
@media (max-width: 760px) {
  .page-head .team-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; flex-wrap: nowrap; }
  .page-head .team-periods a { justify-content: center; padding: 0 4px; white-space: nowrap; }
  .period-note { display: block; width: 100%; margin: -6px 0 0; }
}

/* Sheets on a phone: each sheet is a card, district and count on top, then the centre, its call-by date and the buttons on one line */
@media (max-width: 760px) {
  .panel > table.data.sheet-tbl { display: block; overflow: visible; width: auto; margin: 0 16px 8px; }
  table.data.sheet-tbl thead { display: none; }
  table.data.sheet-tbl tbody { display: block; }
  table.data.sheet-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dist n" "centre centre" "cb cb" "acts acts"; column-gap: 12px; row-gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
  table.data.sheet-tbl tbody tr:first-child { border-top: 0; }
  table.data.sheet-tbl td { display: block; padding: 0; border: 0; background: none !important; text-align: left; }
  table.data.sheet-tbl td.hide-sm { display: none; }
  table.data.sheet-tbl td.district { grid-area: dist; display: flex; align-items: center; gap: 8px; font-weight: 700; }
  table.data.sheet-tbl .part-tag { white-space: nowrap; }
  table.data.sheet-tbl td.st-n { grid-area: n; align-self: center; color: var(--ink-2); font-size: 13px; }
  table.data.sheet-tbl td.st-centre { grid-area: centre; }
  table.data.sheet-tbl td.st-centre .small { display: inline; margin-left: 4px; }
  table.data.sheet-tbl td.st-cb { grid-area: cb; }
  table.data.sheet-tbl td.st-acts { grid-area: acts; display: flex; gap: 8px; margin-top: 4px; white-space: normal !important; }
  table.data.sheet-tbl td.st-acts:empty { display: none; }
  table.data.sheet-tbl td.st-acts > a, table.data.sheet-tbl td.st-acts > form { flex: 1 1 auto; }
  table.data.sheet-tbl td.st-acts > form { display: flex !important; }
  table.data.sheet-tbl td.st-acts > a { margin: 0; }
  table.data.sheet-tbl td.st-acts .btn { justify-content: center; }
  table.data.sheet-tbl td.st-acts .btn { width: 100%; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}

/* Allocations on a phone: the hand-over tick boxes wrap their wording instead of pushing the page sideways */
@media (max-width: 760px) { .handover .check { white-space: normal; align-items: flex-start; padding-bottom: 4px; } }

/* Company row on an appointment: link to the register entry */
.facts-list .v a .ext { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; stroke: currentColor; opacity: .7; }
.co-check { margin-top: 3px; font-size: 12px; }

/* other names a merged business was listed under */
.res-row .aka { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* Dashboard: Today first (telesales), team today and this week first (managers), data underneath */
.dash .wk { order: -3; }
.dash-h { margin: 8px 0 -8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.dash .kpis.full { margin-bottom: 0; }
.dash-me { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.today-sum { margin: -6px 0 18px; font-size: 14px; color: var(--ink-2); }
.today-sum b { color: var(--ink); font-weight: 600; }
.tdy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; margin-bottom: 24px; align-items: stretch; }
.tdy .full { grid-column: 1 / -1; }
.tdy .panel { padding: 22px 24px; }
.tdy .panel-head { padding: 0 0 10px; }
.tdy .k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.td-cont { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; background: linear-gradient(160deg, var(--blue-soft), var(--surface) 70%); }
.td-cont:hover { text-decoration: none; }
.td-big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.td-cont-n { margin-top: 10px; font-size: 14px; }
.td-cont-n b { font-size: 18px; }
.td-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.td-cont .td-go { margin-top: 16px; }
.td-go svg { width: 16px; height: 16px; stroke: currentColor; }
.td-list { list-style: none; margin: 0; padding: 0; }
.td-list li a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.td-list li:first-child a { border-top: 0; }
.td-list li a:hover .td-n { text-decoration: underline; }
.td-t { flex: none; padding: 2px 8px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; }
.td-t.late { background: var(--red-soft); color: var(--red); }
.td-t.now { background: var(--green-soft, #e6f4ea); color: var(--green); }
.td-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-w { flex: none; font-size: 12px; color: var(--ink-3); }
.td-w.late { color: var(--red); }
.td-more { margin: 6px 0 0; }
.td-o { flex: none; min-width: 84px; text-align: center; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.td-o.won { background: var(--green-soft, #e6f4ea); color: var(--green); }
.td-o.follow { background: var(--amber-soft); color: var(--amber); }
.td-o.noshow { background: var(--red-soft); color: var(--red); }
.td-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.td-figs > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.td-figs b { font-size: 24px; font-weight: 600; line-height: 1.1; }
.td-figs .ap b { color: var(--green); }
.td-figs span { font-size: 12px; color: var(--ink-2); }
.td-figs em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.td-note { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: var(--surface-2); color: var(--ink-2); }
.td-note.up { background: var(--green-soft, #e6f4ea); color: var(--green); }
.td-note.level { background: var(--blue-soft); color: var(--blue); }
.td-best, .td-team { margin: 8px 0 0; }
.td-vis-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.td-vis-cols h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 1100px) { .tdy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tdy .td-wk { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .tdy, .dash-me, .td-vis-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tdy .panel { padding: 18px; }
  .td-big { font-size: 26px; }
  .td-vis-cols { gap: 18px; }
}
.today-sum .late { color: var(--red); font-weight: 600; }

/* visit length beside the visit time, and the "show tight times" link in the warning */
.len-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.len-row .f { margin: 0; }
.len-row select { flex: 0 1 130px; width: auto; }
.cb-warn .linkish { border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.day-tight { color: var(--amber); font-weight: 500; }
.dir-link { white-space: nowrap; }

/* a rep's day on My Apps: visits with the drive between them */
.route { list-style: none; margin: 0; padding: 0; }
.route .stop > a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--ink); text-decoration: none; min-width: 0; }
.stop-t { flex: none; min-width: 64px; padding: 3px 8px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 600; text-align: center; }
.stop-n { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-e { flex: none; font-size: 12px; color: var(--ink-3); }
.route .leg { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-left: 32px; padding: 4px 0 4px 14px; border-left: 2px dashed var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.route .leg svg { width: 14px; height: 14px; stroke: currentColor; vertical-align: -2px; margin-right: 4px; }
.route .leg.tight { color: var(--amber); border-left-color: var(--amber); }
.route .leg a { flex: none; font-weight: 600; }
.vt-def { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vt-def select { min-width: 140px; }
.vt-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vt-rep { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.vt-rep:hover { text-decoration: none; background: var(--blue-soft); }
.route-start { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.route-start .btn svg { width: 15px; height: 15px; stroke: currentColor; margin-right: 6px; }
.day-route > .route { padding: 0 28px 4px; }
.day-route > .route-start { margin: 6px 28px 0; padding: 12px 0 20px; }
@media (max-width: 760px) { .day-route > .route { padding: 0 20px 4px; } .day-route > .route-start { margin: 6px 20px 0; padding-bottom: 16px; } }

/* Undo in the save bar */
.undo-btn { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: auto; margin-right: 8px; padding: 0; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); border-radius: 50%; cursor: pointer; }
.undo-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.undo-btn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.undo-btn[hidden] { display: none; }
.cbi-done { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: -4px; border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--surface); color: var(--ink-3); font: 600 13px var(--font); cursor: pointer; }
.cbi-done:hover { color: var(--green); border-color: var(--green); }
.cbp-g { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; }
.cbp-g h4, .cbp-g .cbp-more { grid-column: 1 / -1; }
.cbar-late .cbi-done { margin-left: 0; }
@media (max-width: 760px) { .cbar-line .cbi-done { display: none; } .cbi-done { width: 34px; height: 34px; } }
.cb-warn[data-tone="ok"] { background: var(--green-soft, #e6f4ea); color: var(--green); }
.cb-warn[data-tone=""] { background: var(--surface-2); color: var(--ink-2); }
.route .stop.is-next { margin: 4px -12px; padding: 4px 12px 12px; border-radius: 14px; background: var(--blue-soft); }
.route .stop.is-next .stop-t { background: var(--blue); color: #fff; }
.route .stop.is-next .stop-e { color: var(--blue); font-weight: 600; }
.stop-acts { margin-top: 4px; }

@media (max-width: 760px) { .undo-btn { width: 44px; height: 44px; } }

/* Extra from Google tab on a sheet (switchable test) */
.g-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.g-tabs [role=tab] { border: 0; background: var(--surface); box-shadow: var(--shadow-s); border-radius: 999px; padding: 9px 16px; font: 600 13.5px var(--font); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.g-tabs [role=tab][aria-selected=true] { background: var(--ink); color: #fff; }
.g-tabs [role=tab] b { font-weight: 600; opacity: .7; }
.g-panel { padding: 18px 28px; }
.g-intro { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); margin: 0 0 12px; }
.g-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-s); }
.g-ico svg { width: 18px; height: 18px; stroke: var(--ink-2); }
.g-table { width: 100%; }
.g-table td { vertical-align: middle; }
.g-table th.phone-col { width: 170px; }
.g-table th.result-col { width: 500px; }
.g-table .phone-col { white-space: nowrap; }
.g-table .g-add { display: block; }
.g-tel { font-weight: 600; color: var(--ink); text-decoration: none; }
.g-flag { font-size: 12px; font-weight: 600; color: var(--red); }
.g-add { margin-top: 6px; border: 0; background: none; padding: 2px 0; font: 600 12.5px var(--font); color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.g-wait { padding: 8px 2px; }
.g-err { color: var(--red); margin: 0 0 10px; }
.g-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.g-set .g-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; margin: 12px 0; }
.g-set .g-fields input, .g-set .g-fields select { width: 100%; }
.g-run { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.g-run select { max-width: 220px; }
.g-checks td, .g-checks th { white-space: nowrap; }
@media (max-width: 760px) {
  .g-panel { padding: 14px; }
  .g-table thead { display: none; }
  .g-table tr.gx-row { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); padding: 6px 0; }
  .g-table tr.gx-row > td { border-top: 0; padding-top: 4px; padding-bottom: 4px; }
  .g-table td.res-cell { white-space: normal; }
  .g-table .seg { flex-wrap: wrap; }
}

/* Distance from the garden centre on a sheet row */
.biz-name .mi-tag { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--ink-3); white-space: nowrap; vertical-align: middle; }

/* Google pulls on a sheet */
.g-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.g-find select { max-width: 340px; min-width: 220px; }
.g-msg { margin: 0 0 10px; }
.gx-add { margin-left: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.gx-add svg { width: 16px; height: 16px; stroke: var(--ink-2); }
.gx-add:hover { background: var(--line); }
.gx-row.gx-done { opacity: .45; transition: opacity .3s; }
.gx-row.gx-gone { display: none; }
.gx-row.gx-moved .tier.add { margin-top: 4px; }
.gx-note { color: var(--red); margin-top: 4px; }
.g-team { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.g-team input { width: 90px; }
.g-person { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.g-person input[type=number] { width: 70px; padding: 4px 8px; }

/* ---------- Sites: the site buyer's garden centres (app/sites.py) ---------- */
:root { --s-new: #A4A8B8; --s-talks: var(--fam-blue); --s-working: var(--fam-blue); --s-before: var(--fam-purple); --s-retry: var(--fam-yellow); --s-notint: var(--fam-red); --s-host: var(--fam-green); --s-dna: #C9CCD6; }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--shine), var(--sd, var(--s-new)); flex: none; margin-right: 6px; vertical-align: 1px; }
.s-new { --sd: var(--s-new); } .s-talks { --sd: var(--s-talks); } .s-working { --sd: var(--s-working); } .s-before { --sd: var(--s-before); } .s-retry { --sd: var(--s-retry); }
.s-notint { --sd: var(--s-notint); } .s-host { --sd: var(--s-host); } .s-dna { --sd: var(--s-dna); }
.stile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: color-mix(in oklab, var(--sd) 16%, var(--surface)); color: color-mix(in oklab, var(--sd) 70%, var(--ink)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sd) 35%, transparent); }
.stile.s-new { background: var(--surface-2); color: var(--ink-2); box-shadow: none; }
.site-filters { flex-direction: column; align-items: stretch; gap: 12px; }
.site-filters .st-toggle a { display: inline-flex; align-items: center; }
.flt-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flt-q { max-width: 260px; }
.flt-btn { font: 13px var(--font); color: var(--ink); background: var(--surface); border: 0; box-shadow: var(--shadow-s); border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.flt-btn.set, .flt-near.set > .flt-btn { box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-s); color: var(--blue); font-weight: 500; }
.flt-near { position: relative; }
.flt-near summary::-webkit-details-marker { display: none; }
.near-box { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.near-box input { width: 150px; } .near-box select { min-width: 0 !important; width: auto; }
.view-seg { display: inline-flex; }
.view-seg a { padding: 6px 14px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.view-seg a:hover { text-decoration: none; color: var(--ink); }
.view-seg a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-s); }
.site-list .row { color: inherit; }
.site-list .row:hover { text-decoration: none; background: var(--surface-2); }
.site-row .title { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.site-row .grow { min-width: 0; }
.site-when { color: var(--ink-3); }
.site-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.site-map-panel { overflow: hidden; }
#siteMap { height: min(70vh, 640px); min-height: 360px; background: var(--surface-2); }
.map-key { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 18px; font-size: 12.5px; color: var(--ink-2); }
.area-dlg .dlg-body { max-height: min(86vh, 760px); display: flex; flex-direction: column; }
.area-q { max-width: none; margin: 14px 0 8px; }
.area-groups { overflow: auto; flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; }
.area-g { border: 0; padding: 0; margin: 12px 0 0; }
.area-g legend { font-weight: 600; font-size: 13.5px; padding: 0; margin-bottom: 4px; }
.area-g legend label, .area-cs label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.area-g input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }
.area-cs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
.area-cs label { padding: 5px 0; font-size: 13.5px; }
.area-cs label[hidden], .area-g[hidden] { display: none; }
.area-acts { flex-wrap: wrap; }
.area-save { margin: 10px 0 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
dialog.site-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
dialog.site-dlg form { padding: 0; }
.site-card .sc-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.dlg-x { flex: none; width: 40px; height: 40px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.dlg-x svg { width: 20px; height: 20px; stroke: currentColor; }
.dlg-x:hover { background: var(--surface-2); }
.card-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 18px; }
.card-status { flex-basis: 100%; }
.card-status[open] > summary { margin-bottom: 4px; }
.card-acts > .card-status { flex-basis: auto; }
.card-acts > .card-status[open] { flex-basis: 100%; }
.card-log { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.log-form .two, .next-form .two { gap: 0 12px; }
.log-fold > summary { justify-content: center; }
.next-card { display: flex; gap: 14px; align-items: flex-start; }
.next-card .nc-t { font-weight: 500; }
.next-card .nc-w { font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.next-card.late .nc-t { color: var(--red); }
.dtile.late { background: var(--red-soft); color: var(--red); }
.dtile.late span { color: color-mix(in srgb, var(--red) 75%, transparent); }
.next-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; }
.next-acts form { margin: 0; }
.next-acts details[open] { flex-basis: 100%; }
.next-acts .btn svg { width: 15px; height: 15px; stroke: currentColor; }
.contact-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.contact-row:first-child { border-top: 0; padding-top: 0; }
.contact-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cr-av { width: 38px; height: 38px; border-radius: 50%; background: var(--ctl-soft); color: var(--ctl-soft-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.cr-n { font-weight: 500; }
.cr-edit[open] { flex-basis: 100%; order: 3; }
.cr-edit[open] > summary { display: none !important; }
.cr-form label.f input { margin-top: 6px; }
.tps-tag { display: inline-flex; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; vertical-align: 1px; }
.tps-tag.ok { background: var(--surface-2); color: var(--ink-2); }
.tps-tag.warn { background: var(--amber-soft); color: var(--amber); }
.site-tl { padding: 18px 0 0; }
.site-tl .tl-note { font-size: 13.5px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.site-tl .tl-note.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); }
.panel > .site-tl { padding: 4px 28px 24px; }
.tl-dot.k-call { background: var(--fam-blue); box-shadow: none; } .tl-dot.k-email { background: var(--fam-purple); box-shadow: none; }
.tl-dot.k-visit, .tl-dot.k-meeting { background: var(--fam-green); box-shadow: none; } .tl-dot.k-pack, .tl-dot.k-letter { background: var(--fam-yellow); box-shadow: none; }
.tl-del { display: inline; margin: 0 0 0 6px; }
.tl-del .linkish { color: var(--ink-3); font-size: 12px; }
.list-h { padding: 8px 28px 0; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.list-h.late { color: var(--red); }
.st-bars { display: grid; gap: 6px; }
.st-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 12px; align-items: center; color: inherit; padding: 4px 0; font-size: 13.5px; }
.st-bar:hover { text-decoration: none; }
.st-bar:hover .st-lab { color: var(--blue); }
.st-bar b { text-align: right; font-weight: 600; }
.st-lab { display: inline-flex; align-items: center; white-space: nowrap; }
.st-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.st-fill { display: block; height: 100%; border-radius: 4px; background: var(--sd); min-width: 0; }
.site-st { display: none; }
.site-kpis .kpi:nth-child(1) { --k: var(--s-host); } .site-kpis .kpi:nth-child(2) { --k: var(--s-talks); }
.site-kpis .kpi:nth-child(3) { --k: var(--fam-purple); } .site-kpis .kpi:nth-child(4) { --k: var(--s-new); }
@media (max-width: 760px) {
  .flt-row { gap: 8px; }
  .flt-q { max-width: none; flex-basis: 100%; }
  .flt-row select, .flt-btn { min-height: 44px; }
  .flt-row select { flex: 1 1 calc(50% - 4px); min-width: 0 !important; }
  .flt-row select.flt-type { flex-basis: 100%; }
  .site-row > .pill { display: none; }
  .site-st { display: flex; align-items: center; }
  .site-grid .sp-info { order: 1; } .site-grid .sp-log { order: 2; } .site-grid .sp-trail { order: 3; } .site-grid .sp-contacts { order: 4; }
  .site-grid .sp-notes { order: 5; } .site-grid .sp-biz { order: 6; } .site-grid .sp-status { order: 7; } .site-grid .sp-host { order: 8; }
  .site-grid .sp-branches { order: 9; } .site-grid .sp-changes { order: 10; }
  .site-near { display: none; }   /* the Area line in Centre Info says the same */
  .flt-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .flt-near { flex: 1 1 calc(50% - 4px); }
  .flt-near > .flt-btn { width: 100%; }
  .flt-near[open] { flex-basis: 100%; }
  .flt-row .grow { display: none; }
  .view-seg { flex: 1 1 100%; }
  .view-seg a { flex: 1; text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .near-box input { flex: 1; width: auto; }
  .site-filters .st-toggle { gap: 6px; }
  #siteMap { height: 62vh; }
  .area-cs { grid-template-columns: minmax(0, 1fr); }
  .area-cs label, .area-g legend label { min-height: 40px; }
  .area-g input { width: 22px; height: 22px; }
  .area-acts .btn { flex: 1 1 auto; }
  .area-acts .spacer { flex-basis: 100%; margin-right: 0; }
  dialog.site-dlg .dlg-body { padding: 20px 16px 18px; }
  .dlg-x { width: 44px; height: 44px; }
  .card-acts > .btn { flex: 1 1 auto; }
  .list-h { padding: 8px 16px 0; }
  .panel > .site-tl { padding: 4px 16px 20px; }
  .st-bar { grid-template-columns: 128px minmax(0, 1fr) 44px; min-height: 40px; }
  .linkish { min-height: 44px; }
  .tl-del .linkish { min-height: 0; padding: 10px 4px; margin: -10px -4px; }
}


.pill.sbefore { color: color-mix(in oklab, var(--fam-purple) 80%, var(--ink)); background: color-mix(in oklab, var(--fam-purple) 12%, var(--surface)); --dot: var(--fam-purple); }
.stile.big { width: 50px; height: 50px; font-size: 13px; }
.st-tip { display: inline-flex; align-items: center; padding: 0 4px; }
.st-pick { display: grid; gap: 6px; margin-top: 4px; }
.st-pick input { position: absolute; opacity: 0; pointer-events: none; }
.st-pick label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; }
.st-pick label .sdot { margin: 6px 0 0; }
.st-pick label b { display: block; font-weight: 500; font-size: 13.5px; }
.st-help { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.st-pick input:checked + label { background: color-mix(in oklab, var(--sd, var(--blue)) 10%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sd, var(--blue)) 55%, transparent); }
.st-pick input:checked + label b { font-weight: 600; }
.st-pick input:focus-visible + label { outline: 2px solid var(--blue); }
.st-pick label:has(.s-talks) { --sd: var(--s-talks); } .st-pick label:has(.s-before) { --sd: var(--s-before); } .st-pick label:has(.s-host) { --sd: var(--s-host); }
.st-pick label:has(.s-notint) { --sd: var(--s-notint); } .st-pick label:has(.s-dna) { --sd: var(--ink-3); }
.st-line { margin: 8px 0 0; }
.chips-pick label .sdot { margin-right: 6px; }
.hist-more { padding: 0 28px 20px; } .hist-more > summary { margin-bottom: 8px; } .hist-more .timeline { padding: 4px 0 0; }
@media (max-width: 760px) { .hist-more { padding: 0 16px 18px; } }
.next-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.nb-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.sp-info .facts-list .v .sdot { margin-right: 6px; }
.sp-trail .site-tl { padding: 0 28px 24px; }
@media (max-width: 760px) { .sp-trail .site-tl { padding: 0 16px 20px; } }


/* Sites: cards, facilities and size */
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.scard { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 18px 20px; color: inherit; min-height: 168px; }
.scard:hover { text-decoration: none; box-shadow: var(--shadow), 0 0 0 1.5px color-mix(in oklab, var(--blue) 35%, transparent); }
.sc-top { display: flex; gap: 10px; align-items: flex-start; }
.sc-top .grow { flex: 1; min-width: 0; }
.sc-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.sc-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.sc-mid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 22px; }
.sc-chain { font-size: 12px; color: var(--ink-2); background: var(--surface-2); padding: 2px 9px; border-radius: 999px; }
.sc-none { font-size: 12.5px; color: var(--ink-3); }
.sc-foot { margin-top: auto; display: flex; gap: 10px; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }
.sc-foot .late { color: var(--red); }
.sc-dir { color: var(--ink-3); white-space: nowrap; }
.fac-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fac { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in oklab, var(--fam-green) 11%, var(--surface)); color: color-mix(in oklab, var(--fam-green) 55%, var(--ink)); white-space: nowrap; }
.fac svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.fac-restaurant, .fac-cafe { background: color-mix(in oklab, var(--fam-yellow) 18%, var(--surface)); color: color-mix(in oklab, var(--fam-yellow) 35%, var(--ink)); }
.fac-play { background: color-mix(in oklab, var(--fam-blue) 12%, var(--surface)); color: color-mix(in oklab, var(--fam-blue) 70%, var(--ink)); }
.fac.plain { background: var(--surface-2); color: var(--ink-2); padding-left: 9px; }
.fac.more { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); padding-left: 9px; }
.size-b { display: inline-flex; align-items: flex-end; gap: 2px; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.size-b i { display: inline-block; width: 4px; border-radius: 1px; background: var(--line-2); }
.size-b i:nth-child(1) { height: 6px; } .size-b i:nth-child(2) { height: 9px; } .size-b i:nth-child(3) { height: 12px; margin-right: 5px; }
.size-b.sz-small i:nth-child(1), .size-b.sz-medium i:nth-child(-n+2), .size-b.sz-large i { background: var(--fam-blue); }
.head-fac { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.head-fac > a { margin-left: 4px; }
.row-fac { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 5px 0 2px; }
.row-fac .fac span { display: none; } .row-fac .fac { padding: 3px 6px; } .row-fac .fac.more, .row-fac .fac.plain { display: none; }
.k-h { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }
.brand-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* a brand named on a centre's website (Sites): its own name, so the sidebar logo (.brand) keeps its look */
.brand-row .brand { font-size: 12.5px; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); }
.web-more { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.co-facts { display: grid; gap: 2px; margin-top: 8px; }
.co-facts .muted { display: inline-block; min-width: 92px; }
.contact-row.sug { opacity: .95; }
.contact-row.sug .cr-av { background: var(--surface-2); color: var(--ink-2); }
.contact-row.sug form { margin: 0; }
.fac-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; margin-top: 6px; }
.check-now { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sweep-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .scards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .scard { padding: 16px; min-height: 0; }
  .view-seg a { min-width: 0; }
}

/* ---------- Tasks (app/tasklist.py, tasks.html): lists down the side, the list in the middle, the open task on the right.
   On a phone the lists become four pills along the top and an open task takes the whole page.
   Sizes in phone-only rules are written one point under what shows (the phone text step adds one). ---------- */
.tk-solo { margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--ink); }
.tk-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.tk-wrap.has-detail { grid-template-columns: 230px minmax(0, 1fr) minmax(330px, 410px); }
.tk-tabs, .tk-tagrow, .tk-back, .tk-donelink { display: none; }
.tk-lists { padding: 12px 10px; position: sticky; top: 16px; }
.tk-nav { display: grid; gap: 2px; }
.tk-li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--ink); font-weight: 500; font-size: 14px; }
.tk-li:hover { background: var(--surface-2); text-decoration: none; }
.tk-li.on { background: var(--ctl-soft); font-weight: 600; }
.tk-li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; --ic: var(--ink-2); background: color-mix(in oklab, var(--ic) 14%, var(--surface)); color: var(--ic); }
.tk-ic svg { width: 15px; height: 15px; stroke: currentColor; }
.li-today .tk-ic { background: var(--ctl); color: var(--ctl-ink); }
.li-upcoming .tk-ic { --ic: var(--fam-orange); }
.li-anytime .tk-ic { --ic: var(--fam-teal); }
.li-waiting .tk-ic { --ic: var(--fam-purple); }
.li-done .tk-ic { --ic: var(--fam-green); }
.tk-n { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tk-n.late { color: var(--red); }
.tk-tagli { min-height: 40px; font-size: 13.5px; }
.tk-side-h { display: flex; align-items: center; gap: 4px; padding: 14px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 10px; }
.tk-pref { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; font-size: 13.5px; cursor: pointer; }
.tk-pref input { width: 18px; height: 18px; accent-color: var(--ctl); }

.tk-main { padding: 22px 20px 16px; min-width: 0; }
.tk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px 14px; }
.tk-head h2 { font-size: 22px; letter-spacing: -.01em; }
.tk-quick { border-radius: 16px; background: var(--surface-2); padding: 6px 12px 10px 0; margin-bottom: 8px; }
.tk-qin { display: flex; align-items: center; gap: 0; min-height: 44px; }
.tk-dash { width: 22px; height: 22px; margin: 0 11px; border-radius: 50%; border: 2px dashed color-mix(in oklab, var(--ink-2) 70%, var(--surface)); flex: none; }
.tk-qin input[type=text] { flex: 1; min-width: 0; width: auto; border: 0; background: none; box-shadow: none; padding: 8px 4px; font-size: 15px; }
.tk-qin input[type=text]:focus { box-shadow: none; background: none; }
.tk-qwhen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 44px; }
.tk-qwhen input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.tk-qwhen label { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.tk-qwhen input:checked + label { background: var(--ctl); color: var(--ctl-ink); }
.tk-qwhen input:focus-visible + label { outline: 2px solid var(--blue); }
.tk-qwhen input[type=date] { width: auto; min-height: 34px; padding: 4px 10px; }
.tk-more { margin-left: auto; font-size: 12.5px; color: var(--ink-2); padding: 6px 4px; }
.tk-sec { margin: 16px 0 2px 10px; font-size: 12.5px; font-weight: 600; }
.tk-sec span { margin-left: 4px; font-weight: 500; color: var(--ink-2); }
.tk-sec.late { color: var(--red); }
.tk-ul { list-style: none; margin: 0; padding: 0; }
.tk-row { display: flex; align-items: flex-start; gap: 2px; padding-right: 10px; border-radius: 14px; }
.tk-row:hover { background: var(--surface-2); }
.tk-row.sel { background: var(--ctl-soft); }
.tk-check, .tk-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--ink-2); }
.tk-check span { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--ink-2) 75%, var(--surface)); transition: background .15s, border-color .15s; }
.tk-check:hover span { border-color: var(--ink); }
.tk-check[aria-pressed=true] span { background: var(--ctl); border-color: var(--ctl); }
.tk-check[aria-pressed=true] span::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid var(--ctl-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tk-check:disabled { cursor: default; }
.tk-check.big span { width: 24px; height: 24px; }
.tk-go svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--surface-2); stroke: currentColor; }
.tk-row:hover .tk-go svg { background: var(--surface); }
.tk-body { display: block; flex: 1; min-width: 0; padding: 11px 0; color: var(--ink); }
.tk-body:hover { text-decoration: none; }
.tk-body:hover .tk-title { text-decoration: underline; text-decoration-color: var(--line-2); }
.tk-title { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.is-done .tk-title { text-decoration: line-through; color: var(--ink-2); }
.tk-pri { font-weight: 700; letter-spacing: .03em; }
.tk-pri.p3 { color: var(--red); }
.tk-pri.p2 { color: var(--amber); }
.tk-pri.p1 { color: var(--ink-2); }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.tk-m { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-badge { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; --bc: var(--ink-2); background: color-mix(in oklab, var(--bc) 13%, var(--surface)); color: color-mix(in oklab, var(--bc) 72%, var(--ink)); }
.tk-badge.cb { --bc: var(--fam-yellow); color: var(--amber); background: var(--amber-soft); }
.tk-badge.visit { --bc: var(--fam-green); }
.tk-badge.from { --bc: var(--fam-blue); }
.tk-badge.wait { --bc: var(--fam-purple); }
.tk-badge.site { --bc: var(--fam-teal); }
.tk-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
.tk-row:hover .tk-tag, .tk-row.sel .tk-tag { background: var(--surface); }
.tk-bell { width: 13px; height: 13px; stroke: currentColor; flex: none; }
.tk-when { flex: none; padding-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tk-when.late { color: var(--red); }
.tk-empty { margin: 10px 10px 6px; font-size: 13.5px; color: var(--ink-2); }
.tk-donebar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.tk-donebar:hover { text-decoration: none; color: var(--ink); }
.tk-donebar svg { width: 16px; height: 16px; stroke: var(--green); }
.tk-donebar .grow { flex: 1; }

.tk-detail { padding: 22px; position: sticky; top: 16px; min-width: 0; }
.tk-dhead { display: flex; align-items: flex-start; gap: 2px; margin-left: -10px; }
.tk-dhead .tk-check { margin-top: 2px; }
.tk-tin { flex: 1; min-width: 0; width: auto; min-height: 0; border: 0; background: none; box-shadow: none; resize: none; overflow: hidden; padding: 10px 4px; font: 600 18px/1.35 var(--font); color: var(--ink); }
.tk-tin:focus { box-shadow: none; background: none; }
.tk-err { margin: 2px 0 0; font-size: 13px; color: var(--red); }
.tk-fields { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px 12px; align-items: start; margin-top: 18px; }
.tk-k { padding-top: 8px; font-size: 13px; color: var(--ink-2); }
.tk-k label { font-weight: 400; }
.tk-v { min-width: 0; }
.tk-timebtn { flex: 0 1 150px; }
.tk-timebtn[hidden], .tk-clear[hidden] { display: none; }
.tk-times { display: grid; gap: 10px; }
.tk-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tk-mins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.tk-hours button, .tk-mins button { min-height: 38px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 13px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.tk-hours button:hover, .tk-mins button:hover:not(:disabled) { background: var(--surface); }
.tk-hours button.is-sel, .tk-mins button.is-sel { background: var(--ctl); color: var(--ctl-ink); font-weight: 600; }
.tk-mins button:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.tk-hours button:focus-visible, .tk-mins button:focus-visible { outline: 2px solid var(--blue); }
.tk-notime { justify-self: start; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 12.5px var(--font); cursor: pointer; }
.tk-qdp { margin: 8px 0 0 44px; max-width: 360px; }
.to-chip.solo { padding: 0 14px; }
.tk-rem { margin-top: 0; }
.tk-rem label { font-size: 12.5px; padding: 5px 11px; }
.tk-rem label.off { opacity: .4; cursor: default; }
.tk-hint { margin: 6px 0 0; }
.tk-pris label { min-width: 44px; text-align: center; font-size: 13px; font-weight: 700; padding: 6px 10px; }
.tk-pris label.p0 { font-weight: 500; }
.tk-pris input:checked + label.p3 { color: var(--red); }
.tk-pris input:checked + label.p2 { color: var(--amber); }
.tk-tagbox, .tk-forbox { margin-top: 0; }
.tk-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
a.tk-link:hover { text-decoration: none; background: var(--ctl-soft); }
.tk-link .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-link b { font-weight: 500; font-size: 13.5px; }
.tk-by { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tk-acts .grow { flex: 1; }
.tk-del.sure { background: var(--red); color: #fff; }
.tk-back { align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 4px; color: var(--blue); font-weight: 600; }
.tk-back::before { content: ""; width: 9px; height: 9px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); margin: 0 2px 0 4px; }
.tk-back:hover { text-decoration: none; }
.tk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px;
  background: var(--ctl); color: var(--ctl-ink); font-size: 13.5px; box-shadow: var(--shadow); }
.tk-toast[hidden] { display: none; }
@media (max-width: 1180px) {
  .tk-wrap.has-detail { grid-template-columns: 230px minmax(0, 1fr); }
  .tk-wrap.has-detail .tk-main { display: none; }
  .tk-wrap.has-detail .tk-back { display: inline-flex; }
  .tk-detail { position: static; }
}
@media (max-width: 760px) {
  .tk-wrap, .tk-wrap.has-detail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tk-lists { display: none; }
  .tk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-s); }
  .tk-tabs a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 2px; border-radius: 10px; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .tk-tabs a:hover { text-decoration: none; }
  .tk-tabs a.on { background: var(--ctl); color: var(--ctl-ink); font-weight: 600; }
  .tk-tagrow { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .tk-tagchip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink); font-size: 12.5px; white-space: nowrap; }
  .tk-tagchip.on { background: var(--ctl); color: var(--ctl-ink); }
  .tk-tagchip:hover { text-decoration: none; }
  .tk-wrap.has-detail .tk-tabs, .tk-wrap.has-detail .tk-tagrow { display: none; }
  .tk-main { padding: 14px 6px 8px; }
  .tk-head { padding: 0 8px 10px; }
  .tk-head h2 { font-size: 19px; }
  .tk-quick { padding: 4px 10px 10px 0; }
  .tk-qin input[type=text] { font-size: 16px; }
  .tk-qwhen { padding-left: 10px; }
  .tk-qdp { margin-left: 10px; }
  .tk-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tk-hours button, .tk-mins button { min-height: 44px; }
  .tk-qwhen label { min-height: 36px; }
  .tk-when { padding-top: 12px; }
  .tk-donelink { display: block; min-height: 44px; line-height: 44px; text-align: center; font-size: 12.5px; color: var(--ink-2); }
  .tk-detail { padding: 16px; }
  .tk-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tk-k { padding-top: 10px; }
  .tk-pris { display: flex; width: 100%; }
  .tk-pris label { flex: 1; }
  .tk-acts .btn { min-height: 44px; }
  .tk-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tk-solo { margin: 0 0 12px; }
}

/* Tasks elsewhere: the tick button in the phone top bar, tasks on the Calendar, the Dashboard and My Apps card */
.topbar .task-btn { display: none; position: relative; text-decoration: none; }
@media (max-width: 760px) { .topbar .task-btn { display: grid; } .topbar .task-btn.on { background: var(--ctl); color: var(--ctl-ink); } }
.ev.tk-ev { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.ev.tk-ev:hover { background: var(--surface-2); }
.ev.tk-ev b { display: flex; align-items: center; gap: 4px; }
.ev.tk-ev b svg { width: 12px; height: 12px; flex: none; stroke: var(--ink-2); }
.ev.tk-ev .t::before { display: none; }
.ev.tk-ev.late { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--red) 45%, var(--surface)); }
.tk-card .td-t.late { background: var(--red-soft); color: var(--red); }
.tk-card .tk-pri { margin-right: 4px; }
.note-task { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 13px; font-weight: 500; }
.tk-mode-ic { width: 34px; flex: none; }
.hw-mode-ic { width: 34px; flex: none; display: grid; place-items: center; font-size: 22px; line-height: 1; }

.tk-ro { margin: 8px 0 0; font-size: 14px; }

/* Director's dashboard (26 Oct 2026) */
.dir-kpis .kpi { grid-template-columns: 1fr; }
.dir-meter { position: relative; height: 8px; border-radius: 99px; background: var(--track); margin-top: 10px; }
.dir-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--green); }
.dir-meter span { position: absolute; right: 0; top: 12px; font-size: 12px; color: var(--ink-3); }
.dir-site-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.dir-site-figs > * { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); color: inherit; text-decoration: none; }
.dir-site-figs b { font-size: 26px; font-weight: 700; color: var(--ink); }
.dir-site-figs span { font-size: 13px; color: var(--ink-2); }
.dir-site-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dir-site-lists .k { margin-bottom: 6px; }
.dir-site { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.dir-site:hover span:first-child { text-decoration: underline; }
@media (max-width: 760px) { .dir-site-figs { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .dir-site-figs b { font-size: 21px; } .dir-site-lists { grid-template-columns: 1fr; gap: 14px; } }

/* Time wheel (static/wheel.js) */
.wheel-pop { max-width: 300px; }
.wheel { position: relative; height: 150px; outline: none; border-radius: 12px; }
.wheel:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.wheel-band { position: absolute; left: 0; right: 0; top: 60px; height: 30px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); pointer-events: none; }
.wheel-scroll { position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-item { height: 30px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color .15s; }
.wheel-item.on { color: var(--ink); font-weight: 600; font-size: 16px; }
.wheel-item em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.wheel-item.dis { cursor: default; color: var(--ink-3); }
.wheel-item.dis span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.wheel-item.dis em { color: var(--red); }
.wheel-item.w-clash span { color: color-mix(in srgb, var(--red) 70%, var(--ink-3)); }   /* booked: red, can't be chosen */
.wheel-item.w-tight span { color: var(--amber); }   /* too tight: amber, can be chosen (a warning shows underneath) */
.wheel-item.w-tight em { color: var(--amber); }
.wheel-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wheel-band { background: color-mix(in srgb, var(--ink) 12%, var(--surface-2)); box-shadow: none; } }
:root[data-theme="dark"] .wheel-band { background: color-mix(in srgb, var(--ink) 12%, var(--surface-2)); box-shadow: none; }
.wheel-btn svg { width: 16px; height: 16px; }

/* Add task pop-up on any page */
.qt-dlg { width: min(460px, calc(100vw - 32px)); }
.qt-dlg h2 { margin: 0 0 10px; font-size: 18px; }
.qt-for { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; color: var(--ink-2); }
.qt-for span { font-weight: 600; }
.qt-for .linkish { border: 0; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; text-decoration: none; }
#qtText { width: 100%; }
.qt-dlg .qt-when { margin: 12px 0 0; padding-left: 0; }
.qt-dp, .qt-time { margin-top: 10px; }
.qt-dlg .dlg-actions { display: flex; align-items: center; gap: 8px; }
.qt-dlg .dlg-actions .grow { flex: 1; }
.qt-more { white-space: nowrap; border: 0; background: none; padding: 6px 0; color: var(--blue); font-weight: 500; cursor: pointer; text-decoration: none; }
.qt-extra { display: grid; grid-template-columns: 92px 1fr; gap: 12px 12px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.qt-extra .qt-k { font-size: 13px; color: var(--ink-2); }
.qt-extra label.qt-k[for=qtNotes] { align-self: start; padding-top: 10px; }
.qt-extra textarea, .qt-extra select { width: 100%; }
.qt-extra textarea { resize: vertical; min-height: 64px; }
.qt-rem { margin-top: 0; gap: 6px; }
.qt-rem label { font-size: 12.5px; padding: 5px 11px; }
.qt-rem label.off { opacity: .4; cursor: default; }
.qt-pris { justify-self: start; }
@media (max-width: 520px) { .qt-extra { grid-template-columns: 1fr; gap: 6px; } .qt-extra .qt-k { margin-top: 6px; } .qt-extra label.qt-k[for=qtNotes] { padding-top: 0; } }
.qt-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center;
  padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); font-size: 14px; transition: opacity .35s; }
.qt-toast a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.qt-toast.out { opacity: 0; }
.nav a.nav-task-add .nav-sub-k { font-size: 15px; font-weight: 600; color: var(--blue); }
.more-sheet a.nav-task-add .nav-sub-k, #moreSheet a.nav-task-add .nav-sub-k { font-size: 18px; color: var(--blue); width: 20px; text-align: center; }

.run-nudge { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.run-nudge input { width: 64px; display: inline-block; padding: 4px 8px; margin: 0 4px; text-align: center; }

.pw-panel { max-width: 460px; }
.pw-panel form.panel-body { padding: 24px 28px 26px; }
.pw-panel input[type=password], .pw-panel input[type=text] { width: 100%; }
.pw-panel .f { margin-top: 14px; }
.pw-panel .f:first-of-type { margin-top: 0; }
.pw-show { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pw-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }

.note-latest { margin-top: 16px; padding: 10px 12px 12px; border-radius: 12px; background: var(--surface-2); }
.note-latest .nl-head { display: flex; align-items: baseline; gap: 8px; }
.note-latest .nl-head .f { margin: 0; }
.note-latest .grow { flex: 1; }
.note-latest .nl-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-latest #noteEdit { border: 0; background: none; color: var(--blue); cursor: pointer; padding: 0; font-weight: 500; text-decoration: none; }

/* Show or hide password: an eye button inside the box (static/pwtoggle.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }
.pw-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--blue); }

.tier.ref { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.add-ref { display: flex; align-items: center; gap: 2px; margin-top: 10px; }
.add-ref .alt-kind { margin: 0; }

.sheet-glance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.sheet-glance .sg-k { font-weight: 600; color: var(--ink); margin-right: 4px; display: inline-flex; align-items: center; }
.sheet-glance .sg-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-s); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.sheet-glance .sg-c b { color: var(--ink); font-weight: 600; }
.sheet-glance .sg-c:hover { color: var(--ink); }
.sheet-glance .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sheet-glance .dot.live { background: var(--green); } .sheet-glance .dot.started { background: var(--amber); } .sheet-glance .dot.worked { background: var(--ink-3); }
.sheet-glance .sg-c.warn { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--amber); } .sheet-glance .sg-c.warn b { color: var(--amber); }
.sheet-glance .sg-c.bad { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); } .sheet-glance .sg-c.bad b { color: var(--red); }

.sheet-group { margin-bottom: 16px; }
.sheet-group > summary { list-style: none; cursor: pointer; align-items: center; }
.sheet-group > summary::-webkit-details-marker { display: none; }
.sheet-group > summary h2 { display: flex; align-items: center; gap: 8px; }
.sheet-group .sg-n { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.sheet-group .sg-chev { display: inline-flex; color: var(--ink-3); transition: transform .2s; }
.sheet-group .sg-chev svg { width: 18px; height: 18px; transform: rotate(90deg); }
.sheet-group[open] .sg-chev { transform: rotate(180deg); }
.sheet-group:not([open]) > summary { padding-bottom: 18px; }
@media (min-width: 761px) { .sheet-tbl-g { table-layout: fixed; width: 100%; }   /* the same columns in every group */
  .sheet-tbl-g .c-d { width: 9%; } .sheet-tbl-g .c-c { width: 14%; } .sheet-tbl-g .c-t { width: 10%; } .sheet-tbl-g .c-cb { width: 21%; }
  .sheet-tbl-g .c-n { width: 8%; } .sheet-tbl-g .c-r { width: 11%; } .sheet-tbl-g .c-a { width: 27%; } }

/* ---------- Areas and Customers: another client's own site (LEADTOOL_PROFILE) ---------- */
.tier.new-area { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); font-weight: 600; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; padding: 6px 0; }
.check-row input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.area-where { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.area-where legend { padding: 0; }
.area-where .seg { flex-wrap: wrap; }
.cat-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; max-height: 520px; overflow: auto; }
.area-line { font-size: 13px; color: var(--ink-2); }
/* Customers: check-ins have their own colour (teal) so they stand out from call-backs (amber) */
:root { --ck: #12808A; --ck-soft: #E1F3F4; }
:root[data-theme="dark"] { --ck: #5CC9CF; --ck-soft: #12302F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ck: #5CC9CF; --ck-soft: #12302F; } }
.ck-panel { border-top: 3px solid var(--ck); }
.ck-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ck-soft); color: var(--ck); flex: none; }
.ck-ic svg { width: 19px; height: 19px; stroke: currentColor; }
.ck-ic.fu { background: var(--surface-2); color: var(--ink-2); }
.ck-row.late .title { color: var(--red); }
.ck-panel .row .title, .ck-panel .row .sub { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 760px) { .ck-panel .row > .chev { display: none; } .ck-panel .row .pill { font-size: 11px; padding: 3px 8px; } }
.ck-bar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border-radius: 14px; background: var(--ck-soft); color: var(--ck); }
.ck-bar-h { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; }
.ck-bar-h svg { width: 18px; height: 18px; stroke: currentColor; }
.ck-bar-items { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ck-chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; text-decoration: none; box-shadow: var(--shadow-s); }
.ck-chip.late { color: var(--red); font-weight: 600; }
.ck-chip.fu { color: var(--ink-2); }
.ck-card { padding: 14px; border-radius: 14px; background: var(--surface-2); margin-bottom: 12px; border-left: 4px solid var(--ck); }
.ck-card.late { border-left-color: var(--red); }
.ck-card.late .ck-when b { color: var(--red); }
.ck-when { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ck-pick { margin-top: 2px; }
.ck-past { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.ck-past li { display: flex; gap: 10px; align-items: flex-start; }
.ck-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--ink-3); }
.ck-dot.o-transacting { background: var(--green); } .ck-dot.o-not_yet { background: var(--amber); } .ck-dot.o-problem { background: var(--red); }
.inline-more > summary { list-style: none; cursor: pointer; color: var(--blue); }
.inline-more > summary::-webkit-details-marker { display: none; }
.more-box { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 10px; }
.add-box { margin-top: 12px; }
.add-box > summary { list-style: none; display: inline-flex; }
.add-box > summary::-webkit-details-marker { display: none; }
.add-box[open] > summary { margin-bottom: 2px; }
.deal-list { display: grid; gap: 14px; }
.deal { padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
.deal.closed { opacity: .75; }
.deal.flash-in { box-shadow: 0 0 0 2px var(--blue-tint); }
.deal-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.stepper { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11.5px; color: var(--ink-3); gap: 3px; }
.stepper li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper .dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
.stepper li.done .dot { background: var(--green); border-color: var(--green); }
.stepper li.done::before, .stepper li.now::before { background: var(--green); }
.stepper li.now .dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.stepper li.done, .stepper li.now { color: var(--ink); }
.stepper .lab { font-weight: 500; }
.stepper .when { color: var(--ink-2); font-size: 11px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.stepper .days { color: var(--ink-3); }
.deal-acts { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.stage-go { display: flex; gap: 8px; align-items: center; }
.small-date { width: auto; max-width: 150px; padding: 6px 8px; font-size: 13px; }
.agree-row { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.agree { margin: 0; }
.tick-btn { display: inline-flex; gap: 8px; align-items: center; background: var(--surface-2); border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.tick-btn .box, .fu-tick .box { width: 15px; height: 15px; border-radius: 5px; border: 2px solid var(--line-2); display: inline-block; }
.tick-btn svg { width: 15px; height: 15px; stroke: var(--green); }
.tick-btn.on { background: var(--green-soft); }
.tick-btn:disabled { opacity: .5; cursor: default; }
.deal-log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: grid; gap: 4px; }
.fu-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.fu-row:first-child { border-top: 0; padding-top: 0; }
.fu-row.late .small { color: var(--red); }
.fu-tick { background: none; border: 0; padding: 2px 0 0; cursor: pointer; }
.fu-tick:hover .box { border-color: var(--green); }
.done-box { margin-top: 12px; }
.done-box summary { cursor: pointer; color: var(--ink-2); }
.contact-row { padding: 8px 0; border-top: 1px solid var(--line); }
.contact-row:first-child { border-top: 0; padding-top: 0; }
.contact-row > summary { cursor: pointer; list-style: none; }
.contact-row > summary::-webkit-details-marker { display: none; }
.small-pill { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; }
.party { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.party h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.reg-say { margin: 6px 0 0; } .reg-say.bad { color: var(--red); }
.log-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; font-size: 13.5px; }
.log-list li { display: flex; gap: 10px; align-items: flex-start; }
.log-k { flex: none; min-width: 46px; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); text-align: center; }
.log-list.hist { margin-top: 0; }
.cust-chip { display: inline-flex; gap: 5px; align-items: center; margin: 4px 6px 0 0; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 500; text-decoration: none; }
.cust-chip svg { width: 14px; height: 14px; stroke: currentColor; }
.crm-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
.crm-filter .search { margin-left: auto; }
.crm-table tr.click { cursor: pointer; }
.crm-table a { color: inherit; text-decoration: none; }
.late-txt { color: var(--red); }
.unit-in { display: flex; gap: 10px; align-items: center; }
.unit-in input { width: 90px; }
.unit-in span { font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) {
  .stepper .when { display: none; }
  .crm-filter .search { margin-left: 0; width: 100%; }
}
.contract-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.contract-row input { max-width: 200px; }
/* END Areas and Customers */

/* === phone text one size up: made by scripts/phone_text.py, do not edit by hand === */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .small { font-size: 13.5px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 12px; }
  .nav a { font-size: 15px; }
  .nav a.nav-sub { font-size: 14px; }
  .nav a.nav-sub .nav-sub-k { font-size: 13px; }
  .cont-k { font-size: 13px; }
  .cont-t b { font-size: 16px; }
  .cont-c { font-size: 14px; }
  .cont-go { font-size: 14px; }
  .side-cta .plus { font-size: 20px; }
  .topbar .ptitle { font-size: 21px; }
  .avatar { font-size: 14px; }
  .mode { font-size: 13.5px; }
  h1 { font-size: 27px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15px; }
  .lede { font-size: 15px; }
  .panel-head .k { font-size: 13px; }
  .figure .v { font-size: 27px; }
  .figure .v small { font-size: 15px; }
  .figure .k { font-size: 13.5px; }
  .axis { font-size: 12.5px; }
  .peak b { font-size: 17px; }
  .peak span { font-size: 12px; }
  .ring .lab { font-size: 12px; }
  .ring.big .lab { font-size: 27px; }
  .ring.big .lab span { font-size: 12px; }
  .profile .name { font-size: 18px; }
  .profile .role { font-size: 13.5px; }
  .minis b { font-size: 17px; }
  .minis span { font-size: 12px; }
  .profile .minis b { font-size: 21px; }
  .row .sub { font-size: 13.5px; }
  .tile { font-size: 13px; }
  table.data { font-size: 14.5px; }
  table.data th { font-size: 13px; }
  .district { font-size: 15.5px; }
  .pill { font-size: 13px; }
  .btn { font-size: 14.5px; }
  .btn.small { font-size: 13.5px; }
  .banner { font-size: 14.5px; }
  .flash { font-size: 14.5px; }
  input[type=text], input[type=password], input[type=search], select { font-size: 15px; }
  label.f, span.f { font-size: 13.5px; }
  .auth h1 { font-size: 25px; }
  .auth .btn { font-size: 15.5px; }
  .demo-enter h2 { font-size: 18px; }
  .demo-roles .btn b { font-size: 14.5px; }
  .demo-roles .btn span { font-size: 13px; }
  .hero .facts div { font-size: 13px; }
  .hero .facts b { font-size: 19px; }
  .next-up .d { font-size: 29px; }
  .steps li { font-size: 14.5px; }
  .seg label { font-size: 13px; }
  .seg button { font-size: 13px; }
  .kv { font-size: 14.5px; }
  .crumb { font-size: 13.5px; }
  h1 { font-size: 23px; }
  .donut-mid span { font-size: 12.5px; }
  .donut-mid b { font-size: 27px; }
  .legend { font-size: 14px; }
  .legend .pc { font-size: 13px; }
  .wf-num { font-size: 14px; }
  .wf-lab { font-size: 12.5px; }
  .kpi .t { font-size: 13.5px; }
  .kpi .v { font-size: 29px; }
  .kpi .s { font-size: 12.5px; }
  .kpi .delta { font-size: 13px; }
  .toggle a { font-size: 13.5px; }
  .bars .tip span { font-size: 12px; }
  .bars .tip b { font-size: 17px; }
  .bars-axis { font-size: 12.5px; }
  .clean-notes div { font-size: 13.5px; }
  .clean-notes b { font-size: 16px; }
  .kpi .v { font-size: 23px; }
  .bars-axis { font-size: 10.5px; }
  .av { font-size: 13.5px; }
  .av.s { font-size: 11.5px; }
  .av.l { font-size: 17px; }
  .person .r { font-size: 12.5px; }
  select.inline { font-size: 14px; }
  .slider output { font-size: 29px; }
  .slider output small { font-size: 15px; }
  .ticks { font-size: 12px; }
  .rs-count b { font-size: 27px; }
  .rs-count .muted { font-size: 13.5px; }
  .chip { font-size: 13px; }
  .legend-map { font-size: 13px; }
  .g-months span { font-size: 13.5px; }
  .g-weeks span { font-size: 12px; }
  .g-today::before { font-size: 11.5px; }
  .bar .lbl { font-size: 12.5px; }
  .bar .pct { font-size: 12px; }
  .key { font-size: 13px; }
  input[type=date], input[type=time] { font-size: 15px; }
  textarea { font-size: 15px; }
  .durs button { font-size: 13px; }
  .insight-item .tag { font-size: 13px; }
  .insight-item p { font-size: 14.5px; }
  .meter-key { font-size: 13px; }
  .strip-head b { font-size: 27px; }
  .strip-head span { font-size: 13.5px; }
  .meter-key { font-size: 12.5px; }
  .wf-note { font-size: 12.5px; }
  .av.empty { font-size: 13px; }
  .av.empty.s { font-size: 11.5px; }
  .av.empty.l { font-size: 17px; }
  .picker summary { font-size: 14px; }
  .picker-menu label { font-size: 14.5px; }
  dialog .picker summary { font-size: 15px; }
  .run-row.head { font-size: 12.5px; }
  .run-row .n { font-size: 12.5px; }
  .run-row .who { font-size: 13.5px; }
  .tier { font-size: 12.5px; }
  .tier-head td { font-size: 13px; }
  .for-who { font-size: 14px; }
  .chips-pick label { font-size: 14px; }
  .note-link { font-size: 13px; }
  .note-text { font-size: 13px; }
  .lock-msg { font-size: 13.5px; }
  .dnc-lock { font-size: 13px; }
  .tag-mini { font-size: 12px; }
  .tipbox { font-size: 13.5px; }
  .web-link { font-size: 13px; }
  .web-dead { font-size: 13px; }
  .login-note { font-size: 14.5px; }
  .note-text { font-size: 13px; }
  .prev-note { font-size: 13px; }
  .tcard-head h2 { font-size: 18px; }
  .tcard-head .av { font-size: 16px; }
  .tcard-head .tappt .tnum { font-size: 35px; }
  .tappt span { font-size: 12px; }
  .tstats { font-size: 14.5px; }
  .tstats thead th { font-size: 12px; }
  .tnote { font-size: 13px; }
  .figure .k .of { font-size: 12.5px; }
  .tquiet h3 { font-size: 14px; }
  .tquiet li .av { font-size: 14px; }
  .tquiet li b { font-size: 15px; }
  .carry { font-size: 14px; }
  .carry-x { font-size: 21px; }
  .map-hint { font-size: 13px; }
  .cb-datebtn { font-size: 15px; }
  .cb-quick button { font-size: 13.5px; }
  .cb-head b { font-size: 15px; }
  .cb-dow { font-size: 12px; }
  .cb-grid button { font-size: 14px; }
  .cb-chip { font-size: 12.5px; }
  .cb-bar { font-size: 15px; }
  .cb-badge { font-size: 13.5px; }
  .cb-go { font-size: 14px; }
  .cb-h { font-size: 13.5px; }
  .cb-when { font-size: 14px; }
  .note-del { font-size: 14px; }
  .cb-warn { font-size: 13.5px; }
  .row-find input { font-size: 15px; }
  .cat-h { font-size: 12px; }
  .cat-opt { font-size: 14.5px; }
  .cat-opt b { font-size: 13px; }
  .cat-foot { font-size: 13px; }
  .cat-done { font-size: 13.5px; }
  .cat-chip { font-size: 13.5px; }
  .cat-chip span { font-size: 16px; }
  .cat-clear { font-size: 13.5px; }
  .add-biz { font-size: 14px; }
  .add-rm { font-size: 12.5px; }
  .login-warn { font-size: 13.5px; }
  .part-tag { font-size: 12.5px; }
  .split-offer { font-size: 14.5px; }
  .tps-warn, .tps-alert { font-size: 14.5px; }
  .tps-confirm { font-size: 14.5px; }
  .tps-email { font-size: 13.5px; }
  .cat-item { font-size: 14.5px; }
  .seg label .tries { font-size: 11.5px; }
  .vm-btn { font-size: 13px; }
  .cbar-line { font-size: 14px; }
  .cbar-n { font-size: 12.5px; }
  .cbar-lab { font-size: 13px; }
  .cbi-t { font-size: 13px; }
  .cbi-s { font-size: 12px; }
  .cbi-w { font-size: 13px; }
  .cbar-all { font-size: 13.5px; }
  .cbp-g h4 { font-size: 12px; }
  .cbp-more { font-size: 13px; }
  .resume-pill { font-size: 14px; }
  .resume-pill button { font-size: 13.5px; }
  .alt-tag { font-size: 11.5px; }
  .alt-kind { font-size: 14px; }
  .dnc-pick button { font-size: 15px; }
  .note-chip { font-size: 13.5px; }
  .hist-link { font-size: 14px; }
  .hist-list { font-size: 14px; }
  .hist-meta { font-size: 12.5px; }
  .add-more { font-size: 13.5px; }
  .add-chip { font-size: 13.5px; }
  .switch { font-size: 14px; }
  .row-switch { font-size: 11.5px; }
  .dtile b { font-size: 18px; }
  .dtile span { font-size: 11.5px; }
  .acard-biz { font-size: 16px; }
  .acard-cat { font-size: 13.5px; }
  .acard-meta { font-size: 14px; }
  .acard-foot .grow { font-size: 13px; }
  .filters select { font-size: 14px; }
  .act { font-size: 13px; }
  .facts-list .k { font-size: 12.5px; }
  .facts-list .v { font-size: 15px; }
  .thread .n { font-size: 14.5px; }
  .thread .by { font-size: 12.5px; }
  .big-choice label { font-size: 14.5px; }
  .ad-line .sum { font-size: 14px; }
  .ad-head { font-size: 14px; }
  .ad-x { font-size: 13.5px; }
  .check { font-size: 14.5px; }
  .note-ok { font-size: 14px; }
  .note-warn { font-size: 14px; }
  input[type=date], input[type=time], input[type=email], input[type=month], input[type=number] { font-size: 15px; }
  .sale-lines { font-size: 14.5px; }
  .sale-total b { font-size: 21px; }
  .ap-chip { font-size: 12.5px; }
  .dist-pill { font-size: 13.5px; }
  .tl-text { font-size: 14.5px; }
  .tl-meta { font-size: 13px; }
  .who-pill { font-size: 13.5px; }
  .site-pill { font-size: 13.5px; }
  .site-name { font-size: 18px; }
  .nav-badge { font-size: 12px; }
  .nav-badge { font-size: 11px; }
  .msg-pill { font-size: 13.5px; }
  .chat .m .t { font-size: 14.5px; }
  .chat .m .by { font-size: 12.5px; }
  .inbox .msg-dot { font-size: 14px; }
  .push-nudge { font-size: 14.5px; }
  .nudge-x { font-size: 21px; }
  .steps-list { font-size: 14.5px; }
  .tick-list { font-size: 14.5px; }
  .visit-map .leaflet-control-attribution { font-size: 10.5px; }
  .period-nav h2 { font-size: 19px; }
  .hb-val span { font-size: 12.5px; }
  .hb-total b { font-size: 21px; }
  .board-card .rank { font-size: 17px; }
  .board-card .big { font-size: 23px; }
  .cal-key { font-size: 13.5px; }
  .cal-h { font-size: 13.5px; }
  .cal-h b { font-size: 19px; }
  .cal-h.today b { font-size: 16px; }
  .cal-any-lab { font-size: 12px; }
  .cal-times span { font-size: 12px; }
  .ev { font-size: 13px; }
  .ev .t { font-size: 12px; }
  .cal-dn { font-size: 13.5px; }
  .cal-agenda .ev { font-size: 14px; }
  .cal-agenda .ev .t { font-size: 13px; }
  .ag-day { font-size: 14px; }
  .feat-row p { font-size: 14px; }
  .msg-dot { font-size: 11.5px; }
  .thread-av i { font-size: 11px; }
  .unread-dot { font-size: 12px; }
  .pick-role { font-size: 12px; }
  .tc-n span { font-size: 12px; }
  .hb-count b { font-size: 18px; }
  .hbars.compact .hb-count b { font-size: 15px; }
  .hb-count span { font-size: 12px; }
  .hb-tg { font-size: 13px; }
  .hbars.compact .hb-tg { font-size: 12px; }
  .tt-top b { font-size: 27px; }
  .tt-sub { font-size: 14px; }
  .tg-row { font-size: 14.5px; }
  .sale-tile .sub { font-size: 13.5px; }
  body { font-size: 16px; }
  .lede { font-size: 16px; }
  h2 { font-size: 19px; }
  .small, .row .sub, .sub, .kpi .t, .crumb, .acard-cat, .tl-meta, .figure .k, label.f, .f, .who-pill, .site-pill, .dist-pill,
  .sale-tile .sub, .cal-key a, .cal-key span, .note-chip span, .meter-key, .clean-notes > div, .thread-meta .small { font-size: 14.5px; }
  .pill, .panel-head .k, .k, .kpi .delta, .delta, th, table.data th, .tag, .seg label, .insight-item .tag { font-size: 13.5px; }
  .kpi .s, .hb-count span, .hb-val span, .tc-n span, .ev .t, .cal-agenda .ev .t, .pick-role, .bars .tip span, .facts-list .k { font-size: 13.5px; }
  .dtile span { font-size: 12.5px; }
  .bars-axis, .axis span, .g-weeks span, .g-months span, .bar .lbl, .key span, .wf-lab { font-size: 12.5px; }
  .nav-badge, .msg-dot, .unread-dot { font-size: 12px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 17px; }
  .btn, .btn.small, summary.btn, a.btn { font-size: 15px; }
  .toggle a { font-size: 14.5px; }
  .chips-pick label { font-size: 15px; }
  .acts .act { font-size: 14px; }
  select.inline, .filters select, .picker summary { font-size: 17px; }
  .ap-chip, .cb-chip { font-size: 13.5px; }
  .minis span, .n .by, .wf-lab, .hbars.compact .hb-tg, .hb-tg { font-size: 13.5px; }
  .acard-foot .grow { font-size: 14.5px; }
  .ev b { font-size: 14.5px; }
  .cal-btns .btn { font-size: 14.5px; }
}
@media (max-width: 400px) {
  .page-head .view-switch a { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .top-back { font-size: 17px; }
  .cbd-empty { font-size: 15px; }
  .cbd-x { font-size: 21px; }
  .cbd-who button { font-size: 13.5px; }
  .cbd-day h3 { font-size: 13px; }
  .cbd-day h3 .n { font-size: 12px; }
  .cbd-time span { font-size: 13px; }
  .cbd-time .d { font-size: 12.5px; }
  .cbd-tel { font-size: 14px; }
  .cbd-meta { font-size: 13.5px; }
  .av.xs { font-size: 11px; }
  .cbd-note { font-size: 14px; }
  .cbd-done { font-size: 13.5px; }
  .cr-date b { font-size: 27px; }
  .cr-date span { font-size: 14px; }
  .cr-date small { font-size: 13px; }
  .cr-ev { font-size: 14.5px; }
  .cr-ev .cr-time { font-size: 13.5px; }
  .cr-ev .t { font-size: 13.5px; }
  .cr-none { font-size: 14px; }
  .cr-date b { font-size: 19px; }
  .to-chip { font-size: 14.5px; }
  .to-chip button { font-size: 19px; }
  .to-list li span { font-size: 13.5px; }
  .sidebar .nav > a, .sidebar .nav > .nav-more { font-size: 12px; }
  .login-av { font-size: 15px; }
  .login-who .muted { font-size: 13.5px; }
  .role-pill { font-size: 13px; }
  .login-what { font-size: 14px; }
  .warn-tag { font-size: 13px; }
  .lp-k { font-size: 13px; }
  .g-label > a, .g-label .locked-name { font-size: 14px; }
  table.data.sheet-tbl td.st-n { font-size: 14px; }
  .co-check { font-size: 13px; }
  .res-row .aka { font-size: 13px; }
  .dash-h { font-size: 14px; }
  .today-sum { font-size: 15px; }
  .tdy .k { font-size: 12.5px; }
  .td-big { font-size: 31px; }
  .td-cont-n { font-size: 15px; }
  .td-cont-n b { font-size: 19px; }
  .td-t { font-size: 13px; }
  .td-n { font-size: 14.5px; }
  .td-w { font-size: 13px; }
  .td-o { font-size: 13px; }
  .td-figs b { font-size: 25px; }
  .td-figs span { font-size: 13px; }
  .td-figs em { font-size: 12.5px; }
  .td-note { font-size: 14px; }
  .td-vis-cols h3 { font-size: 13px; }
  .td-big { font-size: 27px; }
  .stop-t { font-size: 13.5px; }
  .stop-n { font-size: 15px; }
  .stop-e { font-size: 13px; }
  .route .leg { font-size: 13.5px; }
  .cbi-done { font-size: 14px; }
  .g-tabs [role=tab] { font-size: 14.5px; }
  .g-flag { font-size: 13px; }
  .g-add { font-size: 13.5px; }
  .g-foot { font-size: 12.5px; }
  .biz-name .mi-tag { font-size: 12px; }
  .stile { font-size: 12.5px; }
  .flt-btn { font-size: 14px; }
  .view-seg a { font-size: 13.5px; }
  .map-key { font-size: 13.5px; }
  .area-g legend { font-size: 14.5px; }
  .area-cs label { font-size: 14.5px; }
  .next-card .nc-w { font-size: 14.5px; }
  .cr-av { font-size: 14px; }
  .tps-tag { font-size: 12.5px; }
  .site-tl .tl-note { font-size: 14.5px; }
  .tl-del .linkish { font-size: 13px; }
  .list-h { font-size: 13px; }
  .st-bar { font-size: 14.5px; }
  .stile.big { font-size: 14px; }
  .st-pick label b { font-size: 14.5px; }
  .st-help { font-size: 13.5px; }
  .nb-h { font-size: 14.5px; }
  .sc-name { font-size: 16px; }
  .sc-sub { font-size: 13.5px; }
  .sc-chain { font-size: 13px; }
  .sc-none { font-size: 13.5px; }
  .sc-foot { font-size: 13.5px; }
  .fac { font-size: 13px; }
  .size-b { font-size: 13px; }
  .k-h { font-size: 12.5px; }
  .brand-row .brand { font-size: 13.5px; }
  .tk-li { font-size: 15px; }
  .tk-n { font-size: 13.5px; }
  .tk-tagli { font-size: 14.5px; }
  .tk-side-h { font-size: 13px; }
  .tk-pref { font-size: 14.5px; }
  .tk-head h2 { font-size: 23px; }
  .tk-qin input[type=text] { font-size: 16px; }
  .tk-qwhen label { font-size: 13.5px; }
  .tk-more { font-size: 13.5px; }
  .tk-sec { font-size: 13.5px; }
  .tk-title { font-size: 15px; }
  .tk-meta { font-size: 13.5px; }
  .tk-badge { font-size: 12.5px; }
  .tk-tag { font-size: 12.5px; }
  .tk-when { font-size: 13.5px; }
  .tk-empty { font-size: 14.5px; }
  .tk-donebar { font-size: 14px; }
  .tk-tin { font-size: 19px; }
  .tk-err { font-size: 14px; }
  .tk-k { font-size: 14px; }
  .tk-hours button, .tk-mins button { font-size: 14px; }
  .tk-notime { font-size: 13.5px; }
  .tk-rem label { font-size: 13.5px; }
  .tk-pris label { font-size: 14px; }
  .tk-link b { font-size: 14.5px; }
  .tk-toast { font-size: 14.5px; }
  .tk-tabs a { font-size: 13px; }
  .tk-tagchip { font-size: 13.5px; }
  .tk-head h2 { font-size: 20px; }
  .tk-qin input[type=text] { font-size: 17px; }
  .tk-donelink { font-size: 13.5px; }
  .note-task { font-size: 14px; }
  .hw-mode-ic { font-size: 23px; }
  .tk-ro { font-size: 15px; }
  .dir-meter span { font-size: 13px; }
  .dir-site-figs b { font-size: 27px; }
  .dir-site-figs span { font-size: 14px; }
  .dir-site { font-size: 15px; }
  .dir-site-figs b { font-size: 22px; }
  .wheel-item { font-size: 15px; }
  .wheel-item.on { font-size: 17px; }
  .wheel-item em { font-size: 12.5px; }
  .qt-dlg h2 { font-size: 19px; }
  .qt-for .linkish { font-size: 19px; }
  .qt-extra .qt-k { font-size: 14px; }
  .qt-rem label { font-size: 13.5px; }
  .qt-toast { font-size: 15px; }
  .nav a.nav-task-add .nav-sub-k { font-size: 16px; }
  .more-sheet a.nav-task-add .nav-sub-k, #moreSheet a.nav-task-add .nav-sub-k { font-size: 19px; }
  .run-nudge { font-size: 14px; }
  .pw-show { font-size: 14px; }
  .sheet-glance .sg-c { font-size: 14px; }
  .sheet-group .sg-n { font-size: 13px; }
  .check-row { font-size: 14.5px; }
  .area-line { font-size: 14px; }
  .ck-panel .row .pill { font-size: 12px; }
  .ck-bar-h { font-size: 14.5px; }
  .ck-chip { font-size: 13.5px; }
  .ck-past { font-size: 14px; }
  .stepper li { font-size: 12.5px; }
  .stepper .when { font-size: 12px; }
  .small-date { font-size: 14px; }
  .tick-btn { font-size: 14px; }
  .deal-log { font-size: 13.5px; }
  .small-pill { font-size: 11.5px; }
  .party h3 { font-size: 15px; }
  .log-list { font-size: 14.5px; }
  .log-k { font-size: 12px; }
  .cust-chip { font-size: 13px; }
  .unit-in span { font-size: 14px; }
}
/* === end of phone text === */