/* Happy Energy portal stylesheet, v2 (7 Oct 2026, CD).
   ONE stylesheet for crm.happyenergy.co.uk (staff) and installers.happyenergy.co.uk, and the token source for
   everything. It contains the onboarding kit (ok-*, unchanged class names) plus the portal shell and
   components (pt-*). onboarding-kit.css v2 is now just an @import of this file, so pages already on the
   kit keep working. Class contract: portal-markup.md. Every component and state: portal-demo.html.
   No framework, no build step, no external links. Fonts are self-hosted from /fonts/.
   v2.1 (7 Oct): Part 3 added (C1 PR #131 list); .pt-map__canvas isolates Leaflet; .pt .pt-muted wins over .pt h3.
   v2.2 (7 Oct): grid--start, padded section body, chevron fix, wrapping removable chips, compact/spanning diary, overlay panes, exclude facets, stat colour edges.
   v2.3 (7 Oct): diary week view, spanning blocked time, overlapping visits side by side.
   v2.4 (8 Oct): onboarding thread, replies list, attention row, audit trail, versions, cover check, signing, read-only bar, secret; pt-pair, pt-groups.
   v2.5 (8 Oct): wider page widths for large screens, pt-main--fluid, no sideways scroll, file inputs, pt-card__go.
   v2.6 (9 Oct): ok-filter, ok-kind, ok-readback, pt-files/pt-filerow, pt-job/pt-missing, pt-matrix, pt-tools/pt-toolpick/pt-override/pt-confirm, pt-epclist.
   v2.7 (10 Oct): ok-expiry, pt-choice, lease and required-date pills, two-line facet names.
   v2.8 (11 Oct): pt-card--editing, tr.is-editing, td.pt-note, td.pt-actions.
   v2.9 (12 Oct): TeX Gyre Adventor. v2.10 (12 Oct): full-width descriptions, pt-lede and pt-help.
   v2.11 (13 Oct): C1's CRM additions folded in (Part 4): bare form controls, pt-status, pre, [hidden], pt-photo__label and __section, pt-card__go column.
   Font: TeX Gyre Adventor (self-hosted /fonts/, GUST licence) first, Century Gothic as fallback. Questrial and Poppins retired.
/* v2.9 (12 Oct 2026): TeX Gyre Adventor replaces Questrial and Poppins. Files in /fonts/ (C1, PR 223). */
@font-face { font-family: "TeX Gyre Adventor"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/tex-gyre-adventor-regular.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Adventor"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/tex-gyre-adventor-italic.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Adventor"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/tex-gyre-adventor-bold.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Adventor"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/tex-gyre-adventor-bolditalic.woff2") format("woff2"); }

/* ===================== Part 1 · Onboarding kit (ok-*) ===================== */
:root {
  --ok-orange: #F08D00; --ok-orange-ink: #8A4C00; --ok-orange-tint: #FEF4E6;
  --ok-green: #7EBB2A; --ok-green-ink: #437015; --ok-green-tint: #EFF7E4;
  --ok-blue: #45B1D7; --ok-blue-tint: #E4F3F9; --ok-link: #1D6F8E;
  --ok-red: #C8321F; --ok-red-ink: #A3261A; --ok-red-tint: #FDECEA;
  --ok-grey: #8C9BA2; --ok-grey-tint: #EEF2F4;
  --ok-navy: #10303F; --ok-ink: #14252E; --ok-muted: #46565F;
  --ok-line: #DCE9EF; --ok-field: #7A8F98; --ok-bg: #F6F8F9; --ok-white: #FFFFFF;
  --ok-font: "TeX Gyre Adventor", "Century Gothic", CenturyGothic, "Avenir Next", system-ui, sans-serif;
  --ok-bold: "TeX Gyre Adventor", "Century Gothic", CenturyGothic, "Avenir Next", system-ui, sans-serif;
  --ok-top-offset: 0px;           /* set to the CRM menu's height on the staff side */
  --ok-focus: 0 0 0 2px #FFFFFF, 0 0 0 5px #10303F, 0 0 0 8px rgba(240,141,0,.45);
  --pt-wide: 1760px; --pt-read: 1440px; --pt-fluid: 2400px; --pt-text: 72ch;
  --pt-radius: 14px; --pt-radius-s: 10px;
  --pt-shadow: 0 6px 18px rgba(16,48,63,.06); --pt-shadow-lift: 0 14px 30px rgba(16,48,63,.12);
  --pt-header-h: 64px;
}
.ok-page {

  container: ok / inline-size;
  font-family: var(--ok-font); font-size: 16px; line-height: 1.45; color: var(--ok-ink);
  background: var(--ok-bg); -webkit-font-smoothing: antialiased; min-width: 0;
}
.ok-page *, .ok-page *::before, .ok-page *::after { box-sizing: border-box; }
.ok-page a { color: var(--ok-link); text-underline-offset: 2px; }
.ok-page a:hover { color: var(--ok-navy); }
.ok-page :focus-visible { outline: none; box-shadow: var(--ok-focus); border-radius: 6px; }
.ok-page ul li::marker { color: var(--ok-orange); }
.ok-page strong, .ok-page b, .ok-page h1, .ok-page h2, .ok-page h3 { font-family: var(--ok-bold); }
.ok-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons (16) ---------- */
.ok-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 2px solid transparent; font: 700 15px/1.2 var(--ok-bold); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ok-btn--primary { background: var(--ok-orange); color: var(--ok-navy); }
.ok-btn--primary:hover { background: #D97E00; color: var(--ok-navy); }
.ok-btn--secondary { background: var(--ok-white); color: var(--ok-navy); border-color: var(--ok-navy); }
.ok-btn--secondary:hover { background: var(--ok-blue-tint); }
.ok-btn--quiet { background: transparent; color: var(--ok-link); padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ok-btn--quiet:hover { color: var(--ok-navy); }
.ok-btn--small { min-height: 36px; padding: 6px 12px; font-size: 14px; position: relative; }
.ok-btn--small::after { content: ""; position: absolute; inset: -4px 0; }  /* 44 px hit area */
.ok-btn--download { background: var(--ok-white); color: var(--ok-navy); border-color: var(--ok-line); border-radius: 12px; justify-content: flex-start; white-space: normal; max-width: 100%; text-align: left; }
.ok-btn--download:hover { border-color: var(--ok-navy); }
.ok-btn--download .ok-btn__meta { font: 400 13px var(--ok-font); color: var(--ok-muted); }
.ok-btn:disabled, .ok-btn[aria-disabled="true"] { background: var(--ok-grey-tint); color: #6B7A81; border-color: transparent; cursor: not-allowed; }
.ok-icon { width: 18px; height: 18px; flex: none; }

/* ---------- Status dots and pills (12) ---------- */
.ok-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  width: 16px; height: 16px; font: 700 11px/1 var(--ok-bold); color: var(--ok-white); box-shadow: inset 0 0 0 1px rgba(16,48,63,.25); }
.ok-dot--md { width: 24px; height: 24px; font-size: 14px; }
.ok-dot--green { background: var(--ok-green); color: var(--ok-navy); }  .ok-dot--green::after { content: "✓"; }
.ok-dot--amber { background: var(--ok-orange); color: var(--ok-navy); } .ok-dot--amber::after { content: "!"; }
.ok-dot--red { background: var(--ok-red); }                              .ok-dot--red::after { content: "×"; }
.ok-dot--grey { background: var(--ok-grey-tint); color: var(--ok-muted); box-shadow: inset 0 0 0 1.5px var(--ok-grey); } .ok-dot--grey::after { content: "–"; }

.ok-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 999px;
  font: 700 13px/1.2 var(--ok-bold); white-space: nowrap; border: 1.5px solid transparent; }
.ok-pill::before { font-size: 12px; }
.ok-pill[data-status="not-started"] { background: var(--ok-grey-tint); color: var(--ok-muted); }         .ok-pill[data-status="not-started"]::before { content: "–"; }
.ok-pill[data-status="awaiting"]    { background: var(--ok-orange-tint); color: var(--ok-orange-ink); }  .ok-pill[data-status="awaiting"]::before { content: "◷"; }
.ok-pill[data-status="info"]        { background: var(--ok-orange-tint); color: var(--ok-orange-ink); }  .ok-pill[data-status="info"]::before { content: "?"; }
.ok-pill[data-status="expiring"]    { background: var(--ok-orange-tint); color: var(--ok-orange-ink); }  .ok-pill[data-status="expiring"]::before { content: "!"; }
.ok-pill[data-status="approved"]    { background: var(--ok-green-tint); color: var(--ok-green-ink); }    .ok-pill[data-status="approved"]::before { content: "✓"; }
.ok-pill[data-status="waived"]      { background: var(--ok-white); color: var(--ok-green-ink); border-color: var(--ok-green); } .ok-pill[data-status="waived"]::before { content: "○"; }
.ok-pill[data-status="expired"], .ok-pill[data-status="rejected"] { background: var(--ok-red-tint); color: var(--ok-red-ink); }
.ok-pill[data-status="expired"]::before, .ok-pill[data-status="rejected"]::before { content: "×"; }
.ok-pill[data-status="signed"]      { background: var(--ok-green-tint); color: var(--ok-green-ink); }    .ok-pill[data-status="signed"]::before { content: "✓"; }
.ok-pill[data-status="issued"]      { background: var(--ok-blue-tint); color: var(--ok-navy); }          .ok-pill[data-status="issued"]::before { content: "→"; }

/* ---------- Top bar (1) and Why summary (13) ---------- */
.ok-topbar { position: sticky; top: var(--ok-top-offset); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 10px 20px; background: var(--ok-white); border-bottom: 1px solid var(--ok-line); box-shadow: 0 4px 14px rgba(16,48,63,.06); }
.ok-topbar__id { display: grid; min-width: 0; margin-right: auto; }
.ok-topbar__name { font: 700 18px/1.2 var(--ok-bold); color: var(--ok-navy); overflow-wrap: anywhere; }
.ok-topbar__type { font-size: 14px; color: var(--ok-muted); }
.ok-topbar__lights { display: flex; gap: 6px; flex-wrap: wrap; }
.ok-light { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--ok-line);
  border-radius: 999px; background: var(--ok-white); font: 600 14px var(--ok-font); color: var(--ok-ink); cursor: pointer; }
.ok-light:hover, .ok-light[aria-expanded="true"] { border-color: var(--ok-navy); }
.ok-light__counts { display: inline-flex; align-items: center; gap: 4px; font: 700 14px var(--ok-bold); }
.ok-light__counts .ok-dot + * { margin-right: 4px; }
.ok-topbar__save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ok-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ok-muted); }
.ok-savestate::before { font-weight: 700; }
.ok-savestate[data-state="saved"]::before { content: "✓"; color: var(--ok-green-ink); }
.ok-savestate[data-state="saving"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ok-line); border-top-color: var(--ok-navy); animation: ok-spin .8s linear infinite; }
.ok-savestate[data-state="unsaved"] { color: var(--ok-orange-ink); } .ok-savestate[data-state="unsaved"]::before { content: "●"; color: var(--ok-orange); }
.ok-savestate[data-state="error"] { color: var(--ok-red-ink); font-weight: 600; } .ok-savestate[data-state="error"]::before { content: "!"; }
@keyframes ok-spin { to { transform: rotate(360deg); } }

.ok-why { position: absolute; top: calc(100% + 6px); right: 20px; z-index: 40; width: min(380px, calc(100% - 16px)); background: var(--ok-white);
  border: 1.5px solid var(--ok-navy); border-radius: 14px; box-shadow: 0 18px 40px rgba(16,48,63,.2); padding: 14px 16px 16px; display: grid; gap: 10px; }
.ok-why[hidden] { display: none; }
.ok-why__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ok-why__title { margin: 0; font-size: 17px; color: var(--ok-navy); }
.ok-why__group { display: grid; gap: 4px; }
.ok-why__person { margin: 0; font: 700 14px var(--ok-bold); color: var(--ok-navy); display: flex; align-items: center; gap: 6px; }
.ok-why ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.ok-why li a { display: inline-block; padding: 3px 0; }

/* ---------- Tabs (2) ---------- */
.ok-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--ok-line); background: var(--ok-white); overflow-x: auto; }
.ok-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; font: 600 15px var(--ok-font); color: var(--ok-muted); cursor: pointer; white-space: nowrap; }
.ok-tab:hover { color: var(--ok-navy); }
.ok-tab[aria-selected="true"] { color: var(--ok-navy); border-bottom-color: var(--ok-orange); font-family: var(--ok-bold); font-weight: 700; }
.ok-tab__count { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--ok-grey-tint); font: 700 13px var(--ok-bold); color: var(--ok-navy); text-align: center; }
.ok-tab[aria-selected="true"] .ok-tab__count { background: var(--ok-navy); color: var(--ok-white); }
/* CD review 16 Oct 2026: a clicked tab or button kept a focus ring (the tab bar clips it to two side lines).
   The ring is for keyboard use only, so a mouse click shows the underline alone. */
.ok-tab:focus:not(:focus-visible), .ok-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.pt .ok-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ok-orange); border-radius: 6px 6px 0 0; }

/* ---------- Section (3) ---------- */
.ok-sections { display: grid; gap: 12px; padding: 16px 20px; }
.ok-section { background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 14px; overflow: clip; }
.ok-section > summary { list-style: none; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 14px;
  min-height: 56px; padding: 10px 16px; cursor: pointer; }
.ok-section > summary::-webkit-details-marker { display: none; }
.ok-section > summary:hover { background: #FAFCFD; }
.ok-section__title { font: 700 17px/1.25 var(--ok-bold); color: var(--ok-navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-section__chev { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-grey-tint); transition: transform .2s; }
.ok-section__chev::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ok-navy); border-bottom: 2px solid var(--ok-navy); transform: translateY(-2px) rotate(45deg); }
.ok-section[open] > summary .ok-section__chev { transform: rotate(180deg); }
.ok-section[open] > summary { border-bottom: 1px solid var(--ok-line); }
.ok-progress { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ok-muted); white-space: nowrap; }
.ok-progress__bar { width: 110px; height: 8px; border-radius: 999px; background: #E3EBEE; overflow: hidden; }
.ok-progress__bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--ok-blue); border-radius: inherit; }
.ok-section[data-state="empty"] .ok-progress__bar > span { background: var(--ok-grey); }
.ok-section[data-state="complete"] .ok-progress__bar > span { background: var(--ok-green); }
.ok-section[data-state="attention"] .ok-progress__bar > span { background: var(--ok-orange); }
.ok-section[data-state="attention"] { border-color: var(--ok-orange); }
.ok-section__hide { display: flex; justify-content: flex-end; padding: 2px 8px; }
.ok-section__hide:last-child { border-top: 1px solid var(--ok-line); }

/* ---------- Question row (4) ---------- */
.ok-q { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "label" "answer" "follow";
  column-gap: 24px; row-gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--ok-line); align-items: start; background: var(--ok-white); }
.ok-section__body > .ok-q:first-child, .ok-section__hide + .ok-q { border-top: 0; }
.ok-q--review { grid-template-columns: minmax(0,1fr) fit-content(320px); grid-template-areas: "label review" "answer review" "follow follow"; }
.ok-q__label { grid-area: label; display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ok-q__text { font-weight: 600; color: var(--ok-navy); overflow-wrap: anywhere; }
.ok-req { color: var(--ok-red-ink); font-weight: 700; margin-left: 2px; }
.ok-q__answer { grid-area: answer; display: grid; gap: 8px; justify-items: start; min-width: 0; }
/* A run of loose tick boxes straight inside an answer is laid out in columns, like .ok-ticks */
.ok-q__answer:has(> .ok-tick) { grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 30px) / 4)), 1fr)); column-gap: 10px; row-gap: 2px; justify-items: stretch; }
.ok-q__answer:has(> .ok-tick) > :not(.ok-tick) { grid-column: 1 / -1; }
.ok-q__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; }
.ok-q__review { grid-area: review; }
.ok-q__follow { grid-area: follow; }
.ok-q__value { padding: 10px 0; color: var(--ok-ink); }
.ok-q__value--readonly { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ok-grey-tint); }
.ok-q__value--readonly::before { content: ""; width: 12px; height: 14px; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ok-q__hint { font-size: 14px; color: var(--ok-muted); margin: 0; }
.ok-q__saved { display: none; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ok-green-ink); }
.ok-q__saved::before { content: "✓"; }
.ok-q[data-state="saved"] .ok-q__saved { display: inline-flex; }
.ok-q__error { display: none; margin: 0; font-size: 14px; font-weight: 600; color: var(--ok-red-ink); align-items: center; gap: 6px; }
.ok-q__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-red); color: #fff; font-size: 12px; }
.ok-q[data-state="invalid"] .ok-q__error { display: inline-flex; }

/* Inputs */
.ok-input, .ok-select, .ok-textarea { font: 400 16px var(--ok-font); color: var(--ok-ink); background: var(--ok-white); min-height: 44px;
  padding: 9px 12px; border: 1.5px solid var(--ok-field); border-radius: 10px; max-width: 100%; }
.ok-input:hover, .ok-select:hover, .ok-textarea:hover { border-color: var(--ok-navy); }
.ok-input:focus-visible, .ok-select:focus-visible, .ok-textarea:focus-visible { border-color: var(--ok-navy); }
.ok-input, .ok-select { width: min(100%, 36ch); }   /* default when no size class is given */
.ok-input--s { width: min(100%, 18ch); } .ok-input--m { width: min(100%, 36ch); } .ok-input--l { width: min(100%, 72ch); }
.ok-input--num { width: min(100%, 14ch); text-align: right; } .ok-input--date { width: min(100%, 13rem); } .ok-input--url { width: min(100%, 52ch); }
.ok-textarea { max-width: 72ch; }
.ok-textarea { width: 100%; min-height: 88px; resize: vertical; }
.ok-input[aria-invalid="true"], .ok-select[aria-invalid="true"], .ok-textarea[aria-invalid="true"] { border-color: var(--ok-red); border-width: 2px; background: #FFFBFA; }
.ok-input::placeholder, .ok-textarea::placeholder { color: #6E7E86; }
.ok-unit { display: inline-flex; align-items: center; gap: 6px; } .ok-unit > span { color: var(--ok-muted); font-size: 15px; }

/* Help popover */
.ok-help { position: relative; display: inline-flex; flex: none; margin-top: -4px; }
.ok-help__btn { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ok-link); background: var(--ok-white);
  color: var(--ok-link); font: 700 14px var(--ok-bold); cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.ok-help__btn::after { content: ""; position: absolute; inset: -8px; }
.ok-help__btn:hover { background: var(--ok-link); color: var(--ok-white); }
.ok-help__pop { display: none; position: absolute; left: -8px; top: calc(100% + 8px); z-index: 25; width: min(320px, 78vw); padding: 12px 14px;
  background: var(--ok-navy); color: var(--ok-white); border-radius: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 12px 28px rgba(16,48,63,.25); }
.ok-help__pop a { color: #BFE6F5; } .ok-help__pop a:hover { color: #FFFFFF; }
.ok-help:hover .ok-help__pop, .ok-help:focus-within .ok-help__pop, .ok-help.is-open .ok-help__pop { display: block; }

/* Pre-filled badge */
.ok-prefill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ok-muted); }
.ok-prefill__src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ok-blue-tint); color: var(--ok-navy); font-weight: 600; }
.ok-prefill__src::before { content: "↙"; }
.ok-prefill[data-state="confirmed"] .ok-prefill__src { background: var(--ok-green-tint); color: var(--ok-green-ink); }
.ok-prefill[data-state="confirmed"] .ok-prefill__src::before { content: "✓"; }
.ok-prefill[data-state="edited"] .ok-prefill__src { background: var(--ok-orange-tint); color: var(--ok-orange-ink); }
.ok-prefill[data-state="edited"] .ok-prefill__src::before { content: "✎"; }

/* ---------- Yes / No (5) ---------- */
.ok-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ok-field); border-radius: 12px; overflow: hidden; background: var(--ok-white); max-width: 100%; }
.ok-seg__opt { position: relative; display: flex; }
.ok-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ok-seg__opt > span { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 18px; font: 600 15px var(--ok-font); color: var(--ok-navy); }
.ok-seg__opt + .ok-seg__opt > span { border-left: 1.5px solid var(--ok-field); }
.ok-seg__opt:hover > span { background: var(--ok-blue-tint); }
.ok-seg__opt input:checked + span { background: var(--ok-navy); color: var(--ok-white); font-family: var(--ok-bold); font-weight: 700; }
.ok-seg__opt input:checked + span::before { content: "✓"; }
.ok-seg__opt input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--ok-orange); }
.ok-seg__opt input:disabled { cursor: not-allowed; }
.ok-seg__opt input:disabled + span { color: #6B7A81; background: var(--ok-grey-tint); }
.ok-seg__opt input:disabled:checked + span { background: #5C6E77; color: #fff; }

/* ---------- Follow-up and notices (6) ---------- */
.ok-follow { position: relative; margin: 2px 0 4px 10px; padding: 4px 0 4px 14px; display: grid; gap: 0; container: okfollow / inline-size; }
.ok-follow::before { content: ""; position: absolute; left: 0; top: -6px; bottom: 14px; width: 12px; border-left: 2px dotted var(--ok-field); border-bottom: 2px dotted var(--ok-field); border-bottom-left-radius: 8px; }
.ok-follow > .ok-q { padding: 6px 0 6px 6px; border-top: 0; background: transparent; }
.ok-follow > .ok-q .ok-q__text { font-weight: 400; }
@container okfollow (max-width: 560px) {
  .ok-follow > .ok-q { grid-template-columns: minmax(0,1fr); grid-template-areas: "label" "answer" "follow"; }
  .ok-follow > .ok-q .ok-q__label { padding-top: 0; }
}
.ok-notice { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; max-width: 72ch; }
.ok-notice p { margin: 0; }
.ok-notice::before { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font: 700 13px var(--ok-bold); margin-top: 1px; }
.ok-notice--info { background: var(--ok-blue-tint); color: var(--ok-ink); } .ok-notice--info::before { content: "i"; background: var(--ok-link); color: #fff; }
.ok-notice--warning { background: var(--ok-orange-tint); color: #4A2C00; } .ok-notice--warning::before { content: "!"; background: var(--ok-orange); color: var(--ok-navy); }
.ok-notice--liability { background: var(--ok-navy); color: var(--ok-white); padding: 14px 16px; border: 3px solid var(--ok-orange); }
.ok-notice--liability::before { content: "!"; background: var(--ok-orange); color: var(--ok-navy); }
.ok-notice--liability strong { display: block; margin-bottom: 2px; }
.ok-notice--liability a { color: #FFD08A; } .ok-notice--liability a:hover { color: #FFFFFF; }

/* ---------- Tick lists (7) ---------- */
.ok-cats { display: grid; gap: 8px; width: 100%; }
.ok-cat { border: 1.5px solid var(--ok-line); border-radius: 12px; background: var(--ok-white); }
.ok-cat > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; cursor: pointer; }
.ok-cat > summary::-webkit-details-marker { display: none; }
.ok-cat > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ok-navy); border-bottom: 2px solid var(--ok-navy); transform: rotate(-45deg); transition: transform .2s; }
.ok-cat[open] > summary::before { transform: rotate(45deg); }
.ok-cat[open] { border-color: var(--ok-navy); }
.ok-cat__name { font: 700 15px var(--ok-bold); color: var(--ok-navy); }
.ok-cat__count { margin-left: auto; font-size: 14px; color: var(--ok-muted); }
.ok-cat__count[data-count]:not([data-count="0"]) { color: var(--ok-green-ink); font-weight: 700; }
.ok-ticks { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 30px) / 4)), 1fr)); gap: 2px 10px; width: 100%; }
.ok-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.ok-tick:hover { background: var(--ok-blue-tint); }
.ok-tick input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ok-navy); cursor: pointer; }
.ok-ticks--readonly .ok-tick { cursor: default; } .ok-ticks--readonly .ok-tick:hover { background: none; }
.ok-ticked { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ok-ticked li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ok-green-tint); color: var(--ok-green-ink); font-weight: 600; font-size: 14px; }
.ok-ticked li::before { content: "✓"; }

/* ---------- Upload (8) ---------- */
.ok-upload { display: grid; gap: 8px; width: 100%; container: okup / inline-size; }
.ok-drop { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 2px dashed var(--ok-field);
  border-radius: 12px; background: #FAFCFD; color: var(--ok-muted); font-size: 15px; }
.ok-drop:hover, .ok-drop.is-dragover { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.ok-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ok-drop:focus-within { box-shadow: var(--ok-focus); }
.ok-file { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "icon main actions" "icon expiry expiry";
  gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: var(--ok-white); }
.ok-file__icon { grid-area: icon; width: 36px; height: 44px; border-radius: 6px; background: var(--ok-blue-tint); color: var(--ok-link); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 700 10px var(--ok-bold); align-self: start; }
.ok-file__main { grid-area: main; min-width: 0; display: grid; gap: 2px; }
.ok-file__name { font-weight: 700; color: var(--ok-navy); overflow-wrap: anywhere; }
.ok-file__meta { font-size: 13px; color: var(--ok-muted); }
.ok-file__actions { grid-area: actions; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.ok-file__expiry { grid-area: expiry; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.ok-file__bar { height: 6px; border-radius: 999px; background: #E3EBEE; overflow: hidden; margin-top: 4px; }
.ok-file__bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--ok-blue); }
.ok-file[data-state="expiring"] { border-color: var(--ok-orange); background: #FFFCF6; }
.ok-file[data-state="expired"], .ok-file[data-state="rejected"] { border-color: var(--ok-red); background: #FFFBFA; }
.ok-file__reason { grid-column: 2 / -1; margin: 0; font-size: 14px; color: var(--ok-red-ink); font-weight: 600; }
@container okup (max-width: 420px) {
  .ok-file { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "icon main" "actions actions" "expiry expiry"; }
  .ok-file__actions { justify-content: flex-start; }
}
.ok-same { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }

/* ---------- Repeating cards (9) ---------- */
.ok-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; width: 100%; }
.ok-card { display: grid; gap: 10px; align-content: start; padding: 12px 14px 14px; border: 1.5px solid var(--ok-line); border-radius: 14px; background: var(--ok-white); }
.ok-card--main { border-color: var(--ok-green); box-shadow: inset 0 0 0 1px var(--ok-green); }
.ok-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ok-card__title { margin: 0; font: 700 15px var(--ok-bold); color: var(--ok-navy); }
.ok-card__main { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ok-card__main input { width: 20px; height: 20px; margin: 0; accent-color: var(--ok-green-ink); }
.ok-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 10px; }
.ok-field { display: grid; gap: 3px; font-size: 13px; font-weight: 600; color: var(--ok-muted); min-width: 0; }
.ok-field--wide { grid-column: 1 / -1; }
.ok-field .ok-input, .ok-field .ok-select { width: 100%; }
.ok-card--add { place-content: center; justify-items: center; min-height: 120px; border: 2px dashed var(--ok-field); background: #FAFCFD; color: var(--ok-navy); font: 700 15px var(--ok-bold); cursor: pointer; }
.ok-card--add:hover { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.ok-card--add::before { content: "+"; font-size: 26px; line-height: 1; }

/* ---------- Address entry (10) ---------- */
.ok-addr { display: grid; gap: 8px; width: 100%; max-width: 520px; }
.ok-addr__find { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ok-addr__results { list-style: none; margin: 0; padding: 4px; border: 1.5px solid var(--ok-navy); border-radius: 12px; background: var(--ok-white); max-height: 240px; overflow: auto; }
.ok-addr__results li { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.ok-addr__results li:hover, .ok-addr__results li[aria-selected="true"] { background: var(--ok-green-tint); box-shadow: inset 0 0 0 2px var(--ok-link); }
.ok-addr__links { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; }
.ok-addr__done { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ok-green-tint); }
.ok-addr__done address { font-style: normal; line-height: 1.5; }

/* ---------- Review controls (11) ---------- */
.ok-review { display: grid; gap: 6px; justify-items: end; max-width: 320px; }
.ok-review__btns { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ok-review__btn { min-height: 36px; padding: 5px 10px; border-radius: 8px; border: 1.5px solid var(--ok-field); background: var(--ok-white);
  font: 600 13px var(--ok-font); color: var(--ok-navy); cursor: pointer; position: relative; white-space: nowrap; }
.ok-review__btn::after { content: ""; position: absolute; inset: -4px -1px; }
.ok-review__btn:hover { border-color: var(--ok-navy); }
.ok-review__btn[aria-pressed="true"][data-decision="approve"] { background: var(--ok-green-tint); border-color: var(--ok-green-ink); color: var(--ok-green-ink); }
.ok-review__btn[aria-pressed="true"][data-decision="waive"] { background: var(--ok-white); border-color: var(--ok-green-ink); color: var(--ok-green-ink); border-style: dashed; }
.ok-review__btn[aria-pressed="true"][data-decision="info"] { background: var(--ok-orange-tint); border-color: var(--ok-orange-ink); color: var(--ok-orange-ink); }
.ok-review__btn[aria-pressed="true"]::before { content: "✓ "; }
.ok-review__note { display: grid; gap: 6px; width: min(300px, 100%); justify-items: end; }
.ok-review__note .ok-textarea { min-height: 64px; font-size: 15px; }
.ok-review__done { margin: 0; font-size: 13px; color: var(--ok-muted); text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; }
.ok-review__done q { color: var(--ok-ink); }

/* ---------- Staff-only (14) ---------- */
.ok-staff { position: relative; border: 2px dashed var(--ok-navy); border-radius: 14px; padding: 34px 6px 6px;
  background: repeating-linear-gradient(135deg, #EEF2F4 0 10px, #E1E8EB 10px 20px); }
.ok-staff__tag { position: absolute; left: -2px; top: -2px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px;
  background: var(--ok-navy); color: var(--ok-white); font: 700 12px/1.2 var(--ok-bold); letter-spacing: .06em; text-transform: uppercase; border-radius: 12px 0 10px 0; }
.ok-staff__tag::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ok-staff > .ok-q { border-radius: 10px; border-top: 0; }
.ok-staff > .ok-q + .ok-q { margin-top: 4px; }
.ok-section--staff { border: 2px dashed var(--ok-navy); background: repeating-linear-gradient(135deg, #EEF2F4 0 10px, #E1E8EB 10px 20px); }
.ok-section--staff > summary { background: rgba(255,255,255,.7); }
.ok-section--staff .ok-section__body { padding: 6px; display: grid; gap: 4px; }
.ok-section--staff .ok-section__body > .ok-q { border-radius: 10px; border-top: 0; }
.ok-section--staff .ok-section__hide { background: rgba(255,255,255,.7); border-radius: 8px; border-top: 0; }

/* ---------- Documents issued (15) ---------- */
.ok-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.ok-doc { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto; gap: 6px 14px; align-items: center;
  padding: 10px 14px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: var(--ok-white); font-size: 15px; }
.ok-doc__name { font-weight: 700; color: var(--ok-navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-doc__date { color: var(--ok-muted); font-size: 14px; } .ok-doc__date b { display: block; font: 600 12px var(--ok-font); text-transform: uppercase; letter-spacing: .04em; color: var(--ok-muted); }

/* ---------- Operatives (17) ---------- */
.ok-ops { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 14px; overflow: hidden; font-size: 15px; }
.ok-ops th { text-align: left; font: 700 13px var(--ok-bold); color: var(--ok-muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; background: #FAFCFD; border-bottom: 1px solid var(--ok-line); }
.ok-ops td { padding: 10px 14px; border-top: 1px solid var(--ok-line); vertical-align: middle; }
.ok-ops tbody tr:first-child td { border-top: 0; }
.ok-ops__name a { font-weight: 700; color: var(--ok-navy); }
.ok-ops__status { display: inline-flex; align-items: center; gap: 8px; }
.ok-ops__out { font: 700 15px var(--ok-bold); }
.ok-ops__out[data-count="0"] { color: var(--ok-green-ink); }
.ok-ops-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Page states (18) ---------- */
.ok-skel { display: grid; gap: 10px; padding: 16px; background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 14px; }
.ok-skel span { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #EDF2F4 0%, #F7FAFB 50%, #EDF2F4 100%); background-size: 200% 100%; animation: ok-shimmer 1.4s infinite linear; }
.ok-skel span:nth-child(odd) { width: 70%; } .ok-skel span:nth-child(3n) { width: 45%; }
@keyframes ok-shimmer { to { background-position: -200% 0; } }
.ok-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 32px 20px; background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 14px; }
.ok-empty__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-green-tint); color: var(--ok-green-ink); display: flex; align-items: center; justify-content: center; font: 700 28px var(--ok-bold); }
.ok-empty h2 { margin: 0; font-size: 20px; color: var(--ok-navy); } .ok-empty p { margin: 0; color: var(--ok-muted); max-width: 44ch; }
.ok-toast { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: min(460px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--ok-navy); color: var(--ok-white); box-shadow: 0 14px 34px rgba(16,48,63,.3); font-size: 15px; }
.ok-toast::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-orange); color: var(--ok-navy); font: 700 14px var(--ok-bold); flex: none; }
.ok-toast .ok-btn--quiet { color: #FFD08A; } .ok-toast .ok-btn--quiet:hover { color: #FFFFFF; }
.ok-signedout { display: grid; gap: 10px; justify-items: start; max-width: 460px; padding: 22px; background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 14px; }
.ok-signedout h2 { margin: 0; font-size: 20px; color: var(--ok-navy); } .ok-signedout p { margin: 0; color: var(--ok-muted); }

/* ---------- Phone (below 640 px of page width) ---------- */
@container ok (max-width: 640px) {
  .ok-topbar { padding: 8px 12px; gap: 8px; }
  .ok-topbar__id { flex: 1 1 100%; }
  .ok-topbar__save { flex: 1 1 auto; }
  .ok-topbar > .ok-btn--primary, .ok-topbar > .ok-btn--secondary { flex: 1 1 100%; }
  .ok-why { left: 8px; right: 8px; width: auto; }
  .ok-tabs { padding: 0 8px; }
  .ok-sections { padding: 10px 8px; }
  .ok-section > summary { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "title chev" "progress progress"; gap: 6px 10px; }
  .ok-section__title { grid-area: title; } .ok-section__chev { grid-area: chev; } .ok-progress { grid-area: progress; }
  .ok-progress__bar { flex: 1; width: auto; }
  .ok-q { padding: 10px 12px 12px; }
  .ok-q--review { grid-template-columns: minmax(0,1fr); grid-template-areas: "label" "answer" "review" "follow"; }
  .ok-input, .ok-select, .ok-input--m, .ok-input--l, .ok-input--url { width: 100%; }
  .ok-review { justify-items: start; max-width: none; } .ok-review__btns, .ok-review__done { justify-content: flex-start; text-align: left; } .ok-review__note { justify-items: start; width: 100%; }
  .ok-follow { margin-left: 4px; }
  .ok-follow > .ok-q { grid-template-columns: minmax(0,1fr); }
  .ok-file { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "icon main" "actions actions" "expiry expiry"; }
  .ok-file__actions { justify-content: flex-start; }
  .ok-doc { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .ok-doc__name { grid-column: 1 / -1; } .ok-doc > :last-child { grid-column: 1 / -1; }
  .ok-ops thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ok-ops, .ok-ops tbody, .ok-ops tr, .ok-ops td { display: block; width: 100%; }
  .ok-ops { border: 0; background: none; }
  .ok-ops tr { background: var(--ok-white); border: 1px solid var(--ok-line); border-radius: 12px; padding: 6px 0; margin-bottom: 8px; }
  .ok-ops td { display: flex; justify-content: space-between; gap: 10px; border-top: 0; padding: 6px 12px; }
  .ok-ops td::before { content: attr(data-label); font-size: 13px; color: var(--ok-muted); font-weight: 600; }
  .ok-toast { left: 8px; right: 8px; bottom: 8px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ok-page *, .ok-page *::before, .ok-page *::after { animation: none !important; transition: none !important; }
}

/* ===================== Part 2 · Portal shell and components (pt-*) ===================== */
.pt { margin: 0; font-family: var(--ok-font); font-size: 16px; line-height: 1.5; color: var(--ok-ink); background: var(--ok-bg);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.pt-app { container: pt / inline-size; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }
.pt a { color: var(--ok-link); text-underline-offset: 2px; }
.pt a:hover { color: var(--ok-navy); }
.pt :focus-visible { outline: 3px solid var(--ok-orange); outline-offset: 2px; box-shadow: none; }
.pt h1, .pt h2, .pt h3, .pt h4 { font-family: var(--ok-bold); color: var(--ok-navy); line-height: 1.2; text-wrap: balance; }
.pt p { text-wrap: pretty; }
.pt ul li::marker { color: var(--ok-orange); }
.pt-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--ok-navy); color: #fff !important; font-weight: 700; }
.pt-skip:focus { left: 12px; }

/* Header (CRM: logo, page title, Menu, person, Sign out. Installer portal: logo, company, Sign out) */
.pt-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ok-line); }
.pt-header__in { position: relative; max-width: var(--pt-wide); margin: 0 auto; min-height: var(--pt-header-h); padding: 8px 24px; display: flex; align-items: center; gap: 10px 18px; }
.pt-logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.pt-logo img { display: block; height: 40px; width: auto; }
.pt-header .pt-header__title { flex: 1 1 auto; white-space: nowrap; }
.pt-header__title { margin: 0; padding-left: 18px; border-left: 1px solid var(--ok-line); font: 700 17px/1.2 var(--ok-bold); color: var(--ok-navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-header__end { margin-left: auto; display: flex; align-items: center; gap: 8px 14px; flex: none; }
.pt-user { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ok-muted); white-space: nowrap; }
.pt-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ok-green-tint); color: var(--ok-green-ink); display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--ok-bold); }

/* Menu drop-down: details.pt-menu */
.pt-menu { position: static; }
.pt-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--ok-navy); border-radius: 999px;
  font: 700 15px var(--ok-bold); color: var(--ok-navy); cursor: pointer; background: #fff; }
.pt-menu > summary::-webkit-details-marker { display: none; }
.pt-menu > summary:hover, .pt-menu[open] > summary { background: var(--ok-navy); color: #fff; }
.pt-menu__icon { width: 18px; height: 18px; }
.pt-menu__panel { position: absolute; right: 24px; top: calc(100% + 4px); z-index: 60; width: min(760px, calc(100% - 48px)); max-height: calc(100vh - 100px); overflow: auto;
  background: #fff; border: 1px solid var(--ok-line); border-radius: 18px; box-shadow: 0 18px 44px rgba(16,48,63,.18); padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; }
.pt-menu__group { display: grid; gap: 4px; align-content: start; }
.pt-menu__heading { margin: 0 0 2px; padding: 0 10px; font: 700 12px var(--ok-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--ok-green-ink); }
.pt-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-menu__item { display: grid; gap: 1px; min-height: 44px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.pt-menu__item:hover { background: var(--ok-blue-tint); }
.pt-menu__item[aria-current="page"] { background: var(--ok-green-tint); }
.pt-menu__name { font: 700 15px var(--ok-bold); color: var(--ok-navy); }
.pt-menu__desc { font-size: 13px; line-height: 1.35; color: var(--ok-muted); }

/* Page body */
.pt-main { width: 100%; max-width: var(--pt-read); margin: 0 auto; padding: 24px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; flex: 1; }
.pt-main--wide { max-width: var(--pt-wide); }
.pt-main--full { max-width: none; padding: 0; gap: 0; }
.pt-titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.pt-titlebar__text { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.pt-title { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.pt-lede { margin: 0; color: var(--ok-muted); max-width: 70ch; }
.pt-titlebar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-footer { border-top: 1px solid var(--ok-line); background: #fff; }
.pt-footer__in { max-width: var(--pt-wide); margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ok-muted); }
.pt-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.pt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.pt-split__aside { position: sticky; top: calc(var(--pt-header-h) + 16px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.pt-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pt-row--end { justify-content: flex-end; }
.pt-h2 { margin: 0; font-size: 20px; }
.pt-muted, .pt .pt-muted { color: var(--ok-muted); }
.pt-small { font-size: 14px; }

/* Buttons: extra variants on the kit's .ok-btn */
.ok-btn--danger { background: var(--ok-red); color: #fff; }
.ok-btn--danger:hover { background: var(--ok-red-ink); color: #fff; }
.ok-btn--icon { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.ok-btn--icon.ok-btn--small { width: 36px; min-width: 36px; }
.ok-btn.is-busy { cursor: progress; }
.ok-btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ok-spin .8s linear infinite; }
.pt a.ok-btn { text-decoration: none; }
.pt a.ok-btn--primary, .pt a.ok-btn--secondary, .pt a.ok-btn--download { color: var(--ok-navy); }
.pt a.ok-btn--quiet { text-decoration: underline; }

/* Forms */
.pt-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px 16px; }
.pt-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pt-field--wide { grid-column: 1 / -1; }
.pt-field__label { font: 600 15px var(--ok-font); color: var(--ok-navy); }
.pt-field__label .ok-req { margin-left: 2px; }
.pt-field__hint { margin: 0; font-size: 14px; color: var(--ok-muted); }
.pt-field__error { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ok-red-ink); }
.pt-field__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-red); color: #fff; font-size: 12px; flex: none; }
.pt-field .ok-input, .pt-field .ok-select, .pt-field .ok-textarea { width: 100%; max-width: none; }
.pt-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; min-width: 0; }
.pt-fieldset > legend { padding: 0; margin-bottom: 4px; font: 600 15px var(--ok-font); color: var(--ok-navy); }
.pt-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; line-height: 1.4; }
.pt-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ok-navy); cursor: pointer; }
.pt-check--box { padding: 10px 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-check--box:has(input:checked) { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.pt-value { display: grid; gap: 2px; }
.pt-value__label { font-size: 13px; font-weight: 600; color: var(--ok-muted); }
.pt-value__text { color: var(--ok-ink); overflow-wrap: anywhere; }
.pt-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 15px; }
.pt-dl dt { color: var(--ok-muted); } .pt-dl dd { margin: 0; color: var(--ok-ink); overflow-wrap: anywhere; }

/* Search box with results (address and company look-ups) */
.pt-search { position: relative; display: grid; gap: 6px; width: 100%; max-width: 560px; }
.pt-search__box { position: relative; }
.pt-search__box .ok-input { width: 100%; max-width: none; padding-left: 42px; }
.pt-search__box::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--ok-muted); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.pt-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow: auto;
  background: #fff; border: 1.5px solid var(--ok-navy); border-radius: 12px; box-shadow: 0 12px 28px rgba(16,48,63,.18); }
.pt-search__results[hidden] { display: none; }
.pt-search__results > li { display: grid; gap: 1px; min-height: 44px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.pt-search__results > li:hover, .pt-search__results > li[aria-selected="true"] { background: var(--ok-green-tint); box-shadow: inset 0 0 0 2px var(--ok-link); }
.pt-search__results small { color: var(--ok-muted); font-size: 13px; }
.pt-search__status { font-size: 14px; color: var(--ok-muted); min-height: 1.2em; margin: 0; }
.pt-search--static .pt-search__results { position: static; box-shadow: none; }

/* Cards */
.pt-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; padding: 16px 18px 18px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow); }
.pt-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pt-card__title { margin: 0 auto 0 0; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-card__meta { margin: 0; font-size: 14px; color: var(--ok-muted); }
.pt-card--flush { padding: 0; overflow: clip; }
.pt-card--flush > .pt-card__head { padding: 14px 18px 0; }
a.pt-card--link, button.pt-card--link { text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.pt-card--link:hover, button.pt-card--link:hover { transform: translateY(-2px); box-shadow: var(--pt-shadow-lift); border-color: #BCD3DC; color: inherit; }
.pt-card--selected { border-color: var(--ok-navy); box-shadow: inset 0 0 0 1px var(--ok-navy), var(--pt-shadow); }
.pt-stat { display: grid; gap: 2px; align-content: start; padding: 16px 18px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow); min-width: 0; }
.pt-stat__num { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--ok-bold); color: var(--ok-navy); font-variant-numeric: tabular-nums; }
.pt-stat__label { font-size: 15px; color: var(--ok-muted); }
.pt-stat__note { margin-top: 6px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.pt-stat__note[data-trend="up"] { color: var(--ok-green-ink); } .pt-stat__note[data-trend="up"]::before { content: "▲"; font-size: 11px; }
.pt-stat__note[data-trend="down"] { color: var(--ok-red-ink); } .pt-stat__note[data-trend="down"]::before { content: "▼"; font-size: 11px; }

/* Tiles: the landing page's section buttons */
.pt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pt-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; min-height: 64px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--ok-line); border-radius: 12px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.pt-tile:hover { border-color: var(--ok-navy); box-shadow: var(--pt-shadow-lift); }
/* "New this week" / "Updated this week" (crm-nav.js badgeFor, 18 Oct 2026). Company orange and green, dark text for contrast. */
.pt-tile--badged { position: relative; padding-top: 22px; }
/* New is green and Updated orange (Adrian, 18 Oct 2026); the page status sits beside them: Under construction
   yellow with the hard hat, Ready for testing blue. */
.pt-tile__badges { position: absolute; top: -1px; right: 12px; display: flex; gap: 4px; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: flex-end; }
.pt-tile__badges:empty { display: none; }
.pt-tile__badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 0 0 6px 6px; background: #F08D00; color: #2A1700; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .01em; white-space: nowrap; }
.pt-tile__badge.is-new { background: #7EBB2A; color: #17260A; }
.pt-tile__badge--st[data-s=building] { background: none; padding: 1px 2px 0; }
.pt-tile__badge--st[data-s=building] svg { width: 20px; height: 20px; display: block; }
.pt-tile__badge--st[data-s=testing] { background: #45B1D7; color: #08303F; }
/* Latest release notes on the home page (crm-nav.js releaseNotes). */
.pt-relnotes { margin: 0 0 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-relnotes > summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; list-style: none; }
.pt-relnotes > summary::-webkit-details-marker { display: none; }
.pt-relnotes > summary::before { content: '\25B8'; color: #F08D00; margin-right: 2px; }
.pt-relnotes[open] > summary::before { content: '\25BE'; }
.pt-relnotes__t { font-weight: 700; }
.pt-relnotes__when { font-size: 13px; color: var(--ok-muted, #5B6F78); }
.pt-relnotes__list { max-height: 280px; overflow-y: auto; padding: 0 14px 10px; border-top: 1px solid var(--ok-line); }
.pt-relnotes__item { padding: 10px 0; border-bottom: 1px solid #EEF3F5; }
.pt-relnotes__item:last-of-type { border-bottom: 0; }
.pt-relnotes__head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.pt-relnotes__date { font-size: 12.5px; font-weight: 700; color: #F08D00; white-space: nowrap; }
.pt-relnotes__pts { margin: 6px 0 0; padding-left: 18px; }
.pt-relnotes__pts li { margin: 2px 0; }
.pt-relnotes__pts li::marker { color: #F08D00; }
.pt-tile__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-blue-tint); color: var(--ok-link); }
.pt-tile__icon svg { width: 20px; height: 20px; }
.pt-tile[data-tone="orange"] .pt-tile__icon { background: var(--ok-orange-tint); color: var(--ok-orange-ink); }
.pt-tile[data-tone="green"] .pt-tile__icon { background: var(--ok-green-tint); color: var(--ok-green-ink); }
.pt-tile__name { font: 700 16px var(--ok-bold); color: var(--ok-navy); }
.pt-tile__desc { font-size: 14px; color: var(--ok-muted); line-height: 1.35; }

/* Tables */
.pt-table-wrap { overflow: auto; max-width: 100%; max-height: var(--pt-table-h, none); background: #fff; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); -webkit-overflow-scrolling: touch; }
.pt-table-wrap:focus-visible { outline-offset: -3px; }
.pt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.pt-table caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font: 700 16px var(--ok-bold); color: var(--ok-navy); }
.pt-table th, .pt-table td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ok-line); }
.pt-table thead th { position: sticky; top: 0; z-index: 2; background: #F4F8F9; font: 700 13px var(--ok-bold); letter-spacing: .03em; color: var(--ok-muted); white-space: nowrap; }
.pt-table tbody tr:last-child > * { border-bottom: 0; }
.pt-table--zebra tbody tr:nth-child(even) > * { background: #FAFCFD; }
.pt-table tbody tr:hover > * { background: #F2F8FB; }
.pt-table tbody tr[aria-selected="true"] > * { background: var(--ok-blue-tint); }
.pt-table tbody tr[aria-selected="true"] > :first-child { box-shadow: inset 4px 0 0 var(--ok-link); font-weight: 700; }
.pt-table tbody tr.is-clickable { cursor: pointer; }
.pt-table .pt-num, .pt-table th.pt-num { text-align: right; }
.pt-table th.pt-num .pt-sort { flex-direction: row-reverse; }
.pt-table th[aria-sort] { padding: 0; }
.pt-sort { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pt-sort:hover { color: var(--ok-navy); }
.pt-sort::after { content: "↕"; font-size: 12px; opacity: .55; }
th[aria-sort="ascending"] .pt-sort { color: var(--ok-navy); } th[aria-sort="ascending"] .pt-sort::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .pt-sort { color: var(--ok-navy); } th[aria-sort="descending"] .pt-sort::after { content: "▼"; opacity: 1; }
.pt-table--compact { font-size: 14px; }
.pt-table--compact th, .pt-table--compact td { padding: 6px 10px; }
.pt-table--compact .pt-sort { min-height: 36px; padding: 4px 10px; }
.pt-table__empty td { padding: 28px 16px; text-align: center; color: var(--ok-muted); }
.pt-table__empty strong { display: block; color: var(--ok-navy); margin-bottom: 2px; }
.pt-table td .ok-btn--small { margin: -4px 0; }
.pt-nowrap { white-space: nowrap; }

/* Pills: neutral and operational states, on the kit's .ok-pill */
.ok-pill[data-status="draft"]   { background: var(--ok-grey-tint); color: var(--ok-muted); } .ok-pill[data-status="draft"]::before { content: "✎"; }
.ok-pill[data-status="sent"]    { background: var(--ok-blue-tint); color: var(--ok-navy); } .ok-pill[data-status="sent"]::before { content: "→"; }
.ok-pill[data-status="waiting"] { background: var(--ok-blue-tint); color: var(--ok-navy); } .ok-pill[data-status="waiting"]::before { content: "◷"; }
.ok-pill[data-status="sending"] { background: var(--ok-blue-tint); color: var(--ok-navy); } .ok-pill[data-status="sending"]::before { content: "↑"; }
.ok-pill[data-status="ready"], .ok-pill[data-status="valid"], .ok-pill[data-status="booked"] { background: var(--ok-green-tint); color: var(--ok-green-ink); }
.ok-pill[data-status="ready"]::before, .ok-pill[data-status="valid"]::before, .ok-pill[data-status="booked"]::before { content: "✓"; }
.ok-pill[data-status="warning"] { background: var(--ok-orange-tint); color: var(--ok-orange-ink); } .ok-pill[data-status="warning"]::before { content: "!"; }
.ok-pill[data-status="problem"] { background: var(--ok-red-tint); color: var(--ok-red-ink); } .ok-pill[data-status="problem"]::before { content: "×"; }

/* Filter chips */
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--ok-field); border-radius: 999px; background: #fff;
  font: 600 14px var(--ok-font); color: var(--ok-navy); cursor: pointer; position: relative; white-space: nowrap; }
.pt-chip::after { content: ""; position: absolute; inset: -4px 0; }
.pt-chip:hover { border-color: var(--ok-navy); }
.pt-chip[aria-pressed="true"] { background: var(--ok-navy); border-color: var(--ok-navy); color: #fff; }
.pt-chip[aria-pressed="true"]::before { content: "✓"; }
.pt-chip__count { font: 700 12px var(--ok-bold); padding: 1px 7px; border-radius: 999px; background: var(--ok-grey-tint); color: var(--ok-navy); }
.pt-chip[aria-pressed="true"] .pt-chip__count { background: rgba(255,255,255,.2); color: #fff; }

/* Alerts and toasts */
.pt-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; border: 1.5px solid transparent; }
.pt-alert p { margin: 0; }
.pt-alert__title { display: block; font-family: var(--ok-bold); font-weight: 700; color: inherit; }
.pt-alert::before { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font: 700 13px var(--ok-bold); margin-top: 1px; }
.pt-alert--info    { background: var(--ok-blue-tint); color: var(--ok-ink); }   .pt-alert--info::before { content: "i"; background: var(--ok-link); color: #fff; }
.pt-alert--success { background: var(--ok-green-tint); color: #23400A; }       .pt-alert--success::before { content: "✓"; background: var(--ok-green-ink); color: #fff; }
.pt-alert--warning { background: var(--ok-orange-tint); color: #4A2C00; }      .pt-alert--warning::before { content: "!"; background: var(--ok-orange); color: var(--ok-navy); }
.pt-alert--error   { background: var(--ok-red-tint); color: #5E140C; border-color: #F2B8B0; } .pt-alert--error::before { content: "×"; background: var(--ok-red); color: #fff; }
.ok-toast--success::before { content: "✓"; background: var(--ok-green); color: var(--ok-navy); }
.ok-toast--info::before { content: "i"; background: var(--ok-blue); color: var(--ok-navy); }
.pt-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--ok-line); border-top-color: var(--ok-navy); animation: ok-spin .8s linear infinite; vertical-align: middle; }
.pt-loading { display: inline-flex; align-items: center; gap: 10px; color: var(--ok-muted); font-size: 15px; }

/* Dialogs */
.pt-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--ok-ink);
  box-shadow: 0 24px 60px rgba(16,48,63,.3); font-family: var(--ok-font); }
.pt-dialog--wide { width: min(860px, calc(100vw - 32px)); }
.pt-dialog::backdrop { background: rgba(16,48,63,.45); }
.pt-dialog__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ok-line); position: sticky; top: 0; background: #fff; }
.pt-dialog__title { margin: 0 auto 0 0; font-size: 19px; color: var(--ok-navy); font-family: var(--ok-bold); }
.pt-dialog__body { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pt-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--ok-line); position: sticky; bottom: 0; background: #fff; }
.pt-dialog--inline { position: static; display: block; margin: 0; width: auto; max-width: min(560px, 100%); box-shadow: var(--pt-shadow-lift); border: 1px solid var(--ok-line); }

/* Map layout (property explorer): .pt-map > .pt-map__panel + .pt-map__canvas */
.pt-map { position: relative; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); height: calc(100vh - var(--pt-header-h)); height: calc(100dvh - var(--pt-header-h)); min-height: 480px; }
.pt-map__panel { position: relative; z-index: 5; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: #fff; border-right: 1px solid var(--ok-line); }
.pt-map__panel-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--ok-line); display: grid; gap: 10px; }
.pt-map__panel-body { overflow: auto; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.pt-map__panel-foot { padding: 10px 16px; border-top: 1px solid var(--ok-line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pt-map__toggle { display: none; }
.pt-map__canvas { position: relative; isolation: isolate; z-index: 0; min-width: 0; min-height: 0; background: #DCE9EF; }
.pt-map__canvas > .leaflet-container, .pt-map__canvas > [data-map] { position: absolute; inset: 0; height: 100%; width: 100%; }
/* Leaflet 1.9.4 controls and pop-ups */
.pt .leaflet-container { font-family: var(--ok-font); font-size: 14px; background: #DCE9EF; }
.pt .leaflet-bar { border: 0; border-radius: 12px; box-shadow: 0 6px 18px rgba(16,48,63,.18); overflow: hidden; }
.pt .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font: 700 20px/44px var(--ok-bold); color: var(--ok-navy); border-bottom-color: var(--ok-line); }
.pt .leaflet-bar a:hover { background: var(--ok-blue-tint); color: var(--ok-navy); }
.pt .leaflet-bar a.leaflet-disabled { color: #9AA8AE; background: #F4F6F7; }
.pt .leaflet-control-layers { border: 0; border-radius: 12px; box-shadow: 0 6px 18px rgba(16,48,63,.18); }
.pt .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 14px 34px rgba(16,48,63,.22); color: var(--ok-ink); }
.pt .leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.45; }
.pt .leaflet-popup-content h3 { margin: 0 0 4px; font-size: 15px; }
.pt .leaflet-popup-close-button { width: 32px !important; height: 32px !important; font: 22px/30px var(--ok-font) !important; color: var(--ok-muted) !important; }
.pt .leaflet-control-attribution { font-size: 12px; background: rgba(255,255,255,.85); border-radius: 8px 0 0 0; padding: 2px 8px; }
.pt .leaflet-control-attribution a { color: var(--ok-link); }

/* Long text pages (privacy, terms) */
.pt-doc { max-width: var(--pt-text); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; font-size: 17px; line-height: 1.65; counter-reset: pt-h2; }
.pt-doc p, .pt-doc ul, .pt-doc ol { margin: 0; }
.pt-doc ul, .pt-doc ol { padding-left: 24px; display: grid; gap: 6px; }
.pt-doc h2 { margin: 20px 0 0; font-size: 22px; scroll-margin-top: calc(var(--pt-header-h) + 16px); }
.pt-doc h3 { margin: 8px 0 0; font-size: 18px; }
.pt-doc--numbered h2 { counter-increment: pt-h2; counter-reset: pt-h3; }
.pt-doc--numbered h2::before { content: counter(pt-h2) ". "; color: var(--ok-green-ink); }
.pt-doc--numbered h3 { counter-increment: pt-h3; }
.pt-doc--numbered h3::before { content: counter(pt-h2) "." counter(pt-h3) " "; color: var(--ok-green-ink); }
.pt-toc { padding: 14px 18px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); font-size: 15px; }
.pt-toc h2 { margin: 0 0 8px !important; font-size: 16px; }
.pt-toc h2::before { content: none !important; }
.pt-toc ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; columns: 2 240px; column-gap: 28px; }
.pt-toc ol li { break-inside: avoid; }
.pt-toc a { display: inline-block; padding: 3px 0; }

/* Width-based layout (queries the width of .pt-app, so it also works in demo frames) */
@container pt (max-width: 960px) {
  .pt-split { grid-template-columns: minmax(0, 1fr); }
  .pt-split__aside { position: static; }
}
@container pt (max-width: 760px) {
  .pt-map { grid-template-columns: minmax(0, 1fr); }
  .pt-map__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(16,48,63,.2); transition: transform .25s; }
  .pt-map__panel[data-open="false"] { transform: translateY(calc(100% - 64px)); }
  .pt-map__toggle { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin: -4px auto 0; padding: 4px 16px; border: 0; background: none; font: 700 14px var(--ok-bold); color: var(--ok-navy); cursor: pointer; }
  .pt-map__toggle::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: var(--ok-field); position: absolute; top: 8px; left: 50%; margin-left: -20px; }
  .pt-map__canvas { grid-row: 1; }
}
@container pt (max-width: 400px) {
  .pt-header__title { display: none; }
}
@container pt (max-width: 640px) {
  .pt-header__in { padding: 8px 16px; gap: 8px; }
  .pt-logo img { height: 34px; }
  .pt-header__title { padding-left: 10px; font-size: 15px; }
  .pt-header__end { flex: 0 1 auto; min-width: 0; gap: 6px; }
  .pt-user { display: none; }
  .pt-user__name { display: none; }
  .pt-dialog { max-width: calc(100% - 16px); }
  .pt-menu__label { display: none; }
  .pt-menu > summary { padding: 8px 12px; }
  .pt-menu__panel { position: fixed; left: 8px; right: 8px; top: calc(var(--pt-header-h) + 4px); width: auto; max-height: calc(100dvh - var(--pt-header-h) - 16px); grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .pt-main { padding: 16px 16px 40px; gap: 16px; }
  .pt-main--full { padding: 0; }
  .pt-footer__in { padding: 14px 16px; }
  .pt-card, .pt-stat { padding: 14px; }
  .pt-dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .pt-dl dd { margin-bottom: 8px; }
  .pt-alert { grid-template-columns: auto minmax(0, 1fr); } .pt-alert > :nth-child(2) { grid-column: 2; }
  .pt-doc { font-size: 16px; }
  .pt-titlebar__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pt *, .pt *::before, .pt *::after { animation: none !important; transition: none !important; }
}

/* Print: no header, menu or controls; black on white; tables in full */
@media print {
  .pt { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .pt-header, .pt-footer, .pt-menu, .pt-skip, .ok-toast, .pt-noprint, .pt-titlebar__actions, .pt-map__panel-foot, .pt-chips, .ok-tabs, .ok-btn, .leaflet-control-container { display: none !important; }
  .pt-main { max-width: none; padding: 0; }
  .pt-card, .pt-stat, .pt-table-wrap, .ok-section, .ok-file { box-shadow: none !important; border-color: #888 !important; background: #fff !important; break-inside: avoid; }
  .pt-table-wrap { overflow: visible !important; max-height: none !important; border: 0 !important; }
  .pt-table thead th { position: static; background: #fff !important; color: #000 !important; border-bottom: 1.5pt solid #000; }
  .pt-table tbody tr > * { background: #fff !important; }
  .pt h1, .pt h2, .pt h3, .pt a, .pt-muted, .ok-pill { color: #000 !important; }
  .ok-pill { background: none !important; border: 1px solid #000 !important; }
  .ok-section:not([open]) > :not(summary) { display: block !important; }
  .pt a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ===================== Part 3 · v2.1 additions (7 Oct 2026, from C1's PR #131 list) ===================== */
/* BEGIN v2.1 */
/* Neutral tag pill (a label, not a status) */
.ok-pill[data-status="tag"] { background: #fff; color: var(--ok-navy); border-color: var(--ok-field); font-family: var(--ok-font); font-weight: 600; }
.ok-pill[data-status="tag"]::before { content: none; }

/* Alerts that hold more than one paragraph or a list: use a <div> instead of the <p> */
.pt-alert > div { min-width: 0; }
.pt-alert > div > * { margin: 0; }
.pt-alert > div > * + * { margin-top: 6px; }
.pt-alert ul, .pt-alert ol { padding-left: 20px; display: grid; gap: 2px; }

/* Standalone progress bar */
.pt-progress { display: grid; gap: 6px; min-width: 0; }
.pt-progress__label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ok-muted); }
.pt-progress__label strong { color: var(--ok-navy); font-weight: 700; }
.pt-progress__track { height: 10px; border-radius: 999px; background: #E3EBEE; overflow: hidden; }
.pt-progress__track > span { display: block; height: 100%; width: var(--p, 0%); background: var(--ok-blue); border-radius: inherit; transition: width .3s; }
.pt-progress[data-state="done"] .pt-progress__track > span { background: var(--ok-green); }
.pt-progress[data-state="error"] .pt-progress__track > span { background: var(--ok-red); }
.pt-progress[data-state="busy"] .pt-progress__track > span { width: 40%; animation: pt-indeterminate 1.2s ease-in-out infinite; }
@keyframes pt-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* Numbered step heading */
.pt-step { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; }
.pt-step__num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ok-orange); color: var(--ok-navy); display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--ok-bold); }
.pt-step[data-state="done"] .pt-step__num { background: var(--ok-green-tint); color: var(--ok-green-ink); box-shadow: inset 0 0 0 2px var(--ok-green-ink); }
.pt-step[data-state="done"] .pt-step__num::before { content: "✓"; } .pt-step[data-state="done"] .pt-step__num > * { display: none; }
.pt-step[data-state="todo"] .pt-step__num { background: var(--ok-grey-tint); color: var(--ok-muted); }

/* Narrow centred single-message page */
.pt-main--center { max-width: 560px; align-content: center; min-height: calc(100vh - var(--pt-header-h) - 60px); min-height: calc(100dvh - var(--pt-header-h) - 60px); }
.pt-card--message { justify-items: start; padding: 24px; }
.pt-card--message .pt-card__title { font-size: 22px; }

/* Stats: compact (inside panels) and pressable (a filter) */
.pt-stat--compact { padding: 10px 12px; box-shadow: none; border-radius: var(--pt-radius-s); gap: 0; }
.pt-stat--compact .pt-stat__num { font-size: 22px; }
.pt-stat--compact .pt-stat__label { font-size: 13px; }
button.pt-stat { font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.pt-stat:hover { border-color: var(--ok-navy); }
button.pt-stat[aria-pressed="true"] { border-color: var(--ok-navy); background: var(--ok-blue-tint); box-shadow: inset 0 0 0 1px var(--ok-navy); }
button.pt-stat[aria-pressed="true"] .pt-stat__label::after { content: " ✓"; color: var(--ok-navy); font-weight: 700; }
.pt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 8px; }

/* Removable chip (an applied filter) */
.pt-chip--removable { cursor: default; padding-right: 4px; background: var(--ok-blue-tint); border-color: var(--ok-blue-tint); }
.pt-chip--removable::after { content: none; }
.pt-chip__remove { position: relative; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ok-navy); font: 700 16px/1 var(--ok-bold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pt-chip__remove::after { content: ""; position: absolute; inset: -8px; }
.pt-chip__remove:hover { background: #fff; }

/* Facet list: a filter value with a small bar and a count */
.pt-facets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-facet { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: 400 14px var(--ok-font); color: var(--ok-ink); text-align: left; cursor: pointer; position: relative; }
.pt-facet::after { content: ""; position: absolute; inset: -2px 0; }
.pt-facet:hover { background: var(--ok-blue-tint); }
.pt-facet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-facet__bar { height: 6px; border-radius: 999px; background: #E3EBEE; overflow: hidden; }
.pt-facet__bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--ok-blue); border-radius: inherit; }
.pt-facet__count { font: 700 13px var(--ok-bold); color: var(--ok-muted); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.pt-facet[aria-pressed="true"] { background: var(--ok-navy); color: #fff; }
.pt-facet[aria-pressed="true"] .pt-facet__name::before { content: "✓ "; }
.pt-facet[aria-pressed="true"] .pt-facet__bar { background: rgba(255,255,255,.25); }
.pt-facet[aria-pressed="true"] .pt-facet__bar > span { background: #fff; }
.pt-facet[aria-pressed="true"] .pt-facet__count { color: #fff; }

/* Tick-box list in columns that scrolls; collapsible group with Tick all and a count */
.pt-ticklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 14px; max-height: var(--pt-list-h, 280px); overflow: auto; padding: 4px 12px; border: 1px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-ticklist .pt-check { min-height: 40px; padding: 8px 0; }
.pt-tickgroup { border: 1px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-tickgroup > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; cursor: pointer; }
.pt-tickgroup > summary::-webkit-details-marker { display: none; }
.pt-tickgroup > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ok-navy); border-bottom: 2px solid var(--ok-navy); transform: rotate(-45deg); transition: transform .2s; flex: none; }
.pt-tickgroup[open] > summary::before { transform: rotate(45deg); }
.pt-tickgroup__name { font: 700 15px var(--ok-bold); color: var(--ok-navy); }
.pt-tickgroup__count { margin-left: auto; font-size: 14px; color: var(--ok-muted); white-space: nowrap; }
.pt-tickgroup__count[data-some="true"] { color: var(--ok-green-ink); font-weight: 700; }
.pt-tickgroup__tools { display: flex; gap: 4px 12px; flex-wrap: wrap; padding: 0 14px; }
.pt-tickgroup > .pt-ticklist { border: 0; border-top: 1px solid var(--ok-line); border-radius: 0 0 12px 12px; margin-top: 4px; }

/* Section whose header is a button (for pages that toggle with JavaScript) */
.ok-section__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ok-section__head:hover { background: #FAFCFD; }
.ok-section__head[aria-expanded="true"] { border-bottom: 1px solid var(--ok-line); }
.ok-section__head[aria-expanded="true"] .ok-section__chev { transform: rotate(180deg); }
.ok-section > h2:has(> .ok-section__head), .ok-section > h3:has(> .ok-section__head) { margin: 0; font: inherit; }

/* Table that stacks its cells on a phone (rows with inputs or long names) */
.pt-table--stack td .ok-input, .pt-table--stack td .ok-select { width: 100%; max-width: 320px; }

/* Photo grid and embedded PDF */
.pt-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.pt-photo { display: grid; gap: 6px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: inherit; }
.pt-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--ok-grey-tint); border: 1px solid var(--ok-line); }
.pt-photo:hover img { box-shadow: var(--pt-shadow-lift); }
.pt-photo__cap { font-size: 13px; color: var(--ok-muted); line-height: 1.35; overflow-wrap: anywhere; }
.pt-pdf { display: block; width: 100%; height: min(78vh, 900px); border: 1px solid var(--ok-line); border-radius: var(--pt-radius); background: #fff; }

/* Full-screen overlay for an element that isn't a <dialog> (e.g. the map viewer) */
.pt-overlay { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; }
.pt-overlay[hidden] { display: none; }
.pt-overlay__bar { display: flex; align-items: center; gap: 12px; min-height: var(--pt-header-h); padding: 8px 16px; border-bottom: 1px solid var(--ok-line); background: #fff; }
.pt-overlay__title { margin: 0 auto 0 0; font: 700 17px var(--ok-bold); color: var(--ok-navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-overlay__body { position: relative; isolation: isolate; min-height: 0; overflow: auto; }
.pt-overlay__body > .leaflet-container { position: absolute; inset: 0; }
body:has(.pt-overlay:not([hidden])) { overflow: hidden; }

/* EPC band badges in the register's colours (A is white text; B to G black text, for contrast) */
.pt-epc { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 6px; font: 700 14px/1 var(--ok-bold); color: #000; white-space: nowrap; }
.pt-epc--lg { min-width: 44px; height: 36px; font-size: 20px; border-radius: 8px; }
.pt-epc[data-band="A"] { background: #008054; color: #fff; }
.pt-epc[data-band="B"] { background: #19B459; }
.pt-epc[data-band="C"] { background: #8DCE46; }
.pt-epc[data-band="D"] { background: #FFD500; }
.pt-epc[data-band="E"] { background: #FCAA65; }
.pt-epc[data-band="F"] { background: #EF8023; }
.pt-epc[data-band="G"] { background: #E9153B; }
.pt-epc__score { font-family: var(--ok-font); font-weight: 400; font-size: .85em; margin-left: 6px; }

/* Diary grid: operatives as columns, time slots as rows */
.pt-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--sw, var(--ok-grey)); box-shadow: inset 0 0 0 1px rgba(16,48,63,.25); vertical-align: middle; }
[data-sw="1"] { --sw: #45B1D7; --sw-tint: #E4F3F9; } [data-sw="2"] { --sw: #7EBB2A; --sw-tint: #EFF7E4; }
[data-sw="3"] { --sw: #F08D00; --sw-tint: #FEF4E6; } [data-sw="4"] { --sw: #1D6F8E; --sw-tint: #DDEEF4; }
[data-sw="5"] { --sw: #437015; --sw-tint: #E6F0DA; } [data-sw="6"] { --sw: #A85A00; --sw-tint: #F7EADB; }
[data-sw="7"] { --sw: #10303F; --sw-tint: #E2E8EB; } [data-sw="8"] { --sw: #C8321F; --sw-tint: #FBE6E3; }
.pt-diary { overflow: auto; max-height: var(--pt-diary-h, 70vh); border: 1px solid var(--ok-line); border-radius: var(--pt-radius); background: #fff; }
.pt-diary table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(80px + var(--pt-diary-cols, 4) * 150px); font-size: 14px; table-layout: fixed; }
.pt-diary th, .pt-diary td { border-bottom: 1px solid var(--ok-line); border-right: 1px solid var(--ok-line); padding: 4px; vertical-align: top; }
.pt-diary thead th { position: sticky; top: 0; z-index: 2; background: #F4F8F9; padding: 8px 10px; text-align: left; font: 700 14px var(--ok-bold); color: var(--ok-navy); }
.pt-diary thead th .pt-swatch { margin-right: 6px; }
.pt-diary tbody th { position: sticky; left: 0; z-index: 1; width: 80px; background: #FAFCFD; font: 600 13px var(--ok-font); color: var(--ok-muted); text-align: right; padding: 8px 10px; }
.pt-diary thead th:first-child { left: 0; z-index: 3; width: 80px; }
.pt-diary td { height: 52px; }
.pt-diary__free { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 44px; border: 1.5px dashed transparent; border-radius: 8px; background: none; color: var(--ok-muted); font: 600 13px var(--ok-font); cursor: pointer; }
.pt-diary__free:hover { border-color: var(--ok-field); color: var(--ok-navy); background: #FAFCFD; }
.pt-diary__free::before { content: "+ "; }
.pt-diary__event { display: grid; gap: 1px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--sw-tint, var(--ok-grey-tint)); box-shadow: inset 0 0 0 1.5px var(--sw, var(--ok-field)); font: inherit; color: var(--ok-ink); text-align: left; cursor: pointer; }
.pt-diary__event strong { font-size: 13px; color: var(--ok-navy); }
.pt-diary__event span { font-size: 12px; color: var(--ok-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-diary__event[data-state="problem"] { background: var(--ok-red-tint); box-shadow: inset 0 0 0 1.5px var(--ok-red); }
.pt-diary__event[data-state="problem"] strong::after { content: " ×"; color: var(--ok-red-ink); }
.pt-diary__off { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; background: repeating-linear-gradient(135deg, #F4F6F7 0 6px, #EBEFF1 6px 12px); color: var(--ok-muted); font-size: 12px; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ok-muted); }
.pt-legend > span { display: inline-flex; align-items: center; gap: 6px; }

@container pt (max-width: 640px) {
  .pt-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pt-table--stack, .pt-table--stack tbody, .pt-table--stack tr, .pt-table--stack td { display: block; width: 100%; }
  .pt-table--stack tr { padding: 8px 0; border-bottom: 1px solid var(--ok-line); }
  .pt-table--stack tbody tr:last-child { border-bottom: 0; }
  .pt-table--stack td { display: grid; grid-template-columns: minmax(90px, 35%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 14px; border-bottom: 0 !important; text-align: left !important; }
  .pt-table--stack td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--ok-muted); }
  .pt-table--stack td[data-label=""]::before { content: none; }
  .pt-table--stack tr[aria-selected="true"] > td:first-child { box-shadow: none; }
  .pt-facet { grid-template-columns: minmax(0, 1fr) 48px auto; }
  .ok-section__head { grid-template-columns: minmax(0, 1fr) auto; }
  .ok-section__head .ok-progress { grid-column: 1 / -1; grid-row: 2; }
  .ok-section__head .ok-section__chev { grid-column: 2; grid-row: 1; }
  .pt-overlay__pane + .pt-overlay__pane { border-left: 0; border-top: 1px solid var(--ok-line); }
}
@media print {
  .pt-overlay, .pt-chip__remove { display: none !important; }
  .pt-epc { border: 1px solid #000; }
  .pt-diary { overflow: visible; max-height: none; }
}

/* ---- v2.2 (7 Oct 2026, C1's PR #133 follow-ups) ---- */
.pt-grid--start { align-items: start; }
.ok-section__body--pad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 16px; }
.pt-chip--removable { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
.pt-chip--removable .pt-chip__remove { flex: none; }

/* Diary: compact rows and events that span rows */
.pt-diary--compact td { height: 30px; padding: 2px 4px; }
.pt-diary--compact tbody th { padding: 4px 10px; font-size: 12px; }
.pt-diary--compact .pt-diary__free, .pt-diary--compact .pt-diary__off { min-height: 26px; font-size: 12px; }
.pt-diary--compact .pt-diary__free { opacity: 0; }
.pt-diary--compact td:hover .pt-diary__free, .pt-diary--compact .pt-diary__free:focus-visible { opacity: 1; }
.pt-diary--compact .pt-diary__event { min-height: 26px; padding: 2px 8px; gap: 0; line-height: 1.2; }
.pt-diary--compact .pt-diary__event strong { font-size: 12px; line-height: 1.2; }
.pt-diary--compact .pt-diary__event span { font-size: 11px; line-height: 1.2; }
.pt-diary--compact td:not([rowspan]) .pt-diary__event span { display: none; }   /* 15-minute events: one line only */
.pt-diary--compact tbody tr:nth-child(4n+1) > * { border-top: 1px solid #C9D9E0; }   /* hour lines for 15-minute rows */
.pt-diary td[rowspan] { position: relative; padding: 2px 4px; }
.pt-diary td[rowspan] > .pt-diary__event { position: absolute; inset: 2px 4px; height: auto; align-content: start; overflow: hidden; }

/* Overlay body: two panes, then help text and buttons at the foot */
.pt-overlay__panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0; height: 100%; min-height: 0; }
.pt-overlay__pane { position: relative; isolation: isolate; min-height: 280px; min-width: 0; overflow: auto; }
.pt-overlay__pane + .pt-overlay__pane { border-left: 1px solid var(--ok-line); }
.pt-overlay__pane > .leaflet-container { position: absolute; inset: 0; }
.pt-overlay--panes { grid-template-rows: auto minmax(0, 1fr) auto; }
.pt-overlay__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--ok-line); background: #fff; }
.pt-overlay__help { margin: 0 auto 0 0; font-size: 14px; color: var(--ok-muted); max-width: 70ch; }

/* Facets in "Leave these out" mode: chosen values are struck through, the rest dimmed */
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] { background: var(--ok-red-tint); color: var(--ok-red-ink); }
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] .pt-facet__name { text-decoration: line-through; text-decoration-thickness: 2px; }
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] .pt-facet__name::before { content: "× "; text-decoration: none; display: inline-block; }
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] .pt-facet__bar { background: #F2C9C3; }
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] .pt-facet__bar > span { background: var(--ok-red); opacity: .45; }
.pt-facets[data-mode="exclude"] .pt-facet[aria-pressed="true"] .pt-facet__count { color: var(--ok-red-ink); }
.pt-facets[data-mode="include"]:has(.pt-facet[aria-pressed="true"]) .pt-facet[aria-pressed="false"] .pt-facet__bar > span { opacity: .35; }

/* Pressable stats: a coloured top edge per match type (data-sw 1-8, as the diary swatches) */
.pt-stat[data-sw] { box-shadow: inset 0 4px 0 var(--sw), var(--pt-shadow); }
.pt-stat--compact[data-sw] { box-shadow: inset 0 4px 0 var(--sw); padding-top: 13px; }
button.pt-stat[data-sw][aria-pressed="true"] { box-shadow: inset 0 4px 0 var(--sw), inset 0 0 0 1px var(--ok-navy); background: var(--sw-tint); }

/* ---- v2.3 (7 Oct 2026): diary week view, spanning blocked time, overlapping visits ---- */
/* Week view: days as columns; narrower columns so 7 days fit; combine with pt-diary--compact for 15-minute rows */
.pt-diary--week table { min-width: calc(70px + var(--pt-diary-cols, 7) * 112px); }
.pt-diary--week thead th { font-size: 13px; padding: 8px 6px; text-align: center; }
.pt-diary--week thead th small { display: block; font: 400 12px var(--ok-font); color: var(--ok-muted); }
.pt-diary--week thead th[aria-current="date"] { background: var(--ok-blue-tint); box-shadow: inset 0 -3px 0 var(--ok-link); }
.pt-diary--week tbody th, .pt-diary--week thead th:first-child { width: 70px; }
.pt-diary--week .pt-diary__event strong { font-size: 12px; }
.pt-diary--week .pt-diary__event span { font-size: 11px; }
.pt-diary--week.pt-diary--compact .pt-diary__event { padding: 2px 6px; }
/* Blocked-out time spanning rows (rowspan on the td, like visits) */
.pt-diary td[rowspan] > .pt-diary__off { position: absolute; inset: 2px 4px; min-height: 0; height: auto; text-align: center; padding: 4px; }
/* Overlapping visits: wrap them in .pt-diary__lanes and they sit side by side */
.pt-diary__lanes { display: flex; gap: 3px; width: 100%; min-height: 100%; }
.pt-diary__lanes > .pt-diary__event, .pt-diary__lanes > .pt-diary__off { flex: 1 1 0; min-width: 0; }
.pt-diary td[rowspan] > .pt-diary__lanes { position: absolute; inset: 2px 4px; height: auto; }
.pt-diary__lanes > .pt-diary__event { position: static; }
.pt-diary__lanes > .pt-diary__event span { white-space: nowrap; }
.pt-diary--compact .pt-diary__lanes > .pt-diary__event { padding: 2px 5px; }

/* ---- v2.4 (8 Oct 2026): onboarding parts from C1's 7 Oct handover, and New enquiry layout helpers ---- */
/* Pill statuses for signing */
.ok-pill[data-status="viewed"]   { background: var(--ok-blue-tint); color: var(--ok-navy); } .ok-pill[data-status="viewed"]::before { content: "◉"; }
.ok-pill[data-status="declined"] { background: var(--ok-red-tint); color: var(--ok-red-ink); } .ok-pill[data-status="declined"]::before { content: "×"; }
.ok-pill[data-status="required"] { background: #fff; color: var(--ok-red-ink); border-color: var(--ok-red); font-family: var(--ok-font); font-weight: 600; } .ok-pill[data-status="required"]::before { content: "*"; }

/* Question needing attention (red bar, tint and a "!" badge: never colour alone) */
.ok-q--attention { background: #FFF8F7; box-shadow: inset 4px 0 0 var(--ok-red); }
.ok-q--attention .ok-q__text::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--ok-red); color: #fff; font: 700 12px/1 var(--ok-bold); vertical-align: 2px; }

/* Message thread under a question */
.ok-thread { display: grid; gap: 8px; width: 100%; max-width: 760px; padding: 10px 0 2px; }
.ok-msg { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ok-line); background: #fff; max-width: 92%; }
.ok-msg[data-from="staff"] { background: var(--ok-blue-tint); border-color: #C6E3EE; justify-self: start; }
.ok-msg[data-from="installer"] { background: var(--ok-green-tint); border-color: #D3E8B8; justify-self: end; }
.ok-msg__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--ok-muted); }
.ok-msg__meta strong { color: var(--ok-navy); font-size: 13px; }
.ok-msg__body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ok-ink); overflow-wrap: anywhere; white-space: pre-line; }
.ok-thread__reply { display: grid; gap: 6px; }
.ok-thread__reply .ok-textarea { min-height: 64px; font-size: 15px; }
.ok-thread__reply .pt-row, .ok-thread__reply > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* "Replies needed" list */
.ok-replies { display: grid; gap: 8px; padding: 14px 16px; border: 2px solid var(--ok-red); border-radius: 14px; background: #fff; }
.ok-replies__head { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px var(--ok-bold); color: var(--ok-navy); }
.ok-replies__count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--ok-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--ok-bold); }
.ok-replies__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ok-replies__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ok-ink); }
.ok-replies__list a:hover { background: var(--ok-red-tint); }
.ok-replies__q { font-weight: 700; color: var(--ok-navy); }
.ok-replies__section, .ok-replies__when { font-size: 13px; color: var(--ok-muted); }
.ok-replies__when { grid-row: span 2; text-align: right; }

/* Audit trail and earlier versions */
.ok-audit { width: 100%; border-top: 1px dashed var(--ok-line); margin-top: 4px; }
.ok-audit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 0; font: 600 14px var(--ok-font); color: var(--ok-link); cursor: pointer; }
.ok-audit > summary::-webkit-details-marker { display: none; }
.ok-audit > summary::before { content: "◷"; color: var(--ok-muted); }
.ok-audit > summary:hover { color: var(--ok-navy); text-decoration: underline; }
.ok-audit__list { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--ok-line); display: grid; gap: 6px; }
.ok-audit__item { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 12px; font-size: 14px; line-height: 1.45; }
.ok-audit__item::before { content: ""; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--ok-field); }
.ok-audit__item time { color: var(--ok-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-audit__who { font-weight: 700; color: var(--ok-navy); }
.ok-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.ok-versions > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 6px 10px; border-radius: 10px; background: #FAFCFD; border: 1px solid var(--ok-line); font-size: 14px; }
.ok-versions__name { font-weight: 600; color: var(--ok-navy); overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-versions__meta { grid-column: 1; font-size: 13px; color: var(--ok-muted); }
.ok-versions > li > a, .ok-versions > li > .ok-btn { grid-row: span 2; }
.ok-versions > li[aria-current="true"] { background: #fff; border-color: var(--ok-green); }

/* Insurance cover check notice */
.ok-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.45; max-width: 640px; border: 1.5px solid transparent; }
.ok-check p { margin: 0; grid-column: 2; }
.ok-check__title { grid-column: 2; font-family: var(--ok-bold); font-weight: 700; }
.ok-check::before { grid-row: span 3; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font: 700 14px var(--ok-bold); margin-top: 1px; }
.ok-check[data-result="match"]    { background: var(--ok-green-tint); color: #23400A; border-color: #CFE5B3; } .ok-check[data-result="match"]::before { content: "✓"; background: var(--ok-green-ink); color: #fff; }
.ok-check[data-result="mismatch"] { background: var(--ok-red-tint); color: #5E140C; border-color: #F2B8B0; } .ok-check[data-result="mismatch"]::before { content: "×"; background: var(--ok-red); color: #fff; }
.ok-check[data-result="unread"]   { background: var(--ok-grey-tint); color: var(--ok-ink); border-color: var(--ok-line); } .ok-check[data-result="unread"]::before { content: "?"; background: var(--ok-muted); color: #fff; }
.ok-check[data-result="expired"]  { background: var(--ok-orange-tint); color: #4A2C00; border-color: #F6D9AE; } .ok-check[data-result="expired"]::before { content: "!"; background: var(--ok-orange); color: var(--ok-navy); }

/* Send for signature panel, and signing status per operative */
.ok-sign { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--ok-line); border-radius: 14px; background: #fff; }
.ok-sign__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ok-sign__title { margin: 0 auto 0 0; font: 700 17px var(--ok-bold); color: var(--ok-navy); }
.ok-sign__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ok-sign__docs .pt-check, .ok-sign__docs .ok-tick { min-height: 44px; }
.ok-sign__to { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ok-signstat { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ok-signstat > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ok-line); background: #fff; }
.ok-signstat__doc { font-weight: 600; color: var(--ok-navy); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ok-signstat__when { grid-column: 1; font-size: 13px; color: var(--ok-muted); }
.ok-signstat > li > .ok-pill { grid-row: span 2; justify-self: end; }

/* Read-only notice for staff viewing as the installer (sticks under the top bar) */
.ok-readonly { position: sticky; top: calc(var(--ok-top-offset) + 64px); z-index: 25; display: block; margin: 0; padding: 10px 20px 10px 44px; line-height: 1.5; background: var(--ok-navy); color: #fff; font-size: 15px; }
.ok-readonly::before { content: ""; position: absolute; left: 20px; top: 13px; width: 14px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ok-readonly strong { color: #fff; }
.pt .ok-readonly a, .ok-readonly a { color: #FFD08A; } .ok-readonly a:hover { color: #fff; }

/* One-off secret (e.g. a FastField password shown once) */
.ok-secret { display: grid; gap: 8px; padding: 12px 14px; border: 2px dashed var(--ok-orange); border-radius: 12px; background: var(--ok-orange-tint); max-width: 520px; }
.ok-secret__value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ok-secret__value code { padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #F6D9AE; font: 700 18px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; color: var(--ok-navy); user-select: all; overflow-wrap: anywhere; }
.ok-secret__note { margin: 0; font-size: 14px; color: #4A2C00; }

/* New enquiry: two property pictures side by side, and grouped detail lists in a wide card */
.pt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pt-pair > figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.pt-pair img, .pt-pair__frame { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--ok-line); background: var(--ok-grey-tint); }
.pt-pair a, .pt-pair button { display: block; padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in; }
.pt-pair figcaption { font-size: 13px; color: var(--ok-muted); line-height: 1.35; }
.pt-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px 24px; align-items: start; }
.pt-group { display: grid; gap: 6px; min-width: 0; }
.pt-group__title { margin: 0; font: 700 14px var(--ok-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--ok-green-ink); }
.pt-split__aside--static { position: static; }
@container pt (max-width: 420px) { .pt-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- v2.5 (8 Oct 2026): review of the live pages ---- */
/* Wide screens: no page ever scrolls sideways, a fluid width for data-heavy pages, readable paragraphs */
.pt-app { overflow-x: clip; }
.pt-main--fluid { max-width: var(--pt-fluid); }
.pt-main--fluid .pt-header__in, .pt-header--fluid .pt-header__in { max-width: var(--pt-fluid); }
.pt-card > p, .pt-card__meta, .pt-stack > p, .pt-main > p { max-width: 92ch; }
/* Native file inputs (pages that don't use ok-drop yet) */
.pt input[type="file"] { width: 100%; max-width: 560px; min-height: 48px; padding: 6px; border: 2px dashed var(--ok-field); border-radius: 12px; background: #FAFCFD; font: 400 15px var(--ok-font); color: var(--ok-muted); cursor: pointer; }
.pt input[type="file"]:hover { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.pt input[type="file"]::file-selector-button { margin-right: 12px; min-height: 36px; padding: 6px 16px; border: 2px solid var(--ok-navy); border-radius: 999px; background: #fff; color: var(--ok-navy); font: 700 14px var(--ok-bold); cursor: pointer; }
/* Card whose last line is an "Open …" link: keep the link at the bottom, as a clear action */
.pt-card__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 15px var(--ok-bold); color: var(--ok-link); text-decoration: none; }
.pt-card__go::after { content: "→"; transition: transform .15s; }
.pt-card__go:hover { color: var(--ok-navy); } .pt-card__go:hover::after { transform: translateX(3px); }
.pt-grid > .pt-card { height: 100%; }

/* ---- v2.6 (9 Oct 2026): files and evidence, jobs, evidence rules, calibrated tools, EPC dashboard, upload kinds, section filter ---- */
/* Section filter: Show all / outstanding / completed */
.ok-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--ok-line); font-size: 14px; }
.ok-filter legend, .ok-filter__label { float: left; margin-right: 6px; color: var(--ok-muted); padding: 0; }
.ok-filter label { position: relative; display: inline-flex; }
.ok-filter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ok-filter span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--ok-line); background: #fff; font: 600 14px var(--ok-font); color: var(--ok-navy); }
.ok-filter input:checked + span { background: var(--ok-navy); border-color: var(--ok-navy); color: #fff; }
.ok-filter input:checked + span::before { content: "✓"; }
.ok-filter input:focus-visible + span { outline: 3px solid var(--ok-orange); outline-offset: 2px; }
.ok-filter b { font: 700 12px var(--ok-bold); padding: 1px 7px; border-radius: 999px; background: var(--ok-grey-tint); color: var(--ok-navy); }
.ok-filter input:checked + span b { background: rgba(255,255,255,.2); color: #fff; }

/* Upload kind: three compact choices in a row, then the drop zone */
.ok-kind { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; width: 100%; }
.ok-kind > legend { padding: 0; margin-bottom: 2px; font: 600 14px var(--ok-font); color: var(--ok-navy); }
.ok-kind__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.ok-kind__opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1.35; }
.ok-kind__opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ok-navy); grid-row: span 2; }
.ok-kind__opt strong { font-size: 14px; color: var(--ok-navy); }
.ok-kind__opt small { font-size: 13px; color: var(--ok-muted); }
.ok-kind__opt:has(input:checked) { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.ok-kind__opt[data-kind="replacement"]:has(input:checked) { border-color: var(--ok-red); background: var(--ok-red-tint); }
.ok-file__part { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--ok-grey-tint); font: 700 12px var(--ok-bold); color: var(--ok-navy); margin-left: 6px; vertical-align: 1px; }
.ok-q__answer .ok-input--date + .ok-q__hint, .ok-q__answer .pt-field__hint { max-width: 60ch; }
/* Read-back notes after an upload: one compact list, not a stack of boxes */
.ok-readback { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; width: 100%; border-radius: 12px; background: #FAFCFD; border: 1px solid var(--ok-line); font-size: 14px; line-height: 1.45; }
.ok-readback > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.ok-readback > li::before { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font: 700 11px var(--ok-bold); margin-top: 1px; content: "i"; background: var(--ok-link); color: #fff; }
.ok-readback > li[data-tone="warn"]::before { content: "!"; background: var(--ok-orange); color: var(--ok-navy); }
.ok-readback > li[data-tone="ok"]::before { content: "✓"; background: var(--ok-green-ink); }
.ok-readback > li[data-tone="bad"]::before { content: "×"; background: var(--ok-red); }

/* Files and evidence card (staff, Site documents) */
.pt-files { display: grid; gap: 10px; }
.pt-files__group { border: 1px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-files__group > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 48px; padding: 6px 14px; cursor: pointer; }
.pt-files__group > summary::-webkit-details-marker { display: none; }
.pt-files__group > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ok-navy); border-bottom: 2px solid var(--ok-navy); transform: rotate(-45deg); transition: transform .2s; }
.pt-files__group[open] > summary::before { transform: rotate(45deg); }
.pt-files__name { font: 700 15px var(--ok-bold); color: var(--ok-navy); margin-right: auto; }
.pt-files__list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 6px; }
.pt-filerow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon main actions" "icon tools tools"; gap: 4px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--ok-line); border-radius: 10px; }
.pt-filerow > .ok-file__icon { grid-area: icon; align-self: start; }
.pt-filerow__main { grid-area: main; min-width: 0; display: grid; gap: 2px; }
.pt-filerow__actions { grid-area: actions; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.pt-filerow__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.pt-filerow__tools .pt-check { min-height: 36px; padding: 4px 0; }
.pt-filerow[data-state="removed"] { opacity: .6; background: var(--ok-grey-tint); } .pt-filerow[data-state="removed"] .ok-file__name { text-decoration: line-through; }
.pt-filerow[data-restricted="true"] .pt-filerow__main::after { content: "Restricted: never shown to installers"; font-size: 12px; font-weight: 700; color: var(--ok-red-ink); }

/* Installer job card: measures, progress, what's missing, light */
.pt-job { display: grid; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow); min-width: 0; }
.pt-job__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.pt-job__head > .ok-dot { grid-row: span 2; }
.pt-job__title { margin: 0; font: 700 17px var(--ok-bold); color: var(--ok-navy); overflow-wrap: anywhere; }
.pt-job__meta { grid-column: 2; font-size: 14px; color: var(--ok-muted); }
.pt-job__head > .ok-pill { grid-row: 1; grid-column: 3; }
.pt-missing { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 4px; border-radius: 10px; background: var(--ok-red-tint); font-size: 14px; }
.pt-missing > li { display: flex; gap: 8px; align-items: baseline; }
.pt-missing > li::before { content: "×"; font: 700 13px var(--ok-bold); color: var(--ok-red-ink); }
.pt-missing__title { margin: 0 0 2px; font: 700 14px var(--ok-bold); color: #5E140C; }
.pt-missing[data-done="true"] { background: var(--ok-green-tint); color: #23400A; } .pt-missing[data-done="true"] > li::before { content: "✓"; color: var(--ok-green-ink); }

/* Matrix editor (evidence rules, tool rules): rows of items, columns of measures or visit types */
.pt-matrix { overflow: auto; border: 1px solid var(--ok-line); border-radius: var(--pt-radius); background: #fff; max-height: var(--pt-table-h, none); }
.pt-matrix table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.pt-matrix th, .pt-matrix td { padding: 6px 10px; border-bottom: 1px solid var(--ok-line); text-align: center; vertical-align: middle; }
.pt-matrix thead th { position: sticky; top: 0; z-index: 2; background: #F4F8F9; font: 700 13px var(--ok-bold); color: var(--ok-navy); white-space: nowrap; }
.pt-matrix tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font: 600 14px var(--ok-font); color: var(--ok-navy); min-width: 220px; }
.pt-matrix tbody th small { display: block; font-weight: 400; color: var(--ok-muted); }
.pt-matrix thead th:first-child { left: 0; z-index: 3; text-align: left; }
.pt-matrix td input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ok-navy); cursor: pointer; }
.pt-matrix td label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; cursor: pointer; }
.pt-matrix td select { min-height: 36px; padding: 4px 8px; font-size: 14px; }
.pt-matrix tbody tr:hover > * { background: #F2F8FB; }
.pt-matrix tbody tr.is-changed > th { box-shadow: inset 4px 0 0 var(--ok-orange); }
.pt-matrix tbody tr.is-changed > th::after { content: " · changed"; font-size: 12px; font-weight: 700; color: var(--ok-orange-ink); }

/* Tool picker on the booking form */
.pt-tools { display: grid; gap: 8px; }
.pt-toolpick { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto; gap: 6px 12px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: #fff; }
.pt-toolpick__type { font-weight: 700; color: var(--ok-navy); }
.pt-toolpick .ok-select { width: 100%; max-width: none; }
.pt-toolpick[data-state="ok"] { border-color: #CFE5B3; }
.pt-toolpick[data-state="bad"] { border-color: var(--ok-red); background: #FFF8F7; }
.pt-toolpick__mine { font-size: 12px; font-weight: 700; color: var(--ok-green-ink); }
.pt-toolpick__mine::before { content: "★ "; }
.pt-override { display: grid; gap: 8px; padding: 34px 12px 12px; position: relative; border: 2px dashed var(--ok-navy); border-radius: 12px; background: repeating-linear-gradient(135deg, #EEF2F4 0 10px, #E1E8EB 10px 20px); }
.pt-override .ok-textarea { min-height: 60px; }
.pt-confirm { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--ok-navy); border-radius: 12px; background: #fff; font-weight: 600; color: var(--ok-navy); cursor: pointer; }
.pt-confirm input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ok-navy); }
.pt-confirm:has(input:checked) { background: var(--ok-green-tint); border-color: var(--ok-green-ink); }

/* EPC dashboard and history */
.pt-epclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pt-epclist > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--ok-line); border-radius: 10px; background: #fff; }
.pt-epclist > li > .pt-epc { grid-row: span 2; }
.pt-epclist__main { font-weight: 700; color: var(--ok-navy); }
.pt-epclist__meta { grid-column: 2; font-size: 13px; color: var(--ok-muted); }
.pt-epclist > li > :last-child:not(.pt-epclist__meta) { grid-row: span 2; justify-self: end; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ok-pill[data-status="slot"] { background: var(--ok-navy); color: #fff; } .ok-pill[data-status="slot"]::before { content: "●"; }
.ok-pill[data-status="other-lodger"] { background: var(--ok-red-tint); color: var(--ok-red-ink); } .ok-pill[data-status="other-lodger"]::before { content: "!"; }
.ok-pill[data-status="seen"] { background: var(--ok-grey-tint); color: var(--ok-muted); } .ok-pill[data-status="seen"]::before { content: "✓"; }

@container pt (max-width: 640px) {
  .pt-filerow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon main" "actions actions" "tools tools"; }
  .pt-filerow__actions { justify-content: flex-start; }
  .pt-toolpick { grid-template-columns: minmax(0, 1fr); }
  .pt-epclist > li { grid-template-columns: auto minmax(0, 1fr); } .pt-epclist > li > :last-child:not(.pt-epclist__meta) { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .pt-job__head { grid-template-columns: auto minmax(0, 1fr); } .pt-job__head > .ok-pill { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* ---- v2.7 (10 Oct 2026): expiry block, review choice, lease pill, facet truncation ---- */
.ok-pill[data-status="lease"] { background: #fff; color: var(--ok-navy); border-color: var(--ok-navy); font-family: var(--ok-font); font-weight: 600; } .ok-pill[data-status="lease"]::before { content: "⌂"; }
.ok-pill[data-status="required-date"] { background: #fff; color: var(--ok-orange-ink); border-color: var(--ok-orange); font-family: var(--ok-font); font-weight: 600; } .ok-pill[data-status="required-date"]::before { content: "◷"; }
/* Expiry block: date + hint side by side, no-expiry tick, staff control on one quiet line */
.ok-expiry { display: grid; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 12px; background: #FAFCFD; border: 1px solid var(--ok-line); }
.ok-expiry__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ok-expiry__date label { font: 600 14px var(--ok-font); color: var(--ok-navy); }
.ok-expiry__date .ok-q__hint { flex: 1 1 260px; max-width: 60ch; }
.ok-expiry .pt-check { min-height: 40px; padding: 6px 0; }
.ok-expiry__staff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 8px; border-top: 1px dashed var(--ok-line); font-size: 14px; color: var(--ok-muted); }
.ok-expiry__warn { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--ok-red-ink); }
.ok-expiry__warn::before { content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-red); color: #fff; font: 700 12px var(--ok-bold); margin-top: 1px; }
/* Review choice as radio cards (instead of a select) */
.pt-choice { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.pt-choice > legend { padding: 0; margin-bottom: 4px; font: 600 15px var(--ok-font); color: var(--ok-navy); }
.pt-choice__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--ok-line); border-radius: 12px; background: #fff; cursor: pointer; }
.pt-choice__opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ok-navy); grid-row: span 2; }
.pt-choice__opt strong { font-size: 15px; color: var(--ok-navy); }
.pt-choice__opt small { font-size: 13px; color: var(--ok-muted); line-height: 1.4; }
.pt-choice__opt:has(input:checked) { border-color: var(--ok-navy); background: var(--ok-blue-tint); }
.pt-choice__opt[data-tone="ours"]:has(input:checked) { border-color: var(--ok-green-ink); background: var(--ok-green-tint); }
/* Facet names: wrap to two lines rather than cutting off, and allow the explorer to show a title tooltip */
.pt-facet__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }

/* ---- v2.8 (11 Oct 2026): booking admin trip edit state, Note column ---- */
.pt-card--editing { border-color: var(--ok-orange); box-shadow: inset 4px 0 0 var(--ok-orange), var(--pt-shadow); }
.pt-card--editing .pt-card__title::after { content: "Editing"; display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--ok-orange-tint); color: var(--ok-orange-ink); font: 700 12px var(--ok-bold); }
.pt-table tbody tr.is-editing > * { background: var(--ok-orange-tint); }
.pt-table tbody tr.is-editing > :first-child { box-shadow: inset 4px 0 0 var(--ok-orange); }
.pt-table td.pt-note { max-width: 28ch; font-size: 13px; line-height: 1.4; color: var(--ok-muted); overflow-wrap: anywhere; white-space: normal; }
.pt-table td.pt-note:empty::before { content: "–"; }
.pt-table td.pt-actions { white-space: nowrap; text-align: right; }
.pt-table td.pt-actions > .ok-btn + .ok-btn { margin-left: 4px; }

/* ---- v2.10 (12 Oct 2026, Adrian): explanatory text runs the full width of its container ----
   Intro lines under page titles, card descriptions, notices and field hints used to stop at about 60-70 characters,
   leaving a narrow column and empty space on the right. They now use the full width. Long reading pages (.pt-doc,
   privacy and terms) keep their 72-character measure. */
.pt .pt-lede, .pt .pt-card__meta, .pt .pt-field__hint, .pt .ok-q__hint, .pt .pt-search__status,
.pt .ok-notice, .pt .pt-alert, .pt .ok-check, .pt .ok-secret, .pt .ok-review__note,
.pt .pt-card > p, .pt .pt-card > div > p, .pt .pt-stack > p, .pt .pt-main > p, .pt .ok-section__body > p,
.pt .pt-titlebar__text { max-width: none; }
.pt .pt-titlebar__text { flex: 1 1 0; }
.pt .pt-titlebar__actions { flex: none; align-self: flex-start; }
.pt .pt-doc, .pt .pt-doc p { max-width: var(--pt-text); }

/* v2.13 (24 Oct 2026, C4's engine 0.9.13): the engine's warnings[] as a large red banner above a result. The user may keep their choice.
   Brand rules: a full 2px border (no left bar) and a "!" badge rather than a warning glyph. Bullets orange. */
.pt-warn { position: relative; display: grid; gap: 6px; padding: 14px 18px 14px 52px; border: 2px solid var(--ok-red-ink); border-radius: var(--pt-radius); background: var(--ok-red-tint); color: #5F1B16; }
.pt-warn::before { content: "!"; position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-red-ink); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 14px var(--ok-bold); }
.pt-warn__t { margin: 0; font-size: 17px; font-weight: 700; color: var(--ok-red-ink); }
.pt-warn p { margin: 0; font-size: 14px; line-height: 1.5; }
.pt-warn ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.pt-warn li::marker { color: #F08D00; }

/* v2.15 (25 Oct 2026, C4's engine 0.9.15): "Hide message" on the warning banner, and the one-line "N warnings hidden · Show". */
.pt-warn__t { padding-right: 130px; }
.pt-warn__hide { position: absolute; top: 8px; right: 10px; min-height: 36px; padding: 6px 8px; border: 0; background: none; color: var(--ok-red-ink); font: 700 13px var(--ok-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: 8px; }
.pt-warn__hide::after { content: ""; position: absolute; inset: -4px 0; }
.pt-warn__hide:hover { background: rgba(163,38,26,.08); }
.pt-warns__shut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 8px 14px; border: 1.5px solid var(--ok-red-ink); border-radius: 999px; background: var(--ok-red-tint); color: var(--ok-red-ink); font-size: 14px; font-weight: 700; justify-self: start; }
.pt-warns__shut::before { content: "!"; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-red-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--ok-bold); }
.pt-warns__shut button { min-height: 32px; padding: 4px 6px; border: 0; background: none; color: var(--ok-red-ink); font: 700 14px var(--ok-font); text-decoration: underline; cursor: pointer; border-radius: 6px; }
@container pt (max-width: 520px) { .pt-warn__t { padding-right: 0; } .pt-warn__hide { position: static; justify-self: start; margin: -4px 0 0 -8px; } }

/* v2.16 (25 Oct 2026, C4's engine 0.9.16): the "Use PCDB n" buttons inside a warning. Kit secondary small button, white on the red tint,
   so it reads as an action; spaced from the text and wraps under a list item on a narrow screen. */
.pt-warn__use { margin: 6px 0 0; background: #fff; color: var(--ok-navy); border-color: var(--ok-navy); }
.pt-warn__use:hover { background: var(--ok-blue-tint); }
.pt-warn li .pt-warn__use { margin: 4px 0 2px 8px; vertical-align: middle; }
@container pt (max-width: 520px) { .pt-warn li .pt-warn__use { display: flex; margin: 6px 0 2px; } }
/* C4, 25 Oct 2026 (CD's design note): the warning as a fold-out, the first open; the action row; the "Why?" fold-out. For CD's v2.16. */
.pt-warn > summary.pt-warn__t { cursor: pointer; list-style: none; margin: 0; }
.pt-warn > summary.pt-warn__t::-webkit-details-marker { display: none; }
.pt-warn:not([open]) > summary.pt-warn__t::after { content: " \25BE"; font-size: 13px; }
.pt-warn__body { display: grid; gap: 8px; margin-top: 6px; }
.pt-warn__s { margin: 0; }
.pt-warn__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-warn__why > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ok-red-ink); list-style: none; }
.pt-warn__why > summary::-webkit-details-marker { display: none; }
.pt-warn__why > summary::before { content: "\25B8 "; } .pt-warn__why[open] > summary::before { content: "\25BE "; }
.pt-warn__why > p, .pt-warn__why > ul { margin-top: 6px; }
/* END v2.1 */

/* ===================== Part 4 · v2.11 (13 Oct 2026): C1's additions, now part of the design system =====================
   From the CRM's portal.css (main at 9f84bef), folded in unchanged apart from merging the two pt-card__go rules.
   CD's review points applied: bare controls reuse the kit look through :where() so any class wins;
   [hidden] never hides an open dialog; .pt-status has a symbol as well as colour (and role="status"
   in the markup); pre scrolls inside itself. */

/* Form controls the pages build in JavaScript without a class look like .ok-input / .ok-select. */
.pt-app :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  font: 400 16px var(--ok-font); color: var(--ok-ink); background: var(--ok-white); min-height: 40px;
  border: 1.5px solid var(--ok-field); border-radius: 10px; padding: 8px 10px; max-width: 100%; }
.pt-app :where(input, select, textarea):hover { border-color: var(--ok-navy); }
.pt-app :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ok-navy); width: 18px; height: 18px; }

/* A one-line status under a button: "Saving…", "Saved", "Couldn't save: …". Use role="status". */
.pt-status { margin: 6px 0; min-height: 1.4em; font-size: 15px; color: var(--ok-muted); }
.pt-status:empty { margin: 0; min-height: 0; }
.pt-status.ok, .pt-status--ok { color: var(--ok-green-ink); font-weight: 600; }
.pt-status.err, .pt-status--err, .pt-status.bad { color: var(--ok-red-ink); font-weight: 600; }
.pt-status.warn, .pt-status--warn { color: var(--ok-orange-ink); font-weight: 600; }
.pt-status.ok:not(:empty)::before, .pt-status--ok:not(:empty)::before { content: "\2713\00a0"; }
.pt-status.err:not(:empty)::before, .pt-status--err:not(:empty)::before, .pt-status.bad:not(:empty)::before,
.pt-status.warn:not(:empty)::before, .pt-status--warn:not(:empty)::before { content: "!\00a0"; }

/* Raw replies shown for checking: scroll inside, never widen the page. */
.pt-app pre { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; background: var(--ok-grey-tint);
  border: 1px solid var(--ok-line); border-radius: 10px; padding: 10px; max-height: 24rem; overflow: auto; }

/* hidden always hides, except an open dialog. */
.pt-app [hidden]:not(dialog[open]) { display: none !important; }

/* FastField viewer photo labels (C1, PR #144). */
.pt-photo__label { display: block; color: var(--ok-ink); font-weight: 700; font-size: 14px; }
.pt-photo__section { display: block; margin-top: 2px; }

/* v2.5 follow-up (C1, 8 Oct 2026; for CD): a card with a pt-card__go at its foot is a column, so
   margin-top:auto takes the link to the bottom (in the grid layout it stayed under the text).
   A whole-card link can't hold an <a>, so there the "go" line is a <span class="pt-card__go">. */
.pt-card:has(> .pt-card__go) { display: flex; flex-direction: column; gap: 12px; }
.pt-card--link .pt-card__go { color: var(--ok-link); }
.pt-card:has(> .pt-card__go) > :where(p, ul, ol, dl) { margin-block: 0; }

/* Page status in the header (crm-nav.js pageStatus, 18 Oct 2026). Company colours, dark text for contrast. */
[data-admin-only] { display: none; }
.pt-pagestatus { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #EEF3F5; color: #33474F; white-space: nowrap; }
.pt-pagestatus[data-s="building"] { background: #FFF1DD; color: #8A4B00; }
.pt-pagestatus[data-s="testing"] { background: #E6F4FA; color: #17607A; }
.pt-pagestatus[data-s="live"] { background: #EEF7E3; color: #2F6B12; }
.pt-pagestatus__sel { font: inherit; font-size: 12px; border: 1px solid #C9D6DB; border-radius: 6px; background: #fff; padding: 1px 4px; margin-left: 4px; }
@media (max-width: 700px) { .pt-pagestatus span { display: none; } .pt-pagestatus { margin-left: 6px; } }