/* ============================================================
   JOIN People - design system (lifted from the JOIN Handover
   admin app so the two platforms are one visual system).
   Edit tokens or components here once; every page updates.
   The app shell (topbar + sidebar) lives in people-nav.js.
   ============================================================ */

/* Tokens + platform-wide components (buttons, chip, pills, tabs, toast)
   come from the shared base, so the admin and the client portal are one
   system. Only admin-specific styles live below - including the denser
   custom form controls (select caret, checkbox).
   base.css here is a DEPLOY COPY - the source of truth is
   ../portal/shared/base.css; re-copy after any design-system change. */
@import "base.css";

/* ---- Form controls (admin's denser variant) ---- */
select,input,textarea{font:inherit;font-size:12px;border:1px solid var(--border);border-radius:var(--radius);padding:6px 9px;background:var(--surface);color:var(--fg)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
textarea{resize:none;min-height:32px;overflow:hidden}

/* Selects: custom caret, no native chrome */
select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 9px center;background-size:11px;cursor:pointer}
select:hover{border-color:var(--border-strong)}

/* Checkboxes: custom box + tick */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;min-width:16px;padding:0;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);cursor:pointer;vertical-align:middle;transition:background .12s,border-color .12s}
input[type=checkbox]:hover{border-color:var(--muted)}
input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Dates: mono face + calendar icon spacing (same treatment as the portal) */
input[type=date]{font-family:var(--font-mono);font-size:12px}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:4px;opacity:.6;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Disabled controls */
select:disabled,input:disabled,textarea:disabled{opacity:.5;cursor:default}

/* ---- Combobox (AdminShell.combobox): select-like trigger, panel with its
   own search row above the full option list ---- */
.combo-input{cursor:pointer;caret-color:transparent;appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 9px center;background-size:11px}
.combo-input:hover{border-color:var(--border-strong)}
.combo-panel{position:fixed;z-index:130;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;min-width:200px}
.combo-search{flex:none;padding:6px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.combo-search input{width:100%;background:var(--surface)}
.combo-list{flex:1;overflow:auto;padding:4px}
.combo-item{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--fg)}
.combo-item.active{background:var(--surface-2)}
.combo-sub{font-size:10px;color:var(--muted)}
.combo-empty{padding:10px;font-size:12px;color:var(--muted)}

/* ---- Buttons: .btn / .btn-primary are in base; admin adds ghost + danger ---- */
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted);padding:7px 8px}
.btn-ghost:hover{background:var(--surface-2);color:var(--fg);border-color:transparent}
.btn[disabled]{opacity:.5}
.btn-danger{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--danger-bg);background:var(--surface);color:var(--danger);font-size:12px;font-weight:500;padding:8px 14px;border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.btn-danger svg{opacity:.85}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-danger.armed{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}

/* ---- Page scaffolding ---- */
.main{padding:24px 26px;min-width:0}
h1{font-size:20px;font-weight:600;margin-bottom:2px}
.hint{font-size:12px;color:var(--muted);margin-top:2px;max-width:760px}
.bar{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap}
.bar input[type=search]{flex:1;max-width:320px}
.bar .spacer{flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:auto}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse}
th{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
td input,td textarea,td select{width:100%;min-width:110px;border-color:transparent;background-color:transparent}
td input:hover,td textarea:hover,td select:hover{border-color:var(--border)}
td input:focus,td textarea:focus,td select:focus{background-color:var(--surface)}
td input[type=checkbox]{width:16px;min-width:16px}
tr.grouphead td{background:var(--surface-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
tr.grouphead.drop-into td{box-shadow:inset 0 0 0 2px var(--accent)}
tr.drow.dragging{opacity:.4}
tr.drow.drop-before td{box-shadow:inset 0 2px 0 0 var(--accent)}
tr.drow.drop-after td{box-shadow:inset 0 -2px 0 0 var(--accent)}
tr.speclink{cursor:pointer}
tr.speclink:hover td{background:var(--surface-2)}
.cellname{font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spec-col{max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:30px 14px;text-align:center;color:var(--muted)}

/* ---- Drag handle ---- */
.gripcell{width:30px;padding-left:10px;padding-right:0}
.grip{cursor:grab;color:var(--muted-2);font-size:15px;line-height:1;padding:2px 3px;border-radius:4px;user-select:none}
.grip:hover{color:var(--fg);background:var(--surface-2)}
.grip:active{cursor:grabbing}

/* ---- Row-end: save status + delete ---- */
.rowend{white-space:nowrap;width:1%;text-align:right}
.rstat{display:inline-block;font-size:10px;font-weight:600;margin-right:8px;vertical-align:middle;transition:opacity .3s;min-width:44px;text-align:right}
.rstat.dirty{color:var(--gold-fg)}
.rstat.saving{color:var(--muted)}
.rstat.saved{color:var(--success-fg)}
.rstat.err{color:var(--danger-fg)}
.rstat.fade{opacity:0}
.del{border:1px solid transparent;background:none;cursor:pointer;color:var(--muted-2);font-size:12px;padding:4px 8px;border-radius:5px}
.del:hover{color:var(--danger);background:var(--danger-bg)}
.del.armed{color:#fff;background:var(--danger);border-color:var(--danger);font-weight:600}

/* ---- Pills, contact chip, level pill, ref tag and .tab come from base ---- */
/* Saved-views tab container (the .tab buttons live in base) */
.tabs{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--border)}
#segTabs{margin:14px 0 0}
#segTabs:empty{display:none}
.tab .count{color:var(--muted-2);font-weight:400;font-size:10px;margin-left:5px}
/* Bulk-select column + action bar */
.selcell{width:32px;padding-left:12px;padding-right:0}
.bulkbar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:10px 0 0;background:var(--accent);color:#fff;border-radius:var(--radius);font-size:12px}
.bulkbar.hidden{display:none}
.bulkbar .bn{font-weight:600}
.bulkbar .lbl{color:rgba(255,255,255,.7)}
.bulkbar .sp{flex:1}
.bulkbar button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:5px 11px;font-size:12px;cursor:pointer}
.bulkbar button:hover{background:rgba(255,255,255,.22)}
.bulkbar button.danger{background:var(--danger);border-color:var(--danger)}
.bulkbar button.danger.armed{background:#fff;color:var(--danger);font-weight:600}
.bulkbar select{background-color:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:5px 26px 5px 10px;font-size:12px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
.bulkbar select option{color:var(--fg)}
.bulkbar input.combo-input{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:5px 26px 5px 10px;font-size:12px;width:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
.bulkbar input.combo-input::placeholder{color:rgba(255,255,255,.75)}
.bulkbar input.combo-input:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:-1px}
.statussel{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:capitalize;padding:5px 26px 5px 12px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
.statussel.draft{background-color:var(--surface-3);color:var(--fg-2)}
.statussel.live{background-color:var(--success-bg);color:var(--success-fg)}
.statussel.archived{background-color:var(--gold-bg);color:var(--gold-fg)}
.statussel:hover{filter:brightness(.97);border-color:transparent}
.statussel:focus{outline:2px solid var(--accent);outline-offset:1px}
/* Segmented status control (drawer header): one button per state, the
   current one filled. Draft = neutral, live = green, archived/hidden
   = grey (.seg-grey). Reusable anywhere a 2-3 state toggle saves on click. */
.seg{display:inline-flex;flex:none;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.seg button{border:0;border-right:1px solid var(--border);background:transparent;padding:4px 12px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:capitalize;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--surface-2);color:var(--fg)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.seg button.on{background:var(--surface-3);color:var(--fg-2)}
.seg button.on.seg-live{background:var(--success-bg);color:var(--success-fg)}
.seg button.on.seg-grey{background:var(--surface-3);color:var(--muted)}

/* ---- Utility ---- */
.m0{margin:0}
.mt0{margin-top:0}
.mt10{margin-top:10px}
.pad-v16{padding:16px 0}
.muted{color:var(--muted)}
.warnx{color:var(--danger-fg);font-weight:500}
.nowrap{white-space:nowrap}
.hidden{display:none}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s;pointer-events:none;z-index:99}
.toast.show{opacity:1}
/* Undo variant: the toast carries an action, so it accepts clicks */
.toast.has-undo{pointer-events:auto}
.toast .toast-undo{margin-left:10px;border:0;background:none;color:#fff;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}

/* ---- Skeleton loading (first query in flight) ---- */
.skel{display:inline-block;width:100%;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite}
.skel-row td{padding:11px 12px}
.skel-w40{width:40%}
.skel-w60{width:60%}
.skel-w80{width:80%}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- Inline add (e.g. add level) ---- */
.inline-add{display:inline-flex;gap:6px;align-items:center}
.inline-add input{width:180px}

/* ---- Lists page (managed dropdown editor) ---- */
.lists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.listcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 14px 12px;display:flex;flex-direction:column}
.listcard h3{font-size:12px;font-weight:600;margin-bottom:2px}
.listcard .sub{font-size:10px;color:var(--muted);margin-bottom:10px}
/* Managed-list option rows (was .chip - renamed so .chip means the
   platform contact chip from base.css). */
.chips{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.optrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:12px}
.optrow.dragging{opacity:.4}
.optrow.drop-before{box-shadow:inset 0 2px 0 0 var(--accent)}
.optrow.drop-after{box-shadow:inset 0 -2px 0 0 var(--accent)}
.optrow .grip{font-size:14px}
.optrow .cv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optrow .x{border:none;background:none;cursor:pointer;color:var(--muted-2);font-size:15px;line-height:1;padding:0 2px}
.optrow .x:hover{color:var(--danger)}
.optrow .x.armed{color:#fff;background:var(--danger);border-radius:4px;padding:0 5px}
.addrow{display:flex;gap:6px;margin-top:auto}
.addrow input{flex:1}

/* ---- Drawer (slide-over modal) ---- */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.drawer-overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:500px;max-width:94vw;background:var(--surface);box-shadow:-18px 0 44px -14px rgba(15,23,42,.28);transform:translateX(103%);transition:transform .24s cubic-bezier(.4,0,.2,1);z-index:81;display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:15px 16px 15px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.drawer-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.drawer-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.drawer-head h2{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-close{width:30px;height:30px;min-width:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:background .12s,color .12s}
.drawer-close:hover{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}
.drawer-body{flex:1;overflow:auto;padding:6px 20px 48px}
.dsection{padding:18px 0;border-bottom:1px solid var(--border)}
.dsection:last-child{border-bottom:none}
.dsection h4{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dfooter{display:flex;justify-content:flex-start;gap:8px;padding-top:20px;flex-wrap:wrap}
/* Drawer sticky footer: live save state (auto-save drawers) or
   Cancel + primary action (action drawers). One per drawer. */
.drawer-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface)}
.drawer-foot .sp{flex:1}
.save-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2);min-width:0}
.save-state svg{flex:none}
.save-state.saved{color:var(--muted)}
.save-state.saved svg{color:var(--success-fg)}
.save-state.saving{color:var(--muted)}
.save-state.error{color:var(--danger-fg);font-weight:500}
.save-state.error a{color:var(--danger-fg);font-weight:600;text-decoration:underline;cursor:pointer}
.save-state .hintx{color:var(--muted);font-weight:400;margin-left:6px}
.save-dot{width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--muted);animation:savepulse 1s ease-in-out infinite}
@keyframes savepulse{0%,100%{opacity:.25}50%{opacity:1}}
/* Add-from-library picker (centered modal) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:82}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-47%);width:560px;max-width:94vw;max-height:82vh;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:83;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--border)}
.modal-head h2{flex:1;font-size:15px;font-weight:600}
.modal-bar{padding:12px 20px 0}
.modal-bar input{width:100%}
.modal-body{overflow:auto;padding:6px 20px 12px;flex:1}
.modal-foot{display:flex;align-items:center;gap:10px;padding:13px 20px;border-top:1px solid var(--border)}
.modal-foot .sp{flex:1}
.modal-sm{width:420px}
.modal-lg{width:760px}
.lib-group{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin:12px 0 3px}
.lib-item{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:var(--radius);cursor:pointer}
.lib-item:hover{background:var(--surface-2)}
.lib-item input{margin-top:2px}
.lib-item .li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lib-item .li-name{font-weight:600;font-size:12px}
.lib-item .li-sub{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 0}
.np-f input,.np-f select{width:100%;font-weight:400;color:var(--fg)}
.np-note{font-size:10px;color:var(--muted);margin:12px 0 4px;line-height:1.5}
.fkwrap{display:flex;gap:6px;align-items:stretch}
.fkwrap select,.fkwrap input{flex:1;min-width:0}
.fk-add{flex:none;width:32px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius);color:var(--accent);font-size:16px;line-height:1;cursor:pointer}
.fk-add:hover{background:var(--info-bg)}
.pill-red{background:var(--danger-bg);color:var(--danger)}
.barsel{font-size:12px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--fg);cursor:pointer}
/* Maintenance hub cockpit */
.mh-inbox{display:flex;flex-direction:column;gap:8px}
.ibrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:0 var(--radius) var(--radius) 0;padding:11px 14px}
.ibrow.warn{border-left-color:var(--gold-fg)}
.ibrow.info{border-left-color:var(--accent)}
.ibrow.done{border-left-color:var(--success-fg)}
.ibrow .ib-ic{font-size:18px;color:var(--muted)}
.ibrow.warn .ib-ic{color:var(--gold-fg)}
.ibrow.info .ib-ic{color:var(--accent)}
.ibmain{flex:1;min-width:0}
.ibtitle{font-size:12px}
.ibsub{font-size:10px;color:var(--muted)}
/* Inbox rows that open a round or a page: whole row is the click target */
.ibrow.ibnav{cursor:pointer}
.ibrow.ibnav:hover{background:var(--surface-2)}
/* Section header with a control on the right (e.g. inbox sort toggle) */
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.seg.seg-plain button{text-transform:none}
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:start}
.pcol-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;display:flex;justify-content:space-between}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer}
.rcard:hover{border-color:var(--accent)}
.rcard .rc-t{font-size:12px;font-weight:600}
.rcard .rc-m{font-size:10px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.track{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.track .th{font-size:12px;font-weight:600;color:var(--accent);margin:0 0 8px}
.track .col2{border-left:1px solid var(--border);padding-left:16px}
/* Round drawer variant: the client column needs 220px so the
   "Client confirmed the date" checkbox label sits on one line at
   drawer widths (500px drawer = ~460px content); trades take the
   rest. Long client names wrap at word boundaries, never mid-word. */
.track.track-visit{grid-template-columns:minmax(220px,1fr) 1.6fr}
.vclient-name{font-size:12px;font-weight:500;margin-bottom:10px;overflow-wrap:anywhere}
.track-visit .field.dcheck span{white-space:nowrap}
.closeout-row{display:flex;align-items:center;gap:10px}
.stg{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
.stg.proposing{background:var(--gold-bg);color:var(--gold-fg);border-color:transparent}
.stg.booking{background:var(--info-bg);color:var(--accent);border-color:transparent}
.stg.ready{background:var(--success-bg);color:var(--success-fg);border-color:transparent}
.stg.completed,.stg.draft{background:var(--surface-3);color:var(--muted);border-color:transparent}
@media(max-width:700px){.track,.track.track-visit{grid-template-columns:1fr}.track .col2{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:12px}}
/* Maintenance calendar */
.cal-head{display:flex;align-items:center;gap:8px;margin:14px 0 10px}
.cal-title{font-weight:600;font-size:12px;min-width:150px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cal-dow{background:var(--surface-2);padding:6px 8px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center}
.cal-cell{background:var(--surface);min-height:96px;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.cal-cell.cal-out{background:var(--surface-2)}
.cal-cell.cal-out .cal-dnum{color:var(--muted-2)}
.cal-cell.cal-today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-dnum{font-size:10px;color:var(--muted);font-weight:500}
.cal-task{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--surface-3);color:var(--fg-2);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task:hover{filter:brightness(.96)}
.cal-task.live{background:var(--success-bg);color:var(--success-fg)}
.cal-task.archived{background:var(--gold-bg);color:var(--gold-fg)}
.cal-task.overdue{background:var(--danger-bg);color:var(--danger-fg)}
.cal-wrap{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start}
@media(max-width:1100px){.cal-wrap{grid-template-columns:1fr}}
.cal-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px}
.cal-side-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.cal-side-g{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 4px}
.cal-side-g:first-of-type{margin-top:0}
.cal-sidetask{font-size:12px;padding:6px 8px;border-radius:var(--radius);background:var(--surface-2);cursor:pointer;margin-bottom:4px;display:flex;flex-direction:column;gap:1px}
.cal-sidetask:hover{background:var(--surface-3)}
.cal-sidesys{font-size:10px;color:var(--muted)}
/* Maintenance view toggle (List / Calendar / Schedule) */
.vtoggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.vt{border:0;background:none;padding:6px 13px;font-size:12px;color:var(--muted);cursor:pointer;border-right:1px solid var(--border)}
.vt:last-child{border-right:0}
.vt.active{background:var(--accent);color:#fff;font-weight:600}
/* Schedule board - Kellie's visits */
.sched-top{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.sched-sec-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
.sched-sec-h:first-child{margin-top:0}
.sched-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.alertrow{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--gold-bg);border-left:3px solid var(--gold-fg);border-radius:var(--radius);font-size:12px}
.alert-txt{flex:1;color:var(--fg)}
.visit.tpl{border-left-color:var(--accent);background:var(--surface-2)}
.tpl-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--accent);padding:3px 8px;border-radius:999px;flex:none}
.tpl-meta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.tpl-meta label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:600;color:var(--muted)}
.tpl-meta input,.tpl-meta select{font-weight:400;color:var(--fg)}
.lead-in{display:flex;align-items:center;gap:6px}
.lead-in input{width:60px}
.lead-in span{font-weight:400;color:var(--muted);font-size:10px}
.visit{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:12px}
.visit.s-confirmed{border-left-color:var(--success-fg)}
.visit.s-completed{border-left-color:var(--muted-2)}
.visit.s-to_confirm{border-left-color:var(--gold-fg)}
.visit-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.visit-title{flex:1;font-weight:600;border-color:transparent;background:transparent;font-size:12px}
.visit-title:hover,.visit-title:focus{border-color:var(--border);background:var(--surface)}
.visit-date{width:150px}
.visit-stat{appearance:none;-webkit-appearance:none;border-radius:999px;font-size:10px;font-weight:600;padding:5px 12px;cursor:pointer;border:1px solid var(--border)}
.visit-items{display:flex;flex-direction:column;gap:10px}
.vgroup-h{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.vgroup-mail{border:1px solid var(--border);background:var(--surface);color:var(--accent);font-size:10px;font-weight:600;padding:2px 9px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}
.vgroup-mail:hover{background:var(--info-bg)}
.alertrow.remind{background:var(--info-bg);border-left-color:var(--accent)}
.vitem{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius);background:var(--surface-2);font-size:12px;margin-bottom:3px}
.vitem-label{flex:1}
.vitem.st-done .vitem-label{color:var(--muted)}
.vitem-stat{appearance:none;-webkit-appearance:none;border-radius:999px;font-size:10px;font-weight:600;padding:3px 10px;cursor:pointer;border:1px solid var(--border);background:var(--surface)}
.vitem.st-pending .vitem-stat{background:var(--surface-3);color:var(--fg-2)}
.vitem.st-invited .vitem-stat{background:var(--gold-bg);color:var(--gold-fg)}
.vitem.st-confirmed .vitem-stat{background:var(--info-bg);color:var(--info-fg,var(--accent))}
.vitem.st-done .vitem-stat{background:var(--success-bg);color:var(--success-fg)}
.vitem-adhoc{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-fg);background:var(--gold-bg);padding:2px 7px;border-radius:999px}
.vitem-x{border:0;background:none;color:var(--muted-2);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.vitem-x:hover{color:var(--danger)}
.vitem-note{width:100%;font-size:10px;margin:2px 0 6px}
.visit-add{display:flex;align-items:center;gap:8px;margin-top:9px}
.visit-count{margin-left:auto;font-size:10px;color:var(--muted)}
/* Master-detail: on wide screens the drawer docks beside the list */
tr.speclink.open td{background:var(--info-bg)}
@media (min-width:1280px){
  body.docked .drawer-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
  body.docked .drawer{width:440px;box-shadow:-1px 0 0 var(--border)}
  body.docked .main{margin-right:440px}
}

/* ---- Drawer fields ---- */
.field{margin-bottom:12px}
.field label{display:block;font-size:10px;font-weight:500;color:var(--fg-2);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;padding:8px 10px}
.field select{padding-right:28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field.dcheck{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.field.dcheck input{width:16px;min-width:16px}
.field.dcheck span{font-size:12px;color:var(--fg)}
/* Dependent field indented under its service toggle (e.g. gas isolator) */
.field.indent{margin-left:24px}

/* ---- Drawer: room toggles ---- */
.roomtoggles{display:flex;flex-wrap:wrap;gap:6px}
.rlevel{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 5px;width:100%}
.rlevel:first-child{margin-top:0}
.rtog{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--border);border-radius:999px;font-size:12px;cursor:pointer;background:var(--surface-2);color:var(--fg-2);user-select:none}
.rtog:hover{border-color:var(--border-strong)}
.rtog.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- Drawer: suppliers ---- */
.suplist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.suprow{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:var(--radius);padding:7px 9px;background:var(--surface-2)}
.suprow .supname{flex:1;font-weight:600;font-size:12px}
.suprow .snote{flex:1.4;min-width:0;background:var(--surface)}
.suprow .x{border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.suprow .x:hover{color:var(--danger)}
/* Read-only display rows (key details, linked documents): click to edit */
.suprow.rowlink{cursor:pointer}
.suprow.rowlink:hover{border-color:var(--border-strong)}
.suprow .rowval{flex:1.4;min-width:0;font-size:12px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-sub{font-size:12px;color:var(--muted);margin-bottom:8px}
/* Room care guide cards */
.carecard{border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;margin-bottom:8px;background:var(--surface-2)}
.cc-head{display:flex;align-items:center;gap:10px}
.cc-head .supname{flex:1;font-weight:600;font-size:12px}
.cc-day{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--fg-2);white-space:nowrap;cursor:pointer}
.cc-day input{width:15px;height:15px;min-width:15px}
.carecard details{margin-top:6px}
.carecard summary{font-size:10px;color:var(--muted);cursor:pointer;list-style:none}
.carecard summary::-webkit-details-marker{display:none}
.carecard textarea{width:100%;margin-top:6px}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cc-actions .btn{padding:4px 9px;font-size:12px}
.supadd{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.supadd select,.supadd input{flex:1;min-width:0}
.supadd .btn{flex:0 0 auto;white-space:nowrap}
/* Quiet + button that opens the add-child modal from a drawer */
.add-child{margin-top:8px}

/* ---- Small button ---- */
.btn-sm{padding:5px 10px;font-size:12px}

/* ---- Dashboard + login (index.html, styles moved out of its page head) ---- */
.wrap{max-width:960px;margin:0 auto;padding:24px 26px 100px}
.section{margin-top:26px}
.section-kicker{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.login{max-width:360px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.login h1{font-size:18px;margin-bottom:16px}
.login label{display:block;font-size:12px;font-weight:500;color:var(--fg-2);margin:12px 0 4px}
.login input{width:100%;padding:9px 12px}
.login .btn{width:100%;justify-content:center;margin-top:16px}
.login .alt{width:100%;justify-content:center;margin-top:8px}
.msg{margin-top:12px;font-size:12px;border-radius:var(--radius);padding:8px 12px;display:none}
.msg.err{display:block;background:var(--danger-bg);color:var(--danger-fg)}
.msg.ok{display:block;background:var(--success-bg);color:var(--success-fg)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .15s}
.proj-card:hover{box-shadow:var(--shadow-lg)}
.proj-card.sel{outline:2px solid var(--accent)}
.proj-card .addr{font-weight:600;font-size:12px}
.meter{height:5px;background:var(--surface-3);border-radius:999px;margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--success);border-radius:999px}
.proj-card .meta{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted)}
.proj-card .block{color:var(--warning-fg);font-weight:500}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);padding:24px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--surface-2);color:var(--fg-2)}
.dropzone .big{font-size:12px;font-weight:500;color:var(--fg-2)}
.uplist{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.uprow{display:flex;justify-content:space-between;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px}
.uprow .st{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.uprow.done .st{color:var(--success-fg)}
.uprow.fail .st{color:var(--danger-fg)}
.strong{font-weight:600}
.sub{color:var(--muted);font-size:10px;display:block;margin-top:1px}
.pill-amber{background:var(--warning-bg);color:var(--warning-fg)}
.num{text-align:right;font-family:var(--font-mono);font-size:12px}
details.group{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:8px;overflow:hidden}
details.group:last-child{margin-bottom:0}
details.group summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
details.group .sum-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
details.group .sum-main .sub{margin-top:0}
details.group summary::-webkit-details-marker{display:none}
details.group summary:hover{background:var(--surface-2)}
details.group .n{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.group-body{border-top:1px solid var(--border)}
.group-body tr:last-child td{border-bottom:none}
/* Dashboard: blocking go-live grouped by project, waiting list rows */
.golive-proj{padding:14px 16px;border-bottom:1px solid var(--border)}
.golive-proj:last-child{border-bottom:none}
.golive-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.golive-addr{font-weight:600;font-size:12px;line-height:1.35}
.golive-sub{font-size:10px;color:var(--muted);display:block;margin-top:1px}
.golive-count{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}
.rowy td{padding:9px 12px}
.fixrow{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.fixrow select,.fixrow input{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:220px}
.fixrow select:focus,.fixrow input:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ---- Requests queue ---- */
/* Filter/sort bar: active filters render as small clearable chips */
.filterchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.filterchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:500;background:var(--info-bg);color:var(--accent);border-radius:999px;padding:3px 5px 3px 10px}
.fchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:12px;line-height:1;padding:1px 4px;border-radius:999px}
.fchip button:hover{background:rgba(3,19,43,.12)}
.filter-combo{width:180px}
.req-photos{display:flex;flex-wrap:wrap;gap:8px}
.req-photos a{display:block}
.req-photos img{width:110px;height:82px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);display:block}
.req-photos img:hover{border-color:var(--accent)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;font-size:12px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.tl{display:flex;flex-direction:column;gap:8px}
.tl-ms{font-size:12px;color:var(--muted);padding-left:10px;border-left:2px solid var(--surface-3)}
.tl-msg{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:12px;white-space:pre-wrap}
.tl-meta{font-size:10px;color:var(--muted);margin-bottom:2px}
.commentbox{display:flex;gap:8px;align-items:flex-start;margin-top:10px}
.commentbox textarea{flex:1;min-height:56px}
.desc-block{font-size:12px;white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
/* Requests queue on a phone: the table collapses to stacked cards
   (ref + status up top, subject full width, property + age below),
   the drawer goes full width and touch targets grow to 40px. */
@media (max-width:700px){
  .req-queue thead{display:none}
  .req-queue tr.speclink,.req-queue tr.skel-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--border);min-height:44px}
  .req-queue td{display:block;padding:0;border-bottom:none}
  .req-queue td:nth-child(4),.req-queue td:nth-child(5){display:none}
  .req-queue tr.speclink td:nth-child(1){order:1}
  .req-queue tr.speclink td:nth-child(7){order:2;margin-left:auto}
  .req-queue tr.speclink td:nth-child(3){order:3;flex-basis:100%;white-space:normal;max-width:none}
  .req-queue tr.speclink td:nth-child(2){order:4}
  .req-queue tr.speclink td:nth-child(6){order:5;margin-left:auto}
  .req-queue tr.skel-row td{flex:1}
  .drawer{width:100vw;max-width:100vw}
  .drawer-close{width:40px;height:40px;min-width:40px}
  .drawer-body select,.drawer-body input,.drawer-body .btn{min-height:40px}
  .drawer-foot .btn,.drawer-foot .btn-danger{min-height:40px}
}

/* ---- AI intake ---- */
.ai-steps{max-width:760px}
.ai-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;text-align:center}
.ai-spinner{width:28px;height:28px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-line{font-size:12px;color:var(--fg-2);font-weight:500}
.ai-line-sub{font-size:10px;color:var(--muted)}
.dcard{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:10px 12px;margin-bottom:8px}
.dcard-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dcard-head .t{flex:1;font-weight:600;font-size:12px}
.dcard-x{border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.dcard-x:hover{color:var(--danger)}
/* Intake queue (ai-intake.html) */
.qlist{margin-top:10px}
.qrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;margin-bottom:6px}
.qrow .pill{text-transform:none;white-space:nowrap}
.qmain{flex:1;min-width:0}
.qname{font-size:12px;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsize{font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--muted);margin-left:6px}
.qerr{font-size:10px;color:var(--danger-fg);margin-top:2px}
.qspin{width:14px;height:14px;min-width:14px;border:2px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:aispin .8s linear infinite}
.filepick{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px}
.success-panel{border:1px solid var(--border);border-left:3px solid var(--success-fg);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--surface);padding:16px 18px}
.success-panel h3{font-size:15px;margin-bottom:6px}
.success-panel ul{margin:0 0 12px 18px;font-size:12px;color:var(--fg-2)}

/* ---- Media library ---- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.media-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.media-thumb{position:relative;height:140px;background:var(--surface-3);display:flex;align-items:center;justify-content:center}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-glyph{font-size:28px;color:var(--muted)}
.media-tag{position:absolute;top:6px;left:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:rgba(15,23,42,.7);color:#fff;border-radius:999px;padding:2px 8px}
.media-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.media-body input,.media-body select{width:100%}
.media-foot{display:flex;justify-content:flex-end;padding:0 10px 8px}
.pending-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pending-row{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px}
.pending-row.missing{border-color:var(--danger)}
.pending-thumb{width:74px;height:56px;flex:none;border-radius:var(--radius);background:var(--surface-3);object-fit:cover;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;overflow:hidden}
.pending-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pending-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pending-main .fname{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-fields{display:flex;gap:6px;flex-wrap:wrap}
.pending-fields input[data-cap]{flex:2;min-width:180px}
.pending-fields select,.pending-fields input[data-cat]{flex:1;min-width:120px}

/* ---- Rooms & levels: level section headers with their own controls ---- */
tr.grouphead .gh-wrap{display:flex;align-items:center;gap:6px}
tr.grouphead .gh-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghbtn{border:none;background:none;color:var(--muted);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:2px 7px;border-radius:4px;white-space:nowrap}
.ghbtn:hover{background:var(--surface);color:var(--fg)}
.ghbtn.gh-del:hover{color:var(--danger);background:var(--danger-bg)}
.ghbtn.armed{color:#fff;background:var(--danger)}
td.level-empty{font-size:12px;color:var(--muted);padding:10px 12px}

/* ---- Small-modal textareas (key detail) match the np-f inputs ---- */
.np-f textarea{width:100%;font-weight:400;color:var(--fg)}

/* ---- Document rows inside drawers: name links to the Documents page ---- */
.suprow a.supname{color:var(--accent);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suprow a.supname:hover{text-decoration:underline}

/* ---- Spec import (Import button on the Specs page) ---- */
.imp-actions{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.imp-note{font-size:10px;color:var(--muted);margin:8px 0 12px;line-height:1.5}
.imp-prev{border:1px solid var(--border);border-radius:var(--radius);overflow:auto;max-height:46vh;margin-top:4px}
.imp-prev td{font-size:12px}
.imp-flag{display:inline-block;font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--warning-bg);color:var(--warning-fg);margin:1px 3px 1px 0;white-space:nowrap}
.imp-check{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:12px;cursor:pointer}
.imp-summary{font-size:12px;line-height:1.8;padding:6px 0}

/* ---- Visit item lifecycle (maintenance hub) ---- */
.vitem.st-proposed .vitem-stat{background:var(--surface-3);color:var(--fg-2)}
.vitem.st-client_declined .vitem-stat{background:var(--surface-3);color:var(--muted)}
.vitem.st-client_declined .vitem-label{color:var(--muted);text-decoration:line-through}
.vitem.st-trade_pending .vitem-stat{background:var(--gold-bg);color:var(--gold-fg)}
.vitem.st-trade_confirmed .vitem-stat{background:var(--surface);color:var(--success-fg);border-color:var(--success-fg)}
.vitem.st-reconfirmed .vitem-stat{background:var(--success);color:#fff;border-color:var(--success)}
.vitem.st-issue .vitem-stat{background:var(--danger-bg);color:var(--danger-fg)}
.vitem-int{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--info-bg);padding:2px 7px;border-radius:999px;flex:none}
/* Manual attendance override (trade replied by email or phone) */
.ovr{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;font-weight:500;padding:2px 8px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:none}
.ovr:hover{color:var(--fg);border-color:var(--border-strong)}
.ovr.on{background:var(--success-bg);color:var(--success-fg);border-color:transparent;font-weight:600}
.ovr.on.no{background:var(--danger-bg);color:var(--danger-fg)}
.vitem-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:1px 0 6px;padding-left:8px}
.mrec{margin-bottom:8px}
.vclient-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.clientvis{display:flex;align-items:center;gap:8px}
.empty-col{padding:6px 2px}

/* ---- Schedule planner (schedule.html) ---- */
/* Master-detail: property list on the left, the selected property's
   round templates and jobs on the right. The list collapses to a
   select above the detail on small screens. */
.planner{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
.plist{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:10px;display:flex;flex-direction:column;gap:8px;position:sticky;top:70px} /* 56px topbar + 14 */
.plist input[type=search]{width:100%}
.plist-items{display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:calc(100vh - 190px)}
.pitem{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;border:0;background:none;font:inherit;padding:7px 9px;border-radius:var(--radius);cursor:pointer}
.pitem:hover{background:var(--surface-2)}
.pitem.active{background:var(--surface-2)}
.pitem .pname{font-size:12px;font-weight:500;color:var(--fg)}
.pitem.active .pname{font-weight:600;color:var(--accent)}
.pitem .psub{font-size:10px;color:var(--muted)}
.pdetail{min-width:0}
.pdetail-h{font-size:15px;font-weight:600;margin:2px 0 12px}
.plist-sel{display:none}
@media(max-width:760px){
  .planner{grid-template-columns:1fr}
  .plist{display:none}
  .plist-sel{display:block;width:100%;margin-bottom:12px}
}
/* Read-only job rows: notes get an ellipsis, the row opens the drawer */
.jnotes{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.prop-sec{margin-bottom:10px}
.prop-body{padding:12px 12px 14px;border-top:1px solid var(--border)}
.prop-body .visit{box-shadow:none}
.jobs-card{margin-top:10px;box-shadow:none}
.tpl-note{font-size:10px;color:var(--muted);margin-top:8px}
button.rtog{font-family:inherit;line-height:1.3}
.page-save{position:fixed;right:18px;bottom:16px;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-lg)}
.page-save:has(.save-state:empty){display:none}
/* Year view: 12-month portfolio grid */
.yr-grid{display:grid;grid-template-columns:190px repeat(12,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:14px}
.yr-head{background:var(--surface-2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:6px 4px;text-align:center}
.yr-prop{background:var(--surface-2);font-size:12px;font-weight:600;padding:8px 10px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yr-cell{background:var(--surface);min-height:54px;padding:4px;display:flex;flex-direction:column;gap:3px}
.yr-chip{display:block;font-size:10px;padding:2px 6px;border-radius:4px;background:var(--info-bg);color:var(--accent);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;text-align:left}
.yr-chip:hover{filter:brightness(.96)}
.yr-chip.done{background:var(--surface-3);color:var(--muted)}
.yr-chip.ghost{background:var(--surface);border:1px dashed var(--border-strong);color:var(--muted);cursor:default}
@media(max-width:1100px){.yr-grid{grid-template-columns:130px repeat(12,1fr)}.yr-cell{min-height:40px}}

/* ---- Maintenance settings (maintenance-settings.html) ---- */
.settings-wrap{max-width:640px;margin-top:14px}
.set-row{display:flex;align-items:center;gap:16px;padding:13px 16px;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-main{flex:1;min-width:0}
.set-label{font-size:12px;font-weight:500;color:var(--fg)}
.set-hint{font-size:10px;color:var(--muted);margin-top:1px}
.set-ctl{flex:none;display:flex;align-items:center}
.set-ctl input[type=number]{width:80px}
.set-ctl input[type=email]{width:240px}
.set-ctl input[type=text]{width:240px}

/* ---- Sign page (public signer surface: sign.html) ---- */
.sign-wrap{max-width:640px;margin:0 auto;padding:18px 16px 60px}
.sign-brand{display:flex;align-items:center;gap:10px;padding:14px 0 18px}
.sign-brand img{height:24px}
.sign-brand .t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sign-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px;margin-bottom:14px}
.sign-card h1{font-size:19px;margin:0 0 4px}
.sign-from{font-size:12px;color:var(--muted);margin-bottom:14px}
.sign-msg{border-left:3px solid var(--brand-gold);background:var(--bg);padding:10px 14px;font-size:12px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}
.sign-doc{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:14px}
.sign-doc .nm{flex:1;min-width:0;font-weight:600;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sign-doc .sz{font-size:10px;color:var(--muted)}
.sign-frame{width:100%;height:460px;border:1px solid var(--border);border-radius:var(--radius);margin-top:12px;background:var(--surface-2)}
@media (max-width:700px){.sign-frame{height:340px}}
.sig-tabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.sig-pad{width:100%;height:160px;border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:crosshair;touch-action:none;display:block}
.sig-typed-preview{height:74px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--border-strong);border-radius:var(--radius);font-family:'Caveat',cursive;font-size:34px;color:var(--fg);overflow:hidden;padding:0 12px;white-space:nowrap}
.sign-agree{font-size:10px;color:var(--muted);margin:14px 0}
.sign-done{text-align:center;padding:34px 20px}
.sign-done .tick{width:52px;height:52px;border-radius:50%;background:var(--success-bg);color:var(--success-fg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.sign-done h2{font-size:17px;margin-bottom:6px}
.sign-done p{font-size:12px;color:var(--muted)}
.sign-foot{text-align:center;font-size:10px;color:var(--muted-2);margin-top:22px}
.sign-actions{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.sign-decline{margin-left:auto;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}
.sign-decline:hover{color:var(--danger)}