/* Gold Choice Rentals — the base stylesheet (started from the Light It Up app): tokens, the page frame (menu,
   top bar, tab bar), and the shared building blocks every screen uses. Rentopian-style layout (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, icon tabs, quiet tables, tinted status pills) in Stage's colours from its logo
   (docs/brand/stage-productions-logo.png): blue #1b5680 and dark navy. Blue (#1f73d1) is the colour of links
   and the lit tab; 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: #16334d;        /* the brand block, dark buttons (dark navy) */
  --brand: #1b5680;       /* the top bar (the logo's blue) */
  --brand2: #2a72a6;
  --brand-ink: #1b5680;   /* brand 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: #1b5680; 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, #1b5680 0%, #2a72a6 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(10, 40, 70, .25); }
.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: #1b5680; border-radius: 999px; font-size: .68rem; line-height: 1; padding: .2rem .36rem; font-weight: 800; box-shadow: 0 0 0 2px #1b5680; }
.top .btn-book { background: #fff; color: #1b5680; 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: #eaf2f8; }
.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: #16334d; 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='%2316334d' fill-opacity='.35'/%3E%3Cpath d='M0 0h240v2C196 20 128-2 66 12C38 18 16 18 0 14z' fill='%2316334d'/%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: #1b5680; 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(27, 86, 128, .4); }
body.app .main { padding-bottom: 96px; }

/* -- phone shell (client video Oct 19 2026: "the bar at the bottom moves along when I scroll"). On touch screens without
   the side menu the page scrolls inside .frame instead of the whole document: iPhone Safari then never slides its own
   toolbars under the page, so the fixed tab bar has nothing to drift with (the iOS 26 WebKit bug that leaves fixed bars
   off the bottom after the keyboard was open). Browsers without (hover: none) keep plain page scrolling. While typing,
   the bar steps aside (html.kb-open, app.js). app.js also keeps the place on back / reload. */
@media screen and (max-width: 1023px) and (hover: none) {
  html.shell, html.shell body.app { height: 100%; overflow: hidden; }
  html.shell body.app > .frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  html.kb-open .tabbar, html.kb-open .install-bar { display: none; }
  html.kb-open body.app .main { padding-bottom: 1.5rem; }
}

.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: #1b5680; 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: #16334d; 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: #16334d; 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: #16334d; 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: #174a6e; --brand-ink: #7fb3dd; --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: #174a6e; 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, #14415f 0%, #1d5a85 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 #174a6e; }
  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: #174a6e; --brand-ink: #7fb3dd; --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: #174a6e; 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, #14415f 0%, #1d5a85 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 #174a6e; }
  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; }
}