/*
 * CRM — shared design system (2026-10-07, plans/2026-10-07-ui-redesign.md).
 *
 * One cacheable file, linked from every page head by pay_assets_head()
 * (_engine/payout-ui.php) as /assets/crm.css?v=<content hash>, so a change ships
 * a new URL and phones never keep an old copy. It loads BEFORE each page's own
 * <style>, so page rules and pay_theme_css() still win where they overlap.
 *
 *   1. tokens (light, dark)        5. app shell: bottom bar / sidebar, "+", sheets
 *   2. base and accessibility      5b. page width and card columns (every sidebar page)
 *   3. components (ui-*)           6. search sheet
 *   4. dashboard pieces (KPI, fold) 7. toast and confirm
 *
 * Palette = payout-theme.php. Prefix "ui-" so nothing collides with page classes.
 */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --bg:#f6f3ec; --surface:#fff; --surface-2:#f3eee4; --card:#fff; --line:#e2dacb;
  --ink:#0b1c33; --muted:#5b6778; --faint:#6b7684;
  --ok:#1d7a46; --bad:#b42318; --warn:#8a5a00; --info:#2f6fb8;
  --gold:#B08D57; --gold-text:#7a5c2e; --navy:#0b1c33;
  --field:#fff; --field-line:#cfc6b5;
  --ui-r:12px; --ui-r-sm:9px;
  --ui-shadow:0 1px 2px rgba(11,28,51,.05);
  --ui-shadow-lg:0 18px 48px -12px rgba(11,28,51,.35);
  --ui-tap:44px;
  --shell-bg:#0a121e; --shell-line:#1d2a3d; --shell-ink:#9aa8bb; --shell-on:#d8b98a;
  --shell-w:208px;
}
@media screen and (prefers-color-scheme: dark){
  :root{
    --bg:#08111d; --surface:#101b2c; --surface-2:#16233a; --card:#101b2c; --line:#22324a;
    --ink:#e8edf4; --muted:#9aa8bb; --faint:#8696ac;
    --ok:#4fc38a; --bad:#f2777a; --warn:#e4b860; --info:#7fb2ee;
    --gold-text:#d8b98a; --field:#0e1828; --field-line:#2a3b55;
    --ui-shadow:none; --ui-shadow-lg:0 18px 48px -12px rgba(0,0,0,.8);
  }
}

/* ------------------------------------------------- 2. base and accessibility */
/* One box model and one body type for every page. The ui-* components below are drawn for
   border-box; a page that forgot its own `*{box-sizing}` (appt.php) let every full-width
   button run out of its card, in the browser's default serif (owner 2026-10-11). A page's
   own <style> loads after this file and still wins where it sets its own body font. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.sr-only,.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ui-skip{position:absolute;left:8px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--gold);color:#0b1c33;font-weight:800;text-decoration:none}
.ui-skip:focus{top:8px}
/* Phones zoom into any input under 16px (iOS); the shared rule stops it everywhere. */
@media (max-width:767px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------- 3. components */
/* Buttons: one primary per screen, secondary beside it, quiet for the rest. */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--ui-tap);padding:0 16px;
  border-radius:10px;border:1.5px solid var(--field-line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.95rem;font-weight:800;line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.ui-btn:hover{border-color:var(--gold)}
.ui-btn:active{transform:translateY(1px)}
.ui-btn[disabled],.ui-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.ui-btn svg{flex:0 0 auto}
.ui-btn--primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ui-btn--primary:hover{background:#13294a;border-color:#13294a}
.ui-btn--gold{background:var(--gold);border-color:var(--gold);color:#0b1c33}
.ui-btn--gold:hover{background:#c09a62;border-color:#c09a62}
.ui-btn--secondary{background:var(--surface);border-color:var(--field-line)}
.ui-btn--quiet{background:transparent;border-color:transparent;color:var(--ink)}
.ui-btn--quiet:hover{background:var(--surface-2);border-color:transparent}
.ui-btn--danger{background:var(--surface);border-color:var(--bad);color:var(--bad)}
.ui-btn--danger.ui-btn--solid{background:#b42318;border-color:#b42318;color:#fff}
.ui-btn--sm{min-height:38px;padding:0 12px;font-size:.86rem;border-radius:9px}
.ui-btn--block{display:flex;width:100%}
@media screen and (prefers-color-scheme: dark){
  .ui-btn--primary{background:var(--gold);border-color:var(--gold);color:#0b1c33}
  .ui-btn--primary:hover{background:#c09a62;border-color:#c09a62}
  .ui-btn--danger.ui-btn--solid{background:#f2777a;border-color:#f2777a;color:#0b1c33}
}
/* Square icon button (Call, Text, Map on a row). Always 44px, always labelled. */
.ui-ib{display:inline-grid;place-items:center;width:var(--ui-tap);height:var(--ui-tap);flex:0 0 auto;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--gold-text);text-decoration:none;cursor:pointer;padding:0}
.ui-ib:hover{border-color:var(--gold)}

/* Chip / status: always a word, colour is the second signal. */
.ui-chip{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 9px;border-radius:99px;
  background:var(--surface-2);color:var(--muted);font-size:.74rem;font-weight:800;line-height:1.2;white-space:nowrap;vertical-align:1px}
.ui-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.ui-chip--plain::before{display:none}
.ui-chip--ok{color:var(--ok);background:rgba(29,122,70,.10)}
.ui-chip--warn{color:var(--warn);background:rgba(138,90,0,.10)}
.ui-chip--bad{color:var(--bad);background:rgba(180,35,24,.09)}
.ui-chip--info{color:var(--info);background:rgba(47,111,184,.10)}
.ui-chip--gold{color:var(--gold-text);background:rgba(176,141,87,.16)}
@media screen and (prefers-color-scheme: dark){
  .ui-chip--ok{background:rgba(79,195,138,.13)} .ui-chip--warn{background:rgba(228,184,96,.13)}
  .ui-chip--bad{background:rgba(242,119,122,.13)} .ui-chip--info{background:rgba(127,178,238,.13)}
}
/* Counter badge (on the bar, on tabs). */
.ui-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:#b42318;color:#fff;font-size:.7rem;font-weight:800;line-height:1;font-style:normal}
.ui-badge--quiet{background:var(--surface-2);color:var(--muted)}

/* Card and list row. */
.ui-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--ui-shadow);min-width:0}
.ui-card > h2,.ui-card-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:1.05rem;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:0}
.ui-list{list-style:none;margin:0;padding:0}
.ui-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.ui-list > .ui-row:first-child,.ui-list > li:first-child > .ui-row{border-top:0}
.ui-row-main{flex:1 1 auto;min-width:0}
.ui-row-t{display:block;font-weight:800;overflow-wrap:anywhere}
.ui-row-s{display:block;font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.ui-row-acts{display:flex;gap:6px;flex:0 0 auto}
a.ui-row:hover .ui-row-t{text-decoration:underline;text-decoration-color:var(--gold)}

/* Segmented tabs (Day / Week, filters). */
.ui-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ui-seg::-webkit-scrollbar{display:none}
.ui-seg > a,.ui-seg > button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:9px;background:none;
  color:var(--muted);font:inherit;font-size:.9rem;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.ui-seg > [aria-current],.ui-seg > [aria-pressed=true],.ui-seg > [aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--gold) inset}

/* Empty state: say what is going on and offer the next step. */
.ui-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);background:transparent}
.ui-empty b{color:var(--ink);font-size:.98rem}
.ui-empty p{margin:0;font-size:.9rem}
.ui-empty .ui-btn{margin-top:2px}

/* Form field. */
.ui-field{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.ui-field > label{font-size:.85rem;font-weight:700;color:var(--muted)}
.ui-field input,.ui-field select,.ui-field textarea,.ui-input{width:100%;min-height:var(--ui-tap);padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--field-line);background:var(--field);color:var(--ink);font:inherit;font-size:16px}
.ui-field .hint{font-size:.8rem;color:var(--muted)}
.ui-field .err{font-size:.84rem;color:var(--bad);font-weight:700}

/* Loading: a quiet pulse, off for reduced motion. */
.ui-loading{color:var(--muted);font-size:.9rem}
.ui-loading::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold);animation:uiSpin .8s linear infinite}
@keyframes uiSpin{to{transform:rotate(360deg)}}

/* ------------------------------------------------- 4. dashboard pieces */
.ui-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
@media (max-width:899px){.ui-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-kpi{display:flex;flex-direction:column;gap:2px;min-height:84px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--ui-shadow);min-width:0}
a.ui-kpi:hover{border-color:var(--gold)}
.ui-kpi-l{font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:.01em}
.ui-kpi-v{font-size:1.5rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ui-kpi-v small{font-size:.9rem;color:var(--muted);font-weight:700}
.ui-kpi-s{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.ui-kpi-s .hot{color:var(--bad);font-weight:800}
.ui-kpi--hot{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
@media (max-width:420px){.ui-kpi{min-height:76px;padding:10px 12px}.ui-kpi-v{font-size:1.3rem}}

/* A section that folds: <section class="ui-fold" id> with a .ui-fold-btn in its heading.
   crm.js remembers the choice per section on this phone. Without JS it stays open. */
.ui-fold-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:auto;flex:0 0 auto;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;padding:0}
.ui-fold-btn::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.ui-fold.is-folded .ui-fold-btn::before{transform:translateY(1px) rotate(-135deg)}
.ui-fold.is-folded .ui-fold-body{display:none}
.ui-fold.is-folded{padding-bottom:4px}
.ui-fold.is-folded > h2,.ui-fold.is-folded .ui-fold-h{margin-bottom:8px}

/* ------------------------------------------------------------ 5. app shell */
/* Bottom bar under 1024px; a left sidebar from 1024px. Owner pages that carry
   the owner menu (body.has-onav) use that menu as the sidebar instead. */
.shell-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;background:var(--shell-bg);border-top:1px solid var(--shell-line);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));padding-left:calc(4px + env(safe-area-inset-left,0px));padding-right:calc(4px + env(safe-area-inset-right,0px))}
.shell-it{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;
  padding:0 2px;border:0;border-radius:10px;background:none;color:var(--shell-ink);font:inherit;font-size:.72rem;font-weight:700;line-height:1.15;
  text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shell-it.is-on{color:var(--shell-on)}
.shell-it.is-on svg{stroke-width:2.2}
.shell-it:active{background:rgba(255,255,255,.06)}
.shell-it:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.shell-it .ui-badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:.66rem;box-shadow:0 0 0 2px var(--shell-bg)}
.shell-it > span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
body:has(.shell-bar){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
/* The header's screen links duplicate the bar, so they go. */
body:has(.shell-bar) .sth .sth-nav,body:has(.shell-bar) .sth .sth-goto{display:none!important}

/* Day form (index.php): a slim bar inside an appointment, the form's own
   Submit bar sits on top of it; the full bar on the Today step. */
body.is-wiz.on-today{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
body.is-wiz.on-today .bar{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
body.is-wiz:not(.on-today) .shell-bar{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}
body.is-wiz:not(.on-today) .shell-it{min-height:40px;flex-direction:row;gap:5px;font-size:.7rem}
body.is-wiz:not(.on-today) .shell-it svg{width:18px;height:18px}
body.is-wiz:not(.on-today) .shell-it .ui-badge{position:static;box-shadow:none}
body.is-wiz:not(.on-today) .bar{bottom:calc(44px + env(safe-area-inset-bottom,0px))}
body.is-wiz:not(.on-today) .shell-fab{display:none}
@media (max-width:420px){ body.is-wiz:not(.on-today) .shell-it > span{display:none} }

/* The "+" button: bottom right, above the bar, thumb reach. */
.shell-fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:56;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;min-width:56px;padding:0 18px;border-radius:28px;border:0;
  background:var(--gold);color:#0b1c33;font:inherit;font-size:.95rem;font-weight:800;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 24px -6px rgba(11,28,51,.55),0 2px 6px rgba(11,28,51,.25)}
.shell-fab:hover{background:#c09a62}
.shell-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.shell-fab svg{width:24px;height:24px}
.shell-fab .shell-fab-l{display:none}
@media (min-width:600px){ .shell-fab .shell-fab-l{display:inline} }
@media print{ .shell-bar,.shell-fab,.ui-sheet{display:none!important} }

@media (min-width:1024px){
  /* Sidebar. */
  .shell-bar{top:var(--sth-h,56px);bottom:0;right:auto;width:var(--shell-w);flex-direction:column;gap:2px;padding:14px 10px;
    border-top:0;border-right:1px solid var(--shell-line);overflow-y:auto}
  .shell-it{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;font-size:.92rem;font-weight:600;color:#c9d3e0;text-align:left}
  .shell-it:hover{background:rgba(255,255,255,.06);color:#fff}
  .shell-it.is-on{background:rgba(176,141,87,.22);color:#fff}
  .shell-it .ui-badge{position:static;margin-left:auto;box-shadow:none}
  .shell-it svg{width:24px;height:24px}   /* an icon beside every link, 24px like the owner's menu (owner 2026-10-15) */
  body:has(.shell-bar){padding-bottom:0}
  body:not(.has-onav):has(.shell-bar){padding-left:var(--shell-w)}
  body:not(.has-onav):has(.shell-bar) .sth{margin-left:calc(-1 * var(--shell-w))}
  body:not(.has-onav):has(.shell-bar) .sth .sth-in{max-width:none;padding-left:calc(var(--shell-w) + 24px)}
  /* Brand cell (owner 2026-10-11): the ST/GT CRM logo fills the top of the sidebar
     column, at the viewport's left edge, centred over the menu, and stays there
     (the header is sticky). This is the technician sidebar's (--shell-w); the
     owner menu's own cell is in pay_owner_nav_css() (payout-ownernav.php). */
  .sth-bar{position:relative}
  body:not(.has-onav):has(.shell-bar) .sth-brand{position:absolute;left:0;top:0;bottom:0;width:var(--shell-w);box-sizing:border-box;z-index:1;
    background:var(--shell-bg);border-right:1px solid var(--shell-line)}
  /* The gold line under the header (payout-header.php) runs unbroken under the logo cell: where a
     sidebar column exists it starts at full strength instead of fading in from the left edge.
     (The owner's screens, .is-admin, already have the solid 2px line.) */
  body.has-onav .sth:not(.is-admin)::after,body:not(.has-onav):has(.shell-bar) .sth:not(.is-admin)::after{
    background:linear-gradient(90deg,rgba(176,141,87,.55),rgba(176,141,87,.55) 82%,rgba(176,141,87,0))}
  body.is-wiz .shell-bar .shell-it{flex-direction:row;min-height:44px;font-size:.92rem}
  body.is-wiz:not(.on-today) .shell-it > span{display:inline}
  body.is-wiz.on-today .bar,body.is-wiz:not(.on-today) .bar{bottom:0;left:var(--shell-w)}
  body.has-onav.is-wiz.on-today .bar,body.has-onav.is-wiz:not(.on-today) .bar{left:216px}   /* the owner's menu is 216px wide */
  body.is-wiz .shell-fab{display:none}
  .shell-fab{bottom:24px;right:24px}
  /* A page whose content fits above the "+": no scroll bar (crm.js fitPage, owner 2026-10-11). */
  html.ui-fit{overflow-y:hidden}
  /* The owner's own menu is the sidebar on his pages. */
  body.has-onav .shell-bar{display:none}
}

/* ------------------------------------------------------- 5b. page width */
/* One content column for every screen that has the sidebar (owner 2026-10-11: "screens are not full and
   look out of place"). It starts at the sidebar's edge and fills the dark area up to --page-max, with the
   dashboard's own gutters, so the left and right edges line up from page to page. Each page used to set
   its own centred width (460 to 1320px). The owner dashboard (page-css/owner.css) already does the same.
   From 768px (a tablet) the column is full width; on a phone each page keeps its own phone layout.
   A step-by-step phone form (the day form) puts class ui-narrow on <body> to keep its narrow column.
   Same widths as the dashboard: 1480px, and 1840px on screens 1700px and wider (payout-today-board-html.php).
   Only the top and sides are set here; each page keeps its own bottom space for the "+" button. The
   selector is kept low on purpose (:where) so a page can still narrow itself deliberately, with a
   body-qualified rule such as `body.on-thread .wrap` or `html body .wrap` (a plain `.wrap{max-width}` loses). */
:root{--page-max:1480px;--page-pad:32px}
@media (min-width:1700px){ :root{--page-max:1840px} }
@media (min-width:768px){
  html :where(body:has(.shell-bar):not(.ui-narrow)) :is(.wrap,.ap-wrap){max-width:var(--page-max);margin:0;padding-top:22px;padding-left:var(--page-pad);padding-right:var(--page-pad)}
}
/* Cards side by side where there is room: each column at least 440px wide, one column on a phone.
   A heading, a paragraph, a tab row or anything marked ui-span takes the full row. */
.ui-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;align-items:start}
.ui-cols > :is(h1,h2,h3,nav,p,.ui-span){grid-column:1 / -1;margin-bottom:0}
.ui-cols > :is(.card,.ap-card,.ui-card){margin:0}
/* Same idea for cards of very different heights: they fill each column top to bottom, no gaps. */
.ui-masonry{columns:2 440px;column-gap:16px}
.ui-masonry > *{break-inside:avoid;margin:0 0 16px}
.ui-masonry > :is(h1,h2,h3,nav,p,.ui-span){column-span:all}

/* Sheets: <dialog class="ui-sheet">. A bottom sheet on a phone, a centred
   panel on a desktop. Native dialog: focus is trapped, Escape closes it. */
.ui-sheet{width:100%;max-width:100%;max-height:min(86vh,720px);margin:auto 0 0;padding:0;border:0;border-radius:18px 18px 0 0;
  background:var(--surface);color:var(--ink);box-shadow:var(--ui-shadow-lg);overflow:hidden}
.ui-sheet[open]{display:flex;flex-direction:column}
.ui-sheet::backdrop{background:rgba(8,17,29,.55)}
.ui-sheet-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:2px solid var(--gold,#B08D57)}
.ui-sheet-h h2{margin:0;font-size:1.08rem;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:0}
.ui-sheet-x{margin-left:auto}
.ui-sheet-b{padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.ui-sheet-grip{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:var(--line)}
.ui-sheet-g{margin:6px 0 4px}
.ui-sheet-g > h3{margin:12px 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ui-sheet-g ul{list-style:none;margin:0;padding:0}
.ui-sheet-a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem}
.ui-sheet-a:hover,.ui-sheet-a:focus-visible{background:var(--surface-2)}
.ui-sheet-a[aria-current]{background:rgba(176,141,87,.16)}
.ui-sheet-a svg{flex:0 0 auto;color:var(--gold-text)}   /* an icon beside every More / New link (payout-icons.php) */
.ui-sheet-a.is-danger svg{color:var(--bad)}
.ui-sheet-a small{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}
.ui-sheet-a .ui-badge{margin-left:auto}
.ui-sheet-a.is-danger{color:var(--bad)}
@media (min-width:700px){
  .ui-sheet{width:min(520px,calc(100vw - 32px));margin:auto;border-radius:16px}
  .ui-sheet-grip{display:none}
}
/* One look for every pop-up window (owner 2026-10-12): a gold edge, a soft gold glow and the usual drop shadow, and a gold line under the
   title where there is one. Sheets (More, New, Search, Confirm, Write, receipt, on my way), the email and estimate pop-ups, Ask AI, and the
   small question windows (merge/remove client, planner, lost reason). The photo viewers (.cl-lb .c2-lb .ld-lb) are pictures, not windows,
   and keep their own look. Written as dialog.x so it beats the page-level rules for .c2-dlg and .pl-dlg. */
dialog.ui-sheet,dialog.bd-pop,dialog.ask-pop,dialog.c2-dlg,dialog.pl-dlg{box-sizing:border-box;border:2px solid var(--gold,#B08D57);
  box-shadow:0 0 0 5px rgba(176,141,87,.22),0 24px 64px rgba(0,0,0,.5)}
@media (max-width:699px){
  dialog.ui-sheet{border-bottom-width:0}   /* a bottom sheet sits on the screen edge */
  dialog.ui-sheet.ui-search{border-top-width:0;border-bottom-width:2px}   /* the search drops from the top */
}
@media (prefers-reduced-motion: no-preference){
  .ui-sheet[open]{animation:uiUp .18s ease-out}
  @keyframes uiUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
}

/* -------------------------------------------------------------- 6. search */
.sth-search{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;margin-right:8px;flex:0 0 auto;border-radius:999px;
  border:1px solid #26344a;background:transparent;color:#cdd7e4;cursor:pointer;padding:0}
.sth-search:hover{background:rgba(255,255,255,.06);border-color:#33445f;color:#fff}
.sth-search:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sth-search + .sth-menu{margin-left:0}
.sth-search kbd{display:none}
@media (min-width:1024px){
  .sth-search{width:auto;padding:0 12px 0 10px;gap:8px;display:inline-flex;align-items:center;font:inherit;font-size:.82rem;color:#93a1b5;min-width:220px;justify-content:flex-start}
  .sth-search .sth-search-l{display:inline}
  .sth-search kbd{display:inline-block;margin-left:auto;padding:1px 6px;border:1px solid #33445f;border-radius:5px;font:inherit;font-size:.72rem;color:#93a1b5}
}
.sth-search-l{display:none}
/* Ask AI, beside the search (owner 2026-10-12). Owner only, printed by pay_ask_button(). The header is navy in every theme, so
   the colours are fixed: gold text on navy is 9:1. An icon circle on a phone, icon and name from 1024px. */
.sth-ask{display:inline-grid;place-items:center;width:40px;height:40px;margin-right:2px;flex:0 0 auto;border-radius:999px;padding:0;
  border:1px solid rgba(176,141,87,.6);background:transparent;color:#d8b98a;text-decoration:none;cursor:pointer}
.sth-ask:hover{background:rgba(176,141,87,.14);border-color:#B08D57;color:#ecd2a6}
.sth-ask:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sth-ask.is-on{background:rgba(176,141,87,.2);border-color:#B08D57}
.sth-ask-l{display:none}
@media (min-width:1024px){
  .sth-ask{width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 11px;font:inherit;font-size:.86rem;font-weight:600}
  .sth-ask .sth-ask-l{display:inline}
}
.ui-search{margin:0 auto auto;border-radius:0 0 18px 18px;max-height:92vh}
@media (min-width:700px){ .ui-search{margin:10vh auto auto;border-radius:16px;width:min(620px,calc(100vw - 32px))} }
.ui-search-in{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.ui-search-in svg{flex:0 0 auto;color:var(--muted)}
.ui-search-in input{flex:1 1 auto;min-width:0;min-height:var(--ui-tap);border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:17px!important}
.ui-search-in input:focus-visible{outline:0}
.ui-search-b{padding:6px 8px calc(12px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.ui-search-b h3{margin:10px 8px 4px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ui-search-r{display:flex;align-items:center;gap:10px;padding:2px 0;border-radius:10px}
.ui-search-r[aria-selected=true]{background:var(--surface-2)}
.ui-search-r > a:first-child{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 8px;color:var(--ink);text-decoration:none;border-radius:10px}
.ui-search-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-text);font-size:.78rem;font-weight:800}
.ui-search-t{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-search-s{display:block;font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-search-r .ui-ib{margin-right:4px}
.ui-search-note{margin:10px 8px;color:var(--muted);font-size:.9rem}
.ui-search-foot{margin:8px 8px 0;font-size:.78rem;color:var(--muted)}
/* Global search (owner 2026-10-15): grouped rows with a number, a status and an amount on the right. */
.ui-search-tx{flex:1 1 auto;min-width:0}
.ui-search-m{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;max-width:46%;text-align:right;line-height:1.25}
.ui-search-m b{font-weight:800;font-variant-numeric:tabular-nums}
.ui-search-m small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;color:var(--muted)}
.ui-search-tone-ok{color:var(--ok)!important}.ui-search-tone-warn{color:var(--warn)!important}.ui-search-tone-bad{color:var(--bad)!important;font-weight:700}
.ui-search-av--code{border-radius:10px;font-size:.58rem;letter-spacing:0}
.ui-search-snip{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-search-more{margin:2px 8px 6px;font-size:.88rem}
.ui-search-more a,.ui-search-expand{color:var(--gold-text);font:inherit;font-weight:700;background:none;border:0;padding:6px 0;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media (max-width:1023px){ .ui-search-foot{display:none} }

/* ------------------------------------------------------ 7. toast, confirm */
.ui-toasts{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:200;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;width:min(480px,calc(100vw - 24px));pointer-events:none}
@media (min-width:1024px){ .ui-toasts{bottom:24px} }
.ui-toast{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#0b1c33;color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);font-size:.95rem;font-weight:600;pointer-events:auto}
.ui-toast--ok{box-shadow:inset 4px 0 0 #4fc38a,0 10px 30px -8px rgba(0,0,0,.5)}
.ui-toast--bad{box-shadow:inset 4px 0 0 #f2777a,0 10px 30px -8px rgba(0,0,0,.5)}
.ui-toast button{margin-left:auto;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:800;cursor:pointer}
@media screen and (prefers-color-scheme: dark){ .ui-toast{background:#1d2b44} }
.ui-confirm .ui-sheet-b p{margin:4px 0 14px;font-size:1rem;line-height:1.45;white-space:pre-line}
.ui-confirm-acts{display:flex;gap:10px;flex-wrap:wrap-reverse;justify-content:flex-end}
.ui-confirm-acts .ui-btn{flex:1 1 140px}

/* "Text the client?" card (assets/sms.js, 2026-10-09) */
.sms-card{margin:14px 0 0;padding:14px;border:1px solid var(--line);border-radius:var(--ui-r,12px);background:var(--card,var(--surface))}
.sms-card .sms-h{margin:0 0 2px;font-weight:800;color:var(--ink)}
.sms-card .sms-to{margin:0 0 8px;font-size:.9rem;color:var(--muted)}
.sms-card .sms-body{width:100%;box-sizing:border-box;min-height:88px;padding:10px;border:1px solid var(--field-line,var(--line));border-radius:10px;background:var(--field,var(--surface));color:var(--ink);font:inherit;line-height:1.4;resize:vertical}
.sms-card .sms-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sms-card .sms-send,.sms-card .sms-own{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.sms-card .sms-send{border:1px solid var(--gold);background:var(--gold);color:#12203a}
.sms-card .sms-send:disabled{opacity:.6;cursor:default}
.sms-card .sms-own{border:1px solid var(--line);background:transparent;color:var(--ink)}
.sms-card .sms-msg{margin:10px 0 0;font-weight:700;color:var(--ok)}
.sms-card .sms-msg.bad{color:var(--bad)}

/* Write button and its sheet (R1 writing assistant, assets/ai-write.js). Nothing here sends. */
.aiw-btn{min-height:44px}
.aiw .ui-sheet-b{display:flex;flex-direction:column;gap:10px}
.aiw-lbl{font-size:.8rem;color:var(--muted);margin-bottom:2px}
.aiw .ui-sheet-b{overflow-x:hidden}
.aiw-txt{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);color:var(--ink);border-radius:10px;padding:8px 10px;max-height:22vh;overflow:auto}
.aiw-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aiw-acts .ui-btn,.aiw-lang{min-height:40px}
.aiw-lang{font:inherit;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.aiw-status{margin:0;min-height:1.4em}
.aiw-hint{margin:0;font-size:.82rem;color:var(--muted)}
.aiw-notes{margin:0;font-size:.82rem;color:var(--muted);border-left:3px solid var(--line);padding-left:8px}
.aiw-acts .ui-btn[aria-pressed="true"]{border-color:var(--ink);font-weight:700}
.aiw-diff{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:10px;padding:8px 10px;max-height:24vh;max-height:24dvh;overflow:auto}
.aiw-diff ins{background:rgba(15,123,61,.18);color:inherit;text-decoration:none}
.aiw-diff del{background:rgba(179,38,30,.18);color:inherit}
.aiw-flags{margin:0;padding-left:18px;color:var(--gold-text)}
.aiw-edit{font:inherit;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--ink)}
/* Phone fit (owner 2026-10-12: "the recommendation is visually blocked, I cannot confirm it"): the sheet is as tall as the screen the
   person can SEE (dvh, and ai-write.js follows the on-screen keyboard), the suggestion is scrolled into view when it arrives, and
   Accept / Regenerate / Discard are one slim row, not a tall block covering the text. */
.aiw{max-height:min(92vh,720px);max-height:min(92dvh,720px)}
.aiw .ui-sheet-b{min-height:0;flex:1 1 auto;padding-bottom:0}
/* The cause of the squeezed suggestion: in this column the boxes that scroll (your text, the suggestion) were allowed to shrink to
   a line to fit the screen. They keep their size now and the sheet scrolls instead. */
.aiw .ui-sheet-b > *{flex-shrink:0}
.aiw-edit{min-height:7rem;scroll-margin-top:8px}
.aiw-status{scroll-margin-top:4px}
.aiw-foot{display:flex;flex-wrap:nowrap;gap:6px;position:sticky;bottom:0;z-index:1;background:var(--surface);border-top:1px solid var(--line);
  margin:0 -16px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}
.aiw-foot .ui-btn{min-height:44px;flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
.aiw-foot .ui-btn--primary{flex:1.6 1 0}
/* Owner opt-ins: "Use the customer's last messages" and "Remember something for next time?" (all taps at least 44px) */
.aiw-ctx{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;cursor:pointer}
.aiw-ctx input{width:22px;height:22px;flex:none}
.aiw-learn{display:flex;flex-direction:column;gap:8px}
.aiw-cand{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.aiw-cand span{flex:1 1 12rem;overflow-wrap:anywhere}
.aiw-cand .ui-btn,.aiw-learn .ui-btn{min-height:44px}
.aiw-type{display:flex;flex-direction:column;gap:6px}
.aiw-type input{font:inherit;min-height:44px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--ink)}

/* Ask AI (owner only; markup in public_html/ask.php, chat in assets/ask.js). The same panel is the page ask.php and, on a desktop
   screen, the pop-up opened by the top-bar button (crm.js). Everything follows the theme colours, so it reads in light and dark. */
.ask-hint{color:var(--muted)}
.ask-intro{margin:0 0 12px}
.ask-note{margin:0;font-size:.88rem}
.ask-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 14px}
#askLog{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.ask-m{border-radius:12px;padding:12px 14px;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.ask-q{align-self:flex-end;max-width:88%;background:#0b1c33;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ask-a{align-self:stretch;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ask-wait{color:var(--muted)}
.ask-bad{color:var(--bad);font-weight:600}
.ask-c{display:inline-block;margin:0 2px;padding:0 5px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.85em}
.ask-src,.ask-warn{margin:8px 0 0;font-size:.88rem;color:var(--muted);white-space:normal}
.ask-warn{color:var(--warn)}
.ask-src a{color:inherit}
#askForm{display:flex;flex-direction:column;gap:10px}
#askQ{font:inherit;padding:12px;border:1px solid var(--field-line,#cfc6b5);border-radius:10px;width:100%;min-height:76px;resize:vertical;background:var(--field,#fff);color:var(--ink)}
.ask-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ask-row label{display:inline-flex;gap:8px;align-items:center;min-height:44px}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.ask-chip{border:1px solid var(--field-line,#cfc6b5);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:.92rem;cursor:pointer;min-height:40px}
.ask-chip:hover{border-color:var(--gold);color:var(--gold-text,#7a5c2e)}
/* The pop-up: a centred window the width of the panel; the answers scroll inside it, the question box stays in view. */
.ask-pop{width:min(900px,calc(100vw - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:0;border-radius:16px;
  background:var(--bg);color:var(--ink);overflow:hidden}
.ask-pop[open]{display:flex;flex-direction:column}
.ask-pop::backdrop{background:rgba(5,10,20,.6)}
.ask-pop-h{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px;background:var(--surface);border-bottom:2px solid var(--gold,#B08D57)}
.ask-pop-h b{font-size:1.05rem}
.ask-pop-page{margin-left:auto;font-size:.88rem;color:var(--gold-text,#7a5c2e)}
.ask-pop-x{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.ask-pop-x:hover{background:var(--surface-2)}
.ask-pop-b{padding:14px 16px 16px;overflow-y:auto;overscroll-behavior:contain}
.ask-pop-b #askLog{max-height:46vh;max-height:46dvh;overflow-y:auto}
@media print{ .ask-pop{display:none!important} }

/* The email pop-up (Today and the client record; script in crm.js). Moved here from the Today board 2026-10-12. */
.bd-pop{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border-radius:16px;
  background:var(--bg);color:var(--ink);overflow:auto}
.bd-pop::backdrop{background:rgba(5,10,20,.6)}
.bd-pop-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;background:var(--surface);border-bottom:2px solid var(--gold,#B08D57)}
.bd-pop-x{width:44px;height:44px;border:0;border-radius:10px;background:none;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.bd-pop-b{padding:12px}
.bd-pop-b .em-b.go{background:var(--gold,#B08D57);border-color:var(--gold,#B08D57);color:#0b1c33}
.bd-pop-b .em-b,.bd-pop-b .em-f select,.bd-pop-b .em-f input,.bd-pop-b .em-f textarea{border-color:var(--field-line,var(--line))}
.bd-pop-b .msg{border-radius:10px;padding:10px 14px;margin:0 0 12px;font-weight:600}
.bd-pop-b .msg.bad{background:rgba(242,119,122,.12);color:var(--bad)}

/* The estimate pop-up on Today (a follow-up's estimate number opens it; script in crm.js, view in doc-view.php). */
.bd-pop-doc{width:min(900px,calc(100vw - 24px))}
.bd-pop-doc .bd-pop-b{padding:12px 12px 16px}
.dv-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 4px}
.dv-h h3{margin:0;font-size:1.25rem;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.dv-meta{margin:0 0 10px;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.dv-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dv-sheet{background:#e9ecf0;border-radius:12px;padding:12px;overflow-x:auto}
.dv-sheet .dk-paper{padding:28px 30px;box-shadow:none}
.dv-none{margin:0;color:var(--muted);font-weight:700}
@media (max-width:640px){.dv-sheet{margin:0 -12px;padding:8px 0;border-radius:0}.dv-sheet .dk-paper{padding:18px 14px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dv-sheet{background:#1b2533}}

/* ------------------------------------------------------------ text boxes
 * Owner 2026-10-13: a text box has ONE fixed starting size, no drag handle to change it, and grows by itself as more lines
 * are typed, up to a limit, then scrolls inside. One rule for every page (the older per-page "resize: vertical" rules lose
 * to the !important). The growing is the "text boxes" script at the end of crm.js (book.php and the client record keep
 * their own, marked .bk-in / data-grow). */
textarea{resize:none!important;overflow-y:auto;max-height:min(50vh,340px)}

/* Text and Call through the CRM and Twilio (owner 2026-10-15, assets/reach.js): ONE small sheet for every Text and Call button the owner and
   Ilia see. 44px targets, wraps at 360px, the same look as the other sheets (the gold outline comes from the shared dialog rule). */
.rc-sheet .rc-b{display:flex;flex-direction:column;gap:12px}
.rc-sheet p{margin:0;overflow-wrap:anywhere}
.rc-sheet .rc-to{font-weight:800;font-size:1.02rem}
.rc-sheet .rc-line{font-size:1rem}
.rc-sheet .rc-muted{color:var(--muted);font-size:.9rem}
.rc-sheet .rc-bad,.rc-sheet .rc-msg.is-bad{color:var(--bad);font-weight:600}
.rc-sheet .rc-warn{padding:10px 12px;border-radius:10px;background:rgba(138,90,0,.10);color:var(--warn);font-size:.92rem}
.rc-sheet .rc-done{padding:12px;border-radius:10px;background:rgba(29,122,70,.10);color:var(--ok);font-weight:700}
.rc-sheet .rc-from{display:flex;flex-direction:column;gap:6px}
.rc-sheet .rc-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-sheet .rc-pick .ui-btn{flex-direction:column;gap:2px;height:auto;min-height:56px;padding:8px 10px;white-space:normal;text-align:center}
.rc-sheet .rc-pick small{font-weight:500;color:var(--muted)}
.rc-sheet .rc-link{align-self:flex-start;min-height:44px;padding:0 2px;border:0;background:none;color:var(--info);font:inherit;font-size:.92rem;text-decoration:underline;cursor:pointer}
.rc-sheet .rc-thread{display:flex;flex-direction:column;gap:6px;max-height:30vh;overflow-y:auto}
.rc-sheet .rc-m{max-width:88%;padding:7px 11px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;overflow-wrap:anywhere}
.rc-sheet .rc-m.is-out{align-self:flex-end;background:#dcebff;border-color:#c5dbf7;color:#0b1c33}
.rc-sheet .rc-m small{display:block;margin-top:1px;font-size:.74rem;color:var(--muted)}
.rc-sheet .rc-m.is-out small{color:#5b6778}
.rc-sheet .rc-ta{width:100%;min-height:96px;padding:10px;border:1px solid var(--field-line,var(--line));border-radius:12px;background:var(--field,var(--surface));color:var(--ink);font:inherit}
.rc-sheet .rc-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rc-sheet .rc-count{margin-left:auto;color:var(--muted);font-size:.82rem}
.rc-sheet .rc-inrow{display:flex;gap:8px;flex-wrap:wrap}
.rc-sheet .rc-in{flex:1 1 160px;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--field-line,var(--line));border-radius:12px;background:var(--field,var(--surface));color:var(--ink);font:inherit}
@media (prefers-color-scheme:dark){ .rc-sheet .rc-m.is-out{background:#17325a;border-color:#24477a;color:var(--ink)} .rc-sheet .rc-m.is-out small{color:var(--muted)} }