/* ── theme tokens: dark is the default; light overrides; "system" follows the device ── */
:root {
  color-scheme: dark;
  --ink: #0b0b10; --panel: #15151c; --panel-2: #1d1d27; --line: #2b2b38; --line-2: #3a3a4a;
  --text: #f6f1e6; --dim: #a9a396; --faint: #6f6a60;
  --gold: #e6c65c; --gold-2: #f3dc8a; --on-gold: #1a1408;
  --coral: #f0685f; --amber: #f0a340; --sky: #5aa3ee; --mint: #3fc48f; --violet: #ad85f5;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --sel: rgba(230, 198, 92, .10);
  /* The look (Modern / Classic Gold / Top Tier, looks.css) sets these; light and dark set the colours. */
  --font-body: "Segoe UI", system-ui, sans-serif;
  --font-display: Georgia, serif;
  --font-figure: "Segoe UI", system-ui, sans-serif;
  --display-case: none; --display-spacing: .02em;
  --radius-sm: 8px; --radius-md: 10px; --radius: 12px; --radius-lg: 14px;
  --gold-fill: var(--gold);
  --stripe: linear-gradient(90deg, var(--gold), var(--coral), var(--violet), var(--sky), var(--mint));
}
/* The script resolves "system" and always sets data-theme to dark or light. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #faf7f0; --panel: #ffffff; --panel-2: #f1ede3; --line: #e3ddcf; --line-2: #cfc7b5;
  --text: #17150f; --dim: #625c4f; --faint: #9a937f;
  --gold: #8a6d05; --gold-2: #6e5603; --on-gold: #fffaf0;
  --coral: #c23d33; --amber: #a85f00; --sky: #1f6fc0; --mint: #13804f; --violet: #6f45cf;
  --shadow: 0 18px 50px rgba(40, 30, 0, .18);
  --sel: rgba(138, 109, 5, .10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 14px/1.45 var(--font-body); transition: background .15s, color .15s;
}
/* Text size (Small … Extra large) scales content, never the fixed boxes that hold it —
   the dialog, batch bar and toasts keep their size relative to the real screen, so
   nothing crops. Device zoom (Windows scaling, browser zoom, phone font size) applies
   underneath all of this automatically. */
.top, .tabs, main, #panel-body, .batch-row, .batch-form, .card, .toast { zoom: var(--scale, 1); }
.widget[data-size="s"] { zoom: .85; }
.widget[data-size="l"] { zoom: 1.2; }
.widget[data-size="xl"] { zoom: 1.45; }
a { color: var(--gold-2); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; width: 100%; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
label > input, label > select, label > textarea { color: var(--text); font-size: 14px; }

/* ── header ── */
.top {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; position: sticky; top: 0; z-index: 5;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
.top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--stripe);
}
.brand { font: 700 24px var(--font-display); color: var(--gold-2); letter-spacing: .02em; white-space: nowrap;
         display: flex; align-items: center; gap: 10px; }
.logo { height: 30px; width: auto; }
:root[data-theme="dark"] .logo { filter: invert(1); }
.store { font: 600 10px var(--font-body); color: var(--dim); border: 1px solid var(--line-2);
         border-radius: 99px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; }
/* Practice mode runs on sample people in a separate folder. Make it impossible to mistake. */
.store.practice { color: var(--coral); border-color: var(--coral); display: inline-block; }
body.practice .top::before { background: repeating-linear-gradient(45deg,
  var(--coral) 0 14px, var(--ink) 14px 28px); height: 5px; }
#search { flex: 1; max-width: 460px; min-width: 120px; }
.theme { min-width: 42px; padding: 7px 9px; }
.scale { padding: 7px 6px; min-height: 38px; width: auto; max-width: 120px; }
.viewer { padding: 7px 6px; min-height: 38px; width: auto; max-width: 160px; }
.people { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.people label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }

/* ── tabs ── */
/* The bar holds a handful of headings now, so it wraps instead of scrolling: a scrolling
   bar would clip the menus that hang off it (overflow-x makes overflow-y scroll too). */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line);
        overflow: visible; position: relative; z-index: 4; }
.tab-group { position: relative; }
.tab-top {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; color: var(--dim);
  background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer;
  text-decoration: none; font: inherit;
}
.tab-top:hover { color: var(--text); }
.tab-top.on { color: var(--gold-2); border-color: var(--gold); }
.tab-top .sub { font-size: 12px; }
.tab-top .caret { font-size: 10px; opacity: .8; }
.tabs .menu {
  position: absolute; top: 100%; left: 0; min-width: 190px; z-index: 6; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; gap: 1px;
}
.tabs .menu a {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tabs .menu a:hover { background: var(--panel-2); }
.tabs .menu a.on { background: var(--sel); color: var(--gold-2); }
.tabs .menu a i { font-style: normal; font-size: 11px; color: var(--faint); }
@media (max-width: 720px) {
  .tabs { padding: 0 12px; }
  .tabs .menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0;
                max-height: 60vh; overflow-y: auto; }
}

main { padding: 18px 20px 130px; }
.about { color: var(--dim); margin: 0 0 12px; }

/* ── tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; border-top: 3px solid var(--tone, var(--gold)); transition: transform .08s, background .12s;
}
.tile:hover { background: var(--panel-2); transform: translateY(-1px); }
.tile.on { outline: 2px solid var(--tone, var(--gold)); }
.tile b { display: block; font-size: 26px; line-height: 1.1; color: var(--text); }
.tile span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }

/* ── filters ── */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-2); background: transparent; border-radius: 99px; padding: 6px 12px;
        color: var(--dim); cursor: pointer; min-height: 34px; }
.chip:hover { color: var(--text); border-color: var(--dim); }
.chip.on { background: var(--gold-fill); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.count { color: var(--faint); margin-left: auto; }

/* ── tables ── */
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.grid { border-collapse: collapse; width: 100%; }
.grid th, .grid td { padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line);
                     max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.grid th { position: sticky; top: 0; background: var(--panel-2); color: var(--gold); font-size: 11px;
           text-transform: uppercase; letter-spacing: .06em; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover { background: var(--panel-2); }
.grid tbody tr.sel { background: var(--sel); }
.grid td.empty { color: var(--dim); text-align: center; padding: 28px; cursor: default; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; min-height: 0; }
.name { font-weight: 600; }
.sub { color: var(--dim); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* ── cards (phones) ── */
.cards { display: grid; gap: 8px; }
.card-lead { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 12px 10px;
             display: grid; grid-template-columns: 28px 1fr; gap: 8px; cursor: pointer; }
.card-lead.sel { background: var(--sel); border-color: var(--gold); }
.card-lead .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.card-lead .name { font-size: 15px; }
.select-all { display: flex; align-items: center; gap: 8px; color: var(--dim); padding: 4px 2px 10px; }

/* ── pills, dots, badges ── */
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
        color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); margin-right: 6px;
       vertical-align: 1px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px;
         border: 1px solid var(--tone); color: var(--tone); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.t-gold { --tone: var(--gold); } .t-coral { --tone: var(--coral); } .t-amber { --tone: var(--amber); }
.t-sky { --tone: var(--sky); } .t-mint { --tone: var(--mint); } .t-violet { --tone: var(--violet); }
.t-dim { --tone: var(--dim); }
.flag { color: var(--coral); font-size: 11px; font-weight: 600; margin-left: 6px; }

/* ── buttons ── */
.btn { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: var(--radius-sm); padding: 8px 12px;
       cursor: pointer; white-space: nowrap; min-height: 38px; }
.btn:hover { border-color: var(--dim); }
.btn.gold { background: var(--gold-fill); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.btn.gold:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 9px; font-size: 12px; min-height: 30px; }
.btn.on { outline: 2px solid var(--gold); }
.btn:disabled { opacity: .5; cursor: wait; }

/* ── home dashboard ── */
.home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.home-head h2 { margin: 0; font: 700 22px var(--font-display); flex: 1; }
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.widget { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; min-width: 0; }
.widget.wide { grid-column: 1 / -1; }
/* The two bars at the top: half the width each on a laptop, stacked on a phone, and short. */
/* The bars across the top: each takes the room it needs, and the stretchy one
   (the briefing) fills whatever is left over. */
.bands { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.widget.band { padding: 10px 14px; flex: 0 0 auto; max-width: 100%; }
.widget.band.fill { flex: 1 1 320px; min-width: 0; }
.widget.band h3 { margin-bottom: 6px; }
@media (max-width: 720px) { .widget.band, .widget.band.fill { flex: 1 1 100%; } }
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-row .quick-btn { flex: 0 0 auto; padding: 9px 12px; }
.brief-bar { display: flex; align-items: flex-start; gap: 10px; }
.brief-bar .brief { margin: 0; flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.brief-bar .brief.clipped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.brief-acts { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.widget h3 { margin: 0 0 2px; font-size: 13px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.widget .hint { color: var(--dim); font-size: 12px; margin: 0 0 10px; }
.chart { width: 100%; min-height: 40px; }
.widget svg { display: block; overflow: visible; max-width: 100%; }
.widget svg text { fill: var(--text); font-family: inherit; }
.widget svg text.dim { fill: var(--dim); }
.widget svg .grid { stroke: var(--line); stroke-width: 1; }
.widget svg .axis { stroke: var(--line-2); stroke-width: 1; }
.widget svg .bar { rx: 4; }
.widget svg .bar:hover, .widget svg .pt:hover { filter: brightness(1.25); }
.widget svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--dim); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.list li:last-child { border-bottom: 0; }
.list li > span { flex: 1; }
.list li > .pill, .list li > .badge { flex: 0 0 auto; }
.list li:hover .name { color: var(--gold-2); }
.customize { background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 12px; }
.customize ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.customize li { display: flex; align-items: center; gap: 8px; }
.customize li label { flex-direction: row; align-items: center; gap: 8px; flex: 1; font-size: 14px; color: var(--text); cursor: pointer; }

/* ── What should I do now? ── */
ol.coach { counter-reset: step; }
ol.coach li { counter-increment: step; }
ol.coach li::before { content: counter(step); color: var(--gold); font-weight: 700; font-size: 16px; min-width: 22px; }
ol.coach li > span { flex: 1; }
ol.coach .pill { margin-left: 6px; }

/* ── text drafts & briefing ── */
.bubble { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px;
          background: var(--gold-fill, var(--gold)); color: #111; font: 700 13px var(--font-figure, inherit); vertical-align: middle; }
.texts-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.texts-bar .sub { flex: 1; min-width: 0; }
.texts-more { width: 100%; }
.texts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.texts-head h3 { margin: 0; }
.home-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--coral);
              background: color-mix(in srgb, var(--coral) 14%, transparent); }
.home-alert a { margin-left: 6px; }
.see-all { width: 100%; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.see-all .bubble { min-width: 22px; height: 22px; font-size: 12px; }
#list-body, #texts-body { display: flex; flex-direction: column; overflow: hidden; max-height: 92vh; }
.texts-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.draft { background: var(--panel-2); border-radius: var(--radius-md); padding: 10px 12px; margin: 0 0 10px; }
.draft .msg { white-space: pre-wrap; font: inherit; margin: 6px 0 8px; }
.draft .row { display: flex; flex-wrap: wrap; gap: 6px; }
.draft a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.brief { font-size: 15px; line-height: 1.6; margin: 0 0 10px; white-space: pre-wrap; }

/* ── Tell RoneHub ── */
.assist textarea { min-height: 84px; }
.assist .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.assist .row .sub { flex: 1; }
.plan { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.plan li .who { font-weight: 600; }
.plan li .who.bad { color: var(--coral); }
.plan li select { margin-top: 4px; }
.plan .q { color: var(--amber); font-size: 13px; margin: 6px 0 0; }
.plan .actions { margin-top: 10px; }

/* ── batch bar ── */
.batch {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; width: min(980px, calc(100% - 20px));
  background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 10px 14px;
}
.batch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.batch-row b { color: var(--gold-2); margin-right: 6px; }
.batch-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px;
              border-top: 1px solid var(--line); }
.batch-form label { min-width: 140px; }
.batch-form label.wide { flex: 1; min-width: 200px; }

/* ── the lead dialog: centred, wide on big screens, two columns ── */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 7; }
.panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8;
  width: min(1180px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 20px 24px 28px; animation: pop .16s ease-out;
}
@keyframes pop { from { transform: translate(-50%, -48%); opacity: 0; } }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.panel-grid > .col-side { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 900px) {
  .panel-grid { grid-template-columns: 1fr; }
  .panel-grid > .col-side { border-left: 0; padding-left: 0; margin-top: 8px; }
}
.restored { background: var(--panel-2); border-left: 3px solid var(--amber); padding: 6px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            font-size: 13px; color: var(--dim); margin: 0 0 10px; }
.panel-head { display: flex; align-items: flex-start; gap: 10px; }
.panel-head h2 { font: 700 26px var(--font-display); margin: 0; flex: 1; }
.panel-head small { font: 400 12px var(--font-body); color: var(--faint); margin-left: 8px; }
.close { background: none; border: 0; color: var(--dim); font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.contact { color: var(--dim); margin: 4px 0 12px; }
.contact a { margin-right: 10px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 16px; }
.stats div { background: var(--panel-2); border-radius: var(--radius-md); padding: 8px 10px; }
.stats b { display: block; font-size: 16px; }
.stats span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.section { margin-top: 18px; }
.section h4 { margin: 0 0 8px; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.quick { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .full { grid-column: 1 / -1; }
.form .actions, .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tasks li span { flex: 1; }
.tasks li.overdue span { color: var(--coral); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; }
.facts b { color: var(--dim); font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-2); }
.timeline li { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 13px; width: 10px; height: 10px;
                       border-radius: 50%; background: var(--line-2); }
.timeline li.reply::before { background: var(--mint); }
.timeline li.draft::before { background: var(--amber); }
.timeline time { color: var(--dim); min-width: 84px; font-variant-numeric: tabular-nums; }
.timeline .kind { color: var(--gold); font-weight: 600; margin-right: 6px; }
.timeline .reply .kind { color: var(--mint); }
.timeline .detail { display: block; color: var(--dim); font-size: 12px; }
.next { background: var(--panel-2); border-left: 3px solid var(--gold); padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── call mode: one person at a time, built for a thumb ── */
.call { position: fixed; inset: 0; z-index: 10; background: var(--ink); overflow-y: auto;
        padding: 14px 16px 28px; zoom: var(--scale, 1); }
.call-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.call-head .count { margin: 0; }
.call h2 { font: 700 30px var(--font-display); margin: 6px 0 2px; }
.call .badges { margin: 6px 0 10px; }
.call-phone { display: block; text-align: center; font: 700 34px/1.2 var(--font-body);
              color: var(--on-gold); background: var(--gold); border-radius: var(--radius-lg); padding: 18px 12px;
              text-decoration: none; margin: 12px 0; letter-spacing: .01em; }
.call-phone small { display: block; font: 600 12px var(--font-body); text-transform: uppercase;
                    letter-spacing: .1em; opacity: .75; margin-bottom: 4px; }
.call-phone.none { background: var(--panel-2); color: var(--dim); font-size: 20px; }
.call-facts { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
              padding: 12px 14px; margin-bottom: 12px; }
.call-facts b { color: var(--dim); font-weight: 500; }
.call .timeline { max-height: 30vh; overflow-y: auto; }
.call textarea { min-height: 70px; margin: 10px 0 4px; }
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
/* Buttons must be allowed to wrap and to shrink, or the grid cell overflows the screen. */
.outcomes button { min-height: 58px; min-width: 0; padding: 8px 10px; font-size: 16px; font-weight: 600;
                   white-space: normal; line-height: 1.25; }
.outcomes button small { display: block; font-size: 11px; font-weight: 400; color: var(--dim);
                         margin-top: 3px; white-space: normal; }
.outcomes button.good { border-color: var(--mint); color: var(--mint); }
.outcomes button.warn { border-color: var(--amber); color: var(--amber); }
.outcomes button.stop { border-color: var(--coral); color: var(--coral); }
.call-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px;
             padding-top: 12px; border-top: 1px solid var(--line); }
.call-foot .btn { min-width: 0; white-space: normal; }
.call-done { text-align: center; padding: 40px 12px; }
.call-done h2 { font-size: 26px; }
@media (max-width: 720px) {
  .call { padding: 10px 12px 24px; }
  .call h2 { font-size: 24px; }
  .call-phone { font-size: 30px; }
  .outcomes { grid-template-columns: 1fr 1fr; }
}

/* ── modal ── */
.modal { position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, .55); display: grid; place-items: center; }
.card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 20px 22px;
        width: min(560px, calc(100% - 24px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; box-shadow: var(--shadow); max-height: 95vh; overflow-y: auto; }
.card h3 { margin: 0 0 4px; font: 700 20px var(--font-display); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.route-card { width: min(720px, calc(100% - 24px)); }
.route-list { margin: 6px 0 0; padding-left: 24px; max-height: 46vh; overflow-y: auto; }
.route-list li { padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.route-list li::marker { color: var(--gold); font-weight: 700; }
.route-card a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ── toasts ── */
.toasts { position: fixed; right: 14px; top: 70px; z-index: 20; display: grid; gap: 8px; max-width: calc(100% - 28px); }
.toast { background: var(--panel-2); border: 1px solid var(--mint); color: var(--text); border-radius: var(--radius-md);
         padding: 10px 14px; box-shadow: var(--shadow); max-width: 360px; animation: slide .16s ease-out; }
.toast.err { border-color: var(--coral); }

/* ── phones ── */
@media (max-width: 720px) {
  .top { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 20px; flex: 1; }
  .logo { height: 24px; }
  .store { display: none; }
  .display { order: 1; }
  #new-lead { order: 2; }
  .viewer, #scope, #account { order: 3; }
  #search { order: 4; flex: 1 1 100%; max-width: none; }
  .home-head h2 { font-size: 18px; }
  .tabs { padding: 0 8px; }
  main { padding: 12px 12px 150px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { padding: 10px 12px; }
  .tile b { font-size: 22px; }
  .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .filters select { flex: 1; }
  .count { width: 100%; text-align: right; margin: 0; }
  .widgets { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .form, .two { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .panel { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; padding: 14px 14px 80px; }
  .panel-head h2 { font-size: 22px; }
  .batch { bottom: 8px; width: calc(100% - 16px); padding: 8px 10px; }
  .batch-row .btn { flex: 1 1 44%; }
  .batch-form label { flex: 1 1 100%; }
  .toasts { top: auto; bottom: 90px; right: 10px; }
}

/* ── Changes: the change log ─────────────────────────────────────────────── */
.reset-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.reset-form label { flex-direction: row; align-items: center; gap: 8px; }
.reset-confirm { background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; }
.changes { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.changes > li + li { border-top: 1px solid var(--line); }
.change-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0;
  color: inherit; font: inherit; padding: 10px 14px; cursor: pointer; }
.change-row:hover { background: var(--panel-2); }
.change-row .when { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.change-row .grow, .change-lead .grow { flex: 1; min-width: 0; }
.change-row .sub { display: block; font-size: 12px; color: var(--dim); }
.changes > li.undone .change-row b { text-decoration: line-through; color: var(--dim); }
.change-detail { padding: 4px 14px 12px; }
.change-lead { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.change-lead ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.change-lead li.struck { text-decoration: line-through; color: var(--dim); }
@media (max-width: 720px) {
  .change-row { flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; }
  .change-row .when { flex-basis: 100%; }
}

/* ── Deals and the Money tab ─────────────────────────────────────────────── */
.deal { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.deal:last-of-type { margin-bottom: 8px; }
.money-line { margin: 4px 0; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.money-line b { color: var(--text); }
.section details { margin-top: 6px; }
.section details > summary { cursor: pointer; color: var(--gold-2); font-size: 13px; padding: 4px 0; }
.section details .form { margin-top: 8px; }
.note { background: var(--panel-2); border-left: 3px solid var(--gold); padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 12px; }
.money-tiles .tile { cursor: default; }
.money-tiles .tile:hover { transform: none; background: var(--panel); }
.money-h { margin: 22px 0 6px; font-size: 15px; }
.money-table td.num, .money-table th:not(:first-child) { text-align: right; }
.money-defaults { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.money-defaults .full { grid-column: 1 / -1; margin: 0; }
.money-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exp-table td { vertical-align: top; }
.offers-table tr.best td { background: var(--sel); }
.offers-table tr.dim td { opacity: .6; }
.offers-table tr.offer-edit td { padding-top: 0; }
.offers-table tr.offer-edit summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.offers-table .sub { font-weight: 400; }
.listing-here .listing-stats { margin: 8px 0; }
.listing-here .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.listing-here details { margin-top: 6px; }
.listing-here summary { cursor: pointer; color: var(--dim); }
.listing-card.focus { outline: 2px solid var(--gold); }
@media (max-width: 720px) {
  .quick-row .quick-btn { flex: 1 1 30%; padding: 13px 8px; font-size: 15px; }   /* thumbs, not mice */
  .brief-bar { flex-direction: column; }
  .brief-acts { flex-direction: row; }
}
#quick-modal .card { width: min(94vw, 460px); }
.blog-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .blog-cols { grid-template-columns: 1fr; } }
.blog-cols textarea { font: 15px/1.6 var(--font-body); }
.blog-preview { background: #fbf9f4; color: #1d1b16; border-radius: var(--radius); padding: 22px 24px;
                font: 17px/1.7 Georgia, serif; max-height: 80vh; overflow-y: auto; }
.blog-preview h1 { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
.blog-preview h2 { font-size: 21px; margin: 24px 0 6px; } .blog-preview h3 { font-size: 18px; margin: 20px 0 4px; }
.blog-preview a { color: #7a5f08; } .blog-preview ul { padding-left: 22px; }
.photo-read { background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 10px; }
.from-photo { outline: 2px solid var(--amber); outline-offset: 0; }
#new-lead-form.card { max-height: 92vh; overflow-y: auto; }
.nudges { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.nudges li { padding: 6px 10px; border-left: 3px solid currentColor; background: var(--panel-2);
             border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); }
.nudges li.t-coral { border-color: var(--coral); }
.nudges li.t-amber { border-color: var(--amber); }
.nudges li.t-sky { border-color: var(--sky); }
.listing-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.listing-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; }
.listing-head b { font-size: 16px; }
.listing-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.listing-stats div { background: var(--panel-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.listing-stats b { display: block; font-size: 20px; font-family: var(--font-figure); }
.listing-stats span { font-size: 11px; color: var(--dim); }
.listing-card .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.listing-card > details { margin-top: 8px; }
@media (max-width: 720px) { .listing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.docs { margin-top: 8px; }
.docs summary { cursor: pointer; color: var(--dim); }
.docs .deal-list { margin: 8px 0; }
.docs .doc-add { margin-top: 8px; }
.plan-steps { list-style: none; margin: 6px 0; padding: 0; }
.plan-steps li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.plan-steps li > span:first-of-type { flex: 1; }
.plan-steps li.overdue { color: var(--coral); }
.showings { list-style: none; margin: 0 0 8px; padding: 0; }
.showings li.showing { padding: 8px 0; border-bottom: 1px solid var(--line); }
.showings li.showing .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.showings .quote { margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--line-2); color: var(--text); font-style: italic; }
.trip-list .trip-log { display: flex; gap: 6px; align-items: center; }
code { background: var(--panel-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.deal-list select { min-height: 30px; padding: 2px 6px; margin-left: 8px; max-width: 160px; }
.receipt-list li { display: block; }
.receipt-list .receipt-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.receipt-list .receipt-form input { width: 100px; min-height: 32px; padding: 4px 8px; text-align: right; }
.receipt-list .receipt-form select { min-height: 32px; padding: 4px 8px; max-width: 260px; }
.trip-list .trip-log input { width: 84px; min-height: 32px; padding: 4px 8px; text-align: right; }
.goal-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; }
.goal-box .money-defaults { background: var(--panel-2); }
.goal-num { font: 700 24px var(--font-figure); }
.goal-bar { position: relative; height: 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); margin: 8px 0; overflow: hidden; }
.goal-fill { position: absolute; inset: 0 auto 0 0; background: var(--gold-fill); border-radius: 99px; }
.goal-mark { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--text); opacity: .7; }
.goal-pace { margin: 4px 0 10px; }
.goal-pace .sub { display: block; }
.goal-pace.t-mint b { color: var(--mint); } .goal-pace.t-coral b { color: var(--coral); }
.goal-need { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0; }
.goal-need div { background: var(--panel-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.goal-need b { display: block; font-size: 22px; } .goal-need span { font-size: 12px; color: var(--dim); }
.goal-need i { display: block; font-style: normal; font-size: 12px; color: var(--gold-2); }
.money-table.exp-table th { text-align: left; }
.money-table.exp-table th.r { text-align: right; }
.exp-table td.exp-acts { white-space: nowrap; text-align: right; }
.money-defaults h3 { font-size: 15px; }
.money-defaults label .sub { display: block; margin-top: 3px; }
.receipt-card { max-width: min(92vw, 720px); }
.receipt-card img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto 10px; border-radius: var(--radius-sm); }
.deal-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.deal-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px; }
.deal-list li + li { border-top: 1px solid var(--line); }
.deal-list li .num { margin-left: auto; }
@media (max-width: 720px) {
  .money-cols { grid-template-columns: 1fr; }
}

/* ── deal checklist ──────────────────────────────────────────────────────── */
.checklist > summary { display: flex; align-items: center; gap: 8px; }
.checklist .bar { flex: 0 1 120px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.checklist .bar i { display: block; height: 100%; background: var(--mint); }
.checklist h5 { margin: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.checklist li label { flex: 1; min-width: 0; flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.checklist li input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: none; }
.checklist li.done label > span { color: var(--dim); text-decoration: line-through; }
.checklist li.done label > span .sub { text-decoration: none; }
.checklist li.na label > span { color: var(--faint); font-style: italic; }
.checklist li .btn.small { padding: 2px 8px; min-height: 0; font-size: 11px; }
.lists-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lists-cols textarea { font: 13px/1.5 ui-monospace, Consolas, monospace; }
.lists-cols .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 720px) { .lists-cols { grid-template-columns: 1fr; } }

/* ── weekly recap ────────────────────────────────────────────────────────── */
.recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.recap-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.recap-block h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-2); }
.recap-block ul { margin: 0; padding-left: 18px; }
.recap-block li { margin: 3px 0; }
.toggle { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }

/* ── duplicates ──────────────────────────────────────────────────────────── */
#dupes-body { max-height: 85vh; overflow-y: auto; }
.dupe-group { border-top: 1px solid var(--line); padding: 12px 0; }
.dupe-why { margin-bottom: 8px; font-size: 13px; }
.dupe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.dupe > div { min-width: 0; overflow-wrap: anywhere; }
.dupe { flex-direction: row; align-items: flex-start; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.dupe.keep { border-color: var(--mint); background: var(--panel-2); }
.dupe input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: none; }
.dupe .sub { font-size: 12px; }

.display { font: 700 15px var(--font-display); min-width: 42px; }

/* ── the look: headings and big figures follow the chosen style (looks.css) ── */
.brand, .home-head h2, .card h3, .money-h { text-transform: var(--display-case); letter-spacing: var(--display-spacing); }
.tile b, .stats b, .call-phone { font-family: var(--font-figure); }

/* ── deal deadlines ──────────────────────────────────────────────────────── */
.deadlines > summary { cursor: pointer; color: var(--gold-2); font-size: 13px; padding: 4px 0; }
.deadlines ul { list-style: none; margin: 4px 0 0; padding: 0; }
.deadlines li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 0; font-size: 13px; }
.deadlines li .grow { flex: 1 1 160px; min-width: 0; }
.deadlines li input[type=date] { min-height: 30px; padding: 3px 6px; font-size: 13px; }
.deadlines li.late .grow { color: var(--coral); font-weight: 600; }
.deadlines li.closed .grow { color: var(--dim); text-decoration: line-through; }
.deadlines li .btn.small { padding: 2px 8px; min-height: 0; font-size: 11px; }

/* ── Calendar tab ────────────────────────────────────────────────────────── */
.cal-bar { flex-wrap: wrap; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 2px 6px; }
.cal-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 104px;
  padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.cal-day.other { opacity: .5; }
.cal-day.today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cal-day.picked { background: var(--panel-2); }
.cal-num { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cal-day.today .cal-num { color: var(--gold-2); font-weight: 700; }
.cal-item { display: block; font-size: 12px; line-height: 1.35; color: var(--text); text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-radius: 4px; padding: 1px 3px; }
.cal-item:hover { background: var(--panel-2); }
.cal-item.done { color: var(--dim); text-decoration: line-through; }
.cal-item.late { color: var(--coral); font-weight: 600; }
.cal-item .dot { margin-right: 4px; }
.cal-more { font-size: 11px; color: var(--dim); padding-left: 3px; }
.cal-daylist { margin-top: 12px; }
.cal-daylist .cal-item, .cal-listday .cal-item { white-space: normal; font-size: 14px; padding: 5px 6px; }
.cal-listday { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px; }
.cal-listday h4 { margin: 0 0 4px; font-size: 13px; }
.cal-listday.past h4 { color: var(--coral); }
.cal-google { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.task-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.task-extra select, .task-extra input[type=time] { min-height: 32px; padding: 4px 8px; }