/* ui-v5: icon rail, Find or ask, record pages (header, quick actions, tabs, full page, related cards with "+ Add",
   overview cards), service plans, sites and equipment, client hub, customize settings. LoonStack tokens only. */

/* ---------- skip link ---------- */
.skip-link{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:-80px;z-index:80;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:650;text-decoration:none}
.skip-link:focus{top:max(8px,env(safe-area-inset-top,0px))}

/* ---------- search trigger in the top bar ---------- */
button.search{cursor:pointer;text-align:left;font:inherit;color:var(--muted);min-height:36px}
button.search:hover{border-color:var(--muted)}
.search .search-ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.top button.search .search-ph{display:none}}

/* ---------- left icon rail (desktop, above 860px) ---------- */
.side .grp span{display:block}
.side-foot{display:flex;flex-direction:column;gap:8px}
.rail-pin{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 10px;font-weight:600;font-size:.8125rem;text-align:left;min-height:36px}
.rail-pin:hover{border-color:var(--muted)}
.rail-pin[aria-pressed="true"]{background:var(--lake-soft);color:var(--lake);border-color:transparent}
.rail-tip{position:fixed;z-index:70;background:var(--ink);color:var(--bg);font-size:.75rem;font-weight:650;padding:5px 9px;border-radius:6px;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow)}
.rail-tip[hidden]{display:none}
@media (min-width:861px){
  /* Wave 8 M137: the rail opens over the page. The grid column stays 68px, the menu is always full width and clip-path
     shows only its first 68px until it opens, so icons never move and the page never shifts. Opening is a little slower
     than closing; Reduce Motion turns both off. Names stay in the page (opacity) for screen readers. */
  .shell.rail{grid-template-columns:68px minmax(0,1fr)}
  .shell.rail .side{width:var(--side);position:relative;z-index:35;overflow-x:hidden;clip-path:inset(0 calc(100% - 68px) 0 0);transition:clip-path .16s cubic-bezier(.4,0,.2,1),box-shadow .16s ease}
  .shell.rail .side.open{clip-path:inset(0 -24px 0 0);box-shadow:var(--shadow);transition:clip-path .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .22s ease}
  .shell.rail .side .brand{padding:16px 16px 12px 17px}
  .shell.rail .side .nav{padding:6px 10px 16px}
  .shell.rail .side .nav button{padding:0 15px;min-height:44px;white-space:nowrap}
  .shell.rail .side .nav button .ico{width:18px;height:18px}
  .shell.rail .side .grp{position:relative;white-space:nowrap}
  .shell.rail .side .brand-t,.shell.rail .side .nav button .nl,.shell.rail .side .grp span,.shell.rail .side .side-note,.shell.rail .side .rail-pin span{transition:opacity .12s ease,transform .16s var(--ease-out,ease)}
  .shell.rail .side.open .brand-t,.shell.rail .side.open .nav button .nl,.shell.rail .side.open .grp span,.shell.rail .side.open .side-note,.shell.rail .side.open .rail-pin span{transition-delay:.04s}
  .shell.rail .side:not(.open) .brand-t,.shell.rail .side:not(.open) .side-note,.shell.rail .side:not(.open) .grp span,.shell.rail .side:not(.open) .rail-pin span{opacity:0}
  .shell.rail .side:not(.open) .nav button .nl{opacity:0;transform:translateX(-6px)}
  .shell.rail .side:not(.open) .grp::before{content:"";position:absolute;left:20px;width:28px;top:calc(50% + 5px);border-top:1px solid var(--line)}
  .shell.rail .side:not(.open) .nav button .ct{position:absolute;top:4px;left:36px;margin:0;padding:0 5px}
  .shell.rail .side .side-foot{padding:12px 14px}
  .shell.rail .side .rail-pin{white-space:nowrap;min-height:44px;padding:7px 10px}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){
  .shell.rail .side,.shell.rail .side.open,.shell.rail .side .brand-t,.shell.rail .side .nav button .nl,.shell.rail .side .grp span,.shell.rail .side .side-note,.shell.rail .side .rail-pin span{transition:none}
  .shell.rail .side:not(.open) .nav button .nl{transform:none}
}
@media (max-width:860px){.rail-pin{display:none}}
@media (min-width:700px) and (max-width:860px) and (min-height:600px){.side-note{display:none}}

/* ---------- Find or ask ---------- */
.modal.find-modal{top:12vh;top:12dvh;transform:translateX(-50%);width:min(640px,calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
.find{display:flex;flex-direction:column;gap:10px}
.find-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--sunk);color:var(--muted)}
.find-box:focus-within{outline:2px solid var(--lake);outline-offset:1px}
.find-box input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font-size:1rem;padding:11px 0}
.find-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 6px}
.find-chips button{min-height:32px;flex:none}
.find-box input:focus-visible{outline:none}
.find-list{display:flex;flex-direction:column;max-height:52vh;max-height:52dvh;overflow-y:auto;overscroll-behavior:contain}
.find-h{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:10px 8px 4px}
.find-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;min-height:44px;min-width:0}
.find-opt[aria-selected="true"]{background:var(--lake-soft)}
.find-opt .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.find-opt .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-opt .s{font-size:.7813rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--sunk);color:var(--lake);flex:none}
.find-opt[aria-selected="true"] .find-ic{background:var(--surface)}
.find-ty{font-size:.75rem;color:var(--muted);font-weight:600;flex:none}
.find-empty{color:var(--muted);padding:14px 8px}
.find-hint{margin:0;font-size:.75rem;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
@media (pointer:coarse){.find-hint{display:none}.find-chips button{min-height:44px}}
@media (max-width:640px){.modal.find-modal{top:max(12px,env(safe-area-inset-top,0px))}}

/* ---------- record page ---------- */
.drawer.crm-drawer.rec-full{width:100%;left:0}
.drawer.crm-drawer.rec-full .dbody{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.drawer.crm-drawer.rec-full .rec-wrap{max-width:1440px;margin:0 auto;width:100%}
.rec-head{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface)}
.rec-top{display:flex;gap:12px;align-items:center;min-width:0;flex-wrap:wrap}
.rec-top .grow{flex:1 1 220px;min-width:0}
.rec-name{font-family:var(--f-display);font-size:1.25rem;font-weight:750;line-height:1.2;overflow-wrap:anywhere;margin:0}
.rec-keys{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.8125rem;color:var(--muted);margin-top:4px;min-width:0}
.rec-keys>span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.rec-keys a{color:var(--lake)}
.rec-acts{display:flex;gap:6px;flex-wrap:wrap}
.rec-acts .btn{flex:0 1 auto}
.rec-acts .btn .ico{color:var(--lake)}
.rec-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rec-tabs{margin-bottom:4px}
.rec-panel[hidden]{display:none!important}
.rec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rec-card{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.rec-card h3{margin:0;font-size:.875rem}
.rec-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.rec-ch h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-card .row{padding:7px 2px}
.empty.mini{padding:12px 10px;gap:6px;font-size:.8125rem;border-style:dashed;width:100%;background:none;box-shadow:none;border-radius:var(--r)}
.empty.mini p{margin:0}
.btn.add{color:var(--lake);border-color:transparent;background:var(--lake-soft)}
.btn.add:hover{filter:brightness(.97)}
.crm-side-sec .crm-sh .btn.add{padding:3px 9px;font-size:.75rem}
.score{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.75rem;border-radius:99px;padding:2px 9px}
.score.s-good{background:var(--good-soft);color:var(--good)}.score.s-watch{background:var(--amber-soft);color:var(--amber)}.score.s-risk{background:var(--eye-soft);color:var(--eye)}
.score-big{display:flex;align-items:baseline;gap:8px}
.score-big b{font-family:var(--f-display);font-size:1.75rem;font-weight:750;letter-spacing:-.02em}
.why{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.8125rem}
.why li{display:flex;justify-content:space-between;gap:10px}
.why .pts{font-family:var(--f-mono);font-weight:600}
.why .pos{color:var(--good)}.why .neg{color:var(--eye)}
.hist{display:flex;flex-direction:column}
.hist .row .t{white-space:normal;overflow-wrap:anywhere}
.chan-list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.chan-row{display:flex;align-items:center;gap:6px;font-size:.8125rem;min-width:0;flex-wrap:wrap}
.chan-row .v{min-width:0;overflow-wrap:anywhere}
.chan-row .iconbtn{width:28px;height:28px}
.site{border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--sunk)}
.site .sn{font-weight:650;overflow-wrap:anywhere}
.site .kv{grid-template-columns:90px minmax(0,1fr)}
.eq{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px;font-size:.8125rem;min-width:0}
.eq .grow{min-width:0;overflow-wrap:anywhere}
.warn-soon{color:var(--amber);font-weight:600}
.hub-link{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hub-link input{flex:1 1 200px;min-width:0;font-family:var(--f-mono);font-size:.8125rem}
.cardpick{display:flex;flex-direction:column;gap:6px}
.cardpick label{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--ink);min-height:36px}
.cardpick input{width:18px;height:18px;accent-color:var(--lake)}
.cf-act{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.cf-act .field label{font-size:.75rem}
@media (max-width:860px){
  .rec-head{padding:12px}
  .rec-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .rec-acts .btn{justify-content:center;padding:7px 6px}
  .drawer.crm-drawer.rec-full .dbody{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .rec-full-btn{display:none!important}
}
@media (pointer:coarse){
  .rail-pin,.chan-row .iconbtn,.crm-side-sec .crm-sh .btn.add,.cardpick label,.rec-keys a,.rec-keys .crm-link,.chan-row a.v{min-height:44px}
  .rec-keys a,.rec-keys .crm-link,.chan-row a.v{display:inline-flex;align-items:center}
  .rec-keys{row-gap:0}
  .chan-row .iconbtn{width:44px}
}

/* ---------- service plans page and settings ---------- */
.sp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.sp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-badge{font-size:.75rem}
.cz{display:flex;flex-direction:column;gap:14px}
.cz-types{display:flex;flex-direction:column;gap:8px}
.cz-type{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:end}
.cz-num{display:grid;grid-template-columns:120px minmax(0,1fr) 140px;gap:10px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:10px}
.cz-num:last-child{border-bottom:0}
.cz-prev{font-family:var(--f-mono);font-size:.8125rem;color:var(--muted);padding-bottom:10px}
.cz-score{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
@media (max-width:640px){.cz-num{grid-template-columns:1fr}.cz-type{grid-template-columns:1fr 90px auto}.cz-prev{padding-bottom:0}}
.chg-bars{display:flex;flex-direction:column;gap:6px}

/* The record header shows the name; the panel's own title stays for screen readers (the dialog's name). */
.drawer.crm-drawer .dhead h2,.drawer.crm-drawer .dhead>div>div.muted{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.drawer.crm-drawer .dhead .toolbar{margin-top:0!important}
.drawer.crm-drawer .dhead{align-items:center}
.rec-wrap{display:flex;flex-direction:column;gap:14px}

/* ui-v5b: owner review points, where history starts, plan autopay, value on a date, task types */
.rv-h{margin-top:12px}.rv-h h4{margin:0;font-size:.875rem}
.rv-list{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.8125rem}
.rv-list li{display:flex;align-items:center;gap:10px}
.rv-list .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.rv-list .pts{font-family:var(--f-mono);font-weight:600;min-width:2.5rem}
.rv-list .pos{color:var(--good)}.rv-list .neg{color:var(--eye)}
.rv-list .rv-off{opacity:.6}.rv-list .rv-off .grow{text-decoration:line-through}
.hist-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 10px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.hist-note .ico{flex:none;margin-top:2px}
.ap-card .rec-ch h2{margin:0}
.ap-h3{margin:14px 0 6px;font-size:.875rem}
.ap-consent{margin:6px 0 10px;font-size:.8125rem}
.ap-consent summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.ap-consent p{margin:6px 0;overflow-wrap:anywhere}
.va .pf-ch h2{margin:0}
.va-tbl table{min-width:0}
.va-tbl th,.va-tbl td{white-space:nowrap}
.tk-type{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:none}
.tk-group{margin:10px 0 4px;font-size:.8125rem;color:var(--muted);font-weight:600}
.crm-chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.875rem;cursor:pointer}
.crm-chk input{width:20px;height:20px;accent-color:var(--lake)}
.ap-card .row .s{white-space:normal;overflow:visible;text-overflow:clip}
.va-tbl tbody th{background:transparent;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink)}