/* Light It Up — the base stylesheet: tokens, the page frame (menu, top bar, tab bar), and the shared
   building blocks every screen uses. Look and layout follow Rentopian (a white menu down the left with the
   dark brand block on top, a coloured bar across the top, white cards on a light grey ground, number cards
   with small capital labels, icon tabs with a blue underline, quiet tables, tinted status pills) in Light It
   Up's own colours from the designer's logo (docs/brand/light-it-up-logo.pdf): coral #e74f3d and charcoal.
   Blue (#1f73d1) stays the colour of links and the lit tab, as in Rentopian; green the main buttons; #f5b400
   (--gold) is the amber of warnings.
   Old-phone rules: no CSS grid, no flex gap, no aspect-ratio/inset/clamp; a literal colour before each
   var() so a browser without custom properties still gets a styled page. Dark mode: the token swap at the
   end of this file (twice: the device setting, and the Account page choice). Screen sheets in /css/ add
   their own pieces and use the same tokens. */
:root {
  --bg: #eef1f6;          /* the ground */
  --card: #ffffff;
  --field: #ffffff;       /* inputs */
  --hover: #f5f8fc;       /* row hover */
  --ink: #2b3445;         /* text and headings */
  --ink2: #4a5568;        /* labels */
  --muted: #697386;
  --line: #e3e8ef;
  --line2: #cfd6e0;       /* input and button borders */
  --head: #2b2e35;        /* the brand block, dark buttons (the logo's charcoal) */
  --brand: #e74f3d;       /* the top bar (the logo's coral) */
  --brand2: #f0693f;
  --brand-ink: #c8402f;   /* coral text on white (job numbers) */
  --gold: #f5b400;
  --accent: #1f73d1;      /* links, the lit tab, the lit menu item */
  --accent-ink: #ffffff;
  --soft: #e8f1fc;        /* accent tint */
  --go: #12904a;          /* the main action button (save, book, mark delivered) */
  --go-dark: #0e7a3e;
  --ok: #17803d; --ok-bg: #e3f5ea;
  --err: #c53030; --err-bg: #fdecec;
  --info: #1f62b5; --info-bg: #e7f0fc;
  --warn: #9a6400; --warn-bg: #fff4d6;
  --out: #4f53cf; --out-bg: #eeeefc;     /* going out (delivery) */
  --back: #0d8a7f; --back-bg: #e0f4f1;   /* coming back (pickup) */
  --shadow: 0 1px 3px rgba(16, 32, 64, .08), 0 1px 1px rgba(16, 32, 64, .03);
  --radius: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #eef1f6; background: var(--bg); color: #2b3445; color: var(--ink);
  font: 15.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #1f73d1; color: var(--accent); }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .9rem; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 1.12rem; font-weight: 600; margin: 1.4rem 0 .6rem; line-height: 1.3; }
h3 { font-size: .98rem; font-weight: 600; margin: 1rem 0 .45rem; }
p { margin: .4rem 0 .8rem; }
small, .hint, .muted { color: #7b8698; color: var(--muted); }
.hint { font-size: .86rem; margin: .25rem 0 .6rem; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; -webkit-flex: none; flex: none; }
.mark { width: 30px; height: 30px; -webkit-flex: none; flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cap { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8698; color: var(--muted); }

/* ================================================================ the frame ================================ */
/* -- top bar: the brand blue with a soft wave at the left, as Rentopian's orange bar -- */
.top { background: #e74f3d; background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C130 8 240 66 380 32C470 12 570 14 640 0H0z' fill='%23ffffff' fill-opacity='.10'/%3E%3Cpath d='M0 56C150 30 270 74 420 44C510 26 590 18 640 0H0z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"), linear-gradient(90deg, #e74f3d 0%, #f0693f 100%);
  background-repeat: no-repeat, no-repeat; background-size: 640px 64px, 100% 100%; background-position: left top, left top;
  color: #fff; padding: 0 1rem; padding-top: env(safe-area-inset-top); min-height: 60px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between;
  position: -webkit-sticky; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 4px rgba(120, 30, 20, .22); }
.top .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-width: 0; }
.top .brand .logo-img { display: block; height: 40px; width: auto; }
.top-right { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.top-ic, .bell { position: relative; display: inline-block; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; margin-left: .25rem; text-decoration: none; }
.top-ic:hover, .bell:hover { background: rgba(255, 255, 255, .12); }
.top-ic .ic, .bell .ic { width: 23px; height: 23px; }
.bell b { position: absolute; top: 2px; right: 0; background: #fff; color: #c8402f; border-radius: 999px; font-size: .68rem; line-height: 1; padding: .2rem .36rem; font-weight: 800; box-shadow: 0 0 0 2px #e74f3d; }
.top .btn-book { background: #fff; color: #c8402f; border: 0; border-radius: 4px; padding: .4rem .9rem .4rem .65rem; min-height: 38px; font-weight: 700; margin-left: .6rem; line-height: 1.6; white-space: nowrap; }
.top .btn-book:hover { background: #fff3f1; }
.top .btn-book .ic { width: 18px; height: 18px; margin-right: .25rem; vertical-align: -4px; stroke-width: 2.4; }
.who { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #fff; text-decoration: none; margin-left: .7rem; }
.who-av { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); -webkit-flex: none; flex: none; }
.who-txt { display: none; margin-left: .6rem; line-height: 1.15; text-align: left; }
.who-txt b { display: block; font-size: .9rem; font-weight: 600; max-width: 12rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.who-txt small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .86); }
.top-search { display: none; }
@media (max-width: 1023px) { .side + .frame .top .btn-book { display: none; } }   /* the tab bar has its own + Job */

/* -- the menu (computers): white, the brand block on top with a wave, items with icons and dividers -- */
.side { display: none; }
.side-brand { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 60px; padding: 0 1.2rem;
  background: #2b2e35; background: var(--head); color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.side-brand .logo-img { display: block; height: 50px; width: auto; margin-top: 4px; }
.side-brand::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v10C190 30 120 2 60 18C34 25 14 26 0 22z' fill='%232b2e35' fill-opacity='.35'/%3E%3Cpath d='M0 0h240v2C196 20 128-2 66 12C38 18 16 18 0 14z' fill='%232b2e35'/%3E%3C/svg%3E") no-repeat left top / 100% 100%; }
.side-nav { padding-top: 30px; }
.side-nav a, .side-foot a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: .74rem 1.2rem; color: #2b3445; color: var(--ink);
  text-decoration: none; font-weight: 500; font-size: .96rem; border-bottom: 1px solid #edf0f5; border-bottom: 1px solid var(--line); }
.side-nav a .ic, .side-foot a .ic { margin-right: .9rem; color: #7b8698; color: var(--muted); width: 23px; height: 23px; }
.side-nav a:hover, .side-foot a:hover { background: #f5f8fc; background: var(--hover); }
.side-nav a.active, .side-foot a.active { color: #1f73d1; color: var(--accent); background: #e8f1fc; background: var(--soft); box-shadow: inset 3px 0 0 #1f73d1; font-weight: 600; }
.side-nav a.active .ic, .side-foot a.active .ic { color: #1f73d1; color: var(--accent); }
.side-foot { margin-top: 1.2rem; padding-bottom: 1.5rem; }
.side-foot a { font-size: .86rem; padding-top: .55rem; padding-bottom: .55rem; border-bottom: 0; color: #7b8698; color: var(--muted); }
.side-foot a .ic { width: 19px; height: 19px; }

/* -- the tab bar (phones, tablets upright) -- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; background: var(--card); border-top: 1px solid #e3e8ef; border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(16, 32, 64, .06); display: -webkit-flex; display: flex; padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { -webkit-flex: 1; flex: 1; text-align: center; padding: .45rem 0 .35rem; color: #7b8698; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; min-height: 56px; }
.tabbar a span { display: block; margin-top: .1rem; }
.tabbar a.active { color: #1f73d1; color: var(--accent); }
.tabbar .tab-book .ic { background: #e74f3d; background: var(--brand); color: #fff; border-radius: 50%; padding: 6px; width: 34px; height: 34px; margin-top: -4px; stroke-width: 2.4; box-shadow: 0 2px 6px rgba(231, 79, 61, .4); }
body.app .main { padding-bottom: 96px; }

.main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
body.drive .main { max-width: 680px; }

@media (min-width: 700px) {
  .who-txt { display: block; }
  .main { padding: 1.4rem 1.5rem; }
}
@media (min-width: 1024px) {
  .side { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: 236px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 25;
    background: #fff; background: var(--card); box-shadow: 1px 0 0 #e3e8ef, 2px 0 10px rgba(16, 32, 64, .05); }
  .side + .frame { margin-left: 236px; }
  .side + .frame .top .brand { display: none; }
  .side + .frame .top { padding-left: 1.5rem; padding-right: 1.25rem; }
  .side + .frame .top-search { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; position: relative; width: 360px; max-width: 40%; }
  .side + .frame .top-find { display: none; }
  .side ~ .tabbar { display: none; }
  body.app .side + .frame .main { padding: 1.6rem 2rem 2.5rem; }
  body.app.has-install-bar .side + .frame .main { padding-bottom: 6rem; }   /* room for the install bar */
}
.top-search .ic { position: absolute; left: .7rem; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: rgba(255, 255, 255, .8); pointer-events: none; }
.top .top-search input[type=search] { width: 100%; min-height: 40px; padding: .45rem .8rem .45rem 2.4rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
  background: rgba(255, 255, 255, .13); color: #fff; font-size: .92rem; -webkit-appearance: none; outline: 0; box-shadow: none; }
.top .top-search input[type=search]::-webkit-input-placeholder { color: rgba(255, 255, 255, .72); }
.top .top-search input[type=search]::placeholder { color: rgba(255, 255, 255, .72); }
.top .top-search input[type=search]:focus { background: #fff; color: #2b3445; border-color: #fff; }
.top .top-search input[type=search]:focus::placeholder { color: #7b8698; }

/* the platform admin keeps its own simple top + row of links (src/routes/admin.js) */
.nav.desk { display: none; }
body.admin .nav.desk { display: -webkit-flex; display: flex; overflow-x: auto; background: #fff; background: var(--card); box-shadow: var(--shadow); padding: 0 .5rem; }
body.admin .nav.desk a { padding: .85rem .9rem; text-decoration: none; color: #2b3445; color: var(--ink); white-space: nowrap; font-weight: 500; border-bottom: 3px solid transparent; }
body.admin .nav.desk a.active { color: #1f73d1; color: var(--accent); border-bottom-color: #1f73d1; border-bottom-color: var(--accent); }

/* ================================================================ building blocks ========================== */
/* -- page heading: title on the left (a quiet date line under it), buttons on the right -- */
.titlebar, .pagehead { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 1rem; }
.titlebar h1, .pagehead h1 { margin: 0 .75rem .3rem 0; }
.titlebar h2 { margin: 0 .5rem .3rem 0; }
.titlebar > span, .titlebar > div, .pagehead .acts { margin-bottom: .3rem; }
.pagehead .sub, .datehead { display: block; color: #7b8698; color: var(--muted); font-size: 1.05rem; font-weight: 400; margin: .1rem 0 0; }
.datehead { font-size: 1.15rem; margin: 0 0 1rem; }
.pagehead .lead { display: block; font-size: .94rem; max-width: 46rem; line-height: 1.45; margin-top: .2rem; color: #697386; color: var(--muted); }

/* -- card: white on the grey ground, a soft shadow, no border -- */
.card { background: #fff; background: var(--card); border: 0; border-radius: 6px; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(16, 32, 64, .08); box-shadow: var(--shadow); padding: 1.2rem 1.35rem; margin: 0 0 1.25rem; }
.card.narrow { max-width: 500px; margin: 1.5rem auto; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 1rem; }
.card-head h2 { margin: 0; -webkit-flex: 1; flex: 1; min-width: 0; }
.ci { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%;
  background: #eeeefc; background: var(--out-bg); color: #4f53cf; color: var(--out); -webkit-flex: none; flex: none; }
.card-head .ci { margin-right: .75rem; }
.ci .ic { width: 21px; height: 21px; }
.ci.ci-back { background: #e0f4f1; background: var(--back-bg); color: #0d8a7f; color: var(--back); }
.ci.ci-warn { background: #fff4d6; background: var(--warn-bg); color: #9a6400; color: var(--warn); }
.ci.ci-err { background: #fdecec; background: var(--err-bg); color: #c53030; color: var(--err); }
.ci.ci-ok { background: #e3f5ea; background: var(--ok-bg); color: #17803d; color: var(--ok); }
.ci.ci-blue { background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); }
.card-head > .btn, .card-head > a.btn, .card-head > form { margin-left: .5rem; }
.card-foot { margin: 1rem -1.35rem -1.2rem; padding: .9rem 1.35rem; background: #f7f9fc; background: var(--hover); border-top: 1px solid #e3e8ef; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; text-align: center; }

/* -- number cards (Rentopian's top row): a big number, a small capital label -- */
.tiles { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -.5rem -.5rem .9rem; }
.tile { position: relative; -webkit-flex: 1 1 160px; flex: 1 1 160px; margin: .5rem; background: #fff; background: var(--card); border: 0; border-radius: 6px; box-shadow: 0 1px 3px rgba(16, 32, 64, .08); box-shadow: var(--shadow);
  padding: 1.05rem 1.2rem 1rem; text-decoration: none; color: inherit; min-width: 0; }
a.tile:hover { box-shadow: 0 4px 14px rgba(16, 32, 64, .12); }
.tile b { display: block; font-size: 2.05rem; font-weight: 600; line-height: 1.1; color: #2b3445; color: var(--ink); letter-spacing: -.01em; }
.tile span { display: block; margin-top: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8698; color: var(--muted); line-height: 1.35; }
.tile small { display: block; margin-top: .35rem; font-size: .78rem; font-weight: 600; }
.tile.warn { box-shadow: inset 0 3px 0 #f5b400, 0 1px 3px rgba(16, 32, 64, .08); }
.tile.warn b { color: #c2610c; }
.tile.bad { box-shadow: inset 0 3px 0 #e04848, 0 1px 3px rgba(16, 32, 64, .08); }
.tile.bad b { color: #c53030; color: var(--err); }
.tile.good b { color: #17803d; color: var(--ok); }
.up { color: #17803d; color: var(--ok); } .down { color: #c53030; color: var(--err); }

/* -- icon tabs with a blue underline (Going Out · Coming Back · Delinquent) -- */
.tabs { display: -webkit-flex; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #e3e8ef; border-bottom: 1px solid var(--line); margin: 0 0 1rem; }
.tabs a, .tabs button { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: none; flex: none; padding: .95rem 1.25rem .85rem; color: #7b8698; color: var(--muted);
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-family: inherit; }
.tabs a .ic, .tabs button .ic { margin-right: .55rem; width: 24px; height: 24px; }
.tabs a:hover, .tabs button:hover { color: #2b3445; color: var(--ink); }
.tabs a.on, .tabs a.active, .tabs button.on { color: #1f73d1; color: var(--accent); border-bottom-color: #1f73d1; border-bottom-color: var(--accent); }
.tabs .count { display: inline-block; margin-left: .5rem; min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px; background: #eef1f6; background: var(--bg); color: #7b8698; color: var(--muted); font-size: .76rem; font-weight: 700; text-align: center; }
.tabs .on .count, .tabs .active .count { background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); }
.card > .tabs:first-child { margin: -1.2rem -1.35rem 1rem; padding: 0 .5rem; }

/* -- segmented pills (Notes · Tasks · Schedules · Calls) -- */
.seg { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 4px; margin: 0 0 1rem; border: 1px solid #e3e8ef; border: 1px solid var(--line); border-radius: 24px; background: #fff; background: var(--card); max-width: 100%; }
.seg a { margin: 0; padding: .42rem 1rem; border-radius: 20px; border: 0; background: transparent; text-decoration: none; color: #7b8698; color: var(--muted); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.seg a:hover { color: #2b3445; color: var(--ink); }
.seg a.on { background: #1f73d1; background: var(--accent); color: #fff; }

/* -- tables: small capital headings, roomy rows, a hover -- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; background: transparent; }
.table th, .table td { text-align: left; padding: .85rem .75rem; border-bottom: 1px solid #e3e8ef; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #7b8698; color: var(--muted); font-weight: 700; white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table tbody tr:hover td { background: #f5f8fc; background: var(--hover); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table tr.muted td { color: #7b8698; color: var(--muted); }
.table td a { text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table thead.dark th { background: #4b5468; color: #fff; letter-spacing: .05em; }
.jobno { color: #c8402f; color: var(--brand-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.type-out { color: #4f53cf; color: var(--out); font-weight: 600; white-space: nowrap; }
.type-back { color: #0d8a7f; color: var(--back); font-weight: 600; white-space: nowrap; }

/* -- status pills: tinted, small corners -- */
.tag { display: inline-block; font-size: .76rem; padding: .26rem .6rem; border-radius: 4px; background: #eef1f5; color: #4a5568; white-space: nowrap; font-weight: 700; line-height: 1.3; vertical-align: middle; }
.st-req { background: #fff4d6; color: #9a6400; }
.st-ok { background: #e7f0fc; color: #1f62b5; }
.st-here { background: #eeeefc; color: #4b4fc4; }
.st-done { background: #e3f5ea; color: #17803d; }
.st-no { background: #fdecec; color: #c53030; }
.st-cx { background: #eef1f5; color: #7b8698; text-decoration: line-through; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }

/* -- unit labels ("G100"): the number painted on the machine, shown big everywhere -- */
.ulabel { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 1.02rem; letter-spacing: .02em;
  background: #2b2e35; background: var(--head); color: #fff; border-radius: 4px; padding: .12rem .5rem; white-space: nowrap; vertical-align: middle; }
.ulabel-repair { background: #c53030; }
.ulabel-retired { background: #9aa4b5; text-decoration: line-through; }
.ulabel-sm { font-size: .85rem; padding: .05rem .4rem; }

/* -- a list row that is a button (Log out, Lock again) -- */
.more-btn { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; -webkit-appearance: none; }
/* -- only with JavaScript on (app.js puts js-on on <html>) -- */
.js-only { display: none; }
html.js-on .js-only { display: inline-block; }

/* -- lists -- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid #e3e8ef; border-bottom: 1px solid var(--line); padding: .85rem 0; }
.list > li:last-child { border-bottom: 0; }
.rowlink { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-decoration: none; color: inherit; min-height: 44px; }
.rowlink .grow { -webkit-flex: 1; flex: 1; min-width: 0; }
.rowlink .chev { color: #7b8698; color: var(--muted); margin-left: .6rem; font-size: 1.3rem; line-height: 1; }
.rowlink .tag { margin-left: .5rem; }
a.rowlink:hover b { color: #1f73d1; color: var(--accent); }
.empty { text-align: center; color: #7b8698; color: var(--muted); padding: 2rem 1rem; }

/* -- label / value column (the left side of a customer or a job): small capital label, the value under it -- */
.kv { margin: 0; }
.kv dt { margin: 1.05rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7b8698; color: var(--muted); }
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: .25rem 0 0; color: #2b3445; color: var(--ink); word-wrap: break-word; }

/* -- two-column pages: .cols = page + a side panel on the right (Today's tasks), .split = a profile on the left -- */
.cols > *, .split > * { min-width: 0; }
@media (min-width: 1180px) {
  .cols { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; }
  .cols > .col-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
  .cols > .col-side { -webkit-flex: 0 0 340px; flex: 0 0 340px; margin-left: 1.25rem; }
}
@media (min-width: 900px) {
  .split { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; }
  .split > .split-side { -webkit-flex: 0 0 300px; flex: 0 0 300px; margin-right: 1.25rem; }
  .split > .split-main { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
}

/* -- progress steps (Quote → Booked → On site → Picked up) -- */
.stepper { display: -webkit-flex; display: flex; list-style: none; margin: .2rem 0 1.3rem; padding: 0; }
.stepper li { position: relative; -webkit-flex: 1; flex: 1; text-align: center; font-size: .86rem; font-weight: 600; color: #7b8698; color: var(--muted); padding-top: 34px; min-width: 0; }
.stepper li::before { content: ""; box-sizing: border-box; position: absolute; top: 4px; left: 50%; margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; background: #fff; background: var(--card);
  border: 3px solid #cfd6e0; border: 3px solid var(--line2); z-index: 1; }
.stepper li::after { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 3px; background: #e3e8ef; background: var(--line); }
.stepper li:first-child::after { display: none; }
.stepper li.done::before { background: #1f73d1; background: var(--accent); border-color: #1f73d1; border-color: var(--accent); }
.stepper li.done::after, .stepper li.on::after { background: #1f73d1; background: var(--accent); }
.stepper li.on { color: #1f73d1; color: var(--accent); }
.stepper li.on::before { background: #1f73d1; background: var(--accent); border-color: #fff; border-color: var(--card); box-shadow: 0 0 0 3px #1f73d1, 0 0 0 7px #e8f1fc; }
.stepper li.cx { color: #c53030; color: var(--err); }

/* -- timeline: a rail with rings (out = indigo, back = teal), as Rentopian's driver stops -- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl > li { position: relative; padding: .1rem 0 1.15rem 2.6rem; }
.tl > li::before { content: ""; position: absolute; left: 11px; top: .2rem; bottom: 0; width: 2px; background: #e3e8ef; background: var(--line); }
.tl > li:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: .1rem; width: 24px; height: 24px; border-radius: 50%; background: #fff; background: var(--card); border: 6px solid #4f53cf; border-color: var(--out); z-index: 1; }
.tl-dot.back { border-color: #0d8a7f; border-color: var(--back); }
.tl-dot.done { background: #17803d; border-color: #e3f5ea; }
.tl-dot.dim { border-color: #cfd6e0; }

/* -- forms -- */
.field { margin-bottom: .95rem; }
.field > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .32rem; color: #4a5568; color: var(--ink2); }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid #cfd6e0; border: 1px solid var(--line2); border-radius: 4px;
  background: #fff; background-color: var(--field); color: #2b3445; color: var(--ink); -webkit-appearance: none; }
input[type=color] { padding: .2rem; }
input.sr:not([type=checkbox]):not([type=radio]) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
select { background-image: linear-gradient(45deg, transparent 50%, #7b8698 50%), linear-gradient(135deg, #7b8698 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #1f73d1; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 115, 209, .18); }
input[type=checkbox]:focus, input[type=radio]:focus { outline: 2px solid #1f73d1; outline-offset: 1px; box-shadow: none; }
input[type=number] { text-align: right; }
input::placeholder, textarea::placeholder { color: #9aa4b5; }
.check { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; margin: .35rem 0; min-height: 30px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px .6rem 0 0; -webkit-flex: none; flex: none; accent-color: #1f73d1; }
.inline { display: inline-block; margin: 0 .2rem .3rem 0; vertical-align: middle; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */
.row2 > *:not(.field) { margin-bottom: .2rem; }
@media (min-width: 700px) {
  .row2, .row3 { display: -webkit-flex; display: flex; }
  .row2 > *, .row3 > * { -webkit-flex: 1; flex: 1; margin-right: 1rem; min-width: 0; }
  .row2 > *:last-child, .row3 > *:last-child { margin-right: 0; }
}

/* -- buttons: white with a grey edge; green for the main action; outlined red for the dangerous one -- */
.btn { display: inline-block; min-height: 42px; padding: .52rem 1.05rem; border: 1px solid #cfd6e0; border: 1px solid var(--line2); border-radius: 4px; background: #fff; background: var(--card); color: #2b3445; color: var(--ink);
  text-decoration: none; cursor: pointer; vertical-align: middle; line-height: 1.5; text-align: center; font-weight: 600; font-size: .94rem; -webkit-appearance: none; }
.btn:hover { background: #f5f8fc; background: var(--hover); }
.btn .ic { width: 18px; height: 18px; margin-right: .35rem; vertical-align: -4px; }
.btn-primary, .btn-go { background: #12904a; background: var(--go); color: #fff; border-color: transparent; }
.btn-primary:hover, .btn-go:hover { background: #0e7a3e; background: var(--go-dark); }
.btn-blue { background: #1f73d1; background: var(--accent); color: #fff; border-color: transparent; }
.btn-blue:hover { background: #1a63b6; }
.btn-soft { background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); border-color: transparent; }
.btn-soft:hover { background: #dbe9fa; }
.btn-dark { background: #2b2e35; background: var(--head); color: #fff; border-color: transparent; }
.btn-dark:hover { background: #3a3e47; }
.btn-danger { color: #c53030; color: var(--err); border-color: #e9a6a6; background: #fff; background: var(--card); }
.btn-danger:hover { background: #fdecec; background: var(--err-bg); }
.btn-sm { min-height: 34px; padding: .28rem .7rem; font-size: .85rem; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-block { display: block; width: 100%; }
.btn-big { min-height: 52px; font-size: 1.05rem; padding: .75rem 1.4rem; }
.btn[disabled] { opacity: .45; cursor: default; }
.actions { margin-top: .6rem; }
.actions .btn, .actions form { margin: 0 .45rem .5rem 0; }
.btnrow { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -.25rem; }
.btnrow > * { margin: .25rem; }

/* -- messages -- */
.flash { padding: .8rem 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 4px solid; }
.flash-ok { background: #e3f5ea; background: var(--ok-bg); color: #17803d; color: var(--ok); border-left-color: #2fa35a; }
.flash-err { background: #fdecec; background: var(--err-bg); color: #c53030; color: var(--err); border-left-color: #e04848; }
.flash-info { background: #e7f0fc; background: var(--info-bg); color: #1f62b5; color: var(--info); border-left-color: #1f73d1; }
.flash-warn { background: #fff4d6; background: var(--warn-bg); color: #9a6400; color: var(--warn); border-left-color: #f5b400; }
.flash a { color: inherit; font-weight: 600; }

/* -- day arrows (‹ day ›) -- */
.daynav { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 1rem; }
.daynav h1 { margin: 0; font-size: 1.3rem; text-align: center; -webkit-flex: 1; flex: 1; }
.daynav h1 small { display: block; font-size: .82rem; font-weight: 400; color: #7b8698; color: var(--muted); }
.daynav .btn { min-width: 44px; }
.steps { font-size: .85rem; color: #7b8698; color: var(--muted); margin-bottom: .6rem; }

/* ================================================================ the login pages (body.site) ============== */
body.site { background: #eef1f6; }
.site-top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; max-width: 1100px; margin: 0 auto; padding: 1rem; padding-top: calc(1rem + env(safe-area-inset-top)); }
.site-top .logo { font-weight: 800; font-size: 1.15rem; color: #2b2e35; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; }
.site-foot { text-align: center; color: #7b8698; font-size: .85rem; padding: 2rem 1rem; }

/* ================================================================ print ==================================== */
@media print {
  body.app .side, body.app .top, body.app .tabbar, body.app .nav { display: none !important; }
  body.app .frame { margin-left: 0 !important; }
  body.app { background: #fff !important; }
  body.app .main { padding: 0 !important; max-width: none; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ================================================================ dark mode ================================ */
/* The token swap. Screen sheets that use the tokens need nothing more; literal light colours need a line
   in their own sheet, in BOTH blocks (the device setting; the Account page choice). Print is always light. */
@media screen and (prefers-color-scheme: dark) {
  html:not(.theme-light) body.app { --bg: #0f1621; --card: #18212e; --field: #111a26; --hover: #1e2938; --ink: #e6ebf2; --ink2: #c3ccd9; --muted: #95a1b4; --line: #2a3545; --line2: #3a4658;
    --head: #1f2228; --brand: #a8392c; --brand-ink: #f08a7c; --accent: #6aa8ee; --soft: #1a2c44; --go: #1f9d55; --go-dark: #188547; --ok: #7fd49b; --ok-bg: #15301f; --err: #f19a9a; --err-bg: #3a1d20;
    --info: #8cbcf2; --info-bg: #16283d; --warn: #f0c674; --warn-bg: #3a2f17; --out: #a5a8f5; --out-bg: #23244a; --back: #5fd3c4; --back-bg: #12322f; --shadow: 0 0 0 1px #2a3545;
    background: #0f1621; color: #e6ebf2; color-scheme: dark; }
  html:not(.theme-light) body.app .top { background-color: #a8392c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C130 8 240 66 380 32C470 12 570 14 640 0H0z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(90deg, #9c3428 0%, #b5432f 100%); }
  html:not(.theme-light) body.app .side { box-shadow: 1px 0 0 #2a3545; }
  html:not(.theme-light) body.app .side-brand::after { opacity: .9; }
  html:not(.theme-light) body.app .bell b { box-shadow: 0 0 0 2px #a8392c; }
  html:not(.theme-light) body.app .tag { background: #273242; color: #c3ccd9; }
  html:not(.theme-light) body.app .st-req { background: #3a2f17; color: #f0c674; }
  html:not(.theme-light) body.app .st-ok { background: #16283d; color: #8cbcf2; }
  html:not(.theme-light) body.app .st-here { background: #23244a; color: #b4b6f7; }
  html:not(.theme-light) body.app .st-done { background: #15301f; color: #7fd49b; }
  html:not(.theme-light) body.app .st-no { background: #3a1d20; color: #f19a9a; }
  html:not(.theme-light) body.app .st-cx { background: #222b38; color: #95a1b4; }
  html:not(.theme-light) body.app .btn-danger { border-color: #6b3438; }
  html:not(.theme-light) body.app .btn-soft:hover { background: #213753; }
  html:not(.theme-light) body.app .btn-dark { background: #2a3a52; }
  html:not(.theme-light) body.app .tile.warn b { color: #f0c674; }
  html:not(.theme-light) body.app .tile.warn { box-shadow: inset 0 3px 0 #f5b400, 0 0 0 1px #2a3545; }
  html:not(.theme-light) body.app .tile.bad { box-shadow: inset 0 3px 0 #e04848, 0 0 0 1px #2a3545; }
  html:not(.theme-light) body.app a.tile:hover { box-shadow: 0 0 0 1px #3a4658; }
  html:not(.theme-light) body.app select { background-image: linear-gradient(45deg, transparent 50%, #95a1b4 50%), linear-gradient(135deg, #95a1b4 50%, transparent 50%); }
  html:not(.theme-light) body.app input::placeholder, html:not(.theme-light) body.app textarea::placeholder { color: #6f7b8e; }
  html:not(.theme-light) body.app .tabbar { box-shadow: none; }
  html:not(.theme-light) body.app .card-foot { background: #1b2533; }
  html:not(.theme-light) body.app .table thead.dark th { background: #273242; }
  html:not(.theme-light) body.app .stepper li.on::before { box-shadow: 0 0 0 3px #6aa8ee, 0 0 0 7px #1a2c44; }
  html:not(.theme-light) body.app .seg a.on, html:not(.theme-light) body.app .btn-blue { background: #2a65a0; color: #fff; }
  html:not(.theme-light) body.app .ulabel { background: #2c4a6e; color: #fff; }
  html:not(.theme-light) body.app .ulabel-repair { background: #8f2f33; }
  html:not(.theme-light) body.app .ulabel-retired { background: #4a5568; }
}
@media screen {
  html.theme-dark body.app { --bg: #0f1621; --card: #18212e; --field: #111a26; --hover: #1e2938; --ink: #e6ebf2; --ink2: #c3ccd9; --muted: #95a1b4; --line: #2a3545; --line2: #3a4658;
    --head: #1f2228; --brand: #a8392c; --brand-ink: #f08a7c; --accent: #6aa8ee; --soft: #1a2c44; --go: #1f9d55; --go-dark: #188547; --ok: #7fd49b; --ok-bg: #15301f; --err: #f19a9a; --err-bg: #3a1d20;
    --info: #8cbcf2; --info-bg: #16283d; --warn: #f0c674; --warn-bg: #3a2f17; --out: #a5a8f5; --out-bg: #23244a; --back: #5fd3c4; --back-bg: #12322f; --shadow: 0 0 0 1px #2a3545;
    background: #0f1621; color: #e6ebf2; color-scheme: dark; }
  html.theme-dark body.app .top { background-color: #a8392c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C130 8 240 66 380 32C470 12 570 14 640 0H0z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(90deg, #9c3428 0%, #b5432f 100%); }
  html.theme-dark body.app .side { box-shadow: 1px 0 0 #2a3545; }
  html.theme-dark body.app .side-brand::after { opacity: .9; }
  html.theme-dark body.app .bell b { box-shadow: 0 0 0 2px #a8392c; }
  html.theme-dark body.app .tag { background: #273242; color: #c3ccd9; }
  html.theme-dark body.app .st-req { background: #3a2f17; color: #f0c674; }
  html.theme-dark body.app .st-ok { background: #16283d; color: #8cbcf2; }
  html.theme-dark body.app .st-here { background: #23244a; color: #b4b6f7; }
  html.theme-dark body.app .st-done { background: #15301f; color: #7fd49b; }
  html.theme-dark body.app .st-no { background: #3a1d20; color: #f19a9a; }
  html.theme-dark body.app .st-cx { background: #222b38; color: #95a1b4; }
  html.theme-dark body.app .btn-danger { border-color: #6b3438; }
  html.theme-dark body.app .btn-soft:hover { background: #213753; }
  html.theme-dark body.app .btn-dark { background: #2a3a52; }
  html.theme-dark body.app .tile.warn b { color: #f0c674; }
  html.theme-dark body.app .tile.warn { box-shadow: inset 0 3px 0 #f5b400, 0 0 0 1px #2a3545; }
  html.theme-dark body.app .tile.bad { box-shadow: inset 0 3px 0 #e04848, 0 0 0 1px #2a3545; }
  html.theme-dark body.app a.tile:hover { box-shadow: 0 0 0 1px #3a4658; }
  html.theme-dark body.app select { background-image: linear-gradient(45deg, transparent 50%, #95a1b4 50%), linear-gradient(135deg, #95a1b4 50%, transparent 50%); }
  html.theme-dark body.app input::placeholder, html.theme-dark body.app textarea::placeholder { color: #6f7b8e; }
  html.theme-dark body.app .tabbar { box-shadow: none; }
  html.theme-dark body.app .card-foot { background: #1b2533; }
  html.theme-dark body.app .table thead.dark th { background: #273242; }
  html.theme-dark body.app .stepper li.on::before { box-shadow: 0 0 0 3px #6aa8ee, 0 0 0 7px #1a2c44; }
  html.theme-dark body.app .seg a.on, html.theme-dark body.app .btn-blue { background: #2a65a0; color: #fff; }
  html.theme-dark body.app .ulabel { background: #2c4a6e; color: #fff; }
  html.theme-dark body.app .ulabel-repair { background: #8f2f33; }
  html.theme-dark body.app .ulabel-retired { background: #4a5568; }
}

/* Search box above a long pick-list (select[data-find], public/app.js (f)) — office and driver app */
input.sel-find.sel-find { display: block; width: 100%; margin: 0 0 .35rem; padding-left: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .6rem 50%;
  background-size: 16px 16px; background-color: var(--field, #fff); }
.le input.sel-find.sel-find { font-size: .9rem; }

/* Companies inside one business (src/companies.js, migration 0012): All · A · B tabs, the company tag, the company choice */
.co-tabs { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 .9rem; }
.co-tabs a { font-weight: 600; }
.co-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; }
.tag.co-tag { color: #fff; margin-left: .4rem; font-size: .72rem; vertical-align: .15em; white-space: nowrap; }
h1 .tag.co-tag { font-size: .8rem; }
.co-choice .co-opts { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.co-choice .co-opt { margin: 0 1.4rem .3rem 0; }

/* Accounting (/app/accounting, src/routes/accounting.js) */
.acc-head { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.acc-head .hint { margin-left: auto; }
.acc-table .num { text-align: right; white-space: nowrap; }
.acc-table tfoot th { border-top: 2px solid #e3e8ef; border-top-color: var(--line); }
.acc-now td { font-weight: 700; }
.acc-late { color: #c0392b; font-weight: 700; }
.acc-owe .rowlink, .acc-pay .rowlink { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.acc-owe small, .acc-pay small { display: block; color: #7b8698; color: var(--muted); }
.acc-cols .card { margin-bottom: 1.25rem; }