/* Condor CRM: phone-first. Brand: ink logo on white, navy double rule, Oswald headings, Barlow body. */
@font-face { font-family: "Oswald"; src: url("fonts/Oswald-SemiBold.d7db69c38031.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald-Medium.c06c87af3311.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.90af7baeeb14.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Medium.e0c9bb7cbba9.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-SemiBold.e1f2fbfbe3cc.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Italic.91902124b2fb.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Medium.58109207d3d1.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --navy: #02235F; --midnight: #01102B; --steel: #335BA4; --pale: #F0F3FA; --rust: #A55127;
  --line: #DCE2EE; --muted: #5A6478; --bg: #F7F8FB; --card: #FFFFFF;
  --green: #2E6B3F; --green-bg: #E6F2EA; --red: #A12A1F; --red-bg: #FBEAE8; --amber: #8A5A00; --amber-bg: #FFF4DC;
  --radius: 10px;
  --cream: #F2EEE3; --cream-line: #E3DAC4;   /* the brand's Cream: board columns */
  --tile: #C3CCDD;        /* tiles' outline: a step deeper than --line, so cards stand out (Noah, 2026-09-25) */
  --field: #7D8AA3;       /* a box you type in or pick from: 3:1 against white and Pale Sky, so it shows in the sun */
  /* the phone's bottom margin (the home bar): inside the phone app (templates/shell.html) the app sets it, since a
     frame can't read it */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--midnight); font: 16px/1.45 "Barlow", system-ui, sans-serif; }
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Oswald", "Barlow Condensed", sans-serif; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; margin-top: 1.25rem; } h3 { font-size: 1rem; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .tiny { font-size: .78rem; }
.nowrap { white-space: nowrap; }

/* header */
.top { background: var(--navy); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 10px rgb(1 16 43 / .18); }
.top-in { margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; }
.logo img { height: 34px; max-width: 96px; object-fit: contain; object-position: left center; display: block; }   /* a wider company logo shrinks to Condor's room */
.nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 1.05rem; color: rgb(255 255 255 / .88);
          padding: .45rem .7rem; border-radius: 8px; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.nav a:hover { background: rgb(255 255 255 / .12); color: #fff; text-decoration: none; }
.nav a.on { background: #fff; color: var(--navy); }
@media (max-width: 1100px) { .nav a { padding: .45rem .45rem; font-size: 1rem; } .top-in { gap: .6rem; } .me-name { display: none; } }
/* + New: the screen's one call to action */
.nav-new { flex: none; font: 500 1.05rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
           padding: .45rem .7rem; border-radius: 8px; background: var(--rust); color: #fff; }
.nav-new:hover { background: #8A431F; color: #fff; text-decoration: none; }
/* Settings (the Office page), behind the gear */
.top-settings { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: rgb(255 255 255 / .88); }
.top-settings:hover { background: rgb(255 255 255 / .12); color: #fff; }
.top-settings.on { background: #fff; color: var(--navy); }
/* you: Face ID, Look as…, Log out */
.me-menu { position: relative; flex: none; }
.me-menu summary { list-style: none; display: flex; align-items: center; gap: .4rem; padding: .2rem .4rem; border-radius: 8px;
                   color: #fff; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.me-menu summary::-webkit-details-marker { display: none; }
.me-menu summary::after { content: "▾"; font-size: .8em; color: rgb(255 255 255 / .75); }
.me-menu summary:hover, .me-menu[open] summary { background: rgb(255 255 255 / .12); }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--steel); color: #fff; font-weight: 600; }
.nav-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 12rem; padding: .35rem; border-radius: 10px;
            background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(1 16 43 / .18); display: grid; }
.nav-menu a, .nav-menu .linkbtn { padding: .45rem .65rem; border-radius: 8px; color: var(--navy); font-weight: 600; text-align: left; width: 100%; }
.nav-menu a:hover, .nav-menu .linkbtn:hover { background: var(--pale); text-decoration: none; }
.nav-menu form { display: block; margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid var(--line); }
.nav-menu .viewas-switch { display: grid; gap: .25rem; padding: .45rem .65rem; }
.nav-menu .viewas-switch label { font-size: .8rem; color: var(--muted); }
.nav-menu .viewas-pick { max-width: none; }
/* the page's group's tabs, under the header (jobs/menu.py): a row of tabs on a computer, chips on a phone */
.subnav { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; padding: 0 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: .65rem .1rem .5rem; border-bottom: 3px solid transparent; color: var(--muted); white-space: nowrap;
            font: 500 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.subnav a:hover { color: var(--navy); text-decoration: none; }
.subnav a.on { color: var(--navy); border-bottom-color: var(--steel); }
@media (min-width: 1200px) { .subnav { padding: 0 1.5rem; } }
.linkbtn { background: none; border: 0; color: var(--steel); font: inherit; cursor: pointer; padding: 0; }
@media (max-width: 700px) {
  .top-in { flex-wrap: wrap; gap: .4rem; padding: .45rem .75rem; }
  .logo img { height: 28px; max-width: 80px; }
  .nav { order: 3; flex-basis: 100%; }
}

/* a screen opened with no signal: the copy kept on the phone (sales/pwa.py) */
.offline-bar { margin: 0 0 .75rem; padding: .55rem .8rem; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: .92rem; }

/* the owner looking as someone else (accounts/middleware.py): who, and the way back */
.viewas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .4rem 1rem; background: var(--amber-bg);
              color: var(--amber); font-size: .9rem; border-bottom: 1px solid #F0D9A8; }
.viewas-bar span { flex: 1; min-width: 12rem; }
.viewas-bar a { color: var(--amber); text-decoration: underline; }

/* one search box (sales/search.html): in the header on a computer, the magnifier by the switch on a phone */
.top-search { position: relative; flex: none; }
.top-search .ico { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: rgb(255 255 255 / .75); pointer-events: none; }
.top-search input[type=search] { width: 11rem; padding: .4rem .6rem .4rem 2rem; font-size: .9rem; background: rgb(255 255 255 / .12);
                                 border-color: transparent; color: #fff; }
.top-search input[type=search]::placeholder { color: rgb(255 255 255 / .7); }
.top-search input[type=search]:focus { background: #fff; color: var(--midnight); }
.top-search input[type=search]:focus, .top-search:has(.top-suggest:not([hidden])) input[type=search] { width: 16rem; }
.top-suggest { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 60; width: min(26rem, 92vw); max-height: 70vh;
               overflow-y: auto; background: #fff; color: var(--midnight); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / .22);
               padding: .3rem 0; text-align: left; }
.suggest-head { font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                font-size: .8rem; color: var(--steel); padding: .45rem .9rem .15rem; }
.suggest-head span { color: var(--muted); font-weight: 400; margin-left: .25rem; }
.suggest-line { display: block; padding: .35rem .9rem; color: var(--midnight); line-height: 1.25; }
.suggest-line strong { display: block; color: var(--steel); font-weight: 600; }
.suggest-line span { display: block; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-line:hover, .suggest-line.on, .suggest-all:hover, .suggest-all.on { background: var(--pale); text-decoration: none; }
.suggest-all { display: block; position: sticky; bottom: -.3rem; padding: .55rem .9rem; margin: .2rem 0 -.3rem; background: #fff;
               border-top: 1px solid var(--line); font-size: .9rem; color: var(--steel); }
.suggest-empty { margin: 0; padding: .6rem .9rem; font-size: .9rem; color: var(--muted); }
.search-page input[type=search] { font-size: 1.1rem; padding: .7rem .9rem; margin-bottom: .5rem; }
.search-list { padding: .2rem 1rem; }
.search-list .line { color: var(--midnight); align-items: center; }
.search-list .line:hover { text-decoration: none; background: var(--pale); }
.search-list .line strong { color: var(--steel); }

/* a phone's switch between the CRM, Condor Photos and door knocking (base.html): in place of the logo and name, and
   Photos or door knocking in the "stage" below it, over the page */
.apps-bar, .app-stage { display: none; }
/* inside the phone app (templates/shell.html), whose switch stays at the top: a page shows no switch (nor its header,
   which on a phone holds only the switch) */
html.in-shell .apps-bar { display: none !important; }
/* a phone, upright or turned sideways (short and touch): the switch, the stage and the bottom menu stay */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .apps-bar { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; background: var(--navy); }
  .apps { flex: 1; display: flex; gap: 2px; max-width: 26rem; padding: 3px; border-radius: 12px; background: rgb(255 255 255 / .14); }
  .apps a { flex: 1; display: grid; place-items: center; min-height: 38px; border-radius: 9px; color: #fff;
            font: 600 .95rem "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
  .apps a:hover { text-decoration: none; }
  .apps a.on { background: #fff; color: var(--navy); }
  .apps-search { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: #fff; }
  .apps-search:hover { background: rgb(255 255 255 / .14); }
  .top-in { display: none; }                     /* the menu is at the bottom (.tabbar) */
  body[data-app] main, body[data-app] .tabbar, body[data-app] .subnav { display: none; }
  .subnav { gap: .4rem; padding: .55rem .75rem; background: var(--bg); border-bottom: 0; }
  .subnav a { padding: .35rem .85rem; border: 1px solid var(--tile); border-radius: 99px; background: #fff; color: var(--navy); font-weight: 600; font-size: .95rem; }
  .subnav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
  .top { border-bottom: 0; }
  body[data-app] .app-stage { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; overflow-y: auto; background: var(--bg); }
  .app-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
  body[data-app="photos"] .app-stage > :not([data-for="photos"]), body[data-app="knock"] .app-stage > :not([data-for="knock"]) { display: none; }
  html.in-shell .top:not(:has(.viewas-bar)) { display: none; }
}
/* a phone: the page never slides sideways (iPhones ignore overflow-x: hidden there); wide things scroll in their own
   rows and tables */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  html, body { overflow-x: clip; }
}
/* a phone: text a notch bigger and grey a notch darker, for reading outside in the sun */
@media (max-width: 700px) {
  html { font-size: 17px; }
  :root { --muted: #4A5468; }
  .card .sub { font-size: 1rem; }
}

/* a phone's menu (base.html): Today, Leads, + New (the screen's one rust button), Jobs and More at the bottom, like
   Condor Photos' tabs; More opens the rest of the menu in a sheet */
.tabbar, .more-sheet { display: none; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  body main { padding-bottom: calc(6rem + var(--safe-bottom)); }   /* (beats the phone padding further down) */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr auto 1fr;
          height: calc(62px + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
          background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgb(1 16 43 / .06); }
  .tab-group { display: flex; min-width: 0; }
  .tab-group > a, .tab-group > button { flex: 1; min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px;
          padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
          font: 600 14px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .tab-group > a:hover { text-decoration: none; }
  .tab-group > .on { color: var(--navy); box-shadow: inset 0 3px 0 var(--navy); }
  .tab-new { align-self: start; display: grid; place-items: center; width: 62px; height: 62px; margin: -18px 8px 0;
             border: 4px solid #fff; border-radius: 50%; background: var(--rust); color: #fff;
             box-shadow: 0 6px 16px rgb(165 81 39 / .38), 0 1px 3px rgb(1 16 43 / .25); }
  .tab-new:hover { text-decoration: none; }
  .tab-new:active { transform: scale(.96); }
  .more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(1 16 43 / .45); }
  .more-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: #fff;
                border-radius: 16px 16px 0 0; padding: .75rem 1rem calc(1rem + var(--safe-bottom)); }
  .more-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; color: var(--navy); }
  .more-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--pale); color: var(--navy); }
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .more-grid a { display: grid; place-items: center; gap: .35rem; padding: .8rem .25rem; border-radius: 12px; background: var(--pale);
                 color: var(--navy); font: 600 .85rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
  .more-grid a:hover { text-decoration: none; }
  .more-grid a.on { background: var(--navy); color: #fff; }
  .more-label { margin: .9rem 0 .4rem; color: var(--muted); font: 600 .8rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .more-out { margin-top: .9rem; }
  .more-out .btn { width: 100%; }
  body .toast { bottom: calc(5.5rem + var(--safe-bottom)); }
}
@media (max-width: 359px) { .tab-group > a, .tab-group > button { letter-spacing: .04em; } .tab-new { width: 56px; height: 56px; margin-inline: 4px; } }

/* big buttons to reach the person and the place, on lead and job pages (sales/_reach.html) */
.reach { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .4rem; }
.reach a, .reach .reach-off { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem;
    border-radius: 10px; border: 1.5px solid var(--tile); background: #fff; color: var(--navy); font-weight: 600; }
.reach a:hover { text-decoration: none; background: var(--pale); }
.reach .reach-main { background: var(--navy); border-color: var(--navy); color: #fff; }
.reach .reach-main:hover { background: var(--midnight); }
.reach .reach-off { background: var(--red-bg); border-color: var(--red-bg); color: var(--red); font-weight: 500; }
@media (max-width: 700px) {
  .reach { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .reach a, .reach .reach-off { flex-direction: column; justify-content: center; gap: .15rem; padding: .5rem .2rem; font-size: .85rem; text-align: center; }
}

/* a long page's shortcuts, stuck under the header (the job page: base.html fills them in) */
.jump { position: sticky; z-index: 9; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem .6rem;
        padding: .45rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.jump::-webkit-scrollbar { display: none; }
.jump:empty { display: none; }
.jump a { flex: none; padding: .3rem .75rem; border-radius: 99px; background: #fff; border: 1px solid var(--tile); color: var(--navy);
          font: 600 .85rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.jump a:hover { text-decoration: none; background: var(--pale); }
.jump a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
main [id] { scroll-margin-top: var(--jump-offset, 5rem); }
@media (max-width: 700px) { .jump { margin: 0 -.75rem .6rem; padding: .45rem .75rem; } }
/* the job page's sections as a menu down the left on a computer, folded to a thin strip with its button (base.html remembers
   which); narrower, the same chips as above */
.jump.side .jump-in { display: contents; }
.side-fold { display: none; }
@media (min-width: 1200px) {
  .with-side { position: relative; padding-left: 12.5rem; }
  .jump.side { position: absolute; left: 0; top: 0; bottom: 0; width: 11rem; display: block; margin: 0; padding: 0;
               overflow: visible; background: none; border: 0; }
  .jump.side .jump-in { position: sticky; top: var(--side-top, 5rem); display: flex; flex-direction: column; gap: .1rem;
                        max-height: calc(100vh - var(--side-top, 5rem) - 1rem); overflow-y: auto; scrollbar-width: thin;
                        padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  .jump.side a { padding: .4rem .6rem; border: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; background: none; }
  .jump.side a.on { background: var(--pale); border-left-color: var(--navy); color: var(--navy); }
  .side-fold { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; padding: .35rem .5rem; border: 0;
               border-radius: 6px; background: none; color: var(--steel); cursor: pointer;
               font: 600 .8rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  .side-fold:hover { background: var(--pale); color: var(--navy); }
  .side-folded .with-side { padding-left: 3.5rem; }
  .side-folded .jump.side { width: 2.5rem; }
  .side-folded .jump.side .jump-in { padding: .25rem; align-items: center; }
  .side-folded .jump.side a, .side-folded .side-fold span { display: none; }
  .side-folded .side-fold { margin: 0; padding: .4rem; }
}
@media print { .jump.side { display: none; } .with-side { padding-left: 0; } }
/* the job page's sections fold by a triangle at their heading's left, every one by the triangle atop the shortcuts
   (static/crm/folds.js; Laban, 2026-10-20) */
.jump.side .side-tools { display: contents; }
button.fold-toggle { width: 28px; height: 28px; margin-right: .45rem; vertical-align: middle; font-size: .95rem; text-transform: none; }
h3 > button.fold-toggle { width: 24px; height: 24px; margin-right: .4rem; font-size: .85rem; }
.fold-toggle[hidden] { display: none; }
.fold-bar { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
.fold-bar + .lead-grid > div > .section-head:first-child { margin-top: .2rem; }
.fold-all { gap: .4rem; }
.fold-all[hidden] { display: none; }
.fold-all-mark { display: inline-block; transition: transform .15s; }
.fold-all[aria-expanded="false"] .fold-all-mark { transform: rotate(-90deg); }
.fold-away { display: none !important; }
.section-head.folded { margin-bottom: .25rem; }
aside > .panel.folded h3, aside > .panel.folded .spread { margin-bottom: 0; }
@media (min-width: 1200px) {
  .jump.side .side-tools { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 0 0 .35rem; }
  .jump.side .side-tools .side-fold { margin: 0; }
  .side-folded .jump.side .side-tools { flex-direction: column; }
}

/* after a hail storm (sales/storm_list.html): a row per address, checked to hand out */
.storm-row { cursor: pointer; }
.storm-row input { margin: 0 .5rem 0 0; vertical-align: -2px; }

/* sales goals (sales/_goal_card.html): sold of the target, a bar, the commission and the bonus */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.goal { display: grid; gap: .35rem; margin: 0; }
.goal h3 { margin: 0; }
.goal-num strong { font: 600 1.5rem "Oswald", sans-serif; color: var(--navy); }
.goal-bar { height: 12px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.goal-bar span { display: block; height: 100%; border-radius: 99px; background: var(--navy); }
.goal-bar.hit span { background: var(--green); }
.goal-bonus { color: var(--green); }
.goal-hit { border-color: var(--green); }
a.goal-link { display: block; color: inherit; }
a.goal-link:hover { text-decoration: none; }
a.goal-link:hover .goal { border-color: var(--steel); }

/* the sales leaderboard (sales/leaderboard.html): a row per person with their number and a bar against the leader's
   (full width); on a phone the bar goes under the name, on a computer between the name and the number */
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .5rem; }
.lb-head h1 { margin: 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #E4E9F3; }
.seg a { padding: .4rem .85rem; border-radius: 9px; color: var(--navy); font: 600 .95rem "Barlow Condensed", sans-serif;
         letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.seg a:hover { text-decoration: none; background: rgb(255 255 255 / .75); }
.seg a.on { background: var(--navy); color: #fff; }
.lb-measures { margin-bottom: .8rem; }
.lb { padding: .35rem 1rem .5rem; }
.lb-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem;
          padding: .45rem 0 .5rem; border-bottom: 2px solid var(--navy); }
.lb-top h2 { margin: 0; }
.lb-when { color: var(--steel); }
.lb-total { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.lb-total strong { margin-left: .25rem; font: 600 1.05rem "Oswald", sans-serif; color: var(--navy); }
.lb-note { margin: .6rem 0 .2rem; }
.lb-rows { list-style: none; margin: 0; padding: 0; }
.lb-row { display: grid; grid-template-columns: 2.25rem 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .35rem .7rem;
          grid-template-areas: "rank face name num" "rank face bar bar"; padding: .65rem .5rem; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-rank { grid-area: rank; text-align: center; font: 600 1.25rem "Oswald", sans-serif; color: var(--navy); }
.lb-row.first .lb-rank span { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
                              background: var(--navy); color: #fff; font-size: 1.1rem; }
.lb-face { grid-area: face; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
           background: var(--steel); color: #fff; font: 500 1.05rem "Oswald", sans-serif; letter-spacing: .05em; }
.lb-row.first .lb-face { background: var(--navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.lb-name { grid-area: name; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lb-name .chip { vertical-align: .1em; }
.lb-detail { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); }
.lb-num { grid-area: num; text-align: right; white-space: nowrap; font: 600 1.25rem "Oswald", sans-serif; color: var(--navy);
          font-variant-numeric: tabular-nums; }
.lb-bar { grid-area: bar; height: 10px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.lb-bar i { display: block; height: 100%; min-width: 6px; border-radius: 99px; background: var(--navy); }
.lb-row.you { background: var(--pale); border-radius: 8px; }
.lb-row.you .lb-bar { background: #fff; }
.lb-row.you .chip { background: var(--steel); color: #fff; }
.lb-row.off .lb-rank, .lb-row.off .lb-num { color: var(--muted); }
.lb-row.off .lb-face { background: #5F6E84; }   /* grey, and still 5:1 under its white initials */
@media (min-width: 900px) {
  .lb-row { grid-template-columns: 2.5rem 3rem minmax(9rem, 14rem) minmax(0, 1fr) minmax(7rem, auto); grid-template-areas: "rank face name bar num";
            column-gap: 1rem; }
  .lb-bar { height: 14px; }
}
@media (min-width: 1500px) { .lb-page { max-width: 1240px; } }   /* a big screen: the board keeps a width the eye can follow */

/* a day's weather on the calendar (jobs/calendar.html): rain likely in Steel, wind of 20 mph or more in amber */
.cb-sky { margin-top: .15rem; font-size: .78rem; color: var(--muted); }
.cb-sky.wet { color: var(--steel); font-weight: 600; }
.cb-sky.windy { color: var(--amber); font-weight: 600; }

/* Office → Workflow (jobs/workflow.html): a panel per phase, its steps, their buttons */
.wf-phase { scroll-margin-top: 6rem; }
.wf-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.wf-name input[type=text] { width: auto; flex: 0 1 16rem; font: 600 1.05rem "Oswald", sans-serif; text-transform: uppercase; color: var(--navy); }
.wf-n { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff; font: 600 .9rem "Oswald", sans-serif; }
.wf-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.wf-step.off .wf-step-text { opacity: .55; }
.wf-actions { display: flex; gap: .3rem; align-items: start; margin: 0; }
.wf-edit { grid-column: 1 / -1; }
.wf-edit summary { cursor: pointer; color: var(--steel); }
.wf-add { margin-top: .5rem; }
.form label.check { display: flex; gap: .45rem; align-items: center; font-weight: 500; }
.wf-add summary { list-style: none; display: inline-flex; }
.wf-add summary::-webkit-details-marker { display: none; }
.wf-add[open] summary { margin-bottom: .5rem; }
.wf-boards { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.wf-group { display: block; font: 600 .8rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.wf-board .wf-name input[type=text] { flex-basis: 20rem; }
.wf-means { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.wf-means select { width: auto; max-width: 14rem; }
.wf-new { margin: .2rem 0 .6rem; }
.wf-guide summary { cursor: pointer; }
.wf-guide-list { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .35rem 1rem; margin: .5rem 0 0; }
.wf-guide-list dt { font: 600 .95rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.wf-guide-list dd { margin: 0; font-size: .92rem; }
.wf-counts { margin: -.2rem 0 .5rem 2.3rem; max-width: 60rem; }
@media (max-width: 700px) {
  .wf-guide-list { grid-template-columns: 1fr; }
  .wf-guide-list dd { margin-bottom: .4rem; }
  .wf-counts { margin-left: 0; }
}

/* the code library (jobs/code_area.html, the job page's Building codes) */
.code-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.code-rule:last-of-type { border-bottom: 0; }
.code-rule form.row { margin: 0; align-items: start; }
.code-rules { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.code-rules li { font-size: .92rem; }
.code-rules .chip { margin-right: .3rem; }
.code-rule-report { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.code-rule-report:last-child { border-bottom: 0; padding-bottom: 0; }
.code-quote { font-style: italic; color: var(--ink, #0B1B3F); border-left: 3px solid var(--tile, #C3CCDD); margin: .35rem 0 .25rem; padding: .1rem 0 .1rem .6rem; font-size: .92rem; }
/* the code worksheet's roof requirements (jobs/code_report.html): an item, its section reference, the code's words */
.code-item { margin: .9rem 0 .2rem; font: 600 .82rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.code-item:first-of-type { margin-top: .2rem; }
.code-ref { font-weight: 600; color: var(--navy); }
.code-note { color: var(--muted); font-size: .85rem; margin: .15rem 0 .2rem .6rem; }
.code-map { font-weight: 600; color: var(--navy); }
.code-choices label { display: flex; gap: .45rem; align-items: center; font-weight: 500; margin: .2rem 0; }

/* the map's starred storms (static/crm/map.js): a button each that shows or hides its hail */
.map-stars { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .35rem 0; }
.star-chip { padding: .3rem .7rem; border-radius: 99px; border: 1.5px solid var(--tile); background: #fff; color: var(--navy);
             font: 600 .85rem "Barlow", sans-serif; cursor: pointer; }
.star-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Office → Online booking (sales/booking_settings.html) */
.booking-day { margin: .25rem 0; }
.booking-day select { width: auto; }
.booking-name { display: inline-block; width: 7rem; font-weight: 600; }

/* To do (jobs/todo.html): each job's open steps with their buttons, and what the job still needs */
/* the job's header: a Steel tint clearly darker than the page (#F7F8FB), so the job stands apart from its steps below
   (Noah, 2026-09-28: Pale Sky was too close to the page); the PO# next to its name */
.todo-head { margin: -.85rem -1rem 0; padding: .8rem 1rem .7rem; background: #D6E0F2; border-bottom: 2px solid #9FB3D9;
             border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
.card.late .todo-head { border-top-left-radius: 0; }
.todo-head:last-child { margin-bottom: -.85rem; border-bottom: 0; border-radius: calc(var(--radius) - 2px); }
.card.late .todo-head:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.todo-head + .todo-steps > .todo-step:first-child { border-top: 0; }
/* a job's steps fold under its header (the button by the phase chip); a folded job is just its header */
.card.shut .todo-head { margin-bottom: -.85rem; border-bottom: 0; border-radius: calc(var(--radius) - 2px); }
.card.late.shut .todo-head { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.todo-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; flex: none;
             order: 1; }   /* first in the page so a phone can float it, shown at the right */
.todo-side .chip { margin-top: 0; }
/* the triangle at the left of a job folds its steps; the one left of All folds every job (Laban, 2026-10-20) */
.todo-toggle, .fold-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0;
               border-radius: 8px; border: 1px solid #9FB3D9; background: #fff; color: var(--navy); font: inherit; font-size: 1rem;
               line-height: 1; cursor: pointer; }
.todo-toggle::after, .fold-toggle::after { content: "▾"; transition: transform .15s; }
.todo-toggle[aria-expanded="false"]::after, .fold-toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }
.todo-toggle:hover, .fold-toggle:hover { background: var(--pale); }
.todo-toggle.todo-all { width: 38px; height: 38px; border-radius: 99px; border-color: var(--line); align-self: center; }
.todo-toggle[hidden] { display: none; }   /* only shown once the script runs */
.todo-gap { display: none; flex: none; width: 30px; }   /* a job with no steps of its own: its address lines up with the rest */
.todo-folds .todo-gap { display: block; }
.todo-head .card-top { gap: .5rem; }
.todo-line { flex: 1 1 auto; }
.todo-folds .todo-head > .sub { padding-left: calc(30px + .5rem); }
.todo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.todo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .9rem; }
.tabs.todo-show a.on { background: var(--steel); border-color: var(--steel); }   /* a filter, not a board */
/* the address, its PO#, Stuck, Tagged you and what the job still needs, all on one line that wraps (Laban, 2026-10-19) */
.todo-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; min-width: 0; }
.todo-line .chip { margin: 0; }
.chip.todo-tag { background: var(--steel); color: #fff; }
.chip.todo-tag:hover { text-decoration: none; background: var(--navy); }
.todo-need { font-size: .82rem; padding: .15rem .55rem; border-radius: 99px; background: #fff; color: var(--navy); }
.todo-need.warn { background: var(--amber-bg); color: var(--amber); }
.todo-need.ok { background: var(--green-bg); color: var(--green); }
.card .todo-head .sub, .todo-head .muted { color: #4A5468; }   /* on the Steel tint, the page's grey would be under 4.5:1 */
.todo-po { background: #fff; }
.todo-po.none { color: var(--muted); font-weight: 500; }
.todo-step { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .5rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.todo-title { min-width: 0; }
.todo-actions { display: flex; gap: .35rem; flex: none; }
.todo-actions form { margin: 0; }
@media (max-width: 560px) { .todo-step { flex-direction: column; align-items: stretch; }
                            .todo-side { flex-direction: column; align-items: flex-end; }
                            /* the bubbles flow around the phase and steps at the right instead of a thin column beside them */
                            .todo-head { display: flow-root; }
                            .todo-head .card-top { display: block; }
                            .todo-head .todo-side { float: right; margin: 0 0 .3rem .5rem; }
                            .todo-head .todo-toggle, .todo-folds .todo-head .todo-gap { float: left; margin: 0 .5rem .3rem 0; height: 30px; }
                            .todo-head > .sub { clear: both; }
                            .todo-toggle.todo-all { width: 44px; height: 44px; }
                            .todo-line { display: block; }
                            .todo-line > * { display: inline-block; margin: 0 .25rem .3rem 0; vertical-align: middle; }
                            .todo-need { border-radius: 12px; line-height: 1.3; } }

.knock-soon { max-width: 30rem; margin: 2.5rem auto; padding: 0 1rem; text-align: center; }
.knock-soon svg { color: var(--steel); }
.knock-soon p { margin: .5rem 0 1rem; }

/* every page uses the whole screen, with the same space at the sides (the top bar too, so it never moves) */
main { margin: 0 auto; padding: 1rem; }
@media (min-width: 1200px) { main, .top-in { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (max-width: 700px) { main { padding: .75rem; } }

/* messages */
.msgs { list-style: none; padding: 0; margin: 0 0 1rem; }
.msgs li { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .4rem; background: var(--pale); overflow-wrap: anywhere; }
.msgs .success { background: var(--green-bg); color: var(--green); }
.msgs .warning { background: var(--amber-bg); color: var(--amber); }
.msgs .error { background: var(--red-bg); color: var(--red); }

/* cards and lists */
.card { background: var(--card); border: 1.5px solid var(--tile); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; }
.card.late { border-left: 4px solid var(--red); }
.card.today { border-left: 4px solid var(--steel); }
.card.today.storm-alert { border-left-color: var(--navy); background: var(--pale); }
.card.today.storm-alert > div { margin-top: .2rem; }
.card.warn { border-left: 4px solid var(--amber); }
.card h3 { margin: 0; text-transform: none; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--midnight); letter-spacing: 0; }
/* a lead's tile with what they contacted us about: on the right on wide screens, under the name on phones */
.card.has-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 24rem); column-gap: 1rem; align-items: start; }
.card.has-ask > * { grid-column: 1; }
.card.has-ask > .card-ask { grid-column: 2; grid-row: 1 / span 4; }
.card-ask { background: var(--pale); border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; color: var(--midnight);
            overflow-wrap: anywhere; }
.card-ask .label { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .75rem;
                   letter-spacing: .05em; text-transform: uppercase; color: var(--steel); margin-bottom: .1rem; }
@media (max-width: 800px) {
  .card.has-ask { display: flex; flex-direction: column; }
  .card.has-ask > * { order: 2; }
  .card.has-ask > .spread { order: 0; }
  .card.has-ask > .card-ask { order: 1; margin: .45rem 0 .1rem; }
}
.card .sub { color: var(--muted); font-size: .9rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.stack > * + * { margin-top: .5rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 1.25rem 0 .5rem; }
.section-head h2 { margin: 0; }
.section-head:has(> .btn) { align-items: center; }   /* a button beside the heading sits level with it, not hanging below */
.count { font-family: "Oswald", sans-serif; background: var(--pale); color: var(--navy); border-radius: 99px; padding: 0 .55rem; font-size: .85rem; }
.count.red { background: var(--red-bg); color: var(--red); }
.empty { color: var(--muted); padding: .75rem 0; }

.chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--pale); color: var(--navy); white-space: nowrap; }
.row .chip { white-space: normal; max-width: 100%; border-radius: 12px; line-height: 1.3; }   /* a long one (a code rule) wraps, like a tag, instead of running off */
.chip.red { background: var(--red-bg); color: var(--red); }
.chip.amber { background: var(--amber-bg); color: var(--amber); }
.chip.green { background: var(--green-bg); color: var(--green); }
.chip.st-prospect { background: #EEF0F4; color: var(--muted); }
.chip.st-new { background: #E4ECFB; color: var(--steel); }
.chip.st-appointment, .chip.st-inspected, .chip.st-proposal { background: #E7EAF6; color: var(--navy); }
.chip.st-won { background: var(--green-bg); color: var(--green); }
.chip.st-lost { background: var(--red-bg); color: var(--red); }
.chip.st-nurture { background: var(--amber-bg); color: var(--amber); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .45rem .9rem; border-radius: 8px;
       border: 1px solid var(--line); background: #fff; color: var(--navy); font: 600 .95rem "Barlow", sans-serif; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--pale); text-decoration: none; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--midnight); }
.btn.small { min-height: 34px; padding: .25rem .65rem; font-size: .85rem; }
.btn.danger { color: var(--red); border-color: #E9C3BF; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.actions form { display: inline; }

/* forms */
.form { display: grid; gap: .75rem; }
.form > * { min-width: 0; }      /* a wide table in a form scrolls in its own box instead of widening the page (the price book) */
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form .three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; }
@media (max-width: 560px) { .form .two, .form .three { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=search], input[type=password], input[type=url], select, textarea {
  width: 100%; font: 16px "Barlow", sans-serif; padding: .55rem .65rem; border: 1px solid var(--field); border-radius: 8px; background: #fff; color: var(--midnight); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--steel); outline-offset: 0; border-color: var(--steel); }
.errorlist { list-style: none; padding: 0; margin: .2rem 0 0; color: var(--red); font-size: .85rem; }
/* the star after a required field's label on the public forms (aria-hidden: the inputs themselves say required) */
.req { color: var(--rust); margin-left: .2em; }
.req-note { margin: 0 0 -.25rem; }
.radios { display: flex; flex-wrap: wrap; gap: .35rem; }
.radios label { font-weight: 500; margin: 0; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios span { display: inline-block; padding: .45rem .75rem; border: 1px solid var(--field); border-radius: 99px; background: #fff; cursor: pointer; }
.radios input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.radios input:focus-visible + span { outline: 2px solid var(--steel); }
.form [data-for][hidden] { display: none; }
.hint { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.panel { background: #fff; border: 1.5px solid var(--tile); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.panel.pale { background: var(--pale); border-color: var(--pale); }
.form .custom-due, .custom-due { display: none; }
.form .custom-due.show, .custom-due.show { display: grid; }

/* filters bar */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filters > * { flex: 1 1 150px; }
.filters .btn { flex: 0 0 auto; }

/* lead page layout */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.lead-grid > * { min-width: 0; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; font-size: .95rem; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; }
.flag { color: var(--red); font-weight: 600; }
/* the job's notes: @ drops down who can be tagged (static/crm/mentions.js), tags show in Steel in the notes */
.mention-field { position: relative; }
.mention-pick { position: absolute; left: 0; right: 0; top: calc(100% + .2rem); z-index: 40; max-height: 16rem; overflow-y: auto;
                background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); padding: .25rem 0; }
.mention-line { padding: .45rem .8rem; cursor: pointer; line-height: 1.25; }
.mention-line strong { display: block; color: var(--steel); font-weight: 600; }
.mention-line span { display: block; font-size: .82rem; color: var(--muted); }
.mention-line.team { border-top: 1px solid var(--line); }
.mention-line:hover, .mention-line.on { background: var(--pale); }
.mention-none { padding: .5rem .8rem; font-size: .88rem; color: var(--muted); }
.mention-who { color: var(--steel); font-weight: 600; margin: .15rem 0 .35rem; }
.mention { color: var(--steel); font-weight: 600; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .what { font-weight: 600; }
/* lead history: a colored label on the left says how contact was made */
.history li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.history li.plain { display: block; }
.chan { display: inline-block; min-width: 4.6rem; text-align: center; font: 600 .8rem/1.2 "Oswald", sans-serif; text-transform: uppercase;
        letter-spacing: .05em; padding: .3rem .35rem; border-radius: 6px; color: #fff; background: var(--muted); vertical-align: middle; }
.chan.ch-text { background: var(--green); } .chan.ch-email { background: var(--steel); } .chan.ch-call { background: var(--navy); }
.chan.ch-knock { background: var(--amber); } .chan.ch-meeting { background: var(--navy); }
.chan.ch-note { background: #E9EDF5; color: var(--muted); }
details summary { cursor: pointer; color: var(--steel); font-weight: 600; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
table.data th { text-align: left; font-family: "Barlow Condensed", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--navy); padding: .45rem .6rem; }
table.data td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data td.num, table.data th.num { text-align: right; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* Office → Sales tax: a place's name and rate, with how it adds up on a line under them */
table.tax-places tr:not(:last-child) td { border-bottom: 0; padding-bottom: .1rem; }
table.tax-places tr.more td { padding-top: 0; }
.good { color: var(--green); font-weight: 600; }
/* On a phone, a table.phone-cards shows each row as a small card: cells stack, each with its column's name. */
@media (max-width: 560px) {
  table.phone-cards, table.phone-cards tbody, table.phone-cards tr, table.phone-cards td { display: block; }
  table.phone-cards tr:has(th) { display: none; }
  table.phone-cards tr { padding: .45rem 0; border-bottom: 1px solid var(--line); }
  table.phone-cards td { border: 0; padding: .1rem .75rem; }
  table.phone-cards td.num { text-align: left; }
  table.phone-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .82rem; }
  table.phone-cards td:empty { display: none; }
  table.phone-cards td > a:only-child, table.phone-cards td > a:first-child, table.phone-cards .tiny a {   /* Edit, a job, a phone */
    display: inline-block; padding: .75rem .5rem; margin-inline: -.5rem; }
}

/* pipeline */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
/* board columns (jobs and pipeline): Cream tiles, a white header tile under a navy bar, white cards */
.col { background: var(--cream); border: 1px solid var(--cream-line); border-radius: 12px; padding: .5rem; min-height: 120px;
       display: flex; flex-direction: column; }
.col h2 { font-size: .95rem; margin: 0 0 .5rem; display: flex; justify-content: space-between; align-items: center; gap: .4rem;
          background: #fff; border-top: 4px solid var(--navy); border-radius: 8px; padding: .5rem .65rem; box-shadow: 0 1px 2px rgb(1 16 43 / .06); }
.col .card { padding: .6rem .7rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgb(1 16 43 / .06); margin-bottom: .5rem; }
.col .none { text-align: center; margin: auto 0; padding: 1.5rem 0; }
.col .card h3 { font-size: .95rem; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.card-top h3 { min-width: 0; overflow-wrap: anywhere; }
.card-top .chip { flex: none; margin-top: .1rem; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .6rem; margin-top: .4rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.todo { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.chip.kind-insurance { background: #E4ECFB; color: var(--steel); }
.chip.kind-retail { background: var(--cream); color: var(--midnight); }
/* the Jobs board's search: beside the title on a computer, its own row under it on a phone */
.board-find { justify-content: flex-end; min-width: 0; }
.board-find input[type=search] { width: 14rem; }
@media (max-width: 700px) {
  .board-find { flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap; }
  .board-find input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; }
  .board-find select { flex: 0 1 auto; width: auto; min-width: 0; }
}
/* drag and drop: the drop list fills its column, so an empty column still takes a card */
.drop { flex: 1; min-height: 70px; }
.card[data-move] { cursor: grab; }
.col.target { background: #E4ECFB; box-shadow: inset 0 0 0 2px var(--steel); }
.card.ghost { opacity: .4; border-style: dashed; border-color: var(--steel); }
.card.dragging { opacity: .95 !important; box-shadow: 0 12px 28px rgba(1, 16, 43, .25); transform: rotate(1.5deg); cursor: grabbing; }
.card.saving { opacity: .55; pointer-events: none; }
.card.flash { animation: flash 1.4s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--steel); } to { box-shadow: 0 0 0 0 transparent; } }
.toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: 8px;
         background: var(--midnight); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(1, 16, 43, .25);
         opacity: 0; transform: translate(-50%, 1rem); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--red); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.stat { background: #fff; border: 1.5px solid var(--tile); border-radius: var(--radius); padding: .7rem .9rem; }
.stat .n { font-family: "Oswald", sans-serif; font-size: 1.6rem; color: var(--navy); line-height: 1.1; }
.stat .l { font-size: .82rem; color: var(--muted); }
.stat.red .n { color: var(--red); }
.stat.green .n { color: var(--green); }
/* the owner's glance at the top of Today (sales/today.html): tiles that open Reports, Money and To do */
a.stat { display: block; color: inherit; }
a.stat:hover { text-decoration: none; border-color: var(--steel); }
.snapshot-head { margin: -.2rem 0 .3rem; font: 600 .8rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* login */
.login { max-width: 380px; margin: 3rem auto; }
.login .logo-big { display: block; margin: 0 auto 1rem; width: 220px; }
.login-passkey { text-align: center; }
.login-passkey .btn { width: 100%; }
/* a computer's sign-in approved on the phone (accounts/approvals.py): the number on the computer, typed on the phone */
.approve-number { margin: .25rem 0 .5rem; font: 600 3.2rem/1 "Oswald", sans-serif; letter-spacing: .12em; text-align: center; color: var(--navy); }
.login input.approve-input { display: block; width: 7rem; margin: .35rem auto .8rem; padding: .35rem; text-align: center;
                             font: 600 2.4rem/1.1 "Oswald", sans-serif; letter-spacing: .15em; }
[data-approve-signin] .btn { width: 100%; }
[data-approve-signin] label { display: block; text-align: center; }
.approve-stop { margin-top: .75rem; text-align: center; }
.login-approve { text-align: center; }
/* the second step's tip for using the phone's passkey on a computer (login_verify.html): not on the phone itself */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) { .login .on-computer { display: none; } }

/* ---- jobs */
.narrow { max-width: 720px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fields > .wide { grid-column: 1 / -1; }
.fields .check label { font-weight: 500; display: flex; gap: .4rem; align-items: center; margin-top: 1.4rem; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } .fields .check label { margin-top: 0; } }
input[type=file] { font: 15px "Barlow", sans-serif; max-width: 100%; }
/* its "Choose file" button in the CRM's own button look (it was the browser's small grey one) */
input[type=file]::file-selector-button { margin-right: .6rem; padding: .45rem .85rem; border: 1px solid var(--field); border-radius: 8px;
  background: #fff; color: var(--navy); font: 600 .95rem "Barlow", sans-serif; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--pale); }
.line { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.line:last-of-type { border-bottom: 0; }
.line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.line .btn { white-space: nowrap; }
code { overflow-wrap: anywhere; }          /* a long address wraps instead of widening a phone's page */
.spread.wrap { flex-wrap: wrap; }
.spread > div { min-width: 0; }
.spread > .end { min-width: min-content; text-align: right; }   /* a status on the right: it wraps, never sticks out */
.chip.wrap { white-space: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flag-inline { display: block; padding: .45rem .75rem; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: .92rem; }
.strike > span:first-child { text-decoration: line-through; }
.panel h3 { margin-bottom: .4rem; }
.timeline li.auto { padding: .35rem 0; }
/* a job's note: who wrote it, when, then the note, each in its own color (Laban, 2026-10-20) */
.note-meta { margin: 0 0 .15rem; color: var(--muted); }
.note-who { color: var(--steel); font-weight: 700; }
.note-when { color: var(--muted); }
.note-text { color: var(--midnight); }
.note.auto .note-text { color: var(--navy); opacity: .8; }

.stepper { list-style: none; display: flex; gap: 2px; padding: 0; margin: .9rem 0; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper li { flex: 1 0 auto; text-align: center; font: 500 .8rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em;
              padding: .35rem .6rem; background: #E9EDF5; color: var(--muted); white-space: nowrap; }
.stepper li:first-child { border-radius: 99px 0 0 99px; } .stepper li:last-child { border-radius: 0 99px 99px 0; }
.stepper li.done { background: #C9D5EC; color: var(--navy); }
.stepper li.on { background: var(--steel); color: #fff; font-weight: 700; }   /* not the navy of the page's buttons (Add a note) (Laban, 2026-10-20) */

.flags { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; }
.flags li { padding: .45rem .75rem; border-radius: 8px; font-size: .92rem; background: var(--pale); color: var(--navy); }
.flags li.warn { background: var(--amber-bg); color: var(--amber); }
.flags li.ok { background: var(--green-bg); color: var(--green); }
/* the job page: what the job still needs, as bubbles to the right of its address (Laban, 2026-10-20) */
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0 0 .5rem; }
.title-line h1 { margin: 0; }
.flag-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.flag-chips li { padding: .2rem .7rem; border-radius: 99px; font-size: .82rem; line-height: 1.3; background: var(--pale);
                 border: 1px solid var(--line); color: var(--navy); }
.flag-chips li.warn { background: var(--amber-bg); border-color: #F1DDAE; color: var(--amber); }
.flag-chips li.ok { background: var(--green-bg); border-color: #C9E2D1; color: var(--green); }

.chip.stage-sold, .chip.stage-prep { background: #E4ECFB; color: var(--steel); }
.chip.stage-scheduled, .chip.stage-in_progress { background: var(--amber-bg); color: var(--amber); }
.chip.stage-complete, .chip.stage-invoiced { background: #E7EAF6; color: var(--navy); }
.chip.stage-paid, .chip.stage-closed { background: var(--green-bg); color: var(--green); }
.chip.sch-confirmed, .chip.order-delivered, .chip.order-confirmed, .chip.permit-issued, .chip.permit-passed, .chip.permit-not_needed,
.chip.supp-approved, .chip.sch-done { background: var(--green-bg); color: var(--green); }
.chip.sch-tentative, .chip.order-draft, .chip.permit-to_apply, .chip.permit-ready_to_pay, .chip.supp-preparing, .chip.supp-partial { background: var(--amber-bg); color: var(--amber); }
.chip.permit-failed, .chip.permit-expired, .chip.supp-denied, .chip.sch-canceled, .chip.order-canceled { background: var(--red-bg); color: var(--red); }

/* the calendar (jobs/calendar.html, jobs/calview.py; Laban, 2026-10-19): a day or a week by the hour, two weeks by
   morning and afternoon, a month by day. An entry is a one-line chip; on the hour grid a tap opens it in full. */
.entry { display: block; font-size: .8rem; line-height: 1.25; padding: .3rem .4rem; border-radius: 6px; margin-bottom: .25rem; color: var(--midnight);
         background: #E4ECFB; border-left: 3px solid var(--steel); overflow-wrap: anywhere; }
.entry:hover { text-decoration: none; filter: brightness(.97); }
.entry .tiny { display: block; color: var(--muted); }
.entry.kind-delivery { background: var(--cream); border-left-color: var(--amber); }
.entry.kind-inspection { background: var(--green-bg); border-left-color: var(--green); }
.entry.kind-visit { background: #fff; border-left-color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.entry.kind-task { background: var(--pale); border-left-color: var(--muted); }
.entry.tentative { background: #fff; border: 1px dashed var(--steel); border-left-width: 3px; }
.entry.done { opacity: .6; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .6rem; }
.cal-bar .tabs { margin: 0; }
.cal-filters { flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; align-items: center; }
.cal-show { position: relative; }
.cal-show > summary { list-style: none; cursor: pointer; }
.cal-show > summary::-webkit-details-marker { display: none; }
.cal-show-pick { position: absolute; z-index: 8; top: calc(100% + .3rem); left: 0; min-width: 15rem; display: grid; gap: .2rem;
                 background: #fff; border: 1.5px solid var(--tile); border-radius: var(--radius); padding: .6rem .75rem; box-shadow: 0 8px 24px rgb(1 16 43 / .14); }
.cal-show-pick label.check { margin: 0; font-weight: 500; }
.cal-show-pick .btn { justify-self: start; margin-top: .3rem; }
[data-day].over { background: var(--pale); outline: 2px dashed var(--steel); outline-offset: -3px; }
[data-item].dragging { opacity: .4; }
[data-item][draggable="true"] { cursor: grab; }

/* the hour grid: a time gutter and a column per day; entries placed by top/height (% of the hours shown) */
.tg-wrap { overflow-x: auto; border: 1.5px solid var(--tile); border-radius: var(--radius); background: #fff; }
.tg { --hour: 3rem; min-width: 0; }
.tg-week { min-width: 56rem; }
.tg-row { display: grid; grid-template-columns: 3.6rem repeat(var(--cols), minmax(0, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 4; background: var(--pale); border-bottom: 1px solid var(--line); }
.tg-corner, .tg-label { position: sticky; left: 0; z-index: 3; background: inherit; }
.tg-day { padding: .45rem .5rem; font-size: .85rem; border-left: 1px solid var(--line); }
.tg-day a { color: var(--midnight); }
.tg-day.today { background: #E4ECFB; box-shadow: inset 0 -3px 0 var(--navy); }
.tg-day.weekend { color: var(--muted); }
.tg-allday { border-bottom: 2px solid var(--tile); background: #fff; }
.tg-label { font: 600 .72rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
            padding: .45rem .3rem; background: #fff; }
.tg-cell { min-height: 2.4rem; padding: .25rem; border-left: 1px solid var(--line); display: grid; align-content: start; gap: .2rem; min-width: 0; }
.tg-body { position: relative; }
.tg-hours { position: sticky; left: 0; z-index: 3; background: #fff; }
.tg-hour { height: var(--hour); position: relative; font-size: .72rem; color: var(--muted); text-align: right; padding-right: .4rem; }
.tg-hour span { position: relative; top: -.5rem; }
.tg-hour:first-child span { top: .1rem; }
.tg-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.tg-col.weekend { background: #FAFBFD; }
.tg-col.today { background: #F7F9FE; }
.tg-slot { height: var(--hour); border-top: 1px solid var(--line); }
.tg-slot:first-child { border-top: 0; }
.tg-ev { position: absolute; padding: 1px 2px; box-sizing: border-box; min-height: 1.4rem; }
.tg-ev:has(details[open]) { z-index: 6; }
/* an entry on the grid: its summary fills its box; open, its card floats beside it */
details.ev { height: 100%; position: relative; }
details.ev > summary { list-style: none; cursor: pointer; height: 100%; box-sizing: border-box; overflow: hidden; font-size: .78rem; line-height: 1.2;
                       padding: .2rem .35rem; border-radius: 6px; background: #E4ECFB; border-left: 3px solid var(--steel); color: var(--midnight); }
details.ev > summary::-webkit-details-marker { display: none; }
.tg-cell details.ev > summary { height: auto; white-space: nowrap; text-overflow: ellipsis; }
.tg-ev.short details.ev > summary { white-space: nowrap; text-overflow: ellipsis; }
details.ev.kind-delivery > summary { background: var(--cream); border-left-color: var(--amber); }
details.ev.kind-inspection > summary { background: var(--green-bg); border-left-color: var(--green); }
details.ev.kind-visit > summary { background: #fff; border-left-color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
details.ev.kind-task > summary { background: var(--pale); border-left-color: var(--muted); }
details.ev.kind-busy > summary { background: #ECEEF2; border-left-color: #8A93A5; color: var(--muted); }
details.ev.tentative > summary { background: #fff; border: 1px dashed var(--steel); border-left: 3px solid var(--steel); }
details.ev.done > summary { opacity: .6; }
details.ev[open] > summary { outline: 2px solid var(--steel); }
.ev-who { color: var(--muted); }
.ev-card { position: absolute; z-index: 7; top: calc(100% + 4px); left: 0; width: 20rem; max-width: 80vw; margin: 0;
           font-size: .9rem; padding: .6rem .7rem; box-shadow: 0 10px 28px rgb(1 16 43 / .2); background: #fff; }
.ev-card > a { color: var(--midnight); }
.ev-card .tiny { font-size: .82rem; margin-top: .15rem; }
.ev-card .tiny a { color: var(--steel); }
.tg-col:nth-last-child(-n+2) .ev-card, .tg-cell:nth-last-child(-n+2) .ev-card { left: auto; right: 0; }
.tg-day .cb-sky { margin-top: .1rem; }

/* two weeks and a month: seven columns of days */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cg-dow { font: 600 .78rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 .3rem; }
.cg-day { background: #fff; border: 1.5px solid var(--tile); border-radius: 8px; padding: .35rem .4rem; min-width: 0; }
.cg-day.weekend { background: #FAFBFD; }
.cg-day.today { border: 2px solid var(--steel); }
.cg-day h3 { font-size: .8rem; margin: 0 0 .25rem; display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; }
.cg-day h3 a { color: var(--muted); }
.cg-day.today h3 a { color: var(--steel); }
.cg-day .cb-sky { margin: -.15rem 0 .25rem; }
.c2 .cg-day { min-height: 9rem; }
.c2-half { border-top: 1px dashed var(--line); padding-top: .2rem; margin-top: .2rem; min-height: 2.2rem; }
.c2-label { display: block; font: 600 .68rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .15rem; }
.cm .cg-day { min-height: 7.5rem; }
.cm .cg-day.outside { background: var(--bg); }
.cm .cg-day.outside h3 a { color: #A3ABBB; }
.cm .entry { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .15rem .35rem; margin-bottom: .15rem; }
.cm-more { font-size: .75rem; font-weight: 600; }
.cm-count { display: none; font-size: .72rem; font-weight: 600; background: #E4ECFB; color: var(--steel); border-radius: 99px; padding: 0 .4rem; }
@media (max-width: 800px) {
  .cal-grid { gap: .2rem; }
  .cm .cg-day { min-height: 3.4rem; padding: .25rem; }
  .cm .cm-list { display: none; }               /* a phone's month: each day's number and how many; tap it for the day */
  .cm-count { display: inline-block; }
  .cm .cg-day h3 { flex-direction: column; align-items: center; }
  .cg-dow { padding: 0; text-align: center; font-size: .7rem; }
  .ev-card { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(76px + var(--safe-bottom)); width: auto; max-width: none;
             max-height: 60vh; overflow: auto; }
  .tg-col:nth-last-child(-n+2) .ev-card, .tg-cell:nth-last-child(-n+2) .ev-card { left: 8px; right: 8px; }
}

/* reports: a one-series column chart drawn in HTML (its text stays readable on a phone) */
.colchart { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-rows: 220px auto; margin-top: 1.4rem; }
.colchart .yaxis { position: relative; }
.colchart .yaxis span { position: absolute; right: .5rem; transform: translateY(50%); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.colchart .plot { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid #C9D1E0; }
.colchart .gridline { position: absolute; left: 0; right: 0; border-top: 1px solid #E9EDF5; }
.colchart .band { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.colchart .band:focus-visible { background: var(--pale); }
.colchart .bar { position: relative; width: min(24px, 60%); background: var(--steel); border-radius: 4px 4px 0 0; }
.colchart .band.on .bar { background: #28487F; }
.colchart .peak { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .2rem; font-size: .8rem; font-weight: 600; color: var(--midnight); white-space: nowrap; }
.colchart .xaxis { grid-column: 2; display: flex; }
.colchart .xaxis span { flex: 1; text-align: center; font-size: .75rem; color: var(--muted); padding-top: .3rem; }
.colchart .tip { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem;
                 box-shadow: 0 4px 16px rgba(1, 16, 43, .14); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.colchart .tip strong { display: block; font-size: 1rem; color: var(--midnight); }
table.data.nums td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { font-weight: 600; border-top: 2px solid var(--line); background: var(--pale); }
.notes { margin: .5rem 0 0; padding-left: 1.1rem; }

/* production boards: tabs, checklist progress, the phase board and the job page checklist */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.tabs a { padding: .4rem .85rem; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: .92rem; }
.tabs a:hover { text-decoration: none; background: var(--pale); }
.tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabs a.on .count { background: rgba(255, 255, 255, .2); color: #fff; }
.col h2 a { color: var(--navy); text-decoration: underline dotted; text-underline-offset: 3px; }
.steps { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; color: var(--muted); }
.steps .bar { flex: 0 0 48px; height: 6px; border-radius: 99px; background: #E9EDF5; overflow: hidden; }
.steps .bar i { display: block; height: 100%; background: var(--steel); }
.step-now { margin-top: .35rem; font-weight: 600; }
.col.ready { background: var(--green-bg); }
.checklist .step { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.checklist .step:last-child { border-bottom: 0; }
.step-main { display: flex; gap: .6rem; min-width: 0; }
.tick { flex: none; width: 1.3rem; height: 1.3rem; border: 2px solid #C9D1E0; border-radius: 6px; display: inline-flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; margin-top: .1rem; }
.step.done .tick { background: var(--green); border-color: var(--green); }
.step.skipped .tick { background: #E9EDF5; color: var(--muted); }
.step.done .step-title, .step.skipped .step-title { color: var(--muted); }
.step-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 60%; }
.step-actions form { display: inline-flex; gap: .35rem; }
details.checklist > summary { padding: .15rem 0; }
@media (max-width: 560px) { .checklist .step { flex-direction: column; } .step-actions { max-width: none; justify-content: flex-start; padding-left: 1.9rem; } }
.chip.stage-signed, .chip.stage-deposit, .chip.stage-request { background: #E4ECFB; color: var(--steel); }
.chip.stage-production, .chip.stage-visit, .chip.stage-quoted, .chip.stage-repair { background: var(--amber-bg); color: var(--amber); }
.chip.stage-supplementing, .chip.stage-done { background: #E7EAF6; color: var(--navy); }

/* job photos from Condor Photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; }
.photo-grid a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--pale); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid a[hidden], .photo-day[hidden] { display: none; }
/* a job's photos by day, as Photos shows them (job page): the first tag on each, chips to show one tag */
.photo-grid a { position: relative; }
.photo-tag { position: absolute; left: .25rem; bottom: .25rem; max-width: calc(100% - .5rem); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: .05rem .35rem; border-radius: 4px; background: rgba(1, 16, 43, .72); color: #fff; font-size: .7rem; }
.photo-tags { flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.photo-day h3 { margin: .8rem 0 .35rem; }
.photo-day:first-of-type h3 { margin-top: 0; }

/* Scanning paper documents (jobs/scan.html, crm/scan.js) */
.scan-add { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .25rem; }
.scan-pages { list-style: none; padding: 0; margin: .75rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.scan-page { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; background: var(--card); }
.scan-page-head { font-size: .85rem; margin-bottom: .35rem; }
.scan-page img { display: block; width: 100%; height: 220px; object-fit: contain; background: var(--pale); border-radius: 6px; }
.scan-busy, .scan-pdf { height: 220px; display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem;
                        color: var(--muted); background: var(--pale); border-radius: 6px; font-size: .9rem; overflow-wrap: anywhere; }
.scan-page-acts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.scan-editor { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--midnight); color: #fff; }
.scan-editor[hidden] { display: none; }
.scan-editor-help { margin: .75rem 1rem 0; font-size: .95rem; }
.scan-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.scan-stage-in { position: relative; }
.scan-stage-in canvas { display: block; }
.scan-handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; touch-action: none; cursor: grab; }
.scan-handle::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--steel);
                      box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.scan-editor-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem 1rem; }
body.scan-editing { overflow: hidden; }

/* E-signatures (signing/, crm/sign.js) */
.btn.cta { background: var(--rust); border-color: var(--rust); color: #fff; }
.sign-doc h2 { margin: 0; }
.sign-page { display: block; width: 100%; height: auto; margin-top: .75rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sign-acks, .sign-colors { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin: 0; }
.sign-colors legend { font-weight: 600; padding: 0 .3rem; }
.sign-colors > div { margin-top: .5rem; }
.sign-acks legend { font-weight: 600; padding: 0 .3rem; }
.sign-acks label { display: flex; gap: .55rem; align-items: center; font-weight: 500; padding: .35rem 0; }
.sign-acks input, .sign-consent input { width: 1.35rem; height: 1.35rem; flex: none; }
.sign-pad { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: .3rem 0; }
.sign-pad canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sign-pad-line { position: absolute; left: 1rem; right: 1rem; bottom: 2.2rem; border-top: 1px solid var(--line); padding-top: .15rem;
                 font-size: .75rem; color: var(--muted); pointer-events: none; }
.sign-consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; margin: .75rem 0; }

/* ---------------------------------------------------------------- client portal (portal/templates/portal) */
.portal-top { background: #fff; border-bottom: 4px double var(--navy); }
.portal-top-in { max-width: 760px; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-logo img { height: 36px; display: block; }
.portal-nav { display: flex; gap: .25rem; }
.portal-nav a { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); padding: .4rem .6rem; border-radius: 8px; }
.portal-nav a:hover { background: var(--pale); text-decoration: none; }
.portal-main { max-width: 760px; margin: 0 auto; padding: 1rem; }
.portal-main h1 { margin-top: .25rem; }
.portal-big { min-height: 52px; font-size: 1.05rem; width: 100%; max-width: 420px; }
.portal-h { font-size: 1.05rem; margin: 0 0 .5rem; }
.portal-address { text-transform: none; }
.portal-card { display: block; color: inherit; }
.portal-card:hover { text-decoration: none; border-color: var(--steel); }
.portal-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; }
.portal-steps li { font-size: .78rem; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; background: #EEF0F4; color: var(--muted); }
.portal-steps li.done { background: var(--green-bg); color: var(--green); }
.portal-steps li.now { background: var(--navy); color: #fff; }
.portal-pay { margin-top: .75rem; padding: .75rem; background: var(--pale); border-radius: 8px; }
.portal-upgrade + .portal-upgrade { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; }
.portal-upgrade h3 { margin: 0; text-transform: none; font-family: "Barlow", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--midnight); letter-spacing: 0; }
.portal-note { border-left: 4px solid var(--steel); }
.portal-foot { text-align: center; margin-top: 1.5rem; }
.portal-link { display: flex; gap: .4rem; margin: .4rem 0; }
.portal-link input { flex: 1; min-width: 0; }
.portal-person + .portal-person { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; }
.portal [hidden] { display: none !important; }

/* ---------------------------------------------------------------- map (jobs/templates/jobs/map.html) */
.map-page main { max-width: none; }
.map-bar { display: grid; gap: .3rem; margin-bottom: .5rem; }
.map-bar p { margin: 0; }
.map-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.map-tools select { flex: 1 1 260px; max-width: 520px; min-height: 38px; }
.map-toggle { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; margin: 0; }
.map-toggle .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.dot.job { background: var(--navy); }
.dot.lead { background: var(--steel); }
#map { height: calc(100vh - 230px); min-height: 380px; border-radius: var(--radius); border: 1px solid var(--line); }
/* a map keeps its layers' stacking to itself (Leaflet's panes are 400 to 1000), so the header's More menu, the phone's
   More sheet and the tab bar open over it instead of behind it (Noah, 2026-09-28) */
.leaflet-container { isolation: isolate; }
#map.dropping { cursor: crosshair; }
.map-legend { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; font-size: .8rem; margin: .4rem 0; }
.map-legend i { width: 14px; height: 10px; display: inline-block; border-radius: 2px; }
.map-legend[hidden] { display: none; }
.map-legend i.hollow { background: #fff; border: 1px solid var(--steel); }
/* the code map's popup: an area's facts, then its rules on request */
.code-pop .code-facts { list-style: none; margin: .35rem 0; padding: 0; display: grid; gap: .15rem; font-size: .85rem; }
.code-pop .code-rules { max-height: 220px; overflow-y: auto; }
.code-pop .code-rules li { font-size: .82rem; }
/* the facts that change a job, as chips (job page, code library, storm list) */
.chip.code-strong { background: var(--navy); color: #fff; }
.map-pin span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--rust); transform: rotate(-45deg);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(1, 16, 43, .45); }
.leaflet-popup-content .btn { margin-top: .4rem; color: #fff; }
@media (max-width: 700px) { #map { height: calc(100vh - 270px); } }

/* the Office page (jobs/office.html): its lists as tiles */
.office-head { margin: 1.2rem 0 .5rem; font-size: 1.1rem; }
.office-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.office-tile { display: block; color: var(--midnight); margin: 0; }
.office-tile:hover { text-decoration: none; border-color: var(--steel); }
/* its sections as tabs (the script on the page); without it they show one under another */
.office-tabs { margin: .6rem 0 1rem; }
.office-tabs[hidden] { display: none; }
.office-tabbed .office-panel > .office-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.office-tabbed .office-panel > .office-grid:first-of-type, .office-tabbed .office-panel > .panel:first-of-type { margin-top: 0; }
/* Company settings, Price book (jobs/company.py): a material per row, its fields as inputs */
table.price-book td { padding: .3rem .35rem; vertical-align: middle; }
table.price-book td:first-child { min-width: 15rem; }
table.price-book td:nth-child(2) { min-width: 7rem; }
table.price-book td:nth-child(3) { width: 5rem; }
table.price-book td.num input { width: 7rem; text-align: right; }
table.price-book td:last-child { min-width: 9rem; }
table.price-book td:last-child label { display: block; margin-top: .15rem; }
.wording-step { border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .6rem; }
.plan-fields { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.brand-samples { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.brand-sample { display: grid; place-items: center; min-height: 6rem; padding: .8rem; border-radius: var(--radius); border: 1px solid var(--line); }
.brand-sample img { max-width: 100%; max-height: 4.5rem; }
.brand-sample.light { background: #fff; }
@media (max-width: 560px) { .brand-samples { grid-template-columns: 1fr; } }
table.labor-items td { padding: .3rem .35rem; vertical-align: middle; }
table.labor-items td:first-child { min-width: 13rem; }
table.labor-items td:nth-child(2) input { width: 5rem; }
table.labor-items td.num input { width: 7rem; text-align: right; }
.office-tile h3 { margin-bottom: .25rem; }
.office-tile p { margin: 0; }
/* Office → Export everything (jobs/export_views.py): the two boxes one above the other, how far along an export is */
.export-form .fields { gap: .5rem; margin-bottom: .2rem; }
.export-form .fields .check label { margin-top: 0; }
.meter { height: 8px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.meter span { display: block; height: 100%; min-width: 4px; border-radius: 99px; background: var(--steel); transition: width .4s; }
@media (max-width: 560px) { .exports .doc .spread { flex-direction: column; align-items: flex-start; } }   /* buttons under the details */

/* Marketing (marketing/) */
.eyebrow { font: 600 .78rem "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.picker-group { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-top: .4rem; max-height: 16rem; overflow-y: auto; }
.picker-group label.check { font-weight: 500; margin: .3rem 0; }
.big-number { font: 700 1.6rem "Oswald", sans-serif; color: var(--navy); }
.form .three-even { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
/* Homes by roof age (marketing/templates/marketing/campaign_form.html, campaign_detail.html) */
.roof-age fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.roof-age legend { font: 600 1.05rem "Oswald", sans-serif; color: var(--navy); padding: 0; margin-bottom: .35rem; }
.form [data-where][hidden] { display: none; }
#map.campaign-map { height: 46vh; min-height: 300px; margin-top: .4rem; }
#spot-map { height: 46vh; min-height: 300px; border-radius: var(--radius); border: 1px solid var(--line); cursor: crosshair; }
.place-facts:not(.panel) { background: var(--pale); border-radius: 8px; padding: .65rem .8rem; }
.place-facts[hidden] { display: none; }
.place-facts .lines { list-style: none; margin: .3rem 0 .2rem; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
.place-facts .lines li { line-height: 1.35; overflow-wrap: anywhere; }
.place-facts .flag-inline { margin: .4rem 0 0; }
.max-homes input, .marketing-settings input[type=number] { max-width: 8rem; }
.homes-list td { vertical-align: top; }
.homes-list td strong { overflow-wrap: anywhere; }
.homes-list td.roof { min-width: 11rem; }
@media (max-width: 640px) {      /* a phone: each home a card, its facts labeled */
  .homes-list, .homes-list tbody, .homes-list tr, .homes-list td { display: block; width: 100%; }
  .homes-list tr.head { display: none; }
  .homes-list tr { padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
  .homes-list td { border: 0; padding: .12rem 0; text-align: left; min-width: 0; }
  .homes-list td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
  .homes-list td.num { text-align: left; }
}
.list-summary { margin: .2rem 0 .7rem; }
.list-summary summary { cursor: pointer; color: var(--steel); font-weight: 600; }
.list-summary .lines { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .25rem; font-size: .92rem; }
.credits-panel .lines { padding-left: 1.1rem; margin: .3rem 0; display: grid; gap: .2rem; color: var(--muted); }
.pager { margin-top: .6rem; }
.chip.st-gathering { background: var(--amber-bg); color: var(--amber); }

/* the owner's quick switch between views (accounts: Look as…), in the Look-as bar */
.viewas-pick { width: auto; max-width: 11rem; padding: .3rem .5rem; font-size: .85rem; }
.viewas-bar .viewas-pick { background: #fff; border-color: #F0D9A8; color: var(--midnight); }

/* the Office's People and logins */
.person-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.secret { font: 600 1.3rem ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--navy); }

/* a form on its way (base.html: one tap per save) */
form.sending button[disabled] { opacity: .6; cursor: progress; }

/* build weather (jobs/weather.py): the week ahead when scheduling, and a work day's call on the calendar and job page */
.wx-strip { margin: 0 0 1rem; }
.wx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; border-radius: 10px;
          border: 1.5px solid var(--tile); background: #fff; color: var(--midnight); font: inherit; cursor: pointer; }
.wx-day strong { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.wx-day .wx-call { font-weight: 700; font-size: .85rem; }
.wx-day.wx-good { background: var(--green-bg); border-color: #b9dcc4; }
.wx-day.wx-risky { background: var(--amber-bg); border-color: #ecd49b; }
.wx-day.wx-bad { background: var(--red-bg); border-color: #e7b9b4; }
.wx-day.wx-none { cursor: default; opacity: .7; }
.wx-day.picked { outline: 3px solid var(--navy); outline-offset: 1px; }
@media (max-width: 560px) { .wx-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 99px; white-space: nowrap; }
.wx-badge.wx-good { background: var(--green-bg); color: var(--green); }
.wx-badge.wx-risky { background: var(--amber-bg); color: var(--amber); }
.wx-badge.wx-bad { background: var(--red-bg); color: var(--red); }
.wx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; margin-top: .25rem; }

/* the job's notes above its checklist (jobs/job_detail.html): the latest five, the rest behind "All notes" */
.notes-panel .form textarea { min-height: 3.2rem; }
.more-notes summary { cursor: pointer; color: var(--steel); margin-top: .4rem; }

/* a follow-up card's last note from a person (sales/_last_note.html) */
.last-note { margin-top: .45rem; padding: .45rem .6rem; border-radius: 8px; background: var(--pale); font-size: .9rem; overflow-wrap: anywhere; }
.last-note .label { display: block; font: 600 .72rem "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); margin-bottom: .1rem; }

/* the job page's Photos panel: invite a subcontractor, and the link right under the button */
.sub-invite { margin-top: .75rem; }
.sub-invite > label, .sub-link > label { font-weight: 600; display: block; margin-bottom: .3rem; }
.sub-new { margin-top: .4rem; }
.sub-link { margin-top: .6rem; padding: .7rem .8rem; border-radius: 10px; background: var(--pale); border: 1px solid #C9D5EE; }
.sub-link .actions { margin-top: .5rem; }
@media (max-width: 560px) { .sub-new .fields { grid-template-columns: 1fr; } }
/* Office → Documents: each file's name, then Download (a phone: Save) and Delete */
.doc .spread { align-items: center; gap: .75rem; }
.doc-name { min-width: 0; overflow-wrap: anywhere; }
.doc-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.doc-actions .btn { display: inline-flex; align-items: center; gap: .35rem; }
.doc-actions form { margin: 0; }
.panel.review { border-color: var(--steel); }
.chip.st-review { background: var(--steel); color: #fff; }

/* the Texts inbox (outreach/texts.html): a row per conversation, the unread ones bold with a dot */
.texts-page { max-width: 60rem; }
.texts-mode { margin: 0 0 .6rem; padding: .45rem .75rem; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: .9rem; }
.inbox { background: #fff; border: 1.5px solid var(--tile); border-radius: var(--radius); overflow: hidden; }
.inbox-row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) .7rem; gap: .75rem; align-items: center; padding: .7rem .9rem;
             color: var(--midnight); border-top: 1px solid var(--line); }
.inbox-row:first-child { border-top: 0; }
.inbox-row:hover { background: var(--pale); text-decoration: none; }
.inbox-face { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--steel); color: #fff;
              font: 500 1rem "Oswald", sans-serif; letter-spacing: .05em; }
.inbox-face.unknown { background: #5F6E84; }
.inbox-main { display: grid; gap: .05rem; min-width: 0; }
.inbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.inbox-name, .inbox-text, .inbox-about { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-name { font-weight: 500; }
.inbox-time { flex: none; font-size: .8rem; color: var(--muted); }
.inbox-text { font-size: .92rem; color: var(--muted); }
.inbox-who { color: var(--navy); }
.inbox-about { font-size: .8rem; color: var(--steel); }
.inbox-row.unread .inbox-name, .inbox-row.unread .inbox-text { font-weight: 600; color: var(--midnight); }
.inbox-row.unread .inbox-time { font-weight: 600; color: var(--navy); }
.inbox-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--steel); }

/* a conversation (outreach/conversation.html), like a phone's messages app: their texts on the left, ours on the right
   (Navy; the automatic ones Steel; recorded-only ones dashed, since they never went), the box to write at the bottom */
.convo { display: flex; flex-direction: column; max-width: 52rem; min-height: calc(100vh - 54px - 2rem); }  /* a short one: the box still at the bottom */
.convo > .thread { flex: 1; }
.convo-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.convo-back { flex: none; font-weight: 600; }
.convo-who { flex: 1 1 12rem; min-width: 0; }
.convo-who h1 { margin: 0; text-transform: none; overflow-wrap: anywhere; }
.convo-acts { display: flex; gap: .4rem; }
.convo-acts .btn .ico { margin-right: .1rem; }
.convo-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.convo-links .chip { background: #E4ECFB; color: var(--steel); white-space: normal; }
.thread { display: flex; flex-direction: column; gap: .4rem; padding: .6rem 0 1rem; }
.thread-more { margin: 0; text-align: center; font-size: .9rem; }
.thread-day { margin: .6rem 0 .1rem; text-align: center; font: 600 .78rem "Barlow Condensed", sans-serif; letter-spacing: .08em;
              text-transform: uppercase; color: var(--muted); }
.thread-empty { text-align: center; }
.bubble-row { display: flex; flex-direction: column; max-width: min(85%, 34rem); }
.bubble-row.in { align-self: flex-start; align-items: flex-start; }
.bubble-row.out { align-self: flex-end; align-items: flex-end; }
.bubble { padding: .55rem .8rem; border-radius: 18px; line-height: 1.38; overflow-wrap: anywhere; }
.bubble-row.in .bubble { background: #fff; border: 1.5px solid var(--tile); border-bottom-left-radius: 6px; }
.bubble-row.out .bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.bubble-row.out.auto .bubble { background: var(--steel); }
.bubble-row.out .bubble a { color: #fff; text-decoration: underline; }
.bubble-row.out.not-sent .bubble { background: #fff; color: var(--navy); border: 1.5px dashed var(--steel); }
.bubble-row.out.not-sent .bubble a { color: var(--steel); }
.bubble-row.out.bad .bubble { background: var(--red-bg); color: var(--red); border: 1.5px solid #E9C3BF; }
.bubble-row.out.bad .bubble a { color: var(--red); }
.bubble-photo { display: block; margin-top: .2rem; font-weight: 600; }
.bubble-meta { margin: .15rem .45rem 0; font-size: .75rem; color: var(--muted); }
.bubble-row.not-sent .bubble-status { color: var(--amber); font-weight: 600; }
.bubble-row.bad .bubble-status { color: var(--red); font-weight: 600; }
.convo-reply { position: sticky; bottom: 0; z-index: 5; margin: 0 -1rem; padding: .6rem 1rem; background: var(--bg); border-top: 1px solid var(--line); }
@media (min-width: 1200px) { .convo-reply { margin: 0 -1.5rem; padding: .6rem 1.5rem; } }
.convo-box { display: flex; align-items: flex-end; gap: .5rem; margin: 0; }
.convo-box textarea { flex: 1; min-height: 44px; max-height: 160px; padding: .6rem .9rem; border-radius: 20px; line-height: 1.35; resize: none; }
.convo-send { flex: none; min-height: 44px; border-radius: 20px; }
.convo-hint { margin: .3rem .3rem 0; font-size: .8rem; color: var(--muted); }
.convo-off { margin: 0; padding: .55rem .8rem; border-radius: 8px; background: var(--pale); color: var(--navy); font-size: .92rem; }
.convo-rule { display: block; margin-top: .2rem; font-size: .82rem; color: var(--muted); }
.convo-error { margin: 0 0 .45rem; padding: .45rem .75rem; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: .9rem; }
/* a phone: the box sits right on the bottom menu (clear of its round + button), and the page ends there */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .convo-page main { padding-bottom: calc(62px + var(--safe-bottom)); }
  .convo { min-height: calc(100vh - 59px - .75rem - 62px - var(--safe-bottom));
           min-height: calc(100dvh - 59px - .75rem - 62px - var(--safe-bottom)); }
  html.in-shell .convo { min-height: calc(100vh - .75rem - 62px - var(--safe-bottom));
                         min-height: calc(100dvh - .75rem - 62px - var(--safe-bottom)); }
  .convo-reply { bottom: calc(62px + var(--safe-bottom)); margin: 0 -.75rem; padding: .5rem .75rem calc(.5rem + 22px); }
}

/* Office → Follow-ups: each step as a made-up client would get it */
.followup-preview { margin-top: .5rem; padding: .55rem .75rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.followup-preview.sms { max-width: 34rem; border-radius: 14px; }

/* a job's insurance scope lines, typed in (jobs/scope_lines.html): a row per line on a computer, a card per line on a phone */
.scope-head, .scope-row { display: grid; grid-template-columns: 3.2rem 8rem minmax(12rem, 1fr) 5rem 3.6rem 6.5rem 6.5rem 6.5rem 5.2rem;
                          gap: .35rem; align-items: center; }
.scope-head { font-size: .78rem; color: var(--muted); font-weight: 600; padding: 0 .1rem .25rem; }
.scope-row { padding: .3rem .1rem; border-top: 1px solid var(--line); }
.scope-row input { width: 100%; min-width: 0; }
.scope-row .scope-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the column heads say it */
.scope-row .scope-del { font-size: .8rem; white-space: nowrap; }
.scope-row .scope-del input { width: auto; }
.scope-row.has-errors { background: var(--amber-bg); }
.scope-errors { grid-column: 1 / -1; font-size: .85rem; color: var(--red); display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
@media (max-width: 900px) {
  .scope-head { display: none; }
  .scope-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .6rem .1rem; }
  .scope-row .scope-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block;
                           font-size: .78rem; color: var(--muted); }
  .scope-row .scope-descr { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- forms the team fills in (teamforms/): filling one in on a
   phone outdoors (big type, big buttons), reading its answers, picking one, and Office → Forms */
.fill-wrap { max-width: 46rem; }
.fill-title { margin-bottom: .2rem; }
.fill-sub { margin: 0 0 .8rem; }
.fill-note { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: .95rem; }
.fill-problems { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 10px; background: var(--red-bg); color: var(--red); }
.fill-problems ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.fill-problems a { color: var(--red); text-decoration: underline; }
.fill-section { background: #fff; border: 1.5px solid var(--tile); border-radius: var(--radius); padding: .4rem 1rem .2rem; margin-bottom: .9rem; }
.fill-section > h2 { margin: .55rem 0 .1rem; font-size: 1.2rem; }
.fill-head-help { margin: 0 0 .3rem; font-size: .92rem; color: var(--muted); }
.fq { padding: .85rem 0 .95rem; border-top: 1px solid var(--line); }
.fill-section > h2 + .fq, .fill-section > .fill-head-help + .fq, .fill-section > .fq:first-child { border-top: 0; }
.fq-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.fq-label { display: block; margin: 0 0 .3rem; padding: 0; font: 600 1.08rem/1.3 "Barlow", sans-serif; color: var(--midnight); }
.need { display: inline-block; margin-left: .25rem; padding: 0 .45rem; border-radius: 99px; background: var(--amber-bg); color: var(--amber);
        font: 600 .72rem/1.6 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em; }
.fq-help { margin: -.1rem 0 .5rem; font-size: .93rem; color: var(--muted); }
.fq-sub { margin: .35rem 0 0; font-size: .88rem; color: var(--muted); }
.fill input[type=text], .fill input[type=date], .fill textarea { font-size: 18px; min-height: 52px; padding: .7rem .8rem; border-radius: 10px; }
.fill textarea { min-height: 7rem; line-height: 1.4; }
.fill input.fq-number, .fill input.fq-date { max-width: 14rem; }
/* shorter (Laban, 2026-10-20): pick-one and yes/no are dropdowns, a longer answer starts two lines tall and grows as it's
   typed, pick-several are small boxes, and on a computer two short questions sit side by side */
.fq { padding: .55rem 0 .6rem; }
.fq-label { font-size: 1rem; margin-bottom: .2rem; }
.fq-help { font-size: .86rem; margin-bottom: .3rem; }
.fill input[type=text], .fill input[type=date], .fill textarea, .fill select.fq-select { font-size: 16px; min-height: 44px; padding: .45rem .7rem; border-radius: 8px; }
.fill select.fq-select { width: 100%; max-width: 24rem; }
.fill textarea { min-height: 4.2rem; field-sizing: content; max-height: 16rem; }
.fq-picks.compact { display: flex; flex-wrap: wrap; gap: .35rem; }
.fq-picks.compact .pick span { min-height: 40px; padding: .3rem .7rem; font-size: .95rem; border-width: 1px; }
@media (min-width: 760px) {
  .fill-wrap { max-width: 56rem; }
  .fill-section { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-items: start; }
  .fill-section > h2, .fill-section > .fill-head-help, .fq-long, .fq-several, .fq-photos, .fq-signature { grid-column: 1 / -1; }
  .fill-section > .fq { border-top: 0; }
  .fill select.fq-select { max-width: none; }
}
.fq-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.fq-picks.two { grid-template-columns: 1fr 1fr; max-width: 24rem; }
.pick { position: relative; margin: 0; font-weight: 600; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: flex; align-items: center; gap: .55rem; min-height: 52px; height: 100%; padding: .55rem .85rem; border: 1.5px solid var(--tile);
             border-radius: 12px; background: #fff; color: var(--midnight); font-size: 1.02rem; line-height: 1.25; cursor: pointer; user-select: none; }
.pick span::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border: 2px solid #9AA6BD; border-radius: 50%; background: #fff; }
.pick input[type=checkbox] + span::before { border-radius: 5px; }
.pick input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.pick input:checked + span::before { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 4px var(--navy); }
.pick input[type=checkbox]:checked + span::before { width: .5rem; height: .9rem; margin: -.2rem .38rem 0; border: solid #fff; border-width: 0 3px 3px 0;
                                                     border-radius: 0; background: none; box-shadow: none; transform: rotate(45deg); }
.pick input:focus-visible + span { outline: 3px solid var(--steel); outline-offset: 2px; }
.pick span:active { transform: scale(.985); }
.fq.missing { margin-left: -1rem; padding-left: calc(1rem - 4px); border-left: 4px solid var(--red); }
.fq-problem { margin: .45rem 0 0; color: var(--red); font-weight: 600; font-size: .95rem; }
.fq-thumbs { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
.fq-thumbs:empty { display: none; }
.fq-thumbs li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--pale); }
.fq-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fq-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
        background: rgb(1 16 43 / .72); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fq-photo-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.fq-btn { flex: 1 1 12rem; min-height: 54px; font-size: 1.02rem; cursor: pointer; }
.fq-btn:focus-within { outline: 3px solid var(--steel); outline-offset: 2px; }
.fq-sign .sign-pad canvas { height: 190px; }
.fq-sign input[type=text] { margin-top: .2rem; }
.fq-signed img, .answer-sign { display: block; max-width: 100%; max-height: 110px; padding: .3rem .5rem; border: 1px solid var(--line);
                               border-radius: 8px; background: #fff; }
.fq-signed .btn { margin-top: .4rem; }
.fill-end { display: grid; gap: .55rem; margin: 1rem 0 .5rem; }
/* how the saving goes: a pill that stays in sight at the foot of the screen while the form is (above a phone's menu) */
.fill-status { position: sticky; bottom: 12px; z-index: 5; width: fit-content; max-width: 100%; margin: .2rem 0 .7rem; padding: .35rem .85rem;
               border-radius: 99px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 14px rgb(1 16 43 / .12);
               font-size: .92rem; font-weight: 600; color: var(--green); }
.fill-status.bad { color: var(--amber); background: var(--amber-bg); border-color: #ecd49b; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) { .fill-status { bottom: calc(72px + var(--safe-bottom)); } }
.btn.fill-finish { min-height: 58px; font-size: 1.2rem; font-family: "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.btn.fill-later { min-height: 50px; }
.fill-end .hint { margin: 0; }
.fill-discard { margin: .3rem 0 1.5rem; }
@media (min-width: 701px) { .fill-end { grid-template-columns: auto auto 1fr; align-items: center; } .fill-end .hint { grid-column: 1 / -1; }
                            .btn.fill-finish { min-width: 14rem; } }
@media (max-width: 700px) {
  .fill-section { padding: .3rem .85rem .1rem; }
  .fq.missing { margin-left: -.85rem; padding-left: calc(.85rem - 4px); }
}
/* a form's answers (teamforms/filled.html): question above its answer on a phone, side by side on a computer */
.fill-who { margin: 0 0 .5rem; color: var(--muted); }
.fill-acts { margin: .2rem 0 .9rem; }
.fill-acts .btn .ico { margin-right: .15rem; }
.fill-answers h2 { margin-top: 0; }
.answer { padding: .6rem 0; border-top: 1px solid var(--line); }
.fill-answers h2 + .answer, .fill-answers .hint + .answer, .fill-answers > .answer:first-child { border-top: 0; }
.answer-q { font-size: .9rem; color: var(--muted); font-weight: 600; margin-bottom: .15rem; }
.answer-a { font-size: 1.02rem; overflow-wrap: anywhere; }
.answer-a .photo-grid { margin-top: .2rem; }
@media (min-width: 900px) { .answer { display: grid; grid-template-columns: minmax(12rem, 2fr) 3fr; gap: 1rem; } .answer-q { margin: 0; } }
/* picking a form on a job or lead (teamforms/pick.html), and the Forms section on their pages */
.form-pick { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; }
.form-pick h3 { margin-bottom: .15rem; }
.form-pick p { margin: 0 0 .15rem; }
.form-pick.asked { border-color: var(--steel); box-shadow: inset 4px 0 0 var(--steel); }
.form-pick form { margin: 0; flex: none; }
.btn.form-pick-go { min-height: 52px; min-width: 9rem; font-size: 1.05rem; }
@media (max-width: 560px) { .form-pick { flex-direction: column; align-items: stretch; } .btn.form-pick-go { width: 100%; } }
.form-line { align-items: center; }
.form-line-who { display: block; }
.form-line-acts { flex-wrap: nowrap; gap: .5rem; }
.forms-from { margin: .9rem 0 .1rem; font-size: .9rem; color: var(--muted); }
.forms-panel .line:first-child { padding-top: 0; }
/* Office → Forms (teamforms/office_form.html): each question, its buttons, its form */
.form-tile .card-top h3 { margin: 0; }
.form-tile p { margin: .3rem 0 0; }
.fb-list { padding-top: .4rem; }
.fb-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.fb-q:first-child { border-top: 0; }
.fb-q.fb-heading { margin: .3rem -1rem 0; padding: .55rem 1rem; background: var(--pale); border-top: 0; }
.fb-head-title { font: 600 1.02rem "Oswald", sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.fb-n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-right: .45rem; padding: 0 .3rem; border-radius: 99px;
        background: var(--navy); color: #fff; font: 600 .82rem "Oswald", sans-serif; vertical-align: .05em; }
.fb-tags { margin-top: .25rem; }
.fb-choices { margin-top: .3rem; gap: .25rem; }
.fb-choices .chip { background: #fff; border: 1px solid var(--tile); font-weight: 500; }
.fb-check label { display: flex; gap: .45rem; align-items: center; font-weight: 600; margin-top: 1.6rem; }
@media (max-width: 560px) { .fb-check label { margin-top: 0; } }
.fb-remove { margin: .6rem 0 .2rem; }
.fb-form [hidden] { display: none; }

/* Office → Import (imports/): the steps, matching a file's columns and values, the check before importing */
.label-like { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.import-steps { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .25rem 0 1rem; }
.import-steps li { display: flex; align-items: center; gap: .4rem; padding: .25rem .75rem .25rem .3rem; border-radius: 99px;
                   background: var(--pale); color: var(--muted); font: 500 .95rem "Barlow Condensed", sans-serif;
                   text-transform: uppercase; letter-spacing: .03em; }
.import-steps li a { display: contents; color: inherit; }
.import-steps .n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff;
                   color: var(--navy); font: 600 .8rem "Oswald", sans-serif; }
.import-steps li.done { color: var(--steel); }
.import-steps li.done .n { background: var(--steel); color: #fff; }
.import-steps li.on { background: var(--navy); color: #fff; }
.import-columns { max-width: 860px; }
.import-match { max-width: 860px; }
.import-match .match-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.6fr); gap: .3rem 1rem;
                           align-items: start; padding: .55rem 0; border-top: 1px solid var(--line); }
.import-match h2 + .match-row, .import-match p + .match-row { border-top: 0; }
.import-match .match-row label { margin: .55rem 0 0; overflow-wrap: anywhere; }
.import-match .match-row label .hint { display: block; font-weight: 400; margin-top: .1rem; }
.import-match .match-row .count { margin-left: .3rem; }
.import-match .sample { overflow-wrap: anywhere; }
@media (max-width: 560px) { .import-match .match-row { grid-template-columns: minmax(0, 1fr); } .import-match .match-row label { margin-top: 0; } }
.import-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 1rem; align-items: start; }
table.data.compact td, table.data.compact th { padding: .3rem .5rem; }
.import-sample { min-width: 60rem; }               /* a phone scrolls it sideways rather than squeezing every row */
.import-sample td { font-size: .88rem; }
.import-sample tr.muted td { color: var(--muted); }
.stat.warn .n { color: var(--amber); }

/* Public records (records/): the panel on the lead, client and job pages, and the area loader for door knocking */
.records .lines { list-style: none; margin: .25rem 0 .4rem; padding: 0; display: grid; gap: .35rem; font-size: .95rem; }
.records .lines li { line-height: 1.35; overflow-wrap: anywhere; }
.records .lbl { color: var(--muted); }
.records .sub { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.records .credit { font-size: .76rem; color: var(--muted); margin: .5rem 0 0; line-height: 1.35; }
.records .refresh { margin-top: .6rem; }
.records.compact { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.records.compact h4 { font: 600 .82rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase;
                      color: var(--navy); margin: 0; }
.records.compact .lines { font-size: .9rem; }
#map.area-map { height: 58vh; min-height: 340px; margin-top: .4rem; }
.area-intro { max-width: 70rem; }
.area-tools select { flex: 0 1 auto; min-width: 7.5rem; min-height: 34px; padding-top: .2rem; padding-bottom: .2rem; }
.area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .75rem; }
.area-card { margin: 0; }
.area-card .actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.records .warn { color: var(--amber); }
.area-tools .btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.area-form { max-width: 34rem; margin: .75rem 0 0; }
.area-form[hidden] { display: none; }

/* the client portal's demo (portal/demo.py): a made-up homeowner, said plainly */
.portal-demo { background: var(--amber-bg); color: var(--amber); padding: .55rem 1rem; text-align: center; font-size: .92rem; border-bottom: 1px solid #F0D9A8; }
.portal-demo a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: .4rem; }

/* the calendar's visits and Busy blocks (scheduling): a visit's length and tags, busy time grey, the visit's buttons in
   a tapped entry on the hour grid, the office's Mine / Everyone switch */
.entry.kind-busy { background: #ECEEF2; border-left-color: #8A93A5; color: var(--muted); box-shadow: none; }
.entry.kind-busy strong { color: var(--muted); }
.entry.kind-busy form { display: inline; }
.cal-head { flex-wrap: wrap; gap: .5rem; }
.cal-tools { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.cal-tools form.row { flex-wrap: wrap; gap: .4rem; }
.visit-controls { color: var(--midnight); }
.visit-controls .vc-row { flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.visit-controls form.row { flex-wrap: wrap; gap: .4rem; align-items: center; }
.visit-controls input[type=date], .visit-controls input[type=time], .visit-controls select { width: auto; max-width: 100%; }
.visit-controls input[name=reason] { width: auto; max-width: 100%; flex: 1 1 10rem; }
.visit-controls label.check { margin: 0; font-weight: 500; }
/* a phone: the "Move · hand over · cancel · no-show" line is a tap target like the buttons (44 px) */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .visit-controls summary { display: flex; align-items: center; min-height: 44px; padding: .3rem 0; }
}
.entry .tag, .ev .tag { font-size: .72rem; font-weight: 600; padding: 0 .4rem; border-radius: 99px; background: #E4ECFB; color: var(--steel); white-space: nowrap; }

/* the public booking page (outreach/book.html): a day to tap, then a time, all usable without scripts */
.day-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.day-chip { display: grid; justify-items: center; min-width: 3.7rem; min-height: 44px; padding: .35rem .5rem; border: 1px solid var(--field);
            border-radius: 10px; background: #fff; color: var(--navy); line-height: 1.15; text-decoration: none; }
.day-chip .dow { font: 500 .78rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.day-chip .dom { font: 600 1.25rem "Oswald", sans-serif; }
.day-chip .mon { font-size: .74rem; color: var(--muted); }
a.day-chip:hover { text-decoration: none; background: var(--pale); }
.day-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.day-chip.on .mon { color: #fff; opacity: .85; }
.day-chip.off { opacity: .5; }
.slot-day[hidden] { display: none; }
.slot-head { font-size: 1rem; margin: .6rem 0 .3rem; text-transform: none; letter-spacing: 0; }
.book-form fieldset { border: 0; padding: 0; margin: 0 0 .8rem; min-width: 0; }
.book-form legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.book-form .radios label { margin: 0; }

/* ---------------------------------------------------------------- phones: fingertip-size targets, readable text
   (the UX review, 2026-10-05). Last in the file, so they win over the rules above. */
/* nothing smaller than 14 px on a phone: dates, hints, tags, labels (the review found 12 to 13.9 px) */
@media (max-width: 700px) {
  .tiny, .hint, .chip, .stat .l, .last-note .label, .card-ask .label, .need, .chan, .stepper li, .cg-day h3, .entry, details.ev > summary,
  .inbox-time, .inbox-about, .bubble-meta, .lb-detail, .convo-hint, .convo-rule, .todo-need, .fb-n, .import-steps .n,
  .wx-badge, .portal-steps li, .records .sub, .records .credit, .cb-sky, .thread-day, .eyebrow, .snapshot-head,
  .sign-pad-line, .map-legend, .colchart .xaxis span, .colchart .yaxis span, .colchart .peak, .records.compact h4 { font-size: .83rem; }
  /* a long stage beside a name ("Estimate sent / claim filed") takes two lines rather than squeezing the name */
  .spread > .chip { white-space: normal; max-width: 48%; border-radius: 12px; line-height: 1.3; text-align: center; }
}
/* a phone: everything you tap is at least 44 px tall (Apple's guide for a fingertip; the UX review found buttons of
   34 px, links of 22 px). Where a bigger box would change the layout, the tap area grows instead and the look stays. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .btn.small { min-height: 44px; min-width: 44px; }
  input[type=text], input[type=tel], input[type=email], input[type=url], input[type=date], input[type=time], input[type=number],
  input[type=search], input[type=password], select { min-height: 44px; }
  input[type=file]::file-selector-button { min-height: 44px; }
  .radios span, .tabs a, .seg a, .map-toggle, .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
  .linkbtn { min-width: 44px; }
  .radios span { justify-content: center; }
  .tabs a, .seg a { gap: .35rem; }
  label.check, .fields .check label, label:has(> input[type=checkbox]) { min-height: 44px; }
  main details > summary:not(.btn) { min-height: 44px; padding-block: .55rem; }
  .search-list .line, .c2 .entry, .convo-links .chip { min-height: 44px; }
  .convo-links .chip { display: inline-flex; align-items: center; padding: .3rem .75rem; }
  .convo-back { display: inline-flex; align-items: center; min-height: 44px; padding-right: .4rem; }
  /* a card's name, a section's link: the same size on screen, a fingertip's height to tap */
  .card h3 a, .section-head a:not(.btn), .col h2 a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
  main > p.small:first-child > a:only-child, .fill-wrap > p.small:first-child > a:only-child,   /* "← Office" and the like */
  .card .tiny a, .card .sub a, .login-approve a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
  .facts dd a, .line > a:first-child { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
  .line:has(> a:first-child), .line:has(.nowrap > a) { padding-block: .6rem; }   /* a list's rows a fingertip tall */
  .line .nowrap > a { display: inline-block; padding: .6rem .5rem; margin: -.6rem -.5rem; }   /* "Confirmed · Edit" */
  /* a notice card that's all one link (texts you haven't read, commission due, To do): the whole card is the link */
  .card.today > a:only-child, .card.warn > a:only-child { display: block; margin: -.85rem -1rem; padding: .85rem 1rem; }
  .portal-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .facts:has(dd a) { row-gap: 1.25rem; }     /* a phone number or email to tap: rows far enough apart not to tap the wrong one */
  .portal-logo { padding-block: 4px; }
  .jump { padding-block: .5rem; }
  .jump a { position: relative; }
  .jump a::after { content: ""; position: absolute; inset: -.5rem 0; }
  .leaflet-container.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .more-close { width: 44px; height: 44px; }
  .star-chip, .import-steps li { min-height: 44px; }
  .tabs a.cal-2w { display: none; }            /* 2 weeks on a phone is a long scroll: the week view instead */
  .visit-controls input, .visit-controls select, .entry { max-width: 100%; }
  .entry.kind-busy .linkbtn { min-height: 44px; }
  .booking-day { flex-wrap: nowrap; }          /* Online booking's hours: "Monday 9 AM to 5 PM" on one line */
  .booking-name { width: 5.5rem; flex: none; }
  .fq-x { width: 40px; height: 40px; }     /* a photo's ×: as big as its thumbnail's corner allows */
}
/* the codes on a phone (the UX review): the code report's facts with each name above its words (long values got a
   narrow column), its source links a fingertip tall, and the job page's rule list folded under one line */
@media (max-width: 700px) {
  .facts.facts-stack { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .facts.facts-stack dt { margin-top: .5rem; }
  .code-rule-report a, .code-rules a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
}
.code-rules-more > summary { cursor: pointer; margin-top: .4rem; }
/* the PDF viewer (jobs/pdf_view.py): a bar with Back and Save or share stuck under the header, then every page */
.pdf-bar { position: sticky; top: 0; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem;
           margin: 0 -1rem .5rem; padding: .5rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.pdf-title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.pdf-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.pdf-actions [hidden] { display: none; }
.pdf-pages { display: grid; gap: .8rem; max-width: 860px; margin: .25rem auto 1.5rem; }
.pdf-page { position: relative; margin: 0; background: #fff; box-shadow: 0 1px 4px rgb(11 27 63 / .18);
            scroll-margin-top: var(--pdf-offset, 8rem); }
.pdf-link { position: absolute; display: block; border-radius: 2px; }      /* a link on the page: tap it as in the PDF */
.pdf-link:hover, .pdf-link:active, .pdf-link:focus-visible { background: rgb(2 35 95 / .1); outline: none; }
.pdf-page img { position: relative; display: block; width: 100%; height: 100%; }      /* over "Page 7…" once it's drawn */
.pdf-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .95rem; }
@media (max-width: 700px) { .pdf-bar { margin: 0 -.75rem .5rem; padding: .45rem .75rem; } .pdf-pages { gap: .5rem; } }
/* where the code and the building department's own sheet differ (jobs/code_conflicts.py): the code report's notes */
.code-notes { margin-top: .9rem; padding: .7rem .9rem; border-left: 3px solid var(--rust); background: #fff; border-radius: 0 6px 6px 0; }
.code-notes-head { margin-top: 0; color: var(--rust); }
.code-note-item + .code-note-item { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.code-note-link { color: var(--rust); font-weight: 600; }

/* the referral network (network/): the day's call cards and their outcome buttons, a fingertip tall */
.call-card.done { opacity: .72; }
.call-outcomes { border: 0; padding: 0; margin: .35rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .35rem; }
.call-outcome { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .6rem; border: 1.5px solid var(--tile); border-radius: 8px; font-size: .95rem; cursor: pointer; }
.call-outcome:has(input:checked) { border-color: var(--navy); background: var(--pale); }
.call-meeting:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }

/* a contractor registration's requirements checklist (jobs/registration_form.html) */
.req-list { list-style: none; padding: 0; margin: .5rem 0; }
.req-list li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.req-list li:last-child { border-bottom: 0; }
.req-list label { display: flex; gap: .5rem; align-items: center; }
.req-list .hint { margin-left: 1.6rem; }
/* a job's alerts (jobs/alerts.py): a red bubble, with a count when there's more than one */
.card-top .kind-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.alert-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: .8rem; line-height: 1; cursor: help; }
.alert-dot sup { font-size: .65rem; margin-left: .1rem; top: -.35em; }
.step-permit { margin-top: .35rem; } .step-permit .line { padding: .25rem 0; }

/* Today as a dashboard (sales/dashboard.py): one column on a phone, two on a wide screen; a wide card spans both. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: .75rem; grid-auto-flow: row dense; }
@media (min-width: 900px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash > .wide { grid-column: 1 / -1; } }
.dash-card { min-width: 0; scroll-margin-top: 5rem; }
.dash-card > .section-head:first-child { margin-top: .75rem; }
.dash:not(.editing) .dash-card:not(:has(> *)) { display: none; }       /* nothing to show today: out of the way */
.dash.editing .dash-card { border: 1.5px dashed var(--field); border-radius: var(--radius); padding: .5rem .6rem; margin-bottom: .6rem; }
.dash.editing .dash-card:not(:has(> :not(.dash-tools)))::after { content: "Nothing to show right now"; display: block; color: var(--muted); font-size: .85rem; }
.dash-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; margin-bottom: .45rem; }
.dash-tools strong { font: 600 .9rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.dash-top .row { justify-content: flex-end; }
.add-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.add-card { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0; }
.block { display: block; }

/* small figures in a row: the business card and the follow-up counts */
.kpi-card { padding: .6rem .7rem; }
.kpi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .75rem; margin-bottom: .45rem; }
.kpi-head .snapshot-head { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: .4rem; }
.kpi { display: flex; flex-direction: column; min-width: 0; padding: .4rem .55rem; border-radius: 8px; background: var(--pale); color: inherit; }
a.kpi:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--steel); }
.kpi .l { font: 500 .78rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kpi .n { font: 600 1.25rem/1.2 "Oswald", sans-serif; color: var(--navy); }
.kpi .m { font-size: .78rem; color: var(--muted); }
.kpi.red .n { color: var(--red); }
.kpis.tally { margin-bottom: .6rem; }
.kpis.tally .kpi { background: #fff; border: 1.5px solid var(--tile); }

/* a card of rows: the day's appointments, the jobs someone tagged you on, everything overdue */
.list-card { padding: .3rem .5rem; }
.list-card .kpi-head { margin: .35rem .35rem .2rem; }
.list-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .35rem; border-bottom: 1px solid var(--line); color: inherit; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--pale); text-decoration: none; }
.list-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.list-row .when { min-width: 4.4rem; font: 600 .95rem "Barlow Condensed", sans-serif; color: var(--navy); }
.list-row.done { opacity: .6; }

/* the line chart: Steel for sold (solid), amber for collected (dashed), checked for colour-blind readers */
.trend-card { --chart-sold: #335BA4; --chart-collected: #B07A00; padding: .7rem .8rem; }
.seg-small { flex-wrap: wrap; }
.seg-small button { min-height: 32px; padding: .2rem .6rem; border: 0; border-radius: 9px; background: none; color: var(--navy);
                    font: 600 .88rem "Barlow Condensed", sans-serif; letter-spacing: .03em; cursor: pointer; }
.seg-small button:hover { background: rgb(255 255 255 / .75); }
.seg-small button.on { background: var(--navy); color: #fff; }
.trend-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; margin-bottom: .5rem; font-size: .92rem; }
.trend-legend strong { font-family: "Oswald", sans-serif; font-weight: 500; color: var(--navy); }
.key i, .lc-row i { display: inline-block; width: 18px; height: 0; margin-right: .35rem; vertical-align: middle; border-top: 2.5px solid var(--chart-sold); }
.key.collected i, .lc-row.collected i { border-top-style: dashed; border-top-color: var(--chart-collected); }
.lc { position: relative; margin: .6rem 0 0 2.9rem; }
.lc-plot { position: relative; height: 190px; touch-action: pan-y; cursor: crosshair; border-radius: 2px; }
.lc-plot:focus-visible { outline: 2px solid var(--steel); outline-offset: 6px; }
.lc-tick { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.lc-tick:first-child { border-top-color: var(--field); }
.lc-tick span { position: absolute; right: 100%; margin-right: .45rem; transform: translateY(-50%); font-size: .72rem; color: var(--muted); white-space: nowrap; }
.lc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-plot polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-plot polyline.sold { stroke: var(--chart-sold); }
.lc-plot polyline.collected { stroke: var(--chart-collected); stroke-dasharray: 6 4; }
.lc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--muted); pointer-events: none; }
.lc-dot { position: absolute; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, 50%); pointer-events: none; }
.lc-dot.sold { background: var(--chart-sold); }
.lc-dot.collected { background: var(--chart-collected); }
.lc-tip { position: absolute; top: 0; z-index: 2; min-width: 10rem; padding: .4rem .55rem; border: 1px solid var(--tile); border-radius: 8px;
          background: #fff; box-shadow: 0 6px 18px rgb(1 16 43 / .15); font-size: .82rem; pointer-events: none; }
.lc-when { font-weight: 600; color: var(--navy); margin-bottom: .15rem; }
.lc-row { display: flex; align-items: center; gap: .1rem; }
.lc-row strong { margin-left: auto; padding-left: .75rem; font-variant-numeric: tabular-nums; }
.lc-x { position: relative; height: 1.5rem; }
.lc-x span { position: absolute; top: .3rem; transform: translateX(-50%); font-size: .72rem; color: var(--muted); white-space: nowrap; }
.lc-x span:first-child { transform: none; }
.lc-x span:last-child { transform: translateX(-100%); }
.trend-table { margin-top: .4rem; }
.trend-table table { margin-top: .4rem; }
.access-table { padding: 0; overflow-x: auto; }
.access-table .c { text-align: center; width: 5rem; }
@media (max-width: 700px) { .lc-x span.minor { display: none; } .lc { margin-left: 2.6rem; } }