/* Look and feel: the Lovable design direction (navy sidebar, white rounded cards on a soft blue-gray page,
   Atkinson Hyperlegible type). Older names (--bg, --accent, ...) are kept so every page picks it up at once. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); }
:root {
  --bg: oklch(97.5% .005 250);
  --surface: oklch(100% 0 0);
  --border: oklch(88% .01 250);
  --input: oklch(80% .015 250);
  --text: oklch(20% .04 258);
  --dim: oklch(43% .025 256);
  --accent: oklch(50% .15 255);          /* blue: links, focus, highlights */
  --accent-text: #ffffff;
  --primary: oklch(29% .075 258);        /* navy: main buttons */
  --primary-hover: oklch(35% .085 258);
  --blue-soft: oklch(95% .025 250);
  --blue-text: oklch(36% .12 257);
  --steel: oklch(72% .014 250);
  --steel-soft: oklch(93% .008 250);
  --steel-strong: oklch(45% .02 255);
  --muted: oklch(95% .007 250);
  --warm: oklch(98.2% .007 80);
  --warm-soft: oklch(95.5% .03 80);
  --warm-text: oklch(38% .06 65);
  --brand-navy: #031a32;
  --brand-blue: #1e8ee8;
  --ok: oklch(45% .11 155);
  --ok-bg: oklch(95% .04 155);
  --warn: oklch(47% .11 65);
  --warn-bg: oklch(95% .055 85);
  --bad: oklch(50% .18 27);
  --bad-bg: oklch(95% .03 25);
  --sidebar: oklch(25% .065 258);
  --sidebar-text: oklch(96% .008 250);
  --sidebar-dim: oklch(78% .03 255);
  --sidebar-hover: oklch(33% .07 258);
  --sidebar-line: oklch(38% .05 258);
  --steel-brushed: linear-gradient(90deg, oklch(72% .014 250), oklch(88% .01 250) 35%, oklch(78% .014 250) 60%, oklch(90% .008 250));
  --elev-card: 0 1px 0 oklch(20% .04 258 / .04), 0 1px 3px oklch(20% .04 258 / .06);
  --elev-raised: 0 8px 24px -10px oklch(20% .04 258 / .25);
  --radius: .875rem;
  --radius-sm: .6rem;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(18% .025 258);
    --surface: oklch(22% .03 258);
    --border: oklch(32% .03 258);
    --input: oklch(40% .03 258);
    --text: oklch(94% .01 250);
    --dim: oklch(75% .02 255);
    --accent: oklch(72% .13 250);
    --accent-text: oklch(18% .025 258);
    --primary: oklch(72% .13 250);
    --primary-hover: oklch(78% .12 250);
    --blue-soft: oklch(30% .06 255);
    --blue-text: oklch(85% .08 250);
    --steel-soft: oklch(28% .02 255);
    --steel-strong: oklch(78% .02 255);
    --muted: oklch(26% .025 258);
    --warm: oklch(24% .02 70);
    --warm-soft: oklch(30% .04 75);
    --warm-text: oklch(88% .06 80);
    --ok: oklch(78% .12 155);
    --ok-bg: oklch(30% .05 155);
    --warn: oklch(82% .11 80);
    --warn-bg: oklch(32% .05 75);
    --bad: oklch(75% .13 25);
    --bad-bg: oklch(32% .06 25);
    --sidebar: oklch(15% .03 258);
    --sidebar-hover: oklch(24% .04 258);
    --sidebar-line: oklch(28% .04 258);
    --elev-card: none;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dim { color: var(--dim); }
.small { font-size: .85rem; }

/* Signed-in frame. Phone: white header (logo + "Menu") with a steel strip, and a tab bar along the bottom.
   Computer (761px and wider): a navy sidebar on the left with every section, grouped. */
header.top {
  background: var(--surface); position: relative; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .6rem 16px;
}
header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--steel-brushed); }
header.top .brand { font-weight: 800; color: var(--text); margin-right: .5rem; display: inline-flex; align-items: center; gap: .55rem; line-height: 1.1; }
header.top .brand:hover { text-decoration: none; }
header.top .brand img { border-radius: 8px; display: block; }
header.top .brand small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: var(--dim); }
/* Customer-facing pages (quote link, request page, sign-in): the brand across the top. */
header.public-top { background: var(--brand-navy); border-bottom: 4px solid var(--brand-blue); text-align: center; padding: .6rem 16px; }
header.public-top img { height: 84px; width: auto; display: inline-block; }
header.top nav { display: flex; flex-wrap: wrap; gap: .1rem .25rem; flex: 1; }
header.top nav a { padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--dim); }
header.top nav a.on { background: var(--blue-soft); color: var(--blue-text); font-weight: 700; }
header.top nav a .badge { margin-left: .15rem; }
header.top nav .nav-group { display: none; }
/* "More" menu: a plain <details>, no script needed */
header.top details.more { position: relative; }
header.top details.more summary { list-style: none; cursor: pointer; padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--dim); }
header.top details.more summary::-webkit-details-marker { display: none; }
header.top details.more summary.on, header.top details.more[open] summary { background: var(--blue-soft); color: var(--blue-text); font-weight: 700; }
header.top details.more .menu { position: absolute; right: 0; z-index: 10; min-width: 13rem; margin-top: .3rem; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev-raised); }
header.top details.more .menu a { display: block; padding: .5rem .6rem; }
.badge { margin-left: .15rem; }
/* "More" menu: a plain <details>, no script needed */
header.top details.more { position: relative; }
header.top details.more summary { list-style: none; cursor: pointer; padding: .3rem .55rem; border-radius: 6px; color: var(--dim); }
header.top details.more summary::-webkit-details-marker { display: none; }
header.top details.more summary.on, header.top details.more[open] summary { background: var(--bg); color: var(--text); font-weight: 600; }
header.top details.more .menu { position: absolute; right: 0; z-index: 10; min-width: 13rem; margin-top: .3rem; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
header.top details.more .menu a { display: block; padding: .5rem .6rem; }
.badge { display: inline-block; min-width: 1.3em; padding: 0 .4em; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: .75rem; text-align: center; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 16px 3rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--elev-card); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--elev-card); }
.stat .n { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.stat.alert .n { color: var(--bad); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--dim); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.table-wrap { overflow-x: auto; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }

.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--steel-soft); border: 1px solid transparent; color: var(--steel-strong); white-space: nowrap; }
.pill.info { background: var(--blue-soft); color: var(--blue-text); }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }

.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--bad-bg); color: var(--bad); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }

form.inline { display: inline; }
label { display: block; font-size: .85rem; color: var(--dim); margin: .5rem 0 .2rem; }
input, select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--input); border-radius: var(--radius-sm); min-height: 44px;
  background: var(--surface); color: var(--text); font: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in oklch, var(--accent) 35%, transparent); outline-offset: 0; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; vertical-align: -.2rem; accent-color: var(--accent); }
.row { display: grid; gap: 0 .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--input);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; line-height: 1.2;
}
button:hover, .button:hover { background: var(--muted); text-decoration: none; }
button.primary, .button.primary { background: var(--primary); border-color: var(--primary); color: var(--accent-text); }
button.primary:hover, .button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.danger { color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }

/* approval card */
.approval { border-left: 4px solid var(--accent); }
.approval h2 { text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--accent); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.facts dt { color: var(--dim); }
dl.facts dd { margin: 0; white-space: pre-wrap; }

/* conversation */
.thread { display: flex; flex-direction: column; gap: .5rem; }
.msg { max-width: 80%; padding: .55rem .8rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); white-space: pre-wrap; }
.msg.outbound { align-self: flex-end; background: var(--ok-bg); border-color: transparent; }
.msg .meta { display: block; font-size: .75rem; color: var(--dim); margin-top: .25rem; white-space: normal; }

/* lead board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.board .col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; }
.board .col h3 { font-size: .85rem; margin: 0 0 .5rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.board .lead { display: block; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; color: var(--text); }
.board .lead:hover { border-color: var(--accent); text-decoration: none; }

/* schedule */
.week { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.day.today { border-color: var(--accent); }
.job { display: block; padding: .5rem; border-radius: 8px; border: 1px solid var(--border); margin-top: .5rem; color: var(--text); }
.job.cancelled { opacity: .55; text-decoration: line-through; }
.job.completed { background: var(--ok-bg); }

.cap span:last-child { text-align: right; flex-shrink: 0; }
.cap { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.cap:last-child { border-bottom: 0; }

/* The menu wrapper: invisible on a computer (always open, button hidden). */
header.top details.navmenu { flex: 1; display: flex; }
header.top details.navmenu > summary { display: none; }
nav.tabbar { display: none; }
header.top nav form.menu-signout { display: none; }
@media (max-width: 760px) {
  /* On a phone the full menu folds behind "☰ Menu" so pages start at the top of the screen. Opened, it drops
     down over the page as large buttons, two per row. (Help tutorials open it themselves when needed.)
     The main sections are also one tap away in the tab bar along the bottom. */
  header.top { position: sticky; top: 0; z-index: 30; }
  header.top .brand { flex: 1; }
  header.top details.navmenu { flex: 0 0 auto; order: 2; margin-right: .5rem; }
  header.top details.navmenu > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; list-style: none;
    cursor: pointer; padding: .45rem .9rem; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; }
  header.top details.navmenu > summary::-webkit-details-marker { display: none; }
  header.top details.navmenu[open] > summary { background: var(--muted); }
  header.top details.navmenu nav { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 20; display: grid;
    grid-template-columns: 1fr 1fr; gap: .4rem; padding: .75rem 16px; background: var(--surface); max-height: calc(100vh - 140px); overflow-y: auto;
    border-bottom: 1px solid var(--border); box-shadow: var(--elev-raised); }
  header.top nav .nav-group { display: block; grid-column: 1 / -1; margin: .4rem 0 0; font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  header.top nav a, header.top details.more summary { padding: .7rem .8rem; background: var(--muted); border-radius: var(--radius-sm); }
  header.top details.more { grid-column: 1 / -1; }
  header.top details.more .menu { position: static; margin-top: .4rem; box-shadow: none; max-width: none; }
  header.top form.top-signout { display: none; }
  header.top nav form.menu-signout { display: block; grid-column: 1 / -1; margin-top: .4rem; }
  header.top nav form.menu-signout button { width: 100%; }
  header.top .brand small { letter-spacing: .08em; white-space: nowrap; }
  body.signed-in { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  nav.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px -8px oklch(20% .04 258 / .18); }
  nav.tabbar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .2rem 0; min-height: 52px;
    color: var(--dim); font-size: .74rem; font-weight: 700; text-decoration: none; position: relative; }
  nav.tabbar a .ico { display: grid; place-items: center; width: 3.1rem; height: 1.9rem; border-radius: 999px; }
  nav.tabbar a .ico svg { width: 1.3rem; height: 1.3rem; }
  nav.tabbar a.on { color: var(--blue-text); }
  nav.tabbar a.on .ico { background: var(--blue-soft); }
  nav.tabbar a .badge { position: absolute; top: 0; left: calc(50% + .5rem); }
  .tutor-pill { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (min-width: 761px) {
  body.signed-in { padding-left: 252px; }
  body.signed-in header.top { position: fixed; top: 0; bottom: 0; left: 0; width: 252px; z-index: 30; flex-direction: column;
    flex-wrap: nowrap; align-items: stretch; gap: .5rem; padding: 1.1rem .8rem 1rem; background: var(--sidebar); color: var(--sidebar-text);
    border: 0; overflow-y: auto; }
  body.signed-in header.top::after { left: auto; top: 0; bottom: 0; right: 0; width: 3px; height: auto; background: var(--sidebar-line); }
  body.signed-in header.top .brand { color: var(--sidebar-text); padding: 0 .35rem .6rem; margin: 0 0 .25rem; font-size: 1.05rem;
    border-bottom: 1px solid var(--sidebar-line); }
  body.signed-in header.top .brand small { color: var(--sidebar-dim); }
  body.signed-in header.top details.navmenu { flex: 1 0 auto; display: block; }
  body.signed-in header.top details.navmenu::details-content { display: contents; }
  body.signed-in header.top nav a { display: block; }
  body.signed-in header.top nav { flex-direction: column; flex-wrap: nowrap; gap: .1rem; width: 100%; }
  body.signed-in header.top nav .nav-group { display: block; margin: .85rem .6rem .2rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-dim); }
  body.signed-in header.top nav a, body.signed-in header.top details.more summary { color: var(--sidebar-text); padding: .55rem .8rem;
    border-radius: var(--radius-sm); font-weight: 600; }
  body.signed-in header.top nav a:hover, body.signed-in header.top details.more summary:hover { background: var(--sidebar-hover); text-decoration: none; }
  body.signed-in header.top nav a.on { background: var(--surface); color: var(--primary); font-weight: 700; }
  body.signed-in header.top details.more { margin-top: .6rem; }
  body.signed-in header.top details.more summary.on, body.signed-in header.top details.more[open] summary { background: var(--sidebar-hover); color: var(--sidebar-text); }
  body.signed-in header.top details.more .menu { position: static; background: transparent; border: 0; box-shadow: none; padding: .1rem 0 0 .6rem; min-width: 0; }
  body.signed-in header.top nav a.nav-help { color: var(--sidebar-text); margin-top: .2rem; }
  body.signed-in header.top nav a.nav-help.on { color: var(--primary); }
  body.signed-in header.top form.inline { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--sidebar-line); }
  body.signed-in header.top form.inline button { width: 100%; background: transparent; color: var(--sidebar-text); border-color: var(--sidebar-line); }
  body.signed-in header.top form.inline button:hover { background: var(--sidebar-hover); }
  body.signed-in .demo-banner { border-bottom: 1px solid var(--border); }
  body.signed-in main { padding-top: 2rem; }
}
@media (max-width: 600px) {
  /* Lead stages stack on a phone instead of scrolling sideways. */
  .board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}
@media (max-width: 600px) {
  .msg { max-width: 95%; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dt { margin-top: .4rem; }
}

/* route map (inline SVG; series colours are fixed hues that read on both themes) */
.map { margin: 0; }
.map svg { width: 100%; height: auto; background: var(--bg); border-radius: 8px; }
.route-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; opacity: .75; }
.stop circle { stroke: var(--surface); stroke-width: 2; }
.stop text, .base text { font: 600 10px system-ui, sans-serif; fill: #fff; pointer-events: none; }
.stop.new circle { stroke: var(--text); stroke-width: 3; stroke-dasharray: 3 2; }
.base rect { fill: var(--text); }
.base text { fill: var(--surface); }
.s1 { --series: #2a78a8; } .s2 { --series: #c2622d; } .s3 { --series: #2f8a57; } .s4 { --series: #8a4fb8; }
.route-line { stroke: var(--series); } .stop circle { fill: var(--series); }
.legend { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--series); vertical-align: -1px; }

ol.timeline { list-style: none; padding: 0; margin: .5rem 0 0; }
ol.timeline li { padding: .25rem 0 .25rem .9rem; border-left: 2px solid var(--border); }
ol.timeline li.t-stop { border-left-color: var(--accent); }

.funnel-row { display: grid; grid-template-columns: 9rem 1fr 5rem; gap: .75rem; align-items: center; padding: .3rem 0; }
.funnel-bar { background: var(--bg); border-radius: 6px; height: 1.4rem; overflow: hidden; }
.funnel-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; min-width: 2px; }
@media (max-width: 600px) { .funnel-row { grid-template-columns: 6.5rem 1fr 3.5rem; } }

.stats.compact { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.stats.compact .n { font-size: 1.15rem; }
.breakdown { white-space: pre-wrap; font-size: .82rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; overflow-x: auto; }

/* dashboard */
.summary { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1rem; }
.summary .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; color: var(--text); }
a.box:hover { border-color: var(--accent); text-decoration: none; }
.summary .box .k { color: var(--dim); font-weight: 600; }
.summary .box .v { font-size: 1.5rem; font-weight: 700; margin: .1rem 0; font-variant-numeric: tabular-nums; }
.summary .box .d { color: var(--dim); }
.summary .box.alert { border-color: var(--bad); }
.summary .box.alert .v { color: var(--bad); }
.quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

/* local demo (DEMO_MODE) */
.demo-banner { background: var(--warn-bg); color: var(--warn); text-align: center; padding: .35rem 1rem; font-size: .9rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.demo-login { background: var(--ok-bg); color: var(--ok); border-radius: var(--radius); padding: .6rem .8rem; }

/* advertising */
nav.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
nav.tabs a { padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--dim); background: var(--surface); }
nav.tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.meter { background: var(--bg); border-radius: 999px; height: .5rem; overflow: hidden; margin: .35rem 0; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ad-version { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .75rem 0; border-bottom: 1px solid var(--border); }
.ad-version:last-of-type { border-bottom: 0; }
.ad-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; background: var(--bg); }
.ad-preview p { margin: .4rem 0; overflow-wrap: anywhere; }
.ad-preview .ad-headline { font-weight: 700; }
.ad-preview.google_search .ad-headline { color: var(--accent); font-size: 1.05rem; }
.warn-text { color: var(--warn); }
.rule { padding: .5rem 0; border-bottom: 1px dashed var(--border); }
button.small, .button.small { padding: .3rem .65rem; font-size: .85rem; min-height: 36px; }
@media (max-width: 760px) { .ad-version { grid-template-columns: 1fr; } }
/* campaigns table: one card per campaign on a phone */
@media (max-width: 600px) {
  table.campaigns thead { display: none; }
  table.campaigns tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--border); }
  table.campaigns td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; }
  table.campaigns td:first-child { display: block; padding-bottom: .35rem; }
  table.campaigns td[data-label]::before { content: attr(data-label); color: var(--dim); font-size: .85rem; }
  table.campaigns td[data-label] > * { text-align: right; }
}

/* Help Center (app/templates/help.html) */
.help { font-size: 1.0625rem; }
.help .lead { font-size: 1.15rem; max-width: 46rem; }
.help .help-kicker { margin: 0 0 .25rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.help .help-tour { border-left: 4px solid var(--accent); }
.help .help-tour h2 { font-size: 1.4rem; }
.help h2.help-h { margin-top: 1.5rem; font-size: 1.2rem; }
.help-guides { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1rem; }
.help-guides .card { margin-bottom: 0; display: flex; flex-direction: column; }
.help-guides .card .actions { margin-top: auto; padding-top: .5rem; }
.help h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.help button { min-height: 44px; }
.help kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; font: inherit; font-size: .9em; background: var(--bg); }
header.top nav a.nav-help { font-weight: 600; color: var(--accent); }

/* Tutorials (app/static/tutor.js): dimmed page, a highlighted control, and the step window */
.tutor-root [hidden] { display: none !important; }
.tutor-shade { position: fixed; z-index: 1000; background: rgba(8, 10, 14, .62); }
.tutor-ring { position: fixed; z-index: 1001; pointer-events: none; border-radius: 8px;
  outline: 3px solid var(--accent); outline-offset: 0; box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); transition: all .15s ease; }
.tutor-pop { position: fixed; z-index: 1002; background: var(--surface); color: var(--text);
  border: 2px solid var(--accent); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
  font-size: 1.125rem; line-height: 1.5; max-height: calc(100vh - 16px);
  display: flex; flex-direction: column; }
/* Long text scrolls inside the window; the buttons always stay in view. */
.tutor-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.tutor-pop.tutor-sheet { border-radius: 14px; padding: .75rem .9rem; font-size: 1.0625rem; max-height: 60vh; }
.tutor-pop.tutor-sheet .tutor-sub { padding-top: .25rem; margin-top: .25rem; }
.tutor-pop.tutor-sheet .tutor-actions { margin-top: .35rem; }
.tutor-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; font-size: .95rem; }
.tutor-count { font-weight: 700; color: var(--accent); }
.tutor-name { color: var(--dim); }
.tutor-bar { height: .4rem; border-radius: 999px; background: var(--bg); margin: .4rem 0 .6rem; overflow: hidden; }
.tutor-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tutor-pop h2 { font-size: 1.35rem; margin: 0 0 .35rem; outline: none; }
.tutor-pop .tutor-text { margin: 0 0 .5rem; }
.tutor-pop .tutor-note { margin: 0 0 .5rem; padding: .45rem .6rem; border-radius: 8px; background: var(--bg); font-size: 1rem; }
.tutor-pop.tutor-look .tutor-note { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.tutor-pop .tutor-msg { margin: 0 0 .5rem; padding: .45rem .6rem; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-weight: 600; font-size: 1rem; }
.tutor-pop .tutor-msg:empty { display: none; }
.tutor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tutor-actions button { min-height: 44px; font-size: 1rem; }
.tutor-actions .tutor-next { margin-left: auto; }
.tutor-sub { border-top: 1px solid var(--border); padding-top: .5rem; }
.tutor-sub button { background: transparent; border-color: transparent; color: var(--dim); padding-left: .5rem; padding-right: .5rem; }
.tutor-sub button:hover { color: var(--text); border-color: var(--border); }
.tutor-pop button:focus-visible, .tutor-pill button:focus-visible, [data-tour-current]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tutor-pill { position: fixed; z-index: 1002; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: calc(100vw - 32px); padding: .6rem .75rem; background: var(--surface); color: var(--text);
  border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 1rem; }
.tutor-pill button { min-height: 44px; }
.tutor-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tutor-still .tutor-ring { transition: none; }
@media (max-width: 640px) { .tutor-pill { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* Quote delivery and customer messages (quote_send, message_compose, quote_public, comms_macros) */
ol.stages { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 1rem; counter-reset: st; }
ol.stages li { counter-increment: st; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--dim); font-size: .9rem; }
ol.stages li::before { content: counter(st) ". "; }
ol.stages li.done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
ol.stages li.now { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); font-weight: 600; }
.quote-doc { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--surface); }
.quote-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; border-bottom: 1px solid var(--border);
  padding-bottom: .6rem; margin-bottom: .8rem; }
.quote-biz { font-size: 1.25rem; font-weight: 700; }
.quote-no { text-align: right; }
.quote-price { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1rem 0 .5rem;
  padding: .7rem .9rem; border-radius: var(--radius); background: var(--bg); font-size: 1.1rem; }
.quote-price strong { font-size: 1.5rem; }
.quote-doc h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.pre { white-space: pre-wrap; }
.quote-public { max-width: 720px; margin: 0 auto; font-size: 1.0625rem; }
.quote-answer { margin-top: 1.25rem; }
.quote-answer h2 { font-size: 1.25rem; }
button.big { font-size: 1.1rem; padding: .75rem 1.4rem; min-height: 48px; }
.send-box { border-radius: var(--radius); padding: .6rem .9rem; margin-top: 1rem; }
.send-box.ok { background: var(--ok-bg); color: var(--ok); }
.send-box.warn { background: var(--warn-bg); color: var(--warn); }
.send-box p { margin: .25rem 0; }
fieldset.recipients, fieldset.agreement, .quote-send fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem .7rem; margin: .5rem 0; }
fieldset legend { font-weight: 600; padding: 0 .3rem; }
fieldset { min-width: 0; }   /* by default a fieldset grows to its widest content and overflows a phone */
label.recipient .pill { white-space: normal; }
label.recipient { display: flex; gap: .6rem; align-items: flex-start; color: var(--text); font-size: 1rem; padding: .4rem 0;
  border-bottom: 1px dashed var(--border); }
label.recipient:last-child { border-bottom: 0; }
label.recipient input { width: auto; margin-top: .3rem; }
label.check { display: flex; gap: .5rem; align-items: center; color: var(--text); font-size: .95rem; }
label.check input { width: auto; }
.contact-line { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-top: .3rem; }
.add-contact { margin-top: .75rem; }
.add-contact summary { list-style: none; display: inline-block; }
.add-contact summary::-webkit-details-marker { display: none; }
.plan-confirmation { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.plan-confirmation details { flex: 0 0 100%; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
ul.tight { margin: .3rem 0 .3rem 1.1rem; padding: 0; }
ul.sending li { padding: .25rem 0; }
.customer-quote details > summary { list-style: none; display: inline-block; }
.customer-quote details > summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) {
  .quote-no { text-align: left; }
  .quote-price { flex-direction: column; align-items: flex-start; }
}
@media print {
  header.top, .demo-banner, .no-print, .flash, nav { display: none !important; }
  body.signed-in { padding: 0 !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .quote-doc { border: 0; padding: 0; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Public "Request a cleaning" page */
.request-public { max-width: 40rem; margin: 0 auto; }
.request-public .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request-public fieldset .check { display: block; margin: .3rem 0; }
.request-public .days .check { display: inline-block; margin-right: .8rem; }

/* Job photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.photo-grid figcaption { margin-top: .3rem; }

/* "← Back" at the top of every signed-in page, and map buttons next to addresses. */
.back-row { margin: 0 0 .5rem; }
.back-link { display: inline-block; padding: .35rem 0; font-size: .95rem; }
.map-links { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }

/* An emailed quote: the full quote text shown under the owner's note. */
.quote-in-email { margin: .5rem 0 1rem; }
.quote-text { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .9rem; background: var(--bg, #f6f7f9);
  border: 1px solid var(--line, #e3e5ea); border-radius: var(--radius); padding: .75rem; max-height: 22rem; overflow: auto; margin: 0; }

/* The quote the customer sees: a navy band with the logo on top. */
.quote-doc-head.branded { background: var(--brand-navy); color: #fff; border-radius: var(--radius) var(--radius) 0 0;
  margin: -1rem -1.1rem 1rem; padding: 1rem 1.1rem; border-bottom: 4px solid var(--brand-blue); }
@media print { .quote-doc-head.branded { margin: 0 0 1rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.quote-doc-head.branded .dim { color: rgba(255,255,255,.75); }
.quote-doc-head.branded img { height: 64px; width: auto; display: block; margin-bottom: .35rem; }

/* Prospects */
.prospect-list { display: grid; gap: .6rem; }
ul.plain.prospect-list > li.prospect-row { margin: 0; padding: .7rem .9rem; }
ul.plain.prospect-list > li.prospect-row.due { border-left: 4px solid var(--warn); }
.prospect-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
details.inline-details { display: inline-block; }
details.inline-details > summary { list-style: none; cursor: pointer; }
details.inline-details[open] { display: block; width: 100%; }

/* What's New dot, help guides, research review */
.new-dot { color: var(--accent); font-size: .7rem; vertical-align: super; }
.help-quick details { border-bottom: 1px solid var(--border); padding: .5rem 0; }
.help-quick details:last-child { border-bottom: 0; }
.help-quick summary { cursor: pointer; font-weight: 600; }
.finding { display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; align-items: start; }
.finding input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin-top: .2rem; }
.truth-known { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.truth-likely { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

/* Job record (app/templates/_job_record.html) */
.wide { display: block; width: 100%; text-align: center; }
.job-record .big { font-size: 1.25rem; min-height: 56px; margin: .5rem 0; }
.job-record details.more, #money details.more, #history details.more { margin-top: .75rem; }
.job-live { font-size: 1.05rem; }
.job-side { margin-top: .5rem; }
.job-side .button { flex: 1 1 30%; text-align: center; min-height: 44px; }
.money-table { width: 100%; border-collapse: collapse; margin-bottom: .75rem; }
.money-table td { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.money-table td:last-child { text-align: right; }
.money-left { background: var(--ok-bg); border-radius: var(--radius); padding: .6rem .9rem; }
.money-left div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.money-left .total { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .4rem; font-size: 1.1rem; }
li.voided > strong, li.voided > span { text-decoration: line-through; opacity: .6; }
.receipt-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-left: .4rem; border: 1px solid var(--border); }
.inline-actions { margin-top: .4rem; }
ul.history li.ev-scope_change { border-left: 4px solid var(--warn); padding-left: .6rem; }
ul.history li.ev-correction { border-left: 4px solid var(--border); padding-left: .6rem; }
.paper { max-width: 720px; margin: 0 auto; }
.paper table { width: 100%; border-collapse: collapse; }
.paper td, .paper th { padding: .4rem 0; border-bottom: 1px solid var(--border); text-align: left; }
.paper td.num, .paper th.num { text-align: right; }
/* One-tap field logging on a prospect */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.quick-grid button { width: 100%; min-height: 56px; }

/* Lead Engine verdict buttons */
.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .5rem 0 .25rem; }
.verdicts button { min-height: 48px; font-size: 1rem; }
/* Lead Engine review desk groups */
h3.lane { margin: 1.1rem 0 .2rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
h3.lane:first-of-type { margin-top: .25rem; }