/* === ADDED 2026-10-21: GEMELEC Jobs (/jobs) ================================ */
/* Staff pages for the job system. Built on the field portal's look (.tech-* in style.css):
   same header, panels, inputs and buttons, so it feels like one set of staff tools. This file
   only adds what the job pages need on top, and is loaded by the /jobs pages alone. A wider
   column than /tech, because the office uses these on a laptop as well as a phone. */

/* === ADDED 2026-10-24: theme tokens (Light, Dark, Auto) ======================== */
/* Every colour on the /jobs pages comes from these, so one switch repaints the lot. The values
   here are LIGHT, and each is exactly the colour it replaced, so light mode looks as it did. The
   DARK values are in the "Dark theme" banner at the very end of this file, inside @media screen,
   so anything printed always uses these. The theme is picked per device (Light, Dark or Auto,
   which follows the phone or computer) by the snippet in each page's <head> and GxJobs.theme in
   js/jobs/common.js, which set html[data-theme="light" | "dark"]. CSS keys only on that
   attribute, never on prefers-color-scheme, so the quote print page (no snippet) stays paper.
   Adding a colour: use a token below; if none fits, add one here AND its dark value at the end.
   Near-duplicates (--gx-text-2a and the like) are today's slightly different greys, kept apart
   so light does not shift by a shade; dark gives each family one value. New rules use the plain
   names. Colours on surfaces that are dark in both themes (the bar, tabs, hero) stay written
   out in their own rules. */
:root {
  /* brand, the same in both themes */
  --gx-ink: #111416;
  --gx-ink-2: #1c2226;
  --gx-ink-3: #2a3136;
  --gx-teal: #0ABAB5;
  --gx-yellow: #faed27;
  --gx-coral: #ff6a5e;
  /* The laptop bar's three sides (25 Oct 2026): ON THE JOB is the yellow, SALES the teal, ADMIN
     this cool blue (Mani's pick; well apart from the teal). A lamp colour, on dark only, like the
     teal; blue TEXT on the page is --gx-blue-text below. --gx-on-lit is the one text colour on a
     lit segment of the switch (yellow, teal or blue), in both themes (7.5:1 or better). */
  --gx-blue: #69a7ff;
  --gx-on-lit: #111416;

  /* surfaces, back to front */
  --gx-page: #f4f4f2;
  --gx-card: #fff;
  --gx-raised: #fff;           /* More menu, account card, More sheet, search */
  --gx-raised-fill: #f4f4f2;   /* chips, tiles and hovers inside those */
  --gx-raised-foot: #fafaf8;   /* the search box's key hints strip */
  --gx-field: #fff;            /* text boxes, selects, file pickers, tick boxes */
  --gx-hover: #fafaf7;         /* a row or panel heading under the pointer */
  --gx-well: #fafaf7;          /* a box sunk into a card (price maths, an option left out) */
  --gx-well-2: #f7f7f4;
  --gx-fill: #f1f1ec;          /* small buttons, counts */
  --gx-fill-2: #e8e8e4;        /* tags */
  --gx-fill-3: #ecece7;        /* meter track, skeletons, initials */
  --gx-fill-4: #ecebe6;
  --gx-fill-5: #ececea;
  --gx-fill-6: #dcdcd6;
  --gx-grip: #d6d6cf;
  --gx-shimmer: #f1f1ed;
  --gx-meter-later: #cfcfc8;
  --gx-solid: #1a1a1a;         /* near-black blocks: the quote total bar, the option tag */
  --gx-invert: #1a1a1a;        /* a picked chip, the office tag: dark on light, light on dark */
  --gx-invert-text: #fff;
  --gx-deep: #111416;          /* ink chips that hold a teal icon */
  --gx-hero: #111416;
  --gx-band: #111416;          /* the strip the bar sits on before it is drawn */
  --gx-bar-solid: #111416;     /* rings cut around badges and Search: the bar's own colour */
  --gx-bar: rgba(17, 20, 22, 0.96);
  --gx-bar-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px -16px rgba(0, 0, 0, 0.55);
  --gx-tabbar: rgba(17, 20, 22, 0.97);
  --gx-tabbar-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -12px 30px -14px rgba(0, 0, 0, 0.5);

  /* lines */
  --gx-line: #e3e3dd;
  --gx-line-2: #e0e0da;
  --gx-line-3: #d4d4cc;
  --gx-line-4: #d8d8d2;
  --gx-field-line: #c9c9c2;
  --gx-field-line-2: #b6b6ad;
  --gx-line-strong: #1a1a1a;   /* hover, open, the add box */
  --gx-tile-edge: rgba(17, 20, 22, 0.06);

  /* text, strongest first */
  --gx-max: #000;
  --gx-strong: #1a1a1a;
  --gx-text: #1f2937;          /* body text (style.css's --text) */
  --gx-text-2: #3d3d38;
  --gx-text-2a: #33332f;
  --gx-text-2b: #3a3a35;
  --gx-text-2c: #2c2c28;
  --gx-text-2d: #4a4a44;
  --gx-text-3: #55554f;
  --gx-muted: #62625c;
  --gx-muted-2: #6b6b66;
  --gx-slate: #6b7280;
  --gx-faint: #8a8a83;
  --gx-faint-2: #b9b9b2;
  --gx-num: #111416;           /* big numbers and ink icons */
  --gx-current: #111416;       /* the page you are on, inside menus */

  /* teal, yellow */
  --gx-teal-text: #087c78;
  --gx-teal-ink: #066b67;
  --gx-teal-note: #1d4544;
  --gx-teal-tint: rgba(10, 186, 181, 0.14);
  --gx-blue-text: #1d5fc4;     /* ADMIN's blue as text or a mark on the page (6:1 on white) */
  --gx-blue-tint: rgba(105, 167, 255, 0.18);
  --gx-link-line: #e0c800;
  --gx-today-line: rgba(250, 237, 39, 0.7);
  --gx-today-top: #fffdec;
  --gx-menu-badge: var(--gx-teal-text);
  --gx-menu-badge-late: #b3261e;
  --gx-menu-badge-text: #fff;
  --gx-seg-on: #fff;           /* the picked part of a segmented switch */
  --gx-seg-shadow: 0 1px 2px rgba(17, 20, 22, 0.12), 0 0 0 1px #e3e3dd;

  /* states: the plain colour, a darker ink for small text on the tint, the tint, a rule */
  --gx-good: #2e7d4f;
  --gx-good-ink: #1d5034;
  --gx-good-ink-2: #256b41;
  --gx-good-bg: #e8f5ec;
  --gx-good-bg-2: #e5f3ea;
  --gx-good-bg-3: #eef7f1;
  --gx-good-bg-4: #e6f2ea;
  --gx-warn: #9a6700;
  --gx-warn-ink: #7a5a00;
  --gx-warn-ink-2: #8a5c00;
  --gx-warn-text: #4a3b00;
  --gx-warn-bg: #fff4cf;
  --gx-warn-bg-2: #fff3c4;
  --gx-warn-bg-3: #fff8e1;
  --gx-warn-bg-4: #fffbea;     /* a bill already imported, in the import preview */
  --gx-warn-line: #e0a800;
  --gx-warn-line-2: #e0b100;
  --gx-bad: #b3261e;
  --gx-bad-ink: #8c2418;
  --gx-bad-bg: #fdecea;
  --gx-bad-line: #c0392b;
  --gx-info: #1d4e89;
  --gx-info-2: #1d4f91;
  --gx-info-bg: #e3edf9;
  --gx-info-bg-2: #e3eefc;

  /* the photo viewer: dark over the page in both themes, the photo on paper */
  --gx-scrim: rgba(13, 13, 13, 0.88);
  --gx-on-scrim: #fff;
  --gx-on-scrim-2: #d4d4cc;
  --gx-paper: #fff;            /* behind a photo or a transparent picture */

  /* forms */
  --gx-knob: #fff;             /* an on/off switch's knob */
  --gx-knob-shadow: 0 1px 3px rgba(17, 20, 22, 0.3);
  --gx-focus-line: #1a1a1a;
  --gx-focus-ring: rgba(26, 26, 26, 0.12);
  --gx-backdrop: rgba(17, 20, 22, 0.55); /* behind the location notice (24 Oct 2026) */
  --gx-accent: #1a1a1a;

  /* depth */
  --gx-shadow-pop: 0 18px 40px -12px rgba(17, 20, 22, 0.45), 0 0 0 1px rgba(17, 20, 22, 0.06);
  --gx-shadow-jump: 0 30px 80px -20px rgba(17, 20, 22, 0.6);
  --gx-shadow-gate: 0 14px 34px -22px rgba(17, 20, 22, 0.35);
  --gx-shadow-soft: 0 14px 34px -18px rgba(17, 20, 22, 0.35);
  --gx-shadow-lift: 0 16px 30px -22px rgba(17, 20, 22, 0.45);
  --gx-shadow-tile: 0 1px 2px rgba(17, 20, 22, 0.06), 0 14px 34px -18px rgba(17, 20, 22, 0.35);
  --gx-shadow-tile-hover: 0 2px 4px rgba(17, 20, 22, 0.06), 0 22px 44px -18px rgba(17, 20, 22, 0.42);
}

/* The style.css pieces every /jobs page is built from, restated with the tokens. The selectors
   are style.css's own, so each wins only by loading later, in the same place style.css's did,
   and every light value is style.css's own. /tech and /job-requests never load this file. */
.jobs-body { color: var(--gx-text); }
.tech-lede { color: var(--gx-text-3); }
.tech-section-title { color: var(--gx-strong); border-bottom-color: var(--gx-line-4); }
.tech-panel label { color: var(--gx-strong); }
.tech-panel input[type="text"],
.tech-panel input[type="tel"],
.tech-panel input[type="email"],
.tech-panel input[type="password"],
.tech-panel textarea { border-color: var(--gx-field-line); background: var(--gx-field); color: var(--gx-strong); }
.tech-panel input:focus,
.tech-panel textarea:focus { border-color: var(--gx-focus-line); box-shadow: 0 0 0 3px var(--gx-focus-ring); }
.tech-hint { color: var(--gx-muted-2); }
.tech-counter { color: var(--gx-faint); }
.tech-error { background: var(--gx-bad-bg); border-left-color: var(--gx-bad-line); color: var(--gx-bad-ink); }
.tech-panel input[type="file"] { border-color: var(--gx-field-line-2); background: var(--gx-field); }
.tech-check { background: var(--gx-field); border-color: var(--gx-field-line); }
/* Inside a panel, style.css's `.tech-panel label` (block, medium weight) outranks `.tech-check`
   (flex), which stacked the box on its own line above the words. Every /jobs page is a panel. */
.tech-panel .tech-check { display: flex; font-weight: 400; }
.tech-check input[type="checkbox"] { accent-color: var(--gx-accent); }
.tech-check span { color: var(--gx-text-3); }
.tech-check strong { color: var(--gx-strong); }
.tech-optional { color: var(--gx-faint); }
.dash-back a { color: var(--gx-slate); }
/* The browser's own placeholder grey is too faint on the dark fields (4:1); the muted grey
   passes in both themes (5.3:1 light, 7.3:1 dark) and stays lighter than typed text. */
.jobs-shell ::placeholder,
.jobs-jump ::placeholder { color: var(--gx-muted-2); opacity: 1; }

.jobs-shell { max-width: 880px; }

/* The /tech header row does not wrap; on /jobs it carries the environment pill too, so let it
   wrap instead of squeezing the pill and the name button onto three lines at 375px. Scoped to
   .jobs-body so /tech and /job-requests are untouched. */
.jobs-body .tech-header { flex-wrap: wrap; row-gap: 8px; }
.jobs-env, .jobs-body .tech-who { white-space: nowrap; }

.jobs-env {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gx-warn-ink);
  background: var(--gx-warn-bg-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.jobs-env.is-production { color: var(--gx-invert-text); background: var(--gx-invert); }

.jobs-note,
.jobs-banner {
  background: var(--gx-warn-bg-3);
  border-left: 3px solid var(--gx-warn-line);
  color: var(--gx-warn-text);
  padding: 11px 13px;
  border-radius: 6px;
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
}

.jobs-ok-note {
  background: var(--gx-good-bg);
  border-left: 3px solid var(--gx-good);
  color: var(--gx-good-ink);
  padding: 11px 13px;
  border-radius: 6px;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
}

.jobs-gate-hint { margin-top: 10px; }

/* System check: label / value rows. */
.jobs-checks {
  display: grid;
  grid-template-columns: minmax(130px, 30%) 1fr;
  gap: 8px 16px;
  margin: 0 0 14px;
  font-size: 15px;
}
.jobs-checks dt { color: var(--gx-muted-2); font-weight: 500; }
.jobs-checks dd { margin: 0; color: var(--gx-strong); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .jobs-checks { grid-template-columns: 1fr; gap: 2px; }
  .jobs-checks dd { margin-bottom: 10px; }
}

.jobs-good { color: var(--gx-good); font-weight: 700; }
.jobs-warn { color: var(--gx-warn); font-weight: 700; }
.jobs-bad { color: var(--gx-bad); font-weight: 700; }

.jobs-btn-wide { margin-top: 4px; }

/* Cards for settings, staff and backups. */
.jobs-list { display: grid; gap: 10px; margin-bottom: 14px; }

.jobs-row {
  background: var(--gx-card);
  border: 1.5px solid var(--gx-line-2);
  border-radius: 10px;
  padding: 12px 14px;
}
.jobs-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.jobs-row-title { font-weight: 700; color: var(--gx-strong); }
.jobs-row-sub { font-size: 13.5px; color: var(--gx-muted-2); }
.jobs-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jobs-row.is-off { opacity: 0.6; }

.jobs-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--gx-fill-2);
  color: var(--gx-text-2);
}
.jobs-tag.is-office { background: var(--gx-invert); color: var(--gx-invert-text); }

/* Small secondary buttons inside cards. */
.jobs-link-btn {
  background: var(--gx-fill);
  border: 1.5px solid var(--gx-line-3);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--gx-strong);
  cursor: pointer;
  min-height: 40px;
}
.jobs-link-btn:hover { border-color: var(--gx-line-strong); }
.jobs-link-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.jobs-link-btn.is-danger { color: var(--gx-bad); }

/* Settings and inline forms: input, unit, save on one line. */
.jobs-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tech-panel .jobs-inline input[type="text"],
.tech-panel .jobs-inline input[type="password"] {
  width: auto;
  flex: 1 1 180px;
  min-width: 0;
}
.tech-panel .jobs-inline input.jobs-num { flex: 0 1 140px; }
.tech-panel .jobs-inline input.jobs-num-short { flex: 0 0 80px; }
.jobs-unit { color: var(--gx-text-3); font-size: 15px; }

.tech-panel select {
  font: 400 16px/1.45 'DM Sans', system-ui, sans-serif;
  padding: 12px 12px;
  border: 1.5px solid var(--gx-field-line);
  border-radius: 10px;
  background: var(--gx-field);
  color: var(--gx-strong);
}

.jobs-inline-form { margin: 4px 0 6px; }
.jobs-inline-form label { margin-top: 6px; }

.jobs-msg { font-size: 14px; margin: 8px 0 0; }
.jobs-msg.is-error { color: var(--gx-bad); }
.jobs-msg.is-ok { color: var(--gx-good); }

/* Recent changes. */
.jobs-audit {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  border-top: 1px solid var(--gx-line-2);
}
.jobs-audit li { padding: 8px 0; border-bottom: 1px solid var(--gx-line-2); line-height: 1.45; }
.jobs-audit-when { color: var(--gx-muted-2); margin-right: 6px; }
.jobs-audit-what { color: var(--gx-strong); }
.jobs-audit-detail { display: block; color: var(--gx-text-3); font-size: 13px; overflow-wrap: anywhere; }
/* Where a change was made, on its own line (it ran into the words of a change with no detail). */
.jobs-audit .gxl-where { display: flex; margin-top: 2px; }

/* A built area on the /jobs home opens its page. (Kept here, away from the end of the file,
   where phase branches append their own rules.) */
.jobs-area-link { font-weight: 700; color: var(--gx-strong); text-decoration: underline; text-underline-offset: 3px; }
.jobs-area-link:hover { color: var(--gx-max); }

/* What is coming, by phase. */
.jobs-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jobs-areas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gx-card);
  border: 1.5px dashed var(--gx-line-3);
  border-radius: 10px;
  color: var(--gx-text-3);
}
.jobs-areas li.is-built { border-style: solid; color: var(--gx-strong); }
.jobs-areas .jobs-phase { font-size: 13px; color: var(--gx-faint); white-space: nowrap; }

/* === ADDED 2026-10-21: Price list (/jobs/prices, phase 1B) ================== */
/* jobs/prices.html and js/jobs/prices.js: the list, one item's cost / margin / price editor
   and the price-file import. Built on the .tech-* and .jobs-* pieces above. */

.pl-home-link,
a.tech-who { text-decoration: none; }
a.tech-who:hover { background: var(--gx-fill-6); }

.pl-crumbs { margin: 0 0 10px; font-size: 14px; }
.pl-crumbs a { color: var(--gx-text-3); text-decoration: none; border-bottom: 2px solid var(--gx-yellow); padding-bottom: 1px; }

.pl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.pl-actions .btn { text-decoration: none; }
#pl-item-form .pl-actions { margin-top: 20px; }
.pl-banner-actions { margin-top: 10px; }

/* Search and filters. */
.pl-filters { margin: 0 0 8px; }
.tech-panel .pl-filters input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1.45 'DM Sans', system-ui, sans-serif;
  padding: 13px 14px;
  border: 1.5px solid var(--gx-field-line);
  border-radius: 10px;
  background: var(--gx-field);
  color: var(--gx-strong);
}
.tech-panel .pl-filters input[type="search"]:focus {
  outline: none;
  border-color: var(--gx-focus-line);
  box-shadow: 0 0 0 3px var(--gx-focus-ring);
}
.pl-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pl-filter-row select { flex: 1 1 160px; min-width: 0; }
.pl-filter-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--gx-warn-text);
}

.pl-bulk { margin: 0 0 14px; }
.pl-bulk .tech-hint { margin-top: 8px; }

/* The list: one tappable card per item, price on the right. */
.pl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--gx-card);
  border: 1.5px solid var(--gx-line-2);
  border-radius: 10px;
  color: var(--gx-strong);
  text-decoration: none;
}
.pl-item:hover,
.pl-item:focus-visible { border-color: var(--gx-line-strong); outline: none; }
.pl-item.is-off { opacity: 0.6; }
.pl-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-item-code { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.pl-item-desc { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.pl-item-meta { font-size: 13px; color: var(--gx-muted-2); }
.pl-item-money { font-size: 13px; color: var(--gx-text-2); }
.pl-item-money.is-bad { color: var(--gx-bad); font-weight: 700; }
.pl-item-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 0 0 auto; }
.pl-sell { font-weight: 700; font-size: 17px; white-space: nowrap; }
.pl-unit { font-size: 12.5px; color: var(--gx-muted-2); white-space: nowrap; }

/* The item form. */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; }
.tech-panel .pl-grid select,
.tech-panel #pl-item-form select,
.tech-panel #pl-new-set { width: 100%; box-sizing: border-box; }
.tech-panel #pl-item-form textarea { min-height: 84px; }
.pl-label-note { font-weight: 400; color: var(--gx-muted-2); }

.pl-money {
  /* A fieldset is as wide as its content by default, which pushed the page sideways on a phone. */
  min-width: 0;
  margin: 18px 0 4px;
  padding: 4px 14px 12px;
  border: 1.5px solid var(--gx-line-3);
  border-radius: 10px;
  background: var(--gx-well);
}
.pl-money legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--gx-strong);
}
.pl-legend-note { font-weight: 400; color: var(--gx-muted-2); margin-left: 4px; }
.pl-money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
@media (max-width: 480px) {
  .pl-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-money-grid > div:last-child { grid-column: 1 / -1; }
}
.pl-affix { display: flex; align-items: center; gap: 6px; }
.pl-affix span { color: var(--gx-text-3); font-size: 16px; }
.tech-panel .pl-affix input[type="text"] { flex: 1 1 0; min-width: 0; width: 100%; }
.pl-money-note { font-size: 14px; color: var(--gx-good-ink); margin: 10px 0 8px; line-height: 1.45; min-height: 1.45em; }
.pl-money-note.is-bad { color: var(--gx-bad); font-weight: 700; }

/* Import. */
.pl-rules { margin: 0 0 6px; padding-left: 20px; color: var(--gx-text-2); font-size: 14.5px; line-height: 1.5; }
.pl-rules li { margin-bottom: 4px; }
.pl-preview-file { font-size: 14.5px; color: var(--gx-text-2); margin: 0 0 10px; overflow-wrap: anywhere; }
.pl-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
@media (max-width: 480px) { .pl-counts { grid-template-columns: 1fr 1fr; } }
.pl-count {
  background: var(--gx-card);
  border: 1.5px solid var(--gx-line-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.pl-count dt { font-size: 13px; color: var(--gx-muted-2); }
.pl-count dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; color: var(--gx-strong); }
.pl-count.is-good dd { color: var(--gx-good); }
.pl-count.is-warn dd { color: var(--gx-warn); }

.pl-details {
  background: var(--gx-card);
  border: 1.5px solid var(--gx-line-2);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 10px;
}
.pl-details summary { cursor: pointer; font-weight: 700; color: var(--gx-strong); }
.pl-preview-list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.pl-preview-list li { margin-bottom: 8px; overflow-wrap: anywhere; }
.pl-preview-sub { display: block; color: var(--gx-text-3); font-size: 13px; }

/* === ADDED 2026-10-23: command centre bar, tabs, home ======================== */
/* The app bar on every /jobs page except the quote print page, the phone tab bar, the More
   sheet, "search or jump to", and the /jobs home (hero, count tiles, "Needs you today", area
   cards, office tools). Drawn by js/jobs/common.js and js/jobs/home.js. Replaces the first menu
   bar and the big area buttons from earlier the same day (.jobs-menu, .jobs-quick), whose rules
   are gone.

   Colours are the letterhead's (css/jobs-quote-print.css): ink #111416 and the G mark teal
   #0ABAB5, which is only ever used on dark. Teal TEXT on a light surface is --gx-teal-text
   (about 5:1 on white). Yellow sits on dark only, never on white, the same rule as the print
   sheet. Fonts are the Barlow Condensed and DM Sans weights every jobs page already loads.
   The colour tokens themselves are at the top of this file (theme tokens, 24 Oct 2026); the
   bar, tabs and hero are dark in both themes, so their own colours stay written out here. */

:root {
  --gx-head:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --gx-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gx-bar-h: 60px;
  --gx-tab-h: 64px;
}
@media (max-width: 719px) { :root { --gx-bar-h: 54px; } }

.gx-ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
/* style.css's .sr-only plus white-space: nowrap, without which some screen readers run the words
   of a one-pixel-wide label together. */
.jobs-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.gx-modal-open { overflow: hidden; }

/* The page's own header (logo, page name, Live pill, name button) is hidden on screen by CSS
   alone, so it never flashes before the script runs; the bar takes its place. It stays in the
   page for the page scripts that fill #jobs-who and #jobs-env, and it prints. Until the bar is
   in, the page keeps the bar's room and paints its dark band, so nothing jumps. Never the quote
   print page (.qp-body), whose header and print sheet are its own. */
@media screen {
  .jobs-body:not(.qp-body) > .jobs-shell > .tech-header { display: none; }
}
.jobs-body:not(.qp-body) {
  background: linear-gradient(var(--gx-band), var(--gx-band)) top / 100% calc(var(--gx-bar-h) + env(safe-area-inset-top)) no-repeat, var(--gx-page);
}
html:not(.has-jobs-bar) .jobs-body:not(.qp-body) { padding-top: calc(var(--gx-bar-h) + env(safe-area-inset-top)); }
.jobs-body:not(.qp-body) > .jobs-shell { padding-top: 22px; }
/* Jumps to an anchor (#lead-118) and scrollIntoView stop below the bar, and above the tabs. */
html.has-jobs-bar { scroll-padding-top: calc(var(--gx-bar-h) + env(safe-area-inset-top) + 12px); }

.jobs-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  font-weight: 700;
  text-decoration: none;
}
.jobs-skip:focus { top: calc(8px + env(safe-area-inset-top)); outline: 2px solid var(--gx-ink); }

/* ---- the bar */
.jobs-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--gx-bar);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  color: #fff;
  box-shadow: var(--gx-bar-shadow);
  font-family: var(--gx-body);
}
.jobs-bar-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  height: var(--gx-bar-h);
  margin: 0 auto;
  /* A phone on its side (the laptop layout) runs under the notch: keep clear of it. */
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}
.jobs-bar :focus-visible { outline: 2px solid var(--gx-yellow); outline-offset: -2px; border-radius: 8px; }

/* The home link fills the bar's height, so a thumb a little above or below the logo still lands. */
.jobs-brand { display: flex; align-items: center; align-self: stretch; gap: 10px; flex: 0 1 auto; min-width: 0; color: #fff; text-decoration: none; }
.jobs-brand-g { display: block; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; }
.jobs-brand-word { font: 700 23px/1 var(--gx-head); letter-spacing: 0.05em; }
.jobs-brand-tag {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  font: 700 11px/1 var(--gx-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gx-teal);
}
.jobs-brand-page { display: none; }

/* Every area this person can open. What does not fit folds into More (measured by common.js). */
.jobs-links { display: flex; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.jobs-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 0;
  background: none;
  color: #b4bbc0;
  font: 500 14px/1 var(--gx-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.jobs-link:hover { color: #fff; }
.jobs-link[aria-current="page"] { color: #fff; font-weight: 700; }
.jobs-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gx-yellow);
}
.jobs-link[hidden] { display: none; }
.jobs-link-more .gx-ico { width: 16px; height: 16px; }
.jobs-link-more[aria-expanded="true"] .gx-ico { transform: rotate(180deg); }
/* An area that arrived on this device in the last few days (Jobs, Past jobs) carries a teal dot. */
.jobs-link.is-fresh .jobs-link-text::after,
.jobs-more-item.is-fresh .jobs-link-text::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 0 6px 5px;
  border-radius: 50%;
  background: var(--gx-teal);
  vertical-align: middle;
}

/* Count badges: teal is new, coral is late. Ink text on both, so 11px stays readable. */
.jobs-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gx-teal);
  color: var(--gx-ink);
  font: 700 11px/18px var(--gx-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.jobs-badge.is-late { background: var(--gx-coral); }
.jobs-badge[hidden] { display: none; }
/* On the menus (white in light) the same badges in the darker teal and red, with white text;
   dark mode keeps the bar's own teal and coral with ink text (tokens, end of file). */
.jobs-more-menu .jobs-badge,
.jobs-sheet .jobs-badge { background: var(--gx-menu-badge); color: var(--gx-menu-badge-text); }
.jobs-more-menu .jobs-badge.is-late,
.jobs-sheet .jobs-badge.is-late { background: var(--gx-menu-badge-late); }

.jobs-more-menu {
  position: absolute;
  top: calc(100% - 2px);
  z-index: 2;
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  background: var(--gx-raised);
  box-shadow: var(--gx-shadow-pop);
}
.jobs-more-menu[hidden] { display: none; }
.jobs-more-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--gx-strong);
  font: 700 14px/1 var(--gx-body);
  text-decoration: none;
}
.jobs-more-item:hover { background: var(--gx-raised-fill); }
.jobs-more-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gx-current); }
.jobs-more-menu :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: -2px; }

.jobs-bar-tools { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.jobs-jump-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 7px 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #c3c9cd;
  font: 500 13px/1 var(--gx-body);
  cursor: pointer;
}
.jobs-jump-btn:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.jobs-jump-btn .gx-ico { width: 18px; height: 18px; }
.jobs-jump-btn kbd,
.jobs-jump-foot kbd {
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  color: #9aa1a6;
  font: 700 11px/1 var(--gx-body);
}
.jobs-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  cursor: pointer;
}
.jobs-icon-btn .gx-ico { width: 22px; height: 22px; }

.jobs-env-pill {
  padding: 6px 9px;
  border: 1px solid rgba(250, 237, 39, 0.38);
  border-radius: 999px;
  background: rgba(250, 237, 39, 0.1);
  color: var(--gx-yellow);
  font: 700 11px/1 var(--gx-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jobs-env-pill.is-live { border-color: rgba(143, 216, 176, 0.38); background: rgba(46, 125, 79, 0.2); color: #9fe0bb; }

.jobs-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.jobs-avatar-face {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(140deg, #19d3cd, var(--gx-teal) 55%, #078f8b);
  color: var(--gx-ink);
  font: 700 17px/1 var(--gx-head);
  letter-spacing: 0.02em;
}
.jobs-avatar:hover .jobs-avatar-face,
.jobs-avatar[aria-expanded="true"] .jobs-avatar-face { box-shadow: 0 0 0 2px var(--gx-bar-solid), 0 0 0 4px rgba(10, 186, 181, 0.6); }

.jobs-acct {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 3;
  width: 280px;
  padding: 16px;
  border-radius: 16px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  box-shadow: var(--gx-shadow-pop);
}
.jobs-acct[hidden] { display: none; }
.jobs-acct-head { display: flex; align-items: center; gap: 12px; }
.jobs-acct-head strong { display: block; font-size: 16px; }
.jobs-acct-head span:not(.jobs-avatar-face) { display: block; font-size: 13px; color: var(--gx-muted); }
.jobs-acct-role { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px; font-size: 14px; color: var(--gx-text-2a); }
.jobs-acct-role .gx-ico { width: 18px; height: 18px; color: var(--gx-teal-text); }
.jobs-acct-env { margin: 0 0 14px 26px; font-size: 13px; color: var(--gx-muted); }
.jobs-acct-out,
.jobs-sheet-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--gx-line);
  border-radius: 10px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font: 700 14px/1 var(--gx-body);
  cursor: pointer;
}
.jobs-acct-out { width: 100%; }
.jobs-acct-out:hover,
.jobs-sheet-out:hover { border-color: var(--gx-line-strong); }
.jobs-acct :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }

/* ---- the phone tab bar (shown under 720px) */
.jobs-tabbar { display: none; }

/* ---- More sheet and "search or jump to": both are native <dialog>s (Esc and focus for free) */
.jobs-sheet,
.jobs-jump { padding: 0; border: 0; background: var(--gx-raised); color: var(--gx-strong); font-family: var(--gx-body); }
.jobs-sheet::backdrop,
.jobs-jump::backdrop { background: rgba(17, 20, 22, 0.55); }
.jobs-sheet :focus-visible,
.jobs-jump :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }

.jobs-sheet {
  width: 100%;
  max-width: 560px;
  max-height: calc(100% - 40px);
  margin: auto auto 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
}
.jobs-sheet[open] { animation: gx-up 0.3s var(--gx-ease); }
.jobs-sheet-grip { width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--gx-grip); }
.jobs-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.jobs-sheet-title { margin: 0 2px; font: 700 22px/1 var(--gx-head); letter-spacing: 0.05em; text-transform: uppercase; }
.jobs-sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--gx-raised-fill); cursor: pointer; }
.jobs-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jobs-sheet-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 8px;
  border-radius: 16px;
  background: var(--gx-raised-fill);
  color: var(--gx-strong);
  font: 700 13px/1.15 var(--gx-body);
  text-align: center;
  text-decoration: none;
}
.jobs-sheet-tile:active { transform: scale(0.97); }
.jobs-sheet-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gx-deep); color: var(--gx-teal); }
.jobs-sheet-tile[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--gx-current); }
.jobs-sheet-tile .jobs-badge { position: absolute; top: 8px; right: 8px; }
.jobs-sheet-me { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gx-line); }
.jobs-sheet-me div { flex: 1; min-width: 0; font-size: 13px; color: var(--gx-muted); }
.jobs-sheet-me strong { display: block; color: var(--gx-strong); font-size: 15px; }

.jobs-jump {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  margin: 12vh auto auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--gx-shadow-jump);
}
.jobs-jump[open] { display: flex; flex-direction: column; animation: gx-pop 0.2s var(--gx-ease); }
.jobs-jump-field { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--gx-line); }
.jobs-jump-field > .gx-ico { width: 22px; height: 22px; color: var(--gx-muted); }
.jobs-jump-field input {
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--gx-strong);
  font: 500 18px var(--gx-body);
}
.jobs-jump .jobs-jump-field input:focus-visible { outline: none; }
.jobs-jump-close { min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--gx-raised-fill); color: var(--gx-text-2a); font: 700 12px/1 var(--gx-body); cursor: pointer; }
.jobs-jump-cancel { display: none; }
.jobs-jump-list { flex: 1 1 auto; max-height: min(56vh, 460px); margin: 0; padding: 6px 8px 10px; overflow-y: auto; list-style: none; }
.jobs-jump-group { padding: 14px 10px 6px; color: var(--gx-muted); font: 700 11px/1 var(--gx-body); letter-spacing: 0.14em; text-transform: uppercase; }
.jobs-jump-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.jobs-jump-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--gx-raised-fill); color: var(--gx-num); }
.jobs-jump-ico .gx-ico { width: 18px; height: 18px; }
.jobs-jump-text { flex: 1; min-width: 0; }
.jobs-jump-text b,
.jobs-jump-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-jump-text b { font-weight: 700; font-size: 15px; }
.jobs-jump-text small { color: var(--gx-muted); font-size: 13px; }
.jobs-jump-text mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--gx-teal); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.jobs-jump-opt > .gx-ico { width: 16px; height: 16px; color: var(--gx-faint-2); }
.jobs-jump-opt[aria-selected="true"] { background: var(--gx-ink); color: #fff; }
.jobs-jump-opt[aria-selected="true"] small { color: #b4bbc0; }
.jobs-jump-opt[aria-selected="true"] .jobs-jump-ico { background: var(--gx-ink-3); color: var(--gx-teal); }
.jobs-jump-opt[aria-selected="true"] mark { text-decoration-color: var(--gx-yellow); }
.jobs-jump-opt[aria-selected="true"] > .gx-ico { color: var(--gx-teal); }
.jobs-jump-empty,
.jobs-jump-note { padding: 14px 12px; color: var(--gx-muted); font-size: 14px; }
.jobs-jump-empty { padding: 24px 12px; text-align: center; }
.jobs-jump-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--gx-line); background: var(--gx-raised-foot); color: var(--gx-muted); font-size: 12px; }
.jobs-jump-foot kbd { border-color: var(--gx-line); background: var(--gx-raised); color: var(--gx-text-2a); margin-right: 2px; }

/* ---- the /jobs home */
.jobs-shell--wide { max-width: 1280px; }
#jobs-gate {
  max-width: 520px;
  margin: 12px auto 0;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: var(--gx-card);
  border: 1px solid var(--gx-line);
  box-shadow: var(--gx-shadow-gate);
}
#jobs-loading { text-align: center; padding: 30px 0; }

.cc { --cc-gap: 16px; padding-bottom: 8px; }
.cc :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }

.cc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 40px 120px;
  border-radius: 26px;
  background: var(--gx-hero);
  color: #fff;
}
.cc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(620px 300px at 90% -12%, rgba(10, 186, 181, 0.32), transparent 70%),
    radial-gradient(520px 260px at -4% 125%, rgba(10, 186, 181, 0.12), transparent 70%);
}
.cc-hero.is-solo { padding-bottom: 54px; }
.cc-hero :focus-visible { outline-color: var(--gx-yellow); }
.cc-hero-g { position: absolute; right: -36px; top: -46px; z-index: -1; width: 300px; height: 300px; opacity: 0.07; pointer-events: none; }
/* The pulse line: a still teal trace, a runner that travels along it, and a thin teal-to-yellow
   wire under the hero's bottom edge. The runner stops under reduced motion. The trace has its own
   strip between the last line of text and the tops of the tiles (which cover the bottom 60px),
   so it never runs through the words, however they wrap. */
.cc-wire { position: absolute; left: 0; right: 0; bottom: 64px; z-index: -1; width: 100%; height: 34px; pointer-events: none; }
.cc-hero.is-solo .cc-wire { bottom: 12px; height: 30px; }
.cc-wire path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-wire .w-base { stroke: rgba(10, 186, 181, 0.24); }
.cc-wire .w-run { stroke: var(--gx-teal); stroke-dasharray: 90 2400; animation: cc-run 5.5s linear infinite; }
.cc-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gx-teal), #6fd6b4 60%, var(--gx-yellow));
  opacity: 0.85;
}

.cc-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  color: var(--gx-teal);
  font: 700 12px/1.2 var(--gx-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cc-time { color: #c3c9cd; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cc-date-short,
.cc-health-short { display: none; }
.cc-health {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #d6dadc;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
}
/* The pill looks 30px tall; this makes it a 44px target for a thumb (from the padding box, 28px). */
.cc-health::before { content: ''; position: absolute; inset: -8px -4px; }
.cc-health:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.cc-health[hidden] { display: none; }
.cc-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #4fd18b; box-shadow: 0 0 0 3px rgba(79, 209, 139, 0.2); }
.cc-health.is-warn .cc-dot { background: #f5c242; box-shadow: 0 0 0 3px rgba(245, 194, 66, 0.22); }
.cc-health.is-bad .cc-dot { background: var(--gx-coral); box-shadow: 0 0 0 3px rgba(255, 106, 94, 0.24); }

.cc .cc-hello { margin: 14px 0 12px; color: #fff; font: 700 60px/0.95 var(--gx-head); letter-spacing: 0.005em; }
.cc-hello em { font-style: normal; color: var(--gx-yellow); }
.cc .cc-sub { max-width: 60ch; margin: 0; color: #c9cdd0; font-size: 17px; line-height: 1.5; }
.cc-sub strong { color: #fff; }
.cc-find {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 540px;
  height: 56px;
  margin-top: 22px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  color: #e3e6e8;
  font: 500 16px/1 var(--gx-body);
  text-align: left;
  cursor: pointer;
}
.cc-find:hover { background: rgba(255, 255, 255, 0.14); }
.cc-find[hidden] { display: none; }
.cc-find .gx-ico { width: 22px; height: 22px; color: var(--gx-teal); }
.cc-find kbd { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 5px; color: #9aa1a6; font: 700 11px/1 var(--gx-body); }

.cc-banners { margin-top: 18px; }
.cc-banners .jobs-banner { margin-bottom: 10px; }

/* Count tiles, overlapping the hero's bottom edge. Each tile is a link into its area. */
.cc-tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: -60px 20px 0;
  padding: 0;
  list-style: none;
}
.cc-tiles[hidden] { display: none; }
.cc-tiles > li { display: flex; min-width: 0; }
.cc-tile {
  --i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 188px;
  padding: 18px 18px 14px;
  border: 1px solid var(--gx-tile-edge);
  border-radius: 20px;
  background: var(--gx-card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--gx-shadow-tile);
  transition: transform 0.2s var(--gx-ease), box-shadow 0.2s var(--gx-ease);
  animation: cc-rise 0.55s var(--gx-ease) both;
  animation-delay: calc(var(--i) * 70ms);
}
.cc-tile:hover { transform: translateY(-3px); box-shadow: var(--gx-shadow-tile-hover); }
.cc-tile:active { transform: scale(0.985); }
.cc-tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--gx-text-2c); font-weight: 700; font-size: 14px; }
.cc-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--gx-deep); color: var(--gx-teal); }
.cc-ico .gx-ico { width: 19px; height: 19px; }
/* The small flags' text is a shade darker than --gx-warn, --gx-good and --gx-teal-text, which
   fall just under 4.5:1 on these tinted backgrounds at 11 to 12px (now about 5.2 to 5.6:1). */
.cc-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gx-warn-bg);
  color: var(--gx-warn-ink-2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cc-flag.is-bad { background: var(--gx-bad-bg); color: var(--gx-bad); }
.cc-flag.is-good { background: var(--gx-good-bg-2); color: var(--gx-good-ink-2); }
.cc-flag.is-new { background: var(--gx-teal-tint); color: var(--gx-teal-ink); }
.cc-ping { width: 7px; height: 7px; border-radius: 50%; background: var(--gx-teal); animation: cc-ping 1.8s ease-out 4; }
.cc-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 16px 0 2px; color: var(--gx-num); font: 700 64px/0.9 var(--gx-head); font-variant-numeric: tabular-nums; }
.cc-num small { color: var(--gx-muted); font: 700 19px/1 var(--gx-head); letter-spacing: 0.03em; text-transform: uppercase; }
.cc-num.is-word { margin-top: 24px; font-size: 42px; }
.cc-tile.is-bad .cc-num { color: var(--gx-bad); }
.cc-tile.is-good .cc-num { color: var(--gx-good); }
.cc-cap { color: var(--gx-text-2b); font-size: 14px; font-weight: 500; }
.cc-meter { display: flex; gap: 3px; height: 7px; margin: 12px 0 2px; overflow: hidden; border-radius: 4px; background: var(--gx-fill-3); }
.cc-meter i { display: block; height: 100%; }
.cc-meter .m-over { background: var(--gx-bad); }
.cc-meter .m-30 { background: var(--gx-warn-line); }
.cc-meter .m-90 { background: var(--gx-teal); }
.cc-meter .m-later { background: var(--gx-meter-later); }
.cc-foot { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gx-line); color: var(--gx-muted); font-size: 13px; }
.cc-meter + .cc-foot,
.cc-cap + .cc-foot { margin-top: auto; }
.cc-tile .cc-cap { margin-bottom: 12px; }
.cc-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-go { display: inline-flex; margin-left: auto; color: var(--gx-strong); transition: transform 0.2s var(--gx-ease); }
.cc-go .gx-ico { width: 18px; height: 18px; }
.cc-tile:hover .cc-go,
.cc-area:hover .cc-go { transform: translateX(4px); }
.cc-tile--today { border-color: var(--gx-today-line); background: linear-gradient(180deg, var(--gx-today-top), var(--gx-card) 60%); }
.cc-tile.is-skel { min-height: 188px; background: linear-gradient(100deg, var(--gx-card) 30%, var(--gx-shimmer) 50%, var(--gx-card) 70%) 0 0 / 300% 100%; animation: cc-shimmer 1.4s linear infinite; }
.cc-tile.is-skel::before { content: ''; width: 34px; height: 34px; border-radius: 10px; background: var(--gx-fill-3); }
.cc-tile.is-skel::after { content: ''; width: 60%; height: 44px; margin-top: 18px; border-radius: 8px; background: var(--gx-fill-3); }
.cc-tiles-fail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 20px; border-radius: 18px; background: var(--gx-card); color: var(--gx-text-2b); box-shadow: var(--gx-shadow-soft); }
.cc-tiles-fail .gx-ico { color: var(--gx-bad); }

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--gx-line);
  border-radius: 10px;
  background: var(--gx-card);
  color: var(--gx-strong);
  font: 700 14px/1 var(--gx-body);
  cursor: pointer;
}
.cc-btn:hover { border-color: var(--gx-line-strong); }

/* "Needs you today" beside "Everything else". */
.cc-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 34px; }
.cc-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.cc-cols > section[hidden] { display: none; }
.cc .cc-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; padding: 0; border: 0; color: var(--gx-strong); font: 700 22px/1.1 var(--gx-head); letter-spacing: 0.05em; text-transform: uppercase; }
.cc-h2 small { color: var(--gx-muted); font: 500 13px/1.3 var(--gx-body); letter-spacing: 0; text-transform: none; }
.cc-list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--gx-line); border-radius: 18px; background: var(--gx-card); }
.cc-row { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 12px 16px; border-top: 1px solid var(--gx-line); color: inherit; text-decoration: none; transition: background 0.15s; }
.cc-list li:first-child .cc-row { border-top: 0; }
.cc-row:hover { background: var(--gx-hover); }
.cc .cc-row:focus-visible { outline-offset: -3px; }
.cc-kind { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; }
.cc-kind .gx-ico { width: 18px; height: 18px; }
.cc-kind.k-bad { background: var(--gx-bad-bg); color: var(--gx-bad); }
.cc-kind.k-warn { background: var(--gx-warn-bg); color: var(--gx-warn); }
.cc-kind.k-new { background: var(--gx-teal-tint); color: var(--gx-teal-text); }
.cc-row-main { flex: 1; min-width: 0; }
.cc-row-main b,
.cc-row-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-row-main b { font-size: 15px; }
.cc-row-main small { color: var(--gx-muted); font-size: 13px; }
.cc-when { flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cc-when.k-bad { color: var(--gx-bad); }
.cc-when.k-warn { color: var(--gx-warn); }
.cc-when.k-new { color: var(--gx-teal-text); }
.cc-empty { display: flex; align-items: center; gap: 12px; padding: 22px 18px; color: var(--gx-muted); }
.cc-empty .gx-ico { color: var(--gx-good); }

.cc-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cc-area {
  --i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 122px;
  padding: 16px;
  border: 1px solid var(--gx-line);
  border-radius: 18px;
  background: var(--gx-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.2s var(--gx-ease), box-shadow 0.2s var(--gx-ease);
  animation: cc-rise 0.55s var(--gx-ease) both;
  animation-delay: calc(180ms + var(--i) * 50ms);
}
.cc-area:hover { border-color: var(--gx-line-strong); transform: translateY(-2px); box-shadow: var(--gx-shadow-lift); }
.cc-area:active { transform: scale(0.985); }
.cc-area-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-area-name { margin-top: auto; font: 700 24px/1 var(--gx-head); letter-spacing: 0.02em; }
.cc-area-meta { margin-top: -8px; overflow: hidden; color: var(--gx-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cc-area-new { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--gx-teal-tint); color: var(--gx-teal-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-area.is-fresh { border: 1.5px dashed var(--gx-teal-text); }
.cc-areas.is-big { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cc-areas.is-big .cc-area { min-height: 150px; }
.cc-areas.is-big .cc-area-name { font-size: 30px; }
.cc-lock { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--gx-teal-tint); color: var(--gx-teal-note); font-size: 14px; }
.cc-lock .gx-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--gx-teal-text); }

/* Office tools: the existing settings, staff, backups and change history, folded into panels
   with a one-line status each. A panel's list loads the first time it opens (js/jobs/home.js). */
.cc-tools { margin-top: 34px; }
.cc-tools[hidden] { display: none; }
.cc-panel { margin-bottom: 10px; border: 1px solid var(--gx-line); border-radius: 16px; background: var(--gx-card); }
.cc-panel[hidden] { display: none; }
.cc-panel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 15px;
  list-style: none;
  cursor: pointer;
}
.cc-panel > summary::-webkit-details-marker { display: none; }
.cc-panel > summary:hover { background: var(--gx-hover); }
.cc .cc-panel > summary:focus-visible { outline-offset: -2px; }
.cc-panel .cc-ico { width: 32px; height: 32px; border-radius: 9px; }
.cc-panel .cc-ico .gx-ico { width: 17px; height: 17px; }
.cc-state { margin-left: auto; color: var(--gx-muted); font-size: 13px; font-weight: 500; text-align: right; }
.cc-state.is-good { color: var(--gx-good); font-weight: 700; }
.cc-state.is-warn { color: var(--gx-warn); font-weight: 700; }
.cc-state.is-bad { color: var(--gx-bad); font-weight: 700; }
.cc-chev { display: inline-flex; color: var(--gx-muted); transition: transform 0.2s var(--gx-ease); }
.cc-chev .gx-ico { width: 18px; height: 18px; }
.cc-panel[open] > summary .cc-chev { transform: rotate(90deg); }
.cc-panel-body { padding: 4px 16px 18px; }
.cc-panel-body > .tech-hint:first-child { margin-top: 0; }
/* Setting names such as compliance_weekly_push_enabled have no break points: let them wrap. */
.cc-panel-body .jobs-row-title { overflow-wrap: anywhere; }

/* Recent changes as a feed: initials, a sentence, how long ago. */
.cc .jobs-audit { border-top: 0; }
.cc .jobs-audit li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; }
.cc .jobs-audit li.is-more { display: none; }
/* Everything but the dot in the second column, however many lines a change has (24 Oct 2026). */
.cc .jobs-audit li > :not(.cc-who-dot) { grid-column: 2; }
.cc .jobs-audit.is-all li.is-more { display: grid; }
.cc-who-dot { grid-row: span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gx-fill-3); color: var(--gx-text-2d); font: 700 13px/1 var(--gx-head); letter-spacing: 0.02em; }
.cc-who-dot.is-t { background: var(--gx-deep); color: var(--gx-teal); }
.cc-who-dot.is-a { background: var(--gx-teal-tint); color: var(--gx-teal-text); }
.cc .jobs-audit-what { font-weight: 500; }
.cc .jobs-audit-when { color: var(--gx-muted); font-size: 12.5px; }
.cc-more-btn { margin-top: 10px; }
/* "Open the Log" under Recent changes (24 Oct 2026): the whole history, searchable, at /jobs/log. */
.cc-audit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.cc-audit-foot .cc-btn { min-height: 44px; text-decoration: none; }
.cc-audit-foot .gx-ico { width: 17px; height: 17px; }

.cc-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; margin: 28px 0 0; color: var(--gx-muted); font-size: 13px; text-align: center; }
.cc-refresh { min-height: 44px; padding: 6px 8px; border: 0; background: none; color: var(--gx-teal-text); font: 700 13px/1 var(--gx-body); cursor: pointer; }
.cc-sys.is-bad { color: var(--gx-bad); font-weight: 700; }

@keyframes cc-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes cc-run { from { stroke-dashoffset: 2490; } to { stroke-dashoffset: 0; } }
@keyframes cc-ping { 0% { box-shadow: 0 0 0 0 rgba(10, 186, 181, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(10, 186, 181, 0); } }
@keyframes cc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes gx-up { from { transform: translateY(40px); opacity: 0.4; } }
@keyframes gx-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
@keyframes gx-grow { from { transform: scaleX(0.4); } }
@keyframes gx-drop { from { transform: translateY(-16px); opacity: 0; } }

/* ---- tablet: links still in the bar, search shrinks to its icon (a full 44px target, since a
   tablet has no bottom tabs), columns stack */
@media (max-width: 1023px) {
  .jobs-brand-tag,
  .jobs-jump-btn .jobs-jump-label,
  .jobs-jump-btn kbd { display: none; }
  .jobs-jump-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .cc-cols { grid-template-columns: minmax(0, 1fr); }
  .cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-tiles > li.is-wide { grid-column: 1 / -1; }
  .cc .cc-hello { font-size: 52px; }
}

/* ---- phone: compact bar with the page name, tabs at the bottom, More sheet */
@media (max-width: 719px) {
  .jobs-bar-in { gap: 6px; padding: 0 max(6px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .jobs-brand { gap: 10px; flex: 1 1 auto; }
  .jobs-brand-g { width: 28px; height: 28px; }
  .jobs-brand-word,
  .jobs-links,
  .jobs-jump-btn { display: none; }
  .jobs-brand-page { display: block; min-width: 0; overflow: hidden; font: 700 23px/1.1 var(--gx-head); letter-spacing: 0.03em; text-overflow: ellipsis; white-space: nowrap; }
  .jobs-brand.is-home .jobs-brand-word { display: block; font-size: 22px; }
  .jobs-bar-tools { gap: 2px; }
  .jobs-icon-btn { display: inline-flex; }
  .jobs-env-pill { margin: 0 4px; padding: 5px 7px; font-size: 10px; }
  .jobs-env-long { display: none; }
  .jobs-avatar-face { width: 34px; height: 34px; font-size: 16px; }
  .jobs-acct { position: fixed; top: calc(var(--gx-bar-h) + env(safe-area-inset-top) + 8px); left: 12px; right: 12px; width: auto; }

  html.has-jobs-bar { scroll-padding-bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 12px); }
  .jobs-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: var(--gx-tabbar);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--gx-tabbar-shadow);
    font-family: var(--gx-body);
  }
  /* The keyboard is up: the tabs step aside instead of riding on top of it. */
  body.is-typing .jobs-tabbar { display: none; }
  .jobs-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: var(--gx-tab-h);
    padding: 0;
    border: 0;
    background: none;
    color: #a3abb0;
    font: 700 11px/1 var(--gx-body);
    text-decoration: none;
    cursor: pointer;
  }
  .jobs-tab-ico { position: relative; display: grid; place-items: center; }
  .jobs-tab-ico .gx-ico { width: 24px; height: 24px; }
  .jobs-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jobs-tab[aria-current="page"] { color: #fff; }
  .jobs-tab[aria-current="page"] .jobs-tab-ico { color: var(--gx-yellow); }
  .jobs-tab[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0; left: 26%; right: 26%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--gx-yellow);
    animation: gx-grow 0.32s var(--gx-ease);
  }
  .jobs-tab .jobs-badge { position: absolute; top: 6px; left: calc(50% + 4px); min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; line-height: 17px; box-shadow: 0 0 0 2px var(--gx-bar-solid); }
  .jobs-tab.is-fresh .jobs-tab-ico::after { content: ''; position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gx-teal); box-shadow: 0 0 0 2px var(--gx-bar-solid); }
  /* Search, raised in the middle, where a thumb lands. */
  .jobs-tab-search .jobs-tab-ico {
    width: 52px; height: 52px;
    margin-top: -24px;
    border-radius: 50%;
    background: var(--gx-yellow);
    color: var(--gx-ink);
    box-shadow: 0 0 0 5px var(--gx-bar-solid), 0 10px 20px -8px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s var(--gx-ease);
  }
  .jobs-tab-search:active .jobs-tab-ico { transform: scale(0.92) rotate(-6deg); }
  .jobs-tab-search { color: #fff; }
  .jobs-tabbar :focus-visible,
  .jobs-tab:focus-visible { outline: 2px solid var(--gx-yellow); outline-offset: -4px; border-radius: 12px; }
  body.has-jobs-tabbar { padding-bottom: calc(var(--gx-tab-h) + 12px + env(safe-area-inset-bottom)); }
  /* The quote editor's running total sits on top of the tabs, not under them. */
  body.has-jobs-tabbar .qx-sticky { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  body.has-jobs-tabbar.is-typing .qx-sticky { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  .jobs-jump { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .jobs-jump[open] { animation: gx-drop 0.28s var(--gx-ease); }
  .jobs-jump-field { padding-top: env(safe-area-inset-top); }
  .jobs-jump-esc { display: none; }
  .jobs-jump-cancel { display: inline; }
  .jobs-jump-close { min-height: 44px; padding: 0 12px; background: none; color: var(--gx-teal-text); font-size: 15px; }
  .jobs-jump-list { max-height: none; }
  .jobs-jump-foot { display: none; }

  .jobs-shell--wide { padding-left: 12px; padding-right: 12px; }
  .jobs-body:not(.qp-body) > .jobs-shell { padding-top: 14px; }
  #jobs-gate { padding: 22px 18px 24px; }
  /* The tiles cover the bottom 44px; the pulse line has the 40px above them to itself. */
  .cc-hero { padding: 18px 20px 84px; border-radius: 22px; }
  .cc-hero.is-solo { padding-bottom: 44px; }
  .cc-hero-g { top: -30px; right: -54px; width: 200px; height: 200px; }
  .cc-wire { bottom: 50px; height: 26px; }
  .cc-hero.is-solo .cc-wire { bottom: 8px; height: 26px; }
  .cc-eyebrow { flex-wrap: nowrap; gap: 10px; font-size: 11px; }
  .cc-eyebrow > span { white-space: nowrap; }
  .cc-eyebrow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.12em; }
  .cc-date-long,
  .cc-health-text { display: none; }
  .cc-date-short,
  .cc-health-short { display: inline; }
  .cc-health { margin-left: auto; padding: 4px 10px; }
  .cc .cc-hello { margin: 10px 0 6px; font-size: 35px; }
  .cc .cc-sub { font-size: 15px; line-height: 1.45; }
  .cc-find { height: 54px; margin-top: 16px; }
  .cc-find kbd { display: none; }
  .cc-tiles { gap: 10px; margin: -44px 8px 0; }
  .cc-tile { min-height: 0; padding: 14px 14px 13px; border-radius: 18px; }
  .cc-tile.is-skel { min-height: 140px; }
  .cc-tile-head { gap: 6px 8px; font-size: 13px; }
  .cc-ico { width: 30px; height: 30px; border-radius: 9px; }
  .cc-ico .gx-ico { width: 17px; height: 17px; }
  .cc-flag { margin-left: 0; padding: 2px 8px; font-size: 11px; }
  .cc-num { flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 12px; font-size: 48px; }
  .cc-num small { font-size: 14px; }
  .cc-num.is-word { margin-top: 14px; font-size: 30px; }
  .cc-cap { font-size: 13px; }
  .cc-tile .cc-cap { display: -webkit-box; margin-bottom: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .cc-foot { display: none; }
  .cc-cols { gap: 26px; margin-top: 24px; }
  .cc .cc-h2 { font-size: 20px; }
  .cc-row { gap: 12px; padding: 12px 14px; }
  .cc-when { max-width: 84px; font-size: 12.5px; line-height: 1.25; text-align: right; white-space: normal; }
  .cc-areas,
  .cc-areas.is-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cc-area { min-height: 108px; padding: 14px; }
  .cc-areas.is-big .cc-area { min-height: 128px; }
  .cc-areas.is-big .cc-area-name { font-size: 26px; }
  .cc-areas > .cc-area:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cc-tools { margin-top: 26px; }
  .cc-panel > summary { gap: 10px; padding: 8px 12px; }
  .cc-panel-body { padding: 4px 12px 16px; }
  .cc-state { max-width: 42%; }
}

/* Moving between pages: the bar and tabs hold still while the page cross-fades (browsers that
   support cross-document view transitions; the rest just navigate). Never under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .jobs-bar { view-transition-name: gx-bar; }
  .jobs-tabbar { view-transition-name: gx-tabs; }
  ::view-transition-old(root) { animation: 120ms ease-out both gx-fade-out; }
  ::view-transition-new(root) { animation: 220ms var(--gx-ease) both gx-fade-in; }
}
@keyframes gx-fade-out { to { opacity: 0; } }
@keyframes gx-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* Calm motion. style.css already shortens every animation to nothing under reduced motion; here
   the runner and the live dot stop outright, and nothing waits at opacity 0 for an animation
   that never plays. The count-up in home.js checks for itself. */
@media (prefers-reduced-motion: reduce) {
  .cc-wire .w-run { display: none; }
  .cc-ping,
  .cc-tile,
  .cc-area,
  .cc-tile.is-skel { animation: none; }
}

@media print {
  .jobs-bar,
  .jobs-tabbar,
  .jobs-sheet,
  .jobs-jump,
  .jobs-acct,
  .jobs-more-menu,
  .jobs-skip,
  .cc-wire,
  .cc-find,
  .cc-hero-g,
  .cc-refresh { display: none !important; }
  .jobs-body:not(.qp-body) { background: #fff; padding: 0 !important; }
  .cc-hero { background: none; color: #111; padding: 0 0 12px; border-radius: 0; }
  .cc-hero::before,
  .cc-hero::after { display: none; }
  .cc .cc-hello,
  .cc .cc-sub,
  .cc-sub strong,
  .cc-hello em,
  .cc-time,
  .cc-health { color: #111; }
  .cc-eyebrow { color: #087c78; }
  .cc-health { background: none; border-color: #ccc; }
  .cc-tiles { margin: 12px 0 0; }
  .cc-tile,
  .cc-area { animation: none; box-shadow: none; border: 1px solid #ccc; }
}

/* === ADDED 2026-10-24: dark theme ============================================ */
/* html[data-theme="dark"], picked per device (Light, Dark or Auto) by the snippet in each page's
   <head> and GxJobs.theme in js/jobs/common.js. Screen only: anything printed uses the light
   tokens at the top of this file, and the quote print page never gets the attribute at all.

   Deep charcoal, not black, with the brand yellow and teal kept. A black shadow hardly shows on a
   dark page, so depth comes from steps in the surface instead: the page, cards a step lighter,
   menus and dialogs a step more, each with a faint light edge on top. The bar and the hero stay a
   shade apart from the page, so the top of the screen still reads as its own layer. Text and
   state colours measure at least 4.5:1 on the surfaces they sit on (most 7:1 or more). */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --gx-page: #0e1214;
    --gx-card: #161b1e;
    --gx-raised: #1d2428;
    --gx-raised-fill: #283035;
    --gx-raised-foot: #181e22;
    --gx-field: #0f1416;
    --gx-hover: #1c2226;
    --gx-well: #111618;
    --gx-well-2: #111618;
    --gx-fill: #232a2e;
    --gx-fill-2: #283035;
    --gx-fill-3: #252c31;
    --gx-fill-4: #283035;
    --gx-fill-5: #252c31;
    --gx-fill-6: #323b40;
    --gx-grip: #3a454b;
    --gx-shimmer: #1f262a;
    --gx-meter-later: #4a555b;
    --gx-solid: #0a0d0e;
    --gx-invert: #eef1f2;
    --gx-invert-text: #111416;
    --gx-deep: #0a0d0e;
    --gx-hero: linear-gradient(155deg, #16292c 0%, #111a1c 46%, #0f1517 100%);
    --gx-band: #14191c;
    --gx-bar-solid: #14191c;
    --gx-bar: rgba(20, 25, 28, 0.94);
    --gx-bar-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 32px -14px rgba(0, 0, 0, 0.85);
    --gx-tabbar: rgba(20, 25, 28, 0.96);
    --gx-tabbar-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -14px 34px -14px rgba(0, 0, 0, 0.8);

    --gx-line: #2a3237;
    --gx-line-2: #2a3237;
    --gx-line-3: #353f45;
    --gx-line-4: #2f383d;
    --gx-field-line: #5c6970;
    --gx-field-line-2: #5c6970;
    --gx-line-strong: #7a858b;
    --gx-tile-edge: rgba(255, 255, 255, 0.07);

    --gx-max: #fff;
    --gx-strong: #eef1f2;
    --gx-text: #dde2e5;
    --gx-text-2: #c3cacd;
    --gx-text-2a: #c3cacd;
    --gx-text-2b: #c3cacd;
    --gx-text-2c: #c3cacd;
    --gx-text-2d: #c3cacd;
    --gx-text-3: #aab2b6;
    --gx-muted: #9aa3a8;
    --gx-muted-2: #9aa3a8;
    --gx-slate: #9aa3a8;
    --gx-faint: #8a949a;
    --gx-faint-2: #7f898f;
    --gx-num: #f4f6f7;
    --gx-current: #faed27;

    --gx-teal-text: #2fcfc9;
    --gx-teal-ink: #4fd8d2;
    --gx-teal-note: #bfe9e7;
    --gx-teal-tint: rgba(10, 186, 181, 0.16);
    --gx-blue-text: #8dbbff;
    --gx-blue-tint: rgba(105, 167, 255, 0.18);
    --gx-today-line: rgba(250, 237, 39, 0.45);
    --gx-today-top: #262a1d;
    --gx-menu-badge: #0ABAB5;
    --gx-menu-badge-late: #ff6a5e;
    --gx-menu-badge-text: #111416;
    --gx-seg-on: #38434a;
    --gx-seg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.5);

    --gx-good: #5fcf8e;
    --gx-good-ink: #7fdca6;
    --gx-good-ink-2: #7fdca6;
    --gx-good-bg: #173026;
    --gx-good-bg-2: #173026;
    --gx-good-bg-3: #173026;
    --gx-good-bg-4: #173026;
    --gx-warn: #f0c14b;
    --gx-warn-ink: #f3cb63;
    --gx-warn-ink-2: #f3cb63;
    --gx-warn-text: #f1dc9e;
    --gx-warn-bg: #322c15;
    --gx-warn-bg-2: #322c15;
    --gx-warn-bg-3: #322c15;
    --gx-warn-bg-4: #2b2615;
    --gx-warn-line: #e0a800;
    --gx-warn-line-2: #e0a800;
    --gx-bad: #ff8a80;
    --gx-bad-ink: #ffa59d;
    --gx-bad-bg: #3a1d1d;
    --gx-bad-line: #ff6a5e;
    --gx-info: #a9c9f5;
    --gx-info-2: #a9c9f5;
    --gx-info-bg: #1c2d42;
    --gx-info-bg-2: #1c2d42;

    --gx-scrim: rgba(4, 6, 7, 0.92);
    --gx-on-scrim: #fff;
    --gx-on-scrim-2: #c3cacd;
    --gx-paper: #f4f6f7;

    --gx-knob: #eef1f2;
    --gx-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    --gx-focus-line: #0ABAB5;
    --gx-focus-ring: rgba(10, 186, 181, 0.28);
    --gx-backdrop: rgba(0, 0, 0, 0.68);
    --gx-accent: #0ABAB5;

    --gx-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --gx-shadow-jump: 0 40px 90px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.09);
    --gx-shadow-gate: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 50px -24px rgba(0, 0, 0, 0.8);
    --gx-shadow-soft: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
    --gx-shadow-lift: 0 20px 40px -22px rgba(0, 0, 0, 0.9);
    --gx-shadow-tile: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    --gx-shadow-tile-hover: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.5), 0 26px 50px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(10, 186, 181, 0.3);
  }

  :root[data-theme="dark"] ::selection { background: rgba(10, 186, 181, 0.4); color: #fff; }

  /* The bar and tabs: the yellow "you are here" marks and the counts glow a little. */
  :root[data-theme="dark"] .jobs-link[aria-current="page"]::after { box-shadow: 0 0 14px rgba(250, 237, 39, 0.55); }
  :root[data-theme="dark"] .jobs-bar .jobs-badge { box-shadow: 0 0 12px -2px rgba(10, 186, 181, 0.75); }
  :root[data-theme="dark"] .jobs-bar .jobs-badge.is-late { box-shadow: 0 0 12px -2px rgba(255, 106, 94, 0.75); }
  :root[data-theme="dark"] .jobs-tab[aria-current="page"]::before { box-shadow: 0 0 14px rgba(250, 237, 39, 0.6); }
  :root[data-theme="dark"] .jobs-tab .jobs-badge { box-shadow: 0 0 0 2px var(--gx-bar-solid), 0 0 12px rgba(10, 186, 181, 0.6); }
  :root[data-theme="dark"] .jobs-tab .jobs-badge.is-late { box-shadow: 0 0 0 2px var(--gx-bar-solid), 0 0 12px rgba(255, 106, 94, 0.6); }
  :root[data-theme="dark"] .jobs-tab-search .jobs-tab-ico { box-shadow: 0 0 0 5px var(--gx-bar-solid), 0 6px 24px -4px rgba(250, 237, 39, 0.5); }

  /* The hero: a teal-lit panel with a hairline edge, lifted off the page. The yellow full stop
     and the running pulse glow. */
  :root[data-theme="dark"] .cc-hero { outline: 1px solid rgba(10, 186, 181, 0.2); outline-offset: -1px; box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.95); }
  :root[data-theme="dark"] .cc-hero::before {
    background:
      radial-gradient(620px 300px at 90% -12%, rgba(10, 186, 181, 0.4), transparent 70%),
      radial-gradient(520px 260px at -4% 125%, rgba(10, 186, 181, 0.16), transparent 70%);
  }
  :root[data-theme="dark"] .cc-hello em { text-shadow: 0 0 24px rgba(250, 237, 39, 0.55); }
  :root[data-theme="dark"] .cc-wire .w-run { filter: drop-shadow(0 0 4px rgba(10, 186, 181, 0.85)); }

  /* Tiles and cards: lit from above. Ink chips get a teal hairline so they still show on a card. */
  :root[data-theme="dark"] .cc-tile:not(.cc-tile--today):not(.is-skel) { background: linear-gradient(180deg, #1b2125, var(--gx-card) 64%); }
  :root[data-theme="dark"] .cc-area:hover { border-color: rgba(10, 186, 181, 0.55); }
  :root[data-theme="dark"] .cc-list,
  :root[data-theme="dark"] .cc-panel,
  :root[data-theme="dark"] .jobs-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
  :root[data-theme="dark"] .cc-ico,
  :root[data-theme="dark"] .jobs-sheet-ico,
  :root[data-theme="dark"] .cc-who-dot.is-t { box-shadow: inset 0 0 0 1px rgba(10, 186, 181, 0.24); }

  /* Search: the picked row would sink into the dialog in ink, so it is a lighter slate with a
     teal edge. Dialog backdrops are a literal colour: ::backdrop does not see the tokens in
     older browsers. */
  :root[data-theme="dark"] .jobs-jump-opt[aria-selected="true"] { background: #273137; box-shadow: inset 3px 0 0 var(--gx-teal); }
  :root[data-theme="dark"] .jobs-jump-opt[aria-selected="true"] .jobs-jump-ico { background: var(--gx-deep); }
  :root[data-theme="dark"] .jobs-sheet::backdrop,
  :root[data-theme="dark"] .jobs-jump::backdrop { background: rgba(0, 0, 0, 0.68); }

  /* style.css's .btn-dark (#0d0d0d) would vanish on a dark card: a raised slate instead. */
  :root[data-theme="dark"] .btn-dark { background: #29323a; border-color: #3a454c; color: #fff; }
  :root[data-theme="dark"] .btn-dark:hover { background: #323d44; border-color: #4f5b62; }

  /* The quote editor's running total and the option tag sit on near-black: a hairline keeps them
     apart from the page. */
  :root[data-theme="dark"] .qx-sticky { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.8); }
  :root[data-theme="dark"] .jobs-tag.qx-option-tag { box-shadow: inset 0 0 0 1px rgba(250, 237, 39, 0.35); }

  /* The job pages (css/jobs-jobs.css): the near-black "Invoiced" pill gets the option tag's
     yellow hairline, the money boxes and job cards are lit from above like the home's tiles,
     your own jobs' teal edge glows a little, and a photo sits on a faint frame. */
  :root[data-theme="dark"] .jx-status.is-invoiced { box-shadow: inset 0 0 0 1px rgba(250, 237, 39, 0.35); }
  :root[data-theme="dark"] .jx-money-item { background: linear-gradient(180deg, #151b1e, var(--gx-well) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  :root[data-theme="dark"] .jx-card.is-mine { box-shadow: inset 4px 0 0 var(--gx-teal), inset 0 1px 0 rgba(255, 255, 255, 0.03), -6px 0 18px -12px rgba(10, 186, 181, 0.7); }
  :root[data-theme="dark"] .jx-file { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
  :root[data-theme="dark"] .jx-viewer-img { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); }
}

/* ---- the theme switch (GxJobs.theme in js/jobs/common.js) */
/* Changing theme: every colour changes in one step under a quick cross-fade of the whole screen
   (a view transition: the new look fades in over the old one, a quarter of a second). The rules'
   own colour fades are held meanwhile, so links and rows do not trail behind. Under reduced
   motion the script starts no fade at all, and these rules are not applied either. */
html.gx-theme-flip,
html.gx-theme-flip *,
html.gx-theme-flip *::before,
html.gx-theme-flip *::after { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.gx-theme-fade::view-transition-group(*) { animation-duration: 240ms; }
  html.gx-theme-fade::view-transition-old(*) { animation: none; }
  html.gx-theme-fade::view-transition-new(*) { animation: 240ms cubic-bezier(0.4, 0, 0.2, 1) both gx-theme-in; mix-blend-mode: normal; }
}
@keyframes gx-theme-in { from { opacity: 0; } }

/* Light / Dark / Auto: three radio buttons drawn as one segmented switch, in the account card
   (every role, every width: a technician has no More tab) and the phone's More sheet. The radio
   itself covers its segment, invisible, so the whole segment is the target and arrow keys move
   between the three for free. The legend floats so it lays out as an ordinary line inside the
   box instead of sitting in the fieldset's top edge. */
.jobs-theme { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.jobs-theme-legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; color: var(--gx-muted); font: 700 11px/1 var(--gx-body); letter-spacing: 0.14em; text-transform: uppercase; }
.jobs-theme-seg { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--gx-raised-fill); }
.jobs-theme-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.jobs-theme-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jobs-theme-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 9px;
  color: var(--gx-text-3);
  font: 700 13px/1 var(--gx-body);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.jobs-theme-face .gx-ico { width: 16px; height: 16px; }
.jobs-theme-opt:hover .jobs-theme-face { color: var(--gx-strong); }
.jobs-theme-opt input:checked + .jobs-theme-face { background: var(--gx-seg-on); color: var(--gx-strong); box-shadow: var(--gx-seg-shadow); }
.jobs-theme-opt input:checked + .jobs-theme-face .gx-ico { color: var(--gx-teal-text); }
.jobs-theme-opt input:focus-visible + .jobs-theme-face { outline: 2px solid var(--gx-teal-text); outline-offset: 1px; }
.jobs-theme-note { margin: 7px 2px 0; color: var(--gx-muted); font-size: 12.5px; line-height: 1.35; }
.jobs-acct .jobs-theme { padding-top: 14px; border-top: 1px solid var(--gx-line); }
.jobs-sheet .jobs-theme { margin: 16px 0 0; }
.jobs-sheet .jobs-theme-face { min-height: 44px; }

/* === ADDED 2026-10-24: Jobs merged in (phase 3 with the command centre) ============== */
/* The Jobs tile's flags, and the settings list on the home. The job pages' own rules are in
   css/jobs-jobs.css (tokens only); their dark-only touches are in the dark theme banner above. */

/* A flag with no tone is already amber; the Jobs and Quotes flags name it, so it is written out. */
.cc-flag.is-warn { background: var(--gx-warn-bg); color: var(--gx-warn-ink-2); }

/* Settings: each one says what it does in a line under its name (settings.js `hint`), an on/off
   setting is a switch that saves when flipped, and a setting another page looks after (Leads,
   Compliance, Xero, the quote terms) shows where it is now and a link to that page. */
.jobs-setting-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jobs-setting-hint { color: var(--gx-muted-2); font-size: 13.5px; line-height: 1.4; }
.jobs-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.jobs-setting > .jobs-row-sub { display: block; margin-top: 6px; }
.jobs-setting.is-managed { background: var(--gx-well); }
.jobs-setting-where { margin: 10px 0 0; color: var(--gx-muted-2); font-size: 13px; line-height: 1.45; }
.jobs-setting-where a { color: var(--gx-strong); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gx-yellow); }
.jobs-setting-where a:hover { border-bottom-color: var(--gx-teal); }
.jobs-tag.is-unset { flex: 0 0 auto; background: var(--gx-warn-bg-2); color: var(--gx-warn-ink); }

/* The switch: a real checkbox (role="switch") laid over a track and knob, so the whole switch
   and its On / Off word are one 44px target and the keyboard works as for any tick box. */
.tech-panel label.jobs-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  color: var(--gx-text-3);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.jobs-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.jobs-switch-track {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--gx-fill-6);
  box-shadow: inset 0 0 0 1px var(--gx-line-3);
  transition: background 0.18s, box-shadow 0.18s;
}
.jobs-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gx-knob);
  box-shadow: var(--gx-knob-shadow);
  transition: transform 0.18s var(--gx-ease);
}
.jobs-switch-input:checked + .jobs-switch-track { background: var(--gx-teal); box-shadow: none; }
.jobs-switch-input:checked + .jobs-switch-track::after { transform: translateX(18px); }
.jobs-switch-input:focus-visible + .jobs-switch-track { outline: 2px solid var(--gx-teal-text); outline-offset: 3px; }
.jobs-switch-word { min-width: 2em; }
.jobs-switch-input:checked ~ .jobs-switch-word { color: var(--gx-teal-text); }
.tech-panel label.jobs-switch.is-locked { cursor: default; }
.jobs-switch.is-locked .jobs-switch-track { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .jobs-switch-track,
  .jobs-switch-track::after { transition: none; }
}

/* === ADDED 2026-10-24: location with each change, the time log's clock ============ */
/* js/jobs/location.js: the one slim line at the top of every /jobs page saying whether the
   person's location is saved with their changes (the visible notice the Workplace Surveillance
   Act asks for), the denied tip under it, the written notice (a <dialog>, full screen on a
   phone), "Getting your location..." with "Save without location" while a sign on, sign off or
   photo reads it, and the "far from the job" sheet. Location is never shown as a fault: off is
   a grey dot, not red.
   The clock bar (js/jobs/today.js): "Signed on GJ-1012 . 1 h 12 m . Sign off", above the tabs on
   a phone. Tokens only. Print hides all of it. */
.gxl-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  margin: 0 0 14px;
  padding: 3px 4px 3px 12px;
  border: 1px solid var(--gx-line);
  border-radius: 999px;
  background: var(--gx-card);
  color: var(--gx-text-3);
  font: 500 13.5px/1.3 var(--gx-body);
}
.gxl-chip[hidden] { display: none; }
.gxl-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gx-muted); }
.gxl-chip.is-on .gxl-dot { background: var(--gx-teal); box-shadow: 0 0 0 3px var(--gx-teal-tint); }
.gxl-chip.is-on { color: var(--gx-text-2); }
.gxl-chip-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxl-chip-btn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--gx-fill);
  color: var(--gx-strong);
  font: 700 12.5px/1 var(--gx-body);
  cursor: pointer;
}
.gxl-chip-btn:hover { background: var(--gx-fill-2); }
.gxl-chip-btn:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
/* A finger-sized button on a phone. */
@media (pointer: coarse), (max-width: 719px) {
  .gxl-chip-btn { min-height: 36px; padding: 3px 14px; }
}

.gxl-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -6px 0 14px;
  padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--gx-warn-line);
  border-radius: 6px;
  background: var(--gx-warn-bg-3);
  color: var(--gx-warn-text);
  font-size: 13.5px;
  line-height: 1.45;
}
.gxl-tip details { flex: 1 1 auto; min-width: 0; }
.gxl-tip summary { cursor: pointer; }
.gxl-tip-how { font-weight: 700; text-decoration: underline; }
.gxl-tip ul { margin: 8px 0 2px; padding-left: 18px; }
.gxl-tip li { margin: 0 0 6px; }
.gxl-tip-close { flex: 0 0 auto; border: 0; background: none; color: inherit; font: 700 12.5px/1 var(--gx-body); text-decoration: underline; cursor: pointer; padding: 4px 2px; }

.gxl-notice {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font-family: var(--gx-body);
  box-shadow: var(--gx-shadow-jump);
}
.gxl-notice::backdrop { background: var(--gx-backdrop); }
.gxl-notice-body { padding: 22px 22px 0; }
.gxl-notice-title { margin: 0 0 12px; color: var(--gx-strong); font: 700 26px/1.1 var(--gx-head); letter-spacing: 0.02em; }
.gxl-notice-p { margin: 0 0 11px; color: var(--gx-text); font-size: 15px; line-height: 1.55; }
.gxl-notice-p strong { color: var(--gx-strong); }
.gxl-notice-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px -22px 0;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gx-line);
  background: var(--gx-raised);
}
.gxl-notice .gxl-agree { white-space: normal; text-align: center; }
.gxl-notice :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
@media (max-width: 719px) {
  .gxl-notice { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; }
  .gxl-notice-body { min-height: 100%; padding: calc(18px + env(safe-area-inset-top)) 16px 0; }
  .gxl-notice-actions { margin: 14px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .gxl-notice .gxl-agree { width: 100%; }
}

.gxl-wait {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: var(--gx-solid);
  color: var(--gx-on-scrim);
  font: 500 14px/1.3 var(--gx-body);
  transform: translateX(-50%);
  box-shadow: var(--gx-shadow-pop);
}
.gxl-wait-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gx-teal); animation: gxl-pulse 1.1s ease-in-out infinite; }
.gxl-wait-text { min-width: 0; }
.gxl-wait-skip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  font: 700 13.5px/1.1 var(--gx-body);
  cursor: pointer;
}
@keyframes gxl-pulse { 50% { opacity: 0.35; } }
@media (max-width: 719px) {
  body.has-jobs-tabbar .gxl-wait { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 10px); }
}

/* "Far from the job" (24 Oct 2026, js/jobs/location.js): "Still signed on?", worked out on the
   device. A <dialog>: a bottom sheet on a phone, a card in the middle on a wider screen. Every
   button is at least 44px; the slide up is skipped under reduced motion. Tokens only. */
.gxl-far {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font-family: var(--gx-body);
  box-shadow: var(--gx-shadow-jump);
  overflow-y: auto;
}
.gxl-far::backdrop { background: var(--gx-backdrop); }
.gxl-far:focus { outline: none; } /* the sheet itself takes the focus on opening */
.gxl-far :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
.gxl-far-grip { display: none; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--gx-grip); }
.gxl-far-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.gxl-far-ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--gx-deep); color: var(--gx-teal); }
.gxl-far-ico .gx-ico { width: 22px; height: 22px; }
.gxl-far-title { margin: 0; color: var(--gx-strong); font: 700 26px/1.1 var(--gx-head); letter-spacing: 0.02em; }
.gxl-far-text { margin: 0 0 6px; color: var(--gx-text); font-size: 16.5px; line-height: 1.45; }
.gxl-far-text strong { color: var(--gx-strong); }
.gxl-far-sub { margin: 0 0 16px; color: var(--gx-muted-2); font-size: 14px; line-height: 1.4; }
.gxl-far-actions { display: grid; gap: 10px; }
.gxl-far .gxl-far-go { justify-content: center; width: 100%; min-height: 50px; padding: 12px 18px; font-size: 17px; }
.gxl-far-alt,
.gxl-far-stay { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; font: 700 15.5px/1.2 var(--gx-body); cursor: pointer; }
.gxl-far-alt { border: 1.5px solid var(--gx-line-3); background: var(--gx-raised-fill); color: var(--gx-strong); }
.gxl-far-alt[aria-expanded="true"] { border-color: var(--gx-line-strong); }
.gxl-far-stay { border: 0; background: none; color: var(--gx-text-2); text-decoration: underline; text-underline-offset: 3px; }
.gxl-far-when { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--gx-line); border-radius: 14px; background: var(--gx-well); }
.gxl-far-when[hidden] { display: none; }
.gxl-far-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gxl-far-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 4px;
  border: 1.5px solid var(--gx-line-3);
  border-radius: 12px;
  background: var(--gx-card);
  color: var(--gx-strong);
  font: inherit;
  cursor: pointer;
}
.gxl-far-chip strong { font-size: 15px; }
.gxl-far-chip span { color: var(--gx-muted-2); font-size: 12.5px; }
.gxl-far-chip:hover,
.gxl-far-alt:hover { border-color: var(--gx-line-strong); }
.gxl-far-label { margin: 4px 0 0; color: var(--gx-text-2); font-size: 14px; font-weight: 700; }
.gxl-far-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.gxl-far-at {
  flex: 1 1 230px; /* room for "24/10/2026 12:01 AM"; on a phone it takes the row and the button goes under it */
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--gx-field-line);
  border-radius: 10px;
  background: var(--gx-field);
  color: var(--gx-strong);
  font: inherit;
  font-size: 16px; /* 16px: iPhone does not zoom in on it */
}
.gxl-far-at:focus { border-color: var(--gx-focus-line); box-shadow: 0 0 0 3px var(--gx-focus-ring); outline: none; }
.gxl-far-use { flex: 1 0 auto; min-height: 44px; }
.gxl-far .jobs-msg:empty { display: none; }
.gxl-far-foot { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--gx-muted-2); font-size: 13px; line-height: 1.4; }
.gxl-far-foot .gx-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
@media (max-width: 719px) {
  .gxl-far { width: 100%; max-width: none; margin: auto 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .gxl-far-grip { display: block; }
  /* A swipe down from here closes it (location.js): the browser does not take the drag. */
  .gxl-far-grip,
  .gxl-far-head { touch-action: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .gxl-far[open] { animation: gx-up 0.3s var(--gx-ease); }
}

/* "where" beside a change in a history list (office only): "9:14 am, about 15 m . Map". */
.gxl-where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--gx-muted-2); font-size: 12.5px; }
.gxl-where a { color: var(--gx-teal-text); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.gxl-where.is-none { color: var(--gx-faint); }

/* The running clock, on the phone page's list and job sheet: always in sight, above the tabs. */
.jx-clock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(848px, calc(100% - 32px));
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: var(--gx-solid);
  color: var(--gx-on-scrim);
  font: 500 14.5px/1.3 var(--gx-body);
  transform: translateX(-50%);
  box-shadow: var(--gx-shadow-pop);
}
.jx-clock-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gx-teal); box-shadow: 0 0 0 4px var(--gx-teal-tint); }
.jx-clock-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-clock-text strong { color: var(--gx-on-scrim); }
.jx-clock-go {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  font: 700 14px/1 var(--gx-body);
  text-decoration: none;
  cursor: pointer;
}
.jx-clock.is-long { background: var(--gx-warn-bg); color: var(--gx-warn-text); box-shadow: inset 0 0 0 1px var(--gx-warn-line), var(--gx-shadow-pop); }
.jx-clock.is-long .jx-clock-text strong { color: var(--gx-warn-text); }
.jx-clock.is-long .jx-clock-dot { background: var(--gx-warn-line); box-shadow: none; }
body.has-jx-clock { padding-bottom: 76px; }
@media (max-width: 719px) {
  body.has-jobs-tabbar .jx-clock { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 8px); }
  body.has-jobs-tabbar.has-jx-clock { padding-bottom: calc(var(--gx-tab-h) + 84px + env(safe-area-inset-bottom)); }
  body.has-jobs-tabbar.is-typing .jx-clock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gxl-wait-dot { animation: none; } }
@media print {
  .gxl-chip,
  .gxl-tip,
  .gxl-wait,
  .gxl-notice,
  .gxl-far,
  .jx-clock { display: none !important; }
}

/* === ADDED 2026-10-24: "See it as", beta features in Settings ================== */
/* js/jobs/common.js. "See it as" (api/_jobs/see-as.js): the office looks at every page exactly as
   another staff member sees it, read only. A bold banner under the bar says so on every page:
   "Seeing it as [Adam (technician)]. Read only. Back to me", the list swapping the person in one
   tap. Brand yellow with ink in both themes (like the bar, it is its own layer: tokens that are
   the same in light and dark). Sticky under the bar on a laptop; on a phone it sits at the top of
   the page (two rows would take too much of the screen) and the bar keeps a yellow edge while it
   is on. The account menu has the picker, and the Settings panel has a "Beta features" group of
   switches (api/_jobs/beta.js). Tokens only. Print hides the banner. */
.jobs-seeas {
  position: sticky;
  top: calc(var(--gx-bar-h) + env(safe-area-inset-top));
  z-index: 39;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  color-scheme: light;
  box-shadow: 0 1px 0 var(--gx-tile-edge), var(--gx-shadow-lift);
  font-family: var(--gx-body);
}
.jobs-seeas-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left));
  font: 700 15px/1.3 var(--gx-body);
}
.jobs-seeas-ico { display: inline-flex; }
.jobs-seeas-ico .gx-ico { width: 24px; height: 24px; stroke-width: 2.2; }
.jobs-seeas-label { margin: 0; font: inherit; color: inherit; }
.jobs-seeas-select {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--gx-ink);
  border-radius: 10px;
  background: var(--gx-yellow);
  color: var(--gx-ink);
  font: 700 15px/1.2 var(--gx-body);
  cursor: pointer;
}
.jobs-seeas-ro { font-weight: 700; }
.jobs-seeas-back {
  min-height: 44px;
  margin-left: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--gx-ink);
  color: var(--gx-yellow);
  font: 700 15px/1 var(--gx-body);
  cursor: pointer;
}
.jobs-seeas-back:hover { background: var(--gx-ink-3); }
.jobs-seeas-back:disabled,
.jobs-seeas-select:disabled { opacity: 0.6; cursor: progress; }
.jobs-seeas :focus-visible { outline: 3px solid var(--gx-ink); outline-offset: 2px; }
/* Anchors and scrollIntoView land below the banner too. */
html.has-jobs-bar.is-seeing-as { scroll-padding-top: calc(var(--gx-bar-h) + env(safe-area-inset-top) + 76px); }
@media (max-width: 719px) {
  .jobs-seeas { position: relative; top: auto; z-index: auto; box-shadow: none; }
  .jobs-seeas-in { gap: 8px; padding: 8px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .jobs-seeas-select { flex: 1 1 150px; }
  .jobs-bar.is-seeing-as { box-shadow: inset 0 -4px 0 var(--gx-yellow), var(--gx-bar-shadow); }
  html.has-jobs-bar.is-seeing-as { scroll-padding-top: calc(var(--gx-bar-h) + env(safe-area-inset-top) + 12px); }
}

/* The account menu (and the phone's More sheet while it is on). A little wider on a laptop, so a
   name and its role fit the list beside Show. */
@media (min-width: 720px) { .jobs-acct:has(.jobs-acct-seeas) { width: 308px; } }
.jobs-acct-seeas { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--gx-line); }
.jobs-sheet .jobs-acct-seeas { margin: 4px 0 14px; padding-top: 0; border-top: 0; }
.jobs-acct-seeas-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--gx-strong); font: 700 14px/1.2 var(--gx-body); }
.jobs-acct-seeas-label .gx-ico,
.jobs-acct-seeas-now .gx-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gx-teal-text); }
.jobs-acct-seeas-row { display: flex; gap: 8px; }
.jobs-acct-seeas-row .jobs-seeas-select {
  flex: 1 1 auto;
  border: 1.5px solid var(--gx-field-line);
  background: var(--gx-field);
  color: var(--gx-strong);
  font-weight: 500;
}
.jobs-acct-seeas-go {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--gx-invert);
  color: var(--gx-invert-text);
  font: 700 14px/1 var(--gx-body);
  cursor: pointer;
}
.jobs-acct-seeas-go:disabled { opacity: 0.6; cursor: progress; }
.jobs-acct-seeas-note { margin: 8px 0 0; color: var(--gx-muted); font-size: 12.5px; line-height: 1.4; }
.jobs-acct-seeas-now {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gx-warn-bg);
  color: var(--gx-warn-text);
  font: 700 14px/1.35 var(--gx-body);
}
.jobs-acct-seeas-now .gx-ico { color: var(--gx-warn-text); }

/* Settings: the "Beta features" group heading. */
.jobs-settings-group { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--gx-line); }
.jobs-settings-group .tech-hint { margin: 4px 0 0; }
.jobs-settings-group-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--gx-strong); font: 700 20px/1.2 var(--gx-head); letter-spacing: 0.02em; }
.jobs-beta-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gx-teal-tint);
  color: var(--gx-teal-ink);
  font: 700 11px/1 var(--gx-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media print { .jobs-seeas { display: none !important; } }

/* === ADDED 2026-10-25: GEMELEC Jobs on the home screen ======================== */
/* js/jobs/install.js: the "Add to home screen" card (phones and tablets, shown by itself once,
   or from the menu), the menu item in the account card and the phone's More sheet, and the
   share and "add" pictures drawn inline in its steps. Tokens only (both themes). The card sits
   above the phone tabs (and above the running clock on the phone page), steps aside while a text
   box has the focus, and never prints. */
.jobs-install-slot[hidden] { display: none; }
.jobs-install-slot--acct { margin: 0 0 10px; }
.jobs-install-slot--sheet { margin: 14px 0 0; }
.gxi-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--gx-line);
  border-radius: 10px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font: 700 14px/1 var(--gx-body);
  cursor: pointer;
}
.gxi-item:hover { border-color: var(--gx-line-strong); }
.gxi-item .gx-ico { width: 18px; height: 18px; color: var(--gx-teal-text); }
.gxi-item:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }

.gxi-card {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 45;
  width: min(380px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--gx-line);
  border-radius: 18px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font-family: var(--gx-body);
  box-shadow: var(--gx-shadow-pop);
}
.gxi-card:focus { outline: none; }
.gxi-card:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
body.has-jx-clock .gxi-card { bottom: calc(92px + env(safe-area-inset-bottom)); }
.gxi-head { display: flex; align-items: center; gap: 12px; }
.gxi-app { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; }
.gxi-words { min-width: 0; }
.gxi-title { margin: 0; font: 700 16px/1.25 var(--gx-body); color: var(--gx-strong); }
.gxi-sub { margin: 3px 0 0; font-size: 14px; line-height: 1.35; color: var(--gx-muted); }
.gxi-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: gxi; }
.gxi-steps li {
  position: relative;
  min-height: 28px;
  margin: 0 0 8px;
  padding: 3px 0 0 38px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gx-text-2);
  counter-increment: gxi;
}
.gxi-steps li::before {
  content: counter(gxi);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gx-teal-tint);
  color: var(--gx-teal-ink);
  font: 700 14px/1 var(--gx-body);
}
.gxi-key {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  margin: 0 1px;
  vertical-align: -7px;
  border: 1px solid var(--gx-line);
  border-radius: 7px;
  background: var(--gx-raised-fill);
  color: var(--gx-info);
}
.gxi-key .gx-ico { width: 18px; height: 18px; }
.gxi-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.gxi-btn {
  min-width: 88px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--gx-line-3);
  border-radius: 10px;
  background: var(--gx-fill);
  color: var(--gx-strong);
  font: 700 15px/1 var(--gx-body);
  cursor: pointer;
}
.gxi-btn:hover { border-color: var(--gx-line-strong); }
.gxi-btn-go { border-color: var(--gx-yellow); background: var(--gx-yellow); color: var(--gx-ink); }
.gxi-btn-go:hover { border-color: var(--gx-ink); }
.gxi-btn:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .gxi-card { animation: gx-up 0.3s var(--gx-ease); }
}
@media (max-width: 719px) {
  .gxi-card { left: 12px; right: 12px; width: auto; }
  body.has-jobs-tabbar .gxi-card { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 10px); }
  body.has-jobs-tabbar.has-jx-clock .gxi-card { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 76px); }
  body.is-typing .gxi-card { display: none; }
}
/* An iPhone running it from the home screen draws the page under its status bar (the
   black-translucent bar style): the quote print page has no app bar to take that room. */
@media screen { body.qp-body { padding-top: env(safe-area-inset-top); } }
@media print { .gxi-card, .jobs-install-slot { display: none !important; } }

/* === ADDED 2026-10-25: the three sides (the laptop bar) ======================== */
/* js/jobs/common.js "the three sides". From 1024px wide (laptops and desktops) the bar is a
   switchboard: the G mark and Home, a lit three-way switch ON THE JOB | SALES | ADMIN in the
   middle, search, a yellow "+ New" and the account. Under it a second row with the pages of the
   side the page belongs to (never a More menu), the side's coloured edge (hazard stripes for ON
   THE JOB, teal for SALES, ADMIN's cool blue), and, outside the sticky bar, a slim live line.
   Phones and tablets (under 1024px) keep the bar, tabs and More sheet exactly as above: every
   rule here is either for an element that is hidden below 1024px or inside the 1024px query.
   The bar, the second row, the switch and the card's head are dark in both themes, so their
   colours are written out as the bar's are; the card's body, "+ New"'s menu and the live line sit
   on the page's surfaces and use tokens. The lit segment's text is --gx-on-lit (dark) in both
   themes: light text on teal failed contrast in the mock-up. html[data-side] (job, sales, admin
   or home) says which side the page is in; --gx-side is its lamp colour (dark surfaces only) and
   --gx-side-text its colour as text on the page. Motion is off under reduced motion; print hides
   all of it with the bar. */
.jobs-home-link,
.jobs-sides,
.jobs-new,
.jobs-row2,
.jobs-edge,
.jobs-peek,
.jobs-live { display: none; }

:root { --gx-side: #fff; --gx-side-rgb: 255, 255, 255; --gx-side-text: var(--gx-strong); }
:root[data-side="job"] { --gx-side: var(--gx-yellow); --gx-side-rgb: 250, 237, 39; --gx-side-text: var(--gx-warn); }
:root[data-side="sales"] { --gx-side: var(--gx-teal); --gx-side-rgb: 10, 186, 181; --gx-side-text: var(--gx-teal-text); }
:root[data-side="admin"] { --gx-side: var(--gx-blue); --gx-side-rgb: 105, 167, 255; --gx-side-text: var(--gx-blue-text); }

@media screen and (min-width: 1024px) {
  /* The sticky bar is three layers tall here: --gx-bar-h (what the page, the "See it as" banner
     and anchors keep clear of) is all three, so nothing else needed changing. A plain length, not
     a calc(): js/jobs/log.js reads it with parseFloat. Signed out, the bar is the logo alone
     (html.no-jobs-modes). */
  :root:not(.no-jobs-modes) {
    --gx-row1-h: 60px;
    --gx-row2-h: 46px;
    --gx-edge-h: 4px;
    --gx-bar-h: 110px; /* the three above */
  }
  /* The bar, its second row and the live line run wider than the pages, to the same edges. */
  .jobs-bar-in { max-width: 1440px; height: var(--gx-row1-h, 60px); gap: 12px; }
  .jobs-brand { flex: 0 0 auto; }
  .jobs-links,
  .jobs-more-menu { display: none !important; }

  /* ---- row 1: Home, the switch, + New */
  .jobs-home-link {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    color: #b4bbc0;
    font: 500 14px/1 var(--gx-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .jobs-home-link .gx-ico { width: 18px; height: 18px; }
  .jobs-home-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .jobs-home-link[aria-current="page"] { color: #fff; font-weight: 700; }

  /* The switch: the sides as lamps on a dark rail, one lit thumb under the side you are in. */
  .jobs-sides {
    position: relative;
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 4px;
    border-radius: 15px;
    background: #07090a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .jobs-sides[hidden] { display: none; }
  /* Placed by common.js on the lit side (--tx, --tw: each side is as wide as its words). */
  .jobs-side-thumb {
    position: absolute;
    top: 4px;
    left: 0;
    width: var(--tw, 0);
    height: calc(100% - 8px);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 46%), var(--gx-side);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 22px -4px rgba(var(--gx-side-rgb), 0.55);
    transform: translateX(var(--tx, 0));
    transition: transform 0.32s var(--gx-ease), width 0.32s var(--gx-ease), opacity 0.2s;
  }
  /* ON THE JOB: the lit thumb carries faint hazard stripes. */
  :root[data-side="job"] .jobs-side-thumb {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 46%),
      repeating-linear-gradient(135deg, rgba(17, 20, 22, 0.085) 0 7px, rgba(17, 20, 22, 0) 7px 14px),
      var(--gx-yellow);
  }
  .jobs-sides.is-still .jobs-side-thumb { transition: none; }
  .jobs-sides.is-home .jobs-side-thumb { opacity: 0; }
  .jobs-side {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 11px;
    color: #c3c9cd;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.15s;
  }
  .jobs-side[data-side="job"] { --c: var(--gx-yellow); }
  .jobs-side[data-side="sales"] { --c: var(--gx-teal); }
  .jobs-side[data-side="admin"] { --c: var(--gx-blue); }
  .jobs-side .gx-ico { width: 19px; height: 19px; color: var(--c); }
  .jobs-side-lamp {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
    opacity: 0.4;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s, box-shadow 0.2s;
  }
  .jobs-side-name { font: 700 17px/1 var(--gx-head); letter-spacing: 0.09em; text-transform: uppercase; }
  .jobs-side:hover,
  .jobs-side[aria-expanded="true"] { background: rgba(255, 255, 255, 0.065); color: #fff; }
  .jobs-side:hover .jobs-side-lamp,
  .jobs-side[aria-expanded="true"] .jobs-side-lamp { opacity: 1; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px 1px var(--c); }
  .jobs-side[aria-current] { background: none; color: var(--gx-on-lit); }
  .jobs-side[aria-current] .gx-ico { color: var(--gx-on-lit); }
  .jobs-side[aria-current] .jobs-side-lamp { opacity: 1; background: var(--gx-on-lit); box-shadow: 0 0 0 2px rgba(17, 20, 22, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
  .jobs-side:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 11px; }

  /* The split badges: teal for new (or just how many), coral for late, a ring of the rail round
     each. On the lit segment: ink with white figures, dark red with white for late. */
  .jobs-pills { display: inline-flex; align-items: center; gap: 3px; }
  .jobs-pills:empty { display: none; }
  .jobs-pill {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--gx-teal);
    color: var(--gx-ink);
    font: 700 11.5px/19px var(--gx-body);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .jobs-pill.is-late { background: var(--gx-coral); }
  .jobs-sides .jobs-pill { box-shadow: 0 0 0 2px #07090a; }
  .jobs-side[aria-current] .jobs-pill { background: var(--gx-on-lit); color: #fff; box-shadow: none; }
  .jobs-side[aria-current] .jobs-pill.is-late { background: #b3261e; color: #fff; }

  /* + New: yellow, always there. */
  .jobs-new { display: block; position: relative; flex: 0 0 auto; }
  .jobs-new[hidden] { display: none; }
  .jobs-new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: 11px;
    background: var(--gx-yellow);
    color: var(--gx-ink);
    font: 700 14.5px/1 var(--gx-body);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 6px 18px -8px rgba(250, 237, 39, 0.6);
    transition: transform 0.15s var(--gx-ease), box-shadow 0.15s;
  }
  .jobs-new-btn .gx-ico { width: 18px; height: 18px; stroke-width: 2.4; }
  .jobs-new-btn:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 22px -6px rgba(250, 237, 39, 0.75); }
  .jobs-new-btn:active { transform: scale(0.97); }
  .jobs-new-btn[aria-expanded="true"] .gx-ico { transform: rotate(45deg); }
  .jobs-new-btn .gx-ico { transition: transform 0.2s var(--gx-ease); }
  .jobs-bar .jobs-new-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 11px; }
  .jobs-new-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 4;
    width: 350px;
    padding: 8px;
    border-radius: 16px;
    background: var(--gx-raised);
    color: var(--gx-strong);
    box-shadow: var(--gx-shadow-pop);
  }
  .jobs-new-menu[hidden] { display: none; }
  .jobs-new-list { margin: 0; padding: 0; list-style: none; }
  .jobs-new-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--gx-strong);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .jobs-new-item:hover,
  .jobs-new-item:focus-visible { background: var(--gx-raised-fill); }
  .jobs-new-list li:last-child .jobs-new-item[data-key="s"] { margin-top: 6px; outline: 1px dashed var(--gx-line-3); outline-offset: -1px; }
  .jobs-new-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: var(--gx-deep); color: var(--gx-yellow); }
  .jobs-new-ico .gx-ico { width: 18px; height: 18px; }
  .jobs-new-text { flex: 1 1 auto; min-width: 0; }
  .jobs-new-text b { display: block; font: 700 14.5px/1.2 var(--gx-body); }
  .jobs-new-text small { display: block; margin-top: 2px; color: var(--gx-muted); font-size: 12.5px; line-height: 1.3; }
  .jobs-new-item kbd {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid var(--gx-line-3);
    border-radius: 5px;
    background: var(--gx-raised);
    color: var(--gx-text-2);
    font: 700 11px/1.4 var(--gx-body);
  }
  .jobs-new-item[aria-disabled="true"] { cursor: not-allowed; }
  .jobs-new-item[aria-disabled="true"] .jobs-new-ico { background: var(--gx-fill-3); color: var(--gx-muted); }
  .jobs-new-menu .jobs-new-item:focus-visible { outline: 2px solid var(--gx-focus-line); outline-offset: -2px; border-radius: 12px; }

  /* ---- row 2: the side's pages */
  .jobs-row2 { display: block; background: #191e22; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  .jobs-row2-in {
    display: flex;
    align-items: stretch;
    gap: 4px;
    max-width: 1440px;
    height: var(--gx-row2-h, 46px);
    margin: 0 auto;
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .jobs-plate {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 26px;
    margin-right: 6px;
    padding: 0 16px 0 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gx-side);
    font: 700 14px/1 var(--gx-head);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .jobs-plate .gx-ico { width: 17px; height: 17px; }
  .jobs-pages { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .jobs-page {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 12px;
    color: #b4bbc0;
    font: 500 14px/1 var(--gx-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .jobs-page .gx-ico { width: 17px; height: 17px; color: #8a949a; transition: color 0.15s; }
  .jobs-page:hover { color: #fff; }
  .jobs-page:hover .gx-ico { color: var(--gx-side); }
  .jobs-page[aria-current="page"] { color: #fff; font-weight: 700; }
  .jobs-page[aria-current="page"] .gx-ico { color: var(--gx-side); }
  .jobs-page[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gx-side);
    box-shadow: 0 0 14px rgba(var(--gx-side-rgb), 0.55);
  }
  .jobs-bar .jobs-page:focus-visible { outline: 2px solid var(--gx-side); outline-offset: -6px; border-radius: 10px; }
  .jobs-page-sep { flex: 0 0 auto; align-self: center; width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, 0.1); }
  /* On Home: the three sides, each with its lamp and what it is for. */
  .jobs-page--side { --c: #fff; }
  .jobs-page--side[data-side="job"] { --c: var(--gx-yellow); }
  .jobs-page--side[data-side="sales"] { --c: var(--gx-teal); }
  .jobs-page--side[data-side="admin"] { --c: var(--gx-blue); }
  .jobs-page--side .jobs-side-lamp { opacity: 1; box-shadow: 0 0 8px rgba(255, 255, 255, 0.12); }
  .jobs-page--side .jobs-page-text { color: #fff; font: 700 15px/1 var(--gx-head); letter-spacing: 0.1em; text-transform: uppercase; }
  .jobs-page-tag { color: #8a949a; font-size: 12.5px; }
  .jobs-page--side:hover .jobs-page-tag { color: #c3c9cd; }
  /* Never a More menu: what does not fit loses the plate's words, then the icons, then room. */
  .jobs-row2-in.is-tight .jobs-plate-text,
  .jobs-row2-in.is-tight .jobs-page-tag { display: none; }
  .jobs-row2-in.is-tighter .jobs-page .gx-ico { display: none; }
  .jobs-row2-in.is-tightest .jobs-page { padding: 0 8px; }
  .jobs-row2-in.is-tightest .jobs-page-sep { margin: 0 2px; }

  /* The side's edge where the bar meets the page. */
  .jobs-edge { display: block; height: var(--gx-edge-h, 4px); background: linear-gradient(90deg, var(--gx-yellow) 0 33.3%, var(--gx-teal) 33.3% 66.6%, var(--gx-blue) 66.6%); }
  :root[data-side="job"] .jobs-edge { background: repeating-linear-gradient(135deg, var(--gx-yellow) 0 10px, #111416 10px 20px); }
  :root[data-side="sales"] .jobs-edge { background: linear-gradient(90deg, #078f8b, var(--gx-teal) 30%, #5fe0db 50%, var(--gx-teal) 70%, #078f8b); }
  :root[data-side="admin"] .jobs-edge { background: linear-gradient(90deg, #3d7fe6, var(--gx-blue) 30%, #b8d5ff 50%, var(--gx-blue) 70%, #3d7fe6); }
  :root.no-jobs-modes .jobs-row2,
  :root.no-jobs-modes .jobs-edge,
  :root.no-jobs-modes .jobs-sides,
  :root.no-jobs-modes .jobs-live { display: none; }

  /* ---- the card: hover or focus another side to jump straight to one of its pages */
  .jobs-peek {
    display: block;
    position: absolute;
    top: calc(var(--gx-row1-h, 60px) + env(safe-area-inset-top) - 4px);
    z-index: 5;
    width: 440px;
    border-radius: 18px;
    background: var(--gx-raised);
    color: var(--gx-strong);
    box-shadow: var(--gx-shadow-pop);
  }
  .jobs-peek[hidden] { display: none; }
  .jobs-peek[data-side="job"] { --p: var(--gx-yellow); --p-text: var(--gx-warn); }
  .jobs-peek[data-side="sales"] { --p: var(--gx-teal); --p-text: var(--gx-teal-text); }
  .jobs-peek[data-side="admin"] { --p: var(--gx-blue); --p-text: var(--gx-blue-text); }
  .jobs-peek::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--nub, 50%);
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #111416;
    transform: translateX(-50%) rotate(45deg);
  }
  .jobs-peek-head { position: relative; padding: 16px 18px 15px; border-radius: 18px 18px 0 0; background: #111416; color: #fff; }
  .jobs-peek-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--p); }
  .jobs-peek[data-side="job"] .jobs-peek-head::after { background: repeating-linear-gradient(135deg, var(--gx-yellow) 0 8px, #111416 8px 16px); }
  .jobs-peek-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--p); font: 700 22px/1 var(--gx-head); letter-spacing: 0.1em; text-transform: uppercase; }
  .jobs-peek-title .gx-ico { width: 22px; height: 22px; }
  .jobs-peek-title small { margin-left: auto; color: #8a949a; font: 700 11.5px/1 var(--gx-body); letter-spacing: 0.14em; }
  .jobs-peek-sum { margin: 8px 0 0; color: #c3c9cd; font-size: 13.5px; line-height: 1.35; }
  .jobs-peek-sum b { color: #fff; }
  .jobs-peek-sum .is-late,
  .jobs-peek-sum .is-late b { color: #ff8a80; }
  .jobs-peek-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; }
  .jobs-peek-item { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 8px 10px; border-radius: 12px; color: var(--gx-strong); text-decoration: none; }
  .jobs-peek-item:hover { background: var(--gx-raised-fill); }
  .jobs-peek-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--gx-deep); color: var(--p); }
  .jobs-peek-ico .gx-ico { width: 18px; height: 18px; }
  .jobs-peek-text { flex: 1 1 auto; min-width: 0; }
  .jobs-peek-text b { display: block; font: 700 14px/1.2 var(--gx-body); }
  .jobs-peek-text small { display: block; margin-top: 2px; color: var(--gx-muted); font-size: 12px; line-height: 1.25; }
  .jobs-peek .jobs-pill { background: var(--gx-menu-badge); color: var(--gx-menu-badge-text); }
  .jobs-peek .jobs-pill.is-late { background: var(--gx-menu-badge-late); }
  .jobs-peek-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid var(--gx-line);
    border-radius: 0 0 18px 18px;
    background: var(--gx-raised-foot);
    color: var(--gx-muted);
    font-size: 12.5px;
  }
  .jobs-peek-key { display: inline-flex; align-items: center; gap: 6px; color: var(--p-text); font-weight: 700; }
  .jobs-peek-key kbd { padding: 2px 6px; border: 1px solid var(--gx-line-3); border-radius: 5px; background: var(--gx-raised); color: var(--gx-text-2); font: 600 11px/1.4 var(--gx-body); }
  .jobs-bar .jobs-peek-item:focus-visible { outline: 2px solid var(--gx-focus-line); outline-offset: -2px; border-radius: 12px; background: var(--gx-raised-fill); }

  /* ---- the live line: what is going on in this side, under the bar (not sticky) */
  .jobs-live { display: block; border-bottom: 1px solid var(--gx-line); background: var(--gx-card); font-family: var(--gx-body); }
  .jobs-live[hidden] { display: none; }
  .jobs-live-in {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1440px;
    min-height: 42px;
    margin: 0 auto;
    padding: 4px max(24px, env(safe-area-inset-right)) 4px max(24px, env(safe-area-inset-left));
    color: var(--gx-text-3);
    font-size: 13.5px;
    line-height: 1.3;
  }
  .jobs-live-lamp { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gx-side-text); box-shadow: 0 0 0 3px rgba(var(--gx-side-rgb), 0.22); }
  /* position: relative keeps the facts' screen reader words (.jobs-vh, absolute) inside the clip,
     so a line too long for the screen is cut here and never scrolls the page sideways (29 Oct 2026,
     found with Invoices' facts on ADMIN at 1024px). */
  .jobs-live-facts { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jobs-live-fact + .jobs-live-fact::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 11px;
    border-radius: 50%;
    background: var(--gx-faint-2);
    vertical-align: middle;
  }
  .jobs-live-fact b { color: var(--gx-strong); font-weight: 700; }
  .jobs-live-fact.is-late,
  .jobs-live-fact.is-late b { color: var(--gx-bad); font-weight: 700; }
  .jobs-live-face {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--gx-deep);
    color: var(--gx-teal);
    font: 700 12px/1 var(--gx-head);
    vertical-align: middle;
  }
  .jobs-live-wait { color: var(--gx-muted); }
  .jobs-live-links { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
  .jobs-live-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--gx-line-3);
    border-radius: 9px;
    background: var(--gx-card);
    color: var(--gx-strong);
    font: 700 12.5px/1 var(--gx-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .jobs-live-link .gx-ico { width: 15px; height: 15px; color: var(--gx-side-text); }
  .jobs-live-link:hover { border-color: var(--gx-line-strong); }
  .jobs-live-link:focus-visible { outline: 2px solid var(--gx-focus-line); outline-offset: 2px; }
}

/* Under 1440px the search shrinks to its icon (Ctrl K still opens it), the "Jobs" tag beside the
   logo goes and the Test pill says "Test"; under 1280px the lamps go and the sides draw in, so
   the switch keeps its room at 1024px with nothing cut. */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .jobs-brand-tag,
  .jobs-jump-btn .jobs-jump-label,
  .jobs-jump-btn kbd { display: none; }
  .jobs-jump-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .jobs-env-long { display: none; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .jobs-side { gap: 7px; padding: 0 12px; }
  .jobs-side .jobs-side-lamp { display: none; }
}
/* Row one never spills past the screen (big counts on a narrow laptop): fitRow1() in common.js
   measures it and adds these in turn. Home's word is still read out; the Live / Test pill is in
   the account card too. */
@media screen and (min-width: 1024px) {
  .jobs-bar-in.is-snug .jobs-home-link { padding: 0 10px; }
  .jobs-bar-in.is-snug .jobs-home-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .jobs-bar-in.is-snugger .jobs-side > .gx-ico { display: none; }
  .jobs-bar-in.is-snugger .jobs-side { padding: 0 10px; }
  .jobs-bar-in.is-snuggest .jobs-env-pill { display: none; }
}

/* Motion: the thumb slides (above), the pages settle in, the edge wipes across, the card and
   the menu drop in. None of it under reduced motion. */
@media screen and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .jobs-pages.is-in .jobs-page { animation: gx-page-in 0.34s var(--gx-ease) both; animation-delay: calc(var(--k, 0) * 26ms); }
  .jobs-edge.is-wipe { animation: gx-edge-wipe 0.5s var(--gx-ease) both; }
  .jobs-peek:not([hidden]),
  .jobs-new-menu:not([hidden]) { animation: gx-peek-in 0.16s var(--gx-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-side-thumb,
  .jobs-side,
  .jobs-side-lamp,
  .jobs-page .gx-ico,
  .jobs-new-btn,
  .jobs-new-btn .gx-ico { transition: none; }
}
@keyframes gx-page-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes gx-edge-wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes gx-peek-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } }
@media print { .jobs-live { display: none !important; } }

/* === ADDED 2026-10-30: the Schedule button ======================================= */
/* js/jobs/common.js drawSched(). On a laptop: a pill of its own just left of the switch (the two
   centred together in .jobs-hub), on the same dark rail in the switch's type, so it belongs to
   it, but with no lamp and its own rail, so it never reads as a fourth side: it is one page. On
   the schedule it is lit with a yellow ring (ON THE JOB's colour; the side's lit thumb stays on
   ON THE JOB). Its count is the second row's (teal: "N not booked"). On a phone: an icon beside
   search in the top bar (.jobs-sched-icon), with the same count; the tabs are unchanged. The bar
   is dark in both themes, so the colours are written out as the switch's are. */
.jobs-hub,
.jobs-sched-icon { display: none; }
.jobs-sched[hidden] { display: none; }

@media screen and (min-width: 1024px) {
  .jobs-hub { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; margin: 0 auto; }
  .jobs-hub .jobs-sides { margin: 0; }
  .jobs-sched {
    display: flex;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 15px;
    background: #07090a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #c3c9cd;
    text-decoration: none;
    white-space: nowrap;
  }
  .jobs-sched-face {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 15px 0 13px;
    border-radius: 11px;
    transition: color 0.2s, background-color 0.15s, box-shadow 0.2s;
  }
  .jobs-sched .gx-ico { width: 19px; height: 19px; color: var(--gx-yellow); }
  .jobs-sched-name { font: 700 17px/1 var(--gx-head); letter-spacing: 0.09em; text-transform: uppercase; }
  .jobs-sched:hover .jobs-sched-face { background: rgba(255, 255, 255, 0.065); color: #fff; }
  .jobs-sched[aria-current] .jobs-sched-face {
    background: rgba(250, 237, 39, 0.1);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(250, 237, 39, 0.8), 0 0 16px -4px rgba(250, 237, 39, 0.45);
  }
  .jobs-sched:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 15px; }
  .jobs-sched .jobs-pill { box-shadow: 0 0 0 2px #07090a; }
  :root.no-jobs-modes .jobs-hub { display: none; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .jobs-sched-face { gap: 7px; padding: 0 12px 0 11px; }
}
/* Row one never spills (fitRow1). First, from 1440px, the search box shrinks to its icon and the
   "Jobs" tag goes, as they do under 1440px (the Schedule button made 1440px the tightest width:
   the bar stops growing there while those two grow); last, the Schedule word goes with the
   Live / Test pill, still read out. */
@media screen and (min-width: 1024px) {
  .jobs-bar-in.is-compact .jobs-brand-tag,
  .jobs-bar-in.is-compact .jobs-jump-btn .jobs-jump-label,
  .jobs-bar-in.is-compact .jobs-jump-btn kbd { display: none; }
  .jobs-bar-in.is-compact .jobs-jump-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .jobs-bar-in.is-snugger .jobs-sched-face { gap: 6px; padding: 0 11px; }
  .jobs-bar-in.is-snuggest .jobs-sched-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-sched-face { transition: none; }
}

/* A phone or a tablet (under 1024px, where the laptop button is not): the calendar just left of
   search, a full 44px target. On a tablet the area links fold one more into More to make room. */
@media (max-width: 1023px) {
  .jobs-sched-icon { display: inline-flex; position: relative; color: #fff; text-decoration: none; }
  .jobs-sched-icon[aria-current] { background: rgba(250, 237, 39, 0.12); color: var(--gx-yellow); box-shadow: inset 0 0 0 1.5px rgba(250, 237, 39, 0.55); }
  .jobs-sched-icon .jobs-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 17px;
    box-shadow: 0 0 0 2px var(--gx-bar-solid);
  }
  :root[data-theme="dark"] .jobs-sched-icon .jobs-badge { box-shadow: 0 0 0 2px var(--gx-bar-solid), 0 0 12px rgba(10, 186, 181, 0.6); }
  :root[data-theme="dark"] .jobs-sched-icon[aria-current] { box-shadow: inset 0 0 0 1.5px rgba(250, 237, 39, 0.55), 0 0 14px -4px rgba(250, 237, 39, 0.5); }
}
/* Settings and office tools (6 Nov 2026): a gear left of the account button from 720px, boxed
   like the search button. A phone has the Settings tile in its All areas sheet instead. */
.jobs-gear { display: none; }
@media (min-width: 720px) {
  .jobs-icon-btn.jobs-gear {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #c3c9cd;
    text-decoration: none;
  }
  .jobs-icon-btn.jobs-gear:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
  .jobs-icon-btn.jobs-gear .gx-ico { width: 19px; height: 19px; }
  .jobs-gear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
/* A tablet (720 to 1023px): boxed like the search button beside it. */
@media (min-width: 720px) and (max-width: 1023px) {
  .jobs-sched-icon { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #c3c9cd; }
  .jobs-sched-icon:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
  .jobs-sched-icon .gx-ico { width: 18px; height: 18px; }
  .jobs-sched-icon[aria-current] { border-color: transparent; }
  .jobs-sched-icon .jobs-badge { top: -6px; right: -6px; }
}
/* A very small phone (under 360px): the calendar would cut the page name short ("Sche..."), so the
   Live / Test pill gives way, as it does on a crowded laptop bar; it is in the account card too. */
@media (max-width: 359px) {
  .jobs-bar-tools .jobs-env-pill { display: none; }
}

/* === ADDED 2026-10-31: "Can add price list items" on the Staff panel (migration 232) ========== */
/* A technician's row (js/jobs/home.js staffRow): the words on the left, the switch on the right,
   one 44px target. The new item form and the office's check list have their own file,
   css/jobs-new-item.css (loaded by the pages that use them). */
.jobs-staff-adds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--gx-line);
  border-radius: 10px;
  background: var(--gx-well);
}
.jobs-staff-adds-words { display: grid; gap: 2px; min-width: 0; }
.jobs-staff-adds-label { color: var(--gx-strong); font-size: 15px; font-weight: 700; }
.jobs-staff-adds-hint { color: var(--gx-muted-2); font-size: 13px; line-height: 1.35; }

/* === ADDED 2026-11-01: "Download CSV" on the Price list (office only) ========================= */
/* The filter, the "Include removed" tick and the button on one row, wrapping on a phone; every
   control a 44px target. The note under it says the file is never for Tradify. */
.pl-export {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--gx-line);
  border-radius: 10px;
  background: var(--gx-well);
}
.pl-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tech-panel .pl-export-row select { flex: 1 1 200px; min-width: 0; min-height: 44px; }
.tech-panel .pl-export .pl-export-removed {
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.pl-export-removed input[type="checkbox"] { margin: 0; }
.pl-export-removed span { font-size: 15px; }
.pl-export-row .btn { min-height: 44px; justify-content: center; }
.pl-export-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; }
.pl-export .jobs-msg { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pl-export-row .btn { flex: 1 1 100%; }
}

/* === ADDED 2026-11-01: "Send feedback" at the foot of every page (beta) ================== */
/* js/jobs/common.js feedbackFoot: a small link under the page, while the feedback switch is on.
   The sheet it opens has its own file, css/jobs-feedback.css (loaded when it is first opened). */
/* The small link at the foot of every /jobs page (js/jobs/common.js feedbackFoot). */
.jobs-feedback-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 28px 0 8px; font-size: 13px; color: var(--gx-muted); }
.jobs-feedback-foot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 4px;
  border: 0; background: transparent; color: var(--gx-strong);
  font: 600 14px/1 var(--gx-body); text-decoration: underline; text-decoration-color: var(--gx-yellow); text-underline-offset: 4px;
  cursor: pointer;
}
.jobs-feedback-foot-btn .gx-ico { width: 18px; height: 18px; color: var(--gx-teal-text); }
@media print { .jobs-feedback-foot { display: none !important; } }

/* === ADDED 2026-11-04: declutter pass (Mani's picks 1 and 5 of the 4 Nov audit) ============== */
/* The location line in the account menu (js/jobs/location.js drawChip): off, not allowed yet and
   the like live here instead of at the top of every page. Same look, the menu's width. */
.jobs-acct .jobs-acct-loc { width: 100%; margin: 0 0 14px; }
.jobs-acct .jobs-acct-loc .gxl-chip-text { white-space: normal; }
/* The home has no second row on a laptop: its four areas are the first row's switch already. */
@media screen and (min-width: 1024px) {
  :root[data-side="home"]:not(.no-jobs-modes) { --gx-row2-h: 0px; --gx-bar-h: 64px; }
  :root[data-side="home"] .jobs-row2 { display: none; }
}
/* The home (js/jobs/home.js, jobs.html): "Needs you today" under a one-line greeting, then the
   tiles (no longer tucked under the greeting panel), "Everything else" as short links, and the
   office tools in one fold. */
.cc .cc-hero { padding: 20px 28px 22px; border-radius: 20px; }
.cc .cc-hero.is-solo { padding-bottom: 22px; }
.cc .cc-hero .cc-wire { display: none; }
.cc .cc-hero .cc-hero-g { top: -70px; width: 220px; height: 220px; }
.cc .cc-hello { margin: 8px 0 4px; font-size: 40px; }
.cc .cc-tiles { margin: 18px 0 0; }
.cc .cc-need-top { margin-top: 22px; }
.cc .cc-need-top[hidden] { display: none; }
.cc .cc-need-top + .cc-tiles { margin-top: 22px; }
.cc .cc-cols { margin-top: 26px; }
.cc .cc-row { min-height: 56px; padding: 10px 16px; }
/* "Everything else" for the office: one line each (a technician keeps the big cards). */
.cc .cc-areas:not(.is-big) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.cc .cc-areas:not(.is-big) .cc-area { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; }
.cc .cc-areas:not(.is-big) .cc-area-top { display: contents; }
.cc .cc-areas:not(.is-big) .cc-area .cc-ico { order: 0; width: 30px; height: 30px; flex: 0 0 auto; }
.cc .cc-areas:not(.is-big) .cc-area-name { order: 1; margin: 0; font-size: 19px; white-space: nowrap; }
.cc .cc-areas:not(.is-big) .cc-area-meta { order: 2; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px; }
.cc .cc-areas:not(.is-big) .cc-area-new { order: 3; margin-left: 0; }
.cc .cc-areas:not(.is-big) .cc-area .cc-go { order: 4; flex: 0 0 auto; }
/* Office tools: one fold. */
.cc .cc-tools { margin-top: 26px; }
.cc-tools-fold { border: 1px solid var(--gx-line); border-radius: 16px; background: var(--gx-card); }
.cc-tools-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: 16px; list-style: none; cursor: pointer; }
.cc-tools-sum::-webkit-details-marker { display: none; }
.cc-tools-sum:hover { background: var(--gx-hover); }
.cc .cc-tools-sum .cc-h2 { margin: 0; font-size: 19px; }
.cc-tools-sum .cc-state { margin-left: auto; }
.cc-tools-fold[open] { padding: 0 10px 2px; }
.cc-tools-fold[open] > .cc-tools-sum { margin: 0 -10px 6px; }
@media (max-width: 1023px) { .cc .cc-hello { font-size: 36px; } }
@media (max-width: 719px) {
  .cc .cc-hero { padding: 16px 18px 18px; border-radius: 18px; }
  .cc .cc-hello { font-size: 30px; }
}
.cc-tools-fold[open] > .cc-tools-sum .cc-chev { transform: rotate(90deg); }

/* Two-step sign-in (5 Nov 2026): its account menu item is a link drawn like the buttons there. */
a.gxi-item { text-decoration: none; }

/* Needs you today on a phone (wording trim, pick 3, 5 Nov 2026): the when-words move from the
   right-hand column to the start of the second line, and both lines wrap instead of being cut
   off. js/jobs/home.js drawNeeds draws both; the laptop keeps the column. */
.cc-when-in { display: none; font-weight: 700; }
.cc-when-in.k-bad { color: var(--gx-bad); }
.cc-when-in.k-warn { color: var(--gx-warn); }
.cc-when-in.k-new { color: var(--gx-teal-text); }
@media (max-width: 719px) {
  .cc-need-top .cc-when { display: none; }
  .cc-need-top .cc-when-in { display: inline; }
  .cc-need-top .cc-row-main b,
  .cc-need-top .cc-row-main small { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: clip; -webkit-box-orient: vertical; }
  .cc-need-top .cc-row-main b { -webkit-line-clamp: 2; line-height: 1.3; }
  .cc-need-top .cc-row-main small { -webkit-line-clamp: 3; margin-top: 2px; line-height: 1.35; }
}

/* The demo (demo.gemelec.com.au, 6 Nov 2026; JOBS.md "Demo and guest link"): the Demo pill, the one
   line under the bar on every page, and the note a phone, text or email link shows instead of
   opening (js/jobs/common.js drawDemo). Nothing here applies on the live site. */
.jobs-env-pill.is-demo { border-color: var(--gx-yellow); background: var(--gx-yellow); color: #14191c; }
.jobs-demo-band { border-bottom: 1px solid var(--gx-warn-line); background: var(--gx-warn-bg); color: var(--gx-warn-ink); font-family: var(--gx-body); }
.jobs-demo-band-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px max(24px, env(safe-area-inset-right)) 9px max(24px, env(safe-area-inset-left));
  font: 500 14px/1.4 var(--gx-body);
}
.jobs-demo-band strong,
.jobs-demo-ends { font-weight: 700; }
.jobs-demo-note {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gx-tab-h, 0px) + 24px + env(safe-area-inset-bottom));
  z-index: 90;
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #14191c;
  color: #fff;
  font: 600 14px/1.4 var(--gx-body);
  box-shadow: var(--gx-shadow-lift);
  transform: translateX(-50%);
}
@media (max-width: 719px) {
  .jobs-demo-band-in { padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); font-size: 13px; }
}

/* "Demo link" in Office tools on the live site (home.js drawDemoLink): the link, ready to copy. */
.cc-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.cc-demo-row select { min-height: 44px; }
.cc-demo-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cc-demo-out input { flex: 1 1 260px; min-width: 0; min-height: 44px; font: 500 13px/1.2 var(--gx-body); }