/*
lifecycle: LIVE - refreshed by hand, when a client pack's branding or the app's screens change.
Brand colours and type come from the selected pack. The layout follows the approved app design, 1 Oct 2026.
Type scale 13/15/16/18/22/28. Spacing on an 8px grid. Every tap target on the installer's path is 48px+.
*/
:root {
  color-scheme: light;
}
html[data-pack-loading] body { visibility: hidden; }
html[data-pack-error] {
  --orange: Highlight; --orange-d: LinkText; --accent-hover: Highlight; --on-accent: HighlightText; --on-accent-hover: HighlightText;
  --ink: CanvasText; --grey: GrayText; --line: GrayText; --rule: GrayText;
  --bg: Canvas; --stone: Canvas; --card: Canvas; --field: Canvas;
  --ok: LinkText; --bad: CanvasText; --today: Canvas; --banner: Canvas;
  --problem-bg: Canvas; --ok-bg: Canvas; --weekend: Canvas; --font-family: system-ui;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 var(--font-family), system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); padding-bottom: 40px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: var(--on-accent); }
input::placeholder, textarea::placeholder { color: var(--grey); opacity: 1; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }

/* ---- header ---- */
.top { background: var(--bg); border-bottom: 2px solid var(--ink); padding: 14px max(16px, calc((100vw - 1200px)/2)); }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-logo { display: block; width: min(200px, 48vw); height: auto; }
.brand-meta { display: flex; align-items: center; gap: 16px; }
.brand-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-est { color: var(--grey); font-size: 13px; font-weight: 500; }
.aplock.header { gap: 8px; white-space: nowrap; }
.aplock.header .aplock-icon { width: 28px; height: 28px; }
.aplock.header .aplock-text strong { font-size: 14px; }
.aplock.header .aplock-text span { font-size: 12px; }
.brand-badge { height: 32px; width: auto; }
h1 { max-width: 1200px; margin: 16px auto 0; font-size: 28px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
h1:empty { display: none; }

/* ---- buttons and choices ---- */
.btn { min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--card); font-weight: 800; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent-hover); text-decoration: var(--hover-decoration, none); }
.btn:not(.primary):hover { background: var(--stone); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--grey); }
.btn.big { min-height: 56px; font-size: 18px; width: 100%; }
.btn.small { min-height: 44px; font-size: 15px; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .55; }
.btn:active, .opt:active, .jobrow:active, .srow:active { transform: translateY(1px); }
.linkbtn { min-height: 48px; padding: 0 4px; border: 0; background: transparent; font-weight: 700; color: var(--orange-d); text-decoration: underline; cursor: pointer; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-height: 52px; min-width: 72px; padding: 0 16px; border: 2px solid var(--line); border-radius: 2px; background: var(--card); font-weight: 700; cursor: pointer; }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.opt.yes[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--field); }
.opt.no[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--field); }
.otherbox { margin-top: 8px; }

/* ---- form fields (survey sheet) ---- */
.field { margin-bottom: 16px; }
.field > label, .field > .lbl { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.req { color: var(--bad); }
.field.invalid > label, .field.invalid > .lbl { color: var(--bad); }
.err { color: var(--bad); font-size: 13px; margin-top: 4px; display: none; }
.field.invalid .err { display: block; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=datetime-local], input[type=number], input[type=search], input[type=password], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 2px; background: var(--field); font-size: 16px;
}
textarea { resize: none; overflow: hidden; }
textarea.capbox { min-height: 160px; overflow-y: auto; }
/* iPhone Safari gives date and time boxes their own minimum width and centred text, so they spilled past the edge */
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; line-height: 1.4; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field.invalid input, .field.invalid textarea { border-color: var(--bad); }
.tick { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 0; cursor: pointer; }
.tick input { width: 30px; height: 30px; accent-color: var(--orange); flex: none; }
.tick span { font-size: 16px; }
.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dims label { font-size: 13px; color: var(--grey); font-weight: 500; }
.qlist { border: 2px solid var(--ink); background: var(--card); }
.qrow { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 8px 4px 14px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.qrow:last-child { border-bottom: 0; }
.qrow.has { background: var(--today); }
.qname { flex: 1; min-width: 120px; font-weight: 600; }
.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 48px; height: 48px; border-radius: 2px; border: 2px solid var(--ink); background: var(--field); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.step output { min-width: 34px; text-align: center; font-weight: 900; font-size: 18px; }
.qtext { flex-basis: 100%; }
.photo .slot { border: 2px dashed var(--line); padding: 8px 12px; background: var(--card); }
.photo .plabel { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; }
.photo .plabel input { width: 30px; height: 30px; accent-color: var(--orange); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.thumb { width: 104px; }
.thumb img { width: 104px; height: 104px; object-fit: cover; display: block; }
.thumb input { min-height: 44px; padding: 4px 8px; font-size: 13px; margin-top: 4px; }
.thumb button { width: 100%; min-height: 44px; margin-top: 4px; }
.padd { display: flex; gap: 8px; }
.padd label.btn { flex: 1; cursor: pointer; text-align: center; }
.padd input { display: none; }
.rating { display: flex; gap: 8px; }
.rating .opt { flex: 1; min-width: 0; padding: 0; }
.rhint { display: flex; justify-content: space-between; font-size: 13px; color: var(--grey); margin-top: 4px; }
.sig canvas { width: 100%; height: 170px; border: 2px solid var(--ink); background: var(--field); touch-action: none; display: block; }
.sig .row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.note.heading { font-weight: 800; font-size: 16px; color: var(--orange-d); border-bottom: 2px solid var(--orange); padding-bottom: 2px; margin: 8px 0 8px; }
.note.plain { color: var(--grey); font-size: 15px; }

/* ---- generic panels: sign-in, account, team ---- */
.panel { max-width: 720px; margin: 24px auto; padding: 0 16px; }
.panel:not(.wide) { max-width: 540px; padding: 24px; border: 2px solid var(--ink); background: var(--stone); }
.panel:not(.wide) p { margin: 0 0 16px; font-weight: 700; }
.panel.wide { max-width: 1200px; }
.pinerr { color: var(--bad); min-height: 22px; font-size: 15px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: 16px; margin-bottom: 16px; }
.stack label, #teamScreen > label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.panel h2 { margin: 16px 0 8px; font-size: 22px; } .panel h3 { margin: 24px 0 8px; font-size: 18px; }
/* About (menu): the same words on every client's app. The panel rule above makes every paragraph bold, which suits a one-line
   prompt and not a page of reading, so these go back to normal weight (the list too, so the two match). The one link in the words is
   the pack's ink, underlined so it reads as a link; the Afterpost mark links are never underlined, that is for these words only. */
.panel:not(.wide) .about p, .about li { font-weight: 500; }
.about ul { margin: 0 0 16px; padding-left: 20px; }
.about li { margin-bottom: 8px; }
.about a { color: var(--ink); text-decoration: underline; }
.teamlist { display: grid; gap: 8px; }
.trow { background: var(--card); border: 2px solid var(--line); padding: 12px 16px; display: grid; gap: 8px; }
.trow.off { opacity: .6; }
.trow select { width: auto; }
.linkbox { background: var(--card); border: 2px solid var(--orange); padding: 12px 16px; margin: 16px 0; display: grid; gap: 8px; }
.cbtns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Settings: the notification actions are one equal-width group (a single stack on a phone, a pair when there is room, never a
   third left alone); signing out is a separate "This device" group below its own line. Every button is 48px tall. */
.actgroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 4px 0 0; }
.actgroup .btn, .devicegroup .btn { width: 100%; min-height: 48px; padding-block: 8px; line-height: 1.25; text-align: center; }
.devicegroup { margin-top: 24px; padding-top: 8px; border-top: 1.5px solid var(--line); }
.devicegroup h3 { margin: 16px 0 8px; }
/* The Afterpost by ADHD Media lockup: an icon and two lines of words. Words follow the pack's own ink and grey, so they read on any
   pack; the icon file is chosen per pack in app.js (brand/lockup.js). */
.aplock { display: inline-flex; align-items: center; gap: 10px; line-height: 1.15; color: var(--ink); }
.aplock-icon { display: block; flex: none; width: 30px; height: 30px; }
.aplock-text { display: grid; text-align: left; }
.aplock-text strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.aplock-text span { font-size: 13px; font-weight: 500; color: var(--grey); }
.aplock.large { gap: 14px; }
.aplock.large .aplock-icon { width: 48px; height: 48px; }
.aplock.large .aplock-text strong { font-size: 24px; }
.aplock.large .aplock-text span { font-size: 15px; }
/* The mark is a link to ADHD Media's Afterpost page (it opens in a new tab). It must look exactly as it did before it was a link:
   the pack's own ink and grey, no underline (not even on hover), and no size, spacing or position of its own, so its box is the
   mark's box and a flex row lays it out as it laid out the bare mark. It keeps a focus ring of its own, drawn on the link itself:
   the page-wide ring is the accent colour, which the mark must not use, and a link with no box (display: contents) cannot draw one. */
.aplock-link { display: inline-flex; color: inherit; text-decoration: none; }
.aplock-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.authbrand { display: flex; justify-content: center; max-width: 540px; margin: 24px auto 0; padding: 0 16px; }
.accfoot { margin-top: 32px; padding-top: 16px; border-top: 1.5px solid var(--rule); display: flex; justify-content: center; }
.empty { color: var(--grey); padding: 24px 0; text-align: center; }
.banner { padding: 10px max(16px, calc((100vw - 1200px)/2)); padding-top: max(10px, env(safe-area-inset-top)); background: var(--banner); border-bottom: 1.5px solid var(--orange); font-size: 15px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.banner > span { flex: 1 1 260px; }
.installhelp { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: var(--banner); border: 1.5px solid var(--orange); border-radius: 10px; margin-bottom: 12px; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 16px; z-index: 50; max-width: 90%; font-weight: 600; }
.foot { text-align: center; color: var(--grey); font-size: 13px; padding: 24px 16px; }

/* ---- jobs list ---- */
.jobs-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--stone); border: 1px solid var(--rule); border-radius: 12px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--grey); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26,26,26,.14); }
.tab .n, .chip .n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--rule); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.tab[aria-selected="true"] .n { background: var(--orange); color: var(--on-accent); }
.tab[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26,26,26,.14); }
/* the main views: always one row that fits a 375px phone, never a sideways scroll (a long label wraps instead) */
.tabs.views { overflow: visible; flex: 1 1 360px; max-width: 600px; }
.tabs.views .tab { flex: 1 1 auto; min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.15; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 420px) {
  .tabs.views .tab { font-size: 14px; padding: 0 5px; }
  .tabs.views .tab .n { margin-left: 4px; padding: 0 5px; min-width: 18px; }
}
/* Jobs: status chips wrap, they never scroll */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.chip { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] .n { background: var(--orange); color: var(--on-accent); }
.chip.back { border-color: var(--ink); }
.chiptitle { margin: 0; font-size: 18px; font-weight: 900; }
.jobsmore { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; justify-content: center; margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--grey); }
.jobsmore .linkbtn { color: var(--grey); }
.jobsmore .linkbtn[aria-current] { color: var(--ink); text-decoration: none; font-weight: 800; }
.jobs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jobs-actions input[type=search] { width: 280px; }
.joblist { margin-top: 16px; }
.jobsnote { color: var(--grey); font-size: 15px; margin-top: 8px; }
.pill { display: inline-block; padding: 4px 10px; font-size: 13px; font-weight: 700; background: var(--stone); border: 1.5px solid var(--line); white-space: nowrap; }
.pill.ready { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.pill.started { background: var(--field); color: var(--orange-d); border-color: var(--orange-d); }
.pill.completed { background: var(--ok); border-color: var(--ok); color: var(--field); }

/* office: a table on a computer, cards on a phone */
.jtable { border: 2px solid var(--ink); background: var(--card); }
.jtable .thead, .jobrow { display: grid; grid-template-columns: 2.1fr 1.8fr 1.3fr 1fr 1.1fr 0.6fr; gap: 16px; align-items: center; padding: 12px 20px; }
.jtable .thead { background: var(--stone); border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }
.jobrow { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rule); background: transparent; cursor: pointer; min-height: 64px; }
.jobrow:last-child { border-bottom: 0; }
.jobrow:hover, .jobrow:focus-visible { background: var(--stone); }
.jobrow.today { background: var(--today); }
.jobrow .c1 { display: flex; flex-direction: column; } .jobrow .c1 b { font-size: 16px; }
.jobrow .sub { font-size: 13px; color: var(--grey); }
@media (max-width: 860px) {
  .jtable .thead { display: none; }
  .jobrow { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
  .jobrow .c2, .jobrow .c3, .jobrow .c4 { grid-column: 1; font-size: 15px; }
  .jobrow .c5 { grid-column: 2; grid-row: 1; }
  .jobrow .c6 { grid-column: 2; grid-row: 2; }
  .jobs-actions input[type=search] { flex: 1 1 160px; width: auto; min-width: 0; }
  .jobs-actions { width: 100%; flex-wrap: nowrap; }
  .jobs-actions #newJobBtn { flex: none; }
}

/* installer: my surveys */
.ilist { display: grid; gap: 12px; }
.icard { display: flex; gap: 14px; padding: 14px; border: 2px solid var(--line); background: var(--card); text-align: left; width: 100%; cursor: pointer; }
.icard.today { border-color: var(--ink); }
.icard .when { width: 72px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--stone); border: 1.5px solid var(--line); padding: 8px 4px; text-align: center; }
.icard.today .when { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.icard .when b { font-size: 18px; font-weight: 900; line-height: 1.1; }
.icard .when span { font-size: 13px; font-weight: 600; }
.icard .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.icard .who b { font-size: 18px; font-weight: 800; }
.icard .who span { font-size: 15px; color: var(--grey); }
.icard .who em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--orange-d); }

/* ---- office: job details ---- */
.details { display: grid; gap: 16px; padding: 24px; border: 2px solid var(--ink); background: var(--card); }
.details label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.details .divider { border-top: 1px solid var(--rule); padding-top: 16px; }
@media (max-width: 720px) { .grid3 { grid-template-columns: 1fr; } .details { padding: 16px; } }

/* ---- installer: the job ---- */
.jobbar { max-width: 720px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--ink); }
.jobbar .left { display: flex; gap: 8px; align-items: center; }
.savestate { font-size: 13px; font-weight: 700; color: var(--ok); text-align: right; }
.jobhead { max-width: 720px; margin: 16px auto 0; padding: 0 16px; }
.jcard { padding: 16px; border: 2px solid var(--ink); background: var(--stone); display: flex; flex-direction: column; gap: 8px; }
.jcard .badge { align-self: flex-start; padding: 4px 10px; background: var(--orange); color: var(--on-accent); font-size: 13px; font-weight: 800; }
.jcard .badge.none { background: var(--field); color: var(--ink); border: 1.5px solid var(--line); }
.jcard .name { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.jcard .addr { font-size: 15px; white-space: pre-line; }
.jcard .notes { margin: 0; padding: 10px 12px; background: var(--card); border: 1.5px solid var(--line); font-size: 15px; white-space: pre-line; }
.jcard .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.jcard .acts .btn { background: var(--card); }
.sheethead { max-width: 720px; margin: 24px auto 8px; padding: 0 16px; display: flex; justify-content: space-between; align-items: baseline; }
.sheethead h2 { margin: 0; font-size: 18px; font-weight: 900; }
.sheethead span { font-size: 15px; color: var(--grey); }
.dash { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.srows { border: 2px solid var(--ink); background: var(--card); }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left; cursor: pointer; }
.srow:last-child { border-bottom: 0; }
.srow:hover, .srow:focus-visible { background: var(--stone); }
.srow .mark { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; border: 2px solid var(--line); color: var(--line); }
.srow.done .mark { background: var(--ok); border-color: var(--ok); color: var(--field); }
.srow.started .mark { border-color: var(--orange); color: var(--orange-d); }
.srow.need .mark { border-color: var(--orange-d); color: var(--orange-d); }
.srow.invalid .mark { border-color: var(--bad); background: var(--bad); color: var(--field); }
.srow .sname { flex-grow: 1; font-size: 16px; font-weight: 700; }
.srow .ssub { font-size: 13px; color: var(--grey); text-align: right; max-width: 45%; overflow-wrap: anywhere; }
.srow.invalid .ssub { color: var(--bad); font-weight: 700; }
.actions { max-width: 720px; margin: 16px auto 0; padding: 0 16px; display: grid; gap: 8px; }

/* ---- installer: a section ---- */
main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.secview { margin-top: 0; }
.sechead { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px; margin-bottom: 16px; border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 30; background: var(--bg); }
.sechead.ok { border-bottom-color: var(--ok); }
.sechead.todo { border-bottom-color: var(--orange); }
.sechead .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sechead .backlink { min-height: 44px; padding: 0; border: 0; background: transparent; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }
.sechead h2 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.7px; line-height: 1.1; }
.sechead .count { font-size: 15px; color: var(--grey); white-space: nowrap; }
.segs { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 4px; }
.segs span { height: 5px; background: var(--line); }
.segs span.done { background: var(--ok); }
.segs span.needs { background: var(--orange); }
.segs span.here { height: 9px; margin-top: -2px; outline: 2px solid var(--ink); outline-offset: 1px; }
.pagestatus { font-size: 14px; font-weight: 700; min-height: 20px; }
.sechead.todo .pagestatus { color: var(--orange-d); }
.sechead.ok .pagestatus { color: var(--ok); }
.body { padding: 0; }
.secfoot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--ink); }
.secfoot .btn { min-height: 56px; }
.secfoot .next { font-size: 17px; font-weight: 900; }

/* ---- finished job card and success ---- */
.cardview { max-width: 720px; margin: 16px auto; padding: 0 16px; display: grid; gap: 12px; }
.cname { font-size: 22px; font-weight: 900; }
.cardview .pill { justify-self: start; }
.caddr { white-space: pre-line; font-size: 16px; }
.cnotes { background: var(--card); border: 1.5px solid var(--line); padding: 10px 12px; white-space: pre-line; }
.clist { background: var(--card); border: 2px solid var(--ink); }
.crow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.crow:last-child { border-bottom: 0; }
.ck { font-weight: 700; } .cv { color: var(--grey); text-align: right; }
.success { max-width: 720px; margin: 16px auto; padding: 16px; background: var(--card); border: 2px solid var(--ok); }
.success h2 { margin: 0 0 8px; font-size: 22px; }
.success .btn { width: 100%; margin-top: 8px; }
.status { font-weight: 700; margin: 8px 0; }
.status.ok { color: var(--ok); } .status.wait { color: var(--orange-d); }

@media (max-width: 520px) {
  .brand-logo { width: min(150px, 42vw); }
  .brand-meta { flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
  .brand-badge { height: 26px; }
  .panel:not(.wide) { margin: 16px; }
}

/* ---- office overview ---- */
.overview { display: grid; gap: 24px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 16px; border: 2px solid var(--ink); background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 28px; font-weight: 900; line-height: 1; }
.stat span { font-size: 15px; color: var(--grey); }
.stat.warn { background: var(--today); border-color: var(--orange-d); }
button.stat { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.stat:hover, button.stat:focus-visible { box-shadow: 4px 4px 0 var(--orange); transform: translate(-1px, -1px); }
.oblock { scroll-margin-top: 16px; }
.oblock.flash > h2 { animation: oflash 1.4s ease-out; }
@keyframes oflash { 0%, 40% { background: var(--orange); color: var(--on-accent); box-shadow: 0 0 0 6px var(--orange); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .oblock.flash > h2 { animation: none; } button.stat:hover { transform: none; } }
.ocols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.oblock h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.oblock + .oblock { margin-top: 24px; }
.olist, .otable { border: 2px solid var(--ink); background: var(--card); }
.oline { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left; cursor: pointer; }
.oline:last-child { border-bottom: 0; }
.oline:hover, .oline:focus-visible { background: var(--stone); }
.otime { width: 84px; flex-shrink: 0; font-weight: 800; font-size: 15px; }
@media (max-width: 480px) { .oline { gap: 10px; padding: 8px 10px; } .otime { width: 48px; font-size: 14px; } }
.owho { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.owho .sub { font-size: 13px; color: var(--grey); }
.orow { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); align-items: center; }
.orow:last-child { border-bottom: 0; }
.orow span { text-align: center; font-size: 16px; font-weight: 700; }
.orow.ohead { background: var(--stone); border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--grey); }
.orow.ohead span { font-size: 13px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ocols { grid-template-columns: 1fr; } }
.onsite { align-self: flex-start; padding: 4px 10px; background: var(--ok); color: var(--field); font-size: 13px; font-weight: 800; }

/* ---- social posts ---- */
.thumb .social { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 700; }
.thumb .social input { width: 24px; height: 24px; accent-color: var(--orange); }
.thumb select { min-height: 44px; padding: 4px 6px; font-size: 13px; margin-top: 4px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pphoto { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.pphoto img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); background: var(--stone); }
.pphoto input { width: 22px; height: 22px; accent-color: var(--orange); vertical-align: middle; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.problems { padding: 12px 16px; border: 2px solid var(--bad); background: var(--problem-bg); color: var(--bad); }
.problems ul { margin: 6px 0 0; padding-left: 20px; }
.okline { margin: 0; padding: 10px 14px; border: 2px solid var(--ok); color: var(--ok); font-weight: 700; background: var(--ok-bg); }

/* ---- choose one of three captions (a client's first posts): stacked on a phone, side by side from 900px ---- */
.choosebox { display: grid; gap: 12px; }
.choosebox h3 { margin: 8px 0 0; }
.choosebox .rhint { display: block; margin: 0; }
.cands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cand { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 2px solid var(--ink); background: var(--card); }
.cand h4 { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.2; }
.candtext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cand .problems, .cand .okline { font-size: 14px; }
.cand .btn { width: 100%; margin-top: auto; }
.voicebox .choiceline { margin: 12px 0 0; font-weight: 400; } /* the choose-one line sits under the figures as a note, not a second headline */
.ownbox { display: grid; gap: 4px; justify-items: start; }
@media (max-width: 520px) { .ownbox { justify-items: stretch; } }
@media (min-width: 900px) { .cands.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cands.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- header menu (account, team, sign out) ---- */
.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 4px; border: 1.5px solid var(--line); border-radius: 22px; cursor: pointer; font-weight: 700; font-size: 15px; background: var(--card); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu[open] summary, .usermenu summary:hover { border-color: var(--ink); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.menupop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 0 8px 24px rgba(26,26,26,.16); padding: 6px; display: grid; }
.menupop .mwho { margin: 6px 10px 8px; color: var(--grey); font-size: 13px; }
.menupop button { text-align: left; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.menupop button:hover { background: var(--stone); }
.menupop button[hidden] { display: none; }
#menuSignOut { color: var(--bad); }
@media (max-width: 560px) { .usermenu .mlabel { display: none; } .brand-meta { flex-direction: row; gap: 10px; } .usermenu summary { padding: 0 4px; } .brand-badge { height: 28px; } }
/* the header lockup gives way before the header can overflow: the second line first, then the word, then (when a badge shares the header) the whole mark */
@media (max-width: 700px) { .aplock.header .aplock-text span { display: none; } }
@media (max-width: 440px) { .brand-meta:has(.brand-badge:not([hidden])) .aplock.header .aplock-text { display: none; } }
@media (max-width: 380px) { .aplock.header .aplock-text { display: none; } }
/* the link around the mark goes with it: an empty link would be left behind as a tap target and a keyboard stop, and (as a flex
   item) would still add a gap beside the badge. At the wider widths only the words go, and the icon stays a link. */
@media (max-width: 350px) {
  .brand-meta:has(.brand-badge:not([hidden])) .aplock.header { display: none; }
  .brand-meta:has(.brand-badge:not([hidden])) .aplock-link { display: none; }
}

/* ---- scheduling and the before-and-after image ---- */
.schedbox { margin-bottom: 8px; }
.schedbox label { display: grid; gap: 6px; max-width: 320px; font-weight: 700; }
.bapreview { display: grid; gap: 12px; margin: 12px 0; }
.bapreview .bacanvas { width: min(100%, 440px); height: auto; aspect-ratio: 4 / 5; border-radius: 12px; border: 1.5px solid var(--ink); touch-action: none; cursor: grab; }
.pstat { display: grid; justify-items: end; gap: 3px; }
.pstat.start { justify-items: start; }
.pwhen { font-size: 12px; color: var(--grey); margin-top: 2px; }
.oline .pill { flex-shrink: 0; }

/* ---- calendar: a week of days stacked down a phone; a month grid on a wide screen, a compact month on a phone ---- */
.cal { display: grid; gap: 12px; }
.calbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.calnav { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
@media (min-width: 900px) { .calnav { flex: 0 1 480px; } }
.calarrow { width: 48px; padding: 0; font-size: 26px; line-height: 1; flex: none; }
.caltitle { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.caltitle b { font-size: 17px; font-weight: 900; }
.caltitle span { font-size: 13px; font-weight: 600; color: var(--grey); }
.calopts { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.tabs.seg { overflow: visible; }
.callegend { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; color: var(--grey); }
.callegend i { display: inline-block; width: 20px; height: 12px; margin-right: 6px; border: 2px solid var(--orange); border-radius: 4px; vertical-align: -1px; background: var(--card); }
.callegend i.install { background: var(--orange); }
.calundated { border: 1.5px solid var(--orange-d); border-radius: 12px; background: var(--today); }
.calundated summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-weight: 800; color: var(--orange-d); cursor: pointer; list-style: none; }
.calundated summary::-webkit-details-marker { display: none; }
.calundated summary::after { content: "Show \25BE"; margin-left: auto; font-size: 13px; font-weight: 700; }
.calundated[open] summary::after { content: "Hide \25B4"; }
.calundated .cdjobs { margin: 0; padding: 0 10px 10px; }
.week { display: grid; gap: 10px; }
.cday { padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); }
.cday.weekend { background: transparent; border-color: var(--rule); }
.cday.weekend .cdhead b { color: var(--grey); font-weight: 700; }
.cday.today { border: 2px solid var(--orange); background: var(--today); }
.cdhead { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.cdhead b { font-size: 16px; font-weight: 800; }
.cdhead .tag { padding: 0 8px; border-radius: 10px; background: var(--orange); color: var(--on-accent); font-size: 12px; font-weight: 800; line-height: 20px; }
.cdcount { margin-left: auto; font-size: 13px; color: var(--grey); }
.cdadd { width: 44px; height: 44px; flex: none; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; }
.cdadd:hover { border-color: var(--ink); }
.cdjobs { display: grid; gap: 8px; margin-top: 8px; }
p.cdempty { margin: 4px 0 0; font-size: 14px; color: var(--grey); }
button.cdempty { width: 100%; min-height: 44px; margin-top: 6px; border: 1.5px dashed var(--line); border-radius: 10px; background: transparent; color: var(--grey); font-weight: 700; font-size: 14px; cursor: pointer; }
button.cdempty:hover { border-color: var(--ink); color: var(--ink); }
.cjob { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; padding: 8px 10px; border: 2px solid var(--orange); border-radius: 10px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.cjob.install { background: var(--orange); color: var(--on-accent); }
.cjob:hover { box-shadow: 0 2px 6px rgba(26,26,26,.18); }
.cjob .ctime { width: 58px; flex: none; font-size: 14px; font-weight: 800; line-height: 1.2; }
.cjob .cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cjob .cname { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.cjob .cmeta { font-size: 13px; color: var(--grey); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.cjob.install .cmeta { color: var(--on-accent); }
.ccue { padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.ccue.ok { background: var(--ok); border-color: var(--ok); color: var(--field); }
.cini { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--stone); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.cjob.install .cini { background: var(--card); color: var(--ink); }
.cini.none { border-style: dashed; color: var(--grey); }
/* month on a wide screen (a phone has its own, further down) */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.mhd { padding: 8px; background: var(--stone); border-bottom: 1.5px solid var(--line); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }
.mcell { min-width: 0; min-height: 128px; padding: 6px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.month .mcell:nth-child(7n) { border-right: 0; }
.month.canadd .mcell { cursor: pointer; }
.mcell.weekend { background: var(--weekend); }
.mcell.out { background: var(--bg); }
.mcell.out .mdate span { color: var(--line); }
.mcell.today { background: var(--today); box-shadow: inset 0 0 0 2px var(--orange); }
.mdate { display: flex; justify-content: space-between; align-items: center; min-height: 28px; font-size: 14px; font-weight: 800; }
.mcell.weekend .mdate span { color: var(--grey); font-weight: 700; }
.mdate .cdadd { width: 28px; height: 28px; border-radius: 8px; font-size: 18px; border-color: var(--rule); color: var(--grey); }
@media (hover: hover) { .mcell .cdadd { opacity: 0; } .mcell:hover .cdadd, .mcell .cdadd:focus-visible { opacity: 1; } }
.cjob.mini { min-height: 28px; gap: 4px; padding: 2px 6px; border-width: 1.5px; border-radius: 6px; }
.cjob.mini .ctime { width: auto; font-size: 12px; }
.cjob.mini .cname { min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cjob.mini .ctick { font-size: 12px; font-weight: 900; color: var(--ok); }
.cjob.mini.install .ctick { color: var(--ink); }
.mmore { align-self: flex-start; padding: 2px 4px; border: 0; background: transparent; color: var(--orange-d); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* month on a phone: a compact grid of day buttons, and under it the day you tapped. The page draws it on every screen narrower than
   the wide month, so none of these rules sit inside a wide-screen query. Colours are the pack's variables only. */
.pphone { display: grid; gap: 12px; }
.pcal { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.pwd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--stone); border-bottom: 1.5px solid var(--line); }
.pwd span { padding: 6px 0; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--grey); }
/* seven equal columns that may shrink (minmax(0, 1fr)), so 320px never scrolls sideways. --pm is the marker size: a little smaller
   on the narrowest phones so that three markers still fit one column */
.pmonth { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); --pm: clamp(10px, 3.2vw, 12px); }
.pcell { min-width: 0; min-height: 48px; padding: 2px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.pmonth .pcell:nth-child(7n) { border-right: 0; }
.pmonth .pcell:nth-last-child(-n + 7) { border-bottom: 0; }
/* the ring sits inside the button (a negative offset) because the grid's rounded frame would clip one drawn outside it */
.pcell:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.pcell.sel:focus-visible { outline-color: var(--card); }
/* today's own ring is the same colour as the focus ring, so draw the focus ring inside it: otherwise keyboard focus on today only looks one pixel thicker */
.pcell.today:focus-visible { outline-offset: -6px; }
/* the "+n" has a strip of its own above the date, so a two-digit date and "+10" can never collide */
.pmore { min-height: 12px; font-size: 11px; font-weight: 800; line-height: 12px; color: var(--orange-d); }
.pnum { font-size: 16px; font-weight: 800; line-height: 20px; }
.pmarks { display: flex; justify-content: center; gap: 3px; min-height: var(--pm); }
.pcell.weekend { background: var(--weekend); }
.pcell.weekend .pnum { color: var(--grey); font-weight: 700; }
/* a day of the neighbouring month: dimmed, but its markers show in full because there may be jobs on it */
.pcell.out { background: var(--bg); }
.pcell.out .pnum { color: var(--grey); font-weight: 600; }
.pcell.today { background: var(--today); box-shadow: inset 0 0 0 2px var(--orange); }
.pcell.today .pnum { font-weight: 900; }
.pcell.sel { background: var(--ink); color: var(--bg); }
.pcell.sel .pnum, .pcell.sel .pmore { color: var(--bg); }
.pcell.sel.today { box-shadow: inset 0 0 0 2px var(--card); }
/* the same two looks as the key: an installation is filled with the accent, a visit is outlined in it */
.pmark { box-sizing: border-box; flex: none; width: var(--pm); height: var(--pm); display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 3px; background: var(--card); }
.pmark.install { background: var(--orange); }
.pmark.pre { background: var(--card); }
/* done turns green AND carries a tick: on a pack whose accent is a dark green-teal the two greens are nearly the same colour (contrast
   about 1.5), so colour alone would not tell a done installation from a booked one */
.pmark.done { border-color: var(--ok); }
.pmark.install.done { background: var(--ok); }
.pmark.done::after { content: ""; width: 3px; height: 5px; margin-top: -1px; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pmark.install.done::after { border-color: var(--field); }
.pmark.cancelled { opacity: .4; border-style: dashed; }
/* the selected day is filled dark, so its markers get a light halo or an accent that is itself dark would vanish into it */
.pcell.sel .pmark { box-shadow: 0 0 0 1.5px var(--card); }
.pday { padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); }
.pday.today { border: 2px solid var(--orange); background: var(--today); }
/* the day is spelled out in full here, so on the narrowest phones its words wrap, never the "2 jobs" beside it: flex: none keeps
   the count at its full width instead of letting it shrink and break after the number */
.pday .cdcount { flex: none; }
.pday .popen { width: 100%; margin-top: 10px; }
.csocial { margin: 14px 0; padding: 12px 14px; border: 1.5px solid var(--line); background: var(--card); }
.csocial .rhint { margin: 4px 0 0; }

/* ---- performance (office and admin): how the posts did ---- */
.perfbtn { width: 100%; justify-content: flex-start; margin-bottom: 12px; background: var(--stone); }
.perfico { width: 18px; height: 18px; flex-shrink: 0; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 4px 45% no-repeat, linear-gradient(var(--orange), var(--orange)) 7px 100% / 4px 75% no-repeat, linear-gradient(var(--ink), var(--ink)) 14px 100% / 4px 100% no-repeat; }
.perfhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.monthpick { display: flex; align-items: center; gap: 8px; }
.monthpick strong { min-width: 150px; text-align: center; font-size: 18px; font-weight: 900; }
.monthpick .btn { min-width: 48px; font-size: 22px; padding: 0; }
.perfupd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perfupd .rhint { margin: 0; }
.perfnote { margin: 0 0 16px; padding: 10px 14px; border: 2px solid var(--line); background: var(--stone); font-size: 15px; }
.perfnote.warn { border-color: var(--orange-d); background: var(--today); }
.perf .oblock > .rhint { display: block; margin: -4px 0 12px; }
.perf .stat { min-width: 0; }
.perf .stat b { font-size: 26px; overflow-wrap: anywhere; }
.perf .stat b.nm { font-size: 16px; line-height: 1.2; color: var(--grey); }
.perf .stat small { font-size: 13px; color: var(--grey); }
.voiceline { margin: 0 0 12px; font-weight: 700; }
.voicebox .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-bottom: 12px; }
.netcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.netcard { border: 2px solid var(--ink); background: var(--card); }
.panel .netcard h3 { margin: 0; padding: 10px 14px; font-size: 16px; background: var(--stone); border-bottom: 1px solid var(--rule); }
.netcard .cv { font-weight: 800; text-align: right; }
.toplist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.topcard { display: flex; gap: 12px; padding: 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); text-decoration: none; min-width: 0; }
.topcard:hover, .topcard:focus-visible { background: var(--stone); }
.topcard img, .topcard .ptile { width: 84px; height: 84px; flex-shrink: 0; object-fit: cover; border: 1.5px solid var(--line); background: var(--stone); }
.topcard .ptile { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--grey); text-align: center; }
.topcard b { overflow-wrap: anywhere; }
.madein { align-self: flex-start; margin-top: 4px; padding: 2px 8px; background: var(--orange); color: var(--on-accent); font-size: 12px; font-weight: 800; }
.pbars { display: grid; gap: 10px; max-width: 560px; }
.pbar { display: grid; grid-template-columns: 44px 1fr 56px; gap: 10px; align-items: center; font-size: 15px; }
.pbm { font-weight: 800; }
.pbt { height: 18px; background: var(--rule); }
.pball { display: block; height: 100%; background: var(--ink); min-width: 2px; }
.pbapp { display: block; height: 100%; background: var(--orange); }
.pbn { color: var(--grey); font-size: 13px; white-space: nowrap; }
.rstrip { padding: 12px 16px; border: 2px solid var(--ink); background: var(--stone); }
.panel .rstrip h3 { margin: 0 0 6px; font-size: 16px; }
.rstrip p { margin: 0 0 4px; font-size: 15px; }
.rstrip .rhint { display: block; }
.rstrip .warn { color: var(--orange-d); font-weight: 700; }
@media (max-width: 640px) { .netcards { grid-template-columns: 1fr; } .perfhead { flex-direction: column; align-items: stretch; } .monthpick { justify-content: space-between; } .perf .stat b { font-size: 22px; } }

/* review requests: the QR card at sign-off (always black on white, never themed) and the office Reviews list */
.reviewcard { border: 2px solid var(--ink); background: var(--card); padding: 14px; margin-top: 14px; text-align: center; }
.reviewcard h3 { margin: 0 0 10px; }
.reviewqr { display: inline-block; background: #fff; line-height: 0; }
.reviewqr svg { width: 180px; height: 180px; display: block; }
.reviewlink { overflow-wrap: anywhere; font-size: 14px; }
.revtask { border: 2px solid var(--ink); background: var(--card); padding: 14px; margin-bottom: 12px; }
.revtask h3 { margin: 0 0 4px; }
.revtask p { margin: 4px 0; overflow-wrap: anywhere; }
.revbtns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.revbtns .btn { width: 100%; min-height: 48px; justify-content: center; }
.revbadge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; background: var(--orange); color: var(--on-accent); font-weight: 700; text-align: center; }
.toast .btn { margin-left: 10px; }

/* ---------- guided camera ---------- */
body.cam-open { overflow: hidden; }
.cam { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; overflow: hidden; touch-action: none; }
.cam-video, .cam-ghost, .cam-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-ghost { pointer-events: none; }
.cam-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.35); }
.cam-frame.portrait { aspect-ratio: 3 / 4; height: min(72%, calc(100vw * 4 / 3)); }
.cam-frame.landscape { aspect-ratio: 4 / 3; width: min(80%, calc(100vh * 4 / 3)); }
.cam-turn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 20px; font-weight: 800; background: rgba(0, 0, 0, 0.45); pointer-events: none; }
.cam-turn-icon { font-size: 56px; }
.cam-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; pointer-events: none; display: flex; justify-content: center; }
.cam-line span { display: none; position: absolute; top: 6px; font-size: 13px; font-weight: 800; }
.cam-line.on { height: 4px; margin-top: -2px; background: var(--orange); }
.cam-line.on span { display: block; }
.cam-top, .cam-bottom, .cam-review { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.cam-top { top: 0; padding-top: calc(8px + env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.cam-title { flex: 1; text-align: center; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-bottom, .cam-review { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
.cam-tip { position: absolute; left: 0; right: 0; bottom: calc(110px + env(safe-area-inset-bottom)); padding: 8px 14px; text-align: center; font-weight: 600; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.cam-btn { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid #fff; border-radius: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
.cam-btn.primary { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.cam-shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, 0.85); cursor: pointer; flex: none; }
.cam-slide { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; width: 30%; max-width: 140px; }
.cam-bottom > :first-child, .cam-bottom > :last-child { min-width: 30%; }
.cam-review { justify-content: space-around; }
@media (orientation: landscape) and (max-height: 500px) {
  .cam-bottom { top: 56px; left: auto; bottom: 0; right: 0; width: calc(96px + env(safe-area-inset-right)); flex-direction: column; justify-content: space-between; padding: 8px calc(12px + env(safe-area-inset-right)) 8px 12px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55)); }
  .cam-bottom > :first-child, .cam-bottom > :last-child { min-width: 0; }
  .cam-slide { width: 100%; max-width: none; }
  .cam-tip { bottom: 12px; right: 110px; }
  .cam-review { left: auto; top: 56px; width: 120px; flex-direction: column; background: none; }
}

/* ---------- light invoicing: the Money card, invoice screens and bottom sheets ---------- */
.mcard { margin-top: 16px; padding: 16px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); display: grid; gap: 12px; box-sizing: border-box; max-width: 100%; }
.mcard h2, .mcard h3, .mcard p { margin: 0; }
.msum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .msum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mstat { padding: 8px 10px; border: 1.5px solid var(--line); background: var(--stone); min-width: 0; overflow-wrap: anywhere; }
.mstat small { display: block; color: var(--grey); font-size: 13px; font-weight: 700; }
.mstat b { font-size: 18px; }
.mlist { display: grid; gap: 8px; }
.mrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 12px 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.mrow:hover { border-color: var(--ink); }
.mrow .mmain, .mrow .mside { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.mrow .mamt { font-weight: 800; }
.pill.late { border-color: var(--bad); color: var(--bad); }
.pill.test { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mtable { width: 100%; border-collapse: collapse; }
.mtable td { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.mtable .r { text-align: right; white-space: nowrap; padding-left: 12px; }
.mtable .mtotal td { border-top: 2px solid var(--ink); font-weight: 800; }
.mpay { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mpay.void .mpmain { text-decoration: line-through; color: var(--grey); }
.mlog summary { cursor: pointer; font-weight: 800; }
.mlog p { font-size: 14px; color: var(--grey); margin-top: 6px; }
.msheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); }
.msheet-box { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; display: grid; gap: 12px; padding: 16px; box-sizing: border-box; background: var(--card); color: var(--ink); border-top: 3px solid var(--ink); }
.msheet-box h3 { margin: 0; }
.msheet-box label { display: grid; gap: 4px; font-weight: 700; min-width: 0; }
.msheet-box textarea { overflow-y: auto; }
.mline { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; margin-bottom: 8px; }

/* workflow timeline on a job, and the Tasks screen: one column, big buttons, text on --ink or --on-accent only */
.tlcard h3 { margin: 0; }
.tlstep { display: grid; gap: 6px; padding: 10px 12px; border: 1.5px solid var(--line); background: var(--stone); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tlhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tlchip { flex: none; padding: 2px 8px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--ink); background: var(--field); color: var(--ink); }
.tl-pending .tlchip, .tl-running .tlchip { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.tl-failed .tlchip { border-color: var(--bad); }
.tl-done, .tl-skipped, .tl-cancelled { opacity: .85; }
.tlstep small { color: var(--ink); font-size: 14px; }
.tlreason { font-style: italic; }
.tlstep .cbtns .btn { min-height: 44px; }
#tasksScreen h2 { margin: 16px 0 8px; }
.tltask h3 { overflow-wrap: anywhere; }

/* customer page card on a job: text on --ink or --card only */
.portalcard input[type=text], .portalcard input[type=number] { width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--ink); background: var(--field); color: var(--ink); }
.portalcard details summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }

/* calendar import: spotted bookings, the settings screen, and jobs the diary cancelled */
.spotbanner { width: 100%; min-height: 48px; margin-bottom: 16px; justify-content: center; }
.spotcard .spotwhen { font-weight: 800; font-size: 18px; }
.spotcard .spottitle { color: var(--ink); }
.spotcard .spotdesc { color: var(--grey); font-size: 14px; white-space: pre-wrap; max-height: 9em; overflow: auto; }
.spotcard .spotlink { font-weight: 700; margin-top: 12px; }
.calsteps { margin: 20px 0 0; padding-left: 20px; color: var(--grey); }
.calsteps li { margin: 4px 0; }
#calUrl { width: 100%; max-width: 100%; }
.calbanner { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 12px 14px; border: 2px solid var(--bad); background: var(--stone); color: var(--ink); }
.calnote { margin: 0 0 12px; }
.cjob.cancelled { opacity: .75; border-style: dashed; }
.cjob.cancelled .cname, .cjob.cancelled .ctime { text-decoration: line-through; }
.jobrow.cancelled .c1 b { text-decoration: line-through; }

/* ---- Content (office and admin): what has been scheduled in Metricool for this client, read only ----
   Every rule starts with #contentScreen (or #contentBody), so nothing else on the page can change. Colours are the pack's own variables,
   never written out, because each client's pack sets its own. Words and web addresses inside a post wrap (overflow-wrap), so a 320px phone
   never scrolls sideways, and nothing is given a fixed width over 280px. A draft says Draft and has a dashed outline: never colour alone. */
#contentScreen { overflow-wrap: anywhere; }
#contentBody { max-width: 720px; }
#contentScreen .ct-updated { margin: 0 0 16px; font-size: 14px; color: var(--grey); }
#contentScreen .ct-note { margin: 0 0 16px; padding: 10px 14px; border: 2px solid var(--line); background: var(--stone); font-size: 15px; }
#contentScreen .ct-note.bad { border-color: var(--bad); background: var(--problem-bg); color: var(--bad); font-weight: 700; }
#contentScreen .ct-day { margin: 0 0 24px; scroll-margin-top: 12px; }
/* A day that has gone is told apart by a grey heading, a grey time and lighter outlines, never by fading it: opacity took the grey text and the
   green badge under AA contrast (3.7 to 4.1 against 4.5) on the first client's colours. Every pair here is the pack's own, at full strength. */
#contentScreen .ct-day.past .ct-head { color: var(--grey); border-bottom-color: var(--line); }
#contentScreen .ct-day.past .ct-card { border-color: var(--line); }
#contentScreen .ct-day.past .ct-time { color: var(--grey); }
#contentScreen .ct-head { margin: 0 0 10px; padding: 6px 10px; border-bottom: 2px solid var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
#contentScreen .ct-day.today .ct-head { background: var(--orange); border-bottom-color: var(--orange); color: var(--on-accent); }
#contentScreen .ct-card { display: grid; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 12px; border: 2px solid var(--ink); background: var(--card); }
#contentScreen .ct-card.draft { border: 2px dashed var(--ink); background: var(--stone); }
#contentScreen .ct-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#contentScreen .ct-time { font-size: 18px; font-weight: 900; }
#contentScreen .ct-nets { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--grey); }
#contentScreen .ct-badge { padding: 2px 10px; border: 1.5px solid var(--ink); background: var(--field); color: var(--ink); font-size: 13px; font-weight: 800; }
#contentScreen .ct-badge.published { background: var(--ok); border-color: var(--ok); color: var(--field); }
#contentScreen .ct-badge.review { background: var(--today); border-color: var(--orange-d); }
#contentScreen .ct-badge.draft { background: var(--stone); border-style: dashed; }
#contentScreen .ct-badge.unknown { border-style: dotted; }
#contentScreen .ct-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
#contentScreen .ct-kind { flex: none; width: 72px; padding: 22px 4px; border: 1.5px solid var(--line); background: var(--stone); color: var(--grey); font-size: 12px; font-weight: 800; text-align: center; }
#contentScreen .ct-card.draft .ct-kind { background: var(--card); }
#contentScreen .ct-text { flex: 1 1 0; min-width: 0; margin: 0; font-size: 15px; }
#contentScreen .ct-none { color: var(--grey); }
#contentScreen .ct-ask summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); font-size: 15px; font-weight: 800; line-height: 1.25; cursor: pointer; list-style: none; }
#contentScreen .ct-ask summary::-webkit-details-marker { display: none; }
#contentScreen .ct-ask summary::after { content: "\25BE"; flex: none; margin-left: auto; }
#contentScreen .ct-ask[open] summary::after { content: "\25B4"; }
#contentScreen .ct-ask summary:hover { background: var(--stone); }
#contentScreen .ct-ask summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
#contentScreen .ct-choices { display: grid; gap: 8px; margin-top: 10px; }
#contentScreen .ct-choices .btn { width: 100%; }
#contentScreen .ct-addr { margin: 0; font-size: 14px; color: var(--grey); }