:root {
  --bg: #F4F1EA;
  --card: #FFFFFF;
  --ink: #15171C;
  --muted: #62666F;
  --line: #E2DDD2;
  --blue: #2146E6;
  --blue-press: #1634B8;
  --blue-wash: #EDF1FF;
  --tip: #FF6A1A;
  --good: #16794A;
  --warn: #9A5300;
  --bad: #B3261E;
  --r: 16px;
  --tabs: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(var(--tabs) + var(--safe-b) + 24px);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
main { max-width: 640px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 8px 0 6px; }
h2 { font-size: 13px; font-weight: 650; color: var(--muted); margin: 28px 4px 10px; letter-spacing: 0.01em; }
.card h2 { margin: 0 0 10px; color: var(--ink); font-size: 17px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }

/* top bar */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: rgba(244, 241, 234, .92);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.flame { width: 16px; height: 22px; }
.flame.big { width: 34px; height: 46px; display: block; margin: 0 auto 12px; }
.who-top { margin-left: auto; color: var(--muted); font-size: 14px; }
.gear { color: var(--muted); display: grid; place-items: center; width: 36px; height: 36px; margin-right: -8px; }
.gear svg { width: 22px; height: 22px; }
.testbar { background: #FFF1D6; color: #6B4300; font-size: 13px; text-align: center; padding: 6px 12px; }
.flash { max-width: 608px; margin: 10px auto 0; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 15px; }

/* bottom tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around;
  height: calc(var(--tabs) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.tabs a svg { width: 26px; height: 26px; }
.tabs a.on { color: var(--blue); }

/* intro */
.hello { padding: 18px 4px 4px; }
.lede { color: var(--muted); font-size: 17px; }
.back { display: inline-block; font-size: 15px; margin-bottom: 4px; }
.back::before { content: "‹ "; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 0 0 12px; }
.card.bad { border-color: #F0C7C3; background: #FFF6F5; }
.card.good { border-color: #BFE3CF; background: #F3FBF6; }
.card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.who { display: flex; flex-direction: column; min-width: 0; }
.who a, .who b { color: var(--ink); font-weight: 650; font-size: 17px; }
.sub { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.why { color: var(--muted); font-size: 14px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.why::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tip); margin: 0 7px 2px 0; }

.chip { display: inline-block; font-size: 12px; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: #EFECE5; color: #4A4D55; white-space: nowrap; }
.chip.st-now, .chip.st-overdue { background: #FFE9DC; color: #A03F00; }
.chip.st-soon { background: var(--blue-wash); color: var(--blue-press); }
.chip.off { background: #F1EFEA; color: var(--muted); font-weight: 500; }

/* the message itself */
textarea, input, select {
  font: inherit; font-size: 16px; color: var(--ink); width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: #FBFAF7; padding: 12px 14px;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--blue); outline-offset: -1px; background-color: #fff; }
/* one dropdown look everywhere: iPhone otherwise draws its own grey pill with the text cut short */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 38px; line-height: 1.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6F78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.msg { background: #F2F6FF; border-color: #D9E2FF; border-radius: 18px 18px 6px 18px; line-height: 1.4; resize: vertical; min-height: 120px; }
.signoff { color: var(--muted); font-size: 13px; padding: 6px 4px 0; white-space: pre-line; overflow-wrap: anywhere; }
.meter { color: var(--muted); font-size: 12px; padding: 2px 4px 0; }
.meter.over { color: var(--bad); font-weight: 600; }
.subj { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.subj input { margin-top: 4px; }

.facts { margin: 10px 0 0; font-size: 14px; }
.facts summary { cursor: pointer; color: var(--blue); font-weight: 600; list-style: none; padding: 4px 0; }
.facts summary::-webkit-details-marker { display: none; }
.facts summary::after { content: " ›"; }
.facts[open] summary::after { content: " ⌄"; }
.facts ul { margin: 6px 0 0; padding-left: 18px; color: #33363D; }
.facts li { margin-bottom: 6px; }
.src { display: block; color: var(--muted); font-size: 12px; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.actions form { display: contents; }
.btn {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:active { background: var(--blue-press); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn[disabled] { opacity: .6; }
.sentcheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--blue-wash); }
.sentcheck span { font-weight: 600; margin-right: auto; }
.sentcheck[hidden] { display: none; }

/* replies */
blockquote { margin: 6px 0 0; padding: 12px 14px; background: #F1EFEA; border-radius: 18px 18px 18px 6px; font-size: 16px; }
.card.reply { border-color: #FFD3B8; }

/* lists */
.list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nm right" "sub right"; padding: 12px 16px; color: var(--ink); align-items: center; column-gap: 10px; }
.list .nm { grid-area: nm; font-weight: 600; }
.list .sub { grid-area: sub; }
.list .right { grid-area: right; color: var(--muted); font-size: 14px; }
.list.people { margin-top: 8px; }

.search input { margin: 6px 0 10px; background: #fff; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters a { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; }
.filters a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* queued */
.card.queued .row { display: flex; justify-content: space-between; gap: 10px; }
.preview { color: #33363D; font-size: 15px; margin: 6px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* person */
.contact-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.status-card .kv { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.status-card .kv span { color: var(--muted); font-size: 14px; grid-row: span 2; }
.status-card .kv em { grid-column: 2; color: var(--muted); font-style: normal; font-size: 14px; }
.status-card .kv b { font-weight: 600; }
.bubble { max-width: 92%; margin: 0 0 10px; }
.bubble p { margin: 0; padding: 10px 14px; border-radius: 18px; white-space: pre-line; font-size: 15px; overflow-wrap: anywhere; }
.bubble.out { margin-left: auto; }
.bubble.out p { background: #E6ECFF; border-bottom-right-radius: 6px; }
.bubble.in p { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.s-skipped p, .bubble.s-failed p { opacity: .55; }
.bubble .meta { font-size: 12px; color: var(--muted); padding: 2px 6px; }
.bubble.out .meta { text-align: right; }

/* forms */
.form label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.form label input, .form label select, .form label textarea { margin-top: 4px; font-weight: 400; }
.form.inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form.inline > * { flex: 1 1 140px; width: auto; }
/* Settings > Texts from your own mobile: a field and its button on one line, wrapping on a phone */
.own-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0; }
.own-row label { flex: 1 1 14em; min-width: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.own-row label input { margin-top: 4px; font-weight: 400; }
.own-row .btn { flex: none; }
/* Today: notes waiting for the agent's own Claude to write */
.rread { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--blue-wash); font-size: 14px; line-height: 1.45; }
/* Settings > Connect your Claude */
.good-line { margin: 8px 0 12px; padding: 8px 12px; border-radius: 10px; background: #EAF4EE; color: #1F6B45; font-weight: 600; }
#claude .btn + .btn, #claude form + .btn { margin-top: 8px; }
/* person page: research by their Claude, each finding with its link and a Remove */
.pf-research li { margin-bottom: 6px; }
.pf-research form.inline { display: inline-block; margin: 0 0 0 6px; }
.pf-research form.inline .btn { min-height: 0; padding: 2px 8px; }
.form.danger { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.tick { display: flex !important; align-items: center; gap: 10px; color: var(--ink) !important; font-size: 16px !important; }
.tick input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--blue); }
details.edit > summary, details.one > summary { cursor: pointer; font-weight: 600; color: var(--blue); padding: 6px 4px; }
details.edit[open] > summary { margin-bottom: 10px; }
.dump { min-height: 220px; margin-bottom: 12px; }
.cand dl { margin: 8px 0; }
.cand dl div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; font-size: 15px; padding: 2px 0; }
.cand dt { color: var(--muted); }
.cand dd { margin: 0; }
.cand em { color: var(--muted); font-style: normal; }
.consent { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.consent select { margin-top: 4px; }
.sticky-actions { position: sticky; bottom: calc(var(--tabs) + var(--safe-b) + 8px); display: flex; gap: 8px; padding: 10px; background: rgba(244, 241, 234, .95); border-radius: 999px; }
.sticky-actions .btn.primary { flex: 1; }

.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty b { color: var(--ink); }
.stats { text-align: center; color: var(--muted); font-size: 13px; margin: 28px 0 0; }
.prose p { color: #33363D; }
.events { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.events li { padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
code.wrap { overflow-wrap: anywhere; font-size: 13px; }
.lock { text-align: center; padding: 80px 12px; }
.lock p { color: var(--muted); }

@media (min-width: 700px) {
  h1 { font-size: 36px; }
  .card { padding: 20px; }
}

/* how notes go out */
.modes { border: 0; margin: 0 0 16px; padding: 0; }
.modes legend { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; padding: 0; }
.mode { display: flex !important; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px !important; color: var(--ink) !important; font-weight: 400 !important; font-size: 16px !important; }
.mode.on { border-color: var(--blue); background: var(--blue-wash); }
.mode.off { opacity: .75; }
.mode input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }
.mode span { display: flex; flex-direction: column; gap: 4px; }
.mode em { font-style: normal; color: var(--muted); font-size: 14px; }
.mode strong { font-size: 13px; }
.modechip { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
.modechip.auto { color: var(--blue-press); border-color: #C9D5FF; background: var(--blue-wash); }
.modechip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tip); box-shadow: 0 0 0 3px rgba(255, 106, 26, .18); }
.hold { font-size: 13px; color: var(--warn); margin: -4px 0 10px; }

/* sign in */
body.signin main { display: grid; place-items: center; min-height: 70vh; }
.signin-card { width: 100%; max-width: 380px; text-align: center; padding: 24px 4px; }
.signin-card .form { text-align: left; margin-top: 18px; }
.signin-card .lede { margin-bottom: 4px; }
.code { font-size: 28px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.err { background: #FFF6F5; border: 1px solid #F0C7C3; color: var(--bad); border-radius: 12px; padding: 10px 12px; font-size: 15px; margin-top: 12px; }
.small-links { margin-top: 14px; font-size: 15px; }
.btn.wide { width: 100%; }
.small { font-size: 13px; }

/* how it works */
.steps { list-style: none; padding: 0; margin: 4px 0 8px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: #33363D; }
.steps li:last-child { border-bottom: 0; }
.steps b { color: var(--ink); }
.num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; }
.card.welcome h2 { font-size: 20px; }
.cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* the annotated example */
.pin { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tip); color: #fff; font-size: 12px; font-weight: 700; margin-right: 8px; flex: none; vertical-align: middle; }
.example .who { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0; }
.example .who .sub { flex-basis: 100%; padding-left: 30px; }
.explain { font-size: 14px; color: var(--muted); background: #FFF8F2; border-radius: 10px; padding: 8px 10px; margin: 6px 0 14px; }
.explain b { color: var(--ink); }
.msgwrap { display: flex; align-items: flex-start; }
.msg.static { flex: 1; padding: 12px 14px; white-space: pre-line; border: 1px solid #D9E2FF; min-width: 0; overflow-wrap: anywhere; }
.example .actions .btn[disabled] { opacity: .55; }
.textlink { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* settings + admin */
.signout { margin: 8px 0 24px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.example .why { display: block; -webkit-line-clamp: unset; overflow: visible; }
.example .why::before { display: none; }

/* personal market page (/m/<token>): what the homeowner sees, not the agent's app */
body.marketpage { padding-bottom: calc(40px + var(--safe-b)); }
.marketpage main { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); }
.mp-head { margin: 0 4px 22px; }
.mp-kicker { color: var(--muted); font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.mp-head h1 { font-size: 38px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 10px; }
.mp-head h1 span { color: var(--muted); font-weight: 600; }
.mp-by { color: var(--muted); font-size: 15px; margin: 0; }
.mp-stats { display: grid; gap: 12px; margin-bottom: 8px; }
.mp-stats.two { grid-template-columns: 1fr 1fr; }
.mp-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; min-width: 0; }
.mp-label { font-size: 13px; font-weight: 650; color: var(--muted); margin: 0 0 4px; }
.mp-big { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.mp-stats.two .mp-big { font-size: 32px; }
.mp-small { font-size: 14px; color: var(--muted); margin: 0 0 2px; }
.mp-chip { display: inline-block; margin: 10px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; }
.mp-sold { list-style: none; margin: 0; padding: 4px 16px; }
.mp-sold li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mp-sold li:first-child { border-top: 0; }
.mp-sold li > div { display: flex; flex-direction: column; min-width: 0; }
.mp-sold b { font-weight: 600; }
.mp-sold span { font-size: 14px; color: var(--muted); }
.mp-price { align-items: flex-end; text-align: right; flex-shrink: 0; }
.mp-price b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mp-note { font-size: 16px; }
.mp-listing { display: block; padding: 0; overflow: hidden; color: var(--ink); }
.mp-listing img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--line); }
.mp-listing-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.mp-listing-body b { font-size: 17px; }
.mp-listing-body span { color: var(--muted); font-size: 14px; }
.mp-listing-body .mp-when { color: var(--ink); font-weight: 600; }
.mp-cta { background: var(--ink); color: #fff; border-radius: var(--r); padding: 22px 18px 18px; margin: 28px 0 12px; }
.mp-cta h2 { color: #fff; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 6px; }
.mp-cta p { color: rgba(255, 255, 255, .72); }
.mp-actions { display: flex; gap: 10px; margin-top: 14px; }
.mp-actions .btn { flex: 1; background: #fff; border-color: #fff; color: var(--ink); }
.mp-actions .btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.mp-foot { margin: 22px 4px 0; font-size: 13px; color: var(--muted); }
.mp-foot p { margin: 0 0 6px; }
.mp-foot a { color: var(--muted); text-decoration: underline; }
@media (max-width: 380px) { .mp-stats.two { grid-template-columns: 1fr; } }

/* office (team lead) */
.of-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.of-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.of-tile b { display: block; font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.of-tile span { color: var(--muted); font-size: 14px; }
.of-agent header p { margin: 2px 0 0; }
.of-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 6px; }
.of-nums div { min-width: 0; }
.of-nums dt { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-nums dd { margin: 0; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.of-agent form { margin-top: 6px; }

/* trails */
.trail-card { display: block; color: var(--ink); position: relative; }
.trail-card header { align-items: center; }
.trail-steps { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; }
.trail-steps li { padding: 3px 0; }
.trail-steps .day { display: inline-block; min-width: 58px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trail-edit { position: absolute; right: 16px; bottom: 14px; color: var(--blue); font-size: 15px; font-weight: 600; }
.step-row { border-bottom: 1px solid var(--line); padding: 4px 0 12px; margin-bottom: 12px; }
.step-row.new { background: var(--blue-wash); border: 0; border-radius: 12px; padding: 10px 12px 2px; }
.step-add { font-weight: 650; margin: 0 0 8px; }
.step-grid { display: grid; grid-template-columns: 70px 1fr 1.3fr; gap: 8px; }
.step-grid label { margin-bottom: 8px; }
.step-remove { margin-top: -4px; padding-left: 0; }

/* likely sellers */
.seller header { align-items: center; }
.seller .score { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); }
.chip.ask { background: #FFE9DC; color: #8A3300; }
.seller .why { margin: 4px 0 8px; }
.seller details { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.seller details ul { margin: 6px 0 0; padding-left: 18px; }
.sellers-chip { margin-right: 6px; }

/* person: trail, results */
.inline-select select { font: inherit; font-weight: 600; padding: 6px 32px 6px 10px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--card); background-position: right 10px center; max-width: 100%; }
.card.outcome p { margin: 6px 0 0; }
.card.record summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.card.record .actions { flex-wrap: wrap; }

/* call list */
.card.call.overdue { border-color: #F3D2A8; }
.card.call .actions { margin-top: 8px; }
.remind { display: flex; gap: 8px; margin-top: 4px; }
.remind input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }

/* app shell: a sidebar on desktop (same list as the phone's More page) */
.side { display: none; }
.menu-list a { display: flex; align-items: center; }
.menu-out { margin: 24px 0; text-align: center; }
@media (min-width: 1024px) {
  body.with-side { padding-left: 252px; padding-bottom: 40px; }
  body.with-side .tabs, body.with-side .top { display: none; }
  body.with-side main { max-width: 1040px; padding: 28px 40px 0; margin: 0; }
  body.with-side .flash, body.with-side .testbar { margin-left: 40px; max-width: 960px; }
  .side { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 252px; z-index: 7;
          background: var(--card); border-right: 1px solid var(--line); padding: 18px 12px 14px; overflow-y: auto; }
  .side-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 4px 10px 14px; }
  .side-brand .flame { width: 20px; height: 28px; }
  .side-brand b { display: block; font-size: 17px; letter-spacing: -0.01em; }
  .side-brand small { display: block; color: var(--muted); font-size: 12.5px; }
  .side-search input { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px;
                       border: 1px solid var(--line); background: var(--bg); margin-bottom: 10px; }
  .side-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
  .side-label { font-size: 11.5px; font-weight: 650; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
                margin: 10px 10px 4px; }
  .side-group a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink);
                  padding: 8px 10px; border-radius: 10px; font-size: 15px; font-weight: 520; }
  .side-group a:hover { background: var(--bg); }
  .side-group a.on { background: var(--blue-wash); color: var(--blue); font-weight: 650; }
  .side-group a i { font-style: normal; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
  .side-group a.on i { color: var(--blue); }
  .side-group a .dot { font-style: normal; background: var(--tip); color: #fff; font-size: 12px; font-weight: 700;
                       min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
  .side-me { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--line); }
  .side-me b { display: block; font-size: 14.5px; }
  .side-me small { color: var(--muted); font-size: 12.5px; }
}

/* trails screen */
.tr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.tr-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); }
.tr-tile b { display: block; font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tr-tile span { color: var(--muted); font-size: 13px; }
.tr-tile.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.tr-tile.paused { opacity: .6; }
.tr-off { margin: 0 4px 16px; }
.tr-grid { display: grid; gap: 14px; }
.tr-detail h2 { margin: 0; font-size: 20px; }
.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 4px; }
.tr-k { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px; }
.tr-steps { list-style: none; padding: 0; margin: 0 0 12px; }
.tr-steps li { display: grid; grid-template-columns: 64px 64px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.tr-steps li:first-child { border-top: 0; }
.tr-steps .day { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.tr-steps .ch { font-size: 12.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--bg); justify-self: start; }
.tr-steps .ch-call, .tr-steps .ch-task { background: #FFF1E6; color: #8A3300; }
.tr-msg { white-space: pre-wrap; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.tr-person { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tr-person:first-of-type { border-top: 0; }
.tr-person > div { display: flex; flex-direction: column; min-width: 0; }
.tr-next { text-align: right; }
.tr-moved { padding: 8px 0; border-top: 1px solid var(--line); }
.tr-moved:first-of-type { border-top: 0; }
.tr-moved .chip { margin-left: 6px; }
.tr-moved p { margin: 2px 0 0; }
@media (min-width: 1024px) { .tr-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .tr-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tr-two { grid-template-columns: 1fr; } .tr-person { grid-template-columns: 1fr auto; } .tr-person .btn { display: none; } }

/* Today */
.td-kicker { font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.td-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.td-head h1 { margin-top: 0; }
.td-sendall { white-space: nowrap; margin-top: 6px; }
.td-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 14px; }
.td-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: var(--ink);
           display: flex; flex-direction: column; gap: 2px; }
.td-tile span { font-size: 13px; color: var(--muted); font-weight: 600; }
.td-tile b { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.td-tile em { font-style: normal; font-size: 13px; color: var(--muted); }
.td-cols { display: grid; gap: 12px; margin-bottom: 12px; }
.td-panel { padding: 14px 16px 12px; }
.td-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.td-ph h2 { margin: 0; font-size: 17px; color: var(--ink); }
.td-call { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.td-call:first-of-type { border-top: 0; }
.td-call.extra { display: none; }
.td-panel.all .td-call.extra { display: grid; }
.td-who { display: flex; flex-direction: column; min-width: 0; }
.td-who a, .td-who b { font-weight: 600; color: var(--ink); }
.td-why { font-size: 13.5px; color: #A24A00; overflow: hidden; text-overflow: ellipsis; }
.td-call.overdue .td-why { color: var(--bad); }
.td-acts { display: flex; gap: 4px; align-items: center; }
.td-acts form { margin: 0; }
.td-more { background: none; border: 0; color: var(--blue); font: inherit; font-weight: 600; padding: 8px 0; cursor: pointer; }
.td-empty { margin: 8px 0; }
.td-batch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.td-batch:first-of-type { border-top: 0; }
.td-batch > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.td-batch form { margin: 0; }
.td-batch.on b { color: var(--blue); }
.td-foot { margin: 8px 0 0; }
.td-panel .remind { margin-top: 10px; }
@media (min-width: 760px) { .td-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .td-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 520px) { .td-row { flex-direction: column; gap: 4px; }
  .td-call { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
  .td-call .td-acts { grid-column: 2; flex-wrap: wrap; gap: 6px; }
  .td-call .td-acts .btn { min-height: 38px; } }

/* market page: one-tap answers */
.mp-ask { margin-top: 18px; }
.mp-ask h2 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }
.mp-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mp-worth { margin: 12px 0 0; }
.mp-worth .btn { background: var(--tip); border-color: var(--tip); color: #fff; }
@media (max-width: 520px) { .td-tile { padding: 12px 14px; } .td-tile b { font-size: 26px; } .td-tile em { display: none; } }

/* person timeline */
.pt-moved { margin: 0 0 10px; }
.pt-list { list-style: none; margin: 0; padding: 0; position: relative; }
.pt-list li { display: grid; grid-template-columns: 14px 92px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; font-size: 15px; }
.pt-dot { width: 9px; height: 9px; border-radius: 50%; background: #2E8B57; display: inline-block; transform: translateY(1px); }
.pt-future .pt-dot { background: transparent; border: 1.5px solid var(--muted); }
.pt-future { color: var(--muted); }
.pt-reply .pt-dot, .pt-click .pt-dot, .pt-moved .pt-dot { background: var(--tip); }
.pt-view .pt-dot { background: var(--blue); }
.pt-when { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* results funnel */
.rs-funnel { margin-top: 12px; }
.rs-row { display: grid; grid-template-columns: 150px 1fr 64px 52px; gap: 10px; align-items: center; padding: 6px 0; }
.rs-bar { height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.rs-row b { text-align: right; font-variant-numeric: tabular-nums; }
.rs-pct { text-align: right; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rs-table th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.rs-table td { padding: 7px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .rs-row { grid-template-columns: 110px 1fr 48px; } .rs-pct { display: none; } }

.list.logins li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.list.logins .right { margin-left: auto; }

.au-doc h2 { color: var(--ink); font-size: 17px; margin: 16px 0 6px; }
.au-doc h2:first-child { margin-top: 0; }
.au-doc p { line-height: 1.55; }

/* ---- Ask drawer: the Ask screen in a panel, on any page ---- */
.side-ask { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; }
.side-ask:hover { border-color: var(--blue); }
.side-ask svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.side-ask b { display: block; font-size: 15px; }
.side-ask small { display: block; color: var(--muted); font-size: 12.5px; }
.top-ask { background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue); }
.top-ask svg { width: 22px; height: 22px; }
.askdrawer[hidden] { display: none; }
.askdrawer { position: fixed; inset: 0; z-index: 40; }
.askdrawer-scrim { position: absolute; inset: 0; background: rgba(21, 23, 28, .35); }
.askdrawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--bg);
  display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(21, 23, 28, .16); }
.askdrawer-panel header { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  border-bottom: 1px solid var(--line); }
.askdrawer-t { margin-right: auto; min-width: 0; }
.askdrawer-panel header b { display: block; font-size: 17px; }
.askdrawer-t small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.askdrawer-t small i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #1FA463; box-shadow: 0 0 0 3px #DDF2E6; }
.askdrawer-panel header a { font-size: 14px; white-space: nowrap; }
.askdrawer-x { background: none; border: 0; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.askdrawer-panel iframe { flex: 1; border: 0; width: 100%; }
body.embed { padding: 0 !important; }
body.embed .side, body.embed .top, body.embed .tabs, body.embed .testbar, body.embed .flash { display: none !important; }
body.embed main { max-width: none !important; margin: 0 !important; padding: 12px 14px 0 !important; }
body.embed { --tabs: 0px; }
body.embed .ask { display: flex; flex-direction: column; min-height: calc(100dvh - 12px); }
body.embed .ask-dock { margin-top: auto; bottom: 0; padding-bottom: calc(var(--safe-b) + 12px); }
body.embed .ask-dock::after { display: none; }
.rs-record { margin: 12px 0; }
.rs-record summary { cursor: pointer; color: var(--blue); font-weight: 600; }

/* ---- account switcher: real lists and the sample office ---- */
.acct { position: relative; margin: 0 0 12px; }
.acct summary { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); cursor: pointer; list-style: none; }
.acct summary::-webkit-details-marker { display: none; }
.acct summary:hover { border-color: #C9C3B6; }
.acct summary > span, .acct-menu button > span { min-width: 0; flex: 1; }
.acct b { display: block; font-size: 14px; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.acct-dot.s { background: #FF6A1A; box-shadow: 0 0 0 3px #FFE9DB; }
.acct-chev { flex: none; width: 12px; height: 12px; color: var(--muted); transition: transform .15s; }
.acct[open] .acct-chev { transform: rotate(180deg); }
.acct-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(21, 23, 28, .12); }
.acct-h { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.acct-menu form { margin: 0; }
.acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.acct-menu button:hover { background: var(--bg); }
.acct-menu button.on { background: var(--blue-wash); }
.acct-page { margin: 0 0 18px; }
.acct-page .acct-menu { position: static; margin-top: 6px; box-shadow: none; }
.testbar.sample { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.testbar form { margin: 0; display: inline; }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: #8A3300; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.sample-cta { display: flex; flex-direction: column; gap: 14px; border-color: #FFD2B3; background: #FFF8F2; }
.sample-cta h2 { margin: 0 0 6px; }
.sample-cta p { margin: 0; color: #4A4D55; }
@media (min-width: 720px) { .sample-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .sample-cta form { flex: none; } }

/* ---- admin: add a person ---- */
.add-person { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.add-person summary { cursor: pointer; color: var(--blue); font-weight: 650; }
.add-person .form { margin-top: 12px; }
.pick { border: 0; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.pick legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; padding: 0; }
.pick .opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pick .opt:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.form .pick .opt { display: flex; margin: 0; font-size: 15px; color: var(--ink); font-weight: 400; }
.pick .opt input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--blue); }
.pick .opt > span { flex: 1; min-width: 0; }
.pick .opt small { font-size: 13px; font-weight: 400; }
.pick .opt b { display: block; }
.pick .opt small { display: block; color: var(--muted); }
.btn.danger { color: #B42318; }

/* ---- Today: replies folded into the call list, batch icons, the drive-off block and the 7am phone ---- */
.td-sub { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.td-who > a + .td-sub, .td-who > b + .td-sub { display: inline; }
.td-who { display: block; }
.td-who > a, .td-who > b { display: inline; }
.td-why { display: block; }
.td-call.wrote .td-why { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.td-call.wrote .td-also { color: #A24A00; -webkit-line-clamp: 2; }
.td-tag { font-style: normal; font-size: 11.5px; font-weight: 700; color: #145C38; background: #DDF2E6; border-radius: 999px;
  padding: 1px 7px; margin-right: 4px; white-space: nowrap; }
.td-batch { justify-content: flex-start; }
.td-batch > .td-bacts { flex: none; flex-direction: row; gap: 6px; align-items: center; }
.td-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); }
.td-ico.warm { background: #FFE7D6; color: #9A3D00; }
.td-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td-drive { display: grid; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; margin: 16px 0 12px; }
.td-drive h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.td-drive-text > p.muted { max-width: 38em; }
.td-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.td-rows li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.td-rows li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-rows li .btn { flex: none; }
.td-replies { display: flex; align-items: center; gap: 10px; }
.td-replies form { margin: 0; }
.td-key { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #2F7BF6; color: #fff;
  font-weight: 700; font-size: 17px; line-height: 1; font-family: inherit; cursor: pointer; text-decoration: none; }
.td-key.off { background: #C9CED9; cursor: default; }
@media (min-width: 1024px) { .td-drive { grid-template-columns: minmax(0, 1fr) 300px; padding: 26px 30px; gap: 36px; } }
@media (min-width: 1200px) {
  body.wide .td-panel { padding: 16px 18px 12px; }
  body.wide .td-call { padding: 9px 0; }
  body.wide .td-tile b { font-size: 32px; }
}
@media (max-width: 560px) { .td-batch { flex-wrap: wrap; row-gap: 8px; }
  .td-batch > div:not(.td-bacts) { flex: 1 1 calc(100% - 50px); }
  .td-batch > .td-bacts { margin-left: 44px; } }

/* ---- sidebar chrome: agency first, bell, search with "/", icons, account menu ---- */
@media (min-width: 1024px) {
  .side-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
  .side-top .side-brand { min-width: 0; }
  .side-brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bell { position: relative; margin-top: 2px; }
  .bell summary { list-style: none; position: relative; display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 10px; color: var(--muted); cursor: pointer; }
  .bell summary::-webkit-details-marker { display: none; }
  .bell summary:hover, .bell[open] summary { background: var(--bg); color: var(--ink); }
  .bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .bell em { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--tip); color: #fff; font-weight: 700; font-size: 10.5px; line-height: 17px; font-family: inherit; text-align: center; font-style: normal;
    box-shadow: 0 0 0 2px var(--card); }
  .bell-menu { position: absolute; z-index: 25; right: 0; top: calc(100% + 6px); width: 224px; padding: 6px; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(21, 23, 28, .14); }
  .bell-menu a { display: block; padding: 9px 8px; border-radius: 8px; color: var(--ink); font-size: 14px; }
  .bell-menu a:hover { background: var(--bg); }
  .bell-menu a b { color: var(--tip); margin-right: 2px; }
  .bell-none { margin: 4px 8px 8px; }
  .side-search { position: relative; }
  .side-search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; fill: none; stroke: var(--muted);
    stroke-width: 2; stroke-linecap: round; pointer-events: none; }
  .side-search input { padding-left: 34px; padding-right: 34px; }
  .side-search kbd { position: absolute; right: 9px; top: 9px; min-width: 20px; height: 20px; border: 1px solid var(--line);
    border-radius: 5px; background: var(--card); color: var(--muted); font-weight: 600; font-size: 12px; line-height: 18px; font-family: inherit; text-align: center; }
  .side-search input:focus + kbd { display: none; }
  .side-group a { justify-content: flex-start; }
  .side-group a span { flex: 1; }
  details.side-me { position: relative; margin-top: auto; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .side-me summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
  .side-me summary::-webkit-details-marker { display: none; }
  .side-me summary:hover, .side-me[open] summary { background: var(--bg); }
  .side-me summary > span:not(.av) { flex: 1; min-width: 0; }
  .side-me small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me[open] .acct-chev { transform: rotate(180deg); }
  .me-menu { position: absolute; z-index: 25; left: 0; right: 0; bottom: calc(100% + 6px); padding: 6px; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -8px 28px rgba(21, 23, 28, .12); }
  .me-menu a, .me-menu button { display: block; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: none;
    color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
  .me-menu a:hover, .me-menu button:hover { background: var(--bg); }
  .me-menu form { margin: 0; }
}

/* ---- sidebar icons: masks, so each link stays plain text for screen readers and tests ---- */
@media (min-width: 1024px) {
  .side-group a::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--ni) center / 18px 18px no-repeat; mask: var(--ni) center / 18px 18px no-repeat; }
  .side-group a.on::before { background: var(--blue); }
  .side-group a.ni-today { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M4 10h16M8.5 3v4M15.5 3v4'/%3E%3C/svg%3E"); }
  .side-group a.ni-ask { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 18.5V7a2.5 2.5 0 0 1 2.5-2.5h10A2.5 2.5 0 0 1 19.5 7v7a2.5 2.5 0 0 1-2.5 2.5H8.5z'/%3E%3Cpath d='M8.5 9.5h7M8.5 12.5h4.5'/%3E%3C/svg%3E"); }
  .side-group a.ni-people { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.3'/%3E%3Cpath d='M3 19c.6-3.2 3-5 6-5s5.4 1.8 6 5'/%3E%3Cpath d='M15.5 5.3a3.3 3.3 0 0 1 0 6.4M17.5 14.3c1.8.6 3 2.2 3.4 4.7'/%3E%3C/svg%3E"); }
  .side-group a.ni-trails_page { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M8 18h7a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E"); }
  .side-group a.ni-market_home { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M5 15l4.5-4.5 3.5 3L19 7.5'/%3E%3Cpath d='M15 7.5h4v4'/%3E%3C/svg%3E"); }
  .side-group a.ni-mailouts { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5L3.5 10.8l6.8 2.9 2.9 6.8z'/%3E%3Cpath d='M20.5 3.5l-10.2 10.2'/%3E%3C/svg%3E"); }
  .side-group a.ni-buyers { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='3.6'/%3E%3Cpath d='M10.6 12.4L19 4M16 7l2.2 2.2M13.8 9.2l1.8 1.8'/%3E%3C/svg%3E"); }
  .side-group a.ni-leads { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l8 5 8-5'/%3E%3Crect x='4' y='6' width='16' height='12.5' rx='2.2'/%3E%3C/svg%3E"); }
  .side-group a.ni-radar { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='12' cy='12' r='.9' fill='black'/%3E%3Cpath d='M12 12l5.2-5.2'/%3E%3C/svg%3E"); }
  .side-group a.ni-vendors { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L12 5l8 6.5'/%3E%3Cpath d='M6.5 10v9h11v-9'/%3E%3Cpath d='M10 19v-5h4v5'/%3E%3C/svg%3E"); }
  .side-group a.ni-results { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V12M10 19V8M15 19v-5M20 19V5'/%3E%3C/svg%3E"); }
  .side-group a.ni-office { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='16' rx='1.5'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M10.5 20v-3.5h3V20'/%3E%3C/svg%3E"); }
  .side-group a.ni-settings { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.2 13.4a7.5 7.5 0 0 0 0-2.8l1.9-1.4-1.9-3.3-2.2.9a7.4 7.4 0 0 0-2.4-1.4L14.2 3h-4.4l-.4 2.4A7.4 7.4 0 0 0 7 6.8l-2.2-.9-1.9 3.3 1.9 1.4a7.5 7.5 0 0 0 0 2.8l-1.9 1.4 1.9 3.3 2.2-.9a7.4 7.4 0 0 0 2.4 1.4l.4 2.4h4.4l.4-2.4a7.4 7.4 0 0 0 2.4-1.4l2.2.9 1.9-3.3z'/%3E%3C/svg%3E"); }
  .side-group a.ni-admin { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.8v5.2c0 4.3-3 7.6-7 9-4-1.4-7-4.7-7-9V6.3z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
  .side-group a.ni-help_page { --ni: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.7'/%3E%3Ccircle cx='12' cy='16.9' r='.6' fill='black'/%3E%3C/svg%3E"); }
}
.ask-follow { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.ask-follow::-webkit-scrollbar { display: none; }
.ask-follow .ask-chip { flex: none; }

/* ---- Results as a report: a stat strip, funnel beside trails, one table of results ---- */
.rs-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin: 0 0 12px; }
.rs-strip > div { padding: 14px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: -1px 0 0 -1px; min-width: 0; }
.rs-strip span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.rs-strip b { display: block; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rs-strip em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.rs-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rs-h h2 { margin: 0 !important; font-size: 17px; color: var(--ink); }
.rs-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.rs-grid > .card, .rs-wins { margin: 0; }
.rs-note { margin: 8px 0 0; }
.rs-table .rs-num { text-align: right; padding-right: 0; padding-left: 12px; }
.rs-list td { vertical-align: middle; padding: 9px 8px 9px 0; }
.rs-who { display: inline-flex; align-items: center; gap: 8px; }
.rs-who a { color: var(--ink); font-weight: 600; }
.rs-kind { font-weight: 650; }
.rs-kind.k-listing { color: var(--good); }
.rs-form { display: grid; gap: 0 14px; }
@media (min-width: 760px) { .rs-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-form { grid-template-columns: 2fr 1fr 1fr; } .rs-form .actions, .rs-form input[type=hidden] { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .rs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1200px) { .rs-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rs-list thead { display: none; } .rs-list tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0;
  border-top: 1px solid var(--line); } .rs-list td { border: 0; padding: 2px 0; } .rs-list td:nth-child(3) { grid-column: 1 / -1; font-size: 13.5px; }
  .rs-list td:nth-child(4) { display: none; } .rs-list td:nth-child(5) { grid-column: 2; text-align: right; font-weight: 650; } }

.of-strip { margin-top: 0; }
@media (min-width: 760px) { .of-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .of-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.of-table .rs-who > span { display: flex; flex-direction: column; min-width: 0; }
.of-sub { font-size: 12.5px; }
.of-table td form { margin: 0; }
@media (max-width: 620px) { .of-table thead { display: none; } .of-table tr { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 0;
  border-top: 1px solid var(--line); } .of-table td { border: 0; padding: 2px 0; text-align: left !important; }
  .of-table td:first-child { grid-column: 1 / -1; padding-bottom: 6px; } .of-table td:last-child { grid-column: 1 / -1; } }
.of-table b .muted { font-weight: 400; }
.of-table + h2 + form.card { max-width: 720px; }
/* phones: a table's numbers keep their column name, since the header row is hidden */
@media (max-width: 620px) {
  .of-table td[data-l]::before, .rs-list td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px;
    font-weight: 600; color: var(--muted); }
  .of-table td[data-l] { font-size: 17px; font-weight: 650; }
  .rs-list td[data-l]:empty { display: none; }
}
/* a call row in a narrow column (iPad landscape, a small laptop): the buttons go under the words */
.td-panel { container-type: inline-size; }
@media (min-width: 521px) {
  @container (max-width: 470px) {
    .td-call { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
    .td-call .td-acts { grid-column: 2; flex-wrap: wrap; }
    .td-batch { flex-wrap: wrap; row-gap: 8px; }
    .td-batch > div:not(.td-bacts) { flex: 1 1 calc(100% - 50px); }
    .td-batch > .td-bacts { margin-left: 44px; }
  }
}
.rs-table th { padding-right: 10px; }
.rs-table th:last-child { padding-right: 0; }
@media (max-width: 1023px) { article.note { scroll-margin-top: 72px; } }
/* Settings > Your daily call list */
.picks fieldset.pick-rule { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 8px; margin: 0 0 12px; }
.picks fieldset.pick-rule legend { padding: 0 4px; }
.picks .pick-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 8px; font-size: 14px; }
.picks .pick-groups label.tick { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.picks .pick-nums { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.picks .pick-nums label { flex: 1 1 180px; }
.picks .pick-nums input { max-width: 7em; }