:root {
  --ink: #23262a;
  --wire: #66707a;
  --line: #d3d8dc;
  --paper: #eceff1;
  --panel: #ffffff;
  --amp: #e8742f;
  --amp-dark: #b4531a;
  --amp-soft: #fbe6d8;
  --go: #2e7a4d;
  --go-soft: #dcefe3;
  --stop: #ad3838;
  --stop-soft: #f6dddd;
  --radius: 6px;
  color-scheme: light;
}
/* 2.0.4: dark is the default theme; "auto" follows the phone */
html[data-theme="dark"] {
    --ink: #e8eaec; --wire: #9aa3ab; --line: #3a4046; --paper: #1b1e21; --panel: #25292d;
    --amp: #f08a4b; --amp-dark: #f6a675; --amp-soft: #3d2a1e;
    --go: #6cc08f; --go-soft: #1f3528; --stop: #e07c7c; --stop-soft: #3d2222;
    color-scheme: dark;
  }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
    --ink: #e8eaec; --wire: #9aa3ab; --line: #3a4046; --paper: #1b1e21; --panel: #25292d;
    --amp: #f08a4b; --amp-dark: #f6a675; --amp-soft: #3d2a1e;
    --go: #6cc08f; --go-soft: #1f3528; --stop: #e07c7c; --stop-soft: #3d2222;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.5 "Barlow", system-ui, sans-serif;
}
a { color: var(--amp-dark); }
h1, h2, h3 { font-family: "Barlow Semi Condensed", "Barlow", sans-serif; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--amp); outline-offset: 2px; }

/* top bar (phone and tablet); becomes a sidebar on wide screens, see the end of this file */
.top .grp, .top .who { display: none; }

.top {
  background: var(--side, #111315); color: #e8eaec;
  display: flex; align-items: center; gap: 1.25rem; padding: .5rem 1.25rem;
  padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
  border-bottom: 4px solid var(--amp);
}
/* 2.0.4: dark is the default theme; "auto" follows the phone */
html[data-theme="dark"] .top { background: var(--side, #111315); color: #e8eaec; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .top { background: var(--side, #111315); color: #e8eaec; }
}
.top .brand { display: flex; align-items: center; }
.top .brand img { height: 40px; background: #fff; border-radius: 4px; padding: 2px 6px; }
.top nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.top nav a { color: inherit; text-decoration: none; padding: .4rem .7rem; border-radius: var(--radius); font-weight: 500; }
.top nav a:hover, .top nav a.on { background: rgba(255,255,255,.12); }
.top .new { background: var(--side-btn, var(--amp)); color: var(--side-btn-text, #fff); border-color: var(--side-btn, var(--amp)); }
.top .new:hover { background: var(--amp-dark) !important; }

@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
  .top .brand { flex: 1; }
  .top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -.25rem; }
  .top nav a { white-space: nowrap; }
  .top nav { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 2rem; }
}

main { max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }  /* lets wide tables scroll inside their panel */
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.muted { color: var(--wire); }
.small { font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }

/* readouts on the dashboard */
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.readouts > div { background: var(--panel); padding: 1rem 1.25rem; }
.readouts .v { font: 600 1.9rem/1.1 "Barlow Semi Condensed", sans-serif; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .readouts { grid-template-columns: 1fr; } }

/* buttons & forms */
.btn, button {
  font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: .55rem 1rem; border-radius: var(--radius); cursor: pointer; text-decoration: none; min-height: 44px;
}
.btn:hover, button:hover { border-color: var(--wire); }
.btn.primary, button.primary { background: var(--amp); border-color: var(--amp); color: var(--btn-text, #fff); }
.btn.primary:hover, button.primary:hover { background: var(--amp-dark); border-color: var(--amp-dark); }
.btn.go, button.go { background: var(--go); border-color: var(--go); color: #fff; }
.btn.danger, button.danger { color: var(--stop); }
.btn.link, button.link { border: 0; background: none; padding: .3rem; min-height: 0; color: var(--amp-dark); }
form.inline { display: inline; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
input, textarea, select {
  font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); min-height: 44px;
}
textarea { min-height: 80px; resize: vertical; }
.field { margin-bottom: 1rem; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.check input { width: auto; min-height: 0; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--wire); font-size: .9rem; border-bottom: 2px solid var(--line); padding: .5rem; }
td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--paper); }
.scroll { overflow-x: auto; }

/* status */
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .85rem; font-weight: 600;
  background: var(--paper); color: var(--wire); border: 1px solid var(--line); white-space: nowrap; }
.tag.sent { background: var(--amp-soft); color: var(--amp-dark); border-color: transparent; }
.tag.approved, .tag.paid { background: var(--go-soft); color: var(--go); border-color: transparent; }
.tag.invoiced { background: var(--ink); color: var(--paper); border-color: transparent; }
.tag.declined, .tag.fail, .tag.cancelled { background: var(--stop-soft); color: var(--stop); border-color: transparent; }
.tag.pass { background: var(--go-soft); color: var(--go); border-color: transparent; }
.tag.issues { background: var(--amp-soft); color: var(--amp-dark); border-color: transparent; }
.tag.fac { background: transparent; border-style: dashed; font-weight: 500; }

/* the job's progress, start to paid */
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: .75rem 0 1.25rem; }
.stages div { padding-top: .5rem; border-top: 6px solid var(--line); font-size: .85rem; color: var(--wire); font-weight: 500; }
.stages div.done { border-top-color: var(--amp); color: var(--ink); }
.stages div.now { border-top-color: var(--amp); font-weight: 700; color: var(--ink); }
.stages.declined div.now { border-top-color: var(--stop); }

/* line item editor */
.items td { border: 0; padding: .3rem .25rem; }
.items .desc { min-width: 220px; }
.items .qty { width: 80px; } .items .price { width: 120px; } .items .tax { width: 90px; } .items .tot { width: 110px; }
.items textarea { min-height: 44px; height: 44px; }
.totals { margin-left: auto; max-width: 320px; }
.totals div { display: flex; justify-content: space-between; padding: .3rem 0; }
.totals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.2rem; margin-top: .3rem; padding-top: .5rem; }
@media (max-width: 720px) {
  .items thead { display: none; }
  .items tr { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .items td { padding: 0; }
  .items td.dcell { grid-column: 1 / -1; }
  .items td.tot { text-align: left; padding-top: .4rem; font-weight: 600; grid-column: 1 / 3; }
  .items td:last-child { text-align: right; }
  .items .qty, .items .price, .items .tax { width: 100%; }
}

/* photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.photos figure { margin: 0; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.photos img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photos figcaption { padding: .5rem; font-size: .9rem; }
.photos figcaption input { min-height: 36px; padding: .3rem .5rem; margin-bottom: .3rem; }
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 1rem; text-align: center; margin-bottom: 1rem; }
.drop.over { border-color: var(--amp); background: var(--amp-soft); }

.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; background: var(--go-soft); color: var(--go); font-weight: 500; }
.flash.err { background: var(--stop-soft); color: var(--stop); }
details summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--wire); }

/* public page */
.public { max-width: 820px; }
.public .head { text-align: center; margin-bottom: 1rem; }
.public .head img { max-width: 320px; width: 70%; }
/* 2.0.4: dark is the default theme; "auto" follows the phone */
html[data-theme="dark"] .public .head img, html[data-theme="dark"] .login img { background: #fff; border-radius: 8px; padding: 8px; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .public .head img, html[data-theme="auto"] .login img { background: #fff; border-radius: 8px; padding: 8px; }
}
.login { max-width: 380px; margin: 8vh auto; }
.login img { width: 100%; margin-bottom: 1.5rem; }
@media print { .top, .noprint { display: none !important; } body { background: #fff; } .panel { border: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- shared bits added with compliance ---------- */
.nowrap { white-space: nowrap; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
@media (max-width: 720px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid3 { grid-template-columns: 1fr; } }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush .pad { padding: 1.25rem 1.25rem 0; }
.panel.flush .empty { padding: 2rem 1.25rem; }
.panel.flush .scroll table th:first-child, .panel.flush .scroll table td:first-child { padding-left: 1.25rem; }
form.narrow, section.narrow { max-width: 720px; }
.btn.small-btn { min-height: 36px; padding: .3rem .75rem; font-size: .92rem; }
tr.off td { opacity: .55; }
h1.portal { text-align: center; font-size: 1.4rem; margin: -.75rem 0 1.25rem; }
.readouts > a.gen { color: inherit; text-decoration: none; background: var(--panel); display: block; padding: 1rem 1.25rem; }
.readouts > a.gen:hover { background: var(--paper); }
.readouts > a.gen.alarm { box-shadow: inset 4px 0 var(--stop); }
.readouts .over { color: var(--stop); font-weight: 600; }

/* status chips: one per requirement */
.chip { display: inline-block; padding: .12rem .55rem; border-radius: 4px; font-size: .85rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; }
.chip.ok { background: var(--go-soft); color: var(--go); }
.chip.soon { background: var(--amp-soft); color: var(--amp-dark); }
.chip.overdue { background: var(--stop); color: #fff; }
.chip.never { background: var(--paper); color: var(--wire); border-color: var(--line); }
.chip.na { background: none; color: var(--wire); font-weight: 400; padding-left: 0; padding-right: 0; }
.tally { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 1rem; }

/* list rows that lead with a status stripe: dashboard, customer page */
.duelist { list-style: none; margin: 0; padding: 0; }
.duelist li { border-left: 4px solid var(--line); margin-bottom: .4rem; background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
.duelist li.overdue { border-left-color: var(--stop); }
.duelist li.soon { border-left-color: var(--amp); }
.duelist li.ok { border-left-color: var(--go); }
.duelist a { display: block; padding: .5rem .75rem; color: inherit; text-decoration: none; }
.duelist a:hover { background: var(--line); }
.duelist .who-line, .duelist .what { display: block; }
.duelist .what { font-size: .92rem; }
.duelist li.overdue .what { color: var(--stop); font-weight: 600; }

/* generator list: cards on a phone, aligned columns on a computer */
.genlist { list-style: none; margin: 0; padding: 0; }
.genlist li { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.genlist li:last-child { border-bottom: 0; }
.genlist .genhead { display: none; }
.genlist .gname { flex: 1 0 100%; color: inherit; text-decoration: none; }
.genlist .gname strong, .genlist .gname > span { display: block; }
.genlist .gname:hover strong, .genlist .gname:hover > span { color: var(--amp-dark); }
.genlist .cell .chip.na { display: none; }
.genlist .cell:not(.epa):not(.act) { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--wire); }
.genlist .cell:not(.epa):not(.act)::before { content: attr(data-label); }
.genlist .cell:has(.chip.na) { display: none; }
.genlist .epa { font-size: .9rem; color: var(--wire); }
.genlist .epa::before { content: "EPA "; }
.genlist .epa::after { content: " h"; }
.genlist .epa.warn { color: var(--amp-dark); font-weight: 600; }
.genlist .act { margin-left: auto; }

/* generator page */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1rem 0 1.25rem; }
.facts > div { background: var(--panel); padding: .6rem 1rem; }
.facts .wide { grid-column: 1 / -1; }
.facts dt { font-size: .85rem; color: var(--wire); }
.facts dd { margin: 0; font-weight: 600; }
.logbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.reqs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.reqs li { border: 1px solid var(--line); border-top: 5px solid var(--line); border-radius: var(--radius); padding: .75rem .9rem; display: grid; gap: .3rem; align-content: start; }
.reqs li.ok { border-top-color: var(--go); }
.reqs li.soon { border-top-color: var(--amp); }
.reqs li.overdue { border-top-color: var(--stop); }
.rq-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.meter { height: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--go); }
.reqs li.soon .meter span { background: var(--amp); }
.reqs li.overdue .meter span { background: var(--stop); }
.flag { font-size: .8rem; font-weight: 600; color: var(--amp-dark); border: 1px solid var(--amp); border-radius: 4px; padding: 0 .35rem; }

/* test form */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .25rem 1.5rem; margin-bottom: .5rem; }
.ckrow { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: .45rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ckrow legend { float: left; padding: 0; font-weight: 500; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.seg label { margin: 0; font-weight: 500; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; }
.seg span { display: block; padding: .5rem .8rem; min-width: 3.2rem; text-align: center; border-left: 1px solid var(--line); }
.seg label:first-child span { border-left: 0; }
.seg input:focus-visible + span { outline: 3px solid var(--amp); outline-offset: -3px; }
.seg input[value=ok]:checked + span, .seg input[value=pass]:checked + span { background: var(--go); color: #fff; }
.seg input[value=issue]:checked + span, .seg input[value=fail]:checked + span { background: var(--stop); color: #fff; }
.seg input[value=issues]:checked + span { background: var(--amp); color: #fff; }
.seg input[value=na]:checked + span { background: var(--wire); color: #fff; }
.seg.big { display: flex; }
.seg.big label { flex: 1; }
.seg.big span { padding: .7rem .5rem; }
.readings td { border: 0; padding: .25rem; }
.readings input { min-width: 70px; }
.readings td:first-child input { min-width: 130px; }
.readings .pct { color: var(--wire); padding-top: .8rem; min-width: 3rem; }
.panel.sign { border-top: 4px solid var(--amp); }

/* test record */
.result-band { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: .8rem 1.1rem; border-radius: var(--radius);
  margin: 1rem 0; background: var(--go-soft); color: var(--go); }
.result-band strong { font: 700 1.35rem/1.1 "Barlow Semi Condensed", sans-serif; }
.result-band span { color: var(--ink); }
.result-band.issues { background: var(--amp-soft); color: var(--amp-dark); }
.result-band.fail { background: var(--stop-soft); color: var(--stop); }
.kv td { padding: .4rem .25rem; }
.cklist { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 2rem; }
.cklist li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.cklist li.issue span:first-child { color: var(--stop); font-weight: 600; }
.co-lines { border-top: 1px dashed var(--line); padding-top: .75rem; margin-bottom: 1rem; }
.co-lines h3 { margin-bottom: 0; }
.tag.draft { background: var(--paper); }


/* tap to call, tap for directions */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.tel { white-space: nowrap; }
a.addr { display: inline-flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
a.addr > span:first-child { white-space: pre-line; }
a.addr .dir { color: var(--amp-dark); font-weight: 600; font-size: .92rem; }
a.addr .dir::before { content: "\2197\00a0"; }
a.addr:hover .dir { text-decoration: underline; }
a.addr.big { display: flex; padding: .75rem .9rem; border: 1px solid var(--line); border-left: 4px solid var(--amp); border-radius: var(--radius); margin-bottom: .75rem; }
.kv { margin-top: .6rem; }
.plainlist { margin: .25rem 0 0; padding-left: 1.1rem; }
.note { font-style: italic; }
.terms p { margin: 0 0 .6rem; }
.checks { display: grid; gap: .4rem; }

/* visits */
.tag.requested { background: var(--amp-soft); color: var(--amp-dark); border-color: transparent; }
.tag.scheduled { background: var(--ink); color: var(--paper); border-color: transparent; }
.tag.done, .tag.active { background: var(--go-soft); color: var(--go); border-color: transparent; }
.tag.ended { background: var(--paper); color: var(--wire); }
.visits { list-style: none; margin: 0; padding: 0; }
.visits li { border-bottom: 1px solid var(--line); }
.visits li:last-child { border-bottom: 0; }
.visits li > a, .visits li > div { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .2rem .75rem; align-items: baseline;
  padding: .55rem .25rem; color: inherit; text-decoration: none; }
.visits li > a:hover { background: var(--paper); }
.visits li.cancelled, .visits li.done { opacity: .6; }
.visits .meta { text-align: right; font-size: .92rem; }
@media (max-width: 560px) {
  .visits li > a, .visits li > div { grid-template-columns: 1fr auto; }
  .visits .what { grid-column: 1 / -1; grid-row: 2; }
}
.today-panel h2 { margin: 0; }
.today-panel .row.between { margin-bottom: .5rem; }
.nudges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.nudge { padding: .35rem .7rem; border-radius: var(--radius); background: var(--amp-soft); color: var(--amp-dark); font-weight: 600; text-decoration: none; font-size: .95rem; }
.nudge.quiet { background: var(--paper); color: var(--ink); font-weight: 500; }
.rq-act { margin-top: .2rem; }
.rq-act .booked { font-size: .9rem; font-weight: 600; color: var(--go); }
a.chiplink { text-decoration: none; }
a.chiplink .chip { box-shadow: 0 1px 0 var(--wire); }
a.chiplink:hover .chip { filter: brightness(.95); text-decoration: underline; }

/* schedule */
.requests { border-left: 4px solid var(--amp); }
.requests .count { display: inline-block; min-width: 1.6rem; text-align: center; background: var(--amp); color: #fff; border-radius: 99px; font-size: .9rem; padding: 0 .4rem; vertical-align: middle; }
.reqlist { list-style: none; margin: 0; padding: 0; }
.reqlist li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.reqlist li:last-child { border-bottom: 0; }
.reqlist .rq-main a { color: inherit; }
.weekbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin: 1.25rem 0 .75rem; }
.weekbar .wk { font: 600 1.2rem/1.2 "Barlow Semi Condensed", sans-serif; margin-left: .35rem; }
.weekbar select { width: auto; min-height: 36px; padding: .3rem .5rem; }
.week { display: grid; gap: .6rem; margin-bottom: 1rem; }
.day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem .6rem; }
.day header { display: flex; align-items: baseline; gap: .35rem; padding-bottom: .35rem; }
.day .dn { font-weight: 600; } .day .dd { font: 600 1.15rem/1 "Barlow Semi Condensed", sans-serif; }
.day .tdy { font-size: .8rem; font-weight: 600; color: #fff; background: var(--amp); border-radius: 4px; padding: 0 .35rem; }
.day .add { margin-left: auto; text-decoration: none; font-weight: 700; font-size: 1.25rem; line-height: 1; padding: .1rem .5rem; border-radius: var(--radius); color: var(--amp-dark); }
.day .add:hover { background: var(--amp-soft); }
.day.today { border-color: var(--amp); box-shadow: inset 0 3px var(--amp); }
.day.empty.past { display: none; }
.day.empty { padding-bottom: .35rem; }
.day.empty header { padding-bottom: 0; }
.day .none { display: none; }
.appt { display: grid; gap: 0; margin-top: .35rem; padding: .45rem .6rem; border-radius: 4px; text-decoration: none; color: inherit;
  background: var(--paper); border-left: 4px solid var(--ink); font-size: .95rem; line-height: 1.3; }
.appt:hover { background: var(--line); }
.appt .tm { font-size: .85rem; font-weight: 600; color: var(--wire); }
.appt .tech { font-size: .85rem; color: var(--wire); }
.appt.unassigned { border-left-color: var(--amp); }
.appt.unassigned .tech { color: var(--amp-dark); font-weight: 600; }
.appt.done { border-left-color: var(--go); opacity: .7; }
.when-block { margin: 1rem 0 1.25rem; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--ink); }
.when-block .big { font: 700 1.5rem/1.15 "Barlow Semi Condensed", sans-serif; }
.when-block.requested { border-left-color: var(--amp); }
.when-block.done { border-left-color: var(--go); }
.when-block.cancelled { border-left-color: var(--stop); }
.askbox { border-left: 4px solid var(--amp); display: grid; gap: .25rem; }
.mini-status { list-style: none; margin: 0 0 .5rem; padding: 0; }
.mini-status li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }


/* sales */
@media (max-width: 640px) { .readouts.two { grid-template-columns: 1fr 1fr; } .readouts.two .v { font-size: 1.6rem; } .readouts.two > div { padding: .8rem 1rem; } }
.lbl { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.lead { font-size: .75rem; font-weight: 600; color: var(--amp-dark); border: 1px dashed var(--amp); border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }
.tag.ps-new { background: var(--paper); }
.tag.ps-contacted { background: var(--panel); }
.tag.ps-interested { background: var(--amp-soft); color: var(--amp-dark); border-color: transparent; }
.tag.ps-meeting { background: var(--ink); color: var(--paper); border-color: transparent; }
.tag.ps-won { background: var(--go-soft); color: var(--go); border-color: transparent; }
.tag.ps-nogen { background: var(--paper); color: var(--wire); }
.tag.ps-lost, .tag.ps-dnc { background: var(--stop-soft); color: var(--stop); border-color: transparent; }
.tally a.chip { text-decoration: none; background: var(--panel); color: var(--ink); border-color: var(--line); }
.tally a.chip.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters { margin-bottom: 1rem; gap: .5rem; }
.filters select { width: auto; }
.over { color: var(--stop); font-weight: 600; }
.pager { justify-content: center; padding: .9rem 1rem; border-top: 1px solid var(--line); }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); }
.plist li:last-child { border-bottom: 0; }
.plist .phead { display: none; }
.plist .pname { flex: 1 0 100%; color: inherit; text-decoration: none; }
.plist .pname strong, .plist .pname span { display: block; }
.plist .pname:hover strong { color: var(--amp-dark); }
.plist .pphone a { font-weight: 600; }
.calllist { list-style: none; margin: .5rem 0 0; padding: 0; }
.calllist li { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.calllist li.late { border-left-color: var(--stop); }
.calllist .cl-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: grid; gap: .1rem; }
.calllist .cl-main:hover strong { color: var(--amp-dark); }
.calllist .cl-call a.btn { text-decoration: none; }
.queuebar { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; background: var(--ink); color: var(--paper);
  padding: .55rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.queuebar span { font-weight: 600; margin-right: auto; }
.queuebar a { color: var(--paper); }
.bigcall { display: flex; justify-content: center; font-size: 1.15rem; width: 100%; padding: .8rem 1rem; text-decoration: none; }
.callcard .kv:first-of-type { margin-top: .9rem; }
.outcomes { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.outcomes label, .fuchips label { margin: 0; font-weight: 500; cursor: pointer; }
.outcomes input, .fuchips input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.outcomes span, .fuchips span { display: inline-block; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: .95rem; }
.outcomes input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.outcomes input[value=interested]:checked + span, .outcomes input[value=booked]:checked + span { background: var(--go); border-color: var(--go); color: #fff; }
.outcomes input[value=not_interested]:checked + span, .outcomes input[value=dnc]:checked + span { background: var(--stop); border-color: var(--stop); color: #fff; }
.fuchips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fuchips span { font-size: .88rem; padding: .3rem .6rem; }
.fuchips input:checked + span { background: var(--amp-soft); border-color: var(--amp); color: var(--amp-dark); font-weight: 600; }
.outcomes input:focus-visible + span, .fuchips input:focus-visible + span { outline: 3px solid var(--amp); outline-offset: 2px; }
.calllog { list-style: none; margin: 0; padding: 0; }
.calllog li { border-left: 3px solid var(--line); padding: .35rem 0 .6rem .8rem; }
.calllog li.o-interested, .calllog li.o-booked { border-left-color: var(--go); }
.calllog li.o-not_interested, .calllog li.o-dnc { border-left-color: var(--stop); }
.calllog li.o-talked { border-left-color: var(--amp); }
.calllog .cl-head { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; }
.inline-checks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin: 1rem 0; }
.tplcard { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line);
  border-top: 4px solid var(--amp); border-radius: var(--radius); color: inherit; text-decoration: none; }
.tplcard:hover { border-color: var(--amp); }
.tplcard ul { margin: .25rem 0; padding-left: 1.1rem; font-size: .92rem; }
.tplcard .price { margin-top: auto; font: 600 1.25rem/1.2 "Barlow Semi Condensed", sans-serif; }
.tplcard.blank { border-top-color: var(--line); border-style: dashed; justify-content: center; }


/* site maps */
.sitemap { position: relative; width: 100%; background: #2b2f33; border-radius: var(--radius); overflow: hidden; user-select: none; -webkit-user-select: none; }
.sitemap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.sitemap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sitemap .smempty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #bbb; }
[hidden] { display: none !important; }
.smscroll { overflow: auto; max-height: 78vh; border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.smscroll .sitemap { border-radius: 0; }
.smzoom { display: flex; gap: .3rem; align-items: center; margin-bottom: .4rem; }
.smzoom button { min-height: 32px; padding: .15rem .6rem; font-size: .88rem; }
.smzoom button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sitemap.editing svg { touch-action: pan-x pan-y; cursor: default; }
.sitemap.editing .mk { touch-action: none; cursor: grab; }
.sitemap.editing.placing svg { cursor: crosshair; touch-action: none; }
.sitemap .m-sym { stroke: #fff; stroke-width: 3; }
.sitemap .m-abbr { fill: #fff; font-weight: 700; font-family: "Barlow", sans-serif; pointer-events: none; }
.sitemap .m-abbr.dark { fill: #23262a; }
.sitemap .m-text { fill: #fff; font-weight: 600; font-family: "Barlow", sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 4; stroke-linejoin: round; pointer-events: none; }
.sitemap .m-text.big { pointer-events: auto; }
.sitemap .m-outline { fill: rgba(255,255,255,.12); stroke: #fff; stroke-dasharray: 12 8; }
.sitemap .m-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sitemap .k-electric { stroke: #e8742f; }
.sitemap .k-gas { stroke: #f2c94c; stroke-dasharray: 18 10; }
.sitemap .k-other { stroke: #fff; stroke-dasharray: 4 8; }
.sitemap .m-measure { fill: none; stroke: #7fd1ff; stroke-dasharray: 6 6; }
.sitemap .hit { fill: transparent; stroke: transparent; }
.sitemap polygon.hit { fill: rgba(0,0,0,0); }
.sitemap .mk.sel .m-sym, .sitemap .mk.sel .m-line, .sitemap .mk.sel .m-outline { filter: drop-shadow(0 0 6px #7fd1ff); }
.sitemap .handle { fill: #7fd1ff; stroke: #fff; stroke-width: 3; cursor: grab; }
.sitemap .draft { fill: rgba(127,209,255,.15); stroke: #7fd1ff; stroke-dasharray: 10 6; }
.sitemap polyline.draft { fill: none; }
.smtools { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 1rem 0 .4rem; }
.smtools .tgroup { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.smtools button { min-height: 36px; padding: .3rem .65rem; font-size: .9rem; }
.smtools button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.smtools select { width: auto; min-height: 36px; padding: .25rem .4rem; font-size: .9rem; }
.smhint { margin: 0 0 .6rem; color: var(--wire); font-size: .92rem; }
@media (max-width: 720px) {
  .smtools { flex-direction: column; gap: .35rem; }
  .smtools .tgroup { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 1.5rem; }
  .smtools button, .smtools select { flex-shrink: 0; }
}
.smwrap { display: grid; gap: 1rem; }
.smside .panel { margin-bottom: 1rem; }
.smthumb { display: block; position: relative; margin-top: .4rem; text-decoration: none; }
.smthumb .sitemap { pointer-events: none; }
.smthumb > span { position: absolute; left: .4rem; top: .4rem; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 600; padding: 0 .4rem; border-radius: 3px; }
.smthumb.wide { margin: 0 0 .75rem; }
.printonly { display: none; }
@media print { .printonly { display: block; } .smwrap { display: block; } .sitemap { border-radius: 0; } }
@media (min-width: 1024px) { .smwrap { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

/* transfer switches */
.swrows { display: grid; gap: .5rem; margin-bottom: .5rem; }
.swrow { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr 1fr auto; gap: .5rem; align-items: end; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.swrow .field { margin: 0; }
.swrow .link { margin-bottom: .55rem; }
@media (max-width: 720px) { .swrow { grid-template-columns: 1fr 1fr; } .swrow .field:first-child { grid-column: 1 / -1; } }
.swlist { list-style: none; margin: 0; padding: 0; }
.swlist li { padding: .15rem 0; }
.genlist .svconly { color: var(--wire); font-size: .92rem; }
@media (min-width: 1024px) { .genlist .svconly { grid-column: span 6; } }

/* saved items, documents, repair, hours */
.addlines { margin: .5rem 0 1rem; gap: .5rem; }
.savedpick select { width: auto; max-width: 100%; }
.credlist { list-style: none; margin: 0; padding: 0; }
.credlist li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); border-left: 4px solid var(--line); }
.credlist li:last-child { border-bottom: 0; }
.credlist li.cs-expired { border-left-color: var(--stop); }
.credlist li.cs-soon { border-left-color: var(--amp); }
.credlist li.cs-ok { border-left-color: var(--go); }
.credlist .cl-main { display: grid; gap: .1rem; min-width: 0; }
.credlist .cl-main a { color: inherit; }
.credlist .cl-edit { grid-column: 1 / -1; }
.credform { display: grid; gap: 0; margin: .75rem 0; padding-top: .75rem; border-top: 1px dashed var(--line); }
.hourwarn { grid-column: 1 / -1; margin: -.25rem 0 .75rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--amp-soft); color: var(--amp-dark); font-weight: 600; font-size: .92rem; }
.repairbox { border-left: 4px solid var(--stop); }

/* addresses */
.addrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin: .9rem 0 1rem; }
.addrcard { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.addrcard .sv { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
.addrcard .sv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.addrcard .sv .svdate { position: absolute; right: .4rem; bottom: .35rem; font-size: .72rem; color: #fff; background: rgba(0,0,0,.55); padding: 0 .35rem; border-radius: 3px; }
.addrcard .sv .svfail { display: none; }
.addrcard .sv.failed img, .addrcard .sv.failed .svdate { display: none; }
.addrcard .sv.failed .svfail, .addrcard .svnone { display: flex; height: 100%; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; color: var(--wire); font-size: .9rem; }
.addrbody { padding: .75rem .9rem .8rem; display: grid; gap: .3rem; }
.addracts { gap: .4rem .8rem; margin-top: .2rem; }
.addracts .link { padding: 0; }
.addracts a { font-weight: 600; text-decoration: none; color: var(--amp-dark); }
.svvisit { display: block; margin: 0 0 .75rem; border-radius: var(--radius); overflow: hidden; }
.svvisit img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* travel */
.travelbox.over { border-left: 4px solid var(--stop); }
.travelnote { margin: -.25rem 0 1rem; color: var(--wire); }
.travelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 1rem; }
.unit { display: flex; align-items: center; gap: .4rem; }
.unit span { color: var(--wire); }

/* jobs */
.jobstages { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.jobstages a { display: flex; align-items: baseline; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: inherit; text-decoration: none; font-weight: 500; font-size: .95rem; }
.jobstages a .n { font: 600 1.15rem/1 "Barlow Semi Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.jobstages a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jobstages a.st-done:not(.on) { border-color: var(--go); }
.tag.js-approved { background: var(--amp-soft); color: var(--amp-dark); border-color: transparent; }
.tag.js-scheduled { background: var(--ink); color: var(--paper); border-color: transparent; }
.tag.js-in_progress { background: var(--panel); border-color: var(--amp); color: var(--amp-dark); }
.tag.js-done { background: var(--go); color: #fff; border-color: transparent; }
.tag.js-invoiced { background: var(--paper); color: var(--wire); }
.joblist { list-style: none; margin: 0; padding: 0; }
.joblist li { border-bottom: 1px solid var(--line); border-left: 4px solid var(--line); }
.joblist li:last-child { border-bottom: 0; }
.joblist li.st-approved { border-left-color: var(--amp); }
.joblist li.st-scheduled, .joblist li.st-in_progress { border-left-color: var(--ink); }
.joblist li.st-done { border-left-color: var(--go); }
.joblist a { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .7rem 1.1rem; color: inherit; text-decoration: none; }
.joblist a:hover { background: var(--paper); }
.joblist .jl-main strong, .joblist .jl-main .small { display: block; }
.joblist .jl-main .small { margin-top: .1rem; }
.joblist .jl-when { grid-column: 1; }
.joblist .jl-amt { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
.joblist .jl-tag { grid-column: 2; grid-row: 2; text-align: right; }
.over-soft { color: var(--amp-dark); font-weight: 600; }
.jobpanel { border-top: 4px solid var(--ink); }
.jobbar { margin: .75rem 0 1rem; }
.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.worklist li::before { content: "\25A1"; color: var(--wire); margin-right: .1rem; }
.worklist li span:first-child { flex: 1; }
.signed-off { display: grid; gap: .5rem; padding: .75rem .9rem; background: var(--go-soft); border-radius: var(--radius); }
.sigimg { max-width: 320px; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.sigtext { font-weight: 600; }
#signbox .seg input:checked + span { background: var(--ink); color: var(--paper); }
.sigpad { position: relative; border: 2px dashed var(--wire); border-radius: var(--radius); background: #fff; margin: .25rem 0; touch-action: none; }
.sigpad canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.sigpad .sighint { position: absolute; left: 0; right: 0; bottom: 2.2rem; text-align: center; color: #888; pointer-events: none; border-top: 1px solid #ccc; margin: 0 1.25rem; padding-top: .3rem; font-size: .9rem; }

/* ---------- computers: sidebar layout. Nothing below changes phones or tablets. ---------- */
.top .m-only { display: inline-block; }
@media (min-width: 1024px) {
  body:has(> header.top) { padding-left: 248px; }   /* 1.38.1: only when the menu is on the page */
  .top {
    position: fixed; top: 0; bottom: 0; left: 0; width: 248px; z-index: 5;
    flex-direction: column; align-items: stretch; gap: .75rem; overflow-y: auto;
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) .9rem 1rem;
    border-bottom: 0; border-right: 4px solid var(--amp);
  }
  .top .brand img { height: auto; width: 100%; padding: 6px 10px; border-radius: 6px; }
  .top .new { order: 1; justify-content: center; margin-top: .25rem; }
  .top nav { order: 2; flex-direction: column; flex-wrap: nowrap; flex: 1; gap: 1px; }
  .top nav a { padding: .5rem .75rem; }
  .top nav a.on { background: rgba(255,255,255,.1); box-shadow: inset 3px 0 var(--amp); }
  .top .grp { display: block; font-size: .8rem; font-weight: 600; color: rgba(236,239,241,.5); margin: 1.1rem .75rem .3rem; }
  .top .grp:first-child { margin-top: .5rem; }
  .top .m-only { display: none; }
  .top .who { order: 3; display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: .75rem; }
  .top .who a { color: inherit; text-decoration: none; padding: .4rem .75rem; border-radius: var(--radius); }
  .top .who a:hover, .top .who a.on { background: rgba(255,255,255,.1); }
  .top .who strong { display: block; }
  .top .who span { display: block; font-size: .85rem; color: rgba(236,239,241,.6); }
  .top .who .out { font-size: .92rem; color: rgba(236,239,241,.75); }

  main { max-width: 1320px; margin: 0; padding: 2rem 2.5rem 4rem; }
  main.public { max-width: 820px; margin: 0 auto; }
  body:not(:has(> header.top)) main { margin: 0 auto; }   /* 1.38.1: sign-in and other pages without the menu */
  h1 { font-size: 2.1rem; }
  td.right.num, td.right.muted, .panel table td:first-child a { white-space: nowrap; }
  .readouts .v { font-size: 2.1rem; }
  .readouts > div, .readouts > a { padding: 1.1rem 1.4rem; }

  /* dashboard: money on the left, what needs doing on the right */
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
  .dash .grid2 { grid-template-columns: 1fr; gap: 0; }
  .dash-side { position: sticky; top: 1.5rem; }

  /* generator list as aligned columns */
  .genlist li { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(0, 1fr)) 5rem 6.5rem; gap: .75rem; padding: .75rem 1.25rem; }
  .genlist .genhead { display: grid; font-size: .85rem; font-weight: 600; color: var(--wire); background: var(--paper); padding-top: .6rem; padding-bottom: .6rem; }
  .genlist .gname { flex: none; }
  .genlist .cell .chip.na { display: inline-block; }
  .genlist .cell:has(.chip.na) { display: inline-flex; }
  .genlist .cell:not(.epa):not(.act)::before { content: none; }
  .genlist .epa::before, .genlist .epa::after { content: none; }
  .genlist .epa { font-size: 1rem; }
  .genlist .act { margin: 0; text-align: right; }
}
@media (min-width: 1024px) {
  .joblist a { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 7rem 10rem; align-items: center; }
  .joblist .jl-when, .joblist .jl-amt, .joblist .jl-tag { grid-column: auto; grid-row: auto; }
  .plist li { display: grid; grid-template-columns: minmax(240px, 2fr) 10rem 8.5rem 6.5rem 6rem; gap: .75rem; padding: .65rem 1.25rem; }
  .plist .phead { display: grid; font-size: .85rem; font-weight: 600; color: var(--wire); background: var(--paper); }
  .plist .pname { flex: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .genlist li { grid-template-columns: minmax(170px, 1.4fr) repeat(5, minmax(0, 1fr)) 4rem 6rem; gap: .5rem; }
  .genlist .chip { white-space: normal; }
}
@media (min-width: 1024px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
  .day { border: 0; border-radius: 0; min-height: 14rem; }
  .day.empty.past { display: block; }
  .day.past { background: var(--paper); }
  .day .none { display: block; color: var(--wire); font-size: .85rem; margin: .5rem 0 0; }
  .day.empty { padding-bottom: .6rem; }
  .day.today { box-shadow: inset 0 4px var(--amp); }
  .appt { font-size: .9rem; }
}
@media print { body { padding-left: 0 !important; } }
.fuelwarn { margin: .35rem 0 0; padding: .35rem .6rem; border-radius: var(--radius); background: var(--amp-soft); color: var(--amp-dark); font-weight: 600; }
.fuelspec { margin-bottom: .5rem; }

/* ---------- profiles and messages (1.9) ---------- */
.badge { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--amp); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.3em; text-align: center; vertical-align: 1px; }
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: var(--amp-soft); color: var(--amp-dark); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.sm { width: 2rem; height: 2rem; font-size: .8rem; }
.av.lg { width: 7rem; height: 7rem; font-size: 2.2rem; }
.top .who a.me { display: flex; align-items: center; gap: .6rem; }
.top .who .av { display: inline-flex; font-size: .8rem; color: var(--amp-dark); }
.top .who .me-t span { display: block; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); }
.people li { background: var(--panel); }
.people a { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; color: inherit; text-decoration: none; }
.people a:hover { background: var(--paper); }
.people .p-t { min-width: 0; flex: 1; }
.people .p-t strong, .people .p-t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.person-head h1 { margin: 0; }
.profile-photo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox li + li { border-top: 1px solid var(--line); }
.inbox a { display: flex; gap: .85rem; align-items: center; padding: .8rem 1rem; color: inherit; text-decoration: none; }
.inbox a:hover { background: var(--paper); }
.inbox .i-t { flex: 1; min-width: 0; }
.inbox .i-t strong, .inbox .i-t .snip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox .snip { color: var(--wire); font-size: .92rem; }
.inbox .unread strong { font-weight: 700; }
.inbox .unread .snip { color: var(--ink); font-weight: 600; }
.inbox .i-when { font-size: .8rem; color: var(--wire); white-space: nowrap; align-self: flex-start; padding-top: .2rem; }
.inbox .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--amp); flex: none; }
.avstack { display: inline-flex; flex: none; }
.avstack .av + .av { margin-left: -.9rem; box-shadow: 0 0 0 2px var(--panel); }
.thread { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.msg { display: flex; gap: .6rem; align-items: flex-end; max-width: 85%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .bubble { background: var(--paper); border-radius: 14px 14px 14px 4px; padding: .5rem .8rem; min-width: 0; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--amp); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg .meta { font-size: .75rem; color: var(--wire); margin-bottom: .15rem; }
.msg.mine .meta { color: rgba(255,255,255,.85); }
.msg .text { white-space: pre-wrap; }
.msg img.mphoto { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; margin-top: .35rem; }
.newmark { text-align: center; font-size: .78rem; color: var(--amp-dark); font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.newmark::before, .newmark::after { content: ""; flex: 1; border-top: 1px solid var(--amp-soft); }
.composer { position: sticky; bottom: 0; display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); }
.composer textarea { flex: 1; min-height: 2.6rem; max-height: 10rem; resize: none; margin: 0; }
.composer .attach { cursor: pointer; padding: .5rem .6rem; border-radius: var(--radius); border: 1px solid var(--line); line-height: 1; }
.composer .attach input { display: none; }
.composer .attach.has { border-color: var(--amp); color: var(--amp-dark); }
.pickpeople { display: grid; gap: .25rem; max-height: 22rem; overflow-y: auto; }
.pickpeople label { display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; border-radius: var(--radius); cursor: pointer; }
.pickpeople label:hover { background: var(--paper); }
.danger-zone { border-color: var(--stop-soft); margin-top: 1.25rem; }
.danger-zone h2 { color: var(--stop); }
.usertabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.mailresult { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.mailresult.ok { background: var(--go-soft); color: var(--go); }
.mailresult.bad { background: var(--stop-soft); color: var(--stop); }
.mailresult code { display: block; margin-top: .4rem; font-size: .8rem; color: var(--ink); opacity: .75; white-space: pre-wrap; overflow-wrap: anywhere; }
.histtabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.histtabs .chip { border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.history { list-style: none; margin: 0; padding: 0; }
.history li + li { border-top: 1px solid var(--line); }
.history a { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; align-items: start; padding: .65rem .25rem; color: inherit; text-decoration: none; }
.history a:hover { background: var(--paper); }
.history .h-when { color: var(--wire); font-size: .9rem; white-space: nowrap; }
.history .h-what { min-width: 0; }
.history .h-what .small { display: block; margin-top: .15rem; }
.history .h-amt { text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .history a { grid-template-columns: 1fr auto; } .history .h-when { grid-column: 1 / -1; } }
.histtabs .chip.ink, .usertabs .chip.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.usertabs .chip { border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; }
.readouts .v.over { color: var(--stop); }
.pcrop { margin-bottom: 1rem; }
.pc-now { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pc-btns { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.pc-pick { cursor: pointer; }
.pc-editor { margin-top: 1rem; max-width: 22rem; }
.pc-view { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: #111; touch-action: none; cursor: grab; user-select: none; }
.pc-view:active { cursor: grabbing; }
.pc-view:focus-visible { outline: 3px solid var(--amp); outline-offset: 2px; }
.pc-view img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.pc-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85); pointer-events: none; }
.pc-tools { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }
.pc-zoom { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 10rem; }
.pc-zoom input { flex: 1; }
.profile { overflow: hidden; }
.profile-band { height: 5.5rem; background: linear-gradient(120deg, var(--ink) 0%, #3a3f45 60%, var(--amp) 160%); }
.profile-body { padding: 0 1.5rem 1.5rem; }
.profile .person-head { margin-top: -2.75rem; align-items: flex-end; }
.profile .person-head .av.lg { box-shadow: 0 0 0 4px var(--panel); }
.profile .person-head h1 { margin-top: 2.9rem; }
.profile-actions { gap: .5rem; }
.profile-bio { margin: 1.25rem 0 0; max-width: 65ch; white-space: pre-line; line-height: 1.55; }
.skills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.skill { padding: .2rem .65rem; border-radius: 999px; background: var(--amp-soft); color: var(--amp-dark); font-size: .85rem; font-weight: 600; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats .v { font: 600 1.8rem/1.1 "Barlow Semi Condensed", sans-serif; }
@media (max-width: 560px) { .profile .person-head h1 { margin-top: .5rem; } .profile-body { padding: 0 1rem 1rem; } }
.px h3 { margin: 1.5rem 0 .25rem; font-size: 1.05rem; }
.px .pxhint { margin: 0 0 .6rem; }
.pxrows { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pxrow { display: flex; gap: .5rem; align-items: center; }
.pxrow input { margin: 0; flex: 1; min-width: 0; }
.pxrow.exp input[name=exp_since] { flex: 0 0 8.5rem; }
.pxcert { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .9rem .5rem; background: var(--paper); }
.pxfile { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .4rem; }
.pxfile input[type=file] { display: block; margin-top: .2rem; max-width: 100%; }
.pxfile .pxdel { margin-left: auto; color: var(--stop); }
.tagin { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tagin .skill button { border: 0; background: none; color: inherit; padding: 0 0 0 .15rem; font-size: 1rem; line-height: 1; cursor: pointer; min-height: 0; }
.tagin input { flex: 1; min-width: 9rem; border: 0; margin: 0; padding: .35rem; background: transparent; }
.tagin input:focus { outline: none; }
@media (max-width: 560px) { .pxrow.exp { flex-wrap: wrap; } .pxrow.exp input[name=exp_trade] { flex-basis: 100%; } }
.exp-line { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; font-size: .95rem; }
.certlist, .achlist { margin: 0; padding: 0; list-style: none; }
.certlist li { padding: .6rem 0 .6rem .8rem; border-left: 3px solid var(--go); }
.certlist li + li { margin-top: .5rem; }
.certlist li.soon { border-left-color: var(--amp); }
.certlist li.expired { border-left-color: var(--stop); }
.achlist li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.achlist li::before { content: "\2605"; position: absolute; left: 0; color: var(--amp); }
.tagsug { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.tagsug .sug { padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; border: 1px dashed var(--line); background: none; min-height: 0; color: var(--wire); }
.tagsug .sug:hover { border-color: var(--amp); color: var(--amp-dark); }
.mini-av { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; vertical-align: -.35rem; margin: 0 .3rem 0 .15rem; }
.survey { max-width: 640px; margin-left: auto; margin-right: auto; }
.stars { border: 0; padding: 0; margin: .5rem 0 1rem; display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.stars legend { font-weight: 600; margin-bottom: .25rem; width: 100%; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2.6rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 .1rem; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #f2a93b; }
.stars input:focus-visible + label { outline: 3px solid var(--amp); border-radius: 4px; }
.bigstars span, .starrow span { color: var(--line); }
.bigstars span.on, .starrow span.on { color: #f2a93b; }
.bigstars { font-size: 2.4rem; letter-spacing: .1rem; }
.starrow { font-size: 1.05rem; letter-spacing: .05rem; }
.google-ask { margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--paper); }
.reviewlist { list-style: none; margin: 0; padding: 0; }
.reviewlist li { padding: 1rem 1.25rem; }
.reviewlist li + li { border-top: 1px solid var(--line); }
.reviewlist li.new { background: var(--amp-soft); }
.rv-comment { margin: .5rem 0; white-space: pre-line; }
.ratebar { display: grid; grid-template-columns: 2.2rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .9rem; }
.ratebar .bar { height: .5rem; background: var(--paper); border-radius: 999px; overflow: hidden; }
.ratebar .bar span { display: block; height: 100%; background: #f2a93b; }
.survey-cta { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--paper); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ctastars a { font-size: 2rem; color: var(--line); text-decoration: none; padding: 0 .1rem; }
.ctastars:hover a { color: #f2a93b; }
.ctastars a:hover ~ a { color: var(--line); }
.pjrows { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pjrow { display: grid; grid-template-columns: 1fr 4.5rem 7rem; gap: .5rem; }
.pjrow input { margin: 0; min-width: 0; }
.choice { border: 0; padding: 0; margin: 0 0 1rem; }
.choice legend { font-weight: 600; margin-bottom: .35rem; }
.choice label { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .5rem .4rem 0; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; cursor: pointer; }
.choice label:has(input:checked) { border-color: var(--amp); background: var(--amp-soft); color: var(--amp-dark); }
.choice input { margin: 0; accent-color: var(--amp); }
.choice label { min-height: 0; line-height: 1.2; width: auto; }
.choice input[type=radio], .choice input[type=checkbox] { width: auto; height: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; }
.payrows { display: grid; gap: .6rem; margin-bottom: .6rem; }
.payrow { display: grid; grid-template-columns: 9.5rem 7rem 7.5rem 1fr auto; gap: .5rem; align-items: end; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.payrow .field { margin: 0; }
.payrow .payx { margin-bottom: .55rem; }
.paysum { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1rem; font-size: .95rem; }
.paysum .over { color: var(--stop); }
.paysum .ok { color: var(--go); }
@media (max-width: 640px) { .payrow { grid-template-columns: 1fr 1fr; } .payrow .payx { grid-column: 1 / -1; justify-self: start; margin: 0; } }
.certthumb { display: inline-block; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; line-height: 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.certthumb img { display: block; width: 100%; max-width: 15rem; max-height: 12rem; object-fit: contain; }
.certthumb:hover { border-color: var(--amp); }
.certthumb.sm img { max-width: 8rem; max-height: 6rem; }
.certthumb .certfile, .certfile { display: inline-block; padding: .5rem .75rem; line-height: 1.3; font-size: .9rem; }
.panelrows { display: grid; gap: .6rem; margin-bottom: .6rem; }
.panelrow { display: grid; grid-template-columns: 1.3fr 5.5rem 1.2fr 1fr; gap: .5rem; align-items: end; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.panelrow .field { margin: 0; }
.panelrow > button { margin-bottom: .55rem; justify-self: start; }
.panelrow .field:has([name=p_loc]) { grid-column: span 2; }
@media (max-width: 760px) { .panelrow { grid-template-columns: 1fr 1fr; } .panelrow .field:has([name=p_loc]) { grid-column: auto; } .panelrow > button { grid-column: 1 / -1; justify-self: start; margin: 0; } }
button.chip { border: 1px solid var(--line); background: var(--panel); cursor: pointer; min-height: 0; }
.svclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.svclist li a { display: block; padding: .75rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--amp); border-radius: var(--radius); color: inherit; text-decoration: none; }
.svclist li a:hover { background: var(--paper); }
.svclist .svc-panels { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.svclist .svc-panels span { padding: .15rem .55rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .82rem; }

/* Smart Management Modules on the generator form (1.13) */
.smmrow { display: grid; grid-template-columns: 5.5rem 1.4fr 5.5rem 1.2fr auto; gap: .5rem; align-items: end; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.smmrow .field { margin: 0; }
.smmrow .link { margin-bottom: .55rem; }
.smmquick { gap: .4rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.smmquick input { width: 4.5rem; }
@media (max-width: 720px) { .smmrow { grid-template-columns: 1fr 1fr; } .smmrow > .link { grid-column: 1 / -1; justify-self: start; margin: 0; } }

/* gate code (1.13.2) */
.gatecode { margin: .35rem 0; }
.gatecode strong { font-size: 1.15rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* contact card (1.14) */
.cc-h { font-size: 1.05rem; margin: 0 0 .6rem; }
.cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
.cc-grid .field { margin-bottom: .7rem; }
.cc-first { grid-column: 1; grid-row: 1; } .cc-last { grid-column: 2; grid-row: 1; }
.cc-disp { grid-column: 1 / span 2; grid-row: 2; }
.cc-emails { grid-column: 1 / span 2; grid-row: 3 / span 3; }
.cc-phones { grid-column: 3; grid-row: 1 / span 5; }
.cc-side { grid-column: 4; grid-row: 1 / span 5; }
.cc-xrow { display: flex; gap: .4rem; align-items: center; }
.cc-xrow input { flex: 1; min-width: 0; }
.cc-xrow select { width: auto; flex: 0 0 auto; }
.cc-xrow .link { flex: 0 0 auto; }
.pillbtn { border-radius: 999px; padding: .35rem .9rem; font-weight: 600; color: var(--amp-dark); border-color: var(--amp); background: transparent; margin-bottom: .7rem; }
.cc-type { margin-bottom: .4rem; }
.dnscheck { margin-top: .2rem; }
.dnstag { display: inline-block; background: var(--stop-soft); color: var(--stop); font-weight: 600; font-size: .85em; padding: .05rem .5rem; border-radius: 4px; }
.dnsbanner { background: var(--stop-soft); color: var(--stop); border: 1px solid var(--stop); border-radius: var(--radius); padding: .7rem 1rem; margin: 0 0 1rem; }
.dnsbanner strong { color: var(--stop); }
.btn.off, a.btn.off { opacity: .45; pointer-events: none; }
.cc-facts { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .35rem 0 0; }
.cc-facts .tag { font-weight: 500; }
.cc-lines div { margin-bottom: .15rem; }
.cc-lines .lbl { display: inline-block; min-width: 3.6rem; color: var(--wire); font-size: .85rem; }
@media (max-width: 980px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-first, .cc-last, .cc-disp, .cc-emails, .cc-phones, .cc-side { grid-row: auto; }
  .cc-disp, .cc-emails { grid-column: 1 / -1; }
  .cc-phones { grid-column: 1; } .cc-side { grid-column: 2; }
}
@media (max-width: 600px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-first, .cc-last, .cc-disp, .cc-emails, .cc-phones, .cc-side { grid-column: 1; }
}
.cc-xrow .xbtn { flex: 0 0 auto; width: 2.2rem; min-height: 2.2rem; padding: 0; font-size: 1.3rem; line-height: 1; color: var(--stop); background: transparent; border-color: transparent; }
.cc-xrow select { max-width: 5.6rem; }
h1 .dnstag { font-size: .5em; }
.cc-xrow button.xbtn { font-size: 1.45rem; font-weight: 600; width: 1.8rem; }
.cc-xrow select { max-width: 4.9rem; padding-left: .45rem; padding-right: .2rem; }

/* email log on documents (1.14.2) */
.emailog ul { list-style: none; padding: 0; margin: 0; }
.emailog li { padding: .35rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.flash.ok { background: var(--go-soft); color: var(--go); }

/* version at the bottom of every page (1.14.3) */
.appver { text-align: center; color: var(--wire); font-size: .8rem; padding: 1.5rem 1rem 1.25rem; }
@media print { .appver { display: none; } }

/* no signal, saved copies, and the test outbox (1.16) */
.netbar { position: sticky; top: 0; z-index: 60; background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #e8c766; padding: .55rem 1rem; font-size: .92rem; }
/* 2.0.4: dark is the default theme; "auto" follows the phone */
html[data-theme="dark"] .netbar { background: #3a2e10; color: #f1d58a; border-color: #6b5420; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .netbar { background: #3a2e10; color: #f1d58a; border-color: #6b5420; }
}
.outpill { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70; background: var(--amp); color: #fff; font-weight: 600; text-decoration: none;
           padding: .6rem 1rem; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.outpill.stuck { background: var(--stop); }
.nettoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 80; background: var(--go); color: #fff;
            padding: .6rem 1rem; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.25); font-weight: 500; max-width: 90vw; }
.oblist { list-style: none; padding: 0; margin: 0; }
.oblist li { padding: .7rem 0; border-top: 1px solid var(--line); }
.oblist li:first-child { border-top: 0; }

/* price book (1.17) */
.pbsearch { margin: 0 0 1rem; }
.pbsearch input { width: 100%; }
.pbtable td { vertical-align: top; }
.pbtable td.num { white-space: nowrap; }
.pbsec h2 { margin-top: 0; }
.pbrows { display: grid; gap: .6rem; margin-bottom: .6rem; }
.pbrow { display: grid; grid-template-columns: 2.4fr 1.3fr .8fr .8fr .6fr .8fr; gap: .5rem; align-items: end; padding: .6rem .75rem;
         border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.pbrow .field { margin: 0; }
.pbrow .field label { font-size: .8rem; }
.pbrow .pb-notes { grid-column: 1 / span 4; }
.pbrow .pb-flags { grid-column: 5 / span 2; display: flex; gap: .75rem; align-items: center; justify-content: flex-end; padding-bottom: .4rem; }
.pbrow .pb-flags select { width: auto; min-height: 0; padding: .3rem .4rem; font-size: .85rem; }
.pbrow .pb-flags .check input { width: auto; }
.pbrow.gone { opacity: .45; }
.danger-text { color: var(--stop); }
.pbsave { position: sticky; bottom: 0; background: var(--paper); padding: .75rem 0; z-index: 5; }
@media (max-width: 760px) {
  .pbrow { grid-template-columns: 1fr 1fr 1fr; }
  .pbrow .pb-desc, .pbrow .pb-notes { grid-column: 1 / -1; }
  .pbrow .pb-cat { grid-column: 1 / span 2; }
  .pbrow .pb-flags { grid-column: 1 / -1; justify-content: space-between; }
}
.savedpick .matpick { display: inline-flex; align-items: center; gap: .4rem; margin-left: .25rem; font-size: .9rem; white-space: nowrap; }
.savedpick .matpick input { width: auto; min-height: 0; }
.pbtable td.num { width: 7.5rem; }
@media (max-width: 600px) {
  .pbtable thead { display: none; }
  .pbtable, .pbtable tbody, .pbtable tr, .pbtable td { display: block; width: auto; }
  .pbtable tr.pbline { padding: .6rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 .5rem; }
  .pbtable tr.pbline td { border: 0; padding: 0; text-align: left; width: auto; }
  .pbtable tr.pbline td:first-child { grid-column: 1 / -1; margin-bottom: .25rem; }
  .pbtable tr.pbline td.num::before { display: block; font-size: .75rem; color: var(--wire); }
  .pbtable tr.pbline td:nth-child(2)::before { content: "Labor"; }
  .pbtable tr.pbline td:nth-child(3)::before { content: "Materials"; }
  .pbtable tr.pbline td:nth-child(4)::before { content: "With materials"; }
  .pbtable tr.pbline[hidden] { display: none; }
}

/* time clock (1.18) */
.clockbar { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.clockbar a { display: flex; align-items: center; gap: .5rem; background: var(--go-soft); color: var(--go); font-weight: 600; text-decoration: none;
              padding: .55rem .9rem; border-radius: var(--radius); border: 1px solid var(--go); }
.clockbar .dot, .clockrow.on .tag::before { width: .6rem; height: .6rem; border-radius: 50%; background: var(--go); display: inline-block; animation: tcpulse 1.6s infinite; }
@keyframes tcpulse { 50% { opacity: .3; } }
.clockrow { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--go);
            background: var(--go-soft); border-radius: var(--radius); margin-bottom: .6rem; }
.clockrow .tag { background: var(--go); color: #fff; }
.clockstart { margin: .25rem 0 .5rem; }
.timelog summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.timebill { border-top: 1px solid var(--line); margin-top: .5rem; }
.timereport td { vertical-align: top; }

/* drag to reorder the price book (1.18.2) */
.pbrow { position: relative; padding-left: 2.4rem; }
.pbgrip { position: absolute; left: .3rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 3rem; min-height: 0; padding: 0;
          border: 0; background: transparent; color: var(--wire); font-size: 1.1rem; letter-spacing: -.2em; cursor: grab; touch-action: none; }
.pbgrip:hover, .pbgrip:focus-visible { color: var(--amp-dark); background: var(--amp-soft); border-radius: 4px; }
.pbrow.dragging { opacity: .35; outline: 2px dashed var(--amp); }
.pbrow.moved { box-shadow: 0 0 0 2px var(--amp); transition: box-shadow .8s; }
.pbghost { position: fixed; z-index: 100; pointer-events: none; box-shadow: 0 10px 28px rgba(0,0,0,.28); opacity: .95; cursor: grabbing; }
.pbrows:empty { min-height: 3rem; border: 2px dashed var(--line); border-radius: var(--radius); }
.pbsave #pbdirty { margin-right: auto; color: var(--amp-dark); }

/* 1.19: location check on the time clock, helpers on a visit */
.tag.geo-far { background: var(--stop-soft); color: var(--stop); border-color: transparent; }
.tag.geo-unsure { background: transparent; color: var(--wire); border-color: var(--line); }
.geodetail { margin: .4rem 0; padding: .5rem .6rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.geodetail ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.geodetail .geomap { display: block; width: 100%; max-width: 600px; height: auto; margin-top: .5rem; border-radius: 6px; }
.crewpick { border: 0; padding: 0; margin: 0 0 1rem; }
.crewpick legend { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.crewpick .check { display: inline-flex; margin-right: 1rem; }
.visitphotos label.btn { cursor: pointer; }

/* 1.20: discount on estimates */
.discbox { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.discbox .field { margin: 0; }
.totals .disc span:last-child { color: var(--go); }
.bonuslist { margin: .5rem 0 0; padding-left: 1.1rem; }
.discbox .discwhy { flex: 1 1 14rem; }
.addlines .savedpick { min-width: 0; max-width: 100%; }

/* 1.21: call scripts */
.callcol { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.callcol > .panel { margin: 0; }
.scriptchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .8rem; }
.schip { cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-height: 0; width: auto; }
.schip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.script h3 { margin: 0; font-size: 1.05rem; }
.script .lbl { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wire); margin-bottom: .2rem; }
.script .say { border-left: 3px solid var(--amp); background: var(--amp-soft); padding: .55rem .75rem; border-radius: 0 8px 8px 0; margin: .6rem 0; }
.script .say p { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.script .say.close { border-left-color: var(--go); background: var(--go-soft); }
.script .ask ol { margin: .2rem 0 .4rem; padding-left: 1.3rem; }
.script .ask li { margin: .25rem 0; }
.script .pushback { margin: .6rem 0; }
.script .pushback details { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; margin: .35rem 0; background: var(--panel); }
.script .pushback summary { cursor: pointer; font-weight: 600; }
.script .pushback p { margin: .4rem 0 .1rem; }
.script .tips { color: var(--wire); margin: .6rem 0 0; }
.obrow { display: grid; grid-template-columns: 1fr 2fr auto; gap: .5rem; align-items: start; margin-bottom: .5rem; }
@media (max-width: 640px) { .obrow { grid-template-columns: 1fr; } }
.scriptlist { list-style: none; margin: 0; padding: 0; }
.scriptlist li { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.scriptlist li:last-child { border-bottom: 0; }

/* 1.24: portal service request */
.kindpick { border: 0; padding: 0; margin: 0 0 1rem; }
.kindpick legend { font-weight: 600; margin-bottom: .35rem; }
.kindpick .check { display: flex; padding: .3rem 0; }

/* 1.25: view as another role */
.previewbar { position: sticky; top: 0; z-index: 60; display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: .55rem 1rem; background: #6b3fa0; color: #fff; font-size: .92rem; }
.previewbar form { margin: 0; }
.previewbar button { min-height: 0; padding: .35rem .8rem; background: #fff; color: #4a2a72; border-color: #fff; }
.viewas { position: relative; font-size: .85rem; }
.viewas summary { cursor: pointer; color: inherit; opacity: .85; list-style: none; padding: .15rem 0; }
.viewas summary::-webkit-details-marker { display: none; }
.viewas .viewmenu { display: flex; flex-direction: column; gap: .15rem; padding: .4rem 0; }
.viewas .viewmenu a, .viewas .viewmenu button { color: inherit; text-align: left; font: inherit; padding: .2rem 0; text-decoration: none; }
.viewas .viewmenu form { margin: 0; }
.top .who .viewas summary, .top .who .viewas .viewmenu a, .top .who .viewas .viewmenu button { padding: .3rem .75rem; border-radius: var(--radius); background: none; border: 0; width: 100%; }
.top .who .viewas .viewmenu a:hover, .top .who .viewas .viewmenu button:hover { background: rgba(255,255,255,.1); }

/* 1.26: generator problem reports */
.tag.emergency { background: var(--stop); color: #fff; border-color: var(--stop); }
.portalbtns { gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.emergencybox { padding: .5rem .7rem; border: 1px solid var(--stop); border-radius: 8px; background: var(--stop-soft); }
img.reqphoto { max-width: 260px; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.nudge.urgent { background: var(--stop); color: #fff; }

/* 1.28: GenCompliance logo on the customer portal */
.top .gcbrand { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-decoration: none; color: #aab2b9; }
.top .gcbrand img { height: 34px; width: auto; background: none; padding: 0; border-radius: 0; }
.top .gcbrand span { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.login .gclogin { width: 100%; max-width: 340px; height: auto; margin: 0 auto .25rem; display: block; background: none; }
/* 2.4.2: the GenCompliance wordmark sits straight on the page. Without this, the white box behind company logos on
   dark pages also went behind it, and the white "Compliance" in the dark version disappeared into it. */
html[data-theme] .login img.gclogin { background: none; padding: 0; border-radius: 0; }
@media (max-width: 1023px) { .top.gc .gcbrand { flex: 1 0 100%; padding: .4rem 0 .2rem; } }
@media (min-width: 1024px) { .top.gc .gcbrand { padding: .25rem 0 .5rem; } .top.gc .gcbrand img { width: 100%; height: auto; padding: 0; } .top.gc .gcbrand span { font-size: .6rem; letter-spacing: .12em; } }
/* 1.28: staff video calls */
.joincall { margin-top: .4rem; display: inline-flex; }
.callbtn { white-space: nowrap; }

/* 1.31: editable test fields */
.tfrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 6.5rem; gap: .5rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); }
.tfrow:first-child { border-top: 0; }
.tfrow .tflabel { margin: 0; font-weight: 500; }
.tfrow .tfval, .tfrow .tfstat { margin: 0; }
.tfrow.gone .tflabel { color: var(--wire); }
.tfstat option[value=fail] { color: var(--stop); }
.failnote { background: var(--stop-soft); color: var(--stop); padding: .5rem .75rem; border-radius: var(--radius); }
@media (max-width: 560px) { .tfrow { grid-template-columns: 1fr 6rem; } .tfrow .tflabel { grid-column: 1 / -1; } }
.tfview td.st { width: 5rem; text-align: right; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--panel); font-weight: 600; font-size: .92rem; }
.tabs a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tabs a.on .muted { color: inherit; opacity: .7; }
.tfedit, .tfedit-head { display: grid; grid-template-columns: 3.2rem minmax(0, 2fr) minmax(0, .8fr) 7rem 6rem; gap: .5rem; align-items: center; padding: .35rem 0; }
.tfedit-head { font-size: .8rem; font-weight: 600; color: var(--wire); }
.tfedit input, .tfedit select { margin: 0; }
.tfedit.gone input[name=label] { text-decoration: line-through; opacity: .6; }
.tfmove { display: flex; gap: .2rem; } .tfmove button { padding: .2rem .35rem; min-height: 0; font-size: 1.05rem; }
@media (max-width: 640px) { .tfedit-head { display: none; } .tfedit { grid-template-columns: 5rem 1fr auto; border-bottom: 1px solid var(--line); padding: .6rem 0; }
  .tfedit input[name=label] { grid-column: 2 / -1; } }
/* 1.32 Tests page */
.ttype.off { opacity: .7; }
.tt-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.tt-head .tt-name { font-weight: 600; font-size: 1.05rem; margin: 0; flex: 1; }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: .6rem .75rem; }
.tt-grid label { margin: 0; font-weight: 600; font-size: .88rem; display: flex; flex-direction: column; gap: .25rem; }
.tt-grid label[hidden] { display: none; }
.tt-grid select, .tt-grid input { margin: 0; font-weight: 400; }
.tt-unit { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.tt-unit input { width: 5rem; }
.tt-fixed { font-weight: 400; padding: .55rem 0; color: var(--wire); }
.wkhead { font-size: 1rem; margin: 1rem 0 .4rem; }
/* 1.32 parts, job costs, profit */
.ptrow, .pthead { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 6rem 6rem minmax(0, 1fr) 5.5rem; gap: .45rem; align-items: center; padding: .3rem 0; }
.pthead { font-size: .8rem; font-weight: 600; color: var(--wire); }
.ptrow input, .ptrow select { margin: 0; }
.ptrow.gone input[name=name] { text-decoration: line-through; opacity: .6; }
.iprow { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5.5rem 6rem; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.iprow input { margin: 0; }
.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.money-grid div { display: flex; flex-direction: column; gap: .15rem; }
.money-grid span { font-size: .82rem; color: var(--wire); font-weight: 600; }
.money-grid strong { font: 600 1.35rem/1.1 "Barlow Semi Condensed", sans-serif; }
.money-grid .loss, td.loss { color: #ad3838; }
.money-grid .gain { color: #2e7a4d; }
.matform { display: grid; grid-template-columns: minmax(0, 2fr) 5rem 6.5rem minmax(0, 1.4fr) auto; gap: .45rem; align-items: end; margin-top: .75rem; }
.matform .field { margin: 0; }
@media (max-width: 640px) {
  .pthead { display: none; }
  .ptrow { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding: .6rem 0; }
  .ptrow input[name=name] { grid-column: 1 / -1; }
  .iprow { grid-template-columns: 1fr 4.5rem; }
  .matform { grid-template-columns: 1fr 1fr; }
  .matform .mf-desc, .matform .mf-note { grid-column: 1 / -1; }
}
.pb-parts { display: block; padding: .55rem .2rem; font-size: .88rem; white-space: nowrap; }
.pb-parts.on { font-weight: 600; }
.pbrow input[readonly] { background: var(--paper); color: var(--wire); }
.xbtn { font-size: 1.3rem; line-height: 1; padding: .1rem .4rem; }
/* 1.33 pay online */
.paybox .payopt { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.paybox > p + .payopt { border-top: 0; padding-top: 0; }
.paybox .payopt h3 { margin: 0 0 .4rem; font-size: 1rem; }
.paybox #paypal-buttons { max-width: 420px; }
.paybox form button.go { width: 100%; max-width: 420px; }
.zelle-to { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; max-width: 420px; word-break: break-all; }
.zelle-claim { border: 1px solid var(--amp); background: var(--amp-soft); border-radius: var(--radius); padding: .75rem; margin-bottom: 1rem; }
.paybox .pp-later { max-width: 420px; margin: .25rem 0 .75rem; min-height: 1.2rem; }
/* 1.38 forms */
.formrow { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.formrow.off { opacity: .6; }
.ffrow { display: grid; grid-template-columns: 3.2rem minmax(0, 2.2fr) 9rem 5rem minmax(0, 1.6fr) 6.5rem 5.5rem; gap: .45rem; align-items: center; padding: .3rem 0; }
.ffrow input, .ffrow select { margin: 0; }
.ffrow input[hidden], .ffrow label[hidden] { display: none; }
.ffrow.head input[name=flabel] { font-weight: 700; }
.ffrow.gone input[name=flabel] { text-decoration: line-through; opacity: .6; }
.formfill h2 { margin: 1.25rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.formfill h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.formfill .req { color: #ad3838; }
.segs { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-weight: 600; min-width: 3rem; text-align: center; }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg.fail input:checked + span { background: #ad3838; border-color: #ad3838; }
.seg input:focus-visible + span { outline: 2px solid var(--amp); outline-offset: 2px; }
.seg.clear span { min-width: 2rem; font-weight: 400; color: var(--wire); }
.ffbar { position: sticky; bottom: 0; background: var(--panel); padding: .75rem 0; margin-top: 1rem; border-top: 1px solid var(--line); }
.ffval { padding: .3rem 0; white-space: pre-line; }
@media (max-width: 640px) {
  .ffrow { grid-template-columns: 3rem 1fr 1fr; border-bottom: 1px solid var(--line); padding: .6rem 0; }
  .ffrow input[name=flabel], .ffrow input[name=fopts] { grid-column: 2 / -1; }
}
/* 1.38 install tools */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.toolcard { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--ink); margin: 0; }
.toolcard strong { font: 600 1.2rem/1.2 "Barlow Semi Condensed", sans-serif; color: var(--amp-dark); }
.toolcard span { color: var(--wire); font-size: .92rem; }
.toolcard:hover { border-color: var(--amp); }
.result .steps { padding-left: 1.2rem; margin: .25rem 0; } .result .steps li { margin: .2rem 0; }
.result tr.pick td { font-weight: 700; background: var(--amp-soft); }
.loadgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem 1rem; }
.loadrow { display: grid; grid-template-columns: 1fr 4rem; gap: .5rem; align-items: center; margin: 0; font-weight: 400; }
.loadrow input { margin: 0; text-align: center; }
.startest { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.crsearch { margin-bottom: 1rem; max-width: 30rem; }
.cr .plainlist li { margin: .35rem 0; } .crtable { max-width: 36rem; margin-bottom: .75rem; }
.boardrow { display: grid; grid-template-columns: minmax(12rem, 1.2fr) 3fr auto; gap: .75rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.b-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .b-chips .chip { font-size: .78rem; }
.b-act { display: flex; gap: .35rem; }
.tally a.chip { text-decoration: none; } .tally a.chip.on { outline: 2px solid var(--ink); }
.reqdl { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; margin: .75rem 0 0; }
.reqdl dt { font-weight: 600; color: var(--wire); } .reqdl dd { margin: 0; }
@media (max-width: 640px) { .boardrow { grid-template-columns: 1fr; } .reqdl { grid-template-columns: 1fr; } }
.tally a.chip.overdue { background: var(--stop); color: #fff; border-color: var(--stop); }
.tally a.chip.ok { background: var(--go-soft); color: var(--go); }
.tally a.chip.soon, .tally a.chip.never { background: var(--amp-soft); color: var(--amp-dark); }
.seg.clear input:checked + span { background: var(--paper); color: var(--wire); border-color: var(--line); }

/* 1.39 route planning */
.day header .routeflag, .day header .routelink { margin-left: auto; font-size: .78rem; font-weight: 700; text-decoration: none; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.day header .routeflag + .routeflag { margin-left: .2rem; }
.day header .routeflag ~ .add, .day header .routelink ~ .add { margin-left: .15rem; }
.day header .routelink { color: var(--muted, #5b6470); font-weight: 600; }
.day header .routelink:hover { background: var(--amp-soft); }
.routeflag.late { background: #fde2e1; color: #9b1c1c; }
.routeflag.warn { background: #fff1d6; color: #7a4a00; }
table.route td { vertical-align: top; }
table.route tr.moved td, table.route tr.late td { background: rgba(245, 158, 11, .10); }
table.route tr.late td:last-child .tag { white-space: nowrap; }
.route-suggest { border-left: 4px solid var(--amp, #f59e0b); }
/* 2.0.4: dark is the default theme; "auto" follows the phone */
html[data-theme="dark"] .routeflag.late { background: #4a1d1d; color: #fecaca; }
html[data-theme="dark"] .routeflag.warn { background: #45330f; color: #fde68a; }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .routeflag.late { background: #4a1d1d; color: #fecaca; }
html[data-theme="auto"] .routeflag.warn { background: #45330f; color: #fde68a; }
}
@media (max-width: 640px) {
  table.route thead { display: none; }
  table.route, table.route tbody, table.route tr, table.route td { display: block; width: 100%; }
  table.route tr { padding: .6rem 0; border-bottom: 1px solid var(--line, #dde1e5); }
  table.route td { border: 0; padding: .15rem 0; }
  table.route td.nowrap { white-space: normal; }
  .panel .scroll:has(table.route) { overflow: visible; }
}

/* 2.0.2: a company without a logo shows its name in the top bar */
.top .brandname { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; display: block; }
.public .head .brandtext, .login .brandtext { display: block; text-align: center; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.8rem; margin: .5rem 0 1rem; }
.login .poweredby { text-align: center; margin: 1rem 0 0; }
.brandlogo-preview { max-height: 80px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }

/* 2.0.4: the GenCompliance logo has a version for light and for dark backgrounds */
.gc-on-dark { display: none !important; }
html[data-theme="dark"] .gc-on-dark { display: block !important; }
html[data-theme="dark"] .gc-on-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .gc-on-dark { display: block !important; }
  html[data-theme="auto"] .gc-on-light { display: none !important; }
}

/* 2.0.6: the platform owner viewing a company */
.impbar { background: #e8742f; color: #1b1e21; flex-wrap: wrap; }
.impbar .impstop { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.impbar .impstop label { display: flex; gap: .35rem; align-items: center; font-weight: 600; font-size: .9rem; cursor: pointer; }
.impbar .impstop input { width: auto; min-height: 0; margin: 0; }
.impbar button { background: #1b1e21; color: #fff; border-color: #1b1e21; }
.visitlog td { vertical-align: top; }
.visitlog details summary { cursor: pointer; }
.visitlog ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .85rem; }

/* 2.0.7: a company's logins on the platform page */
table.logins td { vertical-align: middle; }
table.logins tr.off td { opacity: .6; }
table.logins label.check { display: flex; gap: .3rem; align-items: center; }
table.logins label.check input { width: auto; min-height: 0; margin: 0; }

/* 2.1: day clock */
.dayclock { text-align: center; padding: 1.5rem 1rem; }
.dayclock-state { margin-bottom: .75rem; }
.dayclock-form { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0; }
.dayclock-form button.big { font-size: 1.35rem; padding: 1rem 2.5rem; min-width: 14rem; border-radius: 12px; }
.dayclock-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.dayclock-tiles .panel { margin: 0; }
.dayclock-tiles .v { font-size: 1.6rem; font-weight: 700; }
.dayclock-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dayclock-card .dayclock-form { flex-direction: row; }
table.punches input { min-width: 0; width: auto; }
table.punches input[name=note] { min-width: 9rem; }

/* 2.1: money */
.money-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; }
.money-tiles .panel { margin: 0; text-decoration: none; color: inherit; }
.money-tiles .v { font-size: 1.5rem; font-weight: 700; }
.money-tiles .loss .v { color: var(--stop); }
@media (max-width: 720px) { .money-tiles { grid-template-columns: 1fr 1fr; } }
table.pnl { width: 100%; margin-top: .75rem; }
table.pnl tr.sec td { font-weight: 700; padding-top: 1rem; border-bottom: 1px solid var(--line); }
table.pnl tr.total td { border-top: 1px solid var(--line); font-weight: 600; }
table.pnl tr.grand td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.15rem; }
table.pnl .warn { color: var(--stop); }
table.owed tr.cust td { border-top: 1px solid var(--line); padding-top: .6rem; }
table.owed tr.inv td { border: 0; padding-top: .15rem; padding-bottom: .15rem; }
table.owed tr.inv td:first-child { padding-left: 1rem; }
.periodpick { gap: .5rem; align-items: center; margin: .75rem 0; flex-wrap: wrap; }

/* 2.1: licence warning on a customer's own server */
.licencebar { padding: .6rem 1rem; text-align: center; font-weight: 600; background: #f6c343; color: #1b1e21; }
.licencebar.readonly { background: #ad3838; color: #fff; }
/* 2.1.1: trial end on the platform Companies page */
.trialend { display: block; margin-top: .35rem; }
.trialend input { display: block; margin-top: .15rem; max-width: 10rem; }
.trialsoon { color: #e0a526; font-weight: 600; }
.trialover { color: #e06666; font-weight: 600; }
/* 2.1.2: business card pages */
main.cardpage { max-width: 440px; margin: 0 auto; padding-top: 1rem; }
.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-align: center; padding-bottom: 1.1rem; }
.bc-co { background: var(--bc); padding: 1.1rem 1rem .9rem; color: #fff; }
.bc-logo { max-width: 72%; max-height: 90px; background: #fff; border-radius: 10px; padding: 8px 12px; }
.bc-coname { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.6rem; }
.bc-tag { font-size: .92rem; margin-top: .45rem; opacity: .95; }
.bc-who { padding: 0 1rem; }
.bc-photo { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; margin: 1.1rem auto .3rem; display: block; border: 3px solid var(--line); }
.bc-initials { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 700; background: var(--amp-soft); color: var(--amp-dark); }
.bcard h1 { margin: .5rem 0 .1rem; font-size: 1.6rem; }
.bc-title { font-weight: 600; }
.bc-at, .bc-line { color: var(--wire); font-size: .95rem; margin-top: .15rem; }
.bc-save { display: block; margin: 1.1rem 1rem .8rem; padding: .85rem; border-radius: 12px; background: var(--amp); color: #fff !important; font-weight: 700; font-size: 1.1rem; text-decoration: none !important; }
.bc-acts { display: grid; gap: .45rem; padding: 0 1rem; text-align: left; }
.bc-act { display: flex; flex-direction: column; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none !important; color: inherit !important; }
.bc-k { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wire); }
.bc-v { font-weight: 600; word-break: break-word; }
.bc-share { margin-top: .8rem; }
.cardbox { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cardbox .cardlink { word-break: break-all; }
.bigqr { display: block; text-align: center; font-size: 1.1rem; padding: .8rem; }
/* 2.1.3: the day clock card with lunch, and the lunch reminder pop-up */
.dayclock-card { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.dayclock-card .dc-state { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.dayclock-card .dc-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.dayclock-card .dc-buttons form { margin: 0; }
.dayclock-card .dc-buttons button { min-width: 8.5rem; padding: .7rem 1rem; font-size: 1.02rem; }
.dayclock-card.atlunch { border-color: #e0a526; }
@media (max-width: 560px) { .dayclock-card .dc-buttons { width: 100%; } .dayclock-card .dc-buttons form { flex: 1; } .dayclock-card .dc-buttons button { width: 100%; min-width: 0; } }
.lunchpop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.lunchpop[hidden] { display: none; }
.lunchpop-box { background: var(--panel); color: var(--ink); border-radius: 16px; padding: 1.4rem 1.2rem 1rem; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.lunchpop-box h2 { margin: 0 0 .4rem; }
.lunchpop-box button.big { width: 100%; padding: .85rem; font-size: 1.1rem; margin-top: .4rem; }
.lunchpop-box .link { margin-top: .6rem; }
.lunchcell input { max-width: 7.5rem; display: block; margin-bottom: .2rem; }
.notify-devices { margin: .5rem 0 0; padding-left: 1.1rem; }
.err-text { color: var(--stop); font-weight: 600; }
.dayclock-card .dc-buttons button, .lunchpop-box button.big { text-align: center; justify-content: center; }
/* 2.1.4: jobs near the phone */
.nearby-job { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.nearby-job:first-child { border-top: 0; }
.nearby-job form { margin: 0; }
.nearby-job .nj-what { min-width: 0; flex: 1; }
@media (max-width: 560px) { .nearby-job form, .nearby-job > .btn { width: 100%; } .nearby-job button { width: 100%; padding: .75rem; } }
.nearby-job button, .nearby-job > .btn { text-align: center; justify-content: center; }
/* 2.1.5 */
.timerpick { align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); margin: 0; }
.timerpick span { line-height: 1.35; }
.clockout-confirm button.big { padding: .8rem 1.1rem; }
.whopick { margin-top: .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; width: 100%; }
.whopick .whogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .2rem .8rem; margin: .3rem 0 .5rem; }
.whopick label.check { margin: .15rem 0; }
.oncall td { vertical-align: top; }
.tag.late { background: #5c2626; color: #ffd2d2; }
html[data-theme="light"] .tag.late { background: #fbe0e0; color: #8a2020; }
.nearby-job .nj-start { flex-basis: 100%; } @media (min-width: 561px) { .nearby-job .nj-start:not(:has(.whopick:not([hidden]))) { flex-basis: auto; } }
/* 2.1.6: card counts */
.cardhits { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 .3rem; }
.cardhits > div { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .6rem; display: flex; flex-direction: column; }
.cardhits .v { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.cardstats td, .cardstats th { white-space: nowrap; }
.cardstats th[colspan] { text-align: center; }
/* 2.1.7: two-step sign-in */
.totpqr { width: 200px; max-width: 70vw; background: #fff; padding: 6px; border-radius: 8px; margin: .5rem 0; }
.totpqr svg { width: 100%; height: auto; display: block; }
.rcodes { font-size: 1.05rem; line-height: 1.6; background: var(--panel); color: var(--ink); padding: .6rem .8rem; border-radius: 8px; margin: .6rem 0; }
.twosteps li { margin-bottom: .5rem; }
.secnag { background: #3a2f12; color: #ffe1a1; padding: .55rem 1rem; text-align: center; font-size: .92rem; }
html[data-theme="light"] .secnag { background: #fff3d1; color: #6b4a00; }
.secnag a { color: inherit; font-weight: 700; }
/* 2.1.8: security keys */
.tsh { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.keylist { list-style: none; padding: 0; margin: 0 0 .6rem; }
.keylist li { border-top: 1px solid var(--line); padding: .5rem 0; display: flex; flex-direction: column; gap: .2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 2.2.0: phones and tablets: a bar of main pages along the bottom, everything else under More ---------- */
.tabbar { display: none; }
@media (min-width: 1024px) { .navsheet { display: contents; } }
@media (max-width: 1023px) {
  .top { flex-wrap: nowrap; gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
  .top .brand { flex: 1; min-width: 0; }
  .top .brand img { max-width: 100%; }
  .navsheet { display: none; }
  body.more-open { overflow: hidden; }
  body.more-open .navsheet {
    display: flex; flex-direction: column; gap: 1rem; position: fixed; z-index: 60;
    left: 0; right: 0; top: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem 1.25rem;
    background: var(--side, #111315); color: #e8eaec;
  }
  body.more-open .navsheet nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; order: 0; flex: none;
    overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; margin: 0;
  }
  body.more-open .navsheet nav a { white-space: normal; padding: .7rem .8rem; background: rgba(255,255,255,.05); border-radius: 10px; }
  body.more-open .navsheet nav a.on { background: rgba(255,255,255,.14); box-shadow: inset 3px 0 var(--amp); }
  body.more-open .navsheet .grp { display: block; grid-column: 1 / -1; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgba(236,239,241,.5); margin: .7rem .2rem .1rem; }
  body.more-open .navsheet .grp:first-child { margin-top: 0; }
  body.more-open .navsheet .who { display: flex; flex-direction: column; gap: .3rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; }
  body.more-open .navsheet .who a { color: inherit; text-decoration: none; padding: .5rem .3rem; }
  body.more-open .navsheet .who strong, body.more-open .navsheet .who .me-t span { display: block; }
  body.more-open .navsheet .who .me-t span { font-size: .85rem; color: rgba(236,239,241,.6); }
  body.more-open .navsheet .who .out { color: rgba(236,239,241,.8); }
  body.more-open .navsheet .viewas summary { padding: .4rem .3rem; cursor: pointer; }
  body.more-open .navsheet .viewmenu a, body.more-open .navsheet .viewmenu button { display: block; color: inherit; padding: .45rem .3rem; text-align: left; background: none; border: 0; width: 100%; font: inherit; }
  body.more-open .navsheet .m-only { display: block; }

  .tabbar {
    display: flex; position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--side, #111315); border-top: 1px solid rgba(255,255,255,.1);
  }
  .tab {
    flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: rgba(236,239,241,.62); text-decoration: none; font-size: .72rem; font-weight: 600;
    background: none; border: 0; border-radius: 0; padding: 0; font-family: inherit; cursor: pointer;
  }
  .tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab.on { color: var(--amp); }
  .tab .tabdot { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--stop); color: #fff; font-size: .68rem; line-height: 17px; text-align: center; padding: 0 4px; }
  .tab .tabdot.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 9px; }
  body:has(> .tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .tabbar) .outpill { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .tabbar) .nettoast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) { .tab { font-size: .66rem; } .top .new { padding: .45rem .6rem; font-size: .9rem; } }
@media print { .tabbar { display: none !important; } }

/* 2.2.0: Settings as a list of sections */
.sethead { display: flex; flex-direction: column; gap: .2rem; }
.setback { font-weight: 600; text-decoration: none; }
[data-sec][hidden], .setsave[hidden] { display: none !important; }
.setindex { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.setindex[hidden] { display: none; }
.setgroups[hidden] { display: none; }   /* 2.3.6: the index, grouped */
.setgroups .setindex { margin-bottom: 1rem; }
.setgrp { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wire); font-weight: 600; margin: 1.1rem .25rem .4rem; }
.setgroups .setgrp:first-child { margin-top: .25rem; }
.setindex a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.setindex a:first-child { border-top: 0; }
.setindex a:hover { background: rgba(127,127,127,.08); }
.setindex a > span:first-child { display: flex; flex-direction: column; gap: .1rem; }
.setindex .chev { font-size: 1.5rem; color: var(--wire); line-height: 1; }
.setsave { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--paper) 35%); z-index: 2; }
@media (max-width: 1023px) { .setsave { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1023px) { body.more-open .tab.on { color: rgba(236,239,241,.62); } body.more-open .tab.more { color: var(--amp); } }
.setone [data-sec] > h2:first-child, .setone [data-sec] > .row.between:first-child > h2 { display: none; }
/* 2.3.0: online booking and texting */
main.bookpage { max-width: 720px; margin: 0 auto; }
.bookpage fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.bookpage legend { margin-bottom: .6rem; font-size: 1.05rem; }
.daygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.bday { border: 1px solid var(--line); border-radius: 10px; padding: .55rem; display: flex; flex-direction: column; gap: .35rem; }
.bday.full { opacity: .45; }
.bdate { font-size: .95rem; }
.bwin { display: block; cursor: pointer; }
.bwin input { position: absolute; opacity: 0; pointer-events: none; }
.bwin span { display: block; text-align: center; padding: .5rem; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; }
.bwin input:checked + span { background: var(--amp); border-color: var(--amp); color: #fff; }
.bwin input:focus-visible + span { outline: 2px solid var(--amp); outline-offset: 2px; }
.bwin.off { cursor: not-allowed; }
.bwin.off span { text-decoration: line-through; color: var(--wire); font-weight: 500; }
.bwin small { text-decoration: none; }
.chipcheck { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; margin: 0; }
.smslog td { vertical-align: top; }
.omw { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
/* 2.3.2: background shade picker */
.shadepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.shade { display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0; }
.shade input { position: absolute; opacity: 0; pointer-events: none; }
.shade .sw { display: flex; width: 100%; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); }
.shade .sw i { width: 35%; background: var(--sw-side); }
.shade .sw b { flex: 1; background: var(--sw-panel); position: relative; }
.shade .sw b::after { content: ""; position: absolute; left: 18%; top: 40%; width: 46%; height: 22%; border-radius: 4px; background: var(--amp); }
.shade input:checked + .sw { border-color: var(--amp); box-shadow: 0 0 0 2px var(--amp); }
.shade input:focus-visible + .sw { outline: 2px solid var(--amp); outline-offset: 2px; }
/* 2.3.3: privacy policy and texting terms */
main.legalpage { max-width: 760px; margin: 0 auto; }
.legal h1 { margin-top: 0; }
.legal h2 { font-size: 1.15rem; margin: 1.3rem 0 .4rem; }
.legal p { margin: .4rem 0; }
.optin { margin: 0 0 1rem 1.75rem; }
/* 2.4.0: Settings > Website photos */
.sitepics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.sitepic { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.sitepic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.sitepic input { width: 100%; }
/* 2.4.1: the public demo */
.demobar { display: flex; align-items: center; justify-content: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .5rem 1rem; background: #1f6feb; color: #fff; font-size: .92rem; text-align: center; }
.demobar .btn, .demobar .btn.primary { min-height: 0; padding: .3rem .8rem; font-size: .88rem; background: #fff; color: #1f6feb; border-color: #fff; }
.demobtn, .login .demobtn { display: flex; width: 100%; justify-content: center; margin-bottom: 0; background: transparent; color: #e8742f; border: 2px solid #e8742f; font-weight: 700; }
.demobtn:hover, .login .demobtn:hover { background: rgba(232,116,47,.12); color: #f08a4b; }   /* 2.4.3: orange outline so it reads as a button */
.addon-note { margin-top: 1rem; border-left: 3px solid #e8742f; padding: .5rem .75rem; }   /* 2.5.0 */