/* Tecon HQ — staff app. Hand-rolled, no framework. Palette from colour-palette.md. */
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --red: #ED1C24; --red-ink: #C8161D; --ink: #1A1A1A; --charcoal: #333; --grey-600: #666; --grey-500: #808080;
  --grey-300: #B3B3B3; --grey-100: #E6E6E6; --mist: #F5F5F4; --paper: #fff; --teal: #11AEC0;
  --st-new: #808080; --st-scheduled: #11AEC0; --st-in_progress: #ED1C24; --st-completed: #1A1A1A;
  --font: Montserrat, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --r: 4px; --shadow: 0 6px 24px rgba(0,0,0,.12);
  /* Adjusted time: amber, apart from the red brand colour and the red job bars. */
  --adj-ink: #9A4A00; --adj-bg: #FDEBC8; --adj-bg-soft: #FFF9EE; --adj-line: #F2C987;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--font); color: var(--charcoal); background: var(--mist); }
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: var(--red-ink); }
.muted { color: var(--grey-600); } .small { font-size: .85rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Buttons + forms */
.btn { font: inherit; font-weight: 700; border: 1px solid var(--grey-300); background: #fff; color: var(--ink); padding: .5rem .9rem; border-radius: var(--r); cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn { min-height: 2.5rem; justify-content: center; white-space: nowrap; }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; min-height: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Line icons from icon() in admin.js: sized to the text beside them, drawn in its colour. */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.btn .ic { margin: 0 -.05rem; }
/* Shared action buttons (saveButton, deleteButton, printButton, pdfButton, copyButton in admin.js).
   Save is green, Delete a small red bin, Print one teal everywhere (white text passes AA on all three). */
:root { --save: #1e7a3c; --save-ink: #17602f; --print: #0b6b77; --print-ink: #08525b; }
.btn-save { background: var(--save); border-color: var(--save); color: #fff; }
.btn-save:hover { background: var(--save-ink); border-color: var(--save-ink); }
.btn-delete { color: var(--red-ink); border-color: #f0b4b6; background: #fff; padding: .25rem .6rem; font-size: .8rem; min-height: 2rem; }
.btn-delete:hover { border-color: var(--red); background: #fff5f5; }
.btn-print { background: var(--print); border-color: var(--print); color: #fff; }
.btn-print:hover { background: var(--print-ink); border-color: var(--print-ink); }
.btn-pdf { color: var(--print); border-color: var(--print); background: #fff; }
.btn-pdf:hover { color: var(--print-ink); border-color: var(--print-ink); background: #eef8f9; }
.btn-copy { padding: .15rem .45rem; font-size: .75rem; min-height: 1.75rem; gap: .25rem; color: var(--charcoal); border-color: var(--grey-100); vertical-align: middle; }
.btn-copy:hover { border-color: var(--grey-500); }
.link { background: none; border: 0; padding: 0; color: var(--grey-300); font: inherit; cursor: pointer; text-decoration: underline; }
label { display: grid; gap: .3rem; align-content: start; font-size: .85rem; font-weight: 700; color: var(--ink); }
label > .muted.small { font-weight: 400; }
input, select, textarea { font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid var(--grey-300); border-radius: var(--r); background: #fff; color: var(--ink); width: 100%; }
input:not([type=checkbox]):not([type=radio]), select { height: 2.5rem; }
input[type=file] { padding: .4rem .5rem; }
textarea { min-height: 90px; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
.field-error, .form-error { color: var(--red-ink); font-size: .8rem; font-weight: 700; margin: 0; }
.field-error:empty, .form-error:empty { display: none; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; margin-bottom: 1rem; }
form > h2, form > h3 { margin-bottom: 1rem; }
form > .form-error { margin-bottom: .75rem; }
.form-grid .full { grid-column: 1 / -1; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.toolbar label { min-width: 150px; }
.toolbar label.grow { flex: 0 1 300px; }
.spacer { flex: 1; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--ink) linear-gradient(135deg, #1A1A1A 60%, #2a0d0e); padding: 1rem; }
.login-card { background: #fff; padding: 2.25rem; width: min(420px, 100%); border-top: 6px solid var(--red); display: grid; gap: 1rem; border-radius: var(--r); box-shadow: var(--shadow); }
.login-logo { width: 220px; height: auto; }
/* Sign-up and password links: the page a link opens (like sign in, with room for a few details). */
.join-card { width: min(560px, 100%); }
.join-card h1, .join-card p { margin: 0; }
.join-card .form-grid { margin-bottom: .25rem; }
.join-card input[readonly] { background: var(--mist); color: var(--charcoal); }
.join-form { display: grid; gap: 1rem; }
.join-form .form-grid .muted.small { font-weight: 400; }
.join-other { display: grid; gap: .6rem; justify-items: start; margin: 0; }
@media (max-width: 640px) {
  .join-card { padding: 1.5rem 1.1rem; }
  .join-card input:not([type=checkbox]) { font-size: 16px; height: 3rem; } /* iOS zooms into smaller fields */
  .join-card .btn-lg { width: 100%; }
}
/* The admin's side: a link ready to send, the choice on an employee's page, the welcome after signing up. */
.link-box { display: flex; gap: .5rem; align-items: center; }
.link-box input { flex: 1; min-width: 0; font-size: .85rem; background: var(--mist); }
.link-open { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: 0; }
.link-open p { margin: 0; }
.choice-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.choice { position: relative; display: grid; gap: .6rem; align-content: start; justify-items: start; border: 1px solid var(--grey-100); border-radius: var(--r); padding: 1.1rem 1rem 1rem; }
.choice.recommended { border: 2px solid var(--print); }
.choice h3 { display: flex; gap: .45rem; align-items: center; margin: 0; }
.choice p { margin: 0; }
.choice .form-grid { width: 100%; margin: 0; grid-template-columns: 1fr; gap: .6rem; }
.choice-tag { position: absolute; top: -.7rem; left: .75rem; background: var(--print); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .5rem; border-radius: 999px; }
.welcome-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.welcome-tips li { display: flex; gap: .75rem; align-items: flex-start; }
.welcome-tips li > span:last-child { padding-top: .3rem; }
.welcome-ic { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fde8e8; color: var(--red-ink); }
.welcome, .link-ready { display: grid; gap: 1rem; }
.welcome h2, .link-ready h2, .welcome p, .link-ready p { margin: 0; }
.links-card td .actions { flex-wrap: wrap; }

/* Shell */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--ink); color: #fff; display: flex; flex-direction: column; padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem 1.25rem; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .1em; border-bottom: 1px solid #333; }
.brand img { width: 150px; height: auto; } .brand span { color: var(--red); font-size: .8rem; }
.nav { display: grid; padding: 1rem 0; flex: 1; align-content: start; }
.nav a { color: var(--grey-300); text-decoration: none; padding: .65rem 1.25rem; border-left: 4px solid transparent; font-weight: 700; display: flex; align-items: center; gap: .7rem; }
.nav a .ic { color: var(--grey-500); }
.nav a:hover .ic, .nav a[aria-current="page"] .ic { color: var(--red); }
.nav a:hover { color: #fff; background: #222; }
.nav a[aria-current="page"] { color: #fff; border-left-color: var(--red); background: #262626; }
.nav .count { margin-left: auto; background: var(--red); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .5rem; line-height: 1.6; }
.me { padding: 1rem 1.25rem 0; border-top: 1px solid #333; display: grid; gap: .35rem; justify-items: start; font-size: .85rem; }
.me .link:hover { color: #fff; }
.me .link { display: inline-flex; align-items: center; gap: .4rem; }
.badge { display: inline-block; margin-left: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: .05rem .45rem; border-radius: 999px; background: #333; color: #fff; }
.main { padding: 2rem clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.main:focus { outline: none; }
.topbar, .scrim { display: none; }

.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; position: relative; padding-bottom: .35rem; }
/* Buttons that belong together (Print + Download PDF) wrap to the next line as a pair. */
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--red); }
.card { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); padding: 1.25rem; margin-bottom: 1rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--grey-100); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); background: #fafafa; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: #fff7f7; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; color: var(--ink); background: #fafafa; }
.empty { padding: 2rem; text-align: center; color: var(--grey-600); }

/* Status */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, var(--grey-500)); }
.status.new { --c: var(--st-new); } .status.scheduled { --c: var(--st-scheduled); } .status.in_progress { --c: var(--st-in_progress); } .status.completed { --c: var(--st-completed); }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { font: inherit; font-size: .8rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--grey-300); background: #fff; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Timeline / diary */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.timeline li { border-left: 3px solid var(--grey-100); padding: .1rem 0 .1rem .75rem; }
.timeline li.status-ev { border-left-color: var(--red); }
.entry { border: 1px solid var(--grey-100); border-radius: var(--r); padding: .75rem .9rem; background: #fff; margin-bottom: .6rem; }
.entry header { display: flex; gap: .35rem .6rem; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--grey-600); margin-bottom: .4rem; }
.entry header .entry-edit { margin-left: auto; }
.entry form { margin-top: .5rem; }
.title-link { color: var(--ink); text-decoration: none; }
.title-link:hover { color: var(--red-ink); text-decoration: underline; }
/* A job, employee or invoice named on another page: one click opens its page. */
.job-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--grey-300); }
.job-link:hover { color: var(--red-ink); border-bottom-color: currentColor; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
/* A phone number, email or address with its own buttons: tap to call or write, Copy, open a map. */
.contact { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; }
.contact > a { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; color: inherit; overflow-wrap: break-word; }
.contact > a[href^="tel:"] { white-space: nowrap; }
td .contact wbr { display: none; } /* in a list the email stays on one line (Chrome breaks at a <wbr> even under nowrap) */
.contact > a .ic { color: var(--grey-500); }
.contact > a:hover { color: var(--red-ink); }
.contact > a:hover .ic { color: currentColor; }
.btn-copy.icon-only { padding: 0; width: 1.75rem; }
/* An icon-only copy button names what it copies in a tip that shows at once on mouse hover or keyboard
   focus (a title waits a second and never shows on a phone), and says Copied for a moment after a tap.
   The tip only exists while it shows, so a hidden one can't widen the page; it opens leftwards, over the
   number or email it sits after. */
.btn-copy[data-tip] { position: relative; }
.btn-copy[data-tip]::after { position: absolute; right: 0; bottom: calc(100% + 6px); padding: .2rem .5rem; border-radius: 6px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; z-index: 5; }
.btn-copy[data-tip]:focus-visible::after, .btn-copy.copied[data-tip]::after { content: attr(data-tip); }
@media (hover: hover) { .btn-copy[data-tip]:hover::after { content: attr(data-tip); } }
.btn-copy.copied, .map-copy.copied, .btn-copy.copied:hover, .map-copy.copied:hover { color: #1e7a3c; border-color: #1e7a3c; background: #eaf6ee; }
.btn-copy.copied[data-tip]::after { background: #1e7a3c; }
.client-addr .addr { margin: 0; }
/* Clients list: the directions buttons as one row of small chips under the address, wrapping only when narrow. */
.client-addr { min-width: 19.5rem; }
.client-addr .addr-go { max-width: 21rem; gap: .3rem; }
.client-addr .addr-go .btn { flex: 0 0 auto; max-width: none; min-height: 2.25rem; padding: .2rem .55rem; font-size: .75rem; white-space: nowrap; }
.card > h2 { margin-bottom: 1rem; }
.card > :last-child { margin-bottom: 0; }
.quote { white-space: pre-wrap; margin: 0; padding: .75rem 1rem; background: var(--mist); border-radius: var(--r); }
.entry header strong { color: var(--ink); }
.entry p { margin: 0; white-space: pre-wrap; }
.pill { font-size: .72rem; font-weight: 700; background: var(--mist); border-radius: 999px; padding: 0 .5rem; }
.pill.time { background: #e8f7f9; color: #0b6b77; }
.pill { display: inline-block; line-height: 1.6; }
.pill.st-new { background: #fde8e8; color: var(--red-ink); }
.pill.st-converted { background: #e6f4ea; color: #1e6b35; }

/* Photos */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem .5rem; }
.gallery:empty { display: none; }
.photo { margin: 0; min-width: 0; }
.photo-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--grey-100); background: var(--mist); }
.photo figcaption { margin-top: .3rem; display: grid; gap: .1rem; line-height: 1.35; }
.photo-cap { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.photo figcaption .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-actions { margin-top: 1rem; }
.photo-adds { display: grid; gap: .75rem; max-height: 60vh; overflow: auto; }
.photo-add { display: flex; gap: .75rem; align-items: flex-start; }
.photo-thumb { flex: none; width: 96px; height: 96px; border-radius: var(--r); background: var(--mist); overflow: hidden; }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-add.failed .photo-thumb { box-shadow: inset 0 0 0 2px var(--red); }
textarea.photo-note { min-height: 0; }
.photo-add .field-error { margin-top: .3rem; }
.photo-add .btn-sm { margin-top: .4rem; }
.viewer { margin: 0; display: grid; gap: .75rem; }
.viewer img { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; border-radius: var(--r); background: var(--mist); }
.viewer-note p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-note p:not(.muted) { color: var(--ink); }
.viewer figcaption > p { margin: .25rem 0 0; }
.cam-view { display: block; width: 100%; max-height: 60vh; background: #000; border-radius: var(--r); }

/* Scheduler */
.sched { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; }
.unscheduled { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); padding: .75rem; align-self: start; max-height: 75vh; overflow: auto; }
.unscheduled .job-card { position: static; display: block; width: 100%; margin-bottom: .5rem; }
.sched > * { min-width: 0; }
.cal { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); overflow: auto; max-height: 75vh; }
.cal-grid { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(120px, 1fr)); position: relative; min-width: calc(56px + var(--days) * 120px); }
.cal-head { position: sticky; top: 0; z-index: 3; background: #fafafa; border-bottom: 1px solid var(--grey-100); padding: .5rem; font-size: .8rem; font-weight: 700; text-align: center; }
.cal-head.today { color: var(--red-ink); box-shadow: inset 0 -3px 0 var(--red); }
.cal-times { grid-row: 2; grid-column: 1; }
.cal-times div { height: var(--slot); font-size: .72rem; font-weight: 700; color: var(--grey-600); text-align: right; padding-right: .45rem; transform: translateY(-.55em); white-space: nowrap; }
.cal-times div:first-child { transform: none; }
/* Hour lines (every second row) darker than half-hour lines, so a card's place reads at a glance. */
.cal-col { grid-row: 2; position: relative; border-left: 1px solid var(--grey-100);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot) * 2 - 1px), #cfcfcf calc(var(--slot) * 2 - 1px) calc(var(--slot) * 2)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot) - 1px), #efefef calc(var(--slot) - 1px) var(--slot)); }
.cal-col.today { background-color: #fffafa; }
.cal-col.drop { background-color: #fff3f3; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.cal-guide { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ink); z-index: 4; pointer-events: none; }
.cal-guide span { position: absolute; right: 3px; top: -1.45rem; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 3px; }
.job-card { position: absolute; left: 3px; right: 3px; border-radius: var(--r); padding: .3rem .45rem; font-size: .75rem; line-height: 1.25; color: #fff; background: var(--c, var(--grey-500)); overflow: hidden; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.2); border: 0; border-top: 3px solid rgba(0,0,0,.28); text-align: left; font-family: inherit; width: auto; display: flex; flex-direction: column; gap: .05rem; }
.job-card:active { cursor: grabbing; }
.job-card.new { --c: var(--st-new); } .job-card.scheduled { --c: var(--st-scheduled); } .job-card.in_progress { --c: var(--st-in_progress); } .job-card.completed { --c: var(--st-completed); }
.job-card strong, .job-card .jc-line, .job-card .jc-time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.job-card .jc-time { white-space: normal; }
.job-card.lane { padding: .25rem .3rem; font-size: .7rem; }
.job-card.lane .jc-client { display: none; }
.job-card.lane strong { -webkit-line-clamp: 4; overflow-wrap: anywhere; }
.job-card.lane-tight { padding: .2rem .2rem; font-size: .66rem; }
.job-card .jc-ref { display: none; }
.job-card.lane-tight .t-mer, .job-card.lane-tight .t-end, .job-card.lane-tight .jc-line, .job-card.lane-tight strong { display: none; }
.job-card.lane-tight { padding: .2rem .12rem; }
.job-card.lane-tight .jc-ref { display: block; font-size: .6rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.job-card .jc-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.job-card strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.job-card .jc-line { opacity: .92; }
.job-card.short strong { -webkit-line-clamp: 1; }
.job-card.short .jc-client { display: none; }
.unscheduled .job-card { display: flex; }
.legend { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; font-size: .8rem; margin-top: .75rem; }

/* Timesheets */
.ts-cell { font: inherit; color: inherit; background: none; border: 0; padding: .1rem .3rem; margin: -.1rem -.3rem; cursor: pointer; border-radius: 3px; font-variant-numeric: tabular-nums; }
span.ts-cell { cursor: default; margin: 0; padding: 0; }
.ts-cell:hover { background: var(--mist); }
.ts-cell.adjusted { color: var(--adj-ink); font-weight: 700; }
.ts-cell.open::after { content: " ●"; color: #1e9e4a; }

/* Modal + toast */
.modal { border: 0; border-radius: var(--r); padding: 0; width: min(640px, 94vw); box-shadow: var(--shadow); border-top: 5px solid var(--red); }
.modal::backdrop { background: rgba(26,26,26,.6); }
#modal-body { padding: 1.5rem; display: grid; gap: 1rem; }
.toast { position: fixed; bottom: 1.25rem; right: 1.25rem; max-width: calc(100vw - 2rem); display: flex; gap: .9rem; align-items: center; background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--r); border-left: 4px solid var(--red); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: .25s; pointer-events: none; z-index: 50; margin: 0; }
.toast.show { opacity: 1; transform: none; }
.toast.has-action.show { pointer-events: auto; }
.toast-action { flex: none; font: inherit; font-weight: 700; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.55); border-radius: var(--r); padding: .3rem .75rem; min-height: 2.25rem; cursor: pointer; }
.toast-action:hover { background: rgba(255,255,255,.12); }
.notice { background: #fff4e5; border-left: 4px solid #e8a33c; padding: .75rem 1rem; margin-bottom: 1rem; border-radius: var(--r); }

/* Avatars + staff cells */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--av, var(--grey-500)); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.avatar.lg { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }
.staff { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; white-space: normal; }
a.staff:hover span:last-child { text-decoration: underline; }
tr.inactive td { opacity: .6; }
.emp-head { align-items: center; }
.emp-head h1::after { display: none; }
.emp-head p { margin: .2rem 0 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; font-size: .9rem; }
.facts dt { color: var(--grey-600); font-weight: 700; font-size: .8rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

/* Timesheet grid (Tradify-style) */
.ts-card { padding: 1rem 1.25rem; }
.ts-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ts-title h2 { margin: 0; }
.week-nav { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.week-nav input { width: auto; padding: .4rem .5rem; }
.week-nav .btn { padding: .4rem .8rem; }
.week-nav label { min-width: 0; }
.ts-period { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.ts-period .chip { min-height: 2.25rem; padding: .3rem .85rem; }
.ts-view { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .9rem; }
.ts-opt { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--grey-600); }
.ts-opt select { width: auto; height: 2.25rem; padding: .2rem .5rem; }
.ts-grid { min-width: 820px; }
.ts-grid.one-day { min-width: 0; }
.ts-grid.narrow th.num, .ts-grid.narrow td.num { padding-left: .3rem; padding-right: .3rem; font-size: .82rem; }
.ts-grid.narrow th .wd { display: block; font-size: .65rem; }
.ts-grid.narrow { min-width: calc(24rem + var(--cols, 31) * 2.6rem); }
/* Long periods scroll sideways: the names stay put, and See more keeps to the visible width. */
.ts-wrap { container-type: inline-size; }
.ts-grid.narrow .staff-cell { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--grey-100); }
.ts-grid.narrow thead .staff-cell { background: #fafafa; }
.ts-grid.narrow .ts-toggle-cell { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -1px 0 0 var(--grey-100); }
.ts-grid.narrow thead .ts-toggle-cell { background: #fafafa; }
.ts-grid.narrow .staff-cell { white-space: nowrap; }
.staff-total { display: block; margin-left: 2.6rem; font-size: .8rem; font-weight: 700; color: var(--grey-600); font-variant-numeric: tabular-nums; }
tr.ts-detail > td > * { position: sticky; left: 1rem; width: calc(100cqw - 2rem); box-sizing: border-box; }
.ts-grid td, .ts-grid th { vertical-align: middle; }
.ts-grid th.today, .ts-grid td.today { background: #fff5f5; }
.ts-grid tr.ts-row.is-open td { border-bottom-color: transparent; }
.ts-grid td.num { font-size: .95rem; color: var(--teal); white-space: nowrap; }
.ts-grid td.num strong { color: var(--ink); }
.ts-grid td.num .live-dot { margin: 0 0 0 .3rem; }
.ts-sum { font-variant-numeric: tabular-nums; }
.ts-sum.adjusted { color: var(--adj-ink); font-weight: 700; }
.adj-mark { margin-left: .15rem; font-size: .8em; }
.ts-toggle { min-width: 6rem; justify-content: center; }
tr.ts-detail > td, .ts-detail-solo { background: #fafafa; padding: .75rem 1rem 1rem; }
.ts-detail-solo { border: 1px solid var(--grey-100); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.ts-detail-body h3 { margin: 1rem 0 .5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); }
.ts-jobs { min-width: 560px; }
.ts-sum-line { margin: .75rem 0 0; }
/* One day in See more: heading, timeline, then the same times written out. */
.ts-day { margin-bottom: 1.25rem; }
.ts-day-head { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; margin-bottom: .4rem; font-size: .9rem; }
.ts-day-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; height: var(--tl-h, 4.75rem); background-color: #fff; border: 1px solid var(--grey-100); border-radius: var(--r);
  background-image: linear-gradient(to right, #e3e3e3 1px, transparent 1px); background-size: calc(100% / var(--hours, 24)) 100%; }
.tl-track.h-compact { --tl-h: 2.1rem; } .tl-track.h-standard { --tl-h: 3.3rem; } .tl-track.h-tall { --tl-h: 4.75rem; }
.tl-bar { position: absolute; top: 4px; bottom: 4px; min-width: 6px; background-color: var(--job, var(--red)); color: #fff; border: 0; border-radius: 3px; padding: .2rem .45rem; overflow: hidden; font: inherit; font-size: .75rem; line-height: 1.25; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: .1rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tl-bar:hover, .tl-bar:focus-visible { filter: brightness(1.15); z-index: 2; }
.tl-bar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-more { opacity: .9; font-size: .7rem; }
.h-compact .tl-job, .h-compact .tl-more, .h-standard .tl-more { display: none; }
.tl-bar.open { background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.22) 8px 16px); }
.tl-bar.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 3px dotted #fff; }
.tl-bar.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 3px dotted #fff; }
.tl-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); z-index: 3; pointer-events: none; }
.tl-axis { position: relative; height: 1.15rem; font-size: .7rem; color: var(--grey-600); margin-top: .2rem; }
.tl-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tl-axis span:first-child { transform: none; }
.tl-axis span:last-child { transform: translateX(-100%); }
.ts-entries { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ts-entry { display: grid; grid-template-columns: .45rem minmax(0, 1fr) auto auto; gap: .3rem .9rem; align-items: center; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); padding: .55rem .8rem .55rem .55rem; }
.ts-entry.is-adjusted { border-color: var(--adj-line); background: var(--adj-bg-soft); }
.swatch { align-self: stretch; border-radius: 2px; background: var(--job); }
.swatch-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; background: var(--job); margin-right: .45rem; vertical-align: baseline; }
.job-btn { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.job-btn:hover { color: var(--red-ink); text-decoration: underline; }
.ts-times { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .2rem; align-items: center; }
.ts-stint { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; background: var(--mist); border-radius: 3px; padding: .05rem .45rem; }
.ts-stint.live { background: #e6f4ea; color: #1e6b35; }
.ts-entry .adj-flag { margin-top: .3rem; }
.ts-entry-hours { display: grid; justify-items: end; text-align: right; line-height: 1.25; }
.ts-entry-hours strong { font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.adj-flag { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-size: .75rem; font-weight: 700; color: var(--adj-ink); background: var(--adj-bg); border-radius: .7rem; padding: .1rem .55rem; line-height: 1.4; }
.adj-flag[hidden] { display: none; }
.adj-notice { display: flex; gap: .5rem; align-items: center; border-left-color: var(--adj-ink); }
/* What the colours mean and how hours are worked out (item 21). */
.ts-help { margin: 1rem 0 0; font-size: .85rem; }
.ts-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.ts-key { display: inline-flex; gap: .4rem; align-items: center; }
.ts-key .key { display: inline-block; width: 1.75rem; height: 1rem; border-radius: 3px; background-color: var(--job); }
.ts-key .key.open { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.3) 5px 10px); }
.ts-key .live-dot { margin: 0; }
.ts-help details { margin-top: .75rem; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); padding: .65rem .9rem; }
.ts-help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.ts-help ul { margin: .6rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
/* The popup behind a bar. */
.ts-pop { display: grid; gap: .5rem; }
.ts-pop h3 { margin: .5rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); }
.ts-pop-who { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: 0; }
.pop-list, .pop-history { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pop-list li { border-left: 4px solid var(--job, var(--grey-300)); background: #fafafa; padding: .35rem .75rem; border-radius: 0 var(--r) var(--r) 0; }
.pop-history li { border-left: 3px solid var(--adj-line); padding-left: .65rem; }
.pop-line { display: flex; gap: 1rem; align-items: center; }
.pop-line .big { font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Adjust dialog: one row per job line. */
.adj-day { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin: -.5rem 0 0; }
.adj-day > span:first-child { font-weight: 700; margin-right: auto; }
.adj-rows { display: grid; gap: .75rem; }
.adj-row { border: 1px solid var(--grey-100); border-left: 5px solid var(--job); border-radius: var(--r); padding: .75rem .9rem; display: grid; gap: .5rem; background: #fff; }
.adj-row.is-adjusted { background: var(--adj-bg-soft); }
.adj-row > p { margin: 0; }
.adj-job { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.adj-job .swatch-dot { margin: 0; }
.adj-controls { display: grid; grid-template-columns: auto minmax(170px, 1fr) minmax(170px, 1.2fr); gap: .5rem .9rem; align-items: end; }
.stepper { display: flex; }
.stepper .btn { min-height: 2.9rem; min-width: 2.9rem; padding: 0 .55rem; border-radius: 0; font-variant-numeric: tabular-nums; }
.stepper .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.stepper .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.stepper .btn + .btn, .stepper input + .btn { margin-left: -1px; }
.stepper input.ts-hm { width: 5.75rem; height: 2.9rem; margin-left: -1px; border-radius: 0; text-align: center; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.adj-controls select, .adj-controls input:not(.ts-hm) { height: 2.9rem; }
.adj-foot { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; min-height: 2rem; }
.adj-status { margin: 0; font-size: .8rem; color: var(--grey-600); }
.adj-status.ok { color: #1e6b35; font-weight: 700; }
.adj-status.ok::before { content: "✓ "; }
.adj-status.wait { color: var(--adj-ink); font-weight: 700; }
.adj-status.bad { color: var(--red-ink); font-weight: 700; }
.adj-status:empty { display: none; }
a.pill { text-decoration: none; }

/* Import */
.modal.wide { width: min(1100px, 96vw); }
.imp-summary { gap: .5rem; }
.imp-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; background: var(--mist); color: var(--charcoal); }
.imp-badge.a-create { background: #e6f4ea; color: #1e6b35; }
.imp-badge.a-update { background: #e8f7f9; color: #0b6b77; }
.imp-badge.a-error { background: #fde8e8; color: var(--red-ink); }
.imp-err { color: var(--red-ink); font-weight: 700; }
.imp-warn { color: #8a5a00; }
.import-rows { max-height: 46vh; overflow: auto; }
.import-rows thead th { position: sticky; top: 0; z-index: 1; }
tr.imp-error td { background: #fffafa; }
td.nowrap, .nowrap { white-space: nowrap; }
td .note-line { white-space: normal; min-width: 10rem; }
.map-table select { max-width: 280px; }
.map-table tr.ignored td { color: var(--grey-500); }
details > summary { cursor: pointer; margin-bottom: .5rem; }

/* Selectable tables, bulk bar, checkboxes */
th.sel, td.sel { width: 2.25rem; padding-right: 0; }
.cb { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; margin: -.25rem 0; cursor: pointer; }
.cb input, .check input { width: 1.05rem; height: 1.05rem; accent-color: var(--red); margin: 0; }
tr.selected td { background: #fff5f5; }
tr.clickable.selected:hover td { background: #ffecec; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--ink); color: #fff; border-radius: var(--r); padding: .5rem .75rem; margin-bottom: .75rem; }
.bulk-bar .btn { background: #333; border-color: #444; color: #fff; }
.bulk-bar .btn:hover { border-color: #fff; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .9rem; cursor: pointer; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem .9rem; }
fieldset { border: 1px solid var(--grey-100); border-radius: var(--r); padding: .75rem .9rem; margin: 0; display: grid; gap: .5rem; min-width: 0; }
legend { font-size: .85rem; font-weight: 700; color: var(--ink); padding: 0 .3rem; }
.crew-pick .check { min-height: 2rem; }
.section-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.section-head h2 { margin: 0; }
.card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }
table.compact td, table.compact th { padding: .4rem .5rem; }
.msg { white-space: pre-wrap; max-width: 420px; }
.btn-lg { min-height: 3rem; padding: .7rem 1.4rem; font-size: 1.05rem; }
.grow { flex: 1; min-width: 0; }

/* Crew */
.avatar.sm { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.crew-chips { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.crew-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.crew-chip.on .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e9e4a; }
.crew-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.crew-list li { display: flex; align-items: center; gap: .65rem; }
.pill.lead { background: var(--ink); color: #fff; margin-left: .4rem; }
.pill.lead + .label-chips { margin-top: .15rem; }
/* Crew picker: a row per person, with a Lead switch for technicians (any number can lead). */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: .35rem .9rem; }
.crew-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border: 1px solid transparent; border-radius: var(--r); min-width: 0; }
.crew-row:has(input[name=crew_ids]:checked) { background: #fafafa; border-color: var(--grey-100); }
.crew-row.leading { border-color: var(--ink); }
.crew-row .check { flex: 1; min-width: 0; min-height: 2rem; }
.crew-row .check > span:last-child { min-width: 0; }
.crew-who { display: grid; line-height: 1.3; }
.crew-who small:empty { display: none; }
.lead-switch { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: .78rem; font-weight: 700; white-space: nowrap; padding: .2rem .55rem; border: 1px solid var(--grey-300); border-radius: 999px; cursor: pointer; }
.lead-switch input { width: .95rem; height: .95rem; margin: 0; accent-color: var(--red); }
.lead-switch:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.lead-switch:has(input:disabled) { cursor: default; }
.lead-switch:has(input:disabled:not(:checked)) { opacity: .45; }

/* Employee labels: --lc is the swatch, --lc-bg/--lc-ink the chip (ink passes AA on its background). */
.lc-red { --lc: #ED1C24; --lc-bg: #fde8e8; --lc-ink: #a3141a; }
.lc-orange { --lc: #f07c1a; --lc-bg: #fdebdc; --lc-ink: #8f4308; }
.lc-amber { --lc: #e3b100; --lc-bg: #fbf1cc; --lc-ink: #6e5100; }
.lc-green { --lc: #1e9e4a; --lc-bg: #e3f3e7; --lc-ink: #1e6b35; }
.lc-teal { --lc: #11AEC0; --lc-bg: #e0f4f6; --lc-ink: #0b6b77; }
.lc-blue { --lc: #2f6fde; --lc-bg: #e5edfb; --lc-ink: #1f4fa3; }
.lc-purple { --lc: #8250df; --lc-bg: #efe7fa; --lc-ink: #5b3399; }
.lc-grey { --lc: #9a9a9a; --lc-bg: #eeeeee; --lc-ink: #4d4d4d; }
.lc-black { --lc: #1A1A1A; --lc-bg: #1A1A1A; --lc-ink: #fff; }
.label-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.label-chip { display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1.6; padding: 0 .5rem; border-radius: 999px; background: var(--lc-bg, var(--mist)); color: var(--lc-ink, var(--charcoal)); white-space: nowrap; }
.label-chips.xs { margin-top: .15rem; }
.label-chips.xs .label-chip { font-size: .66rem; padding: 0 .4rem; }
.emp-head .label-chips { margin-top: .4rem; }
.label-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.label-opt { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; font-size: .85rem; font-weight: 400; color: var(--charcoal); padding: .25rem .7rem; background: #fff; border: 1px solid var(--grey-300); border-radius: 999px; cursor: pointer; }
.label-opt input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--lc); }
.label-opt:has(input:checked) { background: var(--lc-bg); color: var(--lc-ink); border-color: var(--lc); font-weight: 700; }
.label-admin { display: grid; margin-bottom: 1.25rem; border-top: 1px solid var(--grey-100); }
.label-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(8rem, 1fr) auto auto auto; gap: .5rem .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--grey-100); }
.label-row .label-chip { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.label-row-name { display: grid; gap: .2rem; justify-items: start; min-width: 0; }
.label-year { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.label-row .form-error { grid-column: 1 / -1; margin: 0; }
.label-row .form-error:empty { display: none; }
.label-new { grid-template-columns: minmax(8rem, 1fr) auto auto; border: 0; }
.label-row-actions { display: flex; gap: .4rem; }
.swatches { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.swatch { position: relative; display: inline-block; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--lc); cursor: pointer; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (max-width: 640px) {
  .label-row, .label-new { grid-template-columns: minmax(0, 1fr) auto; }
  .label-row input[name=name] { grid-column: 1 / -1; }
  .label-row .swatches { grid-column: 1 / -1; gap: .45rem; }
  .swatch { width: 1.9rem; height: 1.9rem; }
  .label-row-actions { grid-column: 1 / -1; }
  .label-row-actions .btn { flex: 1 1 auto; min-height: 2.5rem; }
}
.on-site { color: #1e7a3c; font-weight: 700; }
.live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #1e9e4a; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(30,158,74,.5); animation: pulse 2s infinite; vertical-align: middle; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .45rem rgba(30,158,74,0); } 100% { box-shadow: 0 0 0 0 rgba(30,158,74,0); } }
.job-card .live-dot { background: #7dff9f; margin-right: .3rem; }
.clock-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; background: #fff; border: 1px solid var(--grey-100); border-left: 5px solid var(--grey-300); border-radius: var(--r); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.clock-card.on { border-left-color: #1e9e4a; background: #f3fbf5; }
/* Job page, Time on site: whoever is on site now, their time counting up. */
.on-now { list-style: none; margin: 0 0 1rem; padding: .6rem .9rem; display: grid; gap: .45rem; background: #f3fbf5; border: 1px solid #d3ecdb; border-left: 5px solid #1e9e4a; border-radius: var(--r); }
.on-now li { display: flex; align-items: center; gap: .55rem; }
.on-now .live-dot { margin: 0; flex: none; }
.on-now-time { color: #1e7a3c; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Today (technicians) */
.now-card { border-left: 5px solid var(--grey-300); }
.now-card.on { border-left-color: #1e9e4a; background: #f3fbf5; }
.now-card h2 { margin-bottom: .35rem; }
.now-card p { margin: 0 0 .4rem; }
.big-time { font-size: 2.2rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hours-card { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.hours-card > div { display: grid; }
.hours-card strong { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.today-job { display: grid; gap: .25rem; border: 1px solid var(--grey-100); border-radius: var(--r); padding: .8rem 1rem; margin-bottom: .6rem; background: #fff; min-width: 0; }
.today-job.on { border-color: #1e9e4a; background: #f3fbf5; }
.today-job h3 { margin: .15rem 0; }
.today-job-top { display: flex; justify-content: space-between; align-items: center; gap: .25rem .75rem; flex-wrap: wrap; }
.today-job-top .small { display: inline-flex; align-items: center; gap: .3rem; }
.title-link .go { color: var(--grey-500); margin-left: .2rem; }
.today-job .act-buttons { margin-top: .35rem; }
.now-card .act-buttons { margin: .6rem 0 .5rem; }
.today-here { display: flex; align-items: center; margin: .35rem 0 0; }

/* Site address: a pin and the address, then Waze / Apple Maps / Google Maps / Copy as tiles, each map app
   with its own picture. Four in a row while each name fits beside its picture, else two rows of two: the
   basis jumps from 0 to "everything" at 34rem and is capped at half a row. A name wraps between its
   words, never inside one (the cells and facts around it break anywhere). */
.addr { margin: .3rem 0 .5rem; }
.addr-text { display: flex; gap: .35rem; align-items: flex-start; overflow-wrap: break-word; color: var(--ink); }
.addr-pin { color: var(--red); margin-top: .1em; }
.addr-go { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 40rem; margin-top: .45rem; }
.addr-go .btn { flex: 1 1 calc((34rem - 100%) * 999); max-width: calc(50% - .2rem); min-height: 2.5rem; padding: .35rem .6rem; gap: .5rem; font-size: .82rem; line-height: 1.15; white-space: normal; overflow-wrap: normal; justify-content: flex-start; text-align: left; }
.app-ic { width: 1.6rem; height: 1.6rem; flex: none; border-radius: .4rem; }
.addr-go .map-copy { background: var(--mist); border-color: var(--grey-100); color: var(--charcoal); }
.addr-go .map-copy:hover { border-color: var(--grey-500); }
.map-copy .ic { width: 1.35rem; height: 1.35rem; margin: 0 .12rem; }
/* A table sizes a column down to its content's narrowest: keep room for two tiles. */
td .addr-go { min-width: 15rem; }

/* Employee screens (body.is-tech): bigger buttons everywhere, the main actions full width on phones,
   16px inputs on phones so iOS doesn't zoom in. */
.is-tech .btn { min-height: 2.75rem; padding: .5rem 1rem; }
.is-tech .btn-sm { min-height: 2.25rem; padding: .3rem .7rem; font-size: .85rem; }
.is-tech .btn-lg { min-height: 3.25rem; padding: .7rem 1.4rem; font-size: 1.05rem; }
.is-tech .btn-delete { min-height: 2.5rem; }
.is-tech .addr-go .btn { min-height: 2.75rem; padding: .4rem .6rem; }
.is-tech .back-link { min-height: 2.75rem; padding-right: .75rem; margin: -.6rem 0 .1rem; }
.act-card { border-left: 5px solid var(--grey-300); display: grid; gap: .8rem; }
.act-card.on { border-left-color: #1e9e4a; background: #f3fbf5; }
.act-card.done { border-left-color: var(--ink); }
.act-state { margin: 0; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .1rem .35rem; flex-wrap: wrap; }
.act-sub { font-weight: 400; color: var(--grey-600); }
.act-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.act-note { display: flex; gap: .4rem; align-items: flex-start; margin: 0; }
.act-note .ic { margin-top: .1em; }
.btn-complete { background: #fff; color: var(--save, #1e7a3c); border: 2px solid var(--save, #1e7a3c); }
.btn-complete:hover { background: #effaf2; border-color: var(--save-ink, #17602f); color: var(--save-ink, #17602f); }
.site-card .addr-text { font-size: 1.05rem; font-weight: 700; }
.site-card .facts { margin-top: .9rem; }
.job-desc { white-space: pre-wrap; margin: .9rem 0 0; }
.diary-form { background: var(--mist); }

/* My time on this job: a day at a time, the timesheet hours first, then the clock times under them. */
.my-time .card-head { flex-wrap: wrap; }
.mt-total { white-space: nowrap; }
.mt-total strong { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-days { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mt-day { border: 1px solid var(--grey-100); border-radius: var(--r); padding: .7rem .85rem; }
.mt-day.adjusted { border-left: 4px solid var(--red); }
.mt-head { display: flex; align-items: center; gap: .3rem .5rem; flex-wrap: wrap; }
.mt-hours { margin-left: auto; font-weight: 700; color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mt-stints { list-style: none; margin: .5rem 0 0; padding: .45rem 0 0; border-top: 1px dashed var(--grey-100); display: grid; gap: .35rem; font-size: .9rem; }
.mt-stints li { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; }
.mt-len { text-align: right; font-variant-numeric: tabular-nums; color: var(--grey-600); }
.mt-src { grid-column: 1 / -1; font-size: .8rem; color: var(--grey-600); overflow-wrap: anywhere; }
.mt-why, .mt-adj { margin: .45rem 0 0; font-size: .8rem; color: var(--grey-600); }
.mt-adj { color: var(--red-ink); display: flex; gap: .35rem; align-items: flex-start; }
.mt-adj .ic { margin-top: .1em; }
.pill.on-pill { background: #e6f4ea; color: #1e6b35; }
.pill.adj-pill { background: #fde8e8; color: var(--red-ink); }
.mt-foot { margin: .75rem 0 0; }

/* Time spent on a diary note: quick picks as chips (real radio buttons underneath), or hours and minutes. */
.spent { border: 0; padding: 0; gap: .45rem; }
.spent legend { display: flex; align-items: center; gap: .35rem; padding: 0; margin-bottom: .4rem; }
.spent legend .muted { font-weight: 400; }
.spent-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
label.spent-pick { display: inline-flex; position: relative; font-weight: 700; }
.spent-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spent-pick span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .8rem; border: 1px solid var(--grey-300); border-radius: 999px; background: #fff; font-size: .85rem; }
.spent-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.spent-pick input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.spent-pick:hover span { border-color: var(--ink); }
.spent-other { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.spent-other input { width: 5rem; }
.spent-other select { width: 5.5rem; }
.spent-hint { margin: 0; }
.spent-old { display: flex; gap: .4rem; align-items: flex-start; margin: 0; }
.spent-old .ic { margin-top: .1em; }
.is-tech .spent-pick span { min-height: 2.75rem; padding: .4rem .95rem; font-size: .9rem; }

/* Tracker */
.track-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.track-card { background: #fff; border: 1px solid var(--grey-100); border-top: 4px solid var(--grey-300); border-radius: var(--r); padding: .9rem 1rem; display: grid; gap: .6rem; align-content: start; }
.track-card.on { border-top-color: #1e9e4a; }
.track-card header, .track-card footer { display: flex; align-items: center; gap: .6rem; }
.track-where { display: grid; gap: .2rem; }
.track-today { list-style: none; margin: 0; padding: .5rem 0 0; border-top: 1px dashed var(--grey-100); display: grid; gap: .25rem; font-size: .82rem; }
/* Tracker: the day picker, then the day's activity feed and clock times. */
.track-day { margin: 1.75rem 0 1rem; align-items: center; }
.track-day h2 { margin: 0; }
.chip-n { display: inline-block; min-width: 1.2rem; margin-left: .35rem; padding: 0 .3rem; border-radius: 999px; background: var(--mist); color: var(--charcoal); font-size: .7rem; text-align: center; }
.settings-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 1rem; }
.settings-card { scroll-margin-top: 1rem; }
.settings-card h3 { font-size: .9rem; margin: 0 0 .5rem; }
.chip[aria-pressed="true"] .chip-n { background: #444; color: #fff; }
.feed-card .chips { margin-bottom: .75rem; }
.feed { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; }
.feed-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--grey-100); }
.feed-item:last-child { border-bottom: 0; }
.feed-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mist); color: var(--charcoal); }
.feed-body { min-width: 0; display: grid; gap: .2rem; overflow-wrap: anywhere; }
.fa-completed .feed-icon, .fa-paid .feed-icon, .fa-payment .feed-icon { background: #e3f3e7; color: #1e6b35; }
.fa-started .feed-icon, .fa-on .feed-icon { background: #fde8e8; color: var(--red-ink); }
.fa-sent .feed-icon, .fk-photo .feed-icon { background: #e0f4f6; color: #0b6b77; }
.fk-diary .feed-icon { background: #efe7fa; color: #5b3399; }
.feed-quote { margin: 0; padding: .35rem .6rem; border-left: 3px solid var(--grey-100); font-size: .88rem; white-space: pre-wrap; }
.feed-photo { display: inline-flex; align-items: center; gap: .6rem; color: var(--charcoal); text-decoration: none; font-size: .85rem; }
.feed-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); background: var(--grey-100); }

/* Invoices + money tracker */
.money { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { display: grid; gap: .1rem; padding: .75rem .9rem; border: 1px solid var(--grey-100); border-radius: var(--r); background: #fafafa; }
.stat strong { font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat.bad strong, .bad { color: var(--red-ink); }
.stat.good strong { color: #1e7a3c; }
.stat-btn { font: inherit; text-align: left; cursor: pointer; color: inherit; align-content: start; }
.stat-btn:hover { border-color: var(--grey-300); background: #fff; }
.stat-btn[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }
.aging-bar { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; background: var(--grey-100); margin-top: .75rem; }
.aging-bar span { background: var(--ag); }
.ag-tile, .ag-tile[aria-pressed=true] { border-left: 5px solid var(--ag); }
.ag-due_30 { --ag: #11AEC0; } .ag-due_later { --ag: #9fdbe2; } .ag-overdue_0_60 { --ag: #e8a33c; } .ag-overdue_60_plus { --ag: #ED1C24; }
.ready-row { display: flex; align-items: center; gap: .75rem; }
.pill.inv-draft { background: var(--mist); color: var(--grey-600); }
.pill.inv-sent { background: #e8f7f9; color: #0b6b77; }
.pill.inv-overdue { background: #fde8e8; color: var(--red-ink); }
.pill.inv-paid { background: #e6f4ea; color: #1e6b35; }
.pill.inv-void { background: #eee; color: #777; text-decoration: line-through; }
.line-table { min-width: 720px; }
.line-table td { vertical-align: top; }
.line-table select { width: auto; }
.line-table td:nth-child(2) { width: 100%; }
.line-table textarea { min-height: 2.5rem; width: 100%; min-width: 14rem; }
.line-table input[name=quantity] { width: 5.5rem; text-align: right; }
.line-table input[name=unit_price] { width: 8rem; text-align: right; }
.line-table td.amt { white-space: nowrap; padding-top: 1.1rem; font-weight: 700; color: var(--ink); }
.inv-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: .75rem 0 1rem; }
.inv-totals { display: grid; grid-template-columns: auto auto; gap: .3rem 1.5rem; margin: 0; font-variant-numeric: tabular-nums; }
.inv-totals dt { color: var(--grey-600); }
.inv-totals dd { margin: 0; text-align: right; }
.inv-totals .grand { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
/* The line editor needs the full width; payments sit beside it only on very wide screens. */
.inv-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1500px) { .inv-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
/* Job summary (admin): on the job page and in the Complete job check */
.job-summary { display: grid; gap: 1rem; margin-bottom: .5rem; }
.job-hours { width: 100%; }
.job-hours td .avatar { vertical-align: middle; margin-right: .25rem; }
.job-hours .pill { margin-left: .4rem; }
.job-hours td.num { white-space: nowrap; }
.job-hours tfoot td { border-top: 1px solid var(--grey-100); }
.job-summary.compact .facts dd strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.job-summary .good strong { color: #1e7a3c; }
/* Beside the crew or on a phone four columns don't fit: Who goes on a line of its own, then Hours,
   Cost and Charge under the column names. */
.job-summary { container-type: inline-size; }
@container (max-width: 560px) {
  .job-hours tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--grey-100); }
  .job-hours th, .job-hours td, .job-hours tfoot td { border: 0; }
  .job-hours th:first-child, .job-hours td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .job-hours thead th:first-child { display: none; }
}
.job-summary .warn .small { color: #9a5b00; } /* a pay rate is missing, so the cost is short */
.summary-card.done { border-top: 4px solid #1e9e4a; }
.note-box { display: flex; gap: .4rem; align-items: center; background: #fff8e6; border: 1px solid #f3d48b; border-radius: var(--r); padding: .5rem .75rem; font-size: .9rem; }
.save-state { display: inline-flex; align-items: center; gap: .3rem; }
.save-state.ok { color: #1e7a3c; }
.pay-form { border-top: 1px solid var(--grey-100); padding-top: 1rem; margin-top: 1rem; }
.print-opts fieldset { margin-bottom: .25rem; }

/* Printing: #print-root holds a clean document; the app is hidden while it prints. */
.print-root { display: none; }
/* Download PDF lays the same document out off screen at the A4 text width (pdf.js measures it there), in
   Arial: its letter widths match the PDF's Helvetica. */
.pdf-root { position: absolute; left: -10000px; top: 0; background: #fff; color: #000; font: 10.5pt/1.45 Arial, Helvetica, sans-serif; pointer-events: none; }
.pdf-root h1, .pdf-root h2, .pdf-root h3 { color: #000; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  body.printing > :not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  /* Ctrl+P without the Print button: print the page content only. */
  body:not(.printing) .sidebar, body:not(.printing) .topbar, body:not(.printing) .toast, body:not(.printing) button, body:not(.printing) .toolbar, body:not(.printing) .addr-go { display: none !important; }
  body:not(.printing) .shell { display: block; }
}
.pr-head { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; border-bottom: 3px solid var(--red); padding-bottom: .6rem; margin-bottom: 1rem; }
.pr-head h1 { font-size: 16pt; margin: 0 0 .2rem; text-align: right; }
.pr-head p { margin: 0; text-align: right; }
.pr-logo { width: 190px; height: auto; }
.pr-meta { color: #555; font-size: 8.5pt; }
#print-root h2, .pdf-root h2 { font-size: 12pt; margin: 1rem 0 .4rem; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; page-break-inside: auto; }
.pr-table th, .pr-table td { border: 1px solid #bbb; padding: 4px 6px; text-align: left; vertical-align: top; background: none; color: #000; text-transform: none; letter-spacing: 0; font-size: 9pt; }
.pr-table th { background: #f1f1f1; font-weight: 700; }
.pr-table tr { page-break-inside: avoid; }
.pr-table .num { text-align: right; }
.pr-text { white-space: pre-wrap; margin: 0; }
.pr-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; }
.pr-facts dt { font-weight: 700; }
.pr-facts dd { margin: 0; }
.pr-lines div { border-bottom: 1px solid #999; height: 1.6rem; }
/* Timelines print with their colours (browsers drop backgrounds unless told). */
.pr-timelines .ts-day { page-break-inside: avoid; margin-bottom: .6rem; }
.pr-timelines .tl-track, .pr-timelines .tl-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
.pr-timelines .tl-now { display: none; }
.pr-sign { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.pr-sign div { border-top: 1px solid #000; padding-top: .25rem; font-size: 8.5pt; }
.pr-invoice .inv-head { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 3px solid var(--red); padding-bottom: .75rem; margin-bottom: 1rem; }
.pr-invoice .inv-title { text-align: right; }
.pr-invoice .inv-title h1 { font-size: 20pt; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.pr-invoice .inv-title dl { display: grid; grid-template-columns: auto auto; gap: .15rem .9rem; margin: 0; justify-content: end; }
.pr-invoice .inv-title dt { font-weight: 700; }
.pr-invoice .inv-title dd { margin: 0; }
.pr-invoice .inv-bill { margin-bottom: 1rem; }
.inv-totals.pr { width: 50%; margin: .75rem 0 0 auto; }
.inv-stamp { display: inline-block; border: 3px solid var(--red); color: var(--red); font-weight: 700; font-size: 16pt; padding: .2rem .8rem; transform: rotate(-4deg); margin: 1rem 0; }
.inv-stamp.paid { border-color: #1e7a3c; color: #1e7a3c; }
.inv-footer { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid #bbb; font-size: 9pt; color: #444; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 82vw); z-index: 40; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; overflow-y: auto; }
  .sidebar.open { transform: none; visibility: visible; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 38; background: var(--ink); padding: .6rem 1rem; }
  .topbar .brand { padding: 0; border: 0; }
  .topbar .brand img { width: 130px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; background: #333; color: #fff; border: 0; padding: .45rem .9rem; border-radius: var(--r); cursor: pointer; }
  .scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(26,26,26,.55); }
  .main { padding: 1.25rem 1rem 2rem; }
  /* minmax(0, …): a wide table inside scrolls in its own box instead of widening the page */
  .grid-2, .sched { grid-template-columns: minmax(0, 1fr); }
  .unscheduled { max-height: none; }
  .page-head { gap: .6rem; }
  .ts-grid .staff-cell { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--grey-100); }
  .ts-grid thead .staff-cell { background: #fafafa; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  .card { padding: 1rem; }
  .toolbar label:has(select), .toolbar label.grow { flex: 1 1 100%; min-width: 0; }
  .toolbar label { min-width: 0; }
  .ts-title .spacer, .ts-view .spacer { display: none; }
  .ts-period, .ts-period .chips { width: 100%; }
  .ts-period .chip { padding: .3rem .7rem; }
  .ts-entry { grid-template-columns: .45rem minmax(0, 1fr) auto; gap: .3rem .6rem; }
  .ts-entry-hours span { max-width: 5.5rem; }
  .ts-entry > .btn { grid-column: 2 / -1; justify-self: start; min-height: 2.5rem; }
  .ts-day-head .btn { min-height: 2.5rem; }
  .adj-controls { grid-template-columns: minmax(0, 1fr); }
  .stepper .btn { flex: 1; }
  .stepper input.ts-hm { flex: 1.4; width: auto; }
  .tl-axis span.minor { visibility: hidden; }
  .inv-actions > .btn-primary { width: 100%; min-height: 3rem; }
  .pay-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--grey-100); }
  .pay-table td { border: 0; }
  .inv-actions .spacer { display: none; }
  .modal, .modal.wide { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; }
  #modal-body { padding: 1.25rem 1rem; }
  /* Tables become one card per row; each cell is labelled with its column name. */
  .stack { background: none; border: 0; overflow: visible; }
  .stack table, .stack tbody, .stack tr, .stack td { display: block; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack tr { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--r); padding: .6rem .9rem; margin-bottom: .6rem; }
  .stack td, .stack td:first-child, .stack .compact td { position: relative; border: 0; padding: .3rem 0 .3rem 7rem; min-height: 1.9rem; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .stack td::before { content: attr(data-label); position: absolute; left: 0; top: .5rem; width: 6.25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); }
  .stack td:empty { display: none; }
  .stack td[data-label=""] { padding-left: 0; }
  .stack td[data-label=""]::before { content: none; }
  .stack td.empty { text-align: center; }
  .stack td.sel { position: absolute; right: .5rem; top: .45rem; width: auto; min-height: 0; padding: 0; }
  .stack tr { position: relative; }
  .stack th.sel { display: none; }
  .btn-lg { width: 100%; }
  .is-tech .btn { min-height: 3rem; font-size: 1rem; }
  .is-tech .btn-sm { min-height: 2.5rem; font-size: .9rem; }
  .is-tech .addr-go .btn { min-height: 3rem; font-size: .88rem; }
  .is-tech input:not([type=checkbox]):not([type=radio]), .is-tech select, .is-tech textarea { font-size: 16px; }
  .is-tech input:not([type=checkbox]):not([type=radio]), .is-tech select { height: 3rem; }
  .act-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .act-buttons > .btn-lg { grid-column: 1 / -1; }
  .act-buttons > :only-child { grid-column: 1 / -1; }
  .act-buttons > .btn { min-width: 0; white-space: normal; padding-left: .5rem; padding-right: .5rem; }
  .is-tech .back-link { margin-top: -.4rem; }
  .is-tech .addr-go .btn { font-size: .84rem; gap: .4rem; padding: .3rem .45rem; }
  .is-tech .app-ic { width: 1.45rem; height: 1.45rem; }
  .spent-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .3rem; }
  .is-tech .spent-pick span { justify-content: center; width: 100%; padding: .3rem .15rem; white-space: nowrap; font-size: .82rem; }
  .photo-thumb { width: 72px; height: 72px; }
  .viewer img { max-height: 55vh; }
  .viewer-actions .spacer { display: none; }
  .viewer-actions .btn { flex: 1 1 auto; }
  .today-job { align-items: stretch; }
  /* Thumb-sized tiles. In a phone card row the cell starts after its 7rem label: the tiles take the row's full width. */
  .addr-go { max-width: none; }
  .addr-go .btn { min-height: 2.75rem; padding: .3rem .45rem; gap: .4rem; }
  .stack td .addr-go { margin-left: -7rem; }
  .client-addr { min-width: 0; }
  .contact > a { overflow-wrap: anywhere; } /* a long email breaks anywhere in a phone card; desktop tables keep it whole */
  .stack td .contact wbr { display: inline; }
  .client-addr .addr-go { max-width: none; }
  .client-addr .addr-go .btn { flex: 1 1 auto; min-height: 2.75rem; font-size: .78rem; }
  .page-head .btn { flex: 1 1 auto; }
  .page-actions { flex: 1 1 100%; }
  .inv-totals.pr { width: 100%; }
  .stack tr.clickable:hover td { background: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* App tables keep their first column on one line. Not the printout (#print-root): there a long first
   column (an invoice line description) must wrap, or it pushes the other columns off the page.
   :where() keeps the specificity of a plain td:first-child, so the phone .stack rules still win. */
:where(.main, .modal) td:first-child { white-space: nowrap; }