@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --blue: #0A6EB4; --blue-deep: #0B5A92; --blue-soft: #E7F1FA; --blue-ring: rgba(10,110,180,.28);
  --ink: #15202B; --ink-2: #4F5F6F; --ink-3: #5F6C79; --field: #8593A1;
  --line: #E3E8EE; --line-2: #EEF2F6; --page: #F6F8FA; --card: #FFFFFF;
  --good: #1E8E5A; --good-soft: #E6F5EC; --warn: #B9771A; --warn-soft: #FBF1E1; --bad: #B83A2E; --bad-soft: #FBE9E7;
  --r: 10px; --rs: 6px; --shadow: 0 1px 2px rgba(21,32,43,.06), 0 8px 24px -16px rgba(21,32,43,.18);
  --font: 'Public Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --nav-h: 56px; /* the phone nav's height, so a bar that sticks under it knows where to stop */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the attribute always wins, even over a component's display, such as a button's */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 40px 0 12px; letter-spacing: -0.005em; }
h2:first-child, .section-top h2 { margin-top: 0; }
h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 12px; max-width: 70ch; }
small, .meta { font-size: 0.86rem; color: var(--ink-2); }
.muted { color: var(--ink-3); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--line-2); padding: 1px 5px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.nav { background: var(--card); border-right: 1px solid var(--line); padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; align-items: baseline; gap: 6px; padding: 2px 10px 22px; }
.brand b { font-size: 1.2rem; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; }
.brand span { color: var(--ink-3); font-size: 0.95rem; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rs); color: var(--ink-2); font-weight: 500; position: relative; }
.nav a svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.nav a.on { background: var(--blue-soft); color: var(--blue-deep); }
.nav a.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; background: var(--blue); border-radius: 0 3px 3px 0; }
.nav .count { margin-left: auto; font-size: 0.75rem; font-weight: 600; background: var(--blue); color: #fff; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.nav .group { color: var(--ink-3); font-size: 0.78rem; padding: 18px 10px 6px; }
.nav .foot { margin-top: auto; padding: 10px; font-size: 0.8rem; color: var(--ink-3); }
.nav .find { margin: -8px 2px 16px; }
.nav .find input { padding: 7px 10px; font-size: 0.9rem; }
.nav .more { display: none; }
.main { padding: 34px 40px 80px; max-width: 1160px; min-width: 0; }
.shell.solo { grid-template-columns: minmax(0, 1fr); }
.shell.solo .main { margin: 0 auto; width: 100%; }
.nav .signout { padding: 0 10px 4px; font-size: 0.8rem; }
button.link { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; cursor: pointer; text-decoration: underline; }
button.link:hover { color: var(--ink); background: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signin { max-width: 380px; margin: 10vh auto 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-2); margin: 6px 0 0; }
.page-head > div { min-width: 0; }
.page-head .sub code { overflow-wrap: anywhere; }
.page-head .actions { margin: 0; }

/* needs-you hero */
.needs { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 8px; }
.needs > a, .needs > div { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.needs > :last-child { border-bottom: 0; }
.needs a:hover { background: var(--page); text-decoration: none; }
.needs .n { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; color: var(--blue-deep); font-variant-numeric: tabular-nums; line-height: 1; }
.needs .zero .n, .needs .zero { color: var(--ink-3); }
.needs .what { font-weight: 500; }
.needs .what small { display: block; font-weight: 400; }
.needs .go { color: var(--ink-3); font-size: 1.1rem; }

/* cards and grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.card.soft { background: var(--blue-soft); border-color: transparent; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.grid-2 > * { min-width: 0; } /* let a wide table scroll inside its column instead of widening the page */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stack > * + * { margin-top: 22px; }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--rs); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-size: 0.92rem; max-width: 420px; z-index: 50; }
/* Once faded, the toast stops catching taps meant for the buttons under it. */
.toast.hide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s linear .3s; }
body:has(.review) .toast { bottom: 112px; } /* clear of the Approve bar */

/* tables */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th { text-align: left; font-weight: 500; color: var(--ink-2); font-size: 0.82rem; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #FAFBFC; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; color: var(--ink-3); font-size: 0.82rem; white-space: nowrap; }
/* Real Apollo data has long titles and addresses: let them wrap so every column stays on screen. */
.leads-table td .sub, .enrol-table td .sub { white-space: normal; overflow-wrap: break-word; }
.leads-table td:nth-child(n+4) { white-space: nowrap; }
.filters input.lead-search { width: 260px; max-width: 100%; }
/* Bulk actions sit above the list and stick to the top of the window once anything is ticked. */
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.bulk-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bulk select { width: auto; min-width: 170px; }
.bulk .check { margin-right: 0; }
.bulk-count { color: var(--ink-2); font-weight: 600; min-width: 86px; }
.bulk.on { position: sticky; top: 0; z-index: 15; border-color: var(--blue); box-shadow: var(--shadow); } /* under the phone nav and its More menu */
.bulk.on .bulk-count { color: var(--blue-deep); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pager .meta { margin-right: auto; }
.act-bar { margin: 0 0 6px; }
.act-bar .sep { width: 1px; height: 26px; background: var(--line); }
.prospects-table td:last-child { white-space: nowrap; }
/* On a phone every bulk action stays on screen: the bar wraps, tighter, with shorter labels, instead of scrolling
   sideways past the edge. It sticks just below the nav, which sticks to the top there too. */
@media (max-width: 820px) {
  .bulk { gap: 8px 10px; padding: 8px 12px; }
  .bulk.on { top: var(--nav-h); }
  .bulk-group { display: contents; } /* every control flows in one wrapping row: about three lines on a phone */
  .bulk .wide { display: none; }
  .bulk select { min-width: 0; flex: 1 1 100px; }
  .bulk button { padding-left: 12px; padding-right: 12px; }
  .bulk .check { font-size: 0.86rem; margin: 0; }
  .bulk-count { min-width: 0; }
  .act-bar .sep { display: none; }
}
.meter { display: inline-block; width: 64px; height: 6px; background: var(--line-2); border-radius: 3px; vertical-align: middle; margin-left: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.meter.good i { background: var(--good); } .meter.warn i { background: var(--warn); } .meter.bad i { background: var(--bad); }

/* status and categories */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); margin-right: 7px; vertical-align: 1px; }
.dot-active, .dot-Won, .dot-Booked, .dot-sent, .dot-accepted, .dot-booked { background: var(--good); }
.dot-paused, .dot-Not, .dot-pending, .dot-Quoted { background: var(--warn); }
.dot-Lost, .dot-Unsubscribed, .dot-Invalid, .dot-failed, .dot-declined, .dot-unsubscribed, .dot-bounced { background: var(--bad); }
.dot-In, .dot-Replied, .dot-in_sequence, .dot-draft { background: var(--blue); }
.dot-New, .dot-done { background: var(--ink-3); }
.dot-No { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.dot-org_replied { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dot-out { background: var(--blue); } .dot-due { background: var(--warn); } .dot-late { background: var(--bad); }
.dot-email-verified { background: var(--good); }
.dot-email-risky { background: var(--warn); }
.dot-email-invalid { background: var(--bad); }
.dot-email-unknown, .dot-email-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cat-Interested { background: var(--good-soft); color: var(--good); }
.cat-Pricing { background: var(--blue-soft); color: var(--blue-deep); }
.cat-Not { background: var(--warn-soft); color: var(--warn); }
.cat-Unsubscribe, .cat-Bounce { background: var(--bad-soft); color: var(--bad); }
.cat-Out { color: var(--ink-3); }
.cat-Unclassified { outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cat-Quote { background: var(--blue-soft); color: var(--blue-deep); }
.cat-Ready { background: var(--good-soft); color: var(--good); } .feed li.f-Ready::before { background: var(--good); }
.cat-Demo { background: var(--blue-soft); color: var(--blue-deep); } .feed li.f-Demo::before { background: var(--blue); }

/* feed */
.feed { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.feed li { padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--line-2); position: relative; }
.feed li::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line); }
.feed li.f-Interested::before { background: var(--good); } .feed li.f-Pricing::before { background: var(--blue); }
.feed li.f-Not::before { background: var(--warn); } .feed li.f-Unsubscribe::before, .feed li.f-Bounce::before { background: var(--bad); }
.feed li:last-child { border-bottom: 0; }
.feed .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.feed .row a { font-weight: 600; color: var(--ink); }
.feed .row time { color: var(--ink-3); font-size: 0.82rem; white-space: nowrap; }
.feed .sum { color: var(--ink-2); font-size: 0.9rem; margin-top: 2px; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.qlist li:last-child { border-bottom: 0; }
.qlist q { quotes: '\201C' '\201D'; }
.qlist small { display: block; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 5px 11px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem; }
.chips b { color: var(--blue-deep); font-variant-numeric: tabular-nums; }

/* forms */
form { margin: 0; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.form.narrow { grid-template-columns: 1fr; }
.field label, label.lbl { display: block; font-size: 0.84rem; color: var(--ink-2); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=password], input[type=file], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--field); border-radius: var(--rs); font: inherit; background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
button:focus-visible, a:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input[readonly], textarea[readonly] { background: var(--page); color: var(--ink-2); }
.span { grid-column: 1 / -1; }
.field label.check, .check { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 0.92rem; }
.field .hint { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.84rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.actions select { width: auto; min-width: 180px; }
button, .btn { font: inherit; font-weight: 500; font-size: 0.92rem; padding: 9px 15px; border-radius: var(--rs); border: 1px solid var(--blue); background: var(--blue); color: #fff; cursor: pointer; line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.secondary, button.secondary { background: var(--card); color: var(--blue-deep); border-color: var(--line); }
.secondary:hover, button.secondary:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.ghost, button.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.ghost:hover, button.ghost:hover { background: var(--line-2); border-color: transparent; color: var(--ink); }
.danger, button.danger { background: transparent; color: var(--bad); border-color: transparent; }
.danger:hover, button.danger:hover { background: var(--bad-soft); border-color: transparent; }
.small, button.small { padding: 5px 10px; font-size: 0.84rem; }
kbd { font: 600 0.72rem/1 var(--font); padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.22); color: inherit; border: 1px solid rgba(255,255,255,.3); }
.secondary kbd, .ghost kbd, .danger kbd { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.inline { display: inline; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters input, .filters select { width: auto; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 22px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-2); padding: 10px 14px; margin-bottom: -1px; font-weight: 500; white-space: nowrap; }
.tabs button:hover { background: none; color: var(--ink); }
.tabs button.on { color: var(--blue-deep); border-bottom-color: var(--blue); }
.tabs button .count { background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 0 7px; font-size: 0.75rem; }
/* A phone fits a lead's four tabs, Timeline count included, on one line; a longer row, such as Settings, wraps
   onto a second line instead of hiding its last tabs past the edge. */
@media (max-width: 480px) { .tabs { gap: 0; flex-wrap: wrap; } .tabs button { padding: 10px 8px; } }
[data-pane] { display: none; } [data-pane].on { display: block; }

/* lead header */
.lead-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; flex: 0 0 52px; }
.lead-head .who h1 { font-size: 1.5rem; }
.lead-head .facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 0.92rem; margin-top: 4px; }
.lead-head .facts b { color: var(--ink); font-weight: 500; }
.callout { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 10px 14px; border-radius: 0 var(--rs) var(--rs) 0; margin: 18px 0 0; font-size: 0.92rem; }
.callout.info { background: var(--blue-soft); border-color: var(--blue); }

/* review workspace (approvals) */
.review { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.queue { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
.queue a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.queue a:last-child { border-bottom: 0; }
.queue a:hover { background: var(--page); text-decoration: none; }
.queue a.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.queue .org { font-weight: 600; display: block; }
.queue .line { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.queue time { color: var(--ink-3); font-size: 0.8rem; }
.queue .head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.86rem; color: var(--ink-2); position: sticky; top: 0; z-index: 1; background: var(--card); }
.pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.pane .top { border-radius: var(--r) var(--r) 0 0; }
.pane .top form select { width: auto; }
.pane .top form { flex-wrap: nowrap; }
.pane .top { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.pane .top .who { font-weight: 600; font-size: 1.05rem; }
.pane .body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.pane .body > div { padding: 20px 22px; }
.pane .body > div:first-child { border-right: 1px solid var(--line); background: #FBFCFD; }
.thread { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.55; color: var(--ink); max-height: 360px; overflow: auto; overflow-wrap: anywhere; }
.quote-box { margin-top: 18px; padding: 14px 16px; background: var(--blue-soft); border-radius: var(--rs); font-size: 0.9rem; }
.quote-box b { font-size: 1.05rem; color: var(--blue-deep); }
.draft input[type=text] { font-weight: 500; }
.draft textarea { min-height: 300px; font-size: 0.95rem; }
.attach { border: 1px solid var(--line); border-radius: var(--rs); padding: 10px 14px 4px; margin: 14px 0 0; }
.attach legend { font-size: 0.84rem; color: var(--ink-2); font-weight: 500; padding: 0 4px; }
.attach .check { display: flex; margin: 0 0 8px; }
.attach .check .meta { margin-left: auto; padding-left: 10px; white-space: nowrap; }
.attach p.meta { margin: 4px 0 8px; }
.warn-text { color: var(--warn); }
.collateral-table td .sub { white-space: normal; overflow-wrap: anywhere; }
/* Products: the name takes the spare width and the room bucket fits its longest word. */
.products-table th, .products-table td { padding-left: 9px; padding-right: 9px; }
.products-table th { white-space: normal; }
.products-table .name input { min-width: 180px; }
.products-table select { width: auto; min-width: 108px; }
/* On a phone a product name or file title stays readable; the table scrolls sideways instead of squashing it. */
@media (max-width: 820px) { .table-wrap td > input[type=text] { min-width: 170px; } }
.pane .bar { padding: 14px 22px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--card); position: sticky; bottom: 0; }
.pane .bar .spacer { flex: 1; }
.page-head .keys kbd { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.queue .deal { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--ink-2); }
.undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.pane .callout { margin: 14px 22px 0; }
.earlier { margin-bottom: 18px; }
.earlier summary { cursor: pointer; color: var(--blue-deep); font-weight: 500; font-size: 0.9rem; }
.earlier-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.reply-line, .pane .bar .narrow { display: none; }
.rooms { border: 1px solid var(--line); border-radius: var(--rs); padding: 10px 14px 4px; margin: 14px 0 0; }
.rooms legend { font-size: 0.84rem; color: var(--ink-2); font-weight: 500; padding: 0 4px; }
.rooms .room-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; max-width: 360px; }
.rooms .room-inputs button { grid-column: 1 / -1; justify-self: start; }
.rooms label { font-size: 0.84rem; color: var(--ink-2); font-weight: 500; }
.rooms input[type=number] { display: block; margin-top: 4px; padding: 7px 9px; }
.rooms p.meta { margin: 8px 0 6px; }
@media (max-width: 820px) {
  /* On a phone the draft comes first, with their reply as one line above it; the full reply follows. */
  .page-head .keys, .pane .bar kbd, .pane .bar .hint, .pane .bar .wide, .pane .top .from { display: none; }
  .pane .bar .narrow { display: inline; }
  .review > *, .pane .body > div { min-width: 0; } /* so the one-line reply can't widen the column */
  .review .queue { max-height: 196px; } /* .review beats the 960 px block below */
  .pane .top { padding: 12px 16px; }
  .pane .callout { margin: 12px 16px 0; }
  .pane .body > div { padding: 14px 16px; }
  .pane .body > .draft { order: -1; }
  .review .pane .body > div:first-child { border-bottom: 0; border-top: 1px solid var(--line); }
  .reply-line { display: block; margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reply-line b { color: var(--ink); font-weight: 600; }
  .pane .bar { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .pane .bar button { padding: 9px 12px; white-space: nowrap; min-height: 44px; }
  .pane .top a[href^="tel:"] { display: inline-block; padding: 15px 4px; margin: -15px -4px; } /* a 44 px target in a one-line row */
  body:has(.review) .toast { pointer-events: none; } /* it fades on its own; a tap on the draft under it reaches the draft */
}

/* campaign touches timeline */
.touches { position: relative; padding-left: 92px; }
.touches::before { content: ''; position: absolute; left: 64px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.touch { position: relative; margin-bottom: 18px; }
.touch .day { position: absolute; left: -92px; top: 14px; width: 56px; padding-right: 14px; text-align: right; font-size: 0.82rem; color: var(--ink-2); font-weight: 500; }
.touch .day::after { content: ''; position: absolute; right: -13px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--blue); }
.touch.empty .day::after { border-color: var(--line); }
.touch .card { padding: 16px 18px; }
.touch input[type=text] { font-weight: 500; }
.touch textarea { min-height: 150px; }
.touch .offset { width: 90px; }
.touch .form { grid-template-columns: 110px minmax(0, 1fr); } /* offset, then subject; the body spans both at any width */
.touch .checks { margin-top: -6px; }
.lint { list-style: none; margin: 4px 0 0; padding: 0; }
.lint li { position: relative; padding-left: 15px; color: var(--ink-2); font-size: 0.86rem; margin-top: 2px; }
.lint li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.by-step { max-width: 520px; }
.enrol-actions { margin: 0 0 12px; }
.enrol-note { margin: -4px 0 10px; }
.enrol-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.enrol-table td:last-child { overflow-wrap: break-word; } /* addresses break after the @ and each dot, not mid-word */
.stat-strip { display: flex; flex-wrap: wrap; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 26px; }
.stat-strip div { padding: 14px 22px; border-right: 1px solid var(--line-2); min-width: 120px; }
.stat-strip div:last-child { border-right: 0; }
.stat-strip b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-strip small { color: var(--ink-2); }
.stat-strip .ok b { color: var(--good); } .stat-strip .low b { color: var(--warn); } .stat-strip .bad b { color: var(--bad); }
.preview summary { cursor: pointer; padding: 10px 0; color: var(--blue-deep); font-weight: 500; }
.preview .thread { background: var(--page); padding: 14px 16px; border-radius: var(--rs); margin: 4px 0 12px; }
.scroll { max-height: 340px; overflow: auto; }

/* empty */
.empty { color: var(--ink-2); padding: 22px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--r); }

/* calculator (public) */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc .rooms > .field { display: grid; grid-template-columns: 1fr 110px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.calc .rooms > .field label { margin: 0; color: var(--ink); font-weight: 500; }
.calc .rooms > .field small { display: block; color: var(--ink-2); font-weight: 400; }
.result { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; position: sticky; top: 24px; }
.result .big { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--blue-deep); line-height: 1.1; font-variant-numeric: tabular-nums; }
.result .big small { display: block; font-size: 0.95rem; color: var(--ink-2); font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.result table { margin: 14px 0; }
.result td, .result th { padding: 7px 0; }
.result .or { color: var(--ink-2); font-size: 0.9rem; }
.result .sent { margin: 0 0 14px; }
.result .terms { margin-top: 14px; }
.result .book { margin: 12px 0 0; font-size: 0.92rem; }
/* The public page's own header; left out when airdog.com.au embeds the calculator (?embed=1). */
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -12px 0 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.calc-head img { display: block; height: 32px; width: auto; }
.calc-phone { font-weight: 600; white-space: nowrap; }
.calc .live-bar { display: none; }
/* On a phone the running total rides at the bottom of the form while you type, instead of waiting below it. */
@media (max-width: 960px) {
  .calc .live-bar { display: block; position: sticky; bottom: 0; z-index: 5; margin: 16px -22px 0; padding: 12px 22px; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 -10px 18px -14px rgba(21,32,43,.35); }
  .live-bar .big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 1.45rem; font-weight: 600; color: var(--blue-deep); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .live-bar .big small { font-size: 0.9rem; font-weight: 400; color: var(--ink-2); }
  .calc .live-bar:empty, .calc .live-bar:has(> .or) { display: none; } /* no figure yet, so nothing to cover the form with */
  .result [data-live] { display: none; }
  .result [data-live] + .terms { margin-top: 0; }
  .calc .rooms input { scroll-margin-bottom: 96px; } /* a field you tap scrolls clear of the bar */
}

@media (max-width: 960px) {
  .review, .pane .body, .calc { grid-template-columns: 1fr; }
  .pane .body > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .queue { position: static; max-height: 260px; }
  .result { position: static; }
}
@media (max-width: 820px) {
  /* Short pages must not stretch the nav: it keeps its own height and the page takes the rest. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  /* Four daily pages in the bar, everything else in More. Nothing scrolls sideways, so the menu is never clipped. */
  .nav { position: sticky; top: 0; height: auto; min-height: var(--nav-h); flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); z-index: 20; }
  .nav .group, .nav .foot, .nav .brand span, .nav > .find, .nav > .signout, .nav a.minor { display: none; }
  .nav .brand { padding: 6px 8px 6px 4px; }
  .nav a { white-space: nowrap; padding: 7px 9px; }
  .nav a.on::before { display: none; }
  .nav a svg { display: none; }
  .nav .count { margin-left: 6px; }
  .nav .more { display: block; position: relative; margin-left: auto; }
  .nav .more summary { list-style: none; cursor: pointer; padding: 7px 9px; border-radius: var(--rs); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
  .nav .more summary::-webkit-details-marker { display: none; }
  .nav .more summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .nav .more[open] summary, .nav .more summary.on { background: var(--blue-soft); color: var(--blue-deep); }
  .nav .menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; z-index: 30; }
  .nav .menu a { padding: 9px 10px; }
  .nav .menu .count { margin-left: auto; }
  .nav .menu .find { margin: 2px 2px 8px; }
  .nav .menu-signout { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line-2); }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  body:has(.review) .toast { bottom: 76px; }
  @media (max-width: 480px) {
    /* A phone has room for the four pages and More, not the name too; each page's heading says where you are. */
    .nav .brand { display: none; }
    .nav a, .nav .more summary { padding: 7px 6px; font-size: 0.93rem; }
    .nav .count { margin-left: 5px; padding: 1px 6px; min-width: 18px; }
  }
  @media (max-width: 350px) {
    .nav { padding: 8px 6px; }
    .nav a, .nav .more summary { padding: 7px 4px; font-size: 0.86rem; }
    .pane .bar { flex-wrap: wrap; }
  }
  .main { padding: 20px 16px 60px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .needs > a, .needs > div { grid-template-columns: 56px 1fr auto; padding: 12px 14px; }
  .needs .n { font-size: 1.5rem; }
  .touches { padding-left: 0; } .touches::before, .touch .day::after { display: none; }
  .touch .day { position: static; text-align: left; width: auto; margin-bottom: 6px; }
  .stat-strip div { min-width: 0; flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.action-table td .sub { white-space: normal; }
.action-table td.n { white-space: nowrap; vertical-align: top; }
.row-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.row-actions form.inline { display: flex; gap: 4px; }

/* Today: problems first, then a call list you can dial from your phone */
.flags { list-style: none; margin: 0 0 14px; padding: 0; }
.flags li { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 6px; background: var(--bad-soft); border-radius: var(--rs); font-size: 0.92rem; }
.flags li .what { flex: 1 1 240px; overflow-wrap: anywhere; }
.flag-line { margin: 10px 0 0; }
.today-list { margin-top: 30px; }
.today-list h2 { margin-top: 0; }
.today-list.grid-2 > div > h2 { margin-top: 0; }
a.btn.tel { min-height: 44px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.action-table td.n a.btn.tel { margin: -6px 0; }
.launch { margin-top: 30px; }
.launch h2 { margin-top: 0; }
.footer-issue { margin: -8px 0 22px; } /* the campaign page's note about the example phone number in the footer */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 0.92rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist li .dot { flex: 0 0 8px; margin-top: 7px; }
.checklist li > span:last-child { overflow-wrap: anywhere; }

/* lead page: call, prep, and the forms around the call */
.lead-head .call { margin-left: auto; min-height: 44px; padding: 10px 18px; }
.prep { margin-bottom: 22px; }
.prep .thread { background: var(--page); padding: 14px 16px; border-radius: var(--rs); max-height: 280px; }
.prep .asked { margin: 14px 0 0; }
.prep .qlist li { padding: 7px 0; }
.prep-facts { margin-top: 10px; border-top: 1px solid var(--line-2); }
.field .lbl { display: block; font-size: 0.84rem; color: var(--ink-2); margin-bottom: 5px; font-weight: 500; }
.field .said { margin: 0 0 8px; font-size: 0.9rem; color: var(--ink); }
.rooms4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rooms4 label.room { margin: 0; font-size: 1rem; font-weight: 400; color: var(--ink); }
.rooms4 .room span { display: block; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 4px; }
input[type=time], input[type=tel] { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--rs); font: inherit; background: var(--card); color: var(--ink); }
.quotes-table td .sub { white-space: normal; }
.quotes-table td:first-child, .quotes-table .status, .quote-actions button { white-space: nowrap; }
.stock-table .code { display: none; }
.quote-actions { margin-top: 6px; }
@media (max-width: 820px) {
  /* On a phone the call list has to sit on the first screen: tiles drop their explanations and shrink. */
  .needs > a, .needs > div { padding-top: 9px; padding-bottom: 9px; }
  [id] { scroll-margin-top: calc(var(--nav-h) + 12px); } /* a tile's section lands below the sticky nav, heading and all */
  .row-actions button, .row-actions .btn { min-height: 44px; }
  .needs .what small, .page-head .actions.desk-only { display: none; }
  .needs .n { font-size: 1.3rem; }
  .needs .zero .n { font-size: 1.1rem; }
  .today-list { margin-top: 24px; }
  .lead-head .call { margin-left: 0; width: 100%; justify-content: center; }
  /* Quotes on a phone: tighter cells keep Mark sent on one line and in the card, and Stock names the model by its code. */
  .quotes-table th, .quotes-table td { padding-left: 7px; padding-right: 7px; }
  .quotes-table th:first-child, .quotes-table td:first-child { padding-left: 12px; }
  .quotes-table th:last-child, .quotes-table td:last-child { padding-right: 12px; }
  .stock-table .name { display: none; }
  .stock-table .code { display: inline; }
  .stock-table th { white-space: normal; }
}

.outbox-table .when { white-space: nowrap; }
@media (max-width: 820px) {
  /* Outbox on a phone, like a mail app's list: who it went to and when, then the subject. Two lines an email. */
  .outbox-table thead, .outbox-table .from, .outbox-table .day { display: none; }
  .outbox-table, .outbox-table tbody { display: block; }
  .outbox-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
  .outbox-table tr:last-child { border-bottom: 0; }
  .outbox-table td { padding: 0; border: 0; min-width: 0; }
  .outbox-table .to { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .outbox-table .when { grid-area: 1 / 2; font-size: 0.86rem; }
  .outbox-table .subject { grid-area: 2 / 1 / 3 / 3; display: flex; gap: 6px; white-space: nowrap; }
  .outbox-table .subject a { overflow: hidden; text-overflow: ellipsis; }
  .outbox-table .subject .sub { flex: none; }
  .outbox-table .subject .sub::before { content: "· "; }
}

.mail { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); max-width: 760px; overflow: hidden; }
.mail-head { display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.mail-head dt { color: var(--ink-3); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; }
.mail-frame { display: block; width: 100%; border: 0; background: #fff; }
.mail-text { padding: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.55; }

/* batch 1 */
/* Autopilot: Pause everything, a switch table with toggles, and Activity */
.ap-master { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 4px; }
.ap-master h2 { margin: 0 0 4px; font-size: 1.05rem; }
.ap-master .ap-state { flex: 1 1 420px; min-width: 0; }
.ap-master .meta { margin: 0; }
.ap-master.paused { background: var(--bad-soft); border-color: transparent; }
.ap-tabs a { color: var(--ink-2); padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; font-size: 0.92rem; }
.ap-tabs a:hover { color: var(--ink); text-decoration: none; }
.ap-tabs a.on { color: var(--blue-deep); border-bottom-color: var(--blue); }
.switch-table td .sub { white-space: normal; }
.switch-table td.next a.sub { color: var(--blue-deep); margin-top: 4px; }
.switch-table .what { min-width: 220px; max-width: 300px; }
.switch-table .what b { display: block; }
.switch-table .held { color: var(--ink-2); margin-top: 4px; }
.switch-table tr.off .what b, .switch-table tr.off .what .sub { color: var(--ink-3); }
.switch-table .limits { min-width: 250px; }
.switch-table .limits .sub + .sub { margin-top: 2px; }
.switch-table .last, .switch-table .next { min-width: 150px; color: var(--ink-2); font-size: 0.88rem; }
.limit-form { display: grid; gap: 6px; margin-bottom: 8px; justify-items: start; }
.limit-form label { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 0.86rem; color: var(--ink-2); }
.limit-form input[type=number] { width: 84px; padding: 5px 8px; flex: none; }
.switch-table .onoff { white-space: nowrap; }
.switch-table .onoff form { display: flex; justify-content: flex-end; }
.switch-table .onoff form + form { margin-top: 6px; }
button.toggle { background: none; border: 0; color: var(--ink-2); padding: 6px 2px; gap: 8px; font-size: 0.86rem; min-height: 32px; }
button.toggle:hover { background: none; color: var(--ink); }
.toggle .track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--field); transition: background .15s; flex: none; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(21,32,43,.3); transition: transform .15s; }
.toggle.on .track { background: var(--blue); }
.toggle.on .knob { transform: translateX(16px); }
.toggle.on .state { color: var(--blue-deep); }
.toggle .state { min-width: 22px; text-align: left; }
.ap-note { margin: 10px 0 0; }
.ap-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ap-filter a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 0.86rem; }
.ap-filter a:hover { text-decoration: none; color: var(--ink); }
.ap-filter a.on { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue-deep); }
.activity-table .when, .activity-table .by { white-space: nowrap; }
.activity-table .text { overflow-wrap: anywhere; }
.grey-line { color: var(--ink-3); }
@media (max-width: 820px) {
  .ap-master form, .ap-master form button { width: 100%; justify-content: center; }
  /* Each switch as a card: its name and toggle on top, then limits, what it did last, and when it runs. */
  .switch-table thead, .activity-table thead { display: none; }
  .switch-table, .switch-table tbody, .activity-table, .activity-table tbody { display: block; }
  .switch-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px; border-bottom: 1px solid var(--line-2); }
  .switch-table tr:last-child { border-bottom: 0; }
  .switch-table td { padding: 0; border: 0; min-width: 0; max-width: none; }
  .switch-table .what { grid-area: 1 / 1; }
  .switch-table .onoff { grid-area: 1 / 2; }
  .switch-table .limits, .switch-table .last, .switch-table .next { grid-column: 1 / -1; min-width: 0; }
  .switch-table .last::before { content: "Last did: "; color: var(--ink-3); }
  .switch-table .next::before { content: "Runs: "; color: var(--ink-3); }
  .limit-form label { max-width: 360px; }
  .switch-table .onoff button.small, .switch-table .onoff button.toggle, .limit-form button.small { min-height: 44px; }
  .activity-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
  .activity-table tr:last-child { border-bottom: 0; }
  .activity-table td { padding: 0; border: 0; min-width: 0; }
  .activity-table .text { grid-area: 1 / 1 / 2 / 3; }
  .activity-table .when { grid-area: 2 / 1; font-size: 0.84rem; }
  .activity-table .by { grid-area: 2 / 2; font-size: 0.84rem; }
}

/* batch 2 */
.signin .remember .check { margin-right: 0; }
.signin .remember .check input { margin-left: 0; }
.launch-tap { margin: 8px 0 2px; }
.security-table td:first-child { width: 30%; color: var(--ink-2); }
.security-table td { overflow-wrap: break-word; }
.security-table .state { display: flex; align-items: baseline; }
.security-table .state .dot { flex: 0 0 8px; align-self: flex-start; margin-top: 7px; }
.security-table code { overflow-wrap: anywhere; }
.security-lost { margin-top: 14px; }
@media (max-width: 640px) {
  .security-table td:first-child { width: 36%; }
  /* An env var name doesn't fit beside its note on a phone, so the name goes on its own line. */
  .server-table td { display: block; }
  .server-table td:first-child { width: auto; padding-bottom: 2px; border-bottom: 0; }
}

/* batch 3 */
/* Quotes gone quiet: on a phone the close button and 'Lost (no answer)' wrap instead of pushing the table off the card. */
.quotes-table .status .why { white-space: normal; }
.row-actions button.close-quiet { white-space: normal; text-align: left; }

/* batch 4 */
.flag-line + .answer-gap { margin-top: 4px; }
.answer-gap { overflow-wrap: anywhere; }
.dismiss-all { margin: 0 0 10px; }
.mail-rules { margin-top: 32px; }
.mail-rules textarea { min-height: 96px; }

/* batch 5 */
/* Approvals: claims flags, the one line saying what sends, the second job, and the queue's waiting times. */
.callout.flag { display: flex; flex-direction: column; gap: 4px; }
.callout.flag.block { background: var(--bad-soft); border-color: var(--bad); }
.callout.flag .snip { display: block; color: var(--ink-2); font-size: 0.88rem; overflow-wrap: anywhere; }
.callout.flag mark { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 0 -0.5em 0 rgba(185,119,26,.22); }
.callout.flag.block mark { box-shadow: inset 0 -0.5em 0 rgba(184,58,46,.2); }
.pane .top > div:first-child { flex: 1 1 260px; min-width: 0; } /* a long address line wraps beside the Call button */
.pane .top a.btn.tel { display: inline-flex; min-height: 44px; padding: 9px 14px; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.draft .draft-field { margin-top: 12px; }
.change { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--rs); }
.change > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; font-size: 0.9rem; color: var(--ink); }
.change > summary::-webkit-details-marker { display: none; }
.change > summary > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.change .change-link { color: var(--blue-deep); font-weight: 500; white-space: nowrap; }
.change[open] > summary { border-bottom: 1px solid var(--line-2); }
.change .rooms, .change .attach { border: 0; margin: 0; padding: 10px 14px 4px; }
.change .rooms + .attach { border-top: 1px solid var(--line-2); }
.draft label.check.also, .draft label.check.flag-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--rs); font-size: 0.92rem; }
.draft label.check.also { background: var(--blue-soft); }
.draft label.check.flag-check { background: var(--bad-soft); font-weight: 500; }
.draft label.check input { margin-top: 3px; flex: none; }
.reclassify { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.reclassify label { margin: 0; flex-basis: 100%; }
.reclassify select { width: auto; min-width: 0; padding: 5px 9px; font-size: 0.86rem; }
.queue .waited { white-space: nowrap; }
.queue-pill > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 44px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; font-size: 0.92rem; }
.queue-pill > summary::-webkit-details-marker { display: none; }
.queue-pill > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: 0 2px 3px 2px; }
.queue-pill[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.queue-pill[open] > .queue { margin-top: 10px; }
.routine { margin-top: 30px; }
.routine h2 { margin-top: 0; }
.routine-table td.tick { width: 36px; padding-right: 0; }
.routine-table td.tick input { width: 20px; height: 20px; margin-top: 2px; }
.routine-table td .sub { white-space: normal; margin-top: 2px; }
.routine-table .preview summary { padding: 6px 0 0; font-size: 0.88rem; }
.routine-table .preview .thread { max-height: none; }
/* Back from the phone app after a call: one line asking how it went, with the way to log it. */
.call-prompt { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 10px 8px 10px 16px; background: var(--ink); color: #fff; border-radius: var(--rs); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-size: 0.92rem; }
.call-prompt span { flex: 1; min-width: 0; }
.call-prompt .btn { background: #fff; border-color: #fff; color: var(--blue-deep); white-space: nowrap; min-height: 40px; }
.call-prompt .btn:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.call-prompt button.ghost { color: #fff; font-size: 1.2rem; line-height: 1; min-width: 40px; min-height: 40px; justify-content: center; }
.call-prompt button.ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
/* A phone reads it in the order you decide in: who, any flag, their reply, the draft, then what sends. */
@media (max-width: 960px) {
  .review .pane .body > .draft { order: 0; }
  .review .pane .body > .said { border-top: 0; border-bottom: 1px solid var(--line); }
  .review .said .thread { max-height: 32vh; }
  .review .said h3 { margin-bottom: 6px; }
  .pane .quote-box { display: none; } /* the line under the draft names the quote and its total */
  .review .pane .top { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .review .pane .top > div { min-width: 0; }
  .review .pane .top .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .review.from-text .queue-pill { margin-bottom: -8px; }
  .draft textarea { min-height: 220px; }
}
@media (max-width: 820px) {
  .page-head.from-text { margin-bottom: 14px; }
  .page-head.from-text .sub, .page-head.from-text .actions { display: none; }
  .review { gap: 16px; }
  .review .queue { max-height: 150px; } /* the open draft's reply has to fit under it */
  .pane .top a.btn.tel { padding: 9px 16px; }
  .pane .top .tel-number { display: none; } /* the number is the link; the name keeps the line */
  .draft .field label { margin-bottom: 3px; }
  .draft input[type=text] { padding: 7px 10px; }
  .draft .draft-field { margin-top: 8px; }
  .routine-table td { padding-left: 10px; padding-right: 10px; }
  .call-prompt { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  body:has(.review) .call-prompt { bottom: 76px; } /* clear of the Approve bar */
}

/* batch 6 */
/* Planned people and the supply card on Autopilot. */
.planned-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.planned-next p { margin: 0; }
.planned-next + .planned-day, .planned-day + .planned-day { margin-top: 30px; }
.planned-day h2 .meta { font-weight: 400; margin-left: 4px; }
.planned-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; }
.planned-state { white-space: nowrap; font-size: 0.9rem; }
.planned-table td .sub { white-space: normal; overflow-wrap: anywhere; }
.planned-table td.n { white-space: nowrap; }
.planned-lists { margin-top: 40px; }
.planned-lists .form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.prospect-filters select { max-width: 100%; } /* the monthly run's list names are long */
.supply-card { margin-top: 34px; }
.supply-card > .meta { max-width: 80ch; }
.supply-grid { margin-top: 16px; }
.supply-table td .sub { white-space: normal; }
.supply-table td.n { white-space: nowrap; }
@media (max-width: 820px) {
  .planned-next form, .planned-next button { width: 100%; justify-content: center; }
  .planned-lists .form { grid-template-columns: minmax(0, 1fr); }
}