/* ============================================================
   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 of join-admin/portal/shared/base.css -
   re-copy it VERBATIM after any design-system change. The People-only
   deltas (admin 12px density, legacy token aliases) live in the block
   right below, so a re-copy never wipes them. */
@import "base.css";

/* ---- People density + compatibility overrides (survive base re-copies).
   The base ships the portal's 13px reading size; People runs the admin
   12px/10px two-size scale. --accent/--focus are legacy aliases kept so
   older People rules keep working (new work uses --fg directly). ---- */
:root{--accent:var(--fg);--accent-hover:var(--fg-2);--focus:rgba(20,20,20,.08)}
body{font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display)}
.pill{font-size:10px}
.chip{font-size:10px}
.tab{font-size:12px}


/* ---- 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:vertical;min-height:32px;overflow-y:auto}

/* 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)}
/* pinned footer action - always on show, so "someone who isn't on this list"
   is a visible option rather than something you have to guess at by typing */
.combo-add{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;border-top:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:500;color:var(--fg);cursor:pointer}
.combo-add:hover{background:var(--surface-3)}
/* one line, always: the label ellipsises, the one-off tag never wraps */
.combo-add .ca-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-add .ca-tag{flex:none;font-weight:400;color:var(--muted);white-space:nowrap}
.combo-add span{font-weight:400;color:var(--muted)}

/* ---- Pill select: THE status control (14 Jul). Trigger is a pastel .pill
   with a caret; PeopleShell.openPillPanel renders the options as the same
   pastel pills. Native selects are never used for statuses. ---- */
.psel{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1.35}
.psel svg{flex:none;opacity:.55}
.psel:hover{filter:brightness(.96)}
.psel:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.psel-panel{position:fixed;z-index:140;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:4px;display:flex;flex-direction:column;gap:2px;min-width:150px;max-height:60vh;overflow:auto}
.psel-item{display:flex;align-items:center;border:0;background:none;padding:5px 8px;border-radius:6px;cursor:pointer;font:inherit;font-size:12px;color:var(--fg);text-align:left;white-space:nowrap}
.psel-item:hover{background:var(--surface-2)}
.psel-item.on{background:var(--surface-2)}
.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}
/* Quiet destructive control for toolbars/headers: muted text until hover or
   armed, so the primary action (Send) stays the loudest thing in the bar. */
.th-del{border:0;background:none;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;padding:6px 9px;border-radius:var(--radius);white-space:nowrap}
.th-del:hover{color:var(--danger-fg);background:var(--danger-bg)}
.th-del.armed{color:#fff;background:var(--danger);font-weight:600}
.th-del:disabled{opacity:.5}

/* ---- 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}
.card-narrow{max-width:640px}
.card-pad{padding:18px 20px}
/* quiet footer note inside a card (e.g. "managed by the office") */
.card-note{margin:0;padding:10px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.settings-card{max-width:560px;padding:20px}
.settings-card .dsection:first-child{padding-top:4px}
.settings-card .bar{margin-bottom:0}

/* ---- Universal register filter + sortable headers (5 Aug 2026) ----
   Every register gets ONE funnel chip; the panel holds all its filters as
   pastel pills with a Clear foot. Sort lives in the column headers. ---- */
.fbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font:inherit;font-size:12px;color:var(--fg);cursor:pointer}
.fbtn:hover{border-color:var(--border-strong);background:var(--surface-2)}
.fbtn svg{color:var(--muted)}
.fbtn.on{border-color:var(--fg)}
.fcount{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--fg);color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.fpanel{position:fixed;z-index:110;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:290px;max-height:70vh;overflow:auto}
.fhead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px}
.fhead span{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fhead button{border:0;background:none;font:inherit;font-size:11px;color:var(--muted);cursor:pointer;text-decoration:underline}
.fhead button:hover{color:var(--fg)}
.fbody{padding:12px 14px}
.fbtn .fx{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--muted);font-size:13px;line-height:1}
.fbtn .fx:hover{color:var(--fg)}
.fgroup{margin-bottom:12px}
.fgroup-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fsearch{width:100%;margin-bottom:6px}
.fopts{display:flex;flex-wrap:wrap;gap:6px}
.fopt{border:0;background:none;padding:0;font:inherit;cursor:pointer;border-radius:999px}
.fopt .pill{cursor:pointer}
.fopt.on .pill{outline:2px solid var(--fg);outline-offset:1px}
.tgrip{width:26px;padding-left:12px;padding-right:0;text-align:center;color:var(--muted-2);cursor:grab;touch-action:none}
.tgrip:active{cursor:grabbing}
tr.dragging td{background:var(--surface-2)}
tr.dragging{opacity:.75}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--fg)}
th.sortable.asc::after,th.sortable.desc::after{content:"";display:inline-block;margin-left:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;vertical-align:1px}
th.sortable.asc::after{border-bottom:5px solid currentColor}
th.sortable.desc::after{border-top:5px solid currentColor}

/* ---- Side-by-side form cards (5 Aug 2026) ----
   Related form cards share a row so a wide screen's right half works for a
   living instead of sitting as dead space (Identity next to Contact &
   address, Commercial next to Banking). Stacks below 1100px. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,560px));gap:16px;align-items:start}
@media (max-width:1100px){.duo{grid-template-columns:minmax(0,640px)}}

/* ---- 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.speclink{cursor:pointer}
tr.speclink:hover td{background:var(--surface-2)}
tr.speclink:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.cellname{font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:30px 14px;text-align:center;color:var(--muted)}
.td-sub{font-size:10px;color:var(--muted);font-weight:400;margin-top:1px}
.hint a,.np-note a{text-decoration:underline}

/* ---- List tables ----------------------------------------------------------
   Every list in JOIN People is a table with one fact per column, the way the
   Employees screen has always been (Josh, 5 Aug 2026: "spreadsheet like - its
   easier to read at a glance"). The rule that follows: a cell holds one thing.
   Nothing stacks a second line under a title, because the moment a row is two
   lines tall you can no longer scan a column of them.

   The base td padding above is already the compact one, so these classes only
   add what a table cannot express on its own: an expander, an indented child
   row, and a row the viewer may see but not open. */

/* Expander cell (Signing: a bulk send opens to show its signers) */
td.tcaret{width:24px;padding-left:12px;padding-right:0;text-align:center}
.tcaret i{display:inline-block;font-style:normal;font-size:9px;color:var(--muted-2);transition:transform .15s}
tr.open .tcaret i{transform:rotate(90deg)}

/* Child rows under an expanded parent: shaded and indented, no rail - a rail
   drawn on the second cell reads as a stray box beside the empty caret cell. */
tr.tkid td{background:var(--surface-2)}
tr.tkid:hover td{background:var(--surface-3)}
tr.tkid td.tkid-first{padding-left:30px}

/* A row the viewer is not authorised to open - a template carrying pay data.
   Still listed, because the document existing is not the sensitive part: its
   salary is. Greyed and not clickable, with the reason on hover. */
tr.tlocked,tr.tlocked:hover{cursor:not-allowed}
tr.tlocked td,tr.tlocked:hover td{background:var(--surface-2);color:var(--muted-2)}
tr.tlocked .pill{opacity:.6}

/* Progress in a cell: bar then count, on one line */
.tprog{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tbar{display:inline-block;width:58px;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:999px;background:var(--success-fg)}
/* Visibility icon, sat against the name it belongs to. SignVisibility.iconHTML
   emits .sr-vis, so the two names share one rule. */
.tvis,.sr-vis{display:inline-flex;align-items:center;color:var(--muted-2);margin-left:6px;vertical-align:-2px}
.tvis svg,.sr-vis svg{width:13px;height:13px}
/* Two pills in one status cell (locked + draft) keep a gap and stay on a line */
td.tpills{white-space:nowrap}
td.tpills .pill + .pill{margin-left:5px}
/* A name cell that may run long: ellipsis rather than a second line */
.tname{font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab .count{color:var(--muted-2);font-weight:400;font-size:10px;margin-left:5px}

/* ---- Utility ---- */
.m0{margin:0}
.mt0{margin-top:0}
.pt0{padding-top:0}
td.kcol{width:200px}
.muted{color:var(--muted)}
.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}

/* ---- 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}}

/* ---- Drawer (slide-over modal) ---- */
.drawer-overlay{position:fixed;inset:0;background:var(--scrim);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(20,20,20,.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}
@keyframes savepulse{0%,100%{opacity:.25}50%{opacity:1}}

/* Add-from-library picker (centered modal) */
.modal-overlay{position:fixed;inset:0;background:var(--scrim);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-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}
.np-note{font-size:10px;color:var(--muted);margin:12px 0 4px;line-height:1.5}
/* a wrapping row of pills - a short list of things, read at a glance */
.pill-wrap{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}

/* 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}
.empty-sub{font-size:12px;color:var(--muted);margin-bottom:8px}

/* ---- Small button ---- */
.btn-sm{padding:5px 10px;font-size:12px}
/* An armed button is mid-confirmation: the next click does the thing.
   Amber, not red - most armed actions send email rather than destroy. */
.btn.armed{border-color:var(--warning-fg);color:var(--warning-fg);background:var(--warning-bg);font-weight:600}
.btn-primary.armed{background:var(--warning-fg);border-color:var(--warning-fg);color:#fff}
td .btn-sm{padding:3px 9px;font-size:11px}
.section{margin-top:26px}
.section-kicker{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---- Dashboard: stat tiles + two-column board (index.html) ----
   Tiles are clickable summary cards; the number is the hero. Accent
   classes recolour the number only (is-blue action, is-amber watch,
   is-red overdue). The board puts act-now sections left and
   keep-an-eye-on sections right, and stacks below 950px. */
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:16px 0 4px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s;display:block;color:inherit;text-decoration:none}
.tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.tile-n{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tile.is-blue .tile-n{color:var(--info-fg)}
.tile.is-amber .tile-n{color:var(--warning-fg)}
.tile.is-red .tile-n{color:var(--danger-fg)}
.tile-l{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.tile-s{font-size:11px;color:var(--muted);margin-top:3px;min-height:14px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
.dash-grid .section{min-width:0}
@media(max-width:950px){.dash-grid{grid-template-columns:1fr}}
.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-logo{height:28px;margin-bottom:14px}
.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)}
.strong{font-weight:600}
.sub{color:var(--muted);font-size:10px;display:block;margin-top:1px}
.num{text-align:right;font-family:var(--font-mono);font-size:12px}
details.group .n{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.rowy td{padding:9px 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){
  .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}
}
@keyframes aispin{to{transform:rotate(360deg)}}

/* ---- 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:18px;margin:0 0 4px}
.sign-card h2{font-size:16px;margin:0 0 4px}
.sign-from{font-size:12px;color:var(--muted);margin-bottom:14px}
.sign-msg{background:var(--surface-2);border:1px solid var(--border);padding:10px 14px;font-size:12px;border-radius:var(--radius);margin:14px 0;white-space:pre-line}
.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-doc .mid{flex:1;min-width:0}
/* Signing pack: several documents signed in one sitting. Each one is signed
   separately and the order is enforced, so this is a progress trail, not a
   set of tabs - locked steps are deliberately not clickable. */
.pack-steps{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px}
.pack-steps .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pack-steps .hd .t{flex:1;min-width:0;font-size:12px;font-weight:600}
.pack-steps .hd .c{font-size:10px;color:var(--muted)}
.pack-step{display:flex;align-items:center;gap:10px;padding:8px 0}
.pack-step+.pack-step{border-top:1px solid var(--border)}
.pack-step .dot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-2);color:var(--muted-2);border:1px solid var(--border)}
.pack-step .nm{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack-step .st{font-size:10px;color:var(--muted-2);white-space:nowrap}
.pack-step.done .dot{background:var(--success-bg);color:var(--success-fg);border-color:transparent}
.pack-step.done .nm{color:var(--fg)}
.pack-step.cur .dot{background:var(--fg);color:var(--surface);border-color:transparent}
.pack-step.cur .nm{color:var(--fg);font-weight:600}
.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}
/* Signature faces. The face, its weight and its optical scale all come from
   custom properties that sign.html sets from shared/sign-fonts.js, so the
   picker, the live preview and the marks painted onto the document all move
   together. The fallbacks are Caveat because that is what every signature
   applied before 3 Aug 2026 used - see the LEGACY note in sign-fonts.js.
   The scale exists because these faces sit at wildly different x-heights at
   the same point size; Homemade Apple is nearly twice the visual weight of
   Sacramento. */
.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:var(--sig-face,'Caveat',cursive);font-weight:var(--sig-weight,600);font-size:calc(34px * var(--sig-scale,1));color:var(--fg);overflow:hidden;padding:0 12px;white-space:nowrap}
/* the face chips - each one renders the signer's own name in that face, so
   they are choosing a signature and not a font name.
   A wrapping grid rather than a horizontal scroller: a signer should see all
   five hands at once and compare them. Options scrolled off the edge get
   picked far less often. auto-fit settles on two columns at both the desktop
   and the phone modal width, which is what keeps a full name like
   "Alexa Nastasi" inside the chip instead of ellipsed away. */
.sig-faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-top:12px}
.sig-face{min-width:0;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:8px 12px 6px;cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s}
.sig-face:hover{border-color:var(--border-strong)}
.sig-face.active{border-color:var(--brand-gold);box-shadow:0 0 0 3px rgba(229,186,65,.25)}
.sig-face .fc-name{font-family:var(--fc-face,'Caveat',cursive);font-weight:var(--fc-weight,600);font-size:calc(19px * var(--fc-scale,1));line-height:1.5;color:var(--fg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sig-face .fc-lbl{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.sig-face.active .fc-lbl{color:var(--fg-2)}
.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:16px;margin-bottom:6px}
.sign-done .sign-actions{justify-content:center}
.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-actions .btn-primary{min-width:140px;justify-content:center}
.sig-pad+.sign-actions{margin-top:8px}
.sign-card .declinebox{margin-top:14px}
.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)}

/* ---- Templates: page head, A4 sheet, document blocks (the document has
   its own type scale - it is content, not app chrome) ---- */
.tpl-head{display:flex;align-items:center;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.tpl-name{flex:1;min-width:220px;font-family:var(--font-display);font-size:20px;font-weight:600;border:1px solid transparent;background:transparent;padding:4px 8px;border-radius:var(--radius);color:var(--fg)}
.tpl-name:hover{border-color:var(--border)}
.tpl-name:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--focus);outline:none}
.pv-emp{width:220px}
.sheet{width:794px;max-width:100%;min-height:1000px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:56px 64px}
@media(max-width:900px){.sheet{padding:28px 22px}}
.letterhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:28px}
.letterhead img{height:22px}
.lh-co{font-size:10px;color:var(--muted);text-align:right;line-height:1.5}
.db-break{display:flex;align-items:center;gap:10px;margin:22px 0;color:var(--muted-2)}
.db-break::before,.db-break::after{content:"";flex:1;border-top:1.5px dashed var(--border-strong)}
.db-break span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.db-sig{position:relative;margin:34px 0 10px;max-width:300px;border-radius:6px;padding:4px 6px}
.db-sig-line{border-bottom:1.5px solid var(--border-strong);height:44px}
.db-sig-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}
#pv .db-sig-role{margin-top:6px}
.db-sig-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted-2);margin-top:4px}
.db-role{font:inherit;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border);border-radius:4px;padding:2px 6px;width:180px}
.db-role[readonly]{border-color:transparent;background:transparent;color:var(--fg);cursor:default;padding-left:0}
/* Merge-field tokens: sky chip in the editor, amber when a value is missing */
.tk{display:inline-block;background:#D8EAFB;color:#2A66A8;border-radius:4px;padding:0 5px;font-size:.9em;white-space:nowrap}
.tk-empty{background:var(--warning-bg);color:var(--warning-fg)}
.tk-filled{background:#D8EAFB;color:#2A66A8;border-radius:4px;padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tk-bad{background:var(--danger-bg);color:var(--danger-fg)}
/* Edit-mode blocks */
.warnx{color:var(--danger-fg);font-weight:500}
/* Segmented toggle (.seg is reserved for mode/visibility toggles) */
.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;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)}

/* ---- Rich-text document (#doc editable / #pv preview) ---- */
.rt{outline:none;min-height:520px}
.rt h1{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;margin:18px 0 8px;color:var(--fg)}
.rt h2{font-family:var(--font-display);font-size:16px;font-weight:600;margin:16px 0 6px;color:var(--fg)}
.rt p{font-size:13px;line-height:1.75;margin:8px 0;color:var(--fg-2)}
.rt ul,.rt ol{font-size:13px;line-height:1.75;color:var(--fg-2);margin:8px 0 8px 22px}
.rt u{text-underline-offset:2px}
/* Document tables. Fixed layout so one long word cannot blow a column out and
   leave the screen disagreeing with the PDF, which sizes columns from content
   and then holds them. A header row is <th>, matching the sanitiser. */
.rt table{width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0;font-size:12px;line-height:1.55;color:var(--fg-2)}
.rt td,.rt th{border:1px solid var(--border);padding:7px 9px;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.rt th{background:var(--surface-2);font-weight:600;color:var(--fg)}
.rt table .tk{white-space:normal}
/* Editing affordance: the cell holding the caret gets a soft tint so it is
   findable in a dense grid. Edit mode only - never preview, never the PDF. */
#doc table td:focus,#doc table th:focus{outline:none}
#doc table td:focus-within,#doc table th:focus-within{background:var(--focus)}
/* Row and column controls, shown only while the caret sits in a table */
.tbl-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.tbl-tools-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
/* Contents block. Atomic in the editor; on screen it lists the sections with
   no page numbers, because pages only exist once the PDF is laid out. */
.db-toc{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin:16px 0;background:var(--surface-2)}
.db-toc-h{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--fg);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.db-toc-i{font-size:12px;line-height:1.9;color:var(--fg-2)}
.db-toc-i.sub{padding-left:14px}
.db-toc-empty{font-size:11px;color:var(--muted-2);line-height:1.6}
.db-toc.db-static{background:transparent;border-color:transparent;padding:0;margin:14px 0 18px}
.db-toc.db-static .db-toc-h{font-size:16px}
#pv .db-toc{background:transparent}
/* Cover page: its own sheet in the PDF, shown here as a centred title block
   with a dashed edge so it reads as a page rather than as body content. */
.db-cover{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);padding:56px 40px;margin:0 0 26px;text-align:center;background:var(--surface-2)}
.db-cover h1{font-size:30px;line-height:1.2;margin:0 0 10px}
.db-cover h2{font-size:17px;margin:0 0 8px}
.db-cover p{font-size:14px;margin:6px 0;color:var(--fg-2)}
.db-cover::before{content:"Cover page";display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:22px}
#pv .db-cover,.sheet-flat .db-cover{background:transparent}
/* ---- Editor layout: sheet + field rail ---- */
.ed-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
.ed-main{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:60px}
/* the page sheet is a fixed 794px - centred children must still stop at the
   column edge, or on a narrow laptop the sheet slides out under the sidebar */
.ed-main>*{max-width:100%;min-width:0}
@media(max-width:1100px){.ed-grid{grid-template-columns:1fr}}
.doc-toolbar{position:sticky;top:66px;z-index:40;display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 8px;box-shadow:var(--shadow-sm)}
.tb{border:0;background:none;font-family:inherit;font-size:12px;font-weight:500;color:var(--fg-2);padding:4px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tb:hover{background:var(--surface-2);color:var(--fg)}
.tb.on{background:var(--surface-3);color:var(--fg);font-weight:600}
.tb-sep{width:1px;height:16px;background:var(--border);margin:0 4px}
/* ---- Rail accordion: collapsible rail cards; the message card stays open ---- */
.acc-head{cursor:pointer;user-select:none}
.rail-acc:not(.open)>.acc-head{margin-bottom:0}
.acc-chev{font-size:9px;color:var(--muted-2);transition:transform .15s ease;transform:rotate(-90deg)}
.rail-acc.open .acc-chev{transform:rotate(0)}
.rail-acc>.acc-body{display:none}
.rail-acc.open>.acc-body{display:block}
.fr-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fr-sub{font-size:10px;color:var(--muted-2);margin:3px 0 6px;line-height:1.5}
.fr-group{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);margin:12px 0 4px}
.fr-item{display:block;width:100%;text-align:left;border:1px solid transparent;background:#D8EAFB;color:#2A66A8;font-family:inherit;font-size:12px;border-radius:var(--radius);padding:4px 9px;margin-bottom:4px;cursor:grab}
.fr-item:hover{border-color:#2A66A8}
.fr-item:active{cursor:grabbing}
/* ---- Widgets: grip + remove, drag states, drop indicator ---- */
.db-grip{position:absolute;left:-22px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:13px;cursor:grab;display:none;user-select:none}
.db-x{position:absolute;right:-6px;top:-8px;width:20px;height:20px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted-2);font-size:13px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.db-x:hover{color:var(--danger);border-color:var(--danger)}
.db-sig:hover,.db-break:hover{background:var(--surface-2)}
#pv .db-sig:hover,#pv .db-break:hover{background:transparent}
.db-sig:hover .db-grip,.db-break:hover .db-grip{display:block}
.db-sig:hover .db-x,.db-break:hover .db-x{display:inline-flex}
/* ---- Inline image widget (db-img): e.g. a pre-signed signature ---- */
.db-img{position:relative;margin:12px 0;border-radius:6px;padding:4px 6px;width:fit-content;max-width:100%}
.db-img img{display:block;max-width:100%}
.db-img:hover{background:var(--surface-2)}
.db-img:hover .db-grip{display:block}
.db-img:hover .db-x{display:inline-flex}
.db-size{position:absolute;top:-8px;width:20px;height:20px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted-2);font-size:12px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.db-size:hover{color:var(--fg);border-color:var(--border-strong)}
.db-size[data-dir="-1"]{right:44px}
.db-size[data-dir="1"]{right:20px}
.db-img:hover .db-size{display:inline-flex}
.db-img.db-static{padding:0;margin:10px 0}
.db-img.db-static:hover{background:transparent}
.db-break{position:relative;border-radius:6px;padding:2px 6px}
.db-sig.dragging,.db-break.dragging{opacity:.35}
.drop-line{height:0;border-top:2px solid var(--fg);border-radius:2px;margin:2px 0}

/* ---- New signature modal: source cards ---- */
.src-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.src-card{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:10px 12px;cursor:pointer;font-family:inherit}
.src-card:hover{border-color:var(--border-strong);background:var(--surface-2)}
.src-card.on{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.src-card.is-disabled{opacity:.5}
.src-t{font-size:12px;font-weight:600;color:var(--fg)}
.src-s{font-size:10px;color:var(--muted);line-height:1.4}
/* ---- Request editor: three steps ----
   Step 1 is envelope on the left, document in the middle, merge fields on the
   right. Step 2 is document in the middle, signature fields on the right.
   Step 3 is one centred review column. The grid changes shape with the step
   rather than each step juggling its own layout. */
.steps{display:flex;align-items:center;gap:2px;margin:0 0 14px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:6px 12px;border-radius:999px}
.step .n{width:18px;height:18px;min-width:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-3);color:var(--muted)}
.step:hover{color:var(--fg)}
.step.on{color:var(--fg);background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm);cursor:default}
.step.on .n{background:var(--fg);color:var(--surface)}
.step.done{color:var(--fg-2)}
.step.done .n{background:var(--success-bg);color:var(--success-fg)}
.step-arrow{color:var(--muted-2);font-size:15px;line-height:1;padding:0 2px}

.step-grid{display:grid;gap:16px;align-items:start}
.step-grid.s1{grid-template-columns:340px minmax(0,1fr) 250px}
.step-grid.s1.no-right{grid-template-columns:340px minmax(0,1fr)}
.step-grid.s2{grid-template-columns:minmax(0,1fr) 300px}
.step-grid.s3{grid-template-columns:1fr}
@media(max-width:1250px){
  .step-grid.s1,.step-grid.s1.no-right{grid-template-columns:320px minmax(0,1fr)}
  /* the merge-field palette drops under the document rather than off the page */
  .step-grid.s1 #rightRail{grid-column:1/-1;position:static;max-height:none}
}
@media(max-width:1100px){
  .step-grid.s1,.step-grid.s1.no-right,.step-grid.s2{grid-template-columns:1fr}
  .req-rail{position:static;max-height:none}
}

/* Signature-field rail (step 2) */
.pl-row{display:flex;align-items:center;gap:7px;margin-top:9px}
.pl-row:first-child{margin-top:0}
.pl-name{flex:1;min-width:0;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-fields{margin:4px 0 2px 15px}
.pl-fields .sg-fields{display:inline-flex;flex-wrap:wrap;gap:4px}

/* Review & send (step 3) */
.rev-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.rev-card{padding:20px 22px;overflow:visible}
.rev-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:18px 0 6px;display:flex;align-items:center;gap:10px}
.rev-h:first-child{margin-top:0}
.rev-edit{border:0;background:none;font-family:inherit;font-size:10px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:0;padding:0}
.rev-edit:hover{color:var(--fg)}
.rev-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}
.rev-row.muted{font-size:12px}
.rev-n{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:var(--surface-3);color:var(--muted-2)}
.rev-main{flex:1;min-width:0}
.rev-sub{display:block;font-size:10px;color:var(--muted-2);margin-top:1px}

/* ---- Request editor: rail ---- */
.req-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
@media(max-width:1100px){.req-grid{grid-template-columns:1fr}.req-rail{position:static;max-height:none}}
.req-rail{position:sticky;top:66px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 130px);overflow:auto}
.rail-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px 12px 14px}
.rail-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail-note{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.rail-card input,.rail-card textarea{width:100%}
.rail-card .btn-sm{margin-top:2px}
.sg-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.sg-blk{margin-bottom:10px}
.sg-blk .sg-row{margin-bottom:0}
.sg-meta{display:flex;align-items:center;gap:8px;margin:4px 0 0 15px;min-width:0}
.sg-meta .sg-role{flex:none;width:112px}
.sg-meta .sg-email{flex:1;min-width:0;margin:0}
.sg-dot{width:8px;height:8px;min-width:8px;border-radius:50%}
.sg-row .sg-role{flex:none;width:84px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:5px 7px}
.sg-row .sg-who{flex:1;min-width:0}
.sg-x{flex:none;border:0;background:none;color:var(--muted-2);font-size:14px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:4px}
.sg-x:hover{color:var(--danger);background:var(--danger-bg)}
.sg-place{display:flex;align-items:center;gap:8px;margin:-2px 0 8px 14px}
.place-btn{border:0;background:none;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.sg-count{font-size:10px;color:var(--muted-2)}
.sg-count.sg-warn{color:var(--warning-fg)}
/* signer person: email on a muted sub-line under the row (aligns under the person field) */
.sg-email{display:block;font-size:10px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-email:empty{display:none}
/* single "+ Field" control replaces the five inline place links */
.place-btn.place-add{text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:2px 9px;font-size:10px;line-height:1.4}
/* placed fields as pills: click to scroll to + highlight the box on the doc */
.sg-fields{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.fld-pill{display:inline-flex;align-items:center;gap:3px;border:1px solid currentColor;background:none;border-radius:999px;padding:1px 8px;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;line-height:1.5}
.fld-pill:hover{background:var(--surface-2)}
.fld-pill .fld-opt{font-style:normal;font-weight:400;opacity:.7;font-size:9px}
/* supporting-doc provenance tag: Auto (from the template) or Library (added by hand) */
.att-tag{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--fg-2);background:var(--surface-3);border-radius:999px;padding:1px 6px;margin-left:2px;vertical-align:1px}
.att-tag.auto{background:var(--info-bg);color:var(--info-fg)}
.cc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.cc-chips:empty{display:none}
.cc-chip{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:500;background:var(--info-bg);color:var(--info-fg);border-radius:999px;padding:3px 4px 3px 9px;max-width:100%}
.cc-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:12px;line-height:1;padding:0 4px;border-radius:999px}
.att-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0}
.att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Signing pack: the ordered documents that go out together on one link.
   Rows are selectable - the selected one is what the editor and preview
   show. Reorder controls appear on hover and on the open row. */
.pack-list{margin-bottom:8px}
.pack-list:empty{display:none}
.pack-doc{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer}
.pack-doc+.pack-doc{margin-top:2px}
.pack-doc:hover{background:var(--surface-2)}
.pack-doc.on{background:var(--surface-2);border-color:var(--border)}
.pack-doc .n{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:var(--surface-3);color:var(--muted-2)}
.pack-doc.on .n{background:var(--fg);color:var(--surface)}
.pack-doc .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack-doc .nm .sub{display:block;font-size:10px;font-weight:400;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis}
.pack-doc.on .nm{font-weight:600}
.pack-doc .mv{flex:none;display:flex;gap:1px;opacity:.4;transition:opacity .12s}
.pack-doc:hover .mv,.pack-doc.on .mv{opacity:1}
.pack-doc .mv button{border:0;background:none;color:var(--muted-2);cursor:pointer;font-size:11px;line-height:1;padding:3px 4px;border-radius:4px}
.pack-doc .mv button:hover{color:var(--fg);background:var(--surface-3)}
.pack-doc .mv button:disabled{opacity:.25;cursor:default}
.tpl-note-line{margin-bottom:10px;text-align:center}
/* ---- PDF viewer + signature boxes ---- */
.pdfview{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;padding-bottom:60px}
.pdfview .sheet{width:100%}
.pg{position:relative;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow-sm);max-width:100%}
.pg canvas{display:block;max-width:100%;height:auto}
.pg-n{position:absolute;bottom:6px;right:8px;font-size:10px;color:var(--muted-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 7px}
.sigbox{position:absolute;border:1.5px dashed;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;touch-action:none}
.sigbox:active{cursor:grabbing}
.sigbox .sb-l{font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
.sigbox .sb-x{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.sigbox:hover .sb-x{display:inline-flex}
/* pulse when a rail field pill scrolls to this box */
.sigbox.sb-focus{z-index:6;animation:sbfocus 1.5s ease-out}
@keyframes sbfocus{0%,55%{box-shadow:0 0 0 3px var(--fg)}100%{box-shadow:0 0 0 3px rgba(20,20,20,0)}}
/* signer page: field labels auto-fit their box; tap-state pulses */
.sfield .sf-lbl{white-space:nowrap;line-height:1;font-weight:600;overflow:hidden}
.sfield .sf-tap{font-weight:700;animation:sftap 1.6s ease-in-out infinite}
@keyframes sftap{0%,100%{opacity:1}50%{opacity:.55}}
/* clear an applied signature/initials spot (nothing commits until Finish) */
.sfield .sf-x{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow-sm)}
.sfield .sf-x:hover{color:var(--danger-fg);border-color:var(--danger-fg)}

/* ---- Send to many (runs): stepper, people picker, review, meter ---- */
/* Stepper: roomier, and the active step wears the system blue rather than
   ink (Alexa, 6 Aug 2026) - the shared component, so every stepper follows. */
.steps{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.steps .st{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer}
.steps .st .n{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:9px}
.steps .st.on{border-color:var(--info);color:var(--info-fg);background:var(--info-bg)}
.steps .st.on .n{background:var(--info);color:#fff}
.steps .st.done{color:var(--muted)}
.steps .st.done .n{background:var(--success-bg);color:var(--success-fg)}
.steps .st-sep{width:18px;height:1px;background:var(--border-strong)}
.run-step{max-width:760px}
.run-step .card{padding:18px 20px}
.emp-pick{max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}
.emp-pick table{width:100%}
.emp-pick .noemail td{opacity:.55}
.pick-head .pick-all{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0;font-size:12px;font-weight:500;color:var(--fg-2)}
.pick-head input[type=checkbox]{width:16px;min-width:16px;height:16px;padding:0}
.emp-pick td{vertical-align:middle}
.emp-pick .emp-mail-in{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.pick-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;font-size:10px;color:var(--muted)}
.rvw-line{display:flex;gap:10px;font-size:12px;padding:7px 0;border-bottom:1px solid var(--border)}
.rvw-line:last-child{border-bottom:0}
.rvw-line .k{width:150px;min-width:150px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);padding-top:1px}
.rvw-line .v{flex:1;min-width:0;color:var(--fg-2)}
.meter{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;flex:1;min-width:80px}
.meter i{display:block;height:100%;border-radius:999px;background:var(--success-fg);transition:width .3s}
.run-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border)}
.run-row:last-child{border-bottom:0}
.run-row .rn{min-width:0;flex:1}
.run-row .rn .t{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-row .rn .s{font-size:10px;color:var(--muted-2);margin-top:1px}
.run-row .rp{display:flex;align-items:center;gap:10px;flex:1;max-width:300px}
.run-row .rp .pc{font-size:10px;color:var(--muted);white-space:nowrap}
.send-log{max-height:220px;overflow:auto;font-size:10px;color:var(--muted);margin-top:10px}
.send-log .bad{color:var(--danger)}

/* ---- Field boxes: resize handle, required toggle, type palette ---- */
.sigbox .sb-rs{position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;border-radius:3px;border:1.5px solid currentColor;background:var(--surface);cursor:nwse-resize;display:none}
.sigbox:hover .sb-rs{display:block}
.sigbox .sb-q{position:absolute;bottom:-9px;right:12px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:2px 6px;border-radius:999px;cursor:pointer;display:none}
.sigbox:hover .sb-q{display:inline-flex}
.sigbox .sb-opt{font-style:normal;font-weight:400;opacity:.7;font-size:8px;text-transform:none;letter-spacing:0}
.sigbox.sb-cb .sb-l{display:none}
/* Rename a placed field: the pencil sits opposite the remove button and the
   label turns into an input in place. A tick box is too small to show any
   wording, so while renaming it the input floats above the box. 4 Aug 2026 */
.sigbox .sb-n{position:absolute;top:-9px;left:-9px;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.sigbox:hover .sb-n{display:inline-flex}
.sigbox .sb-n:hover{color:var(--fg);border-color:var(--fg)}
.sigbox .sb-in{width:100%;height:100%;min-width:0;border:0;background:var(--surface);color:var(--fg);border-radius:5px;font:inherit;font-size:10px;font-weight:600;letter-spacing:.03em;text-align:center;padding:0 4px;outline:none;cursor:text}
.sigbox.sb-cb .sb-in{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:132px;height:24px;z-index:7;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.place-row{display:flex;flex-wrap:wrap;gap:3px 8px;margin:-2px 0 8px 14px;align-items:center}
.place-row .place-lbl{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}

/* ---- Guided signing (sign.html) ---- */
.sgn-pages{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:12px}
/* no overflow:hidden here - the clear (x) sits just outside the corner;
   the field's contents (.sf-sig, .sf-lbl, img) clip themselves */
.sfield{position:absolute;border:1.5px solid var(--warning-fg, #B45309);background:rgba(229,186,65,.14);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;font-weight:600;color:#92610A;white-space:nowrap;transition:box-shadow .15s}
.sfield:hover{box-shadow:0 0 0 3px rgba(229,186,65,.25)}
.sfield.cur{box-shadow:0 0 0 3px rgba(229,186,65,.45)}
.sfield.done{border-color:var(--success-fg);background:rgba(22,101,52,.07);color:var(--success-fg)}
.sfield input{width:100%;height:100%;border:0;background:transparent;font:inherit;color:var(--fg);padding:0 6px;outline:none;min-width:0}
.sfield .sf-sig{font-family:var(--sig-face,'Caveat',cursive);font-size:calc(20px * var(--sig-scale,1));font-weight:var(--sig-weight,600);overflow:hidden;white-space:nowrap;max-width:100%;padding:0 4px}
.sgn-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:12px 16px;margin-top:14px}
.sgn-bar .prog{font-size:12px;color:var(--muted)}
.sgn-bar .meter{max-width:160px}
.sheet-flat{background:transparent;border:0;box-shadow:none;padding:0}
/* Signer action bar on a phone: progress + meter on their own row up top, the
   two primary buttons side by side, decline full width - nothing crammed. */
@media (max-width:700px){
  .sgn-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .sgn-bar .prog{order:-2;flex:0 0 100%;text-align:center}
  .sgn-bar .meter{order:-1;flex:1 0 100%;max-width:none}
  .sgn-bar .spacer{display:none}
  .sgn-bar .btn-primary{flex:1;min-width:120px;min-height:44px;justify-content:center}
  .sgn-bar .sign-decline{order:3;width:100%;text-align:center;padding:6px 0}
}

/* field chips: hover x to remove (editors only - resolve() strips it) */
.tk{position:relative}
.tk .tk-x{display:none;position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;line-height:1;cursor:pointer;padding:0;align-items:center;justify-content:center}
.tk:hover .tk-x{display:inline-flex}
.tk .tk-x:hover{color:var(--danger);border-color:var(--danger)}

/* ============================================================
   Status tabs, above every list.

   The stacked row component that used to live here (.slist / .sr /
   .skid - a title with a subtitle under it and a pill on the right)
   is gone. Every list is a table now; see "List tables" further up.
   ============================================================ */
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--border);margin:2px 0 14px}

/* Visibility option cards (drawer): coloured selected state */
.vis-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.vis-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:10px 12px;cursor:pointer;font-family:inherit}
.vis-opt svg{width:15px;height:15px;color:var(--muted);margin-bottom:4px}
.vis-opt .vo-t{font-size:12px;font-weight:600;color:var(--fg)}
.vis-opt .vo-s{font-size:10px;color:var(--muted);line-height:1.35}
.vis-opt:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-2)}
.vis-opt:disabled{opacity:.55;cursor:default}
.vis-opt.priv.on{border-color:#8895b1;background:#EDF0F6;box-shadow:inset 0 0 0 1px #8895b1}
.vis-opt.priv.on svg,.vis-opt.priv.on .vo-t{color:#46536e}
.vis-opt.team.on{border-color:var(--info);background:var(--info-bg);box-shadow:inset 0 0 0 1px var(--info)}
.vis-opt.team.on svg,.vis-opt.team.on .vo-t{color:var(--info-fg)}
.vis-share-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 4px}
.mt6{height:6px}

/* Drawer message: shown as a soft grey card so it reads as quoted content */
.msg-quote{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--fg-2);white-space:pre-wrap}
/* Drawer activity timeline: dot + action + who + when */
.tl{display:flex;flex-direction:column}
.tl-row{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid var(--border);font-size:12.5px}
.tl-row:last-child{border-bottom:0}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);flex:none}
.tl-dot.sent{background:var(--info-fg)}
.tl-dot.reminded{background:var(--warning-fg)}
.tl-dot.signed,.tl-dot.completed{background:var(--success-fg)}
.tl-dot.declined,.tl-dot.cancelled{background:var(--danger)}
.tl-t{font-weight:600;color:var(--fg);white-space:nowrap}
.tl-who{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-when{margin-left:auto;font-size:11px;color:var(--muted-2);white-space:nowrap}

/* Drawer visibility: share picker (Everyone shortcut + specific-people checklist) */
.vis-share{margin-top:10px}
.vis-people{display:flex;flex-direction:column;gap:1px;margin-top:5px}
.vis-p{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:12px;color:var(--fg-2);cursor:pointer}
/* keep the checkbox at its natural size even inside a rail-card (which sets
   input{width:100%}); the control is used in drawers and in editor rails */
.vis-p input[type=checkbox]{margin:0;flex:none;width:16px;min-width:16px}
.vis-all{align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;background:var(--surface-2)}
.vis-all span{font-size:12px}
.vis-people.is-off{opacity:.5;pointer-events:none}

/* Download rows (My Documents drawer: signed copy + supporting docs) */
.dl-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.dl-row:last-child{border-bottom:none}
.dl-name{flex:1;min-width:0;font-size:12px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis}
.dl-row .btn-sm{flex:none}

/* Library row usage badges (On sends / Visible to staff) */
.lib-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;color:var(--fg-2);background:var(--surface-3);border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap}

/* Company documents: open affordance on a clickable row */
.dl-open{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}
tr.speclink:hover .dl-open{color:var(--fg-2)}

/* ============================================================
   Responsive: the document pages, drawers and selection cards
   on tablets and phones (23 Jul). The four list pages (Signing,
   Library, My Documents, Company documents) share this behaviour.
   ============================================================ */
@media (max-width:600px){
  /* Selection cards stack rather than squeeze two-up */
  .vis-opts,.src-cards,.grid2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .main{padding:18px 16px}
  /* Status/category tabs scroll sideways instead of wrapping or clipping */
  .tabs{gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap}
  /* A list table keeps all its columns on a phone and scrolls sideways
     inside its card, rather than dropping columns or wrapping cells. Every
     card is already overflow:auto, so this is only about not letting a long
     title squeeze the rest of the row to nothing. */
  .tname{max-width:150px}
  .tcaret{padding-left:8px}
  tr.tkid td.tkid-first{padding-left:22px}
  td .btn-sm{padding:5px 8px}
  .lib-badge{margin-left:0}
  /* Secondary columns drop out on a phone so the status stays on screen
     without sideways scrolling. Mark BOTH the th and every td. */
  .t-hide-sm{display:none}
}
/* Better-off-overall warning above the document. Amber, not red: the send is
   still allowed - this is a judgement for the sender, not a blocked action. */
.warn-strip{border:1px solid var(--warning-fg);border-left-width:3px;border-radius:var(--radius);background:var(--warning-bg);color:var(--warning-fg);padding:10px 13px;margin:0 0 12px;font-size:12px;line-height:1.6}
.warn-strip div + div{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08)}

/* ---- Checkbox row (.check): a checkbox and its label on one line, for a
   yes/no that belongs beside the fields rather than in a table. Same
   component as the admin console surface so the two agree. Declared after
   .field label deliberately - inside a .field the label would otherwise be
   forced to a block. Added 5 Aug 2026 for the Companies record. ---- */
label.check{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:400;color:var(--fg);cursor:pointer;user-select:none}
/* the remove action inside a neutral tag - a glyph, not a link */
.lvl a{text-decoration:none;color:var(--muted);padding-left:2px}
.lvl a:hover{color:var(--fg)}
label.check input[type=checkbox]{width:16px;min-width:16px;flex:none;margin:0;padding:0}
label.check:has(input:disabled){opacity:.5;cursor:default}

/* ---- Multi select (JoinControls.multiSelect): chosen values as removable
   tags, plus one trigger that opens a tick list. Added 5 Aug 2026 - a record
   holding SEVERAL of something (trades on a company) gets one control that
   both adds and removes, not an add-picker beside a row of crosses. ---- */
.ms-host{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ms-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:20px}
.ms-tags .lvl{display:inline-flex;align-items:center;gap:5px}
.ms-tags .lvl.is-primary{background:var(--info-bg);color:var(--info-fg)}
.ms-x{border:0;background:none;padding:0 0 0 2px;margin:0;font:inherit;font-size:12px;line-height:1;color:var(--muted);cursor:pointer}
.ms-x:hover{color:var(--fg)}
.ms-add{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;color:var(--fg-2);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:7px 11px;cursor:pointer}
.ms-add:hover{background:var(--surface-2);border-color:var(--border-strong)}
.ms-add .ms-car{display:inline-flex;color:var(--muted)}
.ms-panel .combo-list{padding:4px 2px}
label.check.ms-opt{display:flex;width:100%;padding:6px 9px;border-radius:5px;gap:9px}
label.check.ms-opt:hover{background:var(--surface-2)}
label.check.ms-opt .combo-sub{margin-left:auto}

/* ---- Row selection: tick column + bulk-action strip (platform standard,
   missing from this copy until 7 Aug 2026 - the unstyled tick column was
   the gap Alexa flagged) ---- */
.selbar{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border-radius:var(--radius);padding:8px 12px;margin-bottom:12px;font-size:12px}
.selbar .btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.selbar .btn:hover{background:rgba(255,255,255,.22)}
.selbar .btn.armed{background:var(--warning-bg);border-color:var(--warning-bg);color:var(--warning-fg)}
.selbar .spacer{flex:1}
th.selcol,td.selcol{width:26px;max-width:26px;padding-right:0}

/* ---- Record page head: THE shell for every record page (Alexa, 6 Aug
   2026) - breadcrumb back, title, status pills and the page's actions on
   one line. Painted by PortalShell.recordHead(). */
.rec-head{display:flex;align-items:center;gap:10px;margin:2px 0 18px;flex-wrap:wrap}
.rec-head h1{margin:0}
.rec-back{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);text-decoration:none;font-size:15px;flex:none}
.rec-back:hover{color:var(--fg);background:var(--surface-2)}
.rec-chips{display:inline-flex;gap:6px;align-items:center}
.rec-actions{display:inline-flex;gap:8px;align-items:center;margin-left:auto}

/* ---- Sign placement rail: what CAN be added is a dashed pill button;
   what IS on the document is a solid row - click jumps to the box. */
.plc-add{border:1px dashed currentColor;background:none;border-radius:999px;padding:2px 9px;font-family:inherit;font-size:10px;font-weight:600;line-height:1.4;cursor:pointer}
.plc-add:hover{background:var(--surface-2)}
.plc-list{margin:4px 0 0 26px;display:flex;flex-direction:column}
.plc-row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer}
.plc-row:hover{background:var(--surface-2)}
.plc-row .plc-swatch{width:10px;height:10px;border-radius:3px;background:currentColor;flex:none}
.plc-row .plc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plc-row .plc-pg{color:var(--muted);font-weight:500;font-size:10px;flex:none}
.plc-row .plc-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0 2px;border-radius:4px}
.plc-row .plc-x:hover{color:var(--fg)}
.fldbox .fr{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;background:#fff;border:1px solid currentColor;cursor:nwse-resize;touch-action:none}
.fldbox.flash{animation:fldflash .9s ease}
@keyframes fldflash{0%,55%{outline:3px solid currentColor;outline-offset:2px}100%{outline:0 solid transparent}}

/* ---- Universal autosave tick (Alexa, 7 Aug 2026): every silent write
   flashes this, top right, so the person knows it saved itself. Shown by
   PortalShell.savedTick(). */
.saved-tick{position:fixed;top:76px;right:20px;z-index:1300;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#067647;background:#ECFDF3;border:1px solid #ABEFC6;border-radius:999px;padding:4px 11px;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s;pointer-events:none}
.saved-tick.show{opacity:1;transform:none}

/* ---- Letter choice bar (Swee, 7 Aug 2026): a document with no signature
   block asks for nothing unless the sender says so. Shown above the letter
   being written, only when it applies. Buttons are the shared .seg. ---- */
.ack-bar{display:flex;align-items:center;gap:10px;margin:0 2px 10px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.ack-bar .ab-t{font-size:11.5px;font-weight:600;color:var(--muted)}