/*
 * Lift Maintenance Platform: interface styles.
 * Hand-written (no build step). Visual language ported from the original admin "glass" theme:
 * warm gold accent, soft translucent cards, light + dark. All spacing uses LOGICAL properties
 * (inline-start/end) so Arabic (right-to-left) mirrors automatically. No inline styles are used
 * anywhere (the Content-Security-Policy forbids them).
 */
:root {
  --ink: #1b1f23; --ink-soft: #565f68; --bg: #faf6ee; --card: rgba(255, 255, 255, 0.78);
  --line: rgba(30, 35, 70, 0.1); --brand: #b3792c; --brand-dark: #8c5c1e; --brand-soft: #f4e6d2;
  --ok: #1e7a3d; --ok-bg: rgba(60, 180, 110, 0.15); --warn: #8c5c1e; --warn-bg: rgba(240, 170, 60, 0.2);
  --danger: #b3261e; --danger-bg: rgba(230, 70, 60, 0.13); --input: #fff;
  --shadow: 0 8px 28px rgba(48, 42, 90, 0.09); --radius: 16px;
  --page: linear-gradient(155deg, #faf3e6 0%, #eef1fb 52%, #f1e9f8 100%);
}
:root[data-theme="dark"] {
  --ink: #ecebf5; --ink-soft: #a7a6bd; --bg: #14142a; --card: rgba(38, 38, 66, 0.75);
  --line: rgba(255, 255, 255, 0.12); --brand-soft: rgba(207, 147, 61, 0.2);
  --ok: #7be0a0; --ok-bg: rgba(60, 180, 110, 0.2); --warn: #f0bd6a; --warn-bg: rgba(240, 170, 60, 0.18);
  --danger: #ff8f86; --danger-bg: rgba(230, 70, 60, 0.22); --input: rgba(255, 255, 255, 0.07);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35); --page: linear-gradient(155deg, #1a1a33 0%, #14142a 60%, #1c1630 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a:not(.btn):not(.brand) { color: #e9b866; }
  :root:not([data-theme="light"]) .badge { color: #f0bd6a; }
  :root:not([data-theme="light"]) {
    --ink: #ecebf5; --ink-soft: #a7a6bd; --bg: #14142a; --card: rgba(38, 38, 66, 0.75);
    --line: rgba(255, 255, 255, 0.12); --brand-soft: rgba(207, 147, 61, 0.2);
    --ok: #7be0a0; --ok-bg: rgba(60, 180, 110, 0.2); --warn: #f0bd6a; --warn-bg: rgba(240, 170, 60, 0.18);
    --danger: #ff8f86; --danger-bg: rgba(230, 70, 60, 0.22); --input: rgba(255, 255, 255, 0.07);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.35); --page: linear-gradient(155deg, #1a1a33 0%, #14142a 60%, #1c1630 100%);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--page) fixed, var(--bg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Noto Sans Arabic", Roboto, sans-serif;
}
a { color: var(--brand-dark); }
:root[data-theme="dark"] a:not(.btn):not(.brand) { color: #e9b866; }
h1 { font-size: 1.6rem; margin: 0 0 6px; line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
.muted { color: var(--ink-soft); font-size: 0.9rem; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(179, 121, 44, 0.55); outline-offset: 2px; }

/* layout */
.wrap { max-inline-size: 1000px; margin-inline: auto; padding: 18px 16px 48px; }
.topbar {
  position: sticky; inset-block-start: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 16px; background: var(--card); backdrop-filter: blur(16px) saturate(1.4);
  border-block-end: 1px solid var(--line);
}
.brand { font-weight: 800; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.brand img { block-size: 28px; inline-size: auto; border-radius: 6px; }
.topbar__spacer { flex: 1; }
.topbar .btn, .lang-switch button { white-space: nowrap; }
@media (max-width: 520px) { .topbar__spacer { display: none; } .topbar .brand { flex: 1 1 100%; } }
.nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; border-block-end: 1px solid var(--line); background: var(--card); }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none; padding: 8px 14px; border-radius: 12px; text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: 0.92rem; border: 1px solid transparent;
}
.nav a[aria-current="page"], :root[data-theme] .nav a[aria-current="page"] { color: #fff; background: linear-gradient(180deg, #cf933d, #b3792c); box-shadow: 0 6px 16px rgba(179, 121, 44, 0.3); }
/* Phone menu: a glass bar at the bottom (the four most used pages and More), adapted from the owner's "glassy style nav" template (MIT, Leon Lin).
   Below 721 px it replaces the top tabs; tablets and desktops keep the top tabs. */
.tabbar, .tabbar-panel { display: none; }
:root {
  --lg-bg: rgba(255, 255, 255, 0.45); --lg-border: rgba(255, 255, 255, 0.55); --lg-shadow: rgba(20, 20, 42, 0.16);
  --lg-highlight: rgba(255, 255, 255, 0.9); --lg-caustic: rgba(255, 255, 255, 0.45); --lg-reflect: rgba(255, 255, 255, 0.55);
  --lg-pill: rgba(255, 255, 255, 0.88); --lg-pill-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 1px rgba(255, 255, 255, .9);
  --lg-icon: rgba(27, 31, 35, 0.6); --lg-active: #8c5c1e; --lg-panel: #fff;
}
:root[data-theme="dark"] {
  --lg-bg: rgba(30, 30, 52, 0.6); --lg-border: rgba(255, 255, 255, 0.14); --lg-shadow: rgba(0, 0, 0, 0.7);
  --lg-highlight: rgba(255, 255, 255, 0.22); --lg-caustic: rgba(255, 255, 255, 0.05); --lg-reflect: rgba(255, 255, 255, 0.12);
  --lg-pill: rgba(70, 70, 100, 0.88); --lg-pill-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .18);
  --lg-icon: rgba(236, 235, 245, 0.65); --lg-active: #f0bd6a; --lg-panel: #23233f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-bg: rgba(30, 30, 52, 0.6); --lg-border: rgba(255, 255, 255, 0.14); --lg-shadow: rgba(0, 0, 0, 0.7);
    --lg-highlight: rgba(255, 255, 255, 0.22); --lg-caustic: rgba(255, 255, 255, 0.05); --lg-reflect: rgba(255, 255, 255, 0.12);
    --lg-pill: rgba(70, 70, 100, 0.88); --lg-pill-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .18);
    --lg-icon: rgba(236, 235, 245, 0.65); --lg-active: #f0bd6a; --lg-panel: #23233f;
  }
}
@media (max-width: 720px) {
  .nav--top, .topbar .tabbar-hide { display: none; }   /* the language, theme and sign out move into More: the top bar is one slim row */
  body:has(.tabbar) { padding-block-end: calc(96px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: block; position: fixed; z-index: 40; inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom));
    max-inline-size: 560px; margin-inline: auto; padding: 6px; border-radius: 99px; background: var(--lg-bg);
    backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 24px 48px -16px var(--lg-shadow), 0 8px 20px -8px var(--lg-shadow),
      inset 0 2px 3px -1px var(--lg-highlight), inset 0 -2px 4px -1px var(--lg-caustic), inset 0 0 0 1px var(--lg-border);
  }
  .tabbar::before {   /* the curved reflection along the top of the glass */
    content: ""; position: absolute; z-index: 4; inset-block-start: 1px; inset-inline: 1px; block-size: 46%; pointer-events: none;
    border-radius: 99px 99px 24px 24px / 99px 99px 12px 12px; background: linear-gradient(180deg, var(--lg-reflect), transparent);
  }
  .tabbar__items { position: relative; z-index: 3; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
  .tabbar__pill {
    position: absolute; z-index: 1; inset-block: 0; inset-inline-start: 0; inline-size: 0; border-radius: 99px;
    background: var(--lg-pill); box-shadow: var(--lg-pill-shadow);
    transition: transform .5s cubic-bezier(.34, 1.2, .64, 1), inline-size .5s cubic-bezier(.34, 1.2, .64, 1);
  }
  .tabbar__items > a, .tabbar__more {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-block-size: 56px; min-inline-size: 0;
    padding: 4px 2px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: .7rem; font-weight: 700; line-height: 1.15;
    text-decoration: none; color: var(--lg-icon); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* menu links keep their own colours over the general link colour of light and dark mode */
  :root .tabbar a.tabbar__tab:not(.btn):not(.brand) { color: var(--lg-icon); }
  :root .tabbar a.tabbar__tab[aria-current="page"]:not(.btn):not(.brand),
  .tabbar__more[aria-expanded="true"], .tabbar__more[data-current] { color: var(--lg-active); }
  .tabbar__c { display: flex; flex-direction: column; align-items: center; gap: 2px; max-inline-size: 100%; transition: transform .2s cubic-bezier(.32, .72, 0, 1); }
  .tabbar__c > span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__items > a:active .tabbar__c, .tabbar__more:active .tabbar__c { transform: scale(.9); }
  .tabbar__items > a:focus-visible, .tabbar__more:focus-visible, .tabbar-panel :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .tabbar svg, .tabbar-panel svg {
    inline-size: 22px; block-size: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }

  /* the More panel: solid (text behind glass is hard to read), above the bar, the page dimmed behind it; scrolls on short screens */
  .tabbar-panel {
    display: block; position: fixed; z-index: 39; inset-inline: 12px; inset-block-end: calc(92px + env(safe-area-inset-bottom));
    max-inline-size: 560px; margin-inline: auto; max-block-size: calc(100dvh - 120px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 26px; border: 1px solid var(--line); background: var(--lg-panel);
    box-shadow: 0 16px 40px rgba(20, 20, 42, .25), 0 0 0 200vmax rgba(20, 20, 42, .35);
  }
  :root[data-theme="dark"] .tabbar-panel { box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 200vmax rgba(0, 0, 0, .5); }
  .tabbar-panel[hidden] { display: none; }
  .tabbar-panel form { margin: 0; }
  .tabbar-panel__row {
    display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 48px; padding-inline: 14px; border: 0; border-radius: 14px;
    background: none; font: inherit; font-size: 1rem; font-weight: 600; text-align: start; text-decoration: none; cursor: pointer;
  }
  :root .tabbar-panel a.tabbar-panel__row:not(.btn):not(.brand), .tabbar-panel button.tabbar-panel__row { color: var(--ink); }
  .tabbar-panel__row[aria-current="page"] { background: var(--brand-soft); }
  .tabbar-panel hr { border: 0; border-block-start: 1px solid var(--line); margin: 6px 8px; }
  .tabbar-panel__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px; }
  .tabbar-panel__quick .lang-switch { display: flex; flex: 2 1 160px; gap: 8px; }
  .tabbar-panel__quick .lang-switch button, .tabbar-panel__quick > .btn { flex: 1; min-block-size: 44px; border-radius: 12px; font-size: .95rem; }
  .tabbar-panel__quick > .btn { flex: 1 1 100px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .tabbar__pill, .tabbar__c { transition: none; } }
@media (max-width: 720px) and (prefers-reduced-transparency: reduce) {
  .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .tabbar::before { display: none; }
}
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block: 8px 18px; }

/* cards, grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-block-end: 16px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack > * + * { margin-block-start: 12px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.btn--primary { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: linear-gradient(180deg, #cf933d, #b3792c); box-shadow: 0 6px 16px rgba(179, 121, 44, 0.3); }
.btn--danger { color: var(--danger); }
.btn--small { min-block-size: 36px; padding: 6px 12px; font-size: 0.88rem; }
.btn--block { inline-size: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* forms */
.field { margin-block-end: 14px; }
.field label, .label { display: block; font-weight: 700; font-size: 0.9rem; margin-block-end: 6px; }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--input);
  color: var(--ink); font: inherit; min-block-size: 46px;
}
.field textarea { min-block-size: 96px; resize: vertical; }
/* date boxes: iPhones give them a fixed minimum width that pushed them out of narrow cards; now they fit their column */
.field input[type="date"], .field input[type="datetime-local"], .field input[type="time"] {
  -webkit-appearance: none; appearance: none; display: block; min-inline-size: 0; max-inline-size: 100%; text-align: start;
}
.field input::-webkit-date-and-time-value { text-align: start; }
.field { min-inline-size: 0; }
.field .error { color: var(--danger); font-size: 0.86rem; margin-block-start: 4px; }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: var(--danger); }
.field .help { color: var(--ink-soft); font-size: 0.84rem; margin-block-start: 4px; }
.checks { display: grid; gap: 8px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); }
.check input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--brand); flex: none; }

/* Tick boxes and switches (look after the owner's "ArchitectUI" reference, written here, no library): a rounded brand box with a white tick,
   and on/off switches for settings that are simply on or off. Native inputs underneath, so keyboards and screen readers work as usual. */
:root { --tick-border: rgba(27, 31, 35, .32); --switch-off: rgba(27, 31, 35, .22); }
:root[data-theme="dark"] { --tick-border: rgba(236, 235, 245, .38); --switch-off: rgba(236, 235, 245, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tick-border: rgba(236, 235, 245, .38); --switch-off: rgba(236, 235, 245, .22); } }
input[type="checkbox"]:not(.switch):not(.visit__pick) {
  -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; flex: none; margin: 0; cursor: pointer;
  border: 2px solid var(--tick-border); border-radius: 7px; background: var(--card) center / 14px 14px no-repeat;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="checkbox"]:not(.switch):not(.visit__pick):checked {
  border-color: var(--brand); background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input[type="checkbox"]:hover:not(:checked) { border-color: var(--brand); }
input.switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer; inline-size: 48px; block-size: 28px; border-radius: 99px; border: 0;
  background: var(--switch-off) radial-gradient(circle, #fff 10px, transparent 10.5px) left center / 28px 28px no-repeat;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); transition: background-color .2s, background-position .2s;
}
input.switch:checked { background-color: #2e9a4f; background-position: right center; }
[dir="rtl"] input.switch { background-position: right center; }
[dir="rtl"] input.switch:checked { background-position: left center; }
@media (prefers-reduced-motion: reduce) { input.switch, input[type="checkbox"] { transition: none; } }
/* a grouped list of options: bold title, one line of explanation, the box or switch at the end */
.options { border: 1px solid var(--line); border-radius: 14px; background: var(--input); overflow: hidden; margin-block-end: 12px; }
.option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-block-size: 56px; }
.option + .option { border-block-start: 1px solid var(--line); }
/* day buttons (Settings, Working week): one row of seven, a picked day lights up */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-block: 8px 12px; }
.day { position: relative; display: grid; place-items: center; min-block-size: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--input);
  font-weight: 700; font-size: .85rem; cursor: pointer; user-select: none; }
.day input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; margin: 0; cursor: pointer; }
.day:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.day:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.option__text { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
.option__text b { font-size: .95rem; }
.option__text small { color: var(--ink-soft); font-size: .82rem; line-height: 1.35; }
.check b { display: block; }
.field .check { display: flex; align-items: center; font-weight: 600; font-size: 0.95rem; margin-block-end: 8px; }   /* a tick box inside a field is not a field label */
.field .check input { margin-block-start: 0; }
.two { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two--phone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; align-items: end; }   /* short fields (floors and zone, street and building number) stay paired on phones */

/* alerts, badges, tables */
.alert { padding: 12px 14px; border-radius: 12px; margin-block-end: 14px; border: 1px solid var(--line); }
.alert--error { background: var(--danger-bg); color: var(--danger); }
.alert--info { background: var(--warn-bg); color: var(--warn); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: var(--brand-soft); color: var(--brand-dark); }
:root[data-theme="dark"] .badge { color: #f0bd6a; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.table-wrap { overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: start; padding: 10px 8px; border-block-end: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* hints: a small (i) that explains a function in plain words (tap or hover) */
.hint { position: relative; display: inline-block; vertical-align: middle; }
.hint > button {
  inline-size: 22px; block-size: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--brand-soft);
  color: var(--brand-dark); font: 700 0.78rem/1 inherit; cursor: pointer;
}
.hint__text {
  position: absolute; z-index: 30; inset-inline-start: 0; inset-block-start: calc(100% + 6px); inline-size: min(280px, 80vw);
  padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 0.85rem; font-weight: 500;
  line-height: 1.45; box-shadow: var(--shadow); text-transform: none; letter-spacing: 0;
}
.hint__text[hidden] { display: none; }

/* guest (sign-in) pages */
.guest { min-block-size: 100vh; display: grid; place-items: center; padding: 20px 16px; }
.guest__card { inline-size: min(440px, 100%); }
.guest .brand { justify-content: center; inline-size: 100%; margin-block-end: 14px; font-size: 1.2rem; }

/* checklist (dashboard onboarding) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); }
.steps .tick { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); font-weight: 800; flex: none; }
.steps li.done .tick { background: var(--ok-bg); color: var(--ok); }
.steps li.done .title { text-decoration: line-through; opacity: 0.7; }
.qr svg { max-inline-size: 200px; block-size: auto; background: #fff; padding: 8px; border-radius: 12px; }
.codes { font-family: ui-monospace, Menlo, monospace; columns: 2; padding: 12px; background: var(--input); border-radius: 12px; border: 1px solid var(--line); list-style: none; margin: 0; }
.lang-switch { display: inline-flex; gap: 4px; }
.lang-switch button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; color: var(--ink); cursor: pointer; font: inherit; font-size: 0.85rem; }
.lang-switch button[aria-current="true"] { background: var(--brand-soft); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* tenants list, search, facts */
.wrap--narrow { max-inline-size: 640px; }
.search { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; padding: 5px 5px 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 8px 4px; }
.search input:focus { outline: none; }
.tabs .btn[aria-current="true"], .row .btn[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand); }
a.card--link { display: block; color: inherit; text-decoration: none; }
a.card--link:hover { border-color: var(--brand); }
.facts { margin: 0 0 12px; display: grid; gap: 10px; }
.facts > div { display: grid; gap: 2px; }
.facts--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.facts dt { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 200px 1fr; align-items: start; } }
.facts--grid > div, .facts--grid > div:nth-child(n) { grid-template-columns: minmax(0, 1fr); }   /* in the grid version the label sits above its value at every width */
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }
.rules { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); margin-block: 10px; line-height: 1.6; }
details.card > summary { cursor: pointer; }

ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
details.correct { margin-block-start: 16px; }
details.correct > summary { cursor: pointer; font-weight: 700; }
.card--inner { background: var(--input); box-shadow: none; }

.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-block-start: 48px; }
.signatures .line { display: block; border-block-end: 1px solid var(--ink); block-size: 40px; }
pre.sample { white-space: pre-wrap; font: inherit; }
@media print { .topbar, .nav, .tabbar, .tabbar-panel, .no-print, .lang-switch { display: none !important; } body { background: #fff; color: #000; } .rules { border: 0; padding: 0; background: none; } }
.btn { text-align: center; }
.btn bdi { white-space: nowrap; }

.plain { list-style: none; margin: 0 0 8px; padding: 0; }
.plain li { padding-block: 3px; }
details.inline { display: inline-block; max-inline-size: 100%; }
details.inline[open] { display: block; inline-size: 100%; }   /* an opened form takes the card's full width, never more */
.row > details.inline[open] { flex: 1 0 100%; }
details.inline > summary { list-style: none; cursor: pointer; }
details.inline form { margin-block-start: 6px; }

/* activity logs (company and platform): filter bar, compact table on wide screens, cards on phones */
.log-wrap { padding: 0; overflow: hidden; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-block-end: 1px solid var(--line); }
.filters select, .filters input { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); min-block-size: 40px; }
.filters__search { flex: 1 1 200px; min-inline-size: 0; }
.log { inline-size: 100%; border-collapse: collapse; font-size: 0.88rem; }
.log th { text-align: start; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 12px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.log td { padding: 9px 12px; border-block-end: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.log tbody tr:hover { background: var(--brand-soft); }
.log__time, .log__ip { white-space: nowrap; color: var(--ink-soft); font-size: 0.82rem; }
.log__action { font-weight: 700; }
.log__detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-soft); cursor: default; }
details > summary.log__detail { cursor: pointer; }
.log__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--brand-soft); color: var(--ink); white-space: nowrap; }
.chip--sign_in { background: rgba(60, 120, 230, 0.16); color: #2f6fd6; }
.chip--sites, .chip--companies { background: rgba(140, 90, 220, 0.16); color: #7b4fd1; }
.chip--assets { background: rgba(20, 150, 160, 0.16); color: #0e8a93; }
.chip--documents { background: var(--ok-bg); color: var(--ok); }
.chip--team { background: var(--warn-bg); color: var(--warn); }
.chip--settings { background: rgba(120, 120, 140, 0.18); color: var(--ink-soft); }
.chip--support, .chip--errors { background: var(--danger-bg); color: var(--danger); }
.result { font-weight: 800; font-size: 1rem; }
.result--ok { color: var(--ok); }
.result--failed { color: var(--danger); }
.support-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--danger-bg); color: var(--ink); border-block-end: 1px solid var(--line); font-weight: 600; }
@media (max-width: 720px) {
  .log thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .log, .log tbody, .log tr, .log td { display: block; inline-size: 100%; box-sizing: border-box; }
  .log tr { padding: 10px 12px; border-block-end: 1px solid var(--line); }
  .log td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .log td[data-label]:empty, .log td:not([data-label]):empty { display: none; }
  .log td[data-label]::before { content: attr(data-label); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
  .log td.log__time, .log td.log__action { display: block; }
  .log td > .chip, .log td > .result { justify-self: start; }
  .log td.log__time::before, .log td.log__action::before { display: none; }
  .log__detail { -webkit-line-clamp: 3; }
  .filters > * { flex: 1 1 130px; min-inline-size: 0; }
  .filters__search { flex-basis: 100%; }
}
.qr svg { max-inline-size: 220px; block-size: auto; background: #fff; padding: 8px; border-radius: 12px; }

/* Stage 1: maps, next preventive maintenance, assets, photos, stickers */
.three { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.map { inline-size: 100%; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--input); z-index: 0; }
.map--small { block-size: 220px; margin-block-end: 10px; }
.map--picker { block-size: 280px; margin-block: 8px; cursor: crosshair; }
.map--large { block-size: min(70vh, 620px); margin-block-end: 16px; }
.map-field { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 0 14px; min-inline-size: 0; }
.map-card { display: grid; gap: 3px; min-inline-size: 180px; font: 0.9rem/1.35 system-ui, sans-serif; color: #1b1f23; }
.map-card .muted { color: #565f68; }
.map-card__links { display: flex; gap: 12px; margin-block-start: 4px; }
.map-card__state { font-weight: 700; }
/* the site's form: a draggable pin; orange while it waits for "Yes, place it", green once placed */
/* a glass ring: the building under it stays visible; the solid dot in the middle is the exact spot that is saved */
.map-pin {
  --pin: 46, 125, 50;
  box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); cursor: grab;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 45%, rgba(var(--pin), .16) 70%);
  box-shadow: 0 0 0 2px rgba(var(--pin), .95), 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(255, 255, 255, .7);
}
.map-pin::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: rgb(var(--pin)); box-shadow: 0 0 0 2px #fff;
}
.map-pin--pending { --pin: 224, 138, 0; animation: map-pin-pulse 1.2s ease-in-out infinite; }
@keyframes map-pin-pulse { 50% { box-shadow: 0 0 0 2px rgba(var(--pin), .95), 0 0 0 9px rgba(var(--pin), .22), 0 4px 12px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .map-pin--pending { animation: none; } }
/* map cards (the "Put the site here?" card, a site's card on the Map): frosted glass, matching the phone menu */
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip {
  background: rgba(255, 255, 255, .62); color: #1b1f23;
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.map .leaflet-popup-content-wrapper { border-radius: 18px; }
.map .leaflet-popup-content { margin: 14px 16px; }
.map .map-card .muted { color: #3d444b; }
.map-confirm .btn:not(.btn--primary) { background: rgba(255, 255, 255, .7); }
@media (prefers-reduced-transparency: reduce) {
  .map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.map-confirm { gap: 4px; min-inline-size: 0; }
.map-confirm__buttons { display: flex; gap: 8px; margin-block-start: 6px; }
.map-confirm__buttons .btn { flex: 1 1 0; min-inline-size: 0; min-block-size: 44px; padding-inline: 10px; white-space: nowrap; font-size: .9rem; }
.map-field { scroll-margin-block-start: 76px; }   /* a link to #map-position keeps the heading clear of the top bar */
/* the map pictures' required credit: one small line in the corner */
.map .leaflet-control-attribution { margin: 0; padding: 1px 6px; border-radius: 8px 0 0 0; font-size: 10px; line-height: 1.5; background: rgba(255, 255, 255, .6); color: #444; }
[dir="rtl"] .map .leaflet-control-attribution { border-radius: 0 8px 0 0; }
.map .leaflet-control-attribution a { color: inherit; text-decoration: none; }
.map { position: relative; }
.map-note {   /* "Use two fingers to move the map", shown briefly on top of a map */
  position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  background: rgba(20, 20, 42, .55); color: #fff; font: 700 1rem/1.3 system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity .25s;
}
.map-note--on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .map-note { transition: none; } }
/* map controls (zoom + and −, the Map / Satellite button): the same frosted glass as the map cards */
.map .leaflet-bar, .map-switch {
  border: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.map .leaflet-bar a {
  inline-size: 40px; block-size: 40px; line-height: 40px; font-size: 20px; color: #1b1f23; background: transparent;
  border-block-end: 1px solid rgba(255, 255, 255, .55);
}
.map .leaflet-bar a:last-child { border-block-end: 0; }
.map .leaflet-bar a:hover, .map .leaflet-bar a:focus-visible { background: rgba(255, 255, 255, .45); }
.map .leaflet-bar a.leaflet-disabled { color: rgba(27, 31, 35, .35); background: transparent; }
.map-switch {   /* the Map / Satellite button on a map */
  min-block-size: 40px; padding: 6px 14px; color: #1b1f23; font: 700 .85rem/1 system-ui, sans-serif; cursor: pointer;
}
.map-switch:hover { background: rgba(255, 255, 255, .7); }
@media (prefers-reduced-transparency: reduce) {
  .map .leaflet-bar, .map-switch { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.map-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pm { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.pm--overdue, .map-card__state--overdue { background: var(--danger-bg); color: var(--danger); }
.pm--due_soon, .map-card__state--due_soon { background: var(--warn-bg); color: var(--warn); }
.pm--planned, .map-card__state--planned { background: var(--ok-bg); color: var(--ok); }
.pm--contract_ends { background: rgba(106, 79, 179, 0.15); color: #6a4fb3; }
.pm--no_contract { background: rgba(120, 120, 140, 0.16); color: var(--ink-soft); }
.dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.dot--overdue { background: #c62828; } .dot--due_soon { background: #e08a00; } .dot--planned { background: #2e7d32; }
.dot--contract_ends { background: #6a4fb3; } .dot--no_contract { background: #7a7f87; }
.asset-row { display: grid; gap: 8px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.asset-row:last-child { border-block-end: 0; }
.asset-row__main { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; min-inline-size: 0; }
.asset-row__main h3 { margin: 0; font-size: 1.05rem; }
@media (min-width: 760px) { .asset-row { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }
.list-row { padding-block: 10px; border-block-end: 1px solid var(--line); min-inline-size: 0; overflow-wrap: anywhere; }
.list-row:last-of-type { border-block-end: 0; }
.list-row p { margin: 6px 0; }
.list-row.is-archived { opacity: 0.6; }
a.list-row--link { display: grid; gap: 4px; color: inherit; text-decoration: none; border-radius: 10px; padding-inline: 6px; margin-inline: -6px; }
:root a.list-row--link:not(.btn):not(.brand), :root[data-theme] a.list-row--link:not(.btn):not(.brand) { color: inherit; }
a.list-row--link:hover, a.list-row--link:focus-visible { background: var(--brand-soft); }
.checks--grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.chip--clients { background: rgba(140, 90, 220, 0.16); color: #7b4fd1; }
.chip--maintenance, .chip--contracts { background: rgba(20, 150, 160, 0.16); color: #0e8a93; }
.form-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-block: 10px; background: var(--input); }
.contact-row { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; min-inline-size: 0; }
.photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-block-end: 12px; }
.photos figure { margin: 0; display: grid; gap: 6px; }
.photos img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photos figcaption { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--ink-soft); }
.stickers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sticker { display: flex; gap: 12px; align-items: center; padding: 12px; border: 2px solid #000; border-radius: 12px; background: #fff; color: #000; break-inside: avoid; }
.sticker__qr svg { inline-size: 120px; block-size: 120px; display: block; }
.sticker__text { display: grid; gap: 4px; font-size: 0.9rem; min-inline-size: 0; overflow-wrap: anywhere; }
.sticker__scan { font-weight: 800; }
@media print {
  .stickers { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
  .sticker { border-width: 1.5px; }
  .no-print, .support-banner, .topbar, .nav { display: none !important; }
}

/* Stage 2: filter tabs scroll inside their own row on phones; visit rows */
.filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block: 2px 8px; margin-block-end: 8px; }
.filter-tabs .btn { flex: none; }
.filter-tabs .btn[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand); font-weight: 800; }
.visit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.visit__date { display: grid; justify-items: center; min-inline-size: 52px; padding: 6px 4px; border-radius: 12px; background: var(--input); border: 1px solid var(--line); line-height: 1.1; }
.visit__date b { font-size: 1.25rem; }
.visit__date small { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; }
.visit__main { display: grid; gap: 3px; min-inline-size: 0; }
.visit__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.visit__actions form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.visit__assign { flex: 1 1 140px; min-inline-size: 0; max-inline-size: 320px; }
.visit__assign select { inline-size: 100%; }
.visit__actions > details[open] { flex-basis: 100%; order: 9; }
.visit__more > summary { min-inline-size: 44px; justify-content: center; font-weight: 900; letter-spacing: 1px; }
[hidden] { display: none !important; }
.visit__actions select, .visit__actions input[type="date"], .visit__actions input[type="text"] {
  min-block-size: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: inherit; max-inline-size: 100%;
}
.visit__pick { inline-size: 20px; block-size: 20px; accent-color: var(--brand); margin: 0 0 2px; }
.visit__date:has(.visit__pick) { padding-block-start: 4px; }
.badge--muted { background: var(--input); color: var(--ink-soft); }
.bulk-bar { position: sticky; inset-block-start: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-block-end: 12px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bulk-bar select { min-block-size: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: inherit; padding: 6px 10px; max-inline-size: 100%; }
/* the month calendar (computers); phones get the list */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.calendar__head { padding: 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--ink-soft); background: var(--input); text-align: center; }
.calendar__day { min-block-size: 96px; padding: 6px; border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); display: grid; align-content: start; gap: 4px; min-inline-size: 0; }
.calendar__day:nth-child(7n + 1) { border-inline-start: 0; }
.calendar__day.is-out { background: var(--input); opacity: .55; }
.calendar__day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.calendar__num { font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); }
.calendar__visit { display: block; padding: 3px 6px; border-radius: 8px; font-size: 0.76rem; line-height: 1.25; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--brand-soft); color: var(--ink); }
:root a.calendar__visit:not(.btn), :root[data-theme] a.calendar__visit:not(.btn) { color: var(--ink); }
.calendar__visit--overdue { background: var(--danger-bg); }
.calendar__visit--done { background: var(--ok-bg); }
.calendar__visit--skipped, .calendar__visit--missed { background: var(--input); text-decoration: line-through; }
@media (max-width: 720px) { .calendar-wrap { display: none; } }
@media (min-width: 721px) { .calendar-list { display: none; } }
.facts bdi, .visit__main bdi, .list-row--link bdi { white-space: nowrap; }   /* dates and numbers never break at their hyphens */

p.help { color: var(--ink-soft); font-size: 0.84rem; margin-block: 4px 12px; }   /* a help line outside a field */
/* inside a form field: an option row is not a field label, and tick boxes and switches keep their own size */
.field .option { display: flex; font-weight: 400; font-size: 1rem; margin: 0; }
.field input[type="checkbox"] { inline-size: 22px; block-size: 22px; padding: 0; min-block-size: 0; }
.field input.switch { inline-size: 48px; block-size: 28px; border: 0; border-radius: 99px; }
.field input[type="checkbox"]:not(.switch):not(.visit__pick) { border: 2px solid var(--tick-border); border-radius: 7px; }
.field input[type="checkbox"]:not(.switch):not(.visit__pick):checked { border-color: var(--brand); }
/* tablets and computers: the top menu wraps onto a second row rather than hiding items off the edge */
@media (min-width: 721px) { .nav--top { flex-wrap: wrap; overflow-x: visible; } }
/* Stage 3: the public QR report form; the hidden field for robots stays off screen */
.qr-website { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.qr-problems { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.qr-problems .check { align-items: center; }
input[type="radio"] { -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; flex: none; margin: 0; border: 2px solid var(--tick-border); border-radius: 50%; background: var(--card); cursor: pointer; }
.field input[type="radio"] { inline-size: 22px; block-size: 22px; min-block-size: 0; padding: 0; border: 2px solid var(--tick-border); border-radius: 50%; background: var(--card); }
.field input[type="radio"]:checked, input[type="radio"]:checked { border: 7px solid var(--brand); }
input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.alert--ok { background: var(--ok-bg); color: var(--ok); }
/* Stage 3: calls. The red bar while someone may be trapped; kinds to pick; the next step as big buttons; the timeline */
.sos { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 14px 16px; margin-block-end: 14px; border-radius: 14px;
  background: #b3261e; color: #fff; text-decoration: none; box-shadow: 0 8px 22px rgba(190, 30, 30, .3); }
/* always white on red, also in dark mode (the dark link colour rule is very specific) */
html:root:not(.x) a.sos.sos:not(.btn):not(.brand) { color: #fff; }
.sos b { font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) { .sos { animation: sos-pulse 1.6s ease-in-out infinite; } }
@keyframes sos-pulse { 50% { box-shadow: 0 0 0 6px rgba(190, 30, 30, .18), 0 8px 22px rgba(190, 30, 30, .3); } }
.call-row--sos { border-inline-start: 4px solid var(--danger); padding-inline-start: 10px; }
.timing { font-weight: 800; }
.timing--late { color: var(--danger); }
.timing--soon { color: var(--warn); }
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.kind { position: relative; display: grid; place-items: center; min-block-size: 52px; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--input); font-weight: 700; text-align: center; cursor: pointer; }
.kind input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; margin: 0; cursor: pointer; }
.kind:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.kind--entrapment:has(input:checked) { background: var(--danger); border-color: var(--danger); }
.kind:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.call-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.call-steps form { margin: 0; }
.call-steps .btn { min-block-size: 54px; font-size: 1.05rem; }
.call-steps .help { grid-column: 1 / -1; margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg .btn { min-block-size: 44px; white-space: normal; }
.call-office > form + form, .call-office > details { margin-block-start: 18px; }
.call-office > details { display: block; border-block-start: 1px solid var(--line); padding-block-start: 14px; }
.call-office .label { margin: 0 0 8px; }
.timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-inline-start: 2px solid var(--line); display: grid; gap: 6px; font-size: .92rem; color: var(--ink-soft); }
[dir="rtl"] .timeline { padding: 0 14px 0 0; }
.targets { display: grid; gap: 8px; margin-block: 8px 12px; }
.target { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 150px); gap: 8px; align-items: center; }
.target .label { margin: 0; }
.target input, .target select { min-block-size: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: inherit; min-inline-size: 0; }

/* Stage 3, part 2: Today, the job report and the report page */
.eyebrow { margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.list-row--button { display: grid; gap: 4px; inline-size: 100%; padding-inline: 0; text-align: start; border: 0; border-block-end: 1px solid var(--line); background: none; font: inherit; color: inherit; cursor: pointer; }
form:last-child > .list-row--button { border-block-end: 0; }
h2 .count { font-size: .85rem; font-weight: 400; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.spaced { margin-block-start: 16px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-block-end: 10px; }
.thumb { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--input); }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.thumb__remove { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 38px; block-size: 38px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.thumb--add { display: grid; place-items: center; border: 2px dashed var(--line); color: var(--ink-soft); font-size: 1.8rem; cursor: pointer; }
.thumb--add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.thumb--add:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.part-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 10px; border-block-end: 1px solid var(--line); }
.part-add { margin-block-start: 10px; }
.part-add > summary { list-style: none; display: inline-flex; }
.part-add > summary::-webkit-details-marker { display: none; }
.kinds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kinds--3 .kind span, .seg .kind span { text-align: center; }
.seg--2 { grid-template-columns: 1fr 1fr; }
.seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .seg--3 { grid-template-columns: 1fr; } }
.sign__pad { position: relative; block-size: 170px; border: 2px dashed var(--line); border-radius: 12px; background: #fff; }
.sign__pad canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; touch-action: none; cursor: crosshair; border-radius: 10px; }
.sign__hint { position: absolute; inset-block-end: 10px; inset-inline-start: 12px; color: #8a8f99; font-size: .85rem; pointer-events: none; }
.sign__pad.is-signed .sign__hint { display: none; }
.sign__clear { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; }
.sign .sign__reason { display: none; }
.sign:has(input[name="nobody"]:checked) .sign__reason { display: block; }
.sign:has(input[name="nobody"]:checked) .sign__pad, .sign:has(input[name="nobody"]:checked) .sign__who { display: none; }
.action-bar { position: sticky; inset-block-end: 12px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 8px; padding: 8px;
  margin-block-start: 14px; border-radius: 18px; border: 1px solid var(--lg-border); background: var(--lg-bg); box-shadow: 0 8px 26px var(--lg-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
.action-bar .btn { min-block-size: 48px; }
@media (max-width: 720px) { .action-bar { inset-block-end: calc(88px + env(safe-area-inset-bottom)); } }
.checks { margin: 8px 0 0; padding-inline-start: 18px; color: var(--ink-soft); }
.checks .is-done { color: var(--ink); }
.checks .is-done::marker { content: '✓  '; color: var(--ok); }
.notice-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; }
.checklist-edit { border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.checklist-edit > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; gap: 6px; }
.select--inline { inline-size: auto; min-block-size: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: inherit; }

/* ---------- Stage 4: certificates and documents ---------- */
.days--wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.days--wide .day span { padding-inline: 6px; text-align: center; font-size: 0.85rem; }
.cert-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.cert-count { display: grid; place-items: center; min-block-size: 56px; padding: 6px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: 0.78rem; text-align: center; }
.cert-count b { font-size: 1.25rem; line-height: 1.1; }
.cert-count[aria-current="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
.cert-count--expired b { color: var(--danger); } .cert-count--due_soon b { color: var(--warn); } .cert-count--valid b { color: var(--ok); }
.cert-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin: 0 0 10px; }
.cert-search input[type="search"] { min-block-size: 46px; inline-size: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.cert-filters > summary { min-block-size: 44px; display: inline-flex; align-items: center; list-style: none; }
.cert-filters > summary::-webkit-details-marker { display: none; }
.cert-filters[open] { grid-column: 1 / -1; grid-row: 2; }
.cert-filters[open] > summary { display: none; }
.cert-filters .stack { padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.cert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-block-end: 1px solid var(--line); }
.cert-row:last-child { border-block-end: 0; }
.cert-row__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-row__act { grid-row: span 2; display: flex; justify-content: flex-end; text-align: end; font-size: 0.85rem; }
.cert-row__act .btn { min-inline-size: 72px; min-block-size: 44px; justify-content: center; }
.cert-row__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.85rem; }
.cert { display: grid; gap: 10px; }
.cert > * { margin-block: 0; }
.cert__facts { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert__facts > div { align-content: start; }
@media (min-width: 720px) { .cert__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cert__sub { font-size: 1rem; margin: 0; }
.cert__conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cert__conds li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--input); }
.cert__conds form { margin: 0; flex: none; }
.cert__toggle { border: 0; cursor: pointer; min-block-size: 32px; font: inherit; font-size: 0.78rem; font-weight: 800; }
.cert__booked { margin: 0; }
.cert__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .cert__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cert__book[open] { grid-column: 1 / -1; } }
.cert__actions > .btn, .cert__book > summary { min-block-size: 46px; justify-content: center; inline-size: 100%; }
.cert__book > summary { list-style: none; display: flex; align-items: center; }
.cert__book > summary::-webkit-details-marker { display: none; }
.cert__book form { margin-block-start: 10px; }
.cert__history > summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; }
.cert-form__conds { display: none; }
.cert-form:has(input[name="result"][value="conditions"]:checked) .cert-form__conds,
.cert-form:has(input[name="result"][value="failed"]:checked) .cert-form__conds { display: block; }
.cert-upload { display: grid; gap: 6px; padding: 14px; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-soft); font-size: 0.9rem; }
.cert-upload input { max-inline-size: 100%; }
.doc-cats { display: flex; gap: 6px; overflow-x: auto; padding-block-end: 4px; margin-block-end: 6px; scrollbar-width: thin; }
.doc-cat { flex: none; min-block-size: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 0.85rem; cursor: pointer; }
.doc-cat[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-block-end: 1px solid var(--line); }
.doc-row[hidden] { display: none; }
.doc-row__icon { inline-size: 38px; block-size: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); font-size: 0.68rem; font-weight: 800; }
.doc-row__main { display: grid; gap: 3px; min-inline-size: 0; overflow-wrap: anywhere; }
.doc-row__main .muted { font-size: 0.85rem; }
.doc-row__more > summary { list-style: none; min-inline-size: 44px; min-block-size: 44px; justify-content: center; }
.doc-row__more > summary::-webkit-details-marker { display: none; }
.doc-row__more[open] { grid-column: 1 / -1; grid-row: 2; }
.doc-row__more[open] > summary { display: none; }
.doc-row__menu { display: grid; gap: 10px; padding: 10px; border-radius: 12px; background: var(--input); }
.doc-row__menu .field span { font-weight: 700; }
.doc-add { margin-block-start: 10px; }
@media (min-width: 721px) { .nav--top { gap: 4px; } .nav--top a { padding-inline: 10px; } }

/* ---------- Map filter chips: one compact row (scrolls inside its strip on phones), counts in a pill ---------- */
.map-filters { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 2px 0 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 28px), transparent); }
[dir="rtl"] .map-filters { --fade-to: left; }
.map-filters::-webkit-scrollbar { display: none; }
.map-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-block-size: 40px; padding: 0 6px 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
[dir="rtl"] .map-chip { padding: 0 12px 0 6px; }
.map-chip .dot { margin: 0; }
.map-chip__n { min-inline-size: 26px; block-size: 26px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--input); font-size: .8rem; font-weight: 800; }
.map-chip--zero { color: var(--ink-soft); font-weight: 500; }
.map-chip--zero .map-chip__n { background: transparent; }
.map-chip[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand); }
.map-chip[aria-current="true"] .map-chip__n { background: var(--brand); color: #fff; }
.map-chip--cert svg { inline-size: 16px; block-size: 16px; color: var(--brand); }
.map-filters__sep { flex: 0 0 1px; block-size: 24px; background: var(--line); }
@media (min-width: 900px) {
  .map-filters { flex-wrap: wrap; gap: 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .map-chip { gap: 6px; padding: 0 4px 0 10px; font-size: .85rem; }
  [dir="rtl"] .map-chip { padding: 0 10px 0 4px; }
  .map-chip__n { min-inline-size: 22px; block-size: 22px; padding: 0 6px; }
}

/* ---------- Stage 5: Money (quotes, price list, money settings) ---------- */
.money-tabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.money-tabs::-webkit-scrollbar { display: none; }
.money-tabs a { flex: 0 0 auto; min-block-size: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.money-tabs a[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); }
.quote-list { display: grid; gap: 8px; }
.quote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); min-inline-size: 0; }
.quote-row > * { min-inline-size: 0; overflow-wrap: anywhere; }
.quote-row__total { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.quote-row > span:nth-child(4) { justify-self: end; }
.quote-row__when { grid-column: 1 / -1; font-size: .84rem; }
.quote-context { margin: 0; }
.qline { display: grid; gap: 6px; padding: 8px 0; border-block-end: 1px solid var(--line); }
.qline:has([data-remove-line]:checked) { display: none; }
.qline__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.qline input, .qline select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); min-block-size: 42px; min-inline-size: 0; }
.qline__desc { inline-size: 100%; font-weight: 700 !important; border-color: transparent !important; background: transparent !important; padding-inline: 0 !important; }
.qline__desc:focus, .qline__desc:placeholder-shown { border-color: var(--line) !important; background: var(--input) !important; padding-inline: 10px !important; }
.qline__amt { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.qline__part { font-size: .82rem; margin-block-start: -4px; }
.qline__calc { display: grid; grid-template-columns: 64px minmax(0, 92px) auto minmax(0, 120px) 1fr; gap: 6px; align-items: center; }
.qline__x { justify-self: end; position: relative; min-inline-size: 44px; }
.qline__x input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.quote-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-block-start: 10px; }
.quote-add select { font: inherit; min-block-size: 44px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--input); color: var(--ink); min-inline-size: 0; }
.quote-totals { display: grid; gap: 4px; margin: 12px 0 0; }
.quote-totals > div { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.quote-totals > div[hidden] { display: none; }
.quote-totals dt, .quote-totals dd { margin: 0; }
.quote-totals__grand { font-size: 1.2rem; font-weight: 800; border-block-start: 1px solid var(--line); padding-block-start: 8px; margin-block-start: 4px; }
.quote-options > summary { cursor: pointer; min-block-size: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.quote-options[open] > summary { margin-block-end: 10px; }
.quote-layout { display: grid; gap: 12px; }
.quote-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-block-end: 1px solid var(--line); }
.quote-line > span:first-child { display: grid; gap: 2px; }
.quote-line__amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.quote-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.quote-history li::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand); margin-inline-end: 8px; }
.quote-decline { margin-block-start: 12px; }
.quote-decline[open] > summary { margin-block-end: 10px; }
.report-quote { margin-block-start: 10px; }
.price-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin: 0 0 10px; }
.price-tools .cert-search { margin: 0; grid-template-columns: minmax(0, 1fr); }
.price-add[open] { grid-column: 1 / -1; }
.price-add > summary { min-block-size: 46px; }
.price-add[open] > summary { margin-block-end: 10px; }
.price-add .price-form { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.price-groups { display: grid; gap: 12px; }
.price-row { border-block-end: 1px solid var(--line); }
.price-row:last-child { border-block-end: 0; }
.price-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; min-block-size: 44px; align-items: center; }
.price-row > summary::-webkit-details-marker { display: none; }
.price-row__price { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.price-row[open] { padding-block-end: 12px; }
.price-row__remove { margin-block-start: 8px; }
.money-settings:has([name="tax_on"]:not(:checked)) .money-tax { display: none; }
.action-bar--one { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .quote-layout > aside { position: sticky; inset-block-start: 80px; }
  .quote-form { max-inline-size: 760px; }
  .price-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Money settings: one row per letterhead image (header, footer, full page) */
.letterhead-part { border-top: 1px solid var(--line, #e5e5e5); padding-top: .75rem; }
.letterhead-part .help { margin: 0 0 .4rem; }
.letterhead-part__head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.letterhead-part__head label:first-child { margin: 0 auto 0 0; }
[dir=rtl] .letterhead-part__head label:first-child { margin: 0 0 0 auto; }
.letterhead-part__head .option { margin: 0; padding-block: 0; min-height: 0; border: 0; background: none; }
.letterhead-part input[type=file] { max-width: 100%; }

/* ---------- Stage 5 part 2: invoices and payments ---------- */
.inv-due__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.inv-due__owed { font-size: 1.6rem; font-weight: 800; }
.inv-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.inv-bar span { display: block; height: 100%; background: var(--brand); }
.inv-credit { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.inv-words { font-size: .85rem; color: var(--ink-soft); margin: 6px 0 0; text-align: end; }
.pay-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.pay-row:first-of-type { border-top: 0; }
.pay-row .row { gap: 6px; flex-wrap: nowrap; }
.pay-row--reversed > span:first-child { opacity: .7; }
.pay-row .doc-row__menu .field { min-width: 14rem; }
.alloc { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.alloc input[type=checkbox] { width: 22px; height: 22px; }
.alloc label b bdi { white-space: nowrap; }
.alloc input[type=text] { width: 6.5rem; text-align: end; min-height: 44px; }
.alloc-left { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 2px solid var(--brand); font-weight: 700; }
.pay-cheque { display: none; }
form:has([data-pay-method][value=cheque]:checked) .pay-cheque { display: grid; }

/* ---------- Stage 5 review 5.3: contract billing, Unpaid view, statement, Home ---------- */
.inv-issue-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-issue-all .btn { margin-inline-start: auto; }
.unpaid-total { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 10px; }
.unpaid-total b { font-size: 1.3rem; }
.unpaid-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.unpaid-filters select { min-width: 0; inline-size: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--input); color: var(--ink); font: inherit; min-block-size: 44px; }
.quote-row__pay { grid-column: 1 / -1; justify-self: end; }
.bill-next { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.stmt-range { display: flex; gap: 6px; margin-bottom: 10px; }
.stmt-range .btn { flex: 1; padding-inline: 6px; }
.stmt-dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.stmt-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.stmt-sum div { background: var(--brand-soft); border-radius: 12px; padding: 8px 10px; }
.stmt-sum dt { font-size: .8rem; color: var(--ink-soft); }
.stmt-sum dd { margin: 0; font-weight: 800; }
.stmt-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.stmt-row:first-of-type { border-top: 0; }
.stmt-row__amt { text-align: end; white-space: nowrap; }
.stmt-row__bal { font-size: .8rem; color: var(--ink-soft); }
.stmt-minus { color: var(--ok); }
.money-tile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.money-tile__big { font-size: 1.5rem; font-weight: 800; }
.money-tile__big--late { color: var(--danger); }

/* ---------- Stage 3a: parts and suppliers ---------- */
.parts-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0 0 6px; }
/* font: inherit keeps the text at the page size (16 px or more), so iPhones do not zoom in when the box is tapped */
.parts-tools input[type="search"] { min-block-size: 46px; inline-size: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.parts-tools select { min-block-size: 46px; max-inline-size: 45vw; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.parts-tools:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.parts-count { margin: 4px 0 10px; font-size: .9rem; }
.quote-list { display: grid; gap: 8px; }
.stars { color: #c98a1b; letter-spacing: 1px; white-space: nowrap; }
.fits { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.fit { display: inline-flex; align-items: center; min-block-size: 28px; padding: 0 10px; border-radius: 999px; background: var(--brand-soft); font-size: .85rem; font-weight: 600; }
.ship { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .85rem; color: var(--ink-soft); }
.sup-offer { border-top: 1px solid var(--line); }
.sup-offer:first-of-type, .card > h2 + .sup-offer, .card > .row + .sup-offer { border-top: 0; }
.sup-offer > summary { list-style: none; cursor: pointer; }
.sup-offer > summary::-webkit-details-marker { display: none; }
.sup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; }
.sup-row > * { min-inline-size: 0; overflow-wrap: anywhere; }
.sup-row__price { text-align: end; font-weight: 800; white-space: nowrap; }
.sup-row__local { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.sup-row__min { text-align: end; font-size: .85rem; }
.sup-offer__remove { margin-block-end: 10px; }
.contact-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.contact-bar--1 { grid-template-columns: minmax(0, 1fr); }
.contact-bar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-bar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-bar .btn { min-block-size: 44px; padding-inline: 6px; justify-content: center; font-size: .85rem; }
.lead-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
.kinds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kinds--4 .kind span { text-align: center; }
.more-menu[open] { position: relative; }
.more-menu__list { display: grid; gap: 6px; }
.page-foot { margin-block: 4px 10px; }
@media (max-width: 400px) { .kinds--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Stage 3a, review 3a.2: part orders ---------- */
.po-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.po-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.po-steps li { position: relative; padding-block-start: 18px; font-size: .8rem; color: var(--ink-soft); text-align: center; min-inline-size: 0; overflow-wrap: anywhere; }
.po-steps li::before { content: ""; position: absolute; inset-block-start: 4px; inset-inline: 0; block-size: 4px; border-radius: 4px; background: var(--line); }
.po-steps li.is-done::before { background: var(--ok); }
.po-steps li.is-now::before { background: var(--brand); }
.po-steps li b { display: block; color: var(--ink); font-size: .85rem; }
.po-expected { margin: 10px 0 0; }
.late-text { color: var(--danger); font-weight: 700; }
.po-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; align-items: flex-start; }
.po-actions > .btn, .po-actions > details > summary.btn { min-block-size: 44px; }
.po-actions .po-next { flex: 1 1 0; min-inline-size: 0; }
.po-actions > .btn, .po-actions > .more-menu { flex: none; }
.po-receive { margin-block-start: 10px; }
.po-actions .po-next > summary { inline-size: 100%; }
.po-actions .po-next[open], .po-actions .more-menu[open] { flex: 1 0 100%; order: 3; }
.po-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; list-style: none; cursor: pointer; }
.po-line::-webkit-details-marker { display: none; }
.po-line > * { min-inline-size: 0; overflow-wrap: anywhere; }
.po-line__amt { text-align: end; font-weight: 800; white-space: nowrap; }
.po-line__job { grid-column: 1 / -1; }
.chip-link { display: inline-flex; align-items: center; gap: 4px; min-block-size: 28px; padding: 0 10px; border-radius: 999px; background: var(--brand-soft); font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.po-total { display: flex; justify-content: space-between; gap: 10px; border-block-start: 2px solid var(--line); padding-block-start: 10px; margin-block: 4px 10px; font-weight: 800; }
.po-receive > summary { list-style: none; cursor: pointer; inline-size: 100%; min-block-size: 44px; }
.recv { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; padding: 4px 0; }
.recv input { min-block-size: 44px; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--ink); }
.need { border-block-start: 1px solid var(--line); padding: 10px 0; }
.need:first-of-type, h2 + .need { border-block-start: 0; }
.need__head { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; }
.need__head input { min-block-size: 44px; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--ink); }
.need select { inline-size: 100%; min-block-size: 44px; margin-block-start: 6px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--ink); padding: 8px 10px; }
.wait-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-block-start: 1px solid var(--line); }
.wait-row:first-of-type, .row + .wait-row { border-block-start: 0; }
.notice-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.pick { display: grid; gap: 6px; }
.pick label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pick label:has(input:disabled) { opacity: .55; }
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg3 .kind span { text-align: center; font-size: .85rem; }
/* the part used form: "Ordered for this job" shows the arrived parts; the other sources show the name and number to type */
.part-add .part-pick { display: none; }
.part-add:has(input[value="order"]:checked) .part-pick { display: grid; }
.part-add:has(input[value="order"]:checked) .part-typed { display: none; }
.inst-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-block-start: 1px solid var(--line); }
.inst-row:first-of-type, h2 + .inst-row { border-block-start: 0; }
.home-orders { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-orders__big { font-size: 1.4rem; font-weight: 800; }
.home-orders__ready { flex-basis: 100%; margin: 4px 0 0; }

/* ---- Stage 6, review 6.1: the client view (screens approved on the simulator 2026-11-06) ------------------------------- */
.cv-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.cv-small { margin-block: 14px 0; font-size: .78rem; text-align: center; }
.cv-code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.cv-report { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; }
.cv-report svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-h2 { font-size: 1.05rem; margin: 0 0 8px; }
.cv-flat { margin: 0; }
.cv-mt { margin: 10px 0 0; }
.cv-next { margin: 10px 0 0; }
.cv-attn { padding-block: 12px; }
.cv-row, .cv-visit, .cv-contact, .cv-file, .cv-link { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-block-end: 1px solid var(--line); min-block-size: 44px; color: inherit; text-decoration: none; }
.cv-row:last-child, .cv-visit:last-of-type, .cv-contact:last-of-type, .cv-file:last-of-type, .cv-link:last-of-type { border-block-end: 0; }
.cv-visit, .cv-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.cv-row__main { display: grid; gap: 2px; flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.cv-row > .badge { flex: none; }
.cv-go { font-size: 1.4rem; color: var(--ink-soft); }
[dir="rtl"] .cv-go { transform: scaleX(-1); }
.cv-sites { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-block-end: 16px; }
.cv-site { display: grid; gap: 4px; padding: 14px 16px; margin-block-end: 10px; color: inherit; text-decoration: none; }
.cv-sites .cv-site { margin: 0; }
.cv-site__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-lift { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-block-end: 1px solid var(--line); }
.cv-lift:last-of-type { border-block-end: 0; }
.cv-lift a.badge { text-decoration: none; }
.cv-fold > summary { display: flex; align-items: center; gap: 8px; min-block-size: 32px; cursor: pointer; list-style: none; }
.cv-fold > summary::-webkit-details-marker { display: none; }
.cv-fold > summary .cv-h2 { margin: 0 auto 0 0; }
[dir="rtl"] .cv-fold > summary .cv-h2 { margin: 0 0 0 auto; }
.cv-fold > summary::after { content: "▾"; color: var(--ink-soft); }
.cv-fold:not([open]) > summary::after { content: "▸"; }
[dir="rtl"] .cv-fold:not([open]) > summary::after { content: "◂"; }
.cv-fold[open] > summary { margin-block-end: 6px; }
.cv-more { display: inline-block; padding-block: 10px 0; }
.cv-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cv-chip { position: relative; }
.cv-chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.cv-chip span { display: flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--input); font-size: .92rem; text-align: center; cursor: pointer; }
.cv-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.cv-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cv-tabs { margin-block-end: 12px; }
.cv-contact .more-menu { flex: none; align-self: flex-start; }
.cv-contact .more-menu[open] { flex: 1 0 100%; }
.cv-contact { flex-wrap: wrap; }
.cv-link { flex-wrap: wrap; justify-content: space-between; }
.cv-link form { margin: 0; }
.cv-share-form { margin: 4px 0 0; }
.cv-share { display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--input); color: var(--ink-soft); font: inherit; font-size: .8rem; cursor: pointer; }
.cv-share[aria-pressed="true"] { background: var(--ok-bg); border-color: transparent; color: var(--ok); font-weight: 700; }
@media (max-width: 720px) { .page-head .cv-report { inline-size: 100%; } }
.cv-row__main bdi, .cv-visit bdi, .cv-file bdi, .cv-site bdi { white-space: nowrap; }   /* dates and numbers never break at their hyphens */

/* ---- Stage 6, review 6.2: client messages (screens approved 2026-11-11) ------------------------------------------------- */
.cv-contact > .cv-row__main { flex: 1 1 0; }   /* long badge lines wrap inside, the ⋯ button stays beside them */
.cv-days { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.cv-days input { inline-size: 6em; text-align: center; background: var(--input); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; min-block-size: 40px; font: inherit; }
.cv-upd { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.cv-upd--on { color: var(--ok); font-weight: 700; }
.cv-note { margin-block-start: 10px; font-size: .85rem; }
.cv-sent { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.cv-sent li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cv-wa > summary { list-style: none; cursor: pointer; }
.cv-wa > summary::-webkit-details-marker { display: none; }
.cv-wa__btn { min-block-size: 44px; display: flex; align-items: center; justify-content: center; background: #1f9d55; border-color: #1f9d55; color: #fff; font-weight: 700; }
.cv-wa[open] .cv-wa__btn { background: var(--input); color: var(--ink); border-color: var(--line); }
.cv-wa__box { margin-block-start: 12px; }
.cv-wa fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.cv-wa .pick { display: grid; gap: 8px; }
.cv-wa .pick label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-block-size: 44px; cursor: pointer; }
.cv-wa .pick label:has(input:checked) { border-color: var(--brand); }
.cv-wa .pick input { margin-block-start: 3px; accent-color: var(--brand); }
.cv-wa textarea { inline-size: 100%; box-sizing: border-box; font: inherit; }
/* Stage 6.2: Tell the client, when nobody at the client has a mobile number WhatsApp can use */
.cv-wa-none { margin: 8px 0 0; }
.cv-wa-none__link { font-weight: 600; padding-block: 12px; white-space: nowrap; }

/* ---- Stage 7, review 7a.2: Health, Your data, Company data, Import (screens approved 2026-11-12) ------------------------------- */
.hl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-end: 16px; }
@media (min-width: 900px) { .hl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hl-tile { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; min-block-size: 44px; }
.hl-tile .badge { justify-self: start; }
.hl-tile--warn { border-color: var(--warn); }
.hl-tile--bad { border-color: var(--danger); }
.hl-tile__label { font-weight: 700; }
.hl-tile__line { font-size: .85rem; color: var(--ink-soft); }
.hl-restore { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; border-block-start: 1px solid var(--line); }
.hl-actions { margin-block: 12px; }
.hl-danger { margin-block-start: 8px; }
.hl-danger > summary { list-style: none; cursor: pointer; display: inline-flex; }
.hl-danger > summary::-webkit-details-marker { display: none; }
.hl-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; font-size: .85rem; flex-wrap: wrap; }
.hl-steps li { padding: 4px 10px; border-radius: 999px; background: var(--input); color: var(--ink-soft); }
.hl-steps li[aria-current="step"] { background: var(--brand); color: #fff; font-weight: 700; }
.hl-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 6px; }
.hl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 6px; }
.hl-filter a[aria-current="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.hl-fix { color: var(--warn); }
.hl-save { display: grid; gap: 8px; position: sticky; bottom: 76px; padding-block: 8px; background: var(--bg); z-index: 2; }
@media (min-width: 721px) { .hl-save { position: static; grid-template-columns: auto auto; justify-content: start; } }
.cv-row > .btn, .hl-restore > .btn, .row--between > .btn { flex: none; white-space: nowrap; }
.hl-file { margin-block: -6px 10px; }
.cv-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.hl-wrap { overflow-wrap: anywhere; }   /* long error messages and file paths wrap on phones */

/* E8, job reports without signal: where the report stands on this phone (in the action bar), the copy kept on the phone,
   the warning before signing out with something unsent, the testing switch (developer's computer only) */
.sync { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 0.85rem; line-height: 1.35; padding: 2px 4px; }
.sync--kept { color: var(--ink-soft); }
.sync--kept::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ok); }
.sync--wait { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 10px; }
.sync--wait span { flex: 1 1 12rem; }
.sync--wait .btn { min-block-size: 36px; }
.sync--sent { color: var(--ok); font-weight: 700; }
.sync--conflict { background: var(--ok-bg); color: var(--ok); border-radius: 10px; padding: 8px 10px; }
.sync--refused { background: var(--danger-bg); color: var(--danger); border-radius: 10px; padding: 8px 10px; }
.offline-copy { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 0.88rem; }
.out-dialog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.out-dialog__box { background: var(--bg); color: var(--ink); border-radius: 16px; padding: 18px; max-inline-size: 26rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.out-dialog__box h2 { margin: 0 0 6px; font-size: 1.1rem; }
.out-dialog__box p { margin: 0 0 14px; }
.out-dialog__actions { display: grid; gap: 8px; }
.out-dialog__actions .btn { min-block-size: 44px; }
.btn--link-danger { background: none; border: 0; color: var(--danger); font-weight: 700; }
.dev-switch { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 0.75rem; padding: 6px 10px; border-radius: 999px; background: var(--input); color: var(--ink-soft); border: 1px dashed var(--line); }
.thumb--waiting { outline: 2px dashed var(--warn); outline-offset: -2px; }
.thumb--waiting::after { content: "⏳"; position: absolute; inset-block-end: 4px; inset-inline-start: 4px; font-size: 0.8rem; }

/* E15, quick search: a field in the top bar on a computer, an icon on a phone (on the same row as the company name); the results page */
.qs { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); text-decoration: none; }
.qs--wide { min-block-size: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--input); inline-size: clamp(170px, 22vw, 280px); margin-inline-end: 8px; }
.qs--wide input { flex: 1; min-inline-size: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; color: var(--ink); outline: none; padding: 0; }
.qs--wide:focus-within { border-color: var(--brand); }
.qs kbd { font: 600 0.72rem system-ui, sans-serif; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.qs--icon { display: none; inline-size: 44px; block-size: 44px; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--input); flex: none; }
@media (max-width: 720px) { .qs--wide { display: none; } .qs--icon { display: flex; } }
@media (max-width: 520px) { .topbar { flex-wrap: nowrap; } .topbar .brand { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.qs-box { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.qs-field { flex: 1; display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--brand); background: var(--input); color: var(--ink); }
.qs-field input { flex: 1; min-inline-size: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: inherit; outline: none; padding: 0; }
.qs-group { margin: 0 0 12px; }
.qs-group .eyebrow { display: flex; justify-content: space-between; }
.qs-page mark { background: var(--brand-soft); color: inherit; border-radius: 4px; padding: 0 2px; }