/* 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-sub:hover, .nav a.nav-sheets: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 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: absolute; 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(3, minmax(0, 1fr)); gap: 6px; }   /* Today, Week, Month: 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; }
}

/* Today in the calendar's switch: dimmed while the calendar already shows today */
.toggle a.today.now { color: var(--ink-3); pointer-events: none; }

/* 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; }

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

/* === 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; }
  .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; }
  .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; }
  .tk-ro { font-size: 15px; }
}
/* === end of phone text === */