/* Visual language (v0.10.55): Plus Jakarta Sans, the face chosen for Shika (SIL Open Font License, public/fonts/OFL-plus-jakarta-sans.txt),
   served from this app so it works offline and under the strict CSP. One variable file, latin, 27 KB, for every weight.
   One type scale and three weights only: 400 text, 500 controls, names and labels, 600 page titles and big figures. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }
:root {
  --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f1f3f8; --ink: #1c2434; --muted: #5d6779;
  --line: #e1e5ee; --primary: #0f766e; --primary-ink: #ffffff; --primary-soft: #dcf3ef;
  --danger: #c0262d; --danger-soft: #fde8e8; --warn: #9a5a00; --warn-soft: #fff0d1; --ok: #17703a; --ok-soft: #dcf5e4;
  --info: #1f5fbf; --info-soft: #e1ecfc; --purple: #6b3fc7; --purple-soft: #ece4fb; --pink: #b8286f; --pink-soft: #fde3ef;
  --focus: #1d4ed8; --radius: 12px; --shadow: 0 1px 2px rgba(28, 36, 52, .05), 0 6px 18px rgba(28, 36, 52, .05);
  --side: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #0f1522; --surface: #171f31; --surface-2: #1e283d; --ink: #e8edf6; --muted: #9aa7bd;
  --line: #2a3650; --primary: #2dd4bf; --primary-ink: #04201c; --primary-soft: #123b36;
  --danger: #ff8a80; --danger-soft: #3a1714; --warn: #ffcf7a; --warn-soft: #382a0d; --ok: #7be3a0; --ok-soft: #12301f;
  --info: #8ab4ff; --info-soft: #172a4d; --purple: #c4a8ff; --purple-soft: #2a2050; --pink: #ff9ac4; --pink-soft: #3d1830;
  --focus: #8ab4ff; --shadow: none; --side: #121a2b;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f1522; --surface: #171f31; --surface-2: #1e283d; --ink: #e8edf6; --muted: #9aa7bd;
    --line: #2a3650; --primary: #2dd4bf; --primary-ink: #04201c; --primary-soft: #123b36;
    --danger: #ff8a80; --danger-soft: #3a1714; --warn: #ffcf7a; --warn-soft: #382a0d; --ok: #7be3a0; --ok-soft: #12301f;
    --info: #8ab4ff; --info-soft: #172a4d; --purple: #c4a8ff; --purple-soft: #2a2050; --pink: #ff9ac4; --pink-soft: #3d1830;
    --focus: #8ab4ff; --shadow: none; --side: #121a2b;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.25rem; } h2 { font-size: 1rem; } h3 { font-size: .9375rem; }
p { margin: 0 0 .75rem; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
.loading, .pad { padding: 2rem; color: var(--muted); }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .mono { font-variant-numeric: tabular-nums; }
.error { color: var(--danger); font-weight: 500; min-height: 1.4em; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.stack > * + * { margin-top: .75rem; }
.grow { flex: 1 1 0; min-width: 0; }

/* shell: left menu + top bar */
.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidenav { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; padding: .2rem .4rem; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { font-size: 1.02rem; overflow-wrap: anywhere; } .brand-text small { color: var(--muted); }
.sidenav nav { display: flex; flex-direction: column; gap: .2rem; }
.navlink { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; padding: .55rem .75rem; border-radius: 10px; min-height: 44px; font-weight: 500; }
.navlink:hover { background: var(--surface-2); }
.navlink.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.ico { flex: none; }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-org { color: var(--muted); font-size: .9rem; }

.gsearch { position: relative; display: flex; align-items: center; width: min(360px, 40vw); color: var(--muted); }
.gsearch > .ico { position: absolute; left: .65rem; width: 16px; height: 16px; pointer-events: none; }
/* .gsearch scope beats the generic input[type=search] rule further down, which would otherwise reset the
   left padding and put the magnifier on top of the placeholder text. */
.gsearch .gsearch-input { width: 100%; padding: .5rem .7rem .5rem 2.3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; }
.gsearch-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.gsearch-input::-webkit-search-cancel-button { cursor: pointer; }
.gsearch-panel { position: absolute; left: 0; top: calc(100% + 6px); width: min(420px, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); z-index: 30; }
.gsearch-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.gsearch-item:hover, .gsearch-item.active { background: var(--primary-soft); }
.gsearch-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gsearch-item-main b { overflow-wrap: anywhere; }
.gsearch-group { padding: .5rem .8rem .3rem; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gsearch-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.gsearch-ico .ico { width: 18px; height: 18px; }
.gsearch-more { display: block; padding: .6rem .8rem; text-align: center; color: var(--primary); text-decoration: none; font-weight: 500; font-size: .9rem; }
.gsearch-more:hover { background: var(--primary-soft); }
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; min-width: 0; }
main:focus { outline: none; }
.profile { position: relative; margin-left: auto; }
.avatar-btn { display: flex; align-items: center; gap: .55rem; background: none; border: 1px solid transparent; border-radius: 999px; padding: .2rem .6rem .2rem .25rem; cursor: pointer; font: inherit; color: var(--ink); min-height: 44px; }
.avatar-btn:hover, .avatar-btn[aria-expanded=true] { background: var(--surface-2); border-color: var(--line); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-weight: 500; font-size: .85rem; }
.avatar.big { width: 44px; height: 44px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 1.5rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); z-index: 30; overflow: hidden; }
.menu-head { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.menu-head > div { min-width: 0; overflow-wrap: anywhere; }
.menu-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.menu-section { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.menu-item { display: block; width: 100%; text-align: left; padding: .7rem 1rem; color: var(--ink); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; cursor: pointer; min-height: 44px; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.link { color: var(--primary); font-weight: 500; border-bottom: 0; }
.segs { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg { flex: 1 1 auto; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.seg[aria-pressed=true] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 500; }
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidenav { position: static; height: auto; flex-direction: row; align-items: center; gap: .5rem; padding: .4rem .6rem; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .brand-text { display: none; }
  .sidenav nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; flex: 1; }
  .navlink { white-space: nowrap; padding: .45rem .7rem; }
  .navlink span { display: inline; }
  .topbar-org, .avatar-name, .gsearch { display: none; }
  .topbar { padding: .3rem .8rem; justify-content: flex-end; }
}

/* settings with its own section menu, like a CRM's settings area */
.settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 4.2rem; }
.subnav a { padding: .6rem .8rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.subnav a:hover { background: var(--surface-2); }
.subnav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.settings-body { min-width: 0; }
.settings-body > .card + .card, .settings-body > .grid2 + .card { margin-top: 1rem; }
@media (max-width: 820px) { .settings { grid-template-columns: minmax(0, 1fr); } .subnav { flex-direction: row; overflow-x: auto; position: static; } .subnav a { white-space: nowrap; } }
.preview { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 10px; padding: .8rem; font: inherit; font-size: .92rem; margin: 0; }
.logo-preview { display: grid; place-items: center; min-height: 110px; max-width: 360px; border: 1px dashed var(--line); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; background: var(--surface-2); }
.logo-preview img { max-width: 100%; max-height: 90px; object-fit: contain; }
.wrap { overflow-wrap: anywhere; word-break: break-word; }

/* cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.auth { max-width: 420px; margin: 8vh auto 0; }
.auth-wrap { padding: 1rem; }
.auth-brand { text-align: center; font-weight: 600; font-size: 1.4rem; margin-top: 6vh; color: var(--primary); }
.auth-version { text-align: center; color: var(--muted); font-size: .75rem; margin: 1.5rem 0 0; }
body { -webkit-font-smoothing: antialiased; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid2 > * { min-width: 0; }
.queue-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.queue-grid > .card + .card, .grid2 > .card + .card { margin-top: 0; }
.side > .card + .card { margin-top: 1rem; }
@media (max-width: 900px) { .queue-grid, .grid2 { grid-template-columns: 1fr; } }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }

/* forms */
.field { display: block; margin-bottom: .8rem; }
.field > span, .field > .field-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; margin: .2rem 0 0; }
.field .req { color: var(--danger); font-weight: 500; }
.security-row { padding: .7rem 0; border-top: 1px solid var(--line); }
.security-row:first-of-type { border-top: none; }
.pw-checklist { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .82rem; display: flex; flex-direction: column; gap: .15rem; }
.pw-checklist li { color: var(--muted); }
.pw-checklist li::before { content: '○ '; }
.pw-checklist li.ok { color: var(--ok); }
.pw-checklist li.ok::before { content: '✓ '; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
textarea { min-height: 5.5rem; resize: vertical; }
/* Browsers paint autofilled fields with their own (often olive/yellow) background and ignore
   our `background`. This is the standard trick: delay the browser's own transition long enough
   that it never visibly applies, and paint over it ourselves via an inset box-shadow instead. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 600000s ease-in-out 0s;
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.6rem; }
.pw-toggle {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: none; border: none; border-radius: 50%; color: var(--muted); cursor: pointer; padding: 0;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--ink); background: var(--surface-2); }
.pw-toggle .ico { width: 18px; height: 18px; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }
.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; }
.check span { font-weight: 500; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* buttons & chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; font: inherit; font-weight: 500; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: .25rem .7rem; font-size: .875rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.chip { min-height: 44px; padding: .45rem .85rem; font: inherit; font-weight: 500; cursor: pointer; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.chip:hover { border-color: var(--primary); }
.chip[aria-pressed=true] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip.warn[aria-pressed=true] { background: var(--danger); border-color: var(--danger); color: #fff; }
.group-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; margin: .4rem 0 .35rem; }

/* badges, banners, tiles */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 500; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.purple { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.badge.pink { background: var(--pink-soft); color: var(--pink); border-color: transparent; }
.banner { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid transparent; }
.banner.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.banner.bad { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.banner.info { background: var(--primary-soft); color: var(--ink); border-color: var(--primary); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow); }
.tile b { display: block; font-size: 1.45rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: .85rem; }
.tile.alert b { color: var(--danger); }
.tile.ok b { color: var(--ok); }

/* call card */
.call-name { font-size: 1.4rem; margin-bottom: .15rem; }
.phone { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.7rem; font-weight: 600; text-decoration: none; margin: .4rem 0; letter-spacing: .01em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .5rem 0 1rem; font-size: .95rem; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.history { list-style: none; padding: 0; margin: 0; }
.history li { padding: .5rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.history li:first-child { border-top: 0; }
.history .sys { color: var(--muted); font-style: italic; }
.email-panel { background: var(--primary-soft); border-radius: 10px; padding: .8rem; margin-bottom: .8rem; }
details.cs { border-top: 1px solid var(--line); padding: .4rem 0; }
details.cs:first-of-type { border-top: 0; }
details.cs summary { cursor: pointer; font-weight: 500; min-height: 36px; display: flex; align-items: center; }
details.cs blockquote { margin: .3rem 0 .4rem; padding: .5rem .8rem; border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: 0 8px 8px 0; font-style: italic; }
.upnext { list-style: none; margin: 0; padding: 0; }
.upnext li { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.upnext li:first-child { border-top: 0; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.bar { height: 10px; background: var(--primary); border-radius: 999px; min-width: 2px; }
.bar-track { background: var(--surface-2); border-radius: 999px; height: 10px; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.spark > div { flex: 1; text-align: center; font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.spark .bar { flex: none; min-height: 2px; width: 100%; border-radius: 6px 6px 0 0; }

/* pipeline */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; }
.col h3 { display: flex; justify-content: space-between; }
.pcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .65rem; margin-bottom: .5rem; text-decoration: none; color: var(--ink); font-size: .9rem; }
.pcard:hover { border-color: var(--primary); }

/* dialog & toast */
dialog.modal { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: var(--surface); color: var(--ink); width: min(520px, calc(100vw - 2rem)); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 10px; transition: transform .2s, opacity .2s; opacity: 0; pointer-events: none; z-index: 100; max-width: calc(100vw - 2rem); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: var(--danger); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.empty { text-align: center; padding: 2.5rem 1rem; }
.empty h2 { margin-bottom: .4rem; }
.bar-cell { width: 45%; }
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.4rem;margin:.75rem 0}

/* compact filter bar: controls sit side by side instead of one per row */
.toolbar > select, .toolbar > input[type=search], .toolbar > input[type=text] { width: auto; flex: 1 1 150px; max-width: 230px; min-height: 40px; }
.toolbar > .grow { flex: 2 1 260px; max-width: 420px; }
.nowrap { white-space: nowrap; }
.count { margin: 0; font-size: 1.05rem; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; }
.pager select { width: auto; min-height: 34px; padding: .25rem .5rem; }
.pagebox { width: 4.2rem !important; min-height: 34px !important; padding: .2rem .4rem !important; text-align: center; }
.selbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .55rem .8rem; margin: .5rem 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.selcol { width: 2.2rem; }

.card.flat { box-shadow: none; background: var(--bg, transparent); margin: .6rem 0; }
.sig-logo { display: block; max-height: 56px; max-width: 220px; margin-top: .5rem; }
.compose textarea { min-height: 10rem; }
fieldset.attach { border: 1px solid var(--line); border-radius: 10px; margin: .6rem 0; padding: .5rem .8rem; }
details > summary { cursor: pointer; margin: .5rem 0; font-weight: 500; }

.nav-badge { margin-left: auto; background: #e5484d; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 500; padding: .05rem .45rem; min-width: 1.2rem; text-align: center; }
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; height: calc(100vh - 11rem); min-height: 22rem; }
.chat-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; padding: .4rem; }
.chat-thread { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 10px; color: inherit; text-decoration: none; }
.chat-thread:hover { background: var(--primary-soft); }
.chat-thread.active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.ct-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ct-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.sm { width: 30px; height: 30px; font-size: .75rem; flex: none; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
/* Every thread (Team, groups, direct messages) scrolls the same way: no browser scrollbar, and a
   jump-to-latest arrow (.chat-jump) when you're scrolled up. Wheel, touch and arrow keys still scroll. */
.chat-log-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: .6rem; padding: .2rem; scrollbar-width: none; }
.chat-log::-webkit-scrollbar { display: none; }
.chat-jump { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--primary); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 2; }
.chat-jump .ico { width: 18px; height: 18px; }
.chat-jump.has-new { background: var(--primary); color: #fff; border-color: var(--primary); padding-right: .8rem; }
.chat-jump:hover { filter: brightness(1.05); }
/* The quick set floats over the top edge of the bubble (like Teams) so showing it never reflows the text. */
.msg-line { position: relative; }
.rx-pick { display: none; position: absolute; bottom: calc(100% - .4rem); left: 0; z-index: 1; gap: .1rem; padding: .15rem .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); white-space: nowrap; }
.msg.mine .rx-pick { left: auto; right: 0; } /* grows towards the open side, so a short bubble never pushes it off-screen */
.msg:hover .rx-pick, .msg:focus-within .rx-pick, .msg.picking .rx-pick { display: inline-flex; }
.rx-pick button { border: 0; background: none; font-size: 1.05rem; line-height: 1; padding: .25rem; border-radius: 50%; cursor: pointer; }
.rx-pick button:hover, .rx-pick button:focus-visible { background: var(--primary-soft); transform: scale(1.15); }
.rx-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.rx-chips:empty { display: none; }
.msg.mine .rx-chips { justify-content: flex-end; }
.rx-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.rx-chip.mine { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.avatar.group .ico { width: 16px; height: 16px; }
/* Presence: a dot on the avatar's corner, green when online. */
.pres-wrap { position: relative; display: inline-flex; flex: none; }
.pres-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9aa5b1; border: 2px solid var(--surface); }
.pres-dot.on { background: #22a559; }
.pres-wrap.big .pres-dot { width: 22px; height: 22px; border-width: 3px; right: 6px; bottom: 6px; }
.chat-person { padding-right: .9rem; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.profile-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; min-width: min(320px, 80vw); }
.profile-card p { margin: 0; }
.profile-card .row.end { align-self: stretch; margin-top: .8rem; }
.profile-photo { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: var(--primary-soft); color: var(--primary); font-size: 3rem; font-weight: 500; text-decoration: none; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-status { font-weight: 500; color: var(--muted); }
.profile-status.on { color: #1d8a4b; }
/* Emoji for the message box. */
.emoji-wrap { position: relative; flex: none; }
.emoji-btn { font-size: 1.2rem; padding: .35rem .6rem; line-height: 1; }
.emoji-panel { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: min(330px, calc(100vw - 2.5rem)); max-height: 290px; overflow: auto; padding: .4rem .5rem .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); }
.emoji-group { font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .4rem .2rem .2rem; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.emoji-grid button { border: 0; background: none; font-size: 1.3rem; line-height: 1; padding: .3rem 0; border-radius: 8px; cursor: pointer; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--primary-soft); }
.msg { max-width: min(34rem, 85%); align-self: flex-start; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg-body { background: var(--primary-soft); border-radius: 12px; padding: .5rem .75rem; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.msg.mine .msg-body { background: var(--primary); color: var(--primary-ink); }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .5rem .3rem; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chat-list-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-head .btn { text-transform: none; letter-spacing: 0; white-space: nowrap; flex: none; }
.avatar.group { background: var(--primary-soft); color: var(--primary); }
.chat-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.chat-head-actions { margin-left: auto; gap: .4rem; }
.chat-switch-wrap { position: relative; }
.chat-switch { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem .4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; max-width: 22rem; }
.chat-switch b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-switch:hover { border-color: var(--primary); }
.chat-switch-menu { left: 0; right: auto; width: min(300px, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; }
.chat-switch-menu .menu-item { display: flex; justify-content: space-between; align-items: center; }
.chat-switch-menu .menu-item.active { background: var(--primary-soft); font-weight: 500; }
.group-people { display: flex; flex-direction: column; gap: .3rem; max-height: 18rem; overflow: auto; margin: .4rem 0 .8rem; }
.group-people .check .avatar, .plain-list .avatar { flex: none; }
.plain-list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-compose { display: flex; gap: .6rem; align-items: flex-end; margin-top: .6rem; }
.chat-compose textarea { flex: 1; resize: none; }
.chat-back { display: none; }

/* ---- dark chrome with a curved content panel (HubSpot style) ---- */
:root { --chrome: #1d2b3a; --chrome-2: #263648; --chrome-ink: #e6edf5; --chrome-muted: #9fb0c3; }
:root[data-theme="dark"] { --chrome: #0b121e; --chrome-2: #162133; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --chrome: #0b121e; --chrome-2: #162133; } }
.layout { background: var(--chrome); }
.sidenav { background: var(--chrome); border-right: 0; color: var(--chrome-ink); }
.brand { color: #fff; } .brand-text small { color: var(--chrome-muted); }
.navlink { color: var(--chrome-ink); transition: background .15s, color .15s; }
.navlink:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.navlink.active { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 3px 0 0 var(--navc, #2dd4bf); }
.navlink .ico { color: var(--navc, #9fb0c3); }
.nav-queue { --navc: #34d399; } .nav-homes { --navc: #60a5fa; } .nav-pipeline { --navc: #fbbf24; } .nav-summary { --navc: #a78bfa; }
.nav-overview { --navc: #f87171; } .nav-compliance { --navc: #f472b6; } .nav-chat { --navc: #2dd4bf; } .nav-settings { --navc: #fb923c; }
.content { background: var(--chrome); }
.topbar { background: var(--chrome); border-bottom: 0; color: var(--chrome-ink); }
.topbar-org { color: var(--chrome-muted); }
.avatar-btn { color: var(--chrome-ink); }
.avatar-btn:hover, .avatar-btn[aria-expanded=true] { background: rgba(255, 255, 255, .12); border-color: transparent; }
.avatar { background: linear-gradient(135deg, #2dd4bf, #60a5fa); color: #07202a; }
.panel { flex: 1; background: var(--bg); border-top-left-radius: 28px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.panel main { padding-top: 1.5rem; }
@media (max-width: 820px) { .panel { border-top-left-radius: 0; } .sidenav { border-bottom: 0; } }

/* colour in the content */
.tiles .tile:nth-child(5n+1) { border-top: 4px solid #34d399; } .tiles .tile:nth-child(5n+2) { border-top: 4px solid #60a5fa; }
.tiles .tile:nth-child(5n+3) { border-top: 4px solid #fbbf24; } .tiles .tile:nth-child(5n+4) { border-top: 4px solid #a78bfa; }
.tiles .tile:nth-child(5n) { border-top: 4px solid #f472b6; }
.page-head h1 { background: linear-gradient(90deg, var(--ink), var(--primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.card { transition: box-shadow .15s, transform .15s; }

/* hover colours on buttons */
.btn { transition: background .15s, color .15s, border-color .15s, transform .1s, filter .15s; }
.btn:not(.primary):not([disabled]):hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.btn.primary:not([disabled]):hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn.danger:not([disabled]):hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.seg:hover { background: var(--primary-soft); border-color: var(--primary); }
.chip:hover, .menu-item:hover, .subnav a:hover { background: var(--primary-soft); }

/* hover name tags */
[data-tip] { position: relative; }
/* The tip is for the eyes: "/ ''" keeps its text out of the button's accessible name (it read "Save Save" to a screen
   reader). Browsers without that syntax keep the first line. */
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); content: attr(data-tip) / ''; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); background: #111827; color: #fff; font: 600 .78rem/1.2 system-ui, sans-serif; padding: .4rem .65rem; border-radius: 8px; white-space: nowrap; z-index: 200; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.avatar-btn[data-tip]:hover::after { left: auto; right: 0; transform: none; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }

.menu { color: var(--ink); }
.plan-pill { background: linear-gradient(135deg, #34d399, #60a5fa); color: #06202a; font-weight: 600; padding: .3rem .9rem; border-radius: 999px; }

/* ---- Altis-style colours: deep green chrome, soft grey panel, lavender selections ---- */
:root { --bg: #f1f3f6; --surface: #ffffff; --surface-2: #f4f6f9; --line: #e5e8ee; --ink: #1b2430; --muted: #667282;
  --primary: #0f7a55; --primary-soft: #e0f3ea; --radius: 16px; --shadow: 0 1px 2px rgba(16, 40, 32, .04), 0 8px 24px rgba(16, 40, 32, .06);
  --chrome: #0b2a21; --chrome-2: #12382c; --chrome-ink: #dcebe4; --chrome-muted: #8db5a4; --sel: #dcd9ff; --sel-ink: #5b57f0; }
:root[data-theme="dark"] { --bg: #0d1713; --surface: #14211b; --surface-2: #1a2a23; --line: #25382f; --primary: #34d399; --primary-ink: #04201a; --primary-soft: #14352a;
  --chrome: #07140f; --chrome-2: #0f2119; --sel: #2d2b63; --sel-ink: #c9c6ff; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #0d1713; --surface: #14211b; --surface-2: #1a2a23; --line: #25382f; --primary: #34d399; --primary-ink: #04201a; --primary-soft: #14352a; --chrome: #07140f; --chrome-2: #0f2119; --sel: #2d2b63; --sel-ink: #c9c6ff; } }
.navlink { border-radius: 12px; } .navlink .ico { color: var(--chrome-muted) !important; }
.navlink:hover { background: rgba(255, 255, 255, .07); }
.navlink.active { background: var(--primary); color: #fff; box-shadow: none; } .navlink.active .ico { color: #fff !important; }
.nav-badge { background: rgba(255, 255, 255, .22); }
.avatar { background: linear-gradient(135deg, #34d399, #0f7a55); color: #04201a; }
.panel { border-radius: 28px 0 0 0; }
.tiles .tile:nth-child(n) { border-top: 1px solid var(--line); }
.page-head h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.plan-pill { background: var(--primary-soft); color: var(--primary); }
.card, .tile { border-color: transparent; }
.chip, .seg { background: #eceef2; border-color: transparent; border-radius: 999px; color: var(--ink); }
[data-theme="dark"] .chip, [data-theme="dark"] .seg { background: var(--surface-2); }
.chip:hover, .seg:hover { background: #e2e4ee; border-color: transparent; }
.chip[aria-pressed=true], .seg[aria-pressed=true] { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); font-weight: 500; }
.chip[aria-pressed=true]::before { content: "\2713\00a0"; }

/* pipeline board with drag and drop */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pipeline { grid-auto-columns: minmax(240px, 1fr); gap: 1rem; align-items: start; }
.col { background: #eceff3; border: 1px solid transparent; border-radius: 20px; padding: .8rem; min-height: 14rem; transition: background .15s, outline-color .15s; }
[data-theme="dark"] .col { background: var(--surface-2); }
.col h3 { align-items: center; justify-content: flex-start; gap: .5rem; margin-bottom: .7rem; }
.col h3 .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.count-pill { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 .6rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
.col.over { background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -4px; }
.col-empty { text-align: center; padding: 1.5rem .5rem; border: 1px dashed var(--line); border-radius: 12px; }
.pcard { background: var(--surface); border: 1px solid transparent; border-radius: 14px; padding: .7rem .8rem; margin-bottom: .6rem; box-shadow: var(--shadow); position: relative; }
.pcard.movable { cursor: grab; } .pcard.movable:active { cursor: grabbing; }
.pcard:hover { border-color: var(--primary); }
.pcard.dragging { opacity: .55; background: #fdeedd; border-color: #e8a35c; }
.pc-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .2rem; }
.pc-top a { font-weight: 500; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pc-top a:hover { color: var(--primary); }
.pc-foot { margin-top: .4rem; }
.pc-move { display: none; margin-top: .5rem; width: 100%; font-size: .8rem; min-height: 32px; }
.pcard:hover .pc-move, .pcard:focus-within .pc-move { display: block; }
@media (hover: none) { .pc-move { display: block; } }

/* client logos */
.avatar.cl { flex: none; overflow: hidden; }
.avatar.cl.has-logo { background: #fff; border: 1px solid var(--line); }
.avatar.cl img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-cell { display: flex; align-items: center; gap: .7rem; }
.cl-cell .avatar { width: 38px; height: 38px; }

/* pill-shaped buttons with a soft gradient on the main action */
.btn, .btn.small { border-radius: 999px; padding-left: 1.2rem; padding-right: 1.2rem; }
.btn.primary { background: linear-gradient(100deg, #0f7a55 0%, #12a07a 55%, #19b7a0 100%); border-color: transparent; box-shadow: 0 6px 16px rgba(15, 122, 85, .28); }
.btn.primary:not([disabled]):hover { box-shadow: 0 8px 22px rgba(15, 122, 85, .38); }
.btn.danger { border-radius: 999px; }
input[type=text], input[type=email], input[type=search], input[type=password], input[type=number], input[type=date], select { border-radius: 999px; padding-left: 1rem; }
textarea { border-radius: 18px; }
.toolbar input[type=search] { min-width: 17rem; flex: 2 1 17rem; }

/* collapsible menu */
.layout { transition: grid-template-columns .2s; }
.nav-toggle { margin-top: auto; align-self: flex-start; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 50%; color: var(--chrome-muted); cursor: pointer; }
.nav-toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.layout:not(.collapsed) .navlink:hover::after, .layout:not(.collapsed) .navlink:focus-visible::after { content: none; }
@media (min-width: 821px) {
  .layout.collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .collapsed .sidenav { overflow: visible; padding-left: .6rem; padding-right: .6rem; align-items: center; }
  .collapsed .brand-text { display: none; }
  /* Folded menu: the labels are hidden from the eyes only, so each link keeps its name for screen readers (v0.10.44;
     before, the hover tip was its only name). */
  .collapsed .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .collapsed .navlink { justify-content: center; padding: .55rem; width: 48px; position: relative; }
  .collapsed .sidenav nav { align-items: center; }
  .collapsed .navlink:hover::after, .collapsed .navlink:focus-visible::after { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
  .collapsed .nav-badge { position: absolute; top: 2px; right: 0; margin: 0; font-size: .65rem; padding: 0 .35rem; min-width: 1rem; }
}
@media (max-width: 820px) { .nav-toggle { display: none; } }
.sidenav { z-index: 30; }

/* cropper */
.crop { display: flex; flex-direction: column; gap: .9rem; }
.crop-drop { display: grid; place-items: center; gap: .8rem; min-height: 220px; border: 2px dashed var(--line); border-radius: 18px; background: var(--surface-2); color: var(--muted); padding: 1rem; }
.crop-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.crop-drop svg { width: 44px; height: 44px; }
.crop-area { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.crop-view { position: relative; width: 280px; height: 280px; overflow: hidden; border-radius: 12px; background: #e5e7eb; background-image: linear-gradient(45deg, #d1d5db 25%, transparent 25%, transparent 75%, #d1d5db 75%), linear-gradient(45deg, #d1d5db 25%, transparent 25%, transparent 75%, #d1d5db 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; cursor: grab; touch-action: none; user-select: none; }
.crop-view.grabbing { cursor: grabbing; }
.crop-view.circle { border-radius: 50%; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-view::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 0 0 3px rgba(0, 0, 0, .25); pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: .6rem; width: 280px; }
.crop-zoom input { flex: 1; accent-color: var(--primary); }
.avatar.xl { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar.has-photo { background: #fff; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-pic { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
.chip[aria-pressed=true] { cursor: pointer; }

/* rounded dropdowns (Chrome and Edge; other browsers keep their own list) */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .55rem 1rem; min-height: 44px; }
  select::picker-icon { color: var(--muted); }
  select::picker(select) { border: 1px solid var(--line); border-radius: 18px; padding: .4rem; background: var(--surface); color: var(--ink); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); margin-top: 6px; }
  select option { border-radius: 12px; padding: .55rem .9rem; }
  select option:hover { background: var(--primary-soft); }
  select option:checked { background: var(--sel); color: var(--sel-ink); font-weight: 500; }
  select option::checkmark { display: none; }
}

/* empty states */
:root { --a-o: #ff5c00; --a-p: #7a1459; --a-t: #0d4f45; }
:root[data-theme="dark"] { --a-p: #e58ac4; --a-t: #5ee0c0; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --a-p: #e58ac4; --a-t: #5ee0c0; } }
.art { width: 180px; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .a-o { stroke: var(--a-o); stroke-width: 2.5; } .art .a-p { stroke: var(--a-p); } .art .a-t { stroke: var(--a-t); }
.art .a-tf { fill: var(--a-t); stroke: none; } .art .a-of { fill: var(--a-o); stroke: var(--a-t); }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.5rem 1rem; }
.empty-state h3 { font-size: 1.15rem; margin: .4rem 0 0; } .empty-state p { margin: 0; max-width: 34ch; }
.empty-state .btn { margin-top: .6rem; }
.empty-state.sm { padding: .6rem; } .empty-state.sm .art { width: 96px; }
.chat-log .empty { margin: auto; }
.col .empty-state { border: 0; }

/* top bar: the menu already shows the company name and logo */
.layout.has-logo:not(.collapsed) .topbar-org { visibility: hidden; }

/* stage menu stays put while open */
.pipeline.menu-open .pcard:not(.menu-open):hover { border-color: transparent; }
.pipeline.menu-open .pcard:not(.menu-open):hover .pc-move { display: none; }
.pcard.menu-open .pc-move { display: block; }

/* checkboxes: white with a soft border, green when ticked (the browser's own box can turn dark) */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 1.3rem; height: 1.3rem; flex: none; margin: 0; background-color: #fff; border: 1.5px solid #8e99a8; border-radius: 7px; cursor: pointer; display: inline-grid; place-content: center; transition: background .12s, border-color .12s; }
input[type=checkbox]:hover { border-color: var(--primary); }
input[type=checkbox]:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); background-size: 80% 80%; background-position: center; background-repeat: no-repeat; }
input[type=checkbox]:indeterminate { background-color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] input[type=checkbox]:not(:checked) { background-color: transparent; border-color: #6b7b8f; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] input[type=checkbox]:not(:checked) { background-color: transparent; border-color: #6b7b8f; } }
input[type=checkbox]:disabled { opacity: .5; }

/* calendar */
.topbar-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.bell { position: relative; margin-left: 0; }
.bell-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 50%; color: var(--chrome-ink); cursor: pointer; }
.bell-btn:hover, .bell-btn[aria-expanded=true] { background: rgba(255, 255, 255, .12); }
.bell-badge { position: absolute; top: 2px; right: 0; margin: 0; background: #e5484d; font-size: .65rem; padding: 0 .35rem; }
.menu.notif { width: min(360px, calc(100vw - 1.5rem)); max-height: 70vh; overflow: auto; right: 0; }
.menu-head.between { justify-content: space-between; }
.notif-item { display: flex; flex-direction: column; gap: .1rem; padding: .7rem 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.notif-item:hover { background: var(--primary-soft); }
.notif-item.unread { background: var(--sel); } .notif-item.unread b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-right: .45rem; }
.cal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cal-side .card + .card { margin-top: 1rem; }
.cal-nav { display: flex; gap: .3rem; }
.cal-person { align-items: center; margin-bottom: .5rem; }
.cal-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.cal-dow { padding: .6rem; text-align: center; font-size: .8rem; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-cell { min-height: 112px; padding: .4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:nth-child(7n+7) { border-right: 0; }
.cal-cell:hover { background: var(--primary-soft); }
.cal-cell.other { background: var(--surface-2); color: var(--muted); }
.cal-num { align-self: flex-start; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-weight: 500; font-size: .85rem; }
.cal-cell.today .cal-num { background: var(--primary); color: #fff; }
.cal-ev { display: block; width: 100%; text-align: left; font: inherit; font-size: .78rem; border: 0; border-left: 3px solid; border-radius: 6px; padding: 2px 6px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-t { font-weight: 500; }
.day-list { display: flex; flex-direction: column; gap: .5rem; }
.day-ev { display: flex; flex-direction: column; text-align: left; font: inherit; color: var(--ink); background: var(--surface-2); border: 0; border-left: 4px solid var(--primary); border-radius: 10px; padding: .5rem .7rem; cursor: pointer; width: 100%; margin-bottom: .4rem; }
.day-ev:hover { background: var(--primary-soft); }
.share-people { max-height: 12rem; overflow: auto; padding-left: 1.6rem; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } .cal-cell { min-height: 84px; } .cal-ev .cal-t { display: none; } }

/* client business sits top-right, like HubSpot's account switcher */
.avatar-btn .org-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; flex: none; }
.avatar-btn .org-initial { display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 600; font-size: .8rem; }
.avatar-btn .avatar-name { font-weight: 500; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-btn .chev { font-size: .8rem; opacity: .8; }
@media (max-width: 700px) { .avatar-btn .avatar-name, .avatar-btn .chev { display: none; } }
.brand-logo { border-radius: 10px; }

/* typography polish */
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
/* (v0.10.55: sizes set once, at the top; this older line no longer overrides them) */
.navlink { font-weight: 500; } .navlink.active { font-weight: 500; }
.btn { letter-spacing: .005em; }
.small { font-size: .84rem; }

/* Chat: files, edit and delete */
.msg-content { display: flex; flex-direction: column; gap: .35rem; }
.msg.mine .msg-content { align-items: flex-end; }
.msg-files { display: flex; flex-wrap: wrap; gap: .4rem; }
.msg.mine .msg-files { justify-content: flex-end; }
.msg-img img { display: block; max-width: min(16rem, 100%); max-height: 14rem; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.msg-file { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; text-align: left; }
.msg-file:hover, .msg-file:focus-visible { border-color: var(--primary); }
.rx-pick .msg-act { font-size: .95rem; }
.msg.deleted .msg-body { background: none; border: 1px dashed var(--line); color: var(--muted); font-style: italic; }
.msg.mine.deleted .msg-body { color: var(--muted); }
.msg-edit { display: flex; flex-direction: column; gap: .4rem; width: min(34rem, 100%); }
.msg-edit textarea { resize: vertical; text-align: left; }
.attach-btn { font-size: 1.15rem; padding: .35rem .6rem; line-height: 1; }
.chat-pending { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip-file { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .3rem .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .85rem; max-width: 100%; overflow-wrap: anywhere; }
.chip-x { border: 0; background: none; font-size: 1.1rem; line-height: 1; padding: .1rem .35rem; border-radius: 50%; cursor: pointer; color: var(--muted); }
.chip-x:hover, .chip-x:focus-visible { background: var(--primary-soft); color: var(--ink); }
.push-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; margin-bottom: .6rem; }

/* Chat: the edit and delete buttons in the quick set follow the theme (they were dark on dark) */
.rx-pick button { color: var(--ink); }

/* ---- Phone layout: tabs along the bottom, like a phone app; one chat screen at a time ---- */
:root { --tb-h: 54px; --nav-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); }
@media (max-width: 820px) {
  .sidenav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 40; padding: .25rem .3rem calc(.25rem + var(--safe-b)); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -6px 18px rgba(0, 0, 0, .18); }
  .sidenav .brand { display: none; }
  .sidenav nav { gap: .1rem; justify-content: space-between; }
  .navlink { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: .3rem .1rem; font-size: .66rem; font-weight: 500; line-height: 1.1; border-radius: 12px; }
  .navlink .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .navlink .ico { width: 22px; height: 22px; }
  .navlink.active { background: rgba(255, 255, 255, .1); color: #fff; }
  .navlink.active .ico { color: var(--primary) !important; }
  .navlink .nav-badge { position: absolute; top: 3px; left: calc(50% + 4px); margin: 0; font-size: .62rem; padding: 0 .32rem; min-width: 1rem; }
  .topbar { min-height: var(--tb-h); padding: .3rem .6rem; padding-top: max(.3rem, env(safe-area-inset-top, 0px)); justify-content: space-between; gap: .5rem; }
  .gsearch { display: flex; flex: 1; width: auto; }
  .gsearch-panel { position: fixed; left: .5rem; right: .5rem; top: calc(var(--tb-h) + 4px); width: auto; max-height: calc(100dvh - var(--tb-h) - var(--nav-h) - 1rem); }
  .topbar .menu { position: fixed; left: .5rem; right: .5rem; top: calc(var(--tb-h) + 4px); width: auto; max-height: calc(100dvh - var(--tb-h) - var(--nav-h) - 1rem); overflow: auto; }
  .panel main { padding: .75rem .75rem calc(var(--nav-h) + var(--safe-b) + 1rem); }
  .page-head { margin-bottom: .75rem; }
  h1 { font-size: 1.35rem; }
  .card { padding: .85rem .9rem; }
  .toast { bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
  /* iPhone zooms into any box with text under 16px when you tap it */
  input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea { font-size: 16px; }
  .toolbar input[type=search] { min-width: 0; }
  .toolbar > select, .toolbar > input[type=search], .toolbar > input[type=text], .toolbar > .grow { max-width: none; }
  dialog.modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 2rem); padding: 1rem; }

  /* Chat: the list, or one conversation filling the screen above the tabs */
  .chat { display: block; height: auto; min-height: 0; }
  .chat.list-mode .chat-pane, .chat:not(.list-mode) .chat-list { display: none; }
  .chat.list-mode .chat-list { max-height: none; padding: .3rem; }
  .chat-list .chat-thread { padding: .65rem .5rem; }
  .page-head.chat-top:not(.list-mode) { display: none; }
  .panel main:has(> .chat:not(.list-mode)) { padding-bottom: calc(var(--nav-h) + var(--safe-b) + .5rem); }
  .chat:not(.list-mode) .chat-pane { height: calc(100dvh - var(--tb-h) - .75rem - var(--nav-h) - var(--safe-b) - .5rem); padding: .5rem; }
  .chat-back { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: -.25rem; border-radius: 50%; font-size: 2rem; line-height: 1; color: var(--ink); text-decoration: none; flex: none; }
  .chat-back:hover, .chat-back:focus-visible { background: var(--surface-2); }
  .chat-head { flex-wrap: nowrap; gap: .5rem; padding-bottom: .45rem; }
  .chat-head > .small.muted { display: none; }
  .chat-switch { max-width: 100%; min-width: 0; }
  .chat-switch-wrap { min-width: 0; }
  .chat-head-actions { flex-wrap: nowrap; }
  .chat-head-actions .btn { padding-left: .7rem; padding-right: .7rem; }
  .msg { max-width: 88%; }
  .rx-pick button { padding: .4rem; font-size: 1.15rem; }
  .chat-compose { gap: .35rem; margin-top: .45rem; }
  .chat-compose textarea { min-height: 44px; height: 44px; max-height: 160px; padding: .55rem .9rem; border-radius: 22px; }
  .chat-compose .btn.primary { padding-left: .95rem; padding-right: .95rem; }
  .push-banner { font-size: .85rem; padding: .55rem .7rem; }
}
/* The emoji and paperclip buttons are round icons, not pill buttons */
.chat-compose .emoji-btn, .chat-compose .attach-btn { width: 44px; padding: 0; flex: none; }
/* Touch screens have no hover: a tap must not leave a name tag stuck on screen */
@media (hover: none) { [data-tip]:hover::after { content: none; } }
.rx-pick .msg-act { display: inline-grid; place-items: center; color: var(--ink); }
.rx-pick .msg-act:hover, .rx-pick .msg-act:focus-visible { color: var(--primary); }
.rx-pick .msg-act .ico { width: 18px; height: 18px; }
.attach-btn .ico { width: 20px; height: 20px; }
/* Tables on a phone: one card per row, each value with its column name */
@media (max-width: 640px) {
  .table-wrap:has(table.stacked) { border: 0; background: none; overflow: visible; }
  table.stacked thead { display: none; }
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; }
  table.stacked tr { position: relative; background: var(--surface); border-radius: var(--radius); padding: .65rem .8rem; margin-bottom: .6rem; box-shadow: var(--shadow); }
  table.stacked td { padding: .25rem 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  table.stacked td::after { content: ""; display: block; clear: both; }
  table.stacked td::before { content: attr(data-label); float: left; margin-right: 1rem; color: var(--muted); font-size: .8rem; font-weight: 500; text-align: left; }
  table.stacked td:not([data-label])::before, table.stacked td[data-label=""]::before { content: none; }
  table.stacked td:empty { display: none; }
  table.stacked td:first-child:not(.selcol), table.stacked td.selcol + td { display: block; text-align: left; padding-bottom: .4rem; font-size: 1rem; }
  table.stacked td:first-child:not(.selcol)::before, table.stacked td.selcol + td::before { content: none; }
  table.stacked td.selcol { position: absolute; top: .7rem; right: .8rem; width: auto; padding: 0; }
  table.stacked td.selcol + td { padding-right: 2.2rem; }
}

/* ---- Design pass: one look on every page, on a computer and a phone ---- */
/* Time, phone and web address boxes look like every other box */
input[type=time], input[type=tel], input[type=url] { width: 100%; min-height: 44px; padding: .55rem .7rem .55rem 1rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
/* Page headings: title (and a short line under it) on the left, actions on the right */
.page-head > div:first-child { min-width: 0; }
.page-head p { margin: .25rem 0 0; }
.head-filters { margin: 0; flex: 0 1 auto; }
.head-filters > select { min-width: 12rem; }
/* Tables: every cell lines up in the middle of its row; the row under the pointer is shaded */
td { vertical-align: middle; }
.table-wrap tbody tr:hover td { background: var(--surface-2); }
.toolbar.filters input[type=search] { flex: 1 1 22rem; max-width: none; }
.toolbar.filters > label.row { min-height: 40px; padding: 0 .9rem; gap: .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
/* Figures: every row of tiles uses the same column width, and keeps its distance from the cards around it */
.tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.card + .tiles, .banner + .tiles { margin-top: 1rem; }
.tiles + .group-label { margin-top: .2rem; }
main > .group-label { margin-top: .2rem; }

/* Client page (v0.10.41): one header (name, status, phone), then three columns on a wide screen, as the big CRMs do:
   the client on the left, the work (calling, history) in the middle, what comes next on the right. Medium screens: the
   work, then next to it what comes next with the client below; phones: one column, the call card first (DOM order). */
.home-head { align-items: flex-start; }
.home-title { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.home-title > div { min-width: 0; }
.home-title h1 { margin-bottom: .4rem; overflow-wrap: anywhere; }
.home-meta { gap: .4rem; }
.home-title .phone { font-size: 1.3rem; margin: .5rem 0 0; }
.home-title .phone .ico { width: 20px; height: 20px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "main side" "main about"; gap: 1rem; align-items: start; }
.home-main { grid-area: main; } .home-side { grid-area: side; } .home-about { grid-area: about; }
.home-main > * + *, .home-side > * + *, .home-about > * + * { margin-top: 1rem; }
@media (min-width: 1360px) { .home-grid { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.6fr) minmax(260px, 1fr); grid-template-areas: "about main side"; } }
.hist-filters { margin: .2rem 0 .7rem; }
.glance { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.glance dt { color: var(--muted); font-size: .88rem; }
.glance dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.card.danger-zone { box-shadow: inset 0 0 0 1px var(--danger-soft), var(--shadow); }
@media (max-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "about"; } }

/* Pipeline: the stages with their counts above the board; columns as tall as the longest one */
.stage-strip { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 .9rem; padding: 2px; }
.stage-strip::-webkit-scrollbar { display: none; }
.stage-chip { display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 38px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; }
.stage-chip b { font-variant-numeric: tabular-nums; color: var(--muted); }
.stage-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.stage-chip:hover, .stage-chip:focus-visible { border-color: var(--primary); }
.pipeline { position: relative; align-items: stretch; grid-auto-columns: minmax(250px, 1fr); scrollbar-width: thin; padding-bottom: .75rem; }
.col h3 { font-size: .95rem; }
.pc-move { appearance: auto; min-height: 36px; padding: .3rem .6rem; border-radius: 10px; font-size: .85rem; }

@media (max-width: 820px) {
  .home-title .avatar.xl { width: 52px; height: 52px; font-size: 1.05rem; }
  .home-title .phone { font-size: 1.15rem; }
  .home-head > .btn { display: none; } /* the Clients tab is one tap away */
  /* Pipeline on a phone: one stage per screen; swipe sideways for the next, or tap a stage above */
  .pipeline { grid-auto-columns: 86%; gap: .6rem; scroll-snap-type: x mandatory; margin: 0 -.75rem; padding: 0 .75rem .75rem; scroll-padding: 0 .75rem; }
  .col { scroll-snap-align: start; min-height: 55vh; }
  .head-filters { width: 100%; }
  .head-filters > select { min-width: 0; }
  .toolbar.filters input[type=search] { flex-basis: 100%; }
  .toolbar.filters > label.row { flex: 1 1 100%; justify-content: flex-start; }
}
/* Calendar: the card that puts it into Google Calendar or Outlook; on a phone the month comes first */
.cal-connect .btn.block { margin-top: .4rem; }
.cal-more-ways { margin-top: .6rem; }
.cal-more-ways summary { font-weight: 500; margin: .3rem 0; }
.cal-add { gap: .5rem; }
@media (max-width: 900px) { .cal-side { order: 2; } .cal-side .card + .card { margin-top: .75rem; } .cal-layout { gap: .75rem; } }
/* Outcome and range buttons: their hover colour follows the theme (it was a light grey, unreadable in dark mode,
   and stuck on after a tap on touch screens), and "Match device" dark gets the same colours as Dark */
.chip:hover, .seg:hover { background: var(--primary-soft); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .chip, :root[data-theme="auto"] .seg { background: var(--surface-2); } :root[data-theme="auto"] .col { background: var(--surface-2); } }
@media (hover: none) { .chip:not([aria-pressed=true]):hover, .seg:not([aria-pressed=true]):hover { background: #eceef2; } [data-theme="dark"] .chip:not([aria-pressed=true]):hover, [data-theme="dark"] .seg:not([aria-pressed=true]):hover { background: var(--surface-2); } }
@media (hover: none) and (prefers-color-scheme: dark) { :root[data-theme="auto"] .chip:not([aria-pressed=true]):hover, :root[data-theme="auto"] .seg:not([aria-pressed=true]):hover { background: var(--surface-2); } }

/* ---- Phone redesign: bigger text, lighter header, compact client cards, folding filters ---- */
/* Figures carry a colour mark, on every screen */
.tile { position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--tile-c, var(--primary)); }
.tiles .tile:nth-child(4n+1) { --tile-c: #34d399; } .tiles .tile:nth-child(4n+2) { --tile-c: #60a5fa; }
.tiles .tile:nth-child(4n+3) { --tile-c: #fbbf24; } .tiles .tile:nth-child(4n+4) { --tile-c: #a78bfa; }
.tile.alert { --tile-c: var(--danger); }
.filter-toggle .nav-badge { margin-left: .4rem; background: var(--primary); color: var(--primary-ink); }

@media (max-width: 820px) {
  body { font-size: 15px; }
  h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
  h2 { font-size: 1.05rem; } h3 { font-size: 1rem; }
  .small { font-size: .88rem; }
  .card { border-radius: 20px; padding: 1rem; }
  .card + .card { margin-top: .75rem; }
  /* Page header: the title, then its buttons on one sliding line instead of piling up */
  .page-head { gap: .55rem; margin-bottom: .85rem; }
  /* Header buttons wrap onto a second line rather than slide out of sight. */
  .page-head > .row:last-child:not(:first-child) { flex-wrap: wrap; width: 100%; gap: .45rem; padding: 2px; }
  .page-head > .row:last-child:not(:first-child)::-webkit-scrollbar { display: none; }
  .page-head > .row .btn { flex: none; min-height: 40px; padding: .35rem 1rem; font-size: .92rem; }
  /* Figures: two per row, a big number */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tile { border-radius: 18px; padding: .85rem .9rem .85rem 1.1rem; }
  .tile b { font-size: 1.85rem; }
  .tile span { font-size: .85rem; }
  /* Clients: search, then a Filters button that opens the choices */
  .toolbar.filters { gap: .5rem; }
  .toolbar.filters input[type=search] { flex: 1 1 0; min-width: 0; }
  .filter-toggle { min-height: 44px; }
  .toolbar.filters .filter-panel > select { flex: 1 1 calc(50% - .25rem); max-width: none; }
  /* The list's page controls: just previous and next */
  .pager .pg-far, .pager .pg-size { display: none; }
  .pager .pagebox { width: 3.4rem !important; }
  .count { font-size: .95rem; }
  /* Client cards: name and phone, the place, then the badges on one line */
  table.stacked.homes-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; padding: .85rem .95rem; border-radius: 18px; }
  table.stacked.homes-table td { display: block; padding: 0; text-align: left; font-size: .9rem; }
  table.stacked.homes-table td::before { content: none; }
  table.stacked.homes-table td.c-client { flex: 1 1 calc(100% - 2.6rem); min-width: 0; font-size: 1rem; padding: 0; }
  table.stacked.homes-table td.c-client a { font-weight: 500; text-decoration: none; }
  table.stacked.homes-table td.selcol { position: static; order: 2; flex: none; }
  table.stacked.homes-table td.selcol + td { padding: 0; }
  table.stacked.homes-table td.c-badge { order: 4; flex: none; }
  table.stacked.homes-table td.c-client + td.c-badge { margin-left: calc(38px + .7rem); }
  table.stacked.homes-table td.c-badge:empty, table.stacked.homes-table td.c-calls { display: none; }
}
@media (max-width: 640px) { table.stacked tbody tr:hover td { background: none; } }
@media (max-width: 820px) {
  /* A lone last figure takes the whole row instead of leaving a gap */
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Queue: the four counts on one compact line, so the client to call comes up sooner */
  .queue-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .queue-tiles > .tile:last-child:nth-child(odd) { grid-column: auto; }
  .queue-tiles .tile { padding: .55rem .45rem .55rem .7rem; border-radius: 14px; }
  .queue-tiles .tile b { font-size: 1.3rem; }
  .queue-tiles .tile span { font-size: .7rem; line-height: 1.2; display: block; }
  .queue-tiles .tile::before { top: .5rem; bottom: .5rem; width: 3px; }
  main > .banner { font-size: .9rem; padding: .65rem .8rem; }
  /* The phone number is a big call button */
  .call-card .phone { display: flex; justify-content: center; width: 100%; padding: .7rem 1rem; margin: .6rem 0; border-radius: 16px; background: var(--primary); color: var(--primary-ink); font-size: 1.35rem; box-shadow: 0 6px 16px rgba(15, 122, 85, .25); }
  .call-card .call-name { font-size: 1.3rem; }
}
.pw-tools { align-items: flex-start; margin: -.4rem 0 .8rem; }

/* ---- Phone: tabs with names and a More tab; calendar month plus the day's list; Settings as a list ---- */
.nav-more, .more-sheet { display: none; }
.cal-dots { display: none; }
.settings-index { display: flex; flex-direction: column; padding: .35rem; }
.settings-index a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem .8rem; border-radius: 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.settings-index a:last-child { border-bottom: 0; }
.settings-index a:hover { background: var(--surface-2); }
.settings-index a > span:first-child { display: flex; flex-direction: column; gap: .1rem; }
.settings-index .chev { font-size: 1.6rem; line-height: 1; color: var(--muted); }
@media (max-width: 820px) {
  .sidenav nav > .nav-extra { display: none; }
  .nav-more { display: flex; border: 0; background: none; font-family: inherit; cursor: pointer; }
  .nav-more .ico { stroke-width: 3.2; }
  .more-sheet:not(.hidden) { display: flex; flex-direction: column; position: fixed; left: .6rem; right: .6rem; bottom: calc(var(--nav-h) + var(--safe-b) + .5rem); z-index: 45; padding: .4rem; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
  .more-link { display: flex; align-items: center; gap: .9rem; min-height: 48px; padding: .7rem 1rem; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 500; }
  .more-link .ico { width: 22px; height: 22px; color: var(--muted); }
  .more-link:hover { background: var(--surface-2); }
  .more-link.active { background: var(--primary-soft); color: var(--primary); }
  .more-link.active .ico { color: var(--primary); }
  /* Calendar: a compact month with a dot per event; the chosen day is listed under it */
  .cal-grid.compact { padding: .3rem .4rem .5rem; border-radius: 20px; }
  .cal-grid.compact .cal-dow { padding: .45rem 0; font-size: .75rem; border-bottom: 0; }
  .cal-grid.compact .cal-cell { min-height: 0; height: 52px; padding: .25rem 0; align-items: center; gap: 3px; border: 0; }
  .cal-grid.compact .cal-cell:hover, .cal-grid.compact .cal-cell.other { background: none; }
  .cal-grid.compact .cal-cell.other { opacity: .4; }
  .cal-grid.compact .cal-num { align-self: center; width: 34px; height: 34px; min-width: 0; font-size: .95rem; }
  .cal-grid.compact .cal-cell.picked .cal-num { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
  .cal-grid.compact .cal-cell.today .cal-num { background: var(--primary); color: #fff; box-shadow: none; }
  .cal-dots { display: flex; gap: 3px; height: 6px; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
  .cal-day { margin-top: .75rem; }
  .cal-day h2 { font-size: 1.1rem; margin: 0; }
  .cal-day .day-list { margin-top: .7rem; }
  .cal-day .day-ev { padding: .65rem .8rem; }
  /* Settings: the list of sections, then one section per screen with a way back */
  .settings > .subnav { display: none; }
  .settings-head { flex-wrap: nowrap; justify-content: flex-start; gap: .4rem; }
  .settings-head h1 { margin: 0; }
}

/* ---------- calendar: Week and Day views (v0.10.24) ---------- */
.cal-title { flex-wrap: wrap; gap: .6rem 1rem; }
.cal-views { flex-wrap: nowrap; }
.cal-views .seg { flex: 0 0 auto; padding: .35rem .85rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tg { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.tg-top { display: grid; border-bottom: 1px solid var(--line); }
.tg-corner { grid-row: span 1; }
.tg-head { background: none; border: 0; font: inherit; font-size: .85rem; font-weight: 500; color: var(--muted); padding: .6rem .3rem; text-align: center; cursor: pointer; border-left: 1px solid var(--line); }
.tg-head:hover { color: var(--ink); background: var(--surface-2); }
.tg-head.today { color: var(--primary); }
.tg-allday-label { align-self: center; text-align: right; padding: .3rem .4rem; font-size: .7rem; border-top: 1px solid var(--line); }
.tg-allday-cell { min-height: 30px; padding: 3px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.tg-scroll { max-height: calc(100vh - 260px); min-height: 360px; overflow-y: auto; }
.tg-body { display: grid; position: relative; }
.tg-hours { position: relative; }
.tg-hours span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tg-col { position: relative; border-left: 1px solid var(--line); cursor: copy;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line) 47px, var(--line) 48px); }
.tg-col.today { background-color: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.tg-ev { position: absolute; box-sizing: border-box; overflow: hidden; border-left: 3px solid; border-radius: 6px; padding: 2px 6px; font-size: .76rem; line-height: 1.25;
  color: var(--ink); cursor: pointer; display: flex; flex-direction: column; z-index: 1; }
.tg-ev b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tg-time { font-weight: 500; font-variant-numeric: tabular-nums; font-size: .7rem; }
.tg-who { color: var(--muted); font-size: .7rem; }
.tg-ev.movable { cursor: grab; touch-action: none; }
.tg-ev.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); opacity: .92; }
.tg-ev.busy b { font-style: italic; }
.tg-ev:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 2; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
@media (max-width: 820px) {
  .cal-title h1 { font-size: 1.25rem; width: 100%; }
  .tg-scroll { max-height: calc(100vh - 300px); }
  .tg-ev { font-size: .8rem; }
}
.tg-scroll .tg-top { position: sticky; top: 0; z-index: 4; background: var(--surface); }
.tg-ev.short { flex-direction: row; gap: .35rem; align-items: baseline; white-space: nowrap; }
.tg-ev.short .tg-who { display: none; }
@media (max-width: 820px) {
  .cal-title { gap: .5rem; }
  .cal-views .seg { padding: .3rem .6rem; }
  .cal-nav .btn.small { padding-left: .6rem; padding-right: .6rem; }
}

/* ---------- calendar: Year view, Week grid on phones (v0.10.25) ---------- */
.yr { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.yr-month { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: .8rem .8rem .9rem; }
.yr-month.now { box-shadow: inset 0 0 0 2px var(--primary-soft), var(--shadow); }
.yr-name { font-weight: 500; font-size: 1rem; margin-bottom: .4rem; }
.yr-name:hover { color: var(--primary); }
.yr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.yr-dow { font-size: .68rem; font-weight: 500; color: var(--muted); padding-bottom: 2px; }
.yr-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: inherit; font-size: .78rem; color: var(--ink); cursor: pointer; padding: 0; font-variant-numeric: tabular-nums; }
.yr-day:hover { background: var(--surface-2); }
.yr-day.has { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.yr-day.many { background: color-mix(in srgb, var(--primary) 35%, var(--primary-soft)); }
.yr-day.today { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.tg-head-phone { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tg-head-phone small { font-size: .68rem; font-weight: 500; }
.tg-head-phone b { font-size: .95rem; color: var(--ink); }
.tg-head.today .tg-head-phone b { color: var(--primary); }
@media (max-width: 820px) {
  .yr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .yr-month { padding: .55rem .5rem .6rem; border-radius: 14px; }
  .yr-day { font-size: .72rem; }
  .tg-week .tg-head { padding: .4rem 0; border-left-width: 0; }
  .tg-week .tg-ev { padding: 2px 3px; font-size: .68rem; border-left-width: 2px; }
  .tg-week .tg-ev .tg-time, .tg-week .tg-ev .tg-who { display: none; }
  .tg-week .tg-ev b { white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
  .tg-week .tg-allday-label { font-size: 0; }
  .tg-week .tg-allday-label::after { content: "All"; font-size: .62rem; }
  .tg-week .tg-allday-cell .cal-ev { font-size: .62rem; padding: 1px 3px; }
  .tg-hours span { right: 4px; font-size: .62rem; }
}

/* ---------- polish pass (v0.10.25) ---------- */
/* Same gap between every block of a page: two cards side by side, then a card or a notice under them. */
.grid2 + .card, .grid2 + .grid2, .card + .banner, .banner + .card, .tiles + .banner { margin-top: 1rem; }
/* File pickers look like the app's buttons instead of the browser's grey box. */
input[type=file] { font: inherit; font-size: .9rem; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; font-size: .85rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem 1rem; margin-right: .75rem; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--primary); background: var(--primary-soft); }
/* Chat: "Team & groups" is never cut by the New group button. */
.chat-list-head > span { white-space: normal; overflow: visible; }
/* A button waiting for a choice (Save & next) stays readable. */
.btn[disabled] { opacity: .62; }
/* Activity log: what happened first; on a phone each entry is a card with the time and person under it. */
.audit-table td:first-child { font-weight: 500; }
@media (max-width: 820px) {
  .audit-table.stacked td { text-align: left; }
  .audit-table.stacked td::before { min-width: 4.5rem; }
}
/* Primary buttons sit on the same green gradient in both themes: white text reads on it in dark mode too (was dark green, contrast 3.2). */
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.primary:hover { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #fff; } }

/* ---------- contacts (v0.10.26) ---------- */
.contacts { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.contact { padding: .65rem .8rem; border-radius: var(--radius); background: var(--surface-2); }
.contact.main { box-shadow: inset 3px 0 0 var(--primary); }
.contact-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.contact-ways { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; font-size: .92rem; }
.contact-ways a { display: inline-flex; align-items: center; gap: .3rem; overflow-wrap: anywhere; }
.contact-ways svg { width: 15px; height: 15px; }
.contact-actions { margin-top: .4rem; gap: .3rem; }
.contact-actions .btn { padding: .25rem .7rem; }
.danger-text { color: var(--danger); }
.ct-facts > div + div { margin-top: .15rem; }
.save-contact { margin-top: -.3rem; }

/* ---------- tasks (v0.10.27) ---------- */
.task-filters { justify-content: space-between; margin-bottom: 1rem; gap: .5rem; }
.task-filters .segs { flex-wrap: nowrap; }
.task-filters .seg { flex: 0 0 auto; }
.task-group h2 { font-size: 1.05rem; display: flex; align-items: baseline; gap: .35rem; }
.task-group.overdue h2 { color: var(--danger); }
.tasks { list-style: none; margin: .4rem 0 0; padding: 0; }
.task { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .2rem; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task > input[type=checkbox] { width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--primary); cursor: pointer; }
.task-main { min-width: 0; flex: 1; }
.task-title { font-weight: 500; overflow-wrap: anywhere; }
.task-title:hover { color: var(--primary); }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-top: .2rem; }
.task.high { box-shadow: inset 3px 0 0 var(--danger); padding-left: .6rem; }
.tasks-card .tasks { margin-top: .5rem; }
@media (max-width: 820px) { .task-filters { flex-direction: column; align-items: stretch; } .task { padding: .7rem 0; } .task.high { padding-left: .6rem; } }

/* ---------- goals and leaderboard (v0.10.28) ---------- */
.goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem 1.2rem; margin-top: .4rem; }
.goal-head b { font-size: .92rem; }
.goal-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: .35rem 0 .2rem; }
.goal-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f7a55, #19b7a0); transition: width .4s; }
.goal-bar.met { background: linear-gradient(90deg, #17703a, #22c55e); }
.goal.met .goal-head .mono { color: var(--ok); font-weight: 500; }
.lb-head { flex-wrap: wrap; gap: .6rem; }
.lb-head .segs { flex-wrap: nowrap; }
.lb-head .seg { flex: 0 0 auto; }
.lb-head select { width: auto; }
.lb-me { margin: .4rem 0 .6rem; font-weight: 500; }
table.lb th.num, table.lb td.num { text-align: right; }
table.lb .sorted { font-weight: 500; }
table.lb tr.me td { background: var(--primary-soft); }
.lb-person { gap: .5rem; flex-wrap: nowrap; }
.rank { width: 2.5rem; }
.medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .78rem; font-weight: 600; color: #3b2f00; }
.medal.m1 { background: #fcd34d; } .medal.m2 { background: #d1d5db; color: #1f2937; } .medal.m3 { background: #f2b48a; color: #4a2410; }
.goals-form th { text-align: left; font-weight: 500; padding-right: .8rem; white-space: nowrap; }
.goals-form td { padding: .25rem .3rem; }
.goals-form input { max-width: 9rem; }
@media (max-width: 820px) {
  .lb-head > .row { width: 100%; }
  table.lb.stacked td.rank { display: inline-block; width: auto; margin-right: .4rem; }
}
.lb-person > span:last-child { white-space: nowrap; }

/* ---------- automations (v0.10.29) ---------- */
.auto-examples { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: .4rem; }
.automation h3 { margin: 0; }
.automation.off { opacity: .7; }
.automation p { margin: .4rem 0; }
.auto-actions { align-items: center; gap: .4rem; }
.auto-runs { margin: .4rem 0 0; padding-left: 1.1rem; }
.auto-runs li + li { margin-top: .2rem; }
.switch { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; cursor: pointer; }
.switch input { width: 34px; height: 20px; appearance: none; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.auto-part { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .9rem .8rem; margin: 0; }
.auto-part legend { font-weight: 500; padding: 0 .3rem; }
.auto-part > * + * { margin-top: .6rem; }

/* ---------- custom fields (v0.10.30) ---------- */
.field-defs { list-style: none; margin: 0; padding: 0; }
.field-def { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; }
.field-def + .field-def { border-top: 1px solid var(--line); }
.field-def .badge { margin-left: .2rem; }
.field-actions { gap: .25rem; }
@media (max-width: 560px) {
  .field-def { flex-wrap: wrap; }
  .field-actions { width: 100%; justify-content: flex-end; }
}
.choice-list { display: grid; gap: .35rem; margin-bottom: .4rem; }
.choice-row { flex-wrap: nowrap; gap: .35rem; }
.choice-row input { flex: 1; min-width: 0; }
.custom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .8rem; margin-bottom: .6rem; }
.custom-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .4rem 0 0; }
.custom-list dt { font-weight: 500; }
.custom-list dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- email replies (v0.10.31) ---------- */
.history li.reply { border-left: 3px solid var(--primary); padding-left: .7rem; background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; margin: .35rem 0; }
.history li.reply + li { border-top: 0; }
.reply-body { margin-top: .3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-more summary { cursor: pointer; margin-top: .3rem; font-weight: 400; white-space: normal; }
.reply-more summary .more { color: var(--primary); font-weight: 500; }
.reply-more[open] summary { display: none; }
.replies-box { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin: .4rem 0 .8rem; }
.replies-box p { margin: 0 0 .5rem; }
.replies-box .row { align-items: center; gap: .6rem; }
.error-text { color: var(--danger); }

/* ---------- calling in a row (v0.10.32) ---------- */
.call-timer { align-items: center; gap: .6rem; margin: .5rem 0; }
.call-clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.1rem; min-width: 3.5rem; }
.call-clock.running { color: var(--ok); }
.chip kbd { display: inline-block; min-width: 1.15rem; margin-right: .35rem; padding: 0 .25rem; border: 1px solid var(--line); border-radius: 4px; font: 600 .72rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; color: var(--muted); background: var(--surface); }
.chip[aria-pressed="true"] kbd { color: inherit; border-color: currentColor; background: transparent; }
.fu-presets { margin: -.2rem 0 .3rem; }
.fu-presets .chip { font-size: .8rem; padding: .2rem .6rem; }
.session-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: 0 0 .8rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .92rem; }
.session-bar .btn { margin-left: auto; }
.keys-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; align-items: center; margin: .6rem 0; }
.keys-list dd { margin: 0; }
.keys-list kbd { display: inline-block; min-width: 1.6rem; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.rest-row { align-items: center; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.rest-row input { width: 4.5rem; }
.script-list { display: grid; gap: .8rem; margin: .6rem 0; }
.script-row { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 820px) { .keys-hint { display: none; } }

/* ---------- call statistics (v0.10.33) ---------- */
.stats-table th, .stats-table td { white-space: nowrap; }
.stats-table td.mono, .stats-table th:not(:first-child) { text-align: right; }
.stats-table tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
.heat { border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
.heat th { font-weight: 500; color: var(--muted); padding: 0 .2rem; text-align: center; }
.heat th[scope="row"] { text-align: left; padding-right: .4rem; }
.heat td { min-width: 2.4rem; height: 1.9rem; text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--primary) var(--heat, 0%), var(--surface-2)); color: var(--ink); }
.heat td.few { color: var(--muted); }
.heat td.hot { color: var(--primary-ink); font-weight: 500; }
.heat td.empty { background: transparent; border: 1px dashed var(--line); }
@media (max-width: 820px) { .stats-table { font-size: .85rem; } }
.heat th, .heat td { padding: 0 .15rem; border-top: 0; text-transform: none; letter-spacing: 0; }
.heat td { height: 1.9rem; line-height: 1.9rem; }
.heat thead th { height: 1.4rem; }

/* ---------- my day (v0.10.34) ---------- */
.md-card h2 { display: flex; align-items: center; gap: .5rem; }
.md-count { font-size: .8rem; font-weight: 500; min-width: 1.6rem; padding: .05rem .5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); text-align: center; }
.md-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.md-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.md-list li:first-child { border-top: 0; }
.md-list li > div { min-width: 0; }
.md-reply .wrap { margin-top: .2rem; }
.md-actions { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: .6rem; }

/* ---------- saved views (v0.10.35) ---------- */
.views-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: 0 0 .7rem; }
.views-chips { flex-wrap: wrap; }
.view-team { margin-left: .35rem; font-size: .7rem; font-weight: 500; padding: 0 .35rem; border-radius: 999px; background: var(--info-soft); color: var(--info); }
.views-actions { gap: .4rem; }
.view-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* ---------- live pipeline (v0.10.36) ---------- */
.pc-next { margin-top: .3rem; color: var(--muted); }
.pc-next.overdue { color: var(--danger); font-weight: 500; }
.pcard.attention { border-left: 3px solid var(--warn); }
.pc-why { margin-top: .25rem; font-style: italic; }
.col-attention { display: block; margin: -.2rem 0 .5rem; color: var(--warn); font-weight: 500; }
.pipeline-insights { margin-top: 1rem; }
.funnel td.mono { text-align: right; white-space: nowrap; }

/* ---------- duplicates (v0.10.37) ---------- */
.dup-group.sure { border-left: 3px solid var(--danger); }
.dup-reasons { gap: .35rem; margin-bottom: .5rem; }
.dup-group .row.end { margin-top: .6rem; gap: .5rem; }
.dup-banner ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.dup-banner li + li { margin-top: .3rem; }
.merge-list { margin: .4rem 0; padding-left: 1.1rem; }
/* Radio buttons follow the theme: drawn in the page's dark scheme, an unticked one looked ticked (v0.10.37, then every radio in v0.10.38). */
input[type="radio"] { color-scheme: light; cursor: pointer; }
.dup-group input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
:root[data-theme="dark"] input[type="radio"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type="radio"] { color-scheme: dark; } }

/* Guided import (v0.10.38): where each column goes, then what the import will do. */
.map-table select { min-width: 12rem; max-width: 100%; }
.map-table tr.unused td:first-child, .map-table tr.unused td:nth-child(2) { color: var(--muted); }
.plan-table caption { text-align: left; padding: .2rem 0 .4rem; caption-side: top; }
.imports-table td.wrap { max-width: 16rem; word-break: break-word; }

/* Command palette (v0.10.39): Ctrl+K / Cmd+K from any page. Its rows reuse the topbar search's look. */
.gsearch-kbd { position: absolute; right: .55rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font: 600 .72rem/1.4 inherit; cursor: pointer; }
.gsearch-kbd:hover { color: var(--ink); border-color: var(--primary); }
.gsearch .gsearch-input { padding-right: 4.2rem; }
dialog.cmdk { margin: 12vh auto auto; padding: 0; width: min(620px, calc(100vw - 2rem)); max-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
dialog.cmdk[open] { display: flex; flex-direction: column; }
dialog.cmdk::backdrop { background: rgba(0, 0, 0, .45); }
.cmdk-top { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-top .ico { width: 18px; height: 18px; flex: none; }
.cmdk-top kbd, .cmdk-foot kbd { padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: 600 .72rem/1.4 inherit; color: var(--muted); }
.cmdk .cmdk-input { flex: 1; min-width: 0; border: 0; padding: .3rem 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; }
.cmdk .cmdk-input:focus { outline: none; }
.cmdk-list { flex: 1; overflow: auto; }
.cmdk-item { cursor: pointer; }
.cmdk-empty { padding: 1.2rem 1rem; text-align: center; }
.cmdk-foot { margin: 0; padding: .5rem 1rem; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 760px) { dialog.cmdk { margin-top: .5rem; max-height: calc(100dvh - 1rem); width: calc(100vw - 1rem); } .cmdk-foot { display: none; } }
/* Phones and tablets have no Ctrl key: no shortcut chip on the search box. */
@media (hover: none), (max-width: 760px) { .gsearch-kbd { display: none; } .gsearch .gsearch-input { padding-right: .7rem; } }

/* Sequences (v0.10.40): the steps of each, and the card on a client's page. */
.seq-line { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.seq-line li { display: flex; gap: .6rem; align-items: flex-start; }
.seq.off { opacity: .7; }
.seq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.seq-step { padding: .7rem .8rem; }
.seq-clients { margin: .4rem 0 0; padding-left: 1.1rem; }
.seq-clients li + li { margin-top: .25rem; }
.seq-card p { margin: .3rem 0; }
/* The left column is narrow on a wide screen: its fields one under the other. */
@media (min-width: 1360px) { .home-about .two { grid-template-columns: minmax(0, 1fr); } }

/* Lead score (v0.10.42): a badge in the client list and on the client's page, and its reasons in At a glance. */
.badge.score { font-variant-numeric: tabular-nums; }
.score-box { margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 1px solid var(--line); }
.score-why { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .2rem; }
.score-why .pos { color: var(--ok, #0f8a5f); font-weight: 500; }
.score-why .neg { color: var(--danger, #c0392b); font-weight: 500; }
.sort-sel { min-width: 11rem; width: auto; }

/* Phone (v0.10.43): calls waiting for a signal, and "back from your call". */
.outbox-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h, 0px) + .75rem); z-index: 40; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  max-width: calc(100vw - 1.5rem); padding: .55rem .8rem; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); box-shadow: var(--shadow); font-size: .9rem; }
.back-banner { margin: 0 0 .7rem; }
.banner.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.toast.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

/* Design finishing touches (v0.10.44): Undo in a message, filters as chips, the compact client list, getting started. */
.toast-undo { margin-left: .4rem; padding: .15rem .55rem; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }
.toast.show { pointer-events: auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .7rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .35rem .25rem .7rem; border-radius: 999px; border: 1px solid var(--primary); background: var(--primary-soft); color: var(--ink); font-size: .86rem; }
.filter-chip button { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; }
.filter-chip button:hover, .filter-chip button:focus-visible { background: var(--surface); }
.homes-table.compact td { padding-top: .3rem; padding-bottom: .3rem; }
.homes-table.compact .avatar, .homes-table.compact .cl-cell .muted { display: none; }
.gs-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.gs-list li { display: flex; gap: .6rem; align-items: flex-start; }
.gs-list .gs-tick { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--line); display: inline-grid; place-items: center; font-size: .8rem; margin-top: .1rem; }
.gs-list li.done .gs-tick { background: var(--primary); border-color: var(--primary); color: #fff; }
.gs-list li.done a { color: var(--muted); text-decoration: line-through; }
.gs-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: .3rem 0 .2rem; }
.gs-bar > span { display: block; height: 100%; background: var(--primary); }
.btn[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--ink); }

/* Settings > Backups (v0.10.45) */
.backup-state { padding: .6rem .8rem; border-radius: 8px; margin: .4rem 0 .8rem; }
.backup-state.ok { background: var(--ok-soft); color: var(--ok); }
.backup-state.bad { background: var(--danger-soft); color: var(--danger); }
.backup-facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .4rem 0 .8rem; }
.backup-facts dt { color: var(--muted); }
.backup-facts dd { margin: 0; }

/* Sign-in page: link to the privacy notice (v0.10.47) */
.auth-privacy { text-align: center; margin: .8rem 0 0; font-size: .9rem; }
.auth-privacy a { color: var(--muted); }

/* A new version is ready (v0.10.48): a bar above everything, with a Reload button */
.update-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: .8rem; max-width: calc(100vw - 32px); padding: .55rem .6rem .55rem 1rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
@media (min-width: 900px) { .update-bar { bottom: 24px; } }
.backup-download { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.backup-download p { margin: .5rem 0 0; }

/* Sign in with a code (v0.10.51) */
.auth-lead { margin: -.2rem 0 1rem; font-size: .92rem; }
.auth-switch { text-align: center; margin: .9rem 0 0; }
.code-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.invite-note { margin: .2rem 0 .8rem; }

/* Create an account (v0.10.52): the field only robots fill, kept off screen */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Visual language (v0.10.55), the rest. Browsers make <b>, <strong> and <th> bolder than our three weights. */
b, strong { font-weight: 600; }
th { font-weight: 500; }
/* On a computer, controls are compact (32-34 px); on a phone they keep their touch size (44 px). */
@media (min-width: 821px) {
  .btn { min-height: 34px; padding: .3rem .8rem; border-radius: 8px; }
  .btn.small { min-height: 28px; padding: .15rem .6rem; font-size: .8125rem; }
  .chip { min-height: 32px; padding: .25rem .7rem; font-size: .8125rem; border-width: 1px; }
  .stage-chip { min-height: 30px; padding: .2rem .7rem; }
  input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=number], input[type=tel], input[type=time], select, textarea { font-size: .875rem; }
  .card { padding: .9rem 1rem; }
  .tiles { gap: .5rem; }
  .tile { padding: .6rem .8rem; }
}
/* On a phone every field stays at 16 px: below that, iPhones zoom the page when a field is tapped. */
@media (max-width: 820px) { input, select, textarea { font-size: 16px !important; } }

/* Light side bar and top bar (v0.10.55): white, a fine line between them and the page; the logo is the only dark mark. */
:root { --chrome: #ffffff; --chrome-2: #f1f5f3; --chrome-ink: #3d4a44; --chrome-muted: #7b8782; }
:root[data-theme="dark"] { --chrome: #101a15; --chrome-2: #18241e; --chrome-ink: #d3e0da; --chrome-muted: #8ba196; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --chrome: #101a15; --chrome-2: #18241e; --chrome-ink: #d3e0da; --chrome-muted: #8ba196; } }
.sidenav { border-right: 1px solid var(--line); }
.topbar { border-bottom: 1px solid var(--line); }
.panel { border-top-left-radius: 0; box-shadow: none; }
.brand { color: var(--ink); }
.navlink { color: var(--chrome-ink); font-weight: 500; }
.navlink:hover { background: var(--chrome-2); color: var(--ink); }
.navlink.active { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
.navlink.active .ico { color: var(--primary) !important; }
.nav-badge { background: var(--primary-soft); color: var(--primary); }
.navlink.active .nav-badge { background: var(--surface); }
/* Unread notifications and messages stay red: they call for attention; counts (tasks, filters) stay soft. */
.bell-badge, #chat-badge { background: #e5484d; color: #fff; }
.avatar-btn:hover, .avatar-btn[aria-expanded=true] { background: var(--chrome-2); }
.nav-toggle, .bell-btn { color: var(--chrome-muted); }
.nav-toggle:hover, .bell-btn:hover { background: var(--chrome-2); color: var(--ink); }

/* Clients (v0.10.56, redesign step 2): one green button and a More menu; the filter choices fold behind
   "Filters" on every screen; the list and, from 1280 px, a preview of the picked client; a floating selection bar. */
.more { position: relative; }
.more-btn .chev { font-size: .7rem; color: var(--muted); }
.more-menu { width: 210px; padding: .3rem; }
.more-menu .menu-item { min-height: 36px; padding: .45rem .7rem; border: 0; border-radius: 7px; }
.more-menu .menu-item:last-child.danger-text { margin-top: .25rem; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; }
.filter-toggle { display: inline-flex; flex: none; align-items: center; }
.filter-toggle[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.filter-panel { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1 1 100%; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toolbar.filters:not(.open) > .filter-panel { display: none; }
.filter-panel > select { width: auto; flex: 0 1 190px; min-height: 36px; }
.filter-panel > label.row { min-height: 36px; padding: 0 .8rem; gap: .5rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; }
.views-chips .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.views-chips .chip[aria-pressed="true"] .view-team { color: inherit; opacity: .75; }
.homes-table tbody tr { cursor: default; }
.homes-table tbody tr.picked td { background: var(--primary-soft); }
.homes-table tbody tr.picked td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.home-preview { display: none; }
@media (min-width: 1280px) {
  .homes-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
  .home-preview { display: grid; gap: .9rem; position: sticky; top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .875rem; }
  .homes-table tbody tr { cursor: pointer; }
  /* Beside the preview, a client stays on one line: name, then town and region, cut with an ellipsis. */
  .homes-split .homes-table td.c-client { width: 99%; max-width: 0; min-width: 12rem; }
  .homes-split .homes-table .c-calls { display: none; } /* the preview gives the calls */
  .homes-split .cl-cell > div { min-width: 0; }
  .homes-split .cl-cell a, .homes-split .cl-cell .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.pv-empty p { margin: .2rem 0; }
.home-preview kbd { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; margin-left: .3rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 500 .72rem/1.4 inherit; text-align: center; color: var(--muted); background: var(--surface); }
.pv-head { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.pv-head > div { min-width: 0; }
.pv-name { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pv-phone { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--primary); text-decoration: none; letter-spacing: .01em; }
.pv-acts { display: flex; gap: .4rem; }
.pv-acts .btn { flex: 1; justify-content: center; }
.pv-acts .btn.primary kbd { color: inherit; background: transparent; border-color: currentColor; }
.pv-badges { gap: .3rem; flex-wrap: wrap; }
.pv-label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.pv-note { margin-top: .15rem; overflow-wrap: anywhere; }
/* The selection bar floats at the bottom of the screen on a computer, dark, and only while rows are ticked. */
@media (min-width: 821px) {
  .selbar:not(.hidden) { position: fixed; z-index: 25; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 2rem); padding: .35rem .4rem .35rem 1rem; border: 0; border-radius: 12px; background: #1b2420; color: #eef3f0; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5); }
  .selbar .btn { background: #2b3732; border-color: #2b3732; color: #eef3f0; }
  .selbar .btn.ghost { background: transparent; border-color: transparent; }
  .selbar .btn.danger { background: #3a2224; border-color: #3a2224; color: #ffb4b4; }
  .homes-split { padding-bottom: 3.5rem; }
}

/* Queue in session mode (v0.10.57, redesign step 3). The counts are a strip in the head; the session is a dark band
   (a live dot, calls, conversations, time on the phone, pace); one call card; the next clients stacked and fading. */
.queue-head .queue-tiles { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; grid-template-columns: none; flex: 1 1 auto; }
.queue-head .queue-tiles .tile { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: .35rem; padding: .25rem .7rem; min-height: 0; border-radius: 999px; box-shadow: none; }
.queue-head .queue-tiles .tile::before { display: none; }
.queue-head .queue-tiles .tile b { font-size: .95rem; }
.queue-head .queue-tiles .tile span { font-size: .8rem; color: var(--muted); }
.queue-head .queue-tiles .tile.alert b { color: var(--danger); }
.session-bar { background: #0b3d2e; color: #d9efe5; border: 0; border-radius: 12px; padding: .6rem 1rem; gap: .4rem 1.1rem; }
.session-bar b { color: #fff; font-weight: 500; }
.session-bar .live { width: 8px; height: 8px; border-radius: 50%; background: #45d49b; box-shadow: 0 0 0 4px rgba(69, 212, 155, .22); }
.session-bar .ses-title { margin-right: .3rem; }
.session-bar .btn { background: transparent; color: #fff; border-color: #2f6b56; }
.session-card { display: grid; gap: .9rem; }
.session-card .call-hero { display: flex; align-items: center; gap: .8rem; }
.session-card .call-who { flex: 1; min-width: 0; }
.session-card .call-name { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.session-card .full-record { align-self: flex-start; }
.session-card .call-badges { gap: .3rem; }
.session-card .call-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.session-card .phone { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-radius: 11px; background: var(--primary); color: var(--primary-ink); font-size: 1.2rem; font-variant-numeric: tabular-nums; text-decoration: none; letter-spacing: .01em; }
.session-card .phone kbd { font: 500 .7rem/1.4 inherit; padding: 0 .35rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; color: inherit; opacity: .85; }
.session-card .call-timer { margin: 0; }
.brief { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .35rem .9rem; margin: 0; padding: .8rem 1rem; border-radius: 10px; background: var(--surface-2); font-size: .875rem; }
.brief dt { color: var(--muted); }
.brief dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.brief-note { margin-top: .15rem; }
.outcome-keys { display: grid; gap: .6rem; }
.session-card .outcome-keys .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .4rem; }
.session-card .outcome-keys .chip { justify-content: flex-start; min-height: 40px; border-radius: 9px; border-bottom-width: 3px; text-align: left; line-height: 1.25; }
.session-card .outcome-keys .g-spoke .chip[aria-keyshortcuts] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.session-card .outcome-keys .chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.call-more > summary { cursor: pointer; color: var(--muted); font-size: .875rem; min-height: 32px; display: flex; align-items: center; }
.call-more[open] > summary { margin-bottom: .5rem; }
.upnext-wrap { padding: .2rem .2rem 0; }
.upnext-wrap h3 { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.upnext-wrap .upnext li { display: grid; gap: .1rem; justify-items: start; padding: .6rem .75rem; margin-bottom: .45rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.upnext-wrap .upnext li a { font-weight: 500; color: var(--ink); text-decoration: none; }
.upnext-wrap .upnext li:nth-child(n+3) { opacity: .8; }
.upnext-wrap .upnext li:nth-child(n+5) { opacity: .55; }
.script-drawer > summary { cursor: pointer; font-weight: 500; min-height: 36px; display: flex; align-items: center; }
.side > .script-drawer { margin-top: .6rem; }
@media (max-width: 820px) {
  .queue-head .queue-tiles { flex-wrap: nowrap; width: 100%; }
  .queue-head .queue-tiles .tile { flex: 1 1 0; flex-direction: column-reverse; align-items: flex-start; gap: 0; border-radius: 12px; padding: .4rem .55rem; }
  .session-card .phone { display: flex; justify-content: center; width: 100%; min-height: 48px; }
  .brief { grid-template-columns: 1fr; gap: .1rem; }
  .brief dd { margin-bottom: .4rem; }
  .session-card .outcome-keys .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Client page (v0.10.58, redesign step 4). Two columns at every width above a tablet: the work, then a rail with
   what comes next and the client. The stage is a timeline under the name; the history is a thread by day. */
@media (min-width: 1360px) { .home-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); grid-template-areas: "main side" "main about"; } }
.home-where { margin: -.15rem 0 .4rem; }
.home-actions { gap: .4rem; align-items: center; }
.home-title .phone { display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .4rem .9rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 1.1rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.stage-steps { display: flex; gap: .6rem; align-items: stretch; margin: 0 0 1.1rem; }
.steps-line { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; flex: 1; min-width: 0; }
.stage-step { display: block; padding: .45rem .1rem 0; border: 0; border-top: 3px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: .8125rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.stage-step { cursor: pointer; }
button.stage-step:hover { color: var(--ink); border-top-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.stage-step.done { border-top-color: var(--primary); color: var(--primary); }
.stage-step.current { border-top-color: #7c5cf0; color: var(--ink); font-weight: 500; }
.stage-step.lost { flex: none; padding-left: .7rem; padding-right: .7rem; border-top-color: transparent; border-radius: 0 0 8px 8px; }
.stage-step.lost.current { border-top-color: var(--danger); color: var(--danger); }
.stage-steps.is-closed .stage-step { opacity: .55; }
.stage-steps.is-closed .stage-step.lost { opacity: 1; }
.details-list { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .35rem .8rem; margin: .4rem 0 0; font-size: .875rem; }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.details-form { margin-top: .5rem; }
.history.thread { position: relative; }
.history.thread li { position: relative; padding-left: 1.4rem; }
.history.thread li::after { content: ""; position: absolute; left: .2rem; top: .95rem; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--surface); }
.history.thread li.k-call::after { background: var(--primary); }
.history.thread li.k-email::after { background: #2f7bd9; }
.history.thread li.k-note::after { background: #e39b16; }
.history.thread li.k-change::after { background: #7c5cf0; }
.history.thread li.day-start::before { content: attr(data-day); display: block; margin: .3rem 0 .35rem -1.4rem; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.history.thread li.day-start::after { top: 2.35rem; }
@media (max-width: 820px) {
  .stage-steps { flex-direction: column; gap: .3rem; }
  .steps-line { overflow-x: auto; grid-auto-columns: minmax(5.5rem, 1fr); scrollbar-width: none; }
  .steps-line::-webkit-scrollbar { display: none; }
  .home-actions .back-link { display: none; }
  .details-list { grid-template-columns: 1fr; gap: .05rem; }
  .details-list dd { margin-bottom: .4rem; }
}

/* Pipeline Overview and the Hot / Warm / Cold board */
.deal-table { width: 100%; }
.deal-table tr.picked td { background: var(--primary-soft); }
.deal-table .overdue, .pcard .overdue { color: var(--danger); }
a.seg { text-decoration: none; text-align: center; }
a.seg[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); }
.temp-board { grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); }
.temp-tray { min-height: 0; margin-bottom: 1rem; }
.temp-tray-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.temp-tray-cards .pcard { margin-bottom: 0; }

/* Pipeline dropdown in the side menu */
.nav-row { position: relative; display: flex; align-items: center; }
.nav-row .navlink { flex: 1; min-width: 0; padding-right: 2.2rem; }
.nav-caret { position: absolute; right: .3rem; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.nav-caret:hover { background: var(--surface-2); }
.nav-caret .ico { transform: rotate(-90deg); }
.nav-group.open .navlink:not(.active) { background: var(--surface-2); }
.nav-sub { display: none; position: fixed; z-index: 60; flex-direction: column; gap: .15rem; width: 230px; padding: .6rem; background: #2f3238; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.nav-group.open .nav-sub { display: flex; }
.nav-sub a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #f4f5f7; text-decoration: none; padding: .55rem .65rem; border-radius: 9px; }
.nav-sub a:hover { background: rgba(255, 255, 255, .1); }
.nav-sub a.active { background: rgba(255, 255, 255, .18); color: #fff; }
.nav-sub .nav-badge { background: rgba(255, 255, 255, .2); color: #fff; }
.collapsed .nav-caret { display: none; }
.collapsed .nav-row .navlink { padding-right: .55rem; }
@media (max-width: 820px) { .nav-group, .nav-row { display: contents; } .nav-caret, .nav-sub { display: none !important; } .nav-row .navlink { padding-right: .1rem; } }
/* Read receipts */
.msg-tick { border: 0; background: none; padding: 0 .2rem; margin-left: .3rem; font: inherit; color: var(--muted); cursor: pointer; letter-spacing: -.15em; }
.msg-tick.read { color: var(--info); }
.read-info ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.read-info h3 { margin: 0 0 .4rem; }
.nav-row .navlink .nav-badge { margin-right: .2rem; }

/* Pipeline: New folded on a computer (v0.10.64, redesign step 5) */
.pipeline.new-folded { grid-template-columns: 200px; }
.col.folded { min-height: 0; }
.fold-body { display: grid; gap: .5rem; justify-items: start; }
.fold-body p { margin: 0; }
.col h3 .col-fold { margin-left: auto; min-height: 26px; padding: 0 .5rem; font-size: .75rem; }

/* My day as a plan of the day (v0.10.65, redesign step 5). The figures as a strip; a plan from 8 h to 20 h (calls,
   calendar, tasks) with a red line for now; a dark "Now" panel saying what to do next. */
.md-tiles { display: flex; flex-wrap: wrap; gap: .35rem; grid-template-columns: none; margin-bottom: 1rem; }
.md-tiles .tile { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: .35rem; padding: .25rem .7rem; min-height: 0; border-radius: 999px; box-shadow: none; }
.md-tiles .tile::before { display: none; }
.md-tiles .tile b { font-size: .95rem; }
.md-tiles .tile span { font-size: .8rem; color: var(--muted); }
.md-tiles .tile.alert b { color: var(--danger); }
.day-plan { padding: .8rem 1rem 1rem; margin-bottom: 1rem; }
.plan-allday { margin-bottom: .5rem; color: var(--muted); }
.plan-grid { position: relative; display: grid; gap: .35rem; }
.plan-lane, .plan-hours, .plan-now-wrap { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; }
.plan-now-wrap { position: absolute; inset: 0; pointer-events: none; }
.plan-name { font-size: .75rem; color: var(--muted); }
.plan-track { position: relative; height: 28px; }
.plan-hours .plan-track { height: 18px; border-bottom: 1px solid var(--line); }
.plan-hours .plan-track span { position: absolute; top: 0; font-size: .6875rem; color: var(--muted); transform: translateX(-2px); }
.plan-lane .plan-track { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / var(--span, 12))); border-radius: 6px; }
.plan-blk { position: absolute; top: 3px; height: 22px; display: flex; align-items: center; padding: 0 .4rem; border-radius: 6px; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.plan-blk.calls { background: var(--primary-soft); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.plan-blk.calls.past { opacity: .75; }
.plan-blk.meet { background: #efeafe; color: #5b3fc4; box-shadow: inset 3px 0 0 #7c5cf0; }
.plan-blk.task { background: #fff3df; color: #8a5208; box-shadow: inset 3px 0 0 #e39b16; }
.plan-now-wrap .plan-track { height: 100%; }
.plan-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #d64545; }
.now-panel { display: grid; gap: .35rem; justify-items: start; margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: 12px; background: #0b3d2e; color: #d9efe5; }
.now-panel b { color: #fff; font-size: 1.05rem; font-weight: 600; }
.now-panel .np-label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #9fcdb9; }
.now-panel .np-btn { margin-top: .2rem; padding: .4rem .9rem; border-radius: 9px; background: #45d49b; color: #0b3d2e; font-weight: 500; text-decoration: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-blk.meet { background: #2a2346; color: #c9b8ff; } :root:not([data-theme="light"]) .plan-blk.task { background: #3a2a10; color: #f2c06b; } }
:root[data-theme="dark"] .plan-blk.meet { background: #2a2346; color: #c9b8ff; }
:root[data-theme="dark"] .plan-blk.task { background: #3a2a10; color: #f2c06b; }
@media (max-width: 820px) {
  .md-tiles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .md-tiles .tile { flex: none; }
  .plan-lane, .plan-hours, .plan-now-wrap { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .day-plan { overflow-x: auto; scrollbar-width: thin; }
  .plan-grid { min-width: 620px; }
  .plan-blk { font-size: .6875rem; padding: 0 .25rem; }
}

/* Call windows (v0.10.66, redesign step 6): a strip of today's hours, a week map, why now in the Queue. */
.win-strip { display: inline-grid; grid-template-columns: repeat(12, 1fr); gap: 1.5px; width: 7.5rem; height: 14px; vertical-align: middle; }
.win-strip i, .win-map i { border-radius: 2px; background: var(--surface-2); }
.win-strip i.l1, .win-map i.l1 { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.win-strip i.l2, .win-map i.l2 { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); }
.win-strip i.l3, .win-map i.l3 { background: var(--primary); }
.win-strip i.now { box-shadow: inset 0 0 0 1.5px var(--ink); }
.win-map { display: grid; grid-template-columns: 2rem repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; margin: .4rem 0; }
.win-map i { height: 13px; }
.win-map .wm-h, .win-map .wm-d { font-size: .6875rem; color: var(--muted); }
@media (min-width: 1280px) { .homes-split .homes-table .c-win { display: none; } } /* beside the preview, which shows it */
.why-now { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; padding: .55rem .8rem; border-radius: 10px; background: var(--surface-2); font-size: .875rem; }
.why-now.good { background: var(--primary-soft); }
.why-now.poor { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.why-now .win-strip { width: 9rem; }
.upnext-wrap .upnext li .win-strip { width: 100%; margin-top: .15rem; }
.homes-table .c-win .win-strip { width: 5.5rem; }
.best-first[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* Planned calling sessions (v0.10.68, redesign step 7): the pace towards the target, with a marker for where you
   should be by now. */
.ses-pace { position: relative; display: inline-block; flex: 1 1 140px; max-width: 260px; height: 6px; border-radius: 99px; background: #1d5a45; }
.ses-pace i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #45d49b; }
.ses-pace u { position: absolute; top: -4px; width: 2px; height: 14px; background: #fff; opacity: .75; text-decoration: none; }
.ses-say { white-space: nowrap; }
.ses-summary .glance { margin: 0; }

/* Side menu in groups (v0.10.69, redesign step 5): Work, Records, Team; Compliance and Settings at the bottom.
   Not on a phone (tabs) nor when the menu is folded to icons. */
.nav-heading { padding: .9rem .75rem .25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sidenav nav > .nav-heading:first-child { padding-top: .2rem; }
@media (min-width: 821px) {
  .sidenav nav { flex: 1; display: flex; flex-direction: column; }
  .nav-spacer { flex: 1; min-height: .75rem; }
}
.collapsed .nav-heading { display: none; }
@media (max-width: 820px) { .nav-heading, .nav-spacer { display: none; } }

/* Tables on a phone in compact rows (v0.10.70, redesign step 8a): the name and the key figure on the first line, the
   other columns small on the second, each with its heading. Tables without a key column keep their cards. */
@media (max-width: 640px) {
  table.stacked[data-key] tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .15rem; padding: .55rem .75rem; margin-bottom: .4rem; }
  table.stacked[data-key] tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  table.stacked[data-key] td { order: 3; display: block; padding: 0; text-align: left; font-size: .8125rem; color: var(--muted); background: none; }
  table.stacked[data-key] td::before { float: none; margin-right: .3rem; font-size: inherit; font-weight: 400; color: var(--muted); opacity: .8; }
  table.stacked[data-key] td::after { content: none; }
  table.stacked[data-key] td:first-child:not(.selcol), table.stacked[data-key] td.rank + td { order: 0; flex: 1 1 0; min-width: 0; padding: 0; font-size: .9375rem; font-weight: 500; color: var(--ink); }
  table.stacked[data-key] td.cell-key { order: 1; margin-left: auto; font-size: .9375rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
  table.stacked[data-key] td.cell-key::before, table.stacked[data-key] td.rank + td::before { content: none; }
  table.stacked[data-key] td.cell-key[data-unit]::after { content: " " attr(data-unit); display: inline; font-size: .75rem; font-weight: 400; color: var(--muted); }
  table.stacked[data-key] td:not(:first-child):not(.cell-key):not([data-label]), table.stacked[data-key] td[data-label=""] { flex-basis: 100%; }
  table.stacked[data-key] td select { width: auto; max-width: 100%; vertical-align: baseline; }
  /* The leaderboard: the rank before the name; my own row tinted as a whole. */
  table.lb.stacked[data-key] td.rank { order: 0; flex: 0 0 auto; width: auto; margin: 0; font-size: .8125rem; color: var(--muted); }
  table.lb.stacked[data-key] tr.me { background: var(--primary-soft); }
  table.lb.stacked[data-key] tr.me td { background: none; }
}
.collapsed .nav-group.open .navlink:hover::after, .collapsed .nav-group.open .navlink:focus-visible::after { content: none; }


/* Settings on a phone (v0.10.74, redesign step 8b): the page is titled with the section, so the card's own title,
   the same words, is kept for screen readers only. */
@media (max-width: 820px) {
  .settings-body h2.section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Clients (v0.10.75, redesign step 8c): the total beside the title; on a phone a compact top and lighter cards. */
.clients-head .title-count { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.clients-head .head-count { font-size: .8125rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.clients-head .head-count:empty { display: none; }
.clients-head .add-plus, .clients-head .more-dots { display: none; }
@media (max-width: 820px) {
  /* One line: Clients 17,895 … ⋯ + */
  .page-head.clients-head { flex-wrap: nowrap; margin-bottom: .6rem; }
  .page-head.clients-head > .row:last-child { width: auto; flex-wrap: nowrap; padding: 0; }
  .clients-head .more-word, .clients-head .add-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .clients-head .more-dots, .clients-head .add-plus { display: inline; font-size: 1.25rem; line-height: 1; }
  .clients-head .more-btn .chev { display: none; }
  .clients-head .more-btn, .clients-head .add-client { min-width: 44px; min-height: 44px; padding: 0 .7rem; justify-content: center; }
  /* Saved views: one row that slides sideways */
  .views-bar { flex-wrap: nowrap; margin-bottom: .5rem; }
  .views-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding-bottom: 2px; }
  .views-chips::-webkit-scrollbar { display: none; }
  .views-chips .chip { flex: none; }
  .views-actions { flex: none; }
  .toolbar.filters { margin-bottom: .5rem; }
  /* Sort and the count on one line; the page controls only at the bottom; Compact is in the ⋯ menu */
  .homes-top { flex-wrap: nowrap; gap: .5rem; margin-bottom: .5rem; }
  .homes-top > .row { flex: none; }
  .homes-top .pager, .homes-top .compact-btn { display: none; }
  .homes-top .sort-sel { width: auto; min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; }
  .homes-top .count .count-word { display: none; }
  .homes-top .count { margin: 0; font-size: .8125rem; color: var(--muted); text-align: right; }
  /* Cards: no box until Select clients; no lone dash; no Cold score */
  .homes-holder:not(.selecting) table.stacked.homes-table td.selcol, .homes-holder:not(.selecting) .homes-table th.selcol { display: none; }
  table.stacked.homes-table td.c-win.none, table.stacked.homes-table td.c-score.cold { display: none; }
}

/* Queue (v0.10.75, redesign step 8c): on a phone the counts as one line of pills, the region, area and Best time first
   behind Filters, the screening note in one sentence, so the client to call comes up sooner. */
.q-filter-toggle { display: none; }
@media (max-width: 820px) {
  .page-head.queue-head { margin-bottom: .5rem; gap: .45rem; }
  .queue-head .queue-tiles { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .35rem; width: 100%; }
  .queue-head .queue-tiles::-webkit-scrollbar { display: none; }
  .queue-head .queue-tiles .tile { flex: none; display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: .3rem; padding: .3rem .7rem; min-height: 0; border-radius: 999px; box-shadow: none; }
  .queue-head .queue-tiles .tile::before { display: none; }
  .queue-head .queue-tiles .tile b { font-size: .95rem; }
  .queue-head .queue-tiles .tile span { display: inline; font-size: .8125rem; }
  .queue-head .head-filters { width: 100%; flex-wrap: wrap; gap: .4rem; margin: 0; }
  .q-filter-toggle { display: inline-flex; min-height: 40px; }
  .queue-head .head-filters:not(.open) > select, .queue-head .head-filters:not(.open) > .best-first { display: none; }
  .queue-head .head-filters.open > select { flex: 1 1 calc(50% - .2rem); }
  .banner .banner-more { display: none; }
}

/* Pipeline and Compliance on a phone (v0.10.76, redesign step 8d). A card: the name across, then the place and the
   next step on the left and the stage menu, at its own width, on the right. Compliance: the figures first, the
   explanation folded under them. */
@media (max-width: 820px) {
  .pcard:has(> .pc-move) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: end; }
  .pcard:has(> .pc-move) > * { grid-column: 1; }
  .pcard:has(> .pc-move) > .pc-top { grid-column: 1 / -1; }
  .pcard > .pc-move { grid-column: 2; grid-row: 2 / span 4; align-self: end; width: auto; max-width: 7.5rem; margin-top: 0; padding-right: 1.6rem; }
  .pipe-hint { font-size: .8125rem; }
  details.compliance-why > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  details.compliance-why > summary::-webkit-details-marker { display: none; }
  details.compliance-why > summary::after { content: "Show"; font-size: .8125rem; color: var(--primary); font-weight: 500; }
  details.compliance-why[open] > summary::after { content: "Hide"; }
  details.compliance-why > summary h2 { margin: 0; }
  details.compliance-why[open] > summary { margin-bottom: .5rem; }
}

/* Chat, Teams-style (v0.10.79): one-line message box with its buttons inside, a list you can resize, times on hover,
   date lines between groups of messages, and a menu on each conversation. */
.chat { grid-template-columns: var(--chat-list-w, 260px) .75rem minmax(0, 1fr); gap: 0; }
.chat-resizer { position: relative; cursor: col-resize; touch-action: none; }
.chat-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.chat-resizer:hover::after, .chat-resizer:focus-visible::after, .chat-resizer.dragging::after { background: var(--info); }
.chat-resizer:focus-visible { outline: none; }
.chat-compose { margin-top: .5rem; }
.compose-box { flex: 1; display: flex; align-items: flex-end; gap: .25rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: .3rem .35rem .3rem .75rem; }
.compose-box:focus-within { border-color: var(--primary); }
.chat-compose .compose-box textarea { flex: 1; border: 0; outline: 0; background: transparent; padding: .45rem 0; min-height: 0; height: auto; border-radius: 0; box-shadow: none; resize: none; line-height: 1.35; }
.compose-tools { display: flex; align-items: center; gap: .1rem; flex: none; }
.tool-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.tool-btn:hover { background: var(--surface-2); color: var(--ink); }
.tool-btn .ico { width: 20px; height: 20px; }
.send-btn { color: var(--primary); }
.tool-sep { width: 1px; height: 22px; background: var(--line); margin: 0 .2rem; }
.compose-tools .emoji-panel { left: auto; right: 0; }
.msg-meta { display: flex; gap: .45rem; align-items: center; }
.msg.mine .msg-meta { justify-content: flex-end; }
.msg-time { visibility: hidden; }
.msg:hover .msg-time, .msg:focus-within .msg-time, .msg.picking .msg-time { visibility: visible; }
.chat-sep { align-self: stretch; text-align: center; margin: .9rem 0 .4rem; color: var(--muted); font-size: .8rem; }
.chat-thread { position: relative; }
.ct-more { display: none; flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; place-items: center; padding: 0; }
.chat-thread:hover .ct-more, .chat-thread:focus-within .ct-more { display: grid; }
.chat-thread:hover .nav-badge, .chat-thread:focus-within .nav-badge { display: none; }
.ct-more:hover { background: var(--surface-2); color: var(--ink); }
@media (pointer: coarse) { .ct-more { display: grid; } .chat-thread:hover .nav-badge { display: inline-block; } }
.ct-flag .ico { width: 13px; height: 13px; margin-left: .3rem; vertical-align: -1px; color: var(--muted); }
.nav-badge.quiet { background: var(--surface-2); color: var(--muted); }
.thread-menu { position: fixed; z-index: 70; min-width: 210px; padding: .35rem; background: #2f3238; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.thread-menu .menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .65rem; border: 0; border-radius: 8px; background: transparent; color: #f4f5f7; font: inherit; text-align: left; cursor: pointer; }
.thread-menu .menu-item:hover, .thread-menu .menu-item:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.thread-menu .ico { width: 18px; height: 18px; color: #c9ced6; }
.popout { grid-template-columns: minmax(0, 1fr); }
.popout .sidenav, .popout .topbar, .popout .chat-list, .popout .chat-resizer, .popout .chat-top { display: none !important; }
.popout .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 1.5rem); }
@media (max-width: 820px) { .chat-resizer { display: none; } .compose-box { padding-left: .6rem; } }
/* The time sits beside the bubble (on its left for my own messages), clear of the reaction bar above. */
.msg-line { display: flex; align-items: flex-end; gap: .45rem; }
.msg.mine .msg-line { flex-direction: row-reverse; }
.msg-time { flex: none; font-size: .75rem; color: var(--muted); white-space: nowrap; padding-bottom: .3rem; }
.popout .chat-back { display: none !important; }

/* Chat list, Teams-style (v0.10.80): the title and its buttons at the top of the list, filters, folding sections. */
@media (min-width: 821px) { .chat { height: calc(100vh - 8.5rem); } }
.chat-list-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .4rem .2rem .5rem; }
.chat-title { font-size: 1.25rem; margin: 0; }
.chat-list-tools { display: flex; gap: .1rem; }
.chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem .5rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.chat-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; }
.chat-chip:hover { border-color: var(--muted); }
.chat-chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.chat-section { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 500; padding: .5rem .5rem .3rem; cursor: pointer; text-align: left; border-radius: 8px; }
.chat-section:hover { color: var(--ink); }
.chat-section .ico { width: 15px; height: 15px; transition: transform .15s; }
.chat-section.shut .ico { transform: rotate(-90deg); }
.chat-section .nav-badge { margin-left: auto; }
.chat-none { padding: .5rem .6rem; }
.push-banner.slim { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .5rem .35rem .75rem; font-size: .85rem; margin-bottom: .4rem; }
.push-banner.slim > span:first-child { min-width: 0; }
.push-banner.slim .row { flex: none; gap: .3rem; }
@media (max-width: 820px) { .chat-list-top { padding-top: .2rem; } }

/* Mentions, group settings and status (v0.10.81) */
.chat-compose { position: relative; }
.mention-pick { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 25; min-width: 240px; max-width: 360px; max-height: 260px; overflow: auto; padding: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(28, 36, 52, .18); }
.mention-opt { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
.mention-opt.on, .mention-opt:hover { background: var(--primary-soft); }
.mention { color: var(--info); font-weight: 600; }
.mention.me { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 .15rem; }
.msg.mine .mention, .msg.mine .mention.me { color: inherit; background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 0 .15rem; }
.nav-badge.at { background: var(--warn); color: #fff; margin-right: .2rem; }
.compose-locked { margin: .6rem 0 0; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; font-size: .9rem; }
.group-settings { margin: .4rem 0 .8rem; }
.group-settings details { margin-top: .5rem; }
.group-settings summary { cursor: pointer; font-weight: 500; }
.pres-dot.st-available { background: #22a559; }
.pres-dot.st-busy, .pres-dot.st-dnd { background: #d13438; }
.pres-dot.st-dnd::after { content: ''; position: absolute; left: 22%; right: 22%; top: calc(50% - 1px); height: 2px; background: #fff; border-radius: 1px; }
.pres-dot.st-brb, .pres-dot.st-away { background: #e8a300; }
.pres-dot.st-offline { background: #9aa5b1; }
.pres-dot.inline { position: relative; display: inline-block; right: auto; bottom: auto; flex: none; border-width: 0; width: 12px; height: 12px; }
.status-section { padding: .2rem .3rem; }
.status-now, .status-item { display: flex; align-items: center; gap: .6rem; width: 100%; }
.status-now .ico { margin-left: auto; width: 15px; height: 15px; }
.status-list { padding-left: .5rem; }
.status-item[aria-pressed="true"] { background: var(--primary-soft); }
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }

/* Loading (v0.10.84): the start-up screen, and placeholders shaped like each page while it loads. */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 2rem; background: var(--bg); }
.splash-logo { width: 56px; height: 56px; border-radius: 14px; }
.splash-card { width: min(340px, 86vw); padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.splash-lines span { display: block; height: 10px; border-radius: 6px; background: var(--surface-2); margin-bottom: .55rem; }
.splash-lines span:first-child { width: 72%; } .splash-lines span:last-child { width: 38%; margin-bottom: 1rem; }
.splash-board { display: flex; gap: .6rem; align-items: flex-start; }
.splash-list { flex: 1; border-left: 4px solid var(--primary); border-radius: 4px; }
.splash-list i { display: block; height: 30px; border-bottom: 1px solid var(--line); position: relative; opacity: 0; animation: splash-row 2.4s ease-in-out infinite; }
.splash-list i::after { content: ''; position: absolute; left: 10px; top: 12px; height: 6px; width: 55%; border-radius: 4px; background: var(--surface-2); }
.splash-list i:nth-child(2) { animation-delay: .25s; } .splash-list i:nth-child(3) { animation-delay: .5s; } .splash-list i:nth-child(4) { animation-delay: .75s; }
.splash-people { display: grid; gap: .5rem; padding: .45rem; border: 2px solid var(--primary); border-radius: 10px; }
.splash-people b { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); transform: scale(0); animation: splash-pop 2.4s ease-in-out infinite; }
.splash-people b:nth-child(2) { animation-delay: .3s; } .splash-people b:nth-child(3) { animation-delay: .6s; } .splash-people b:nth-child(4) { animation-delay: .9s; }
.splash-text { margin: 0; font-size: 1.15rem; font-weight: 500; color: var(--ink); }
@keyframes splash-row { 0% { opacity: 0; transform: translateX(-12px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes splash-pop { 0% { transform: scale(0); } 15%, 80% { transform: scale(1); } 100% { transform: scale(0); } }

.skel { opacity: 0; animation: skel-in .2s ease .15s forwards; } /* a quick page never shows it */
@keyframes skel-in { to { opacity: 1; } }
.skel-block { display: block; height: 12px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 11%, var(--surface)) 25%, color-mix(in srgb, var(--ink) 5%, var(--surface)) 40%, color-mix(in srgb, var(--ink) 11%, var(--surface)) 60%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-head { margin: .2rem 0 1.1rem; display: grid; gap: .5rem; }
.skel-title { height: 22px; width: 180px; } .skel-sub { width: 300px; max-width: 70%; }
.skel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; display: grid; gap: .7rem; }
.skel-row { display: flex; align-items: center; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.skel-row:last-child { border-bottom: 0; }
.skel-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.skel-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.skel-col { background: color-mix(in srgb, var(--ink) 5%, var(--bg)); border-radius: 18px; padding: .8rem; display: grid; gap: .6rem; align-content: start; }
.skel-pcard { background: var(--surface); border-radius: 12px; padding: .8rem; display: grid; gap: .5rem; }
.skel-chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: .75rem; }
.skel-chatlog { align-content: end; min-height: 50vh; }
.skel-msg { display: flex; } .skel-msg.mine { justify-content: flex-end; }
.skel-bubble { height: 34px; border-radius: 14px; }
.skel-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.skel-day { height: 70px; border-radius: 8px; }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.skel-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: grid; gap: .5rem; }
@media (max-width: 820px) {
  .skel-board { grid-template-columns: 86%; overflow: hidden; }
  .skel-chat { grid-template-columns: minmax(0, 1fr); } .skel-chatlist { display: none; }
  .skel-day { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-block { animation: none; } .skel { animation-duration: 0s; }
  .splash-list i, .splash-people b { animation: none; opacity: 1; transform: none; }
}

/* The sign-up journey (v0.10.86): questions over the app (blurred behind), the welcome, the tour, Getting started. */
.ob-overlay { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ob-card { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); padding: 1.6rem 1.8rem 1.4rem; }
.ob-card.ob-wide { width: min(820px, 100%); }
.ob-card h1 { margin: .6rem 0 .3rem; font-size: 1.6rem; color: var(--primary); }
.ob-card > p.muted { margin: 0 0 1.1rem; }
.ob-steps { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); }
.ob-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; position: relative; }
.ob-steps li + li::before { content: ''; position: absolute; top: .8rem; left: calc(-50% + 1rem); right: calc(50% + 1rem); height: 2px; background: var(--line); }
.ob-steps li.done + li::before, .ob-steps li.done::before { background: var(--primary); }
.ob-dot { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); font-weight: 600; }
.ob-steps li.done .ob-dot { border-color: var(--primary); color: var(--primary); }
.ob-steps li.now .ob-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff); }
.ob-steps li.now { color: var(--ink); font-weight: 600; }
.ob-form { display: grid; gap: .3rem; }
.ob-fieldset { border: 0; padding: 0; margin: .3rem 0 .8rem; }
.ob-fieldset legend, .ob-legend { font-weight: 600; margin: 0 0 .5rem; padding: 0; }
.ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ob-choice { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; margin-bottom: .5rem; }
.ob-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.ob-choice input { margin-top: .2rem; accent-color: var(--primary); }
.ob-choice > span { display: grid; gap: .1rem; }
.ob-sizes { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ob-size { background: var(--surface); border: 0; border-left: 1px solid var(--line); padding: .75rem .3rem; font: inherit; cursor: pointer; color: var(--ink); }
.ob-size:first-child { border-left: 0; }
.ob-size.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; box-shadow: inset 0 0 0 2px var(--primary); }
.ob-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; }
.ob-ready { min-height: 0; padding: 1.5rem 0; background: none; }
.ob-welcome { text-align: center; color: var(--ink) !important; }
.ob-center { text-align: center; }
.ob-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.ob-path { border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.ob-path:first-child { border-color: var(--primary); }
.ob-path h2 { margin: 0; font-size: 1.2rem; }
.ob-path p { margin: 0 0 .6rem; flex: 1; }
.ob-badge { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: .15rem .55rem; }

.tour { border: 1.5px solid var(--primary); background: linear-gradient(var(--primary-soft), var(--surface) 70%); margin-bottom: 1rem; }
.tour h2 { margin: .7rem 0 .2rem; font-size: 1.25rem; }
.tour p { margin: 0 0 .8rem; max-width: 70ch; }
.tour-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tour-steps { list-style: none; display: flex; gap: .3rem; padding: 0; margin: 0; }
.tour-steps li + li::before { content: '›'; color: var(--muted); margin-right: .3rem; }
.tour-steps button { background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; padding: .2rem .35rem; border-radius: 8px; }
.tour-steps li.now button { color: var(--primary); font-weight: 700; }
.tour-steps li.done button { color: var(--ink); }
.tour-nav { display: flex; gap: .4rem; }
.tour-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tour-actions .linkish { text-decoration: underline; color: var(--muted); }

.ob-finish p { margin: 0 0 1rem; }
.ob-rate { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; text-align: center; }
.ob-rate p { margin: 0 0 .4rem; }
.ob-rate-row { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.ob-stars { display: flex; gap: .2rem; }
.ob-stars button { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--line); cursor: pointer; padding: .1rem; }
.ob-stars button.on, .ob-stars button:hover { color: #f5b301; }

.start-hero { background: linear-gradient(135deg, var(--primary-soft), var(--surface) 65%); padding: 1.6rem 1.8rem; }
.start-hero h1 { margin: 0 0 .4rem; font-size: 1.7rem; }
.start-name { color: var(--primary); }
.start-hero p { margin: 0; max-width: 60ch; }
.start-bar { max-width: 420px; height: 8px; margin-top: 1rem; }
.start-count { margin: .3rem 0 0 !important; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.start-list .gs-list { gap: 0; }
.start-list .gs-list li { align-items: center; padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
.start-list .gs-list li:last-child { border-bottom: 0; }
.start-list .gs-list li.done b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.nav-start .nav-badge { background: var(--primary); }

@media (max-width: 640px) {
  .ob-card { padding: 1.2rem 1rem 1rem; border-radius: 16px; }
  .ob-row, .ob-paths { grid-template-columns: 1fr; }
  .ob-steps { font-size: .72rem; }
  .ob-size { padding: .65rem .1rem; font-size: .9rem; }
  .tour-top { flex-direction: column; align-items: flex-start; }
}

/* Sign-up tick boxes (v0.10.87): normal-weight text, links underlined. */
.auth .check span { font-weight: 400; }
.auth .check a { text-decoration: underline; }

/* Sign-up questions, Pipedrive style (v0.10.88): boxed fields with an icon, the question small on top. */
.ob-card h1 { text-align: center; font-size: 1.9rem; margin: 1rem 0 .4rem; }
.ob-lead { text-align: center; margin: 0 0 1.2rem; color: var(--ink); }
.ob-card .ob-steps { margin-bottom: .2rem; }
.ob-form { gap: .65rem; }
.ob-input { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .9rem; background: var(--surface); cursor: text; }
.ob-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ob-input > .ico { flex: none; color: var(--muted); width: 22px; height: 22px; }
.ob-input-body { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ob-input-label { font-size: .8rem; color: var(--muted); }
.ob-input input, .ob-input .ob-select { border: 0; background: none; padding: 0; font: inherit; font-size: 1.05rem; color: var(--ink); width: 100%; outline: none; box-shadow: none; min-height: 0; }
.ob-input .ob-select { appearance: auto; cursor: pointer; }
.ob-verified { background: var(--surface-2); cursor: default; }
.ob-value { font-size: 1.05rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-ok { color: var(--primary); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.ob-ok-dot { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: .7rem; }
.ob-show { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: .2rem .3rem; }
.ob-meter { margin: -.25rem 0 .1rem; font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.ob-strong { color: var(--primary); }
.ob-note { display: flex; gap: .7rem; align-items: flex-start; background: var(--primary-soft); border-radius: 10px; padding: .8rem .9rem; color: var(--ink); font-size: .92rem; }
.ob-note .ico { flex: none; color: var(--primary); }
.ob-phone { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem; }
.ob-next { margin-top: .4rem; padding: .85rem; font-size: 1.05rem; }
.ob-hint { margin: -.3rem 0 .6rem; font-size: .88rem; color: var(--muted); }
.ob-band { background: var(--surface-2); margin: .2rem -1.8rem 0; padding: 1rem 1.8rem; }
.ob-band .ob-legend { font-size: 1.05rem; }
.ob-q { font-size: 1.1rem; margin-top: .4rem; }
.ob-ticks { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ob-tick { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.1rem; border-top: 1px solid var(--line); cursor: pointer; font-size: 1.02rem; }
.ob-tick:first-child { border-top: 0; }
.ob-tick:has(input:checked) { background: var(--primary-soft); }
.ob-tick input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }
.ob-ready h2 { margin: 0; font-size: 1.5rem; }
@media (max-width: 640px) {
  .ob-band { margin: .2rem -1rem 0; padding: .9rem 1rem; }
  .ob-phone { grid-template-columns: 7.5rem 1fr; }
  .ob-card h1 { font-size: 1.5rem; }
}

/* v0.10.89: shorter boxes; a dropdown fills its box so a click anywhere opens it; pictures on the welcome choices. */
.ob-input { padding: .35rem .85rem; gap: .7rem; border-radius: 10px; }
.ob-input-label { font-size: .76rem; line-height: 1.2; }
.ob-input input { font-size: 1rem; line-height: 1.35; }
.ob-input > .ico { width: 20px; height: 20px; }
.ob-form { gap: .55rem; }
.ob-sel { position: relative; display: block; padding: 0; cursor: pointer; }
.ob-sel > .ob-input-label { position: absolute; left: .85rem; top: .38rem; pointer-events: none; z-index: 1; }
.ob-sel > .ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.ob-sel.has-ico > .ob-input-label { left: 2.95rem; }
.ob-input.ob-sel .ob-select { display: block; width: 100%; min-height: 0; height: auto; margin: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  padding: 1.3rem 2.2rem .4rem .85rem; font-size: 1rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.ob-input.ob-sel.has-ico .ob-select { padding-left: 2.95rem; }
.ob-under { margin: -.25rem 0 .2rem !important; }
.ob-how { font-size: 1.25rem; margin: .4rem 0 0; }
.ob-path { align-items: center; text-align: center; }
.ob-path p { text-align: center; }
.ob-path-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.ob-art { width: 190px; height: 112px; margin: .2rem 0 .4rem; }
.art-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.art-y { fill: #f6c343; stroke: #6b5200; stroke-width: 1.6; stroke-linejoin: round; }
.art-faint { fill: #fbe9a8; stroke: #c9b15a; }
.art-s { fill: #b9b2f5; stroke: #3b3486; stroke-width: 1.6; stroke-linejoin: round; }
.art-p { fill: var(--primary); stroke: #0b3d2b; stroke-width: 1.6; }
.art-g { fill: var(--primary-soft); stroke: #9cc9b5; stroke-width: 1.6; }
.art-num { fill: #fff; font: 700 26px system-ui, sans-serif; }
.ob-input.ob-sel .ob-select { padding-left: .62rem; }
.ob-input.ob-sel.has-ico .ob-select { padding-left: 2.72rem; }

/* Menu with More (v0.10.90): no group names in the menu; More at the bottom opens a dark panel with named groups. */
.sidenav .nav-more { display: flex; border: 0; background: none; font-family: inherit; cursor: pointer; width: 100%; text-align: left; }
.more-phone { display: none; }
.more-h { padding: .7rem .65rem .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
@media (min-width: 821px) {
  .sidenav nav .nav-spacer { display: block; flex: 1; min-height: .75rem; }
  .more-sheet:not(.hidden) { display: flex; flex-direction: column; position: fixed; z-index: 60; width: 250px; max-height: calc(100vh - 16px); overflow-y: auto; padding: .35rem .6rem .6rem;
    background: #2f3238; color: #f4f5f7; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  .more-sheet .more-h { color: rgba(255, 255, 255, .55); }
  .more-sheet .more-link { display: flex; align-items: center; color: #f4f5f7; text-decoration: none; padding: .5rem .65rem; border-radius: 9px; }
  .more-sheet .more-link:hover { background: rgba(255, 255, 255, .1); }
  .more-sheet .more-link.active { background: rgba(255, 255, 255, .18); color: #fff; }
}
@media (max-width: 820px) {
  .more-phone { display: block; }
  .more-sheet:not(.hidden) { max-height: calc(100dvh - var(--nav-h) - var(--safe-b) - 1.5rem); overflow-y: auto; }
  .more-sheet .more-h { color: var(--muted); padding-left: 1rem; }
  .more-group .more-link { min-height: 42px; padding: .5rem 1rem; }
}

/* Single sign-on settings (v0.10.91), laid out like Pipedrive's: label, field and hint, a copy button for ours. */
.sso h3 { margin: 1.2rem 0 .8rem; font-size: 1.1rem; }
.sso-kind { display: flex; gap: .4rem; margin: .8rem 0 .2rem; max-width: 480px; }
.sso-sec { border-top: 1px solid var(--line); margin-top: 1rem; }
.sso-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: start; margin-bottom: .9rem; }
.sso-label { text-align: right; padding-top: .55rem; font-weight: 500; }
.sso-field { display: grid; gap: .3rem; }
.sso-field input, .sso-field textarea { width: 100%; }
.sso-field textarea { border-radius: 12px; }
.sso-ro { background: var(--surface-2); color: var(--muted); }
.mono, .sso-row textarea.sso-ro { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
.sso-foot { border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sso-switches { display: grid; gap: .6rem; max-width: 520px; }
.switch-row { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.switch-row input { margin-top: .25rem; }
.sso-actions { display: flex; gap: .5rem; }
.sso-result { padding: .7rem .9rem; border-radius: 10px; margin: .6rem 0; }
.sso-result.ok { background: var(--primary-soft); }
.sso-result.bad { background: color-mix(in srgb, #e5484d 12%, var(--surface)); }
@media (max-width: 820px) {
  .sso-row { grid-template-columns: 1fr; }
  .sso-label { text-align: left; padding-top: 0; }
}

/* v0.10.92: More under Chat; on a computer its panel has two columns (as in HubSpot) and no scroll bar. */
.more-cols { display: none; }
@media (min-width: 821px) {
  .more-sheet:not(.hidden) { width: auto; max-height: calc(100vh - 24px); overflow: hidden; padding: 0; flex-direction: row; }
  .more-cols { display: grid; grid-template-columns: 230px 250px; grid-template-rows: minmax(0, 1fr); max-height: calc(100vh - 24px); }
  .more-groups { overflow-y: auto; scrollbar-width: none; }
  .more-pagecol { display: flex; flex-direction: column; min-height: 0; }
  .more-pagecol .more-pages { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .more-pagecol .more-pages::-webkit-scrollbar, .more-groups::-webkit-scrollbar { display: none; }
  .more-down { flex: none; display: flex; justify-content: center; align-items: center; height: 40px; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .14); color: #f4f5f7; cursor: pointer; border-radius: 0 0 14px 0; }
  .more-down:hover { background: rgba(255, 255, 255, .08); }
  .more-down.hidden { display: none; }
  .more-phone { display: none !important; }
  .more-groups { padding: .7rem .6rem; border-right: 1px solid rgba(255, 255, 255, .14); }
  .more-title { font-weight: 700; font-size: 1.05rem; padding: .35rem .65rem .6rem; color: #fff; }
  .more-gbtn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; background: none; border: 0; color: #f4f5f7; font: inherit; text-align: left; padding: .55rem .65rem; border-radius: 9px; cursor: pointer; }
  .more-gbtn:hover, .more-gbtn.on { background: rgba(255, 255, 255, .12); }
  .more-chev { font-size: 1.25rem; line-height: 1; opacity: .8; }
  .more-pages { padding: .7rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
}

/* v0.10.92: the menu bar is ShikaCRM green on the light theme too (the dark theme keeps its own dark bar), white text. */
:root { --chrome: #0e3b2c; --chrome-2: #165040; --chrome-ink: #e3efe9; --chrome-muted: #9fc4b4; }
:root[data-theme="dark"] { --chrome: #101a15; --chrome-2: #18241e; --chrome-ink: #d3e0da; --chrome-muted: #8ba196; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --chrome: #101a15; --chrome-2: #18241e; --chrome-ink: #d3e0da; --chrome-muted: #8ba196; } }
.sidenav { background: var(--chrome); border-right-color: transparent; color: var(--chrome-ink); }
.sidenav .brand, .sidenav .brand * { color: #fff; }
.sidenav .navlink { color: var(--chrome-ink); }
.sidenav .navlink .ico { color: var(--chrome-muted) !important; }
.sidenav .navlink:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidenav .navlink.active { background: rgba(255, 255, 255, .16); color: #fff; }
.sidenav .navlink.active .ico { color: #fff !important; }
.sidenav .nav-badge { background: rgba(255, 255, 255, .2); color: #fff; }
.sidenav .nav-caret, .sidenav .nav-toggle { color: var(--chrome-muted); }
.sidenav .nav-caret:hover, .sidenav .nav-toggle:hover { background: rgba(255, 255, 255, .09); color: #fff; }

/* The top bar keeps its own (light) colours now the menu bar is green (v0.10.93). */
.topbar { --chrome-ink: #3d4a44; --chrome-muted: #66736d; --chrome-2: #f1f5f3; }
:root[data-theme="dark"] .topbar { --chrome-ink: #d3e0da; --chrome-muted: #8ba196; --chrome-2: #18241e; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .topbar { --chrome-ink: #d3e0da; --chrome-muted: #8ba196; --chrome-2: #18241e; } }

/* Back / Forward and Quick Help (v0.10.93) */
.hist-nav { display: flex; gap: .1rem; margin-right: .4rem; }
.hist-nav .bell-btn { width: 38px; height: 38px; }
.help-btn.on { background: var(--primary-soft); color: var(--primary); }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--surface); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 0, 0, .14); animation: help-in .18s ease-out; }
@keyframes help-in { from { transform: translateX(24px); opacity: 0; } }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem .6rem; }
.help-head h2 { margin: 0; font-size: 1.2rem; font-weight: 500; }
.help-x { background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .3rem; }
.help-search { display: flex; align-items: center; gap: .5rem; margin: .2rem 1.3rem .8rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 .8rem; }
.help-search .ico { color: var(--muted); flex: none; }
.help-search input { border: 0 !important; box-shadow: none !important; background: none; padding: .65rem 0; width: 100%; font: inherit; outline: none; }
.help-body { flex: 1; overflow-y: auto; padding: .3rem 1.3rem 1rem; }
.help-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin: .4rem 0 1rem; }
.help-card-h { display: flex; align-items: center; gap: .5rem; }
.help-new { font-size: .7rem; font-weight: 700; color: #fff; background: #2f6fde; border-radius: 999px; padding: .05rem .5rem; }
.help-card p { margin: .5rem 0 .8rem; }
.help-card-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn.danger { background: #c8322f; border-color: #c8322f; color: #fff; }
.help-h { margin: 1rem 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.help-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .8rem .1rem; font: inherit; color: var(--ink); cursor: pointer; }
.help-row:hover { color: var(--primary); }
.help-back { background: none; border: 0; color: var(--primary); font: inherit; cursor: pointer; padding: .2rem 0; }
.help-article h3 { margin: .5rem 0 .6rem; }
.help-article h4 { margin: 1rem 0 .3rem; }
.help-article p, .help-article li { line-height: 1.55; }
.help-article ul, .help-article ol { padding-left: 1.2rem; }
.help-tip { margin-top: 1.2rem; }
.help-foot { display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid var(--line); padding: .9rem; margin: 0; text-decoration: none; color: var(--primary); font-weight: 500; }
p.help-foot { color: var(--muted); font-weight: 400; }
@media (max-width: 820px) { .hist-nav { display: none; } }

/* v0.10.95: an open group (Pipeline, Calendar) is highlighted like the page you are on, white text on light green. */
.sidenav .nav-group.open .navlink:not(.active) { background: rgba(255, 255, 255, .16); color: #fff; }
.sidenav .nav-group.open .navlink:not(.active) .ico, .sidenav .nav-group.open .nav-caret { color: #fff !important; }

/* How-to videos (v0.10.96): cards with a picture, play button and length; a pop-up player over the page. */
.vid-card { display: inline-flex; flex-direction: column; gap: .4rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.vid-card.small { flex-direction: row; align-items: center; gap: .7rem; width: 100%; padding: .5rem 0; }
.vid-thumb { position: relative; display: grid; place-items: center; width: 240px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #0e3b2c, #1f7a5a); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); flex: none; }
.vid-card.small .vid-thumb { width: 112px; border-radius: 8px; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-thumb-title { position: absolute; left: .7rem; right: 3.2rem; bottom: .6rem; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.vid-card.small .vid-thumb-title { display: none; }
.vid-play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #1fa36b; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transition: transform .15s; }
.vid-play::after { content: ''; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.vid-card.small .vid-play { width: 30px; height: 30px; }
.vid-card.small .vid-play::after { left: 11px; top: 8px; border-width: 7px 0 7px 10px; }
.vid-card:hover .vid-play, .vid-card:focus-visible .vid-play { transform: scale(1.08); }
.vid-time { position: absolute; right: .5rem; bottom: .5rem; background: rgba(0, 0, 0, .75); color: #fff; font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; }
.vid-name { display: grid; gap: .1rem; }
.vid-overlay { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 1.5rem; background: rgba(8, 14, 12, .72); animation: vid-in .15s ease-out; }
@keyframes vid-in { from { opacity: 0; } }
.vid-box { position: relative; width: min(1100px, 100%); }
.vid-box video { display: block; width: 100%; max-height: calc(100vh - 7rem); border-radius: 12px; background: #000; }
.vid-x { position: absolute; top: -.6rem; right: -.6rem; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vid-title { color: #fff; margin: .6rem 0 0; font-weight: 500; }
.tour-body { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.tour-body .vid-card.small { width: auto; }
.vid-row { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) { .tour-body { flex-direction: column; align-items: flex-start; } .vid-thumb { width: 100%; } .vid-overlay { padding: .5rem; } .vid-x { top: -3rem; right: 0; } }
.tour-body .vid-card.small { flex: none; max-width: 320px; }
.vid-name { min-width: 150px; }

/* v0.10.98: the top bar stays white on the light theme (it shares --chrome with the menu bar, which turned green in v0.10.92). */
.topbar { background: #ffffff; }
:root[data-theme="dark"] .topbar { background: var(--chrome); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .topbar { background: var(--chrome); } }

button.help-foot { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; font: inherit; }

/* Design polish (v0.10.100): buttons look like buttons. A clear edge and a slight lift for the ordinary ones, bold
   text, and a hover that answers; the main button stays solid green. Ghost buttons read as green text links. */
.btn { border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 40, 32, .07); }
.btn:not(.primary):not(.ghost):not([disabled]):hover { box-shadow: 0 3px 10px rgba(15, 122, 85, .16); }
.btn.ghost { border-color: transparent; box-shadow: none; color: var(--primary); }
.btn.ghost:not([disabled]):hover { background: var(--primary-soft); border-color: transparent; }
.btn.primary { border: 0; }
.btn .ico { width: 18px; height: 18px; }
.btn.has-menu::after { content: ''; width: 0; height: 0; margin-left: .15rem; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 5px solid currentColor; opacity: .7; }

/* Folding sections ("Choose your calendar" and the like) look like something to click. */
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border-radius: 10px; font-weight: 600; color: var(--primary); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: .15rem; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { background: var(--primary-soft); }

/* Choice tiles: an icon, a name and what happens, an arrow; the whole tile is the button. */
.pick-tile { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border: 1.5px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 12px; background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 40, 32, .06); transition: border-color .15s, box-shadow .15s, transform .1s; }
.pick-tile:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(15, 122, 85, .16); transform: translateY(-1px); }
.pick-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.pick-text { flex: 1; display: grid; gap: .1rem; text-align: left; }
.pick-go { font-size: 1.5rem; line-height: 1; color: var(--muted); }
.pick-tile:hover .pick-go { color: var(--primary); }

/* Insights (v0.10.100): filters, headline tiles, charts in cards, a print-ready report, and Present. */
.ins-head { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ins-head p { margin: .2rem 0 0; }
.ins-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ins-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.ins-filters select, .ins-filters input { width: auto; min-width: 150px; }
.ins-print-head { display: none; }
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ins-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: grid; gap: .2rem; box-shadow: var(--shadow); }
.ins-tile-l { font-size: .85rem; color: var(--muted); font-weight: 500; }
.ins-tile-v { font-size: 1.7rem; line-height: 1.1; }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ins-card { margin: 0; display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.ins-card.wide { grid-column: 1 / -1; }
.ins-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ins-card-h h2 { margin: 0; font-size: 1.05rem; }
.ins-empty { margin: 1rem 0; text-align: center; }
.ins-cols { display: flex; align-items: flex-end; gap: 3px; height: 220px; padding-top: 1.2rem; overflow-x: auto; }
.ins-col { flex: 1 1 0; min-width: 14px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.ins-col-bar { width: 100%; max-width: 42px; background: color-mix(in srgb, var(--primary) 32%, var(--surface)); border-radius: 5px 5px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.ins-col-in { width: 100%; background: var(--primary); }
.ins-col-v { font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ins-col-l { font-size: .68rem; color: var(--muted); white-space: nowrap; transform: rotate(-35deg); transform-origin: top center; height: 2.2em; margin-top: .2rem; }
.ins-rows { display: grid; gap: .55rem; }
.ins-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: .7rem; align-items: center; }
.ins-row-l { font-size: .9rem; }
.ins-row-track { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ins-row-bar { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.ins-row-v { font-weight: 700; white-space: nowrap; }
.ins-table { width: 100%; border-collapse: collapse; }
.ins-table th, .ins-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.ins-table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.ins-foot { margin-top: 1rem; }
@media (max-width: 820px) { .ins-grid { grid-template-columns: 1fr; } .ins-row { grid-template-columns: 1fr auto; } .ins-row-track { grid-column: 1 / -1; grid-row: 2; } }

/* Present: full screen, one slide at a time, big. */
.ins-present { position: fixed; inset: 0; z-index: 980; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; padding: 1.2rem 2rem; gap: 1rem; }
.ins-present-top { display: flex; align-items: center; gap: 1rem; }
.ins-present-top span { color: var(--muted); flex: 1; }
.ins-present-top .vid-x { position: static; }
.ins-stage { display: grid; place-items: center; overflow: auto; }
.ins-stage > * { width: min(1200px, 100%); font-size: 1.25rem; }
.ins-stage .ins-cols { height: 52vh; }
.ins-stage .ins-card-h h2 { font-size: 1.8rem; }
.ins-stage .ins-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ins-stage .ins-tile-v { font-size: 2.8rem; }
.ins-stage .ins-row-track { height: 22px; }
.ins-present-nav { display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.ins-count { color: var(--muted); min-width: 4rem; text-align: center; }

/* Download PDF = the browser's print, laid out as a report: no menus or buttons, a heading, charts two to a row. */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; }
  .sidenav, .topbar, .ins-actions, .ins-filters, .ins-head, .tour, .help-panel, .kc-panel, .kc-bubble, .outbox-bar, #toast, .install-banner { display: none !important; }
  .layout, .content, .panel, main { display: block !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: #fff !important; }
  .ins-print-head { display: flex; justify-content: space-between; border-bottom: 2px solid #0e3b2c; padding-bottom: 6px; margin-bottom: 10px; font-size: 13px; }
  .ins-tiles { grid-template-columns: repeat(7, 1fr); }
  .ins-tile, .ins-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .ins-grid { grid-template-columns: 1fr 1fr; }
  .ins-cols { height: 160px; overflow: visible; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.ins-cols { overflow: hidden; } .ins-col { min-width: 4px; } .ins-col-v { font-size: .66rem; }
@media (min-width: 821px) { .ins-cols .ins-col:nth-child(n) .ins-col-v { overflow: visible; } }
.ins-col-bar:not(:has(.ins-col-in)) { background: var(--primary); }

/* Page polish (v0.10.101): Queue, Pipeline and Import. */

/* Queue: the counts as small cards; the outcome buttons look like buttons, coloured by what they do. */
.queue-tiles .tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .35rem .7rem; box-shadow: 0 1px 2px rgba(16, 40, 32, .05); }
.queue-tiles .tile b { font-size: 1.05rem; }
.outcome-keys .group-label { font-weight: 700; letter-spacing: .05em; color: var(--muted); }
.outcome-keys .chip { min-height: 46px; padding: .45rem .75rem; border-radius: 12px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 40, 32, .07); justify-content: flex-start; gap: .55rem; transition: border-color .12s, box-shadow .12s, transform .08s; cursor: pointer; text-align: left; }
.outcome-keys .chip:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(15, 122, 85, .16); transform: translateY(-1px); }
.outcome-keys .chip kbd { flex: none; min-width: 1.45rem; height: 1.45rem; display: inline-grid; place-items: center; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font: 600 .75rem/1 inherit; color: var(--muted); }
.outcome-keys .g-spoke .chip { border-left: 4px solid var(--primary); }
.outcome-keys .chip.warn { color: #b42318; border-color: color-mix(in srgb, #b42318 45%, transparent); }
.outcome-keys .chip.warn:hover { border-color: #b42318; box-shadow: 0 4px 12px rgba(180, 35, 24, .14); }
.outcome-keys .chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(15, 122, 85, .3); }
.outcome-keys .chip[aria-pressed="true"] kbd { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }
.outcome-keys .chip.warn[aria-pressed="true"] { background: #b42318; border-color: #b42318; }

/* Pipeline: column heads as cards; compact deal cards with the value in bold and a quiet "No next step". */
.pipeline .col > h3 { background: var(--surface); border-radius: 12px; padding: .6rem .75rem; box-shadow: 0 1px 2px rgba(16, 40, 32, .06); border: 1px solid var(--line); }
.pcard { padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(16, 40, 32, .07); transition: box-shadow .12s, transform .08s; }
.pcard:hover { box-shadow: 0 6px 18px rgba(16, 40, 32, .12); transform: translateY(-1px); }
.pcard .pc-top a { color: var(--ink); font-weight: 600; text-decoration: none; line-height: 1.25; }
.pcard .pc-top a:hover { color: var(--primary); text-decoration: underline; }
.pcard .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
.pcard .pc-foot .badge.ok { background: none; padding: 0; color: var(--ink); font-weight: 700; font-size: .95rem; }
.pcard .pc-foot .badge.warn { background: none; padding: 0; color: #b45309; font-weight: 600; font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; }
.pcard .pc-foot .badge.warn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.pcard.attention { border-left: 3px solid #f59e0b; }

/* Import: steps, and a drop zone for the file. */
.imp-steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.imp-steps li { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem .35rem .4rem; font-weight: 600; }
.imp-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: .85rem; }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: 2rem 1rem; margin: .4rem 0 .8rem;
  border: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); cursor: pointer; transition: background .15s, border-color .15s; }
.drop-zone:hover, .drop-zone.over { background: var(--primary-soft); border-color: var(--primary); }
.drop-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-zone b { font-size: 1.1rem; }
.drop-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(15, 122, 85, .15); margin-bottom: .3rem; }
.drop-ico .ico { width: 26px; height: 26px; }
.drop-link { color: var(--primary); font-weight: 600; text-decoration: underline; }
.drop-zone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.imp-paste { margin-top: .6rem; }
.imp-paste textarea { margin: .5rem 0; width: 100%; }
.drop-zone { position: relative; }
.pipeline .col > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
.pipeline .col > h3 .col-total { flex-basis: 100%; font-size: .95rem; font-weight: 700; color: var(--ink); padding-left: 1rem; }
:root[data-theme="dark"] .outcome-keys .chip.warn { color: #fca5a5; border-color: rgba(248, 113, 113, .5); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .outcome-keys .chip.warn { color: #fca5a5; border-color: rgba(248, 113, 113, .5); } }

/* Calendar sync banner (v0.10.102), as in Pipedrive: a picture, the message, a button, a soft corner, and a ×. */
.sync-banner { position: relative; display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 4rem 1.1rem 1.4rem; margin-bottom: 1rem; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.sync-banner::after { content: ''; position: absolute; right: 0; bottom: 0; width: 220px; height: 100%; background: linear-gradient(135deg, transparent 50%, var(--primary-soft) 50%); pointer-events: none; }
.sync-art { flex: none; width: 92px; height: 84px; }
.sa-cal { fill: #e7f4ee; stroke: #9fd0b9; stroke-width: 1.5; }
.sa-top { fill: #7cc3a1; }
.sa-ring { stroke: #4f9a78; stroke-width: 3; stroke-linecap: round; }
.sa-dot { fill: #1f7a5a; }
.sa-badge { fill: var(--primary); stroke: #fff; stroke-width: 3; }
.sa-arrow { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sync-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.sync-text h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.sync-text p { margin: 0; color: var(--ink); }
.sync-banner > .btn { position: relative; z-index: 1; flex: none; }
.sync-x { position: absolute; top: .6rem; right: .7rem; z-index: 1; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--ink); cursor: pointer; padding: .1rem .4rem; border-radius: 8px; }
.sync-x:hover { background: var(--surface-2); }
.cal-connect.flash { box-shadow: 0 0 0 3px var(--primary), var(--shadow); transition: box-shadow .3s; }
@media (max-width: 720px) { .sync-banner { flex-wrap: wrap; padding: 1rem 2.6rem 1rem 1rem; } .sync-art { width: 64px; height: 58px; } .sync-banner::after { width: 120px; } }
.ins-grid { align-items: start; }

/* Insights workspace (v0.10.103), like Pipedrive's: a panel on the left, the dashboard or report on the right. */
.ins-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ins-side { position: sticky; top: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem .8rem; display: grid; gap: .6rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.side-top { display: grid; gap: .5rem; }
.side-create { width: 100%; }
.side-search { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 .6rem; }
.side-search .ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
.side-search input { border: 0 !important; box-shadow: none !important; background: none; padding: .5rem 0; width: 100%; outline: none; min-height: 0; }
.side-sec { border-top: 1px solid var(--line); padding-top: .5rem; }
.side-head { display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: 0; padding: .35rem .2rem; font: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.side-head .ico { width: 18px; height: 18px; }
.side-caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px .2rem 0; transition: transform .15s; }
.side-head[aria-expanded="false"] .side-caret { transform: rotate(-45deg); }
.side-count { margin-left: auto; font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--surface-2); border-radius: 999px; padding: .1rem .5rem; color: var(--muted); }
.side-sub { margin: .4rem 0 .1rem .4rem; font-size: .8rem; color: var(--muted); }
.side-none { margin: .15rem 0 .3rem 1.2rem; font-size: .88rem; color: var(--muted); }
.side-item { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem .45rem 1.2rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .93rem; }
.side-item .ico { width: 16px; height: 16px; margin-left: -.9rem; color: var(--primary); }
.side-item:hover { background: var(--surface-2); }
.side-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.side-goal { display: grid; gap: .2rem; padding: .3rem .4rem .3rem 1.2rem; font-size: .88rem; }
.ins-content { min-width: 0; }
.ins-content > .page-head:first-child h1 { font-size: 1.5rem; }
.pop-menu { position: absolute; z-index: 90; min-width: 230px; max-width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .16); padding: .35rem; display: grid; }
.pop-item { text-align: left; background: none; border: 0; padding: .55rem .7rem; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; }
.pop-item:hover:not([disabled]) { background: var(--primary-soft); color: var(--primary); }
.pop-item[disabled] { color: var(--muted); cursor: default; }
.pop-sep { height: 1px; background: var(--line); margin: .3rem 0; }

/* Start page */
.ins-hero { text-align: center; padding: 2rem 1rem 2.5rem; display: grid; justify-items: center; gap: .6rem; }
.ins-hero h1 { font-size: 1.8rem; font-weight: 500; margin: .6rem 0 0; }
.ins-hero p { max-width: 640px; margin: 0; }
.ins-hero.small { padding: 2rem 1rem; }
.ins-hero-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: .8rem; }
.ins-hero-art { width: min(520px, 100%); height: auto; }
.ha-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.ha-a { fill: #86d4ae; } .ha-b { fill: #0f7a55; } .ha-c { fill: #b9e6cf; } .ha-d { fill: #0f7a55; } .ha-star { fill: #f59e0b; }

/* Report page */
.rep-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .4rem; }
.rep-name { font-size: 1.5rem; font-weight: 700; border: 1px solid transparent !important; background: none !important; border-radius: 10px !important; padding: .2rem .5rem !important; width: 100%; max-width: 640px; box-shadow: none !important; color: var(--ink); }
.rep-name:hover:not([readonly]), .rep-name:focus { border-color: var(--line) !important; background: var(--surface) !important; }
.rep-bar { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem .5rem; }
.rep-bar .check { margin: 0; }
.rep-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1rem; align-items: start; }
.rep-panel { margin: 0; }
.rep-panel h2 { font-size: 1rem; margin: 0 0 .7rem; }
.rep-controls { display: grid; gap: .8rem; }
.rep-ctl { display: grid; gap: .3rem; }
.rep-ctl > span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.rep-ctl select, .rep-ctl input { width: 100%; }
.rep-charts { display: flex; flex-wrap: wrap; gap: .3rem; }
.rep-charts .seg { flex: 1 1 auto; }
.rep-chart { margin: 0; min-height: 320px; }
.rc-foot { margin: 0; }

/* Charts */
.rc-number { display: grid; justify-items: center; align-content: center; gap: .3rem; padding: 1.5rem 0; min-height: 140px; }
.rc-number b { font-size: 3rem; line-height: 1; color: var(--primary); }
.rc-pie-wrap { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1.2rem; align-items: center; }
.rc-pie { width: 100%; height: auto; }
.rc-pie-total { font-size: 12px; font-weight: 700; fill: var(--ink); }
.rc-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.rc-legend li { display: flex; align-items: center; gap: .5rem; }
.rc-key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.rc-line-wrap { display: grid; gap: .3rem; }
.rc-line { width: 100%; height: 240px; overflow: visible; }
.rc-grid { stroke: var(--line); stroke-width: 1; }
.rc-area { fill: color-mix(in srgb, var(--primary) 14%, transparent); }
.rc-path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rc-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rc-axis { font-size: 11px; fill: var(--muted); }
.rc-total td { font-weight: 700; border-top: 2px solid var(--line); }

/* Dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dash-tile { margin: 0; }
.dash-tile h2 a { color: var(--ink); text-decoration: none; }
.dash-tile h2 a:hover { color: var(--primary); text-decoration: underline; }
.tile-sub { margin: -.5rem 0 0; }
.tile-tools { display: flex; gap: .15rem; opacity: .55; transition: opacity .15s; }
.dash-tile:hover .tile-tools, .dash-tile:focus-within .tile-tools { opacity: 1; }
.tile-tools .tool { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.tile-tools .tool:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 1100px) { .rep-body { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ins-layout { grid-template-columns: 1fr; } .ins-side { position: static; max-height: none; } .dash-grid { grid-template-columns: 1fr; } .rc-pie-wrap { grid-template-columns: 1fr; } }
@media print { .ins-side, .rep-bar, .tile-tools, .rep-panel { display: none !important; } .ins-layout { display: block; } .dash-grid { grid-template-columns: 1fr 1fr; } .rep-name { font-size: 18px; } }

/* v0.10.104: your picture and status in the top bar, as in Teams (a tick for Available, a dash for Do not disturb). */
.me-pres { position: relative; display: inline-flex; flex: none; margin-right: .15rem; }
.me-pres .avatar { width: 32px; height: 32px; font-size: .8rem; }
.me-pres .pres-dot { width: 14px; height: 14px; right: -3px; bottom: -3px; border-width: 2px; display: grid; place-items: center; }
.me-pres .pres-dot.st-available::before { content: ''; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); margin-top: -1px; }
.avatar-btn { gap: .5rem; }
/* The saved-view chips ("All clients") use the same highlight as every other chip, not black. */
.views-chips .chip[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); }

/* Describe a report (v0.10.105). */
.spark { display: inline-block; width: 18px; height: 18px; flex: none; background: linear-gradient(135deg, #0f7a55, #34d399); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2zM19 15l1 2.6 2.6 1-2.6 1L19 22l-1-2.6-2.6-1 2.6-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2zM19 15l1 2.6 2.6 1-2.6 1L19 22l-1-2.6-2.6-1 2.6-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.describe-btn { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.describe-ex { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 1rem; }
.describe-ex .chip { font-size: .82rem; }
.describe-said { display: flex; align-items: center; gap: .5rem; background: var(--primary-soft); border-radius: 12px; padding: .6rem .9rem; margin: 0 0 1rem; }

/* Calendar apps' own icons on their buttons and tiles (v0.10.106). */
.pick-ico.brand { background: none; width: 40px; height: 40px; }
.brand-ico { width: 36px; height: 36px; display: block; }
.brand-btn { gap: .55rem; }
.brand-btn .brand-ico { width: 22px; height: 22px; background: #fff; border-radius: 5px; padding: 1px; }

/* Native form parts (the page box's up and down arrows, date pickers) follow the theme chosen in ShikaCRM, not the
   computer's own setting, so a light page never shows black controls. The pager's box has no arrows at all. */
:root, :root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } }
.pager input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pager input[type=number]::-webkit-inner-spin-button, .pager input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Overdue follow-ups (v0.10.107) */
.overdue-reps { margin-bottom: 1rem; flex-wrap: wrap; }
.overdue-table { width: 100%; border-collapse: collapse; }
.overdue-table th, .overdue-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.overdue-table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.overdue-table select { min-width: 150px; }
.late { display: inline-block; font-weight: 700; font-size: .85rem; border-radius: 999px; padding: .1rem .6rem; }
.late.warn { background: #fef3c7; color: #92400e; }
.late.bad { background: #fde2e1; color: #b42318; }
:root[data-theme="dark"] .late.warn { background: #3a2c0a; color: #fcd34d; }
:root[data-theme="dark"] .late.bad { background: #3b1414; color: #fca5a5; }
.empty-state { text-align: center; padding: 2rem 1rem; }

/* Email and contacts sync (v0.10.108) */
.sync-row { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sync-row .brand-ico { width: 34px; height: 34px; flex: none; }
.sync-btns { display: flex; gap: .4rem; }
.ok-text { color: var(--primary); font-weight: 600; }
.history .synced b { color: var(--primary); }

/* Deals on the client page, products and the price list (v0.10.110). */
.deals-card .deal-row { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.deals-card .deal-row .grow { min-width: 0; }
.deals-card .deal-row .grow > b { margin-right: .3rem; }
.deals-card .deal-row .grow > select, .deals-card .deal-row .grow > .badge { margin: .25rem 0; }
.deals-card .deal-row.closed { opacity: .7; }
.deals-card .deal-row select { width: auto; min-height: 30px; padding: .1rem .5rem; font-size: .85rem; }
.deal-tools { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.deal-tools .deal-tools { display: contents; }
.pc-deal { font-size: .85rem; font-weight: 600; color: var(--primary); margin: .15rem 0; }
.pcard.extra-deal { border-left: 3px solid var(--primary); }
dialog.modal.wide-modal { width: min(880px, calc(100vw - 2rem)); }
.prod-head, .prod-line { display: grid; grid-template-columns: 1.4fr 1.6fr .6fr .9fr .7fr .9fr auto; gap: .4rem; align-items: center; }
.prod-line { margin-bottom: .4rem; }
.prod-line input, .prod-line select { width: 100%; min-height: 38px; }
.prod-tot { text-align: right; font-weight: 600; white-space: nowrap; }
.prod-total { text-align: right; font-size: 1.1rem; margin: .8rem 0; }
.prod-table { width: 100%; border-collapse: collapse; }
.prod-table th, .prod-table td { padding: .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.prod-table input { width: 100%; }
.prod-table th:first-child { width: 38%; }
.prod-table th:last-child { width: 1%; }
.muted-row { opacity: .55; }
.prod-add { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.prod-add-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .6rem; }
@media (max-width: 720px) { .prod-head { display: none; } .prod-line { grid-template-columns: 1fr 1fr; } .prod-add-row { grid-template-columns: 1fr; } }

/* Calling from the browser (v0.10.111). */
.call-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - 2rem));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: .6rem .8rem; }
.call-bar .cb-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.call-bar .cb-status { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-bar .cb-clock { font-variant-numeric: tabular-nums; color: var(--muted); }
.call-bar .cb-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0a100; flex: none; animation: cbpulse 1.2s infinite; }
.call-bar.live .cb-dot { background: #12a150; animation: none; }
@keyframes cbpulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .call-bar .cb-dot { animation: none; } }
.call-bar .cb-tools { display: flex; gap: .3rem; }
.call-bar .cb-hang { background: #d93838; color: #fff; border-color: #d93838; }
.call-bar .cb-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .6rem; max-width: 240px; margin-inline: auto; }
.voice-settings .steps-list { padding-left: 1.2rem; line-height: 1.6; }
.voice-settings select { max-width: 420px; }

/* Queue auto-dial countdown (v0.10.112). */
.autodial-banner { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.autodial-banner .ad-tools { display: flex; gap: .3rem; flex-wrap: wrap; }
.btn.auto-dial[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

/* Recording and incoming calls (v0.10.113). */
.call-bar.ringing { border-color: var(--primary); }
.call-bar.ringing .cb-dot { background: var(--primary); }
.call-bar .cb-answer { background: #12a150; color: #fff; border-color: #12a150; }
.call-bar .cb-rec { background: var(--danger-soft); color: var(--danger); }
.rec-play { margin-top: .3rem; }
.rec-box { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.rec-box audio { height: 36px; max-width: 100%; }

/* Settings > Web forms (v0.10.114). */
.forms-settings .form-item { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .7rem; }
.forms-settings .form-item > summary { cursor: pointer; }
.forms-settings .copy-row { align-items: flex-start; flex-wrap: nowrap; }
.forms-settings .copy-row input, .forms-settings .copy-row textarea { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.forms-settings fieldset.ticks { border: 0; padding: 0; margin: .4rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.forms-settings fieldset.ticks legend { font-weight: 600; margin-bottom: .3rem; }
.forms-settings .form-new { align-items: flex-end; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.forms-settings .copy-row .btn { white-space: nowrap; flex: none; }
@media (max-width: 720px) { .forms-settings .copy-row { flex-wrap: wrap; } }

/* Leads by email (v0.10.115). */
.lead-mail { margin-top: 1rem; }
.lead-mail .more-settings { border: 1px dashed var(--line); border-radius: var(--radius); padding: .5rem .8rem; }
.lead-mail .more-settings > summary { cursor: pointer; color: var(--muted); }

/* Settings > API & webhooks (v0.10.116). */
.api-settings + .api-settings { margin-top: 1rem; }
.api-settings .form-item { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .7rem; }
.api-settings .form-item > summary { cursor: pointer; }
.api-settings .hook-url { word-break: break-all; }
.api-settings .copy-row { align-items: center; flex-wrap: nowrap; }
.api-settings .copy-row input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.api-settings .copy-row .btn { flex: none; }
.api-settings fieldset.ticks { border: 0; padding: 0; margin: .4rem 0; display: grid; gap: .3rem; }
.api-settings fieldset.ticks legend { font-weight: 600; margin-bottom: .3rem; }
.api-settings .form-new { align-items: flex-end; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; flex-wrap: wrap; }
.api-settings .hook-new { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.api-settings .deliveries { padding-left: 1.1rem; margin: .3rem 0 0; }
.ok-text { color: var(--ok); font-weight: 600; } .bad-text { color: var(--danger); font-weight: 600; }
.api-settings .prod-table td, .api-settings .prod-table th { white-space: nowrap; }

/* Billing (v0.10.117). */
.plan-pill.warn { background: var(--warn-soft); color: var(--warn); }
.locked-card { max-width: 620px; margin: 2rem auto; text-align: center; padding: 2rem; }
.locked-card h1 { margin-top: 0; }
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Leads and Deals in the menu (v0.10.119). */
.lead-list { list-style: none; padding: 0; margin: 0; }
.lead-row { display: flex; gap: 1rem; justify-content: space-between; padding: .9rem 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lead-row:first-child { border-top: 0; }
.lead-row.waiting { border-left: 3px solid var(--warn); }
.lead-main { flex: 1 1 320px; min-width: 0; }
.lead-name { font-weight: 700; }
.lead-gist { margin: .35rem 0 0; color: var(--ink); }
.lead-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.lead-acts { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.lead-ok { color: var(--ok); font-size: .9rem; font-weight: 600; }
@media (max-width: 720px) { .lead-side { align-items: flex-start; } .lead-acts { justify-content: flex-start; } }
.deals-head-right { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.deal-rep-pick { align-items: center; gap: .5rem; margin-bottom: .8rem; }
.pick-list { display: grid; gap: .2rem; margin: -.3rem 0 .6rem; }
.pick-list .pick { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; cursor: pointer; font: inherit; color: inherit; }
.pick-list .pick:hover, .pick-list .pick:focus { border-color: var(--primary); }
.sidenav .nav-badge.leads-badge, .sidenav .navlink.active .nav-badge.leads-badge, .more-sheet .nav-badge.leads-badge { background: #e5484d; color: #fff; }

/* + Lead and the Add lead window (v0.10.120). */
.lead-title { align-items: center; gap: 1rem; }
.split-btn { position: relative; display: inline-flex; }
.split-btn > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .35); padding-inline: .55rem; }
.split-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); padding: .3rem; }
.split-menu .menu-item { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 7px; color: var(--ink); text-decoration: none; }
.split-menu .menu-item:hover { background: var(--surface-2); }
.lead-first { text-align: center; padding: 3rem 1rem 1rem; }
.lead-first h2 { font-size: 1.6rem; font-weight: 500; margin: 0 0 .6rem; }
.lead-first .muted { max-width: 620px; margin: 0 auto 1.4rem; }
.lead-first-btns { justify-content: center; gap: .8rem; margin-bottom: 2rem; }
.lead-first-video { display: flex; justify-content: center; margin-bottom: 1rem; }
dialog.modal.lead-modal { width: min(1000px, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
dialog.modal.lead-modal > h2 { margin: 0; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.lead-form { display: flex; flex-direction: column; max-height: calc(100vh - 9rem); }
.lead-cols { display: grid; grid-template-columns: 1fr 1fr; overflow-y: auto; }
.lead-left { padding: 1rem 1.4rem; border-right: 1px solid var(--line); }
.lead-right { padding: 1rem 1.4rem; }
.lead-form .field { margin-bottom: .8rem; }
.in-icon { position: relative; }
.in-icon svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.in-icon input { padding-left: 2.3rem; width: 100%; }
.value-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lead-sep { display: flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .3rem 0 1rem; }
.lead-sep::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.multi { display: grid; gap: .5rem; }
.multi-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem; }
.link-btn { background: none; border: 0; padding: .4rem 0; font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; text-align: left; }
.info-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; font-size: .65rem; font-weight: 700; color: var(--muted); cursor: help; vertical-align: middle; }
.consent-tick { align-items: flex-start; margin-top: .4rem; }
.consent-tick .hint { display: block; }
.lead-form > .error { margin: 0; padding: 0 1.4rem; }
.lead-foot { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.4rem; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 720px) { .lead-cols { grid-template-columns: 1fr; } .lead-left { border-right: 0; } }
.split-caret .tri { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
dialog.modal.lead-modal { position: fixed; } .modal-x { position: absolute; top: .7rem; right: .9rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem .4rem; border-radius: 6px; } .modal-x:hover { background: var(--surface-2); color: var(--ink); }

/* Settings > Pipeline stages (v0.10.122). */
.stages-settings .pct-in { display: flex; align-items: center; gap: .3rem; max-width: 110px; }
.stages-settings .pct-in input { width: 80px; }

/* A deal's page and the forecast (v0.10.122). */
.back-link { display: inline-block; margin-bottom: .4rem; }
.deal-head { align-items: flex-start; }
.deal-head .row { gap: .4rem; flex-wrap: wrap; }
.deal-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.deal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
a.deal-open { font-weight: 700; }
.forecast-table tr.overdue td:first-child { color: var(--danger); font-weight: 600; }
@media (max-width: 900px) { .deal-grid { grid-template-columns: 1fr; } .deal-fields { grid-template-columns: 1fr; } }

/* "Import your contact and sales data" banner on Deals (v0.10.123). */
.import-banner { position: relative; display: flex; align-items: center; gap: 1.2rem; background: #ece8fb; border: 1px solid #d9d2f5; border-radius: 10px; padding: .75rem 3.2rem .75rem 1.4rem; margin-bottom: 1rem; color: #1c2434; }
.import-banner .ib-art { flex: none; display: flex; }
.import-banner .ib-text { flex: 1 1 auto; min-width: 0; }
.import-banner h2 { margin: 0 0 .15rem; font-size: 1.02rem; font-weight: 700; }
.import-banner p { margin: 0; line-height: 1.4; font-size: .92rem; color: #2b3445; }
.import-banner .ib-btn { flex: none; background: #6d5ce8; border-color: #6d5ce8; color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.import-banner .ib-btn:hover { background: #5b4bd6; }
.import-banner .ib-close { position: absolute; top: 50%; transform: translateY(-50%); right: .8rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: #3a3f4b; cursor: pointer; padding: .1rem .35rem; border-radius: 6px; }
.import-banner .ib-close:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .import-banner { background: #2a2050; border-color: #3b2f6e; color: #e8edf6; }
:root[data-theme="dark"] .import-banner p, :root[data-theme="dark"] .import-banner .ib-close { color: #c9cfe0; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .import-banner { background: #2a2050; border-color: #3b2f6e; color: #e8edf6; } :root[data-theme="auto"] .import-banner p, :root[data-theme="auto"] .import-banner .ib-close { color: #c9cfe0; } }
@media (max-width: 720px) { .import-banner { flex-wrap: wrap; padding: .9rem 2.8rem .9rem 1rem; gap: .8rem; } .import-banner .ib-art svg { width: 52px; height: 52px; } .import-banner .ib-close { top: .9rem; transform: none; } }
.import-banner svg * { transform-box: fill-box; }
.import-banner .ib-doc { transform-origin: center bottom; animation: ib-rise .5s cubic-bezier(.2, .8, .3, 1) both; }
.import-banner .ib-line { transform-origin: left center; animation: ib-fill .35s ease-out both; }
.import-banner .ib-l1 { animation-delay: .35s; } .import-banner .ib-l2 { animation-delay: .5s; }
.import-banner .ib-badge { transform-origin: center; animation: ib-pop .45s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
.import-banner .ib-arrow { animation: ib-lift .5s ease-in-out 1.05s 2; }
@keyframes ib-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ib-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ib-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ib-lift { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .import-banner svg * { animation: none !important; } }
.deal-video { margin-bottom: 1rem; max-width: 360px; }

/* One Deals page with views (v0.10.124). */
.deals-head { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.view-segs { flex-wrap: wrap; }
.status-segs { margin: -.4rem 0 1rem; }

/* The demo company (v0.10.126). */
.demo-list { line-height: 1.6; padding-left: 1.2rem; }
.demo-ready h2 { margin-bottom: .2rem; }
.demo-strip { background: var(--warn-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 10px; padding: .5rem .9rem; margin-bottom: 1rem; font-size: .92rem; }
.demo-strip .link-btn { padding: 0; }

/* Automatic assignment (v0.10.127). */
.crumb { align-items: center; gap: .5rem; }
.crumb svg { color: var(--primary); }
.assign-banner { position: relative; display: flex; align-items: center; gap: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 3.2rem .9rem 1.4rem; margin-bottom: 1.2rem; }
.assign-banner .ab-art { flex: none; display: flex; }
.assign-banner .ab-text { flex: 1 1 auto; min-width: 0; }
.assign-banner h2 { margin: 0 0 .15rem; font-size: 1.05rem; }
.assign-banner p { margin: 0; color: var(--muted); }
.assign-banner .ib-close { position: absolute; top: .6rem; right: .8rem; background: none; border: 0; font-size: 1.5rem; color: var(--muted); cursor: pointer; }
.assign-banner .sp-a { animation: sp-swing .6s ease-out both; transform-box: fill-box; transform-origin: right center; }
.assign-banner .sp-b { animation: sp-swing2 .6s ease-out .15s both; transform-box: fill-box; transform-origin: left center; }
@keyframes sp-swing { from { transform: rotate(-14deg) scaleX(.6); } to { transform: none; } }
@keyframes sp-swing2 { from { transform: rotate(14deg) scaleX(.6); } to { transform: none; } }
.assign-top { align-items: center; margin-bottom: .6rem; }
.learn-more { position: relative; }
.learn-more summary { cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.learn-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, 85vw); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); padding: .8rem 1rem; font-size: .92rem; }
.assign-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.assign-tab { padding: .6rem 1rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; font-weight: 600; }
.assign-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.assign-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.assign-chip { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; border-radius: 8px; padding: .4rem .7rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.assign-chip.on, .assign-chip:hover { background: var(--primary-soft); color: var(--primary); }
.rule-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.rule-row { display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; }
.rule-row.off { opacity: .6; }
.rule-no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.rule-sentence { flex: 1 1 auto; min-width: 0; }
.rule-tools { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.assign-empty { text-align: center; padding: 1rem 0 2rem; }
.assign-empty .route-art svg { max-width: 100%; height: auto; }
.assign-empty .route-art .rt-p { animation: rt-in .4s cubic-bezier(.3, 1.5, .5, 1) both; transform-box: fill-box; transform-origin: center; } .assign-empty .rt-p1 { animation-delay: .15s; } .assign-empty .rt-p2 { animation-delay: .3s; }
@keyframes rt-in { from { transform: scale(.6); } to { transform: none; } }
.assign-presets { justify-content: center; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rule-form .rule-lines { display: grid; gap: .6rem; margin-bottom: 1rem; }
.rule-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rule-line select, .rule-line input { width: auto; min-width: 160px; }
.rule-word { font-weight: 700; min-width: 80px; }
.rule-people { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding-left: 88px; }
.rule-say { background: var(--primary-soft); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; }
.rule-preview { margin: .2rem 0 0; font-weight: 600; color: var(--ink); }
dialog.modal.rule-modal { width: min(720px, calc(100vw - 2rem)); }
@media (prefers-reduced-motion: reduce) { .assign-banner svg *, .assign-empty svg * { animation: none !important; } }
@media (max-width: 720px) { .rule-people { padding-left: 0; } .rule-word { min-width: 0; } .assign-banner { flex-wrap: wrap; } }
.learn-more summary { list-style: none; } .learn-more summary::-webkit-details-marker { display: none; } .learn-more summary::after { content: "▾"; font-size: .8rem; margin-left: .2rem; }
.learn-more summary::before { content: none !important; display: none !important; }

/* Icons in the Settings list (v0.10.128). */
.subnav a { display: flex; align-items: center; gap: .65rem; }
.subnav a svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.subnav a.active svg { color: var(--primary); }
.settings-index a > .si-ico { flex: none; display: flex; color: var(--muted); }
.settings-index a > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: .1rem; }

/* Automations, laid out like Automatic assignment (v0.10.129). */
.auto-banner .ab-card { animation: ab-slide .5s ease-out both; transform-box: fill-box; }
.auto-banner .ab-bolt { animation: ab-pop .45s cubic-bezier(.3, 1.6, .5, 1) .3s both; transform-box: fill-box; transform-origin: center; }
.auto-banner .ab-card2 { animation: ab-slide2 .5s ease-out .55s both; transform-box: fill-box; }
@keyframes ab-slide { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes ab-slide2 { from { transform: translateX(10px); } to { transform: none; } }
@keyframes ab-pop { from { transform: scale(.4); } to { transform: none; } }
.route-art .af-in, .route-art .af-out { transform-box: fill-box; transform-origin: center; animation: rt-in .4s cubic-bezier(.3, 1.5, .5, 1) both; }
.route-art .af-in1 { animation-delay: .1s; } .route-art .af-in2 { animation-delay: .2s; } .route-art .af-out0 { animation-delay: .45s; } .route-art .af-out1 { animation-delay: .55s; }
.route-art .af-bolt { transform-box: fill-box; transform-origin: center; animation: ab-pop .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.auto-row .auto-ico svg { width: 16px; height: 16px; }
.auto-row .rule-sentence > div { margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) { .auto-banner svg *, .route-art svg * { animation: none !important; } }

/* The setup guide (v0.10.130), as in Pipedrive. */
.su-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f4f2ff; border-radius: 16px; padding: 2.4rem 0 0 2.4rem; overflow: hidden; margin-bottom: 1.6rem; min-height: 230px; }
.su-hero-text { flex: 1 1 520px; max-width: 640px; padding-bottom: 2.2rem; color: #1c2434; }
.su-hero h1 { font-size: 2rem; font-weight: 500; margin: 0 0 1.2rem; }
.su-hero p { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.1rem; }
.su-green { color: #138046; }
.su-bar { height: 10px; border-radius: 999px; background: #dcd8f0; overflow: hidden; max-width: 620px; }
.su-bar > span { display: block; height: 100%; border-radius: 999px; background: #7f74f2; transition: width .4s; }
.su-count { text-transform: uppercase; letter-spacing: .03em; font-size: .78rem !important; font-weight: 700; color: #5b6170; text-align: right; max-width: 620px; margin-top: .5rem !important; }
.su-art { flex: none; align-self: flex-end; display: flex; }
.su-art .su-star { transform-box: fill-box; transform-origin: center; animation: su-pop .6s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.su-art .su-star2 { transform-box: fill-box; transform-origin: center; animation: su-spin 1.2s ease-out .4s both; }
.su-art .su-dot { transform-box: fill-box; transform-origin: center; animation: su-pop .5s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
@keyframes su-pop { from { transform: scale(.3); } to { transform: none; } }
@keyframes su-spin { from { transform: rotate(-40deg) scale(.8); } to { transform: none; } }
.su-done-card { display: flex; align-items: flex-start; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.4rem; margin-bottom: 1.6rem; }
.su-done-card b { text-decoration: line-through; color: var(--muted); }
.su-done-card p { margin: .2rem 0 0; color: var(--muted); text-decoration: line-through; }
.su-list-h { text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; color: var(--muted); margin: 0 0 .8rem; }
.gs-check { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7f74f2; color: #fff; font-size: .8rem; font-weight: 700; flex: none; }
.gs-check.big { width: 28px; height: 28px; }
.gs-check.empty { background: transparent; border: 2px solid var(--line); }
.su-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: .8rem; }
.su-group > summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; }
.su-group > summary::-webkit-details-marker { display: none; }
.su-group > summary::before { content: none !important; display: none !important; }
.su-g-title { flex: 1 1 auto; font-size: 1.05rem; }
.su-mini { width: 100px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex: none; }
.su-mini > span { display: block; height: 100%; background: #7f74f2; }
.su-g-count { color: var(--muted); white-space: nowrap; }
.su-chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 .3rem 3px; transition: transform .15s; }
.su-group[open] .su-chev { transform: rotate(-135deg); margin-bottom: -3px; }
.su-tasks { border-top: 1px solid var(--line); }
.gs-task { display: flex; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.gs-task:last-child { border-bottom: 0; }
.gs-task-ico { flex: none; color: var(--muted); padding-top: .15rem; }
.gs-task-main { flex: 1 1 auto; min-width: 0; }
.gs-task-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.02rem; }
.gs-time { display: inline-flex; align-items: center; gap: .25rem; background: var(--surface-2); border-radius: 999px; padding: .1rem .5rem; font-size: .78rem; font-weight: 600; color: var(--ink); }
.gs-time svg { width: 13px; height: 13px; }
.gs-task-hint { margin: .3rem 0 .7rem; color: var(--muted); }
.gs-task.done .gs-task-title b, .gs-task.done .gs-task-hint { text-decoration: line-through; color: var(--muted); }
.gs-task-side { flex: none; display: flex; align-items: center; gap: .4rem; }
.su-foot { margin-top: 1rem; }
.su-card { display: flex; justify-content: space-between; align-items: stretch; gap: 1rem; background: #f4f2ff; border-color: #e3defd; padding-right: 0; padding-bottom: 0; overflow: hidden; color: #1c2434; }
.su-card .su-card-text { flex: 1 1 auto; padding-bottom: 1rem; min-width: 0; }
.su-card .su-art.small svg { width: 210px; height: 154px; }
.su-next { display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: 10px; padding: .7rem .9rem; margin: .4rem 0 .6rem; }
.su-next > div { flex: 1 1 auto; min-width: 0; }
.su-open { font-weight: 700; color: #138046; }
:root[data-theme="dark"] .su-hero, :root[data-theme="dark"] .su-card { background: #221d3d; color: var(--ink); border-color: #2f2856; }
:root[data-theme="dark"] .su-next { background: var(--surface); }
:root[data-theme="dark"] .su-hero-text { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .su-hero, :root[data-theme="auto"] .su-card { background: #221d3d; color: var(--ink); border-color: #2f2856; } :root[data-theme="auto"] .su-next { background: var(--surface); } :root[data-theme="auto"] .su-hero-text { color: var(--ink); } }
@media (max-width: 820px) { .su-hero { padding: 1.4rem 1.2rem 0; flex-wrap: wrap; } .su-hero h1 { font-size: 1.5rem; } .su-art svg { width: 200px; height: 146px; } .su-mini { display: none; } .gs-task { flex-wrap: wrap; } .su-card .su-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .su-art svg * { animation: none !important; } }
.su-group > summary .gs-check { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; max-height: 24px; box-sizing: border-box; padding: 0; } .su-group > summary .su-g-title, .su-group > summary .su-g-count { color: var(--ink); } .su-group > summary .su-g-count { color: var(--muted); } .su-group > summary .su-chev { color: var(--ink); }

/* Support connection (v0.10.131). */
.support-conn .copy-inline { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.support-conn code { background: var(--surface-2); padding: .15rem .4rem; border-radius: 6px; word-break: break-all; }
.support-conn form { max-width: 560px; }

/* Contact support (v0.10.132): a floating chat window at the bottom right, as in monday.com. */
.kc-panel { position: fixed; right: 20px; bottom: 20px; z-index: 75; width: 380px; height: min(640px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-radius: 22px; box-shadow: 0 12px 48px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .04); overflow: hidden; animation: kc-in .2s ease-out; }
@keyframes kc-in { from { transform: translateY(16px) scale(.98); } }
.kc-head { position: relative; display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem .8rem .6rem; }
.kc-name { flex: 1; font-size: 1.1rem; }
.kc-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #555b66; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.kc-icon:hover { background: var(--surface-2); }
.kc-x { font-size: 1.9rem; font-weight: 300; }
.kc-min { width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.kc-menu { position: absolute; top: 3rem; left: .6rem; z-index: 2; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); overflow: hidden; }
.kc-menu .menu-item { min-height: 40px; padding: .55rem .9rem; }
.kc-menu .menu-item:last-child { border-bottom: 0; }
.kira-face { display: inline-flex; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.kira-face svg { width: 100%; height: 100%; }
.kira-face.sm { width: 32px; height: 32px; }
.kira-face.xs { width: 30px; height: 30px; }
.kira-face.lg { width: 76px; height: 76px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.kc-log { flex: 1; overflow-y: auto; padding: .4rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .9rem; }
.kc-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.6rem 0 .6rem; }
.kc-intro b { font-size: 1.3rem; margin-top: .4rem; }
.kc-intro p { margin: 0; color: var(--muted); }
.kc-day { text-align: center; color: var(--muted); font-size: .85rem; margin: .8rem 0 0; }
.kc-row { display: flex; align-items: flex-start; gap: .6rem; }
.kc-row.mine { justify-content: flex-end; }
.kc-msg { display: grid; gap: .2rem; max-width: 82%; }
.kc-row.mine .kc-msg { justify-items: end; }
.kc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.45; }
.kc-row.theirs .kc-text { padding-top: .2rem; }
.kc-row.mine .kc-text { background: #16613f; color: #fff; padding: .55rem .85rem; border-radius: 18px 18px 4px 18px; }
.kc-note { font-size: .75rem; color: var(--muted); }
.kc-form { padding: .3rem 1rem 0; }
.kc-input { display: flex; align-items: flex-end; gap: .4rem; border: 1px solid var(--line); border-radius: 26px; padding: .35rem .35rem .35rem 1.1rem; background: var(--surface); }
.kc-input:focus-within { border-color: #8f96a3; }
.kc-input textarea { flex: 1; border: 0 !important; outline: 0; box-shadow: none !important; resize: none; padding: .55rem 0; min-height: 0; background: transparent; font: inherit; font-size: 1.02rem; line-height: 1.4; max-height: 140px; overflow-y: hidden; }
.kc-send { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #16613f; color: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.kc-send:disabled { background: #8a8f98; cursor: default; }
.kc-err { margin: .3rem .4rem 0; font-size: .85rem; }
.kc-err:empty { display: none; }
.kc-privacy { display: block; text-align: center; font-size: .82rem; color: #4a4f8a; padding: .55rem 0 .7rem; min-height: 1.6rem; }
.kc-past { display: grid; gap: .1rem; padding-top: .6rem; }
.kc-past-h { font-size: 1.05rem; margin-bottom: .4rem; }
.kc-past .btn { justify-self: start; margin-top: .8rem; }
.kc-conv { display: grid; gap: .15rem; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .7rem .2rem; font: inherit; color: var(--ink); cursor: pointer; }
.kc-conv:hover .kc-conv-t { color: var(--primary); }
.kc-conv.unread .kc-conv-t { font-weight: 700; }
.kc-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 75; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.kc-bubble .kira-face { width: 60px; height: 60px; }
:root[data-theme="dark"] .kc-icon { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .kc-icon { color: var(--muted); } }
@media (max-width: 520px) { .kc-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .kc-panel { animation: none; } }

/* Temporary passwords (v0.10.133): Copy beside Generate. */
.pw-btns { gap: .4rem; }
.auth .pw-checklist { margin-bottom: .7rem; }

/* My day (v0.10.134): the hello as in monday.com, and the setup card as one slim row. */
.md-hello { align-items: flex-end; margin-bottom: 1.2rem; }
.md-hello .md-date { margin: 0 0 .2rem; color: var(--muted); font-size: .9rem; }
.md-hello h1, .page-head.md-hello h1 { font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 1.25; } /* v0.10.135: HubSpot-sized, regular weight */
.su-slim { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #f4f2ff; border: 1px solid #e3defd; border-radius: 12px; padding: .55rem .7rem .55rem 1rem; margin-bottom: 1rem; color: #1c2434; }
.su-slim-sum { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; flex: none; }
.su-slim-sum:hover b { text-decoration: underline; }
.su-slim-prog { display: flex; align-items: center; gap: .45rem; }
.su-slim .su-bar { width: 110px; height: 7px; }
.su-slim-n { font-size: .82rem; font-weight: 700; color: #5b6170; }
.su-slim-next { display: flex; align-items: center; gap: .5rem; flex: 1 1 200px; min-width: 0; border-left: 1px solid #dcd8f0; padding-left: 1rem; }
.su-slim-next .gs-task-ico { padding: 0; display: flex; }
.su-slim-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-slim-btns { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.su-slim-x { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: #5b6170; cursor: pointer; padding: 0 .35rem; border-radius: 6px; }
.su-slim-x:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .su-slim { background: #221d3d; border-color: #2f2856; color: var(--ink); }
:root[data-theme="dark"] .su-slim-next { border-color: #2f2856; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .su-slim { background: #221d3d; border-color: #2f2856; color: var(--ink); } :root[data-theme="auto"] .su-slim-next { border-color: #2f2856; } }
@media (max-width: 720px) { .md-hello h1, .page-head.md-hello h1 { font-size: 1.3rem; } .su-slim-next { border-left: 0; padding-left: 0; flex-basis: 100%; order: 3; } .su-slim-guide { display: none; } }

/* Your companies in the account menu (v0.10.136). */
.org-switch { display: grid; gap: .3rem; }
.org-list { display: grid; gap: .15rem; margin-top: .2rem; }
.org-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: .45rem .5rem; font: inherit; color: var(--ink); cursor: pointer; }
.org-item:hover { background: var(--surface-2); }
.org-item.on { cursor: default; background: var(--surface-2); }
.org-item-t { flex: 1; min-width: 0; display: grid; }
.org-item-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-logo.small { width: 28px; height: 28px; font-size: .75rem; flex: none; }
.org-tick { color: var(--primary); font-weight: 700; }

/* Email sending (v0.10.137). */
.mail-presets { align-items: center; gap: .4rem; flex-wrap: wrap; }
.mail-more > summary { cursor: pointer; font-weight: 600; margin: .3rem 0 .6rem; }

/* v0.10.138: Copy inside the password box, beside the eye. */
.pw-wrap.has-copy input { padding-right: 4.9rem; }
.pw-wrap .pw-toggle.pw-copy { position: absolute; right: 2.6rem; }
/* The More panel slides out from the side menu (from the bottom on a phone). */
@keyframes more-slide { from { transform: translateX(-14px); clip-path: inset(0 100% 0 0 round 16px); } to { transform: none; clip-path: inset(0 0 0 0 round 16px); } }
@keyframes more-rise { from { transform: translateY(18px); } to { transform: none; } }
@media (min-width: 821px) { .more-sheet:not(.hidden) { animation: more-slide .22s cubic-bezier(.2, .8, .2, 1); } }
@media (max-width: 820px) { .more-sheet:not(.hidden) { animation: more-rise .2s ease-out; } }
@media (prefers-reduced-motion: reduce) { .more-sheet:not(.hidden) { animation: none; } }

/* v0.10.139: the Calendar panel slides out like More, and both slide back in when they close. */
@keyframes more-slide-out { from { transform: none; clip-path: inset(0 0 0 0 round 16px); } to { transform: translateX(-14px); clip-path: inset(0 100% 0 0 round 16px); } }
@keyframes more-sink { from { transform: none; } to { transform: translateY(calc(100% + 120px)); } }
@media (min-width: 821px) {
  .nav-group.open .nav-sub { animation: more-slide .22s cubic-bezier(.2, .8, .2, 1); }
  .more-sheet.sliding-out:not(.hidden), .nav-group.open .nav-sub.sliding-out { animation: more-slide-out .18s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
}
@media (max-width: 820px) { .more-sheet.sliding-out:not(.hidden) { animation: more-sink .2s ease-in forwards; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .nav-group.open .nav-sub, .more-sheet.sliding-out:not(.hidden), .nav-group.open .nav-sub.sliding-out { animation: none; } }

/* Your company's address (v0.10.141). */
.addr-row { align-items: center; gap: .3rem; flex-wrap: wrap; }
.addr-row .addr-slug { max-width: 240px; }