/* Jobs Manager phone. (2026-10-20 redesign - the owner's concept docs\superpowers\specs\ui-reference\DraftLine-UI-owner-
   2026-10-20.html: calm and simple, easy with a thumb at 375 px.) The design's tokens first, then every screen drawn
   with them: soft grey page, white cards with thin borders, 10-14 px corners, the phone's own font, tap targets of 44 px
   or more, 16 px boxes (no zoom when one is tapped), long words wrap and nothing scrolls sideways.
   (2026-10-20, the owner) ALWAYS LIGHT: one set of tokens - no dark set, even when the phone is dark ("only light" also
   keeps the browser from darkening the page itself). The accents are BLACK and GREY: primary buttons black with white
   words, secondary ones a grey outline, chips and borders grey, the words near-black, a selected tab / chip / choice
   grey with black words, the money card's left mark black; a destructive button red words. Every stage badge keeps its
   own colour, its words 4.5:1 or more on white and on its own tint. The TEST build's safety marks ALONE are coloured
   - the strip along the top and the "TEST" tag (and the PDF viewer's strip and the same tag in its header) - in --mark: the TEST config's colour,
   filled in by build.py; the LIVE build has no mark colour at all (transparent).
   No inline styles anywhere (the page's security rules allow only this file); no fonts or anything else from outside. */
:root {
  color-scheme: only light;
  --mark: transparent;                /* the TEST build's strip and "TEST" tag only (LIVE: transparent) */
  --on-mark: #ffffff;              /* (app.js sets data-ink="dark" on the page when the mark is a light colour - TEST's orange) */
  --accent: #111111;               /* black: primary buttons, the money card's mark, a chosen chip's or choice's edge, focus */
  --on-accent: #ffffff;
  --accent-soft: #e9ebee;          /* grey: a selected tab, chip, choice; Owed to you lit */
  --accent-text: var(--text);      /* links and the words that were the accent's: near-black */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1b1f24;
  --muted: #5d646e;                /* (4.5:1 or more on the soft tints - No stage, the switch's Off, Owed to you lit) */
  --border: #e4e7eb;
  --border-strong: #c9ced5;
  --soft: #f0f2f5;
  --danger: #b42323;
  --danger-soft: #fdeeee;
  --danger-border: #efc1c1;
  --ok: #1c7a41;
  --ok-soft: #e7f5ec;
  --ok-border: #b9e0c6;
  --warn-bg: #fff6dc;
  --warn-text: #6b4e00;
  --warn-border: #f0d78a;
  --info-bg: #eef0f3;              /* the verdicts' bar: grey, near-black words (no blue - the accents are black and grey) */
  --info-text: #1b1f24;
  --info-border: #d3d8de;
  --inv: #4a56c9;                  /* (Earnings: invoiced - the PC's blue; a chart's colour, not an accent) */
  --rec: #2fa36b;                  /* (Earnings: received - the PC's green; its bars) */
  --rec-text: #1c7a41;             /* (the received total's words: the green 3.2:1 on white is too light for words) */
  --paper-bg: #dde1e6;             /* the PDF viewer behind the pages: white paper stands out on it */
  --shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  --radius: 12px;
}
:root[data-ink="dark"] { --on-mark: #1b1b1b; }

/* ---- the page ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.45; color: var(--text); background: var(--bg);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word;
}
main { padding: 16px 16px 32px; max-width: 720px; margin: 0 auto; overflow-x: clip; }
#app.with-tabs main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.boot { padding: 24px 16px; color: var(--muted); }
a { color: var(--accent-text); }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { opacity: 0.55; cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* words for screen readers only (a back arrow's, a filter's "tap to" words) */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { display: block; flex: none; width: 20px; height: 20px; }

/* ---- the top bar: the app's name (TEST marked: the strip and the tag) and the "..." menu (Sign out, the version) ---- */
/* the header and the bars stay at the top together (a verdict that comes up while scrolled down on a form is in view) */
.head { position: sticky; top: 0; z-index: 6; }
/* (the strip: TEST's mark colour; LIVE's mark is transparent - the bar's own white) */
.top {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px;
  padding: 4px 6px 4px 16px; padding-top: max(4px, env(safe-area-inset-top));
  background: var(--surface); border-top: 4px solid var(--mark); border-bottom: 1px solid var(--border);
}
.app-title { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.3px; min-width: 0; overflow-wrap: anywhere; }
.brand-test {
  display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 6px; background: var(--mark); color: var(--on-mark);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; vertical-align: 3px;
}
.menu-btn, .icon-btn {
  display: flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text);
}
.menu-btn[aria-expanded="true"] { background: var(--soft); }
.menu {
  position: absolute; right: 8px; top: calc(100% + 4px); z-index: 8; min-width: 232px; max-width: calc(100vw - 16px);
  padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.menu-item, .more-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-size: 16px; text-align: left; text-decoration: none;
}
.menu-item:active, .more-item:active { background: var(--soft); }
.menu-item .icon, .more-item .icon { color: var(--muted); }
.menu .version { padding: 8px 12px 6px; margin: 0; text-align: left; border-top: 1px solid var(--border); }
.menu .signout + .version { margin-top: 4px; }
.version { color: var(--muted); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.scrim { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; background: rgba(0, 0, 0, 0.18); }
/* (R2 review) a menu or the details sheet open: the bars under the top bar sit above the scrim (in .head) - dimmed as the
   page is (the scrim's 18% black) and not tappable: a tap there lands on .head, which only closes it (app.js) */
.head.covered .updbar, .head.covered .bar, .head.covered .vbar { pointer-events: none; filter: brightness(0.82); }

/* the bars under it: no signal / the copy's time (tapped: what happened), the update offer, the verdicts */
.bar {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: var(--warn-bg); color: var(--warn-text);
  font-size: 15px; border-bottom: 1px solid var(--warn-border);
}
.bar-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bar.bar-tap { cursor: pointer; padding-right: 4px; }
.bar-i {
  display: flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; padding: 0; margin: -6px 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--warn-text);
}
/* what was found about a change that was not confirmed: stays until Close */
.vbar {
  display: flex; align-items: center; gap: 10px; background: var(--info-bg); color: var(--info-text); padding: 8px 8px 8px 16px; font-size: 15px;
  border-bottom: 1px solid var(--info-border); box-shadow: inset 3px 0 var(--accent); font-weight: 600;
}
.vtext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vclose {
  flex: none; min-height: 44px; padding: 6px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 10px; font-size: 15px; font-weight: 600;
}
.updbar {
  display: block; width: 100%; min-height: 48px; border: 0; text-align: left;
  background: var(--text); color: var(--bg); padding: 12px 16px; font-size: 16px; font-weight: 600;
}

/* ---- the bottom tab bar on the main screens (Jobs, Hourly work, Statements, More) - never while a box is typed in ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 5px 8px max(8px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
  min-height: 56px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1.2; text-align: center; text-decoration: none;
}
.tab-l { max-width: 100%; overflow-wrap: anywhere; }
.tab[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.tab[aria-expanded="true"] { color: var(--text); background: var(--soft); }
.tab-n {
  position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #ffffff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.more {
  position: fixed; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 8; min-width: 232px; max-width: calc(100vw - 16px);
  padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.more-signout { border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }

/* ---- a screen's head: a main screen's title (the list: + New job beside it); a sub-screen's back arrow + title ---- */
.screen h2 { margin: 8px 0 12px; font-size: 21px; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 16px; }
.screen .page-head h2, .page-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -0.5px; min-width: 0; overflow-wrap: anywhere; }
.subhead { display: flex; align-items: flex-start; gap: 4px; margin: -4px 0 12px -10px; }
.screen .subhead h2 { flex: 1 1 auto; min-width: 0; margin: 9px 0 0; font-size: 21px; line-height: 1.3; font-weight: 650; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.back {
  display: flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.back:active { background: var(--soft); }
h3 { font-size: 16px; font-weight: 650; margin: 20px 0 8px; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.note { color: var(--muted); font-size: 14px; margin: 0 0 12px; overflow-wrap: anywhere; }
.empty { color: var(--muted); overflow-wrap: anywhere; }
.msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lab { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }

/* ---- buttons and boxes: primary = black with white words, secondary = a grey outline, destructive = red words ---- */
.primary {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 16px;
  border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; text-align: center;
}
a.primary { text-align: center; text-decoration: none; }
.link { min-height: 44px; background: none; border: 0; color: var(--accent-text); padding: 10px 0; text-decoration: underline; font-size: 16px; }
.again {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; margin: 8px 0 0; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}
label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
input, select, textarea {
  font: inherit; font-size: 16px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
textarea { resize: vertical; }
input[name="code"] { letter-spacing: 6px; font-size: 22px; max-width: 220px; }
input[type="date"] { min-height: 46px; }
input[type="checkbox"] { accent-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 600; }
label.check input { display: inline-block; width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; }

/* ---- the jobs list (2026-10-20 redesign): the title and + New job; ONE money card (Owed to you - the filter -, then
   Invoiced / Received this month); the search; ONE stage dropdown and View (Group by, Order, Show hidden) ---- */
.newjob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 10px 14px;
  border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.newjob-btn .icon { width: 18px; height: 18px; }
.setup-chip {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); font-weight: 650; text-decoration: none; text-align: center;
}
.money-card { margin: 0 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
/* (2026-10-21, review) the keyboard's focus ring drawn inside the card's buttons and line - the card (overflow: hidden, for
   its round corners) would cut off a ring drawn outside them */
.money-card .amt-eye:focus-visible, .money-card .owed:focus-visible, .money-card .owed-ub:focus-visible { outline-offset: -3px; }
/* "Owed to you": a button - the PC's filter, lit while only the jobs with money owed are shown */
.owed {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 72px; margin: 0; padding: 13px 15px;
  background: transparent; border: 0; box-shadow: inset 3px 0 var(--accent); color: var(--text); font-size: 16px; text-align: left;
}
.owed.on { background: var(--accent-soft); }
.owed-main { display: flex; flex-direction: column; min-width: 0; }
.owed-label { display: block; color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.owed-sum { display: block; font-size: 27px; line-height: 1.15; font-weight: 650; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.owed-side { display: flex; align-items: center; gap: 4px; flex: none; max-width: 45%; color: var(--accent-text); font-size: 14px; font-weight: 600; text-align: right; }
.owed-side .icon { width: 16px; height: 16px; }
.owed-count { overflow-wrap: anywhere; }
.owed-tap { display: block; margin-top: 4px; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.owed:not(.on) .owed-tap { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* (2026-10-21) right under the total: "incl. EUR 120.00 hourly work not billed yet (5 visits)" - small, muted, a link to
   Hourly work of its own (NOT inside the Owed button); the card's mark and the lit colour carry on beside it, so it reads
   as part of the total; a 44 px tap */
.owed.has-ub { min-height: 60px; padding-bottom: 2px; }
.owed-ub {
  display: flex; align-items: flex-start; gap: 4px; min-height: 44px; padding: 1px 15px 10px; box-shadow: inset 3px 0 var(--accent);
  color: var(--muted); font-size: 13px; line-height: 1.35; text-decoration: none;
}
.owed.on ~ .owed-ub { background: var(--accent-soft); }
.owed-ub:active { background: var(--soft); }
.owed-ub-t { min-width: 0; overflow-wrap: anywhere; }
.owed-ub-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.owed-ub .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
/* (2026-10-21) Hide amounts: the eye on the card, never inside the Owed button; a 44 px tap, muted, darker while the
   amounts are hidden (struck through). The figures are never only blurred: their words are changed (ui.js amt), so a
   screenshot or a screen reader has none. (review) At the end of the month strip (.month .amt-eye) - beside the Owed
   button it took the total's room: on a 375 / 390 px phone the total broke onto two lines, and each tap of the eye moved
   the list (two lines shown, one hidden) */
.amt-eye {
  display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin: 0; padding: 0 12px 0 4px;
  border: 0; border-radius: 0; background: transparent; color: var(--muted);
}
.amt-eye .icon { width: 20px; height: 20px; }
.amt-eye[aria-pressed="true"] { color: var(--text); }
.amt-eye:active { background: var(--soft); }
/* the PC's "Invoiced this month" and "Received this month": two columns under it, not buttons; (2026-10-21, review) then
   the eye of Hide amounts in a narrow column of its own - its 48 px tap reaches into the gap before it and to the card's
   edge, so the figures keep nearly all their room ("EUR 12,345.67" on one line at 375 px) */
.month { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px; gap: 14px; padding: 10px 15px 12px;
         border-top: 1px solid var(--border); }
.month .amt-eye { align-self: center; margin: -10px -15px -12px -14px; padding: 0; }
.mchip { min-width: 0; }
.mchip + .mchip { border-left: 1px solid var(--border); padding-left: 14px; }
.mchip-l { display: block; color: var(--muted); font-size: 12px; margin: 0 0 2px; }
.mchip-v { display: block; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the search: a box with a magnifier */
.search {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 12px; margin: 0 0 10px; font-weight: 400;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
}
.search:focus-within { border-color: var(--accent); }
.search .icon { width: 18px; height: 18px; color: var(--muted); }
.search input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.search input:focus-visible { outline: none; }
/* the stage dropdown and View */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0 0 12px; }
.stage-select { min-width: 0; min-height: 46px; width: 100%; margin: 0; padding: 9px 12px; font-size: 16px; }
.view-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 9px 14px; margin: 0;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}
.view-btn .icon { width: 18px; height: 18px; }
.view-btn[aria-expanded="true"] { background: var(--soft); }
.view-panel { padding: 12px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.view-grid label { min-width: 0; margin: 0 0 10px; }
.view-grid label > span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.view-grid select { min-height: 44px; margin-top: 5px; padding: 8px 10px; }
/* Show hidden: a large switch that says On or Off */
.switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 4px 8px 2px;
  margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-size: 16px; text-align: left;
}
.switch-l { flex: 1 1 auto; min-width: 0; }
.switch-w { flex: none; min-width: 56px; padding: 4px 10px; border-radius: 16px; background: var(--soft); color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.switch[aria-checked="true"] .switch-w { background: var(--accent); color: var(--on-accent); }
.count { color: var(--muted); font-size: 13px; margin: 2px 1px 6px; }
/* the groups (the PC's year / client headers): small muted words across the page - tapped, its jobs fold away or come back */
.grp { margin: 0 0 4px; }
.grp-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 2px; margin: 4px 0 2px;
  border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left;
}
.grp-head::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 4px 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.grp-head[aria-expanded="false"]::before { transform: rotate(-45deg); margin-bottom: 0; }
.grp-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.grp-n { flex: none; color: var(--muted); font-size: 12px; font-weight: 400; }
.grp .cards { margin: 0 0 8px; }
.cards { display: flex; flex-direction: column; gap: 8px; }
/* one job: the description bold with the money on the right, the client muted, its stage and code */
.card {
  display: block; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  text-decoration: none;
}
.card:active, .hrs-card:active { background: var(--soft); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.card-amt { flex: none; max-width: 48%; text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.amt-v { display: block; white-space: nowrap; }
.amt-l { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.card-owed .amt-l, .card-owed.amt-l { color: var(--danger); font-weight: 600; }
.card-client { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; font-size: 13px; color: var(--muted); }
.card-code { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* (2026-10-21) a job with photos: the app's camera drawing immediately left of its code - the code's height, its muted colour */
.card-pho { display: inline-flex; flex: none; }
.card-pho .icon { width: 1.2em; height: 1.2em; }
.card-date { color: var(--muted); }
.card-owed { color: var(--danger); font-weight: 600; }
.card-paid { color: var(--ok); font-weight: 600; }
.tag { border: 1px solid var(--border-strong); border-radius: 6px; padding: 1px 7px; font-size: 12px; color: var(--muted); }
/* (H-LIST-1) the list's hourly-work invoices (the PC's block before the jobs): a header (not a button - nothing folds) and
   cards like a job's, the whole card a link to the hourly invoice */
.hrs-head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 2px; margin: 4px 0 2px; color: var(--muted); font-size: 13px; font-weight: 600; }
/* (2026-10-21) the hourly work not billed yet: ONE card of its own under the Owed filter (after the hourly invoices) */
.ub-grp { margin: 4px 0 4px; }
.ub-grp .cards { margin: 0 0 8px; }
.hrs-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hrs-n { flex: none; color: var(--muted); font-size: 12px; font-weight: 400; }
.hrs-card {
  display: block; min-height: 48px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: inset 3px 0 var(--accent); color: var(--text); text-decoration: none;
}
.hrs-card .card-title { display: block; }

/* the stages (the PC's stage colours, as soft badges - each keeps its own colour; its words 4.5:1 or more on white and on
   its own tint: Paid purple) */
.stage { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--muted); background: var(--soft); }
.st-quo { background: #f8ebd2; color: #7a5617; }
.st-prod { background: #dfe9fc; color: #1d55b3; }
.st-rdy { background: #d7f0ec; color: #0b6b61; }
.st-del { background: #dcf0e2; color: #226b37; }
.st-paid { background: #e9e0f8; color: #5b37a0; }
.st-can { background: #f9e1e1; color: #9b2c2c; }
.st-none { background: var(--soft); color: var(--muted); }

/* ---- one job ---- */
.job-title { overflow-wrap: anywhere; }
.facts { margin: 0 0 16px; padding: 2px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--muted); font-size: 15px; }
.fact dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.money-head { margin-top: 8px; }
.docs { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* C10: a document's line and its Send (the job's documents; the form once saved) */
.doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.doc:last-child { border-bottom: 0; }
.doc-line { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.doc .note { margin: 0; }
.sendctl { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.doc .sendctl { flex: 0 1 auto; justify-content: flex-end; }
.send {
  flex: none; min-width: 88px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-size: 16px; font-weight: 600;
}
/* (a job's list of documents: each Send a grey outline - calm; the form's own Send, once saved, black) */
.doc .send, .hi-money .send { background: var(--surface); color: var(--accent-text); border: 1px solid var(--border-strong); }
.send-msg { flex: 1 1 100%; margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.send-msg:empty { display: none; }
.send-line { flex: 1 1 60%; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.send-wait { flex: 1 1 100%; margin: 0; }
.doc-send { margin: 12px 0 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.docs-pc { margin: 10px 0 0; }

/* the job's buttons (secondary: an outline) */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.act {
  flex: 1 1 40%; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 10px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text);
  font-weight: 600; text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
.act.dis { border-color: var(--border); background: var(--soft); color: var(--muted); }
.flash { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.doc-job, .pay-job, .stage-job, .fix-job, .hj-sub { color: var(--muted); margin: -6px 0 14px; overflow-wrap: anywhere; }
.doc-note { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }

/* new job (C6) */
.preview { background: var(--surface); border: 1px dashed var(--muted); border-radius: var(--radius); padding: 10px 14px; margin: 4px 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.preview.none { border-color: var(--border-strong); color: var(--muted); font-weight: 400; }

/* quote and invoice (C7): the form */
.sitebox { display: flex; gap: 10px; }
.sitebox label { flex: 1; min-width: 0; }
.total { font-size: 18px; margin: 4px 0 12px; }
.total-v { font-weight: 700; }
/* the question sheet - (F3 review) never taller than the screen: a long question (a batch payment over many invoices)
   scrolls inside the sheet, its Yes / No buttons stay in view at the bottom; 85dvh after 85vh - a phone that does not
   know dvh keeps vh */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22); padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh;
}
.sheet-words { white-space: pre-line; font-weight: 600; margin: 0 auto 14px; max-width: 720px; overflow-wrap: anywhere; width: 100%; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet-btns { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; width: 100%; flex: none; }
.sheet-no {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600;
}
/* a destructive Yes: red words (the question said what it does) */
.sheet-yes.danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-border); }

/* (2026-10-20) what happened when the cloud did not answer: the bar tapped - a small sheet with the details */
.det-body { width: 100%; max-width: 720px; margin: 0 auto 14px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.det-h { margin: 0 0 4px; font-size: 18px; }
.det-sub { margin: 0 0 12px; }
.det-facts { margin: 0 0 10px; }
.det-facts .fact { flex-wrap: wrap; }
.det-facts dd { text-align: right; }
.det-raw {
  margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap;
}

/* add payment (C8): the amount, Full balance, the PC's methods as chips, the after-this line */
.fillbal {
  display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 12px; padding: 6px 14px; border: 1px solid var(--border-strong);
  border-radius: 22px; background: var(--surface); color: var(--accent-text); font-size: 15px; font-weight: 600;
}
.paidby { margin: 0 0 14px; }
.paidby .lab { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: 22px; padding: 6px 14px; font-size: 15px; white-space: nowrap;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.chip.method { font-size: 15px; padding: 8px 16px; min-height: 44px; }   /* (TASK 2: 44 px - a thumb's target) */
.after {
  background: var(--surface); border: 1px solid var(--border); box-shadow: inset 3px 0 var(--accent); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere;
}

/* the stage (C9): the PC's stages, the one it is at marked; Hide / Unhide */
.stage-now { font-weight: 600; margin: 0 0 12px; }
.stage-head { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.stage-picks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.stage-pick {
  display: block; width: 100%; min-height: 48px; text-align: left; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 17px;
}
.stage-pick.cur { border: 2px solid var(--accent); background: var(--accent-soft); font-weight: 700; }
.stage-pick.cur::after { content: " - now"; color: var(--muted); font-weight: 400; }
.hide-btn {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; margin: 0 0 8px;
}

/* a mistake put right (2026-10-20): the job's Payments list with Delete, Cancel quote / Cancel invoice - small plain links
   in red, apart from the big buttons (hard to tap by accident; each opens its question first); the question's screen */
.pays-head { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.pays { list-style: none; margin: 0 0 8px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--border); }
.pay-row:last-child { border-bottom: 0; }
.pay-line { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.fix { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--danger); font-size: 15px; padding: 10px 8px; text-decoration: underline; }
.fixes { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0 0 2px; }
.fix-note { margin: 0 0 12px; }
.fix-line {
  background: var(--surface); border: 1px solid var(--border); box-shadow: inset 3px 0 var(--danger); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere;
}
.fix-go {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--danger-border); border-radius: 10px;
  background: var(--surface); color: var(--danger); font-size: 17px; font-weight: 600;
}
.fix-msg { white-space: pre-line; overflow-wrap: anywhere; }

/* hourly work (H2-H5, 2026-10-20): the Hourly work screen (Log a visit, the client cards), Invoice visits and the hourly
   invoice's screen - every tap target 44 px or more, rows that wrap (never a sideways scroll) */
.f-visit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 14px 14px; margin: 0 0 16px; }
.f-head { margin: 12px 0 12px; }
.pair { display: flex; gap: 10px; }
.pair label { flex: 1; min-width: 0; }
.f-visit input, .f-visit select { min-height: 46px; }
.hcards { display: flex; flex-direction: column; gap: 10px; }
.hcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 14px 12px; }
.hc-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none;
  color: var(--text); font-size: 17px; font-weight: 650; text-align: left;
}
.hc-head::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 4px 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.hc-head[aria-expanded="false"]::before { transform: rotate(-45deg); margin-bottom: 0; }
.hc-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hc-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; margin: 0 0 6px; }
.hc-to { font-weight: 600; }
.hc-bad { color: var(--danger); font-weight: 600; font-size: 14px; }
.hc-due { color: var(--danger); font-weight: 700; }
.hc-ok { color: var(--ok); font-weight: 600; }
.hc-inv { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 6px 0 4px; }
.hc-sec { color: var(--muted); font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.hvisits, .hi-items { list-style: none; margin: 0; padding: 0; }
.hvisit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.hvisit:last-child { border-bottom: 0; }
.hv-line { flex: 1 1 100%; font-weight: 600; overflow-wrap: anywhere; }
.hv-desc { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fix-visit { display: inline-flex; align-items: center; min-height: 44px; }
.hinv { padding: 6px 0; border-bottom: 1px solid var(--border); }
.hinv:last-child { border-bottom: 0; }
.hi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.hi-tog {
  display: flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--muted);
}
.hi-tog::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.hi-tog[aria-expanded="true"]::before { transform: rotate(45deg); margin-bottom: 4px; }
.hi-ref { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 700; text-decoration: underline; }
.hi-meta { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.hi-money { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0 52px; }
.hi-amt { font-weight: 700; }
.hi-due {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--danger-border); border-radius: 10px;
  color: var(--danger); font-weight: 700; text-decoration: none;
}
.hi-paid { border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; background: #e9e0f8; color: #5b37a0; }   /* (as .st-paid) */
.hi-owner { color: var(--muted); font-size: 14px; }
.hi-money .sendctl { flex: 0 1 auto; }
.hi-item { padding: 4px 0 4px 52px; font-size: 14px; overflow-wrap: anywhere; }
.hc-more {
  display: block; width: 100%; min-height: 44px; margin: 6px 0 0; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600;
}
/* Invoice visits: each tick a whole row */
.hi-head { font-weight: 600; margin: 0 0 8px; }
.hpicks { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.hpick {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-weight: 400;
}
.hpick input { flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; }
.hp-text { display: flex; flex-direction: column; min-width: 0; }
.hp-line { font-weight: 600; overflow-wrap: anywhere; }
.hp-desc { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.hpick-bad { color: var(--danger); font-size: 14px; margin: 0 0 6px; padding: 8px 14px; border: 1px dashed var(--danger-border); border-radius: var(--radius); overflow-wrap: anywhere; }
.cancel-link {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 8px 0 0; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none;
}
.hi-done-back { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 12px 0 0; }
/* the hourly invoice's screen: the tiles two a row, its lines */
.hj-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hj-tiles .fact { flex-wrap: wrap; }
.hj-tiles .fact[data-k="due"] { grid-column: 1 / -1; }
.fact-sub { flex: 1 1 100%; color: var(--muted); font-size: 13px; }
.hj-ref { color: var(--muted); font-size: 14px; margin: -4px 0 8px; overflow-wrap: anywhere; }
.hj-lines { list-style: none; margin: 0 0 8px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.hj-line { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.hj-line:last-child { border-bottom: 0; }
.hj-desc { flex: 1 1 100%; overflow-wrap: anywhere; }
.hj-qty { flex: 1 1 auto; color: var(--muted); font-size: 14px; }
.hj-amt { flex: none; font-weight: 600; }

/* statements (TASK 2, 2026-10-20): the Statements screen (the PC's window: one card per client, its buttons two a row), a
   client's statement, Record payment over several invoices - every tap target 44 px or more, rows that wrap */
.st-rows { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.st-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 17px; font-weight: 650; }
.st-name { min-width: 0; overflow-wrap: anywhere; }
.st-code { color: var(--muted); font-size: 13px; font-weight: 600; }
.st-inv { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.st-amts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px 0 0; }
.st-amt { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.st-over { color: var(--danger); font-weight: 700; }
.st-split { color: var(--muted); font-size: 14px; margin: 4px 0 0; overflow-wrap: anywhere; }
.st-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.st-btns .act { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.st-paynote { margin: 6px 0 0; }
.st-total { font-size: 18px; margin: 4px 0 12px; }
.st-total-v { font-weight: 700; }
.sd-title, .bp-title { overflow-wrap: anywhere; }
.sd-go { min-height: 48px; }
.sd-back { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 12px 0 0; }
/* Record payment: each invoice a tick across its row, then what is still owed and its "This payment" box (wrapping) */
.f-batch input[name="amount"] { min-height: 46px; }
.bp-head { margin: 4px 0 8px; }
.bp-lines { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.bp-line { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 14px 10px; }
.bp-tick { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; font-weight: 400; }
.bp-tick input { flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; }
.bp-text { display: flex; flex-direction: column; min-width: 0; }
.bp-ref { font-weight: 600; overflow-wrap: anywhere; }
.bp-job { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.bp-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bp-owed { font-weight: 600; }
.bp-paylab { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.bp-pay-in { width: 120px; min-height: 44px; margin: 0; }
.bp-share { margin: 0 0 12px; font-weight: 600; }
.bp-share.ok { color: var(--ok); }
.bp-share.bad { color: var(--danger); }
.bp-done-back { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 12px 0 0; }

/* Earnings, the year report and Settings (TASK 3, 2026-10-20): the PC's Earnings window as rows (12 columns do not fit
   375 px), the year report's two Send buttons, the Settings form - every tap target 44 px or more (the main buttons
   48 px, full width), rows that wrap (never a sideways scroll) */
.earn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin: 0 0 12px; }
.earn-tab { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 16px; font-weight: 600; }
.earn-tab.on { background: var(--accent-soft); color: var(--accent-text); }
.earn-year { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.earn-y { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.earn-prev, .earn-next {
  display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 48px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 20px; font-weight: 700; text-decoration: none;
}
.earn-prev.off, .earn-next.off { border-color: var(--border); color: var(--border-strong); background: transparent; }
.earn-monthbox select { min-height: 48px; }
.earn-leg { display: flex; gap: 16px; margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.leg::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.leg-inv::before { background: var(--inv); }
.leg-rec::before { background: var(--rec); }
.earn-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.etot-b { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.etot-l { display: block; color: var(--muted); font-size: 12px; }
.etot-v { display: block; font-weight: 650; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.etot-b[data-k="invoiced"] .etot-v { color: var(--inv); }
.etot-b[data-k="received"] .etot-v { color: var(--rec-text); }
.earn-months, .earn-clients { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 12px; overflow: hidden; }
.em-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.em-row:last-child, .ec-row:last-child { border-bottom: 0; }
.em-row::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
.em-row.now { background: var(--soft); }
.em-month { flex: none; width: 52px; display: flex; flex-direction: column; }
.em-name { font-weight: 650; }
.em-now { color: var(--accent-text); font-size: 11px; font-weight: 600; }
.em-bars { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.em-line { display: flex; align-items: center; gap: 8px; }
.em-track { flex: 1 1 auto; min-width: 40px; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.em-bar { display: block; height: 100%; width: 0; border-radius: 4px; }
.em-line.inv .em-bar { background: var(--inv); }
.em-line.rec .em-bar { background: var(--rec); }
.em-amt { flex: none; min-width: 96px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.em-line.inv .em-amt { font-weight: 600; }
.ec-row { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ec-name { margin: 0 0 4px; font-weight: 650; overflow-wrap: anywhere; }
.earn-report, .rep-go { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.rep-title { overflow-wrap: anywhere; }
.rep-send .sendctl + .sendctl { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rep-send .send { width: 100%; min-height: 48px; }
/* Settings: the logo row, the boxes, the choices (a whole row each), the long texts on 3 lines */
.logo-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; }
.logo-lab { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.logo-prev {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 324px; min-height: 115px; padding: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: #ffffff;
}
.logo-img { display: block; max-width: 100%; }
.logo-none { color: #69717b; font-size: 14px; }
.logo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.logo-choose, .logo-del {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; margin: 0; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}
.logo-choose { flex: 1 1 auto; position: relative; overflow: hidden; }
.logo-file { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.logo-del { color: var(--danger); border-color: var(--danger-border); }
.logo-hint { margin: 0 0 4px; }
.logo-msg { min-height: 1.2em; margin: 4px 0 0; font-weight: 600; font-size: 15px; }
.logo-msg.bad { color: var(--danger); }
.sf-row { margin: 0 0 4px; }
.sf-lab input, .sf-lab textarea { display: block; width: 100%; margin-top: 6px; min-height: 46px; font-weight: 400; }
.sf-row > .lab { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.choices { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.choice {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 16px; text-align: left;
}
.choice::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 50%; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.choice.on::before { border-color: var(--accent); background: radial-gradient(var(--accent) 45%, transparent 50%); }
.f-err { color: var(--danger); font-weight: 600; font-size: 15px; margin: -6px 0 12px; }
.f-latest { margin: -6px 0 12px; }
.set-note { margin: 4px 0 12px; }
.set-who { color: var(--muted); font-size: 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.set-signout { min-height: 44px; padding: 0 4px; }
.f-settings .save { min-height: 48px; }
.set-plain {
  display: block; width: 100%; min-height: 48px; margin: 8px 0 0; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600;
}
/* the company question before a document's PDF (design 4.5): a sheet of its own, as the screens' question sheets */
.send-ask {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22); padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh;
}
.send-ask-words { font-weight: 600; margin: 0 auto 14px; max-width: 720px; width: 100%; overflow-wrap: anywhere; }
.send-ask-btns { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; width: 100%; }
.send-ask-no {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600;
}

/* (2026-10-20) View beside Send: an outline (calm) - the PDF in the viewer first */
.view-pdf {
  flex: none; min-width: 72px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}
.rep-send .view-pdf { width: 100%; min-height: 48px; }

/* (2026-10-20) the PDF viewer, over everything: the file's name, its page count and the zoom on top; the pages (they scroll
   and pan inside it - the browser's own scrolling, both ways; the browser's own pinch and double-tap zoom are kept off the
   whole viewer - the viewer's own zoom them: viewer.js); Back and Send at the bottom. The pages are paper: white, on a mid
   grey (--paper-bg) so their edges show; the strip on top is TEST's mark, as the top bar's, and a TEST build's "TEST" tag
   (.brand-test, its colours as the top bar's) is first in the row, beside the file's name - the viewer covers the top bar
   (F1 review). */
.pdfv {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); touch-action: pan-x pan-y;
}
.pdfv-top {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px 6px 16px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--surface); border-top: 4px solid var(--mark); border-bottom: 1px solid var(--border);
}
.pdfv-top .brand-test { flex: none; margin-left: 0; }
.pdfv-head { flex: 1 1 auto; min-width: 0; }
.pdfv .pdfv-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.pdfv-count { color: var(--muted); font-size: 13px; }
.pdfv-zoom { display: flex; align-items: center; gap: 2px; flex: none; }
.pdfv-zoom button {
  width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 22px; font-weight: 600; line-height: 1;
}
.pdfv-zl { min-width: 48px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pdfv-msg { flex: none; margin: 0; padding: 10px 16px; font-weight: 600; overflow-wrap: anywhere; }
.pdfv-msg:empty { display: none; }
.pdfv-note {
  flex: none; margin: 0; padding: 8px 16px; background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid var(--warn-border);
  font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
}
.pdfv-pages {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable;
  touch-action: pan-x pan-y; background: var(--paper-bg);
}
/* (2026-10-20, pinch) the pages' room (.pdfv-sz) keeps its size while the pages (.pdfv-in) are shown bigger or smaller by
   a transform during a pinch - so the box's scroll is never cut short under the fingers; the room round the pages and
   between them (padding, gap: 8 px at 100%) grows with the zoom - viewer.js sets it */
.pdfv-sz { width: max-content; min-width: 100%; }
.pdfv-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px; transform-origin: 0 0; }
.pdfv-page { flex: none; }
/* (review F2) a canvas is never a touch's target - a drawing puts a new canvas in its place, and a finger keeps sending its
   touchmoves to the element it started on even once that is taken away (past .pdfv-pages, which cancels a pinch's); a
   touch starts on the page's box (.pdfv-page), which is never replaced */
.pdfv-canvas { display: block; background: #ffffff; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.18); pointer-events: none; }
.pdfv-bar { flex: none; padding: 8px 16px max(10px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.pdfv-sendmsg { margin: 0 auto 8px; max-width: 720px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pdfv-sendmsg:empty { display: none; }
.pdfv-btns { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; }
.pdfv-back {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 17px; font-weight: 600;
}
.pdfv-send {
  flex: 1 1 0; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600;
}

/* (2026-10-21) site photos (app.js, screen_job.js, screen_settings.js, screen_photos.js): the photos' bar under the top bar
   (grey, as the verdicts' - it says how the photos waiting are doing, nothing is wrong), its list (a sheet, as the
   details'), the job screen's Take photo (a label over the file input - the phone's camera opens on a tap anywhere on it)
   and its line, Settings' Dropbox (photos), the Photos screen's grid of small pictures and the full photo over everything
   (as the PDF viewer: its strip is TEST's mark, Back / Previous / Next at the bottom, the photo zoomed by the app - the
   browser's own pinch kept off it - and a touch never starting on the picture itself, which is replaced at Previous / Next) */
.pbar {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--info-border);
  background: var(--info-bg); color: var(--info-text); font-size: 15px; font-weight: 600; text-align: left;
}
.pbar-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.head.covered .pbar { pointer-events: none; filter: brightness(0.82); }
.ps-body { width: 100%; max-width: 720px; margin: 0 auto 14px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ps-h { margin: 0 0 4px; font-size: 18px; }
.ps-sub { margin: 0 0 10px; }
.ps-rows { list-style: none; margin: 0; padding: 0; }
.ps-row { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ps-job { flex: 1 1 100%; font-weight: 600; overflow-wrap: anywhere; }
.ps-taken, .ps-state { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.photos-row { margin-bottom: 16px; }   /* (2026-10-21) the same gap as the other button rows; its message pulls up below */
/* (2026-10-21) Take photo and From gallery are labels (they open the camera / the gallery): not the forms' label size and
   gap - the same as their neighbours; Photos (n) across under them */
.act-photo, .act-gallery { position: relative; overflow: hidden; cursor: pointer; margin: 0; font-size: 16px; }
.photo-file, .gallery-file { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.photos-row .act-photos { flex: 1 1 100%; }
.photo-msg { margin: -8px 0 16px; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.photo-msg:empty { display: none; }
.dbx { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); }
.dbx-h { margin: 0 0 8px; }
.dbx-words { margin: 0 0 10px; font-weight: 600; overflow-wrap: anywhere; }
.dbx-broken {
  margin: 0 0 10px; padding: 10px 14px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); border-radius: var(--radius);
  font-weight: 600; overflow-wrap: anywhere;
}
.dbx-note { margin: 8px 0 0; }
.dbx-off {
  display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}
.ph-title { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.ph-msg { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.ph-msg:empty { display: none; }
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.ph-tile { position: relative; min-width: 0; }
.ph-btn {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--soft); color: var(--muted); font-size: 12px;
}
.ph-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity 0.25s ease-out; }
.ph-tag {
  position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(17, 17, 17, 0.72); color: #ffffff;
  font-size: 11px; font-weight: 600; text-align: center; overflow-wrap: anywhere;
}
.ph-none .ph-btn { border-style: dashed; }
/* (2026-10-21, the owner: "when images are loading on the phone app it shows the text of the image and a small icon until
   it loads - can we polish that UI?") a tile whose picture has not loaded (ph-load): the grey tile with a soft white band
   moving across it - the picture, its alt text and the browser's broken-picture icon unseen until it has loaded, then it
   fades in; no picture (ph-none): its words in the middle - "No preview", or "Couldn't load this photo - tap to try
   again" with a small try-again arrow (ph-bad). The picture takes no room (absolute): the tile is the same square before
   and after. The band is the button's ::before - drawn first, under the picture, the waiting-to-upload marker and the
   tick (they stay seen). A phone set to reduce motion: just grey (the end of this file). */
.ph-load .ph-img { opacity: 0; transition: none; }
.ph-none .ph-img { visibility: hidden; }
.ph-load .ph-btn::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%); animation: ph-shimmer 1.4s ease-in-out infinite;
}
@keyframes ph-shimmer { to { transform: translateX(100%); } }
.ph-why {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
  pointer-events: none;
}
.ph-why:empty { display: none; }
.ph-why .icon { width: 18px; height: 18px; }
.ph-wait .ph-why { padding-bottom: 32px; }   /* (its words above the waiting-to-upload marker) */
/* (2026-10-21) deleting photos: Select over the grid; selecting - the count, Delete (n) (red words, as the other
   destructive buttons) and Cancel; every tile a tick mark (a ring; ticked: filled black with its tick, the tile outlined);
   the question a sheet on a dimmed page over everything, the full photo too; the full view's Delete at the top right */
.ph-tools { margin: 0 0 12px; }
.ph-sel, .ph-del, .ph-cancel {
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 600;
}
.ph-sel { display: block; margin-left: auto; }
.ph-count { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.ph-acts { display: flex; gap: 8px; }
.ph-acts .ph-del, .ph-acts .ph-cancel { flex: 1 1 0; }
.ph-del { color: var(--danger); border-color: var(--danger-border); }
.ph-del:disabled, .ph-sel:disabled, .ph-cancel:disabled { color: var(--muted); border-color: var(--border); }
.ph-done { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.ph-done:empty { display: none; }
.ph-tick { display: none; }
.ph-selecting .ph-tick {
  position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 2px solid #ffffff; border-radius: 50%; background: rgba(17, 17, 17, 0.35); color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ph-tick .icon { width: 18px; height: 18px; visibility: hidden; }
.ph-on .ph-tick { background: var(--accent); color: var(--on-accent); }
.ph-on .ph-tick .icon { visibility: visible; }
.ph-on .ph-btn { outline: 3px solid var(--accent); outline-offset: -3px; }
.pha { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 30; background: rgba(0, 0, 0, 0.32); }
.phv-del {
  flex: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--surface);
  color: var(--danger); font-size: 16px; font-weight: 600;
}
.phv-del:disabled { color: var(--muted); border-color: var(--border); }
.phv {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); touch-action: pan-x pan-y;
}
.phv-top {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 16px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--surface); border-top: 4px solid var(--mark); border-bottom: 1px solid var(--border); min-height: 52px;
}
.phv-top .brand-test { flex: none; margin-left: 0; }
.phv-head { flex: 1 1 auto; min-width: 0; }
.phv .phv-title { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.phv-count { color: var(--muted); font-size: 13px; }
.phv-msg { flex: none; margin: 0; padding: 10px 16px; font-weight: 600; overflow-wrap: anywhere; }
.phv-msg:empty { display: none; }
.phv-box {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; touch-action: none;
  background: var(--paper-bg); position: relative;
}
/* (2026-10-21) at 100% one finger is the app's (the swipe - touch-action none above); zoomed in: the browser pans it */
.phv-box.phv-zoomed { touch-action: pan-x pan-y; }
.phv-sz { position: relative; min-width: 100%; min-height: 100%; }
.phv-img {
  position: absolute; display: block; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; -webkit-user-select: none;
  transition: opacity 0.2s ease-out;
}
/* (2026-10-21, polish) the full photo unseen until it has loaded and been decoded (phv-pend), then faded in; a quiet grey
   spinner in the middle of the box while it comes - after about 300 ms, as "Loading the photo...", whose words are then
   for screen readers only (phv-wait): one or the other is seen, never both */
.phv-img.phv-pend { opacity: 0; transition: none; }
.phv-spin {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid rgba(17, 17, 17, 0.12);
  border-top-color: var(--muted); border-radius: 50%; animation: phv-spin 0.9s linear infinite; pointer-events: none;
}
@keyframes phv-spin { to { transform: rotate(360deg); } }
.phv-wait { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.phv-bar { flex: none; padding: 8px 16px max(10px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.phv-btns { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.phv-prev, .phv-back, .phv-next {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 8px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
}

/* (2026-10-21, polish) a phone set to reduce motion: no moving band (the loading tile just grey), no fades, no spinning - the
   loading words seen in place of the spinner (as the full view's other words) */
@media (prefers-reduced-motion: reduce) {
  .ph-load .ph-btn::before { animation: none; display: none; }
  .ph-img, .phv-img { transition: none; }
  .phv-spin { display: none; }
  .phv-wait { position: static; width: auto; height: auto; padding: 10px 16px; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* a narrow phone (360 px and less): a little less room around things */
@media (max-width: 360px) {
  main { padding-left: 12px; padding-right: 12px; }
  .top { padding-left: 12px; }
  .owed-sum { font-size: 24px; }
  .month { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 8px; padding: 10px 12px; }
  .month .amt-eye { margin: -10px -12px -10px -8px; }
  .mchip + .mchip { padding-left: 8px; }
  .mchip-l { font-size: 11px; }
  .tab { font-size: 11px; }
  /* (2026-10-21, review) a photo tile with no picture: its words a little smaller; on a photo waiting, room below them
     for its marker (two lines here - "waiting to upload" wraps on a tile of 108 px and less) and no arrow */
  .ph-why { font-size: 11px; line-height: 1.15; padding-left: 4px; padding-right: 4px; }
  .ph-wait .ph-why { padding-bottom: 44px; }
  .ph-wait .ph-why .icon { display: none; }
}