/* Lead Math -- every page's base, and the working screens.

   THE SHOP FRONT (the sales page, signing in, terms) wears shopfront.css on
   top of this, generated by the JTS kit and scoped to body.shopfront.

   LIGHT, WITH ONE TALLY-MARK CRIMSON. The inbox is used on a phone, in a
   truck, often in bright sun (spec A.8): the page is white paper and warm
   grey, the ink is near-black, the one colour is a deep crimson (7.6:1 on
   white), and every button a thumb presses is at least 44px tall. Money
   that is a loss says so in words as well as in its colour. (Never orange
   on black: JT, 2026-09-28.) The layout and the pieces are Box 12 Helper's,
   so the JTS tools work the same way under the hand. */

:root {
  --bg:          #f6f4f1;         /* the page: warm, very light grey */
  --surface:     #ffffff;         /* cards, tables */
  --surface-2:   #f2eeea;         /* header rows, totals */
  --surface-3:   #e9e2dc;         /* hover, the tab you are on */
  --line:        #e0d8d0;
  --field:       #b9aca0;         /* the edge of a box you type in: 2.3:1, seen in sun */
  --ink:         #1b1714;
  --dim:         #5e534a;         /* 7.1:1 on white */
  --accent:      #9b2335;         /* tally-mark crimson, 7.6:1 on white */
  --accent-soft: #f8ecee;         /* the crimson, as a wash behind things */
  --on-accent:   #ffffff;
  --good:        #15703a;
  --warn:        #8a5300;
  --bad:         #b42318;
  --r:           12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 22px 90px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
.lead { font-size: 17px; max-width: 66ch; }
.tiny { font-size: 12.5px; }
.dim { color: var(--dim); }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }   /* a phrase that must not break */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 10px 18px; align-items: flex-end;
               justify-content: space-between; flex-wrap: wrap; }
.row-between h2 { margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.bad-text { color: var(--bad); }
.good-text { color: var(--good); }
code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* ---- the public header (layout.html) ------------------------------------ */
.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: inherit;
         text-decoration: none; width: fit-content; }
.jts-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; }
.say-btn {
  margin-left: auto;
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
}
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap; justify-content: flex-end; }
.sf-nav a { color: var(--dim); text-decoration: none; font-size: 14px; }
.sf-nav .sf-tools { display: inline-flex; align-items: center; gap: 7px; }
.sf-nav .sf-tools svg { width: 16px; height: 16px; }
.cog { margin-left: 6px; text-decoration: none; font-size: 19px;
       color: var(--dim); padding: 2px 6px; }
.cog:hover { color: var(--ink); }
.cog.on { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; }

.pagehead { margin: 22px 0 10px; }
.pagehead h1 { margin: 0 0 4px; }
.crumb { margin: 18px 0 0; font-size: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 18px 0;
}
.card h2 { margin: 0 0 10px; font-size: 20px; }
.card h3 { margin: 18px 0 6px; font-size: 16px; }
h2.sub { margin: 30px 0 4px; font-size: 20px; }
details.card > summary { cursor: pointer; }

/* ---- forms ---------------------------------------------------------------- */
.fld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px;
       min-width: 0; border: 0; padding: 0; }
.fld-label { font-weight: 600; font-size: 14px; }
.fld-label i { font-style: normal; color: var(--dim); font-weight: 400; }
/* On the public pages the shared sheet draws a <label for> round its box as a
   block, so the words need their own line and room under them: the 3px focus
   ring (2px out) must not touch them. */
body.shopfront form > label.fld[for] > .fld-label { display: block; margin-bottom: 8px; }
.fld-note { color: var(--dim); font-size: 13.5px; margin: 4px 0 14px; max-width: 62ch; }
/* An error says what is wrong right under the box it is about (STANDARDS
   section 7), not only in a banner at the top. */
.fld-error { color: var(--bad); font-size: 14px; font-weight: 600; margin: -8px 0 12px; }
html body .fld input[aria-invalid="true"], html body .fld textarea[aria-invalid="true"],
html body .fld select[aria-invalid="true"] { border-color: var(--bad); }
.narrow-card { max-width: 560px; }
/* Terms and Privacy: the JTS part (shared, pushed by the kit) and the Lead Math
   part, read as one page with even headings. */
.legal-card { max-width: 820px; }
.jts-legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal-card > .jts-legal:first-child > h2:first-child { margin-top: 0; }
.jts-legal + .jts-legal { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 4px; }
.jts-legal h3 { font-size: 16px; margin: 18px 0 6px; }
.jts-legal ul { padding-left: 20px; margin: 0 0 10px; }
.jts-legal li { margin: 0 0 8px; }
.jts-legal p { margin: 0 0 10px; }
.jts-legal-date { color: var(--dim); font-size: 13.5px; margin-top: 18px; }
.contact-card { max-width: 760px; }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
           gap: 0 16px; }
/* A box with its own hint under it ("8 characters or more"): the hint sits
   close under the box, and the next row keeps its usual space. */
.fld-cell { min-width: 0; margin: 0 0 14px; }
.fld-cell > .fld { margin-bottom: 0; }
.fld-cell > .fld-note { margin: 5px 0 0; }
.fld-cell > .fld-error { margin: 6px 0 0; }
.radio-set { display: grid; gap: 8px; }
/* The company form's rows take the form's whole width, so its boxes sit
   side by side on a wide screen instead of in one thin column (a .stack
   lines its children up at the start, which shrank the rows to fit). */
.stack > .fld-row.fill { justify-self: stretch; }

/* EVERY KIND OF BOX, including one with no type at all: `input[type=text]`
   does not match <input name="x">, which is how Shop Rate once shipped ten
   raw boxes on a page of a different colour. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], input[type=url], input[type=date],
input[type=time], input:not([type]), select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  min-width: 0;
}
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
select { padding-right: 8px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
input[readonly] { background: var(--surface-2); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; cursor: pointer;
         margin: 0 0 10px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 2px 0 0; }
.w-s { max-width: 90px; }
.w-m { max-width: 160px; }

button, .go {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
button:disabled, .go[aria-disabled] { opacity: .45; cursor: not-allowed; }
button:focus-visible, .go:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-quiet, button.btn-quiet {
  display: inline-block;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { border-color: var(--accent); }
.danger, button.danger {
  background: none;
  color: var(--bad);
  border: 1px solid rgba(197, 42, 42, .45);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.danger:hover { background: rgba(197, 42, 42, .06); }
button.linkbtn {
  background: none; border: 0; padding: 0 2px; color: var(--accent);
  font-size: 13.5px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
button.linkbtn.bad-text { color: var(--bad); }
.linkish { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); }
form.inline { display: inline; margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.inline-form input:not([type=file]):not([type=checkbox]):not([type=radio]),
.inline-form select { width: auto; flex: 1 1 160px; }
.inline-form .w-s { flex: 0 1 80px; }
.inline-form .w-m { flex: 0 1 160px; }
.stack { display: grid; gap: 8px; margin: 8px 0; justify-items: start; }
/* Not a tick box: one stretched to the full width pushed its words off the
   side of Settings on a phone. */
.stack input:not([type=file]):not([type=checkbox]):not([type=radio]), .stack select { width: 100%; }

/* ---- messages -------------------------------------------------------------- */
.warn {
  border-left: 4px solid var(--warn);
  background: rgba(161, 98, 7, .08);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
}
.warn.bad { border-color: var(--bad); background: rgba(197, 42, 42, .07); }
.warn.good { border-color: var(--good); background: rgba(21, 128, 61, .08); }
.warn ul { margin: 6px 0 0; padding-left: 18px; }
.notice {
  max-width: 1180px;
  margin: 8px auto;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
}
.notice.warn-line { border-color: var(--warn); }
.dl-notice { color: var(--dim); font-size: 13px; max-width: 80ch; margin: 18px 0;
             padding: 10px 14px; border: 1px dashed var(--field); border-radius: 8px;
             background: var(--surface); }

/* ---- tables and pills -------------------------------------------------------- */
/* Positioned, so a screen-reader-only word inside a table that scrolls is
   clipped with it instead of widening the whole page on a phone. */
.scroll { overflow-x: auto; position: relative; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line);
                   text-align: left; vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--dim); font-weight: 600; }
/* Money lines up on the right, digit under digit. (.tbl td would otherwise
   win over .n and left-align every column of figures.) */
.tbl .n { text-align: right; }
.tbl tfoot th { background: var(--surface-2); color: var(--ink); font-size: 13px; }
.tbl.small { font-size: 13px; }
.tbl.small td, .tbl.small th { padding: 6px 8px; }
.tbl tr.row-bad td { background: rgba(197, 42, 42, .05); }
.desk section { margin: 26px 0; }
.desk .tbl td form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.desk .tbl select { width: auto; padding: 5px 8px; font-size: 13px; }
.desk .tbl button { padding: 5px 10px; font-size: 13px; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
  vertical-align: middle;
}
.pill.new, .pill.trial, .pill.st-submitted { border-color: var(--accent); color: var(--accent); }
.pill.good, .pill.paying, .pill.comped, .pill.st-approved, .pill.st-paid { border-color: var(--good); color: var(--good); }
.pill.st-partially_paid { border-color: var(--warn); color: var(--warn); }
.pill.bad, .pill.lapsed, .pill.stopped, .pill.trialover, .pill.st-rejected { border-color: var(--bad); color: var(--bad); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }

.foot { max-width: 1180px; margin: 60px auto 0; padding-top: 18px;
        border-top: 1px solid var(--line); }
.foot a { color: var(--dim); }
.foot p { margin: 0 0 6px; }

/* ===========================================================================
   THE OFFICE'S SCREENS
   =========================================================================== */
.app-top {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--ink);
             text-decoration: none; min-width: 0; }
.app-brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-brand-words b { font-size: 16px; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; max-width: 42vw; }
.app-brand-words span { font-size: 12px; color: var(--accent); font-weight: 700;
                        letter-spacing: .08em; text-transform: uppercase; }
/* The tabs wrap rather than run off the side: seven of them do not fit on
   a phone in one row, and a page wider than the phone zooms out whole
   (bug list 2026-10-04, #139). */
.app-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; margin-right: auto;
           min-width: 0; }
.app-nav a {
  color: var(--dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.app-nav a:hover { color: var(--ink); background: var(--surface-2); }
.app-nav a.on { color: var(--ink); background: var(--surface-3); }
.pay-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(155, 35, 53, .4);
  border-radius: 8px;
  padding: 5px 11px;
}
.app-top .cog { margin-left: 0; }

.app-banner, .app-flash, .app-tip {
  max-width: 1320px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.app-banner { border-color: rgba(155, 35, 53, .3); background: var(--accent-soft); }
.app-banner.warn { border-color: rgba(197, 42, 42, .4); background: rgba(197, 42, 42, .06); }
.app-flash { border-color: rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .07); }
.app-tip { border-color: rgba(155, 35, 53, .3); background: var(--accent-soft); margin: 12px 0; }
.app-main { max-width: 1320px; margin: 0 auto; }
.app-bg .foot { max-width: 1320px; }

.empty {
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--field);
  border-radius: var(--r);
  margin: 18px 0;
  background: var(--surface);
}
.empty h2 { margin: 0 0 6px; }

/* ---- figures: the money at the top of a page ---------------------------- */
.figs { display: grid; gap: 12px; margin: 16px 0;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.fig {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
a.fig:hover { border-color: var(--accent); }
.fig.bad { border-top-color: var(--bad); }
.fig.bad .fig-n { color: var(--bad); }
.fig-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--dim); font-weight: 700; }
.fig-n { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em;
         font-variant-numeric: tabular-nums; line-height: 1.15; }
.fig .dim { font-size: 13px; }
.warn-card { border-color: rgba(197, 42, 42, .35); }

.jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.jumps a { font-size: 13.5px; font-weight: 600; color: var(--dim); text-decoration: none;
           border: 1px solid var(--line); background: var(--surface);
           border-radius: 999px; padding: 4px 11px; }
.jumps a:hover, .jumps a.on { color: var(--accent); border-color: var(--accent); }

.dl-first .dl-todo { margin: 6px 0 0; padding-left: 22px; }
.dl-todo li { margin: 0 0 10px; }
.dl-todo li.done { color: var(--dim); text-decoration: line-through; }

.howgot { margin: 12px 0 0; }
.howgot > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.howgot .trace th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink);
                    width: 46%; }
.howgot .trace td { font-variant-numeric: tabular-nums; }
.danger-zone { border-color: rgba(197, 42, 42, .25); }
.danger-zone details summary { cursor: pointer; font-weight: 600; margin: 12px 0 8px; }
.dl-sum { font-variant-numeric: tabular-nums; }
.dl-sum td:first-child { color: var(--dim); }
.dl-sum tr.due td { font-weight: 800; font-size: 16px; background: var(--accent-soft);
                    border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

@media (max-width: 640px) {
  body { padding: 0 14px 70px; }
  .app-nav { margin-left: 0; order: 3; width: 100%; gap: 2px 0; }
  .app-nav a { padding: 8px 10px; font-size: 14.5px; }
  .card { padding: 16px; }
  .figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ===========================================================================
   THE SALES PAGE'S OWN PIECES (the rest is shopfront.css)
   =========================================================================== */
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.dl-steps li {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 44px 18px 18px;
  background: var(--surface);
}
.dl-steps li::before {
  content: counter(list-item);
  position: absolute;
  top: 12px;
  left: 18px;
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dl-steps h3 { margin: 0 0 6px; font-size: 17px; }
.dl-steps p { margin: 0; color: var(--dim); }

.dl-show { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
           gap: 28px 40px; align-items: start; }
/* The example sheet: white paper on a faint ruled ground, the way a
   sheet of figures leaves the office. */
.dl-sheet {
  margin: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 50px rgba(17, 26, 43, .14);
  background-image: linear-gradient(var(--accent-soft) 1px, transparent 1px),
                    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dl-sheet-head { display: flex; flex-direction: column; margin: 0 0 10px; }
.dl-sheet-head b { font-size: 18px; color: var(--accent); }
.dl-sheet-head span { font-size: 13px; color: var(--dim); }
.dl-sheet .dl-sum { background: rgba(255, 255, 255, .92); }
.dl-sheet figcaption { margin-top: 10px; }
body.shopfront .dl-sheet td, body.shopfront .dl-sheet th { font-size: 14px; }
.dl-points { display: grid; gap: 18px; }
.dl-points div { border-top: 2px solid var(--accent); padding-top: 12px; }
.dl-points b { display: block; margin: 0 0 4px; font-size: 17px; }
.dl-points p { margin: 0; color: var(--dim); }
.dl-plans { display: grid; gap: 14px; margin: 0 0 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dl-plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
           background: var(--surface); }
.dl-plan h3 { margin: 0 0 6px; }
.dl-plan .amount, .dl-price .amount { font-size: clamp(32px, 4vw, 46px); font-weight: 800;
                                      letter-spacing: -.02em; line-height: 1; margin: 0 0 6px; }
.dl-plan .amount small { font-size: 15px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.dl-price { display: grid; gap: 18px 36px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.dl-price ul { margin: 0; padding-left: 18px; }
.dl-price li { margin: 0 0 6px; }
.dl-rule { border-left: 4px solid var(--accent); padding: 10px 14px;
           background: var(--surface-2); border-radius: 6px; margin-top: 0; }
.dl-start { max-width: 820px; }
.dl-contact { font-size: 15px; }
.dl-contact a { font-weight: 600; }
@media (max-width: 820px) {
  .dl-show { grid-template-columns: minmax(0, 1fr); }
}







/* ===========================================================================
   LEAD MATH'S OWN PIECES
   =========================================================================== */
/* EVERY BUTTON A THUMB PRESSES IN THE APP IS 44PX OR MORE (spec A.8): the
   inbox is used on a phone, one-handed, often outside. */
.app-main button, .app-main .go, .app-main .btn-quiet { min-height: 44px; }
.loss { color: var(--bad); }

/* ---- the month you are looking at --------------------------------------- */
.lm-month { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.lm-month h1 { margin: 0 6px; font-size: clamp(22px, 3vw, 30px); }
.lm-month a { display: inline-flex; align-items: center; justify-content: center;
              min-width: 44px; min-height: 44px; border: 1px solid var(--field);
              border-radius: 10px; background: var(--surface); color: var(--ink);
              text-decoration: none; font-weight: 700; padding: 0 12px; }
.lm-month a:hover { border-color: var(--accent); }
.lm-plan { font-size: 14px; color: var(--dim); margin: 0 0 12px; }
.lm-plan b { color: var(--ink); }

/* ---- the dashboard: one card per source ---------------------------------- */
.lm-srcs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.lm-src { margin: 0; }
.lm-src.total { border: 2px solid var(--accent); }
.lm-src-head { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap;
               align-items: baseline; margin: 0 0 8px; }
.lm-src-head h2 { margin: 0; font-size: 19px; }
.lm-src-head span { font-size: 13px; color: var(--dim); }
.lm-figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; margin: 0; }
.lm-f { padding: 9px 0 8px; border-top: 1px solid var(--line); min-width: 0; }
.lm-f dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim);
           font-weight: 700; }
.lm-f dd { margin: 2px 0 0; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums;
           line-height: 1.2; }
.lm-f dd .why { display: block; font-size: 13.5px; font-weight: 500; color: var(--dim);
                line-height: 1.35; }
.lm-f.big { grid-column: 1 / -1; background: var(--accent-soft); border-radius: 10px;
            border-top: 0; padding: 12px 14px; margin-top: 8px; }
.lm-f.big dd { font-size: 28px; }
.lm-f .howgot { margin: 4px 0 0; }
.lm-f .howgot > summary { font-size: 13px; padding: 4px 0; }
.lm-f .howgot .tbl { font-size: 13px; margin-top: 4px; }
.lm-f .howgot .trace th { width: 58%; }
.lm-rule { font-size: 13px; color: var(--dim); margin: 6px 0 2px; }
.lm-side .tbl td, .lm-side .tbl th { white-space: nowrap; }
.lm-side .tbl tr.total td, .lm-side .tbl tr.total th { font-weight: 800; background: var(--surface-2); }

/* ---- the lead inbox ------------------------------------------------------- */
.lm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.lm-filters a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px;
                border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
                color: var(--dim); text-decoration: none; font-weight: 600; font-size: 14px; }
.lm-filters a.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.lm-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lm-lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
           padding: 14px 16px; scroll-margin-top: 12px; min-width: 0; }
.lm-lead:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lm-lead-top { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
               align-items: baseline; }
.lm-lead-top b { font-size: 17px; overflow-wrap: anywhere; }
.lm-lead-meta { color: var(--dim); font-size: 14px; margin: 2px 0 8px; overflow-wrap: anywhere; }
.lm-lead-meta a { color: var(--ink); font-weight: 600; }
.lm-lead-notes { font-size: 14px; margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.pill.st-new { border-color: var(--accent); color: var(--accent); }
.pill.st-booked { border-color: var(--good); color: var(--good); }
.pill.st-junk, .pill.st-lost { border-color: var(--bad); color: var(--bad); }
.pill.st-contacted, .pill.st-quoted { border-color: var(--warn); color: var(--warn); }
.lm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.lm-quick > form { margin: 0; flex: 1 1 calc(33% - 8px); min-width: 92px; display: flex; }
.lm-quick button, .lm-junk > summary {
  flex: 1; min-height: 48px; padding: 8px 10px; font-size: 15px; font-weight: 700;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--field);
  border-radius: 10px; cursor: pointer; text-align: center; }
.lm-quick button:hover, .lm-junk > summary:hover { border-color: var(--accent); }
.lm-quick button.now { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lm-junk { flex: 1 1 calc(33% - 8px); min-width: 92px; display: flex; flex-direction: column; }
.lm-junk > summary { list-style: none; display: flex; align-items: center; justify-content: center; }
.lm-junk > summary::-webkit-details-marker { display: none; }
.lm-junk[open] { flex-basis: 100%; }
.lm-junk-pick { display: grid; gap: 8px; margin: 8px 0 0;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.lm-junk-pick form { margin: 0; display: flex; }
.lm-junk-pick button { flex: 1; min-height: 48px; background: var(--surface-2); color: var(--ink);
                       border: 1.5px solid var(--field); font-weight: 600; }
.lm-value { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 0;
            padding: 10px 12px; border-radius: 10px; background: rgba(21, 112, 58, .07);
            border: 1px solid rgba(21, 112, 58, .3); }
.lm-value .fld { margin: 0; flex: 1 1 160px; }
.lm-value input { min-height: 44px; font-size: 16px; }
.lm-edit { font-size: 14px; display: inline-block; padding: 10px 0 0; }
.lm-add > summary { cursor: pointer; font-weight: 700; font-size: 17px; min-height: 44px;
                    display: flex; align-items: center; }
.lm-add input, .lm-add select { min-height: 44px; font-size: 16px; }
.lm-count { font-size: 14px; color: var(--dim); }

/* ---- Rate your Google leads ----------------------------------------------- */
.lm-rate { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.lm-rate label { display: flex; gap: 14px; align-items: center; background: var(--surface);
                 border: 1.5px solid var(--field); border-radius: 12px; padding: 12px 14px;
                 cursor: pointer; min-height: 60px; margin: 0; }
.lm-rate input[type=checkbox] { width: 28px; height: 28px; flex: none; accent-color: var(--accent); }
.lm-rate b { display: block; font-size: 16px; }
.lm-rate span { color: var(--dim); font-size: 14px; }
.lm-google { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
             margin: 10px 0 0; }
.lm-google .go, .lm-google .btn-quiet { display: flex; align-items: center; justify-content: center;
                                        min-height: 52px; text-align: center; font-size: 16px; }

/* ---- importing ------------------------------------------------------------ */
.map-grid { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
            margin-bottom: 12px; }
.map-grid .fld { margin: 0 0 8px; }

/* ---- the front page's worked example -------------------------------------- */
.lm-ex { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lm-ex .dl-sheet { padding: 16px; }
.lm-shot { margin: 0; min-width: 0; }
.lm-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(27, 23, 20, .12); background: #fff; }
.lm-shot figcaption { margin-top: 12px; font-size: 14px; color: var(--dim); }
.lm-shot figcaption a { color: var(--accent); font-weight: 600; }
.sample-bar { max-width: 1320px; margin: 0 auto 12px; padding: 12px 14px; border-radius: 10px;
              background: #fff6e0; border: 1px solid #d9b45c; font-size: 15px; }
.sample-bar a { font-weight: 700; }
.pay-link { min-height: 36px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  .lm-quick > form, .lm-junk { flex-basis: calc(50% - 8px); }
  .lm-f dd { font-size: 19px; }
}
.lm-points { margin-top: 22px; }
.lm-faq dt { font-weight: 700; font-size: 16.5px; margin: 16px 0 4px; }
.lm-faq dt:first-child { margin-top: 0; }
.lm-faq dd { margin: 0; color: var(--dim); max-width: 70ch; }
.lm-rate label > span:first-of-type { flex: 1; min-width: 0; }
.lm-rate .lm-did { font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 14px; }


/* jts-more: written by jtsapps_site/kit/push_hublink.py */
/* The way out to the rest of the JTS tools, top of every app's Settings.
   Quiet -- it is a door, not a thing being sold, so it is outlined rather
   than filled and sits where the gear in the header already is. Its own
   colours: the six stylesheets do not share a button rule. */
/* NO NEGATIVE MARGIN. -8px pulled the button's box down over the
   <h1> by 4px -- harmless here because the button still won the
   hit test, but an overlapping box stealing a click is a fault
   this project has already chased once, and it is not worth
   carrying for four pixels. Measured clear at 1700 and 430 wide. */
.jts-more{display:flex;justify-content:flex-end;margin:0 0 2px}
.jts-more-btn{display:inline-block;text-decoration:none;
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--accent,#7bc043);background:transparent;
  border:1px solid var(--line,#2b323c)}
.jts-more-btn:hover{border-color:var(--accent,#7bc043);
  background:rgba(127,127,127,.10)}
/* end jts-more */

/* ---- the feedback box in Settings --------------------------------------
   Written by jtsapps_site/kit/push_feedback.py. */
.jts-feedback textarea { width: 100%; min-height: 92px; resize: vertical; }
.jts-feedback .fb-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 10px 0 0;
}
/* keyed on the ELEMENT inside this card, because the global rule stretches
   a select across its row and a class-keyed reset would miss one added
   later */
.jts-feedback .fb-row select { width: auto; flex: 0 1 auto; max-width: 100%; }
.jts-feedback .fb-row .go { margin-left: auto; }
/* the kind box carries its own label (STANDARDS 7); the label sits in the
   row and keeps the select its natural width */
.jts-feedback .fb-row .fb-kind-l { flex: 1 1 220px; margin: 0; }
.jts-feedback .fb-row .go { align-self: flex-end; }
.lm-junk > summary.now { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lm-lead-meta a[href^="tel:"] { white-space: nowrap; }
.jts-feedback .f { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; }
.jts-feedback h3 { margin-top: 0; }
.app-main a.btn-quiet, .app-main a.go { display: inline-flex; align-items: center; justify-content: center; }

/* ---- review fixes 2026-10-10 ---------------------------------------------- */
/* "Log a lead" reads as a button: a plus that turns to a minus when open. */
.lm-add > summary { list-style: none; gap: 10px; }
.lm-add > summary::-webkit-details-marker { display: none; }
.lm-add > summary::before {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent); color: var(--accent); font-size: 20px; line-height: 1; }
.lm-add[open] > summary::before { content: "\2212"; }
/* A message about one lead, in that lead's own card. */
.app-flash.in-card { margin: 0 0 10px; }
/* Find a lead. */
.lm-search { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 4px 0 12px; }
.lm-search .fld { flex: 1 1 220px; margin: 0; }
.lm-search input { min-height: 44px; font-size: 16px; }
.lm-search .btn-quiet { min-height: 44px; }
/* The import's first question when a sheet has no source column. */
.lm-which { max-width: 420px; margin: 0 0 6px; }
.lm-which select { min-height: 44px; font-size: 16px; }
/* A source's name is the way to its page (on a phone the last column is
   off the right edge). */
.lm-src-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line);
               text-underline-offset: 3px; }
.lm-src-link:hover { color: var(--accent); }
/* Side by side: headings and source names wrap, so "Profit left after lead
   cost" is never pushed behind the sideways scroll by a long name. */
.lm-side .tbl thead th { white-space: normal; vertical-align: bottom; min-width: 5.5em; }
.lm-side .tbl tbody th { white-space: normal; min-width: 8em; max-width: 13em;
                         overflow-wrap: anywhere; }

/* ---- paused lead sources (JT, 2026-10-11) ----------------------------------
   Back on the Free plan, only the 2 oldest sources keep working; the rest are
   kept to read, greyed: a warm grey wash and a dashed edge, never faded text
   (the words stay at full contrast, so they can be read in the sun). */
.plain-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pill.paused { border-color: var(--dim); color: var(--dim); background: var(--surface-2);
               white-space: normal; border-radius: 8px; }
/* In the Lead sources table the pill is just "Paused"; why sits under it, as
   plain words, so a narrow cell never wraps the pill into a circle. */
.lm-paused-why { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.lm-paused { font-size: 13.5px; color: var(--dim); margin: 0 0 8px; }
.card.paused, .lm-lead.paused { background: var(--surface-2); border: 1px dashed var(--field); }
.lm-src.paused .lm-f.big { background: var(--surface-3); }
.lm-src.paused .lm-f dd, .lm-src.paused .lm-src-head h2 { color: var(--dim); }
.tbl tr.paused td, .tbl tr.paused th { background: var(--surface-2); color: var(--dim); }

/* ---- QA fixes 2026-10-11 ---------------------------------------------------- */
/* Add / change a lead source: only the price box "How it charges" needs
   (bug 267). The select's picked option decides, so it works with no
   script; a box with an error stays in sight. Without :has, both show. */
.sf-cell-none { display: none; margin: 0 0 14px; align-self: center; }
.sf-fields:has(#sf-type option[value="monthly"]:checked) .sf-cell-cost:not(:has([aria-invalid])),
.sf-fields:has(#sf-type option[value="per_lead"]:checked) .sf-cell-month:not(:has([aria-invalid])),
.sf-fields:has(#sf-type option[value="per_click"]:checked) .sf-cell-cost:not(:has([aria-invalid])),
.sf-fields:has(#sf-type option[value="per_click"]:checked) .sf-cell-month:not(:has([aria-invalid])),
.sf-fields:has(#sf-type option[value="other"]:checked) .sf-cell-cost:not(:has([aria-invalid])),
.sf-fields:has(#sf-type option[value="other"]:checked) .sf-cell-month:not(:has([aria-invalid])) {
  display: none; }
.sf-fields:has(#sf-type option[value="per_click"]:checked) .sf-cell-none,
.sf-fields:has(#sf-type option[value="other"]:checked) .sf-cell-none { display: block; }
/* Dashboard on a phone: an open "How we got this" (bug 253). Its table
   wraps inside its own card (fixed layout, long words broken) instead of
   running 280px into the card beside it -- and, where the browser can tell
   it is open, the figure takes the card's whole width to be read. */
.lm-f .howgot .tbl { table-layout: fixed; width: 100%; }
.lm-f .howgot .trace th, .lm-f .howgot .trace td { overflow-wrap: anywhere; white-space: normal; }
.lm-f .howgot .lm-rule { overflow-wrap: anywhere; }
.lm-f:has(> .howgot[open]) { grid-column: 1 / -1; }
/* Settings: the time zone, every zone in the world (bug 254). */
.lm-tz { width: 100%; max-width: 460px; gap: 6px; }
.lm-tz select, .lm-tz input { min-height: 44px; font-size: 16px; }
.lm-tz .fld-note { margin: 2px 0 0; }
/* The app header in ONE ROW on a phone (bug 263), the way EZ Move does it:
   the name, Subscribe (Free plan only) and ONE Menu button; the five tabs
   and Settings open under it as a list with big rows. The class js-menu is
   put on <html> by the page's own script; without it the tabs wrap under
   the name as before. */
.menu-btn { display: none; }
.app-nav a.in-menu { display: none; }
@media (max-width: 900px) {
  html.js-menu .app-top { flex-wrap: wrap; gap: 8px 10px; padding: 10px 0; }
  html.js-menu .app-top .app-brand { flex: 1 1 0; min-width: 0; }
  html.js-menu .app-top .app-brand-words b { max-width: none; }
  html.js-menu .app-top .pay-link { order: 1; flex: none; }
  html.js-menu .app-top .cog { display: none; }
  html.js-menu .app-top .menu-btn {
    order: 2; flex: none; display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 8px 13px; font-size: 15px; font-weight: 600;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--field); border-radius: 10px; cursor: pointer; }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  html.js-menu .app-top .app-nav { display: none; order: 3; width: 100%; margin: 0; }
  html.js-menu .app-top .app-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 6px 0 4px; border-top: 1px solid var(--line); }
  html.js-menu .app-top .app-nav.open a { font-size: 16px; padding: 12px 10px; min-height: 44px; }
  html.js-menu .app-top .app-nav.open a.in-menu { display: block; }
}