:root{
  --sage:#c2bf8b; --sage-d:#a8a36a;
  --slate:#333c45; --steel:#333c45; --lightblue:#bbd6e2;
  --cream:#faf9f4; --line:#e7e4d8; --muted:#7c7c74;
  --overdue:#c0492f; --overdue-bg:#fbeae6;
  --due:#9a7d12; --due-bg:#f8f1d6;
  --ok:#3f7d57; --ok-bg:#e9f3ec;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Raleway,Arial,sans-serif;color:var(--slate);background:var(--cream);
  -webkit-font-smoothing:antialiased;line-height:1.45}

/* ---- top bar ---- */
.portal-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.2rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.portal-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--slate)}
.portal-brand a{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.portal-brand img{height:30px;width:auto}
.portal-brand span{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;letter-spacing:.02em}
.portal-nav a{margin-left:1.1rem;text-decoration:none;color:var(--steel);font-weight:600;font-size:.92rem}
.portal-nav a.active{color:var(--slate);border-bottom:2px solid var(--sage);padding-bottom:2px}
.portal-nav a.muted{color:var(--muted);font-weight:500}

/* ---- board ---- */
/* .portal-main is the neutral full-width SHELL (padding only) — page width is owned by the inner
   wrapper: .report 720 / .report.report-wide 1060 / .report.report-xwide 1440 / .dash 880
   (docs/portal-design-system.md). */
.portal-main{margin:0 auto;padding:1.4rem 1.1rem 4rem}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.board-head h1{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:2.1rem;margin:0 0 .15rem}
.sub{margin:0;color:var(--muted);font-size:.95rem}
.t-overdue{color:var(--overdue)} .t-due{color:var(--due)}

.whoami-box{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.5rem .75rem}
.whoami-box label{font-weight:600;font-size:.9rem;color:var(--muted)}
.whoami-box select{font:inherit;font-weight:600;color:var(--slate);border:none;background:transparent;
  padding:.25rem;min-width:160px;cursor:pointer}
.whoami-box select:focus{outline:none}

/* ---- area sections ---- */
.area{margin-bottom:1.6rem}
.area-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;
  text-transform:capitalize;margin:0 0 .55rem;padding-bottom:.3rem;border-bottom:1px solid var(--line);color:var(--slate)}
.chore-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}

/* ---- chore row ---- */
.chore{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;
  border:1px solid var(--line);border-left:5px solid var(--line);border-radius:12px;padding:.75rem .9rem;
  transition:border-color .15s,box-shadow .15s}
.chore-main{min-width:0}
.chore-head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.chore-name{font-weight:600;font-size:1rem}
.chore-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.pill{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:.05rem .55rem;font-weight:600}
.last{font-size:.82rem}
.muted{color:var(--muted)}

.badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:.12rem .5rem;border-radius:20px;white-space:nowrap}
.badge-overdue{background:var(--overdue-bg);color:var(--overdue)}
.badge-due{background:var(--due-bg);color:var(--due)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-asneeded{background:#eee;color:var(--muted)}

.chore.status-overdue{border-left-color:var(--overdue)}
.chore.status-due{border-left-color:var(--sage-d)}
.chore.status-ok{border-left-color:var(--ok)}
.chore.needs-who{border-left-color:var(--steel);box-shadow:0 0 0 2px var(--lightblue)}

/* ---- sign-off button ---- */
.btn-signoff{flex:none;font:inherit;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--slate);background:var(--sage);border:none;border-radius:24px;padding:.6rem 1.1rem;cursor:pointer;
  transition:background .15s,transform .05s}
.btn-signoff:hover{background:var(--sage-d)}
.btn-signoff:active{transform:translateY(1px)}
.btn-signoff[disabled]{opacity:.55;cursor:default}
.chore.status-ok .btn-signoff{background:var(--cream);border:1px solid var(--line)}

.flash{margin-top:.35rem;font-size:.82rem;font-weight:600;color:var(--ok)}
.flash.warn{color:var(--steel)}
.empty{color:var(--muted)}

@media (max-width:560px){
  .chore{flex-wrap:wrap}
  .btn-signoff{width:100%}
  .whoami-box{width:100%}
}

/* --- area kind tags + pick prompt (assignments update) --- */
.kindtag{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.08rem .45rem;border-radius:20px;vertical-align:middle;margin-left:.4rem;font-family:Raleway,sans-serif}
.kind-role{background:var(--lightblue);color:var(--slate)}
.kind-shared{background:var(--cream);color:var(--muted);border:1px solid var(--line)}
.pick-prompt{background:#fff;border:1px dashed var(--sage-d);border-radius:14px;padding:1.8rem;
  text-align:center;color:var(--slate);font-size:1.05rem}

/* --- staff portal header: nav + staging "view as" control --- */
.portal-right{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:flex-end}
/* Compact "viewing as" control — sized to its content, not a sprawling bar.
   The label is hidden (the ADMIN tag already says what this is); the select is
   capped so a long staff name can't stretch the header. */
.act-as{display:inline-flex;align-items:center;gap:.35rem;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:.22rem .5rem;max-width:max-content}
.act-as-tag{font-size:.58rem;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--steel);border-radius:20px;padding:.1rem .4rem}
.act-as label{font-size:.72rem;font-weight:600;color:var(--muted)}
.act-as select{font:inherit;font-size:.82rem;font-weight:700;color:var(--slate);border:none;background:transparent;cursor:pointer;padding:.1rem .1rem;max-width:9.5rem;text-overflow:ellipsis}
.act-as select:focus{outline:none}
@media (max-width:640px){.act-as{max-width:100%}.act-as select{max-width:7.5rem}}
@media (max-width:640px){.portal-right{width:100%}}

/* --- time-of-day grouping + completed filter + area footnote --- */
.board-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.board-controls .sub{margin:0}
.filter-toggle{display:flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:24px;padding:.4rem .8rem;cursor:pointer;user-select:none}
.filter-toggle input{accent-color:var(--sage-d);width:1rem;height:1rem;cursor:pointer}
.timegroup{margin-bottom:1.7rem}
.time-title{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.5rem;color:var(--slate);margin:0 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--sage)}
.time-open .time-title{border-bottom-color:var(--steel)}
.time-close .time-title{border-bottom-color:var(--slate)}
.area-foot{font-size:.74rem;color:var(--muted);border-left:2px solid var(--line);padding-left:.45rem}

/* --- portal dashboard --- */
.dash{max-width:880px;margin:0 auto}
.dash:has(.tiles){max-width:none;margin:0;padding-inline:clamp(0rem,8vw,12rem)}  /* TILE pages fill the screen on desktop; ~1 tile-width side gutters (scales to 0 on mobile). Forms (no .tiles, e.g. password_change) stay 880. */
.dash-head{margin-bottom:1.4rem}
.dash-head h1{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:2.3rem;margin:0 0 .2rem}
.dash-sub{margin:0;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.tile{display:flex;flex-direction:column;gap:.35rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem;text-decoration:none;color:var(--slate);transition:transform .08s,box-shadow .15s,border-color .15s;min-height:120px}
.tile-icon{font-size:1.7rem;line-height:1}
.tile-name{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.35rem}
.tile-meta{font-size:.82rem;color:var(--muted);margin-top:auto}
.tile-live{border-left:5px solid var(--sage)}
.tile-live:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(51,60,69,.1);border-color:var(--sage)}
.tile-soon{opacity:.6;border-style:dashed;cursor:default}
.tile.owner{border-left:5px solid var(--steel)}

/* --- task weight, never-done marker, info panel --- */
.weight{font-size:.7rem;font-weight:700;color:var(--steel);background:#eaf3fa;border-radius:20px;padding:.05rem .45rem}
.new-badge{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--steel);border-radius:20px;padding:.1rem .5rem}
.chore.is-new{border-left-color:var(--steel)}
.chore-main{cursor:pointer}
.chore-info{display:none;margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.chore.open .chore-info{display:block}
.ci-desc{margin:0 0 .4rem;color:var(--slate);font-size:.9rem}
.ci-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--muted)}
.ci-meta b{color:var(--slate)}
/* --- redo form --- */
.btn-redo{flex:none;font:inherit;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--steel);border:none;border-radius:24px;padding:.6rem 1.1rem;cursor:pointer}
.btn-redo:hover{background:#356fa0}
.redo-row{display:block}
.redo-form{width:100%}
.redo-q{font-weight:600;margin-bottom:.5rem}
.redo-opts{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.6rem}
.redo-opts label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}
.redo-note{width:100%;font:inherit;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.6rem}
.redo-actions{display:flex;gap:.5rem}
.btn-cancel{font:inherit;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:24px;padding:.6rem 1rem;cursor:pointer}
/* --- report --- */
/* Universal desktop content column (Brad 2026-07-27: "most of the pages seem to be afraid
   to use the full page width — change that everywhere appropriate… but I don't want a row
   with 3 items to span the full width. Only if it needs it.").

   THE MODEL: the wrapper owns a CEILING; content only expands when it has content to fill
   it. Forms went 720 → 900 (this overrides the older "don't widen forms" rule). The two
   data wrappers below became FLUID via clamp(), so a 1280px laptop is unchanged while a
   1920 or 5K screen actually gets used.

   ⚠️ The June 2026 "sea of white" complaint is what made 720 the rule in the first place.
   What makes a wider ceiling safe now is the CARD-HUG rule further down — a narrow table
   no longer paints a full-width white card behind itself. If a page still looks sparse,
   downgrade THAT page rather than lowering the global ceiling. */
.report{max-width:900px;margin:0 auto}
.report-block{margin-left:auto;margin-right:auto}
.jo-table{margin-left:auto;margin-right:auto}
.chore-list{max-width:640px;margin-left:auto;margin-right:auto}
.report-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.report-head h1{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:2.1rem;margin:0}
.month-pick{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.4rem .7rem}
.month-pick select{font:inherit;font-weight:600;border:none;background:transparent;cursor:pointer}
.report-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.3rem}
.report-block h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.4rem;margin:0 0 .2rem}
.small{font-size:.82rem}
table.rpt{width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.9rem}
table.rpt th,table.rpt td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line)}
table.rpt th{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.rpt td.num,table.rpt th.num{text-align:right}
table.rpt td.good{color:var(--ok);font-weight:600}
table.rpt td.bad{color:var(--overdue);font-weight:600}

/* --- polished dashboard: today summary + grouped tiles --- */
.dash-head{margin-bottom:1rem}
.today{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#fbfaf4);border:1px solid var(--line);border-left:5px solid var(--sage);border-radius:16px;padding:1rem 1.3rem;margin-bottom:1.8rem}
.today.clear{border-left-color:var(--ok)}
.today-main{display:flex;align-items:center;gap:.7rem}
.today-num{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:2.4rem;line-height:1;color:var(--slate)}
.today-num.ok{color:var(--ok)}
.today-lbl{font-size:1rem;color:var(--slate)}
.today-cta{flex:none;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--sage);border-radius:24px;padding:.6rem 1.1rem;text-decoration:none}
.today-cta:hover{background:var(--sage-d)}
.tile-group{margin-bottom:1.6rem}
.tg-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.25rem;color:var(--muted);margin:0 0 .6rem;padding-bottom:.25rem;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:.01em}
.owner-group .tg-title{color:var(--steel)}

/* --- payroll totals --- */
.pay-totals{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem;justify-content:center}
.pt{flex:0 0 auto;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem 1.3rem;display:flex;flex-direction:column;gap:.15rem}
.pt-lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pt-num{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.7rem;color:var(--slate)}
.pt.grand{border-left:5px solid var(--sage)}
.pt.grand .pt-num{color:var(--sage-d)}
/* --- documents --- */
.doc-section{margin-bottom:1.4rem}
.doc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.4rem}
.doc-item{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;font-size:.92rem}
.doc-item a{color:var(--steel);text-decoration:none;font-weight:600}
.doc-item a:hover{text-decoration:underline}
.doc-pending{color:var(--muted)}
.doc-badge{margin-left:auto;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--lightblue);border-radius:20px;padding:.1rem .5rem;white-space:nowrap}

/* --- numeric cells: clean tabular figures (not Raleway/serif) --- */
table.rpt td.num,.pt-num{font-family:Arial,"Helvetica Neue",system-ui,sans-serif;font-variant-numeric:tabular-nums}
table.rpt td.num a{font-family:Arial,"Helvetica Neue",system-ui,sans-serif}

/* --- feature stub page notes --- */
.feature-notes{margin:.4rem 0 0;padding-left:1.2rem;line-height:1.6}
.feature-notes li{margin-bottom:.35rem}

/* --- login page + header user/logout --- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--cream);padding:1.5rem}
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem 2.2rem;width:100%;max-width:360px;text-align:center;box-shadow:0 8px 30px rgba(51,60,69,.08)}
.login-logo{width:230px;max-width:78%;height:auto;margin:0 auto .9rem;display:block}
.login-card h1{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.8rem;margin:0 0 1.2rem}
.login-card label{display:block;text-align:left;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.8rem}
.login-card input{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;margin-top:.25rem}
/* A standalone (no-login) card that has to hold a table rather than a form — the emailed
   decision pages. 360px is right for a login box and cramped for a three-column diff. */
.login-card.lc-wide{max-width:620px;text-align:left}
.login-card.lc-wide .kv th{width:9rem}
.login-btn{width:100%;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--sage);border:none;border-radius:24px;padding:.7rem;cursor:pointer;margin-top:.4rem}
.login-btn:hover{background:var(--sage-d)}
.login-err{background:var(--overdue-bg);color:var(--overdue);border-radius:8px;padding:.5rem;font-size:.85rem;font-weight:600;margin:0 0 1rem}
.portal-user{font-weight:700;font-size:.9rem;color:var(--slate)}
.portal-link{text-decoration:none;font-size:1.15rem}
.portal-me{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--slate)}
.portal-me img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#f0eee6}
.portal-me:hover .portal-user{text-decoration:underline}
.logout-form{margin:0}
.logout-form button{font-size:1.15rem;line-height:1;color:var(--steel);background:transparent;border:1px solid var(--line);border-radius:50%;width:2rem;height:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.logout-form button:hover{background:var(--cream);color:var(--overdue)}
/* account page */
.acct-head{display:flex;align-items:center;gap:.9rem}
.acct-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#f0eee6}

/* --- API & Scripts: clean click-to-expand rows --- */
.catalog{margin-top:.5rem}
.catalog .col-h{display:grid;gap:.6rem;padding:.3rem .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)}
.catalog .col-h .num{text-align:right}
.crow{border-bottom:1px solid var(--line)}
.crow>summary{list-style:none;cursor:pointer;display:grid;align-items:center;gap:.6rem;padding:.55rem .5rem}
.crow>summary::-webkit-details-marker{display:none}
.crow>summary:hover{background:var(--cream)}
.crow[open]>summary{background:var(--cream)}
.crow>summary .num{text-align:right;font-family:Arial,"Helvetica Neue",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.crow .xs{font-size:.72rem}
.crow .chev{color:var(--muted);text-align:center;transition:transform .15s ease}
.crow[open] .chev{transform:rotate(90deg)}
.crow .cdetail{padding:.1rem .6rem .9rem;color:var(--slate);font-size:.9rem;line-height:1.55;max-width:74ch}
.crow .cdetail .cmeta{margin-top:.5rem;color:var(--muted);font-size:.82rem;font-weight:600}
.scripts .col-h,.scripts .crow>summary{grid-template-columns:2fr .9fr .55fr .55fr 1.1fr .9fr 1.1rem}
.hooks .col-h,.hooks .crow>summary{grid-template-columns:1.6fr .9fr .7fr 1.1fr 1.1rem}
@media(max-width:680px){
  .scripts .col-h,.hooks .col-h{display:none}
  .scripts .crow>summary{grid-template-columns:1.4fr .6fr .6fr 1rem}
  .scripts .crow>summary :nth-child(2),.scripts .crow>summary :nth-child(5){display:none}
  .hooks .crow>summary{grid-template-columns:1.4fr .8fr .6fr 1rem}
  .hooks .crow>summary :nth-child(4){display:none}
}

/* --- dashboard pending tasks + time-off form --- */
.pending-tasks{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold,#c2bf8b);border-radius:14px;padding:.8rem 1.1rem;margin-bottom:1.1rem}
.pt-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.25rem;margin:0 0 .3rem}
.pt-list{margin:0;padding-left:1.1rem;line-height:1.7}
.pt-list a{color:var(--steel);text-decoration:none}
.pt-list a:hover{text-decoration:underline}
.pt-urgent a{color:var(--overdue);font-weight:700}
.timeoff-form label{display:block;margin-bottom:.6rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.timeoff-form input,.timeoff-form select{font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px}
.tof-row{display:flex;gap:1rem;flex-wrap:wrap}
/* module: time off — the all-day toggle and form chrome (WO-M stage 1, 2026-07-28).
   These replace per-element style="" so the form follows the design system (#22). */
.tof-allday{display:flex!important;align-items:center;gap:.5rem;font-weight:600;margin-bottom:.7rem}
.tof-allday input{margin:0}
.tof-detail{width:100%}
.tof-submit{margin-top:.6rem}
.btn-inline{width:auto;display:inline-block}
.tof-decide{display:inline}
/* A form that sits inline beside buttons in a toolbar row (buy plan's "I placed this
   order", and anywhere else a one-button POST has to live next to links). */
.inline-form{display:inline}
.tof-decide + .tof-decide{margin-left:.5rem}

/* --- dashboard bookings + calendar --- */
.bookings-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.3rem}
.bs-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.3rem;margin:0 0 .5rem}
.bs-day{margin-bottom:.4rem}
.bs-label{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:.15rem}
.cal-day h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.3rem;margin:0 0 .2rem}
/* expandable booking rows (calendar + dashboard) */
.bk-list{margin-top:.15rem}
.bk{border-bottom:1px solid var(--line)}
.bk:last-child{border-bottom:none}
.bk>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:5.25rem 1fr 1rem;gap:.5rem;align-items:center;padding:.5rem .3rem}
.bk>summary::-webkit-details-marker{display:none}
.bk>summary:hover,.bk[open]>summary{background:var(--cream)}
.bk-time{font-family:Arial,"Helvetica Neue",system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;font-size:.86rem}
.bk-main{font-size:.92rem;min-width:0}
.bk-chev{color:var(--muted);text-align:center;transition:transform .15s}
.bk[open] .bk-chev{transform:rotate(90deg)}
.bk-detail{padding:.15rem .4rem .7rem 5.75rem;font-size:.9rem;line-height:1.7}
.bk-detail a{color:var(--steel)}
/* Mobile order list: the whole card is one tap to OPEN the order (was a details-disclosure that
   only expanded a preview with a buried link — James/2026-06-28). */
.ord-link{display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.8rem .5rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.ord-link:active{background:var(--cream)}
.ord-link .bk-main{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.ord-link .ord-sub{white-space:normal}
.ord-link-right{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
@media(max-width:560px){.bk>summary{grid-template-columns:4.25rem 1fr 1rem}.bk-detail{padding-left:.6rem}}

/* --- cash deposits --- */
.cash-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 .4rem}
.cash-filter{color:var(--steel);text-decoration:none;font-weight:600;font-size:.85rem}
.cash-filter:hover{text-decoration:underline}
table.cash-table td.num{font-family:Arial,"Helvetica Neue",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.cash-row.done{opacity:.55}
.cash-rec{white-space:nowrap}
.cash-rec input{transform:scale(1.2);margin-right:.4rem;cursor:pointer}

/* --- customers search + pager --- */
.cust-search{display:flex;gap:.5rem;align-items:center}
.cust-search input[type=search]{font:inherit;padding:.45rem .7rem;border:1px solid var(--line);border-radius:9px;min-width:230px}
.pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin-top:1rem}
.pager a{color:var(--steel);text-decoration:none;font-weight:600}

/* =====================================================================
   MOBILE — keep everything inside the viewport (reworked 2026-06-03)
   Root causes fixed: wide tables overflowing, long strings (emails/IDs/
   URLs) not wrapping, and oversized padding/headings on small screens.
   ===================================================================== */
body{overflow-x:clip}                     /* kill sideways page scroll (keeps sticky header) */
/* Long unbreakable strings wrap instead of pushing off-screen.
   ⚠️ WO-F 2026-07-27: `td,th` were in this list, which sits OUTSIDE the mobile media
   query it was written for — so every DESKTOP table cell was allowed to break mid-token.
   That is a row-height cause (a cell wraps where it need not, so the row grows), and it
   is why the customers list has ragged row heights. They are re-added inside the ≤640px
   block below, where they belong; the one desktop table that genuinely relies on wrapping
   asks for it by name (`.conn-table`). */
.small,.muted,.bk-main,.bk-detail,.cdetail,.tile-meta,.dash-sub,
.ci-desc,.doc-item,.bs-list,.pt-list,.feature-notes,.timeoff-form,.report-block p{
  overflow-wrap:anywhere;word-break:break-word}
  /* re-added HERE, inside the mobile block, where breaking mid-token is the right call */
  td,th{overflow-wrap:anywhere;word-break:break-word}
/* wide tables scroll WITHIN their card instead of widening the page */
.report-block{overflow-x:auto}
/* (2026-06-10 fix: a `.report,.dash,.portal-main{max-width:100%}` rule sat here OUTSIDE the mobile
   media query since 2026-06-03, silently un-centering every bare-.report page and the dashboard at
   desktop — the root cause of the full-bleed drift the design overview found. Width caps are global
   again; max-width alone is already mobile-safe, no override needed.) */
table.rpt{max-width:100%}

@media (max-width:640px){
  .portal-main{padding:1rem .7rem 3.2rem}
  .portal-top{padding:.55rem .75rem;gap:.4rem}
  .portal-brand img{height:24px}
  .portal-brand span{font-size:1.05rem}
  .portal-right{gap:.55rem .85rem}
  .portal-nav a{margin-left:0;margin-right:.85rem;font-size:.88rem}
  .portal-user{font-size:.85rem}
  .dash-head h1{font-size:1.75rem}
  .report-head h1,.board-head h1{font-size:1.6rem}
  .report-block{padding:.85rem .8rem}
  .report-block h2{font-size:1.25rem}
  table.rpt{font-size:.84rem}
  table.rpt th,table.rpt td{padding:.4rem .4rem}
  .today{padding:.8rem 1rem;gap:.6rem}
  .today-num{font-size:2rem}
  .today-cta,.login-btn{font-size:.82rem}
  .pay-totals{gap:.6rem}
  .pay-totals .pt{min-width:calc(50% - .3rem);padding:.7rem .8rem}
  .pt-num{font-size:1.4rem}
  .tof-row{flex-direction:column;gap:.5rem}
  .timeoff-form input,.timeoff-form select{width:100%}
  .tiles{grid-template-columns:1fr 1fr;gap:.7rem}
  .tile{padding:.9rem;min-height:96px}
  .tile-name{font-size:1.1rem}
  .tile-icon{font-size:1.4rem}
  .doc-list{grid-template-columns:1fr}
  .bk-detail{padding-left:.6rem}
}
@media (max-width:380px){
  .tiles{grid-template-columns:1fr}
}

/* expandable payroll + wishlist rows (mobile-first; reuse .bk) */
.bk.pay-row>summary{grid-template-columns:3.25rem 1fr auto 1rem}
.bk.wish-row>summary{grid-template-columns:1fr auto 1rem}
.bk.pay-row .num,.bk.wish-row .num{font-family:Arial,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-detail>div{margin-bottom:.15rem}

/* Options & Decisions rows */
.bk.opt-row>summary{grid-template-columns:1fr auto 1rem}
.opt-title{font-weight:600}
.opt-now{color:var(--muted);font-size:.85rem;text-align:right}

/* Payroll: full table on desktop/tablet, expandable rows on mobile */
.pay-mobile{display:none}
.pay-table{width:100%;border-collapse:collapse;font-size:.9rem}
.pay-table th,.pay-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.pay-table tbody tr:last-child td{border-bottom:none}
.pay-table thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.pay-table th.num,.pay-table td.num{text-align:right;font-family:Arial,"Helvetica Neue",system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-table td.nowrap{white-space:nowrap}
.pay-table tbody tr:hover{background:var(--cream)}
.pay-table a{color:var(--steel)}
@media (max-width:820px){
  .pay-desktop{display:none}
  .pay-mobile{display:block}
}

/* Studio Jewelry Orders */
.bk.ord-row>summary{grid-template-columns:1fr auto 1rem}
.ord-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:.12rem .5rem;border-radius:20px;white-space:nowrap;
  line-height:1.15}   /* WO-F: without this the badge inflates its row's line box, so a
                         row WITH a badge is visibly taller than one without */
.ord-badge.done{background:#e3efe0;color:#3c7a34}
.ord-badge.due{background:#f6efd8;color:#8a6d1e}
.ord-badge.muted{background:#ececec;color:#777}
.ord-badge.info{background:var(--lightblue, #bbd6e2);color:#27506a}
.ord-badge.transit{background:#ece4f5;color:#5e3c8f}
.ord-badge.delivered{background:#d4ede7;color:#1d6e5e}
.ord-badge.counted{background:#dfe3f7;color:#3a4a9c}
.ord-badge.alert{background:#f4dcdc;color:#a33}

/* Status filter chips (pill filters with count badges) — list-page top row */
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:999px;
  font-size:.78rem;font-weight:700;text-decoration:none;border:1.5px solid transparent;
  background:#ececec;color:#666}
.chip.due{background:#f6efd8;color:#8a6d1e}
.chip.info{background:var(--lightblue, #bbd6e2);color:#27506a}
.chip.alert{background:#f4dcdc;color:#a33}
.chip.warn{background:#f5d76e;color:#5a4500}
.chip.done{background:#e3efe0;color:#3c7a34}
.chip.muted{background:#ececec;color:#777}
.chip.warn{background:#f5d76e;color:#5a4500}
.chip.transit{background:#ece4f5;color:#5e3c8f}
.chip.delivered{background:#d4ede7;color:#1d6e5e}
.chip.counted{background:#dfe3f7;color:#3a4a9c}
.chip:hover{filter:brightness(.96)}
.chip.chip-on{border-color:var(--slate, #333c45);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.chip-n{background:rgba(255,255,255,.65);border-radius:999px;padding:0 .45rem;font-size:.72rem;
  color:inherit;min-width:1.3rem;text-align:center}

/* Payroll: direct-deposit form + save banner */
.save-banner{padding:.6rem .9rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem;
  background:#f4f1e6;border:1px solid var(--line)}
.save-banner.ok{background:#e3efe0;border-color:#bcd9b4;color:#3c7a34}
.dd-form label{display:block;margin:.55rem 0;font-size:.85rem;color:var(--slate);font-weight:600}
.dd-form input,.dd-form select,.dd-form textarea{display:block;width:100%;margin-top:.2rem;
  padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400;
  background:#fff}
.dd-form h3{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.15rem;
  margin:1.1rem 0 .2rem;color:var(--slate)}

/* Cash Box count */
.cash-grid{width:100%;border-collapse:collapse;margin:.3rem 0 .8rem}
.cash-grid th{text-align:left;font-weight:600;font-size:.9rem;padding:.35rem .4rem;white-space:nowrap}
.cash-grid td{padding:.35rem .4rem;font-size:.95rem}
.cash-grid input{width:5.5rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;text-align:right;font-variant-numeric:tabular-nums}
.cash-sub{font-family:Arial,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;white-space:nowrap}
.cash-total-row th,.cash-total{border-top:2px solid var(--line);padding-top:.5rem;font-weight:700;font-size:1.05rem}
.cash-total{font-family:Arial,system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:var(--slate)}
.cash-note{display:block;margin:.4rem 0;font-size:.85rem;font-weight:600}
.cash-note input{display:block;width:100%;margin-top:.2rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400}
.cash-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}

/* Juke Audio control */
.juke-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.juke-zone{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.juke-name{font-weight:600;margin-bottom:.5rem}
.juke-ctl{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.juke-vol{flex:1}
.juke-volval{font-family:Arial,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:1.8rem;text-align:right;color:var(--slate)}
.juke-mute{background:#f4f1e6;border:1px solid var(--line);border-radius:20px;padding:.3rem .8rem;font-size:.82rem;cursor:pointer}
.juke-mute:hover{background:var(--cream)}

/* Jewelry order detail */
.jo-h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.25rem;margin:.1rem 0 .5rem}
.jo-new-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.jo-new-head label{display:flex;flex-direction:column;font-size:.85rem;gap:.2rem}
.jo-warn{color:#a33;font-weight:600}
.jo-row-warn>td{background:#faf0ef}
.jo-row-diff>td{background:#fbf6e6}
.jo-progress{height:.5rem;border-radius:999px;background:#eee;overflow:hidden;margin-top:.4rem;max-width:22rem}
.jo-progress-bar{height:100%;width:35%;border-radius:999px;background:var(--sage, #c2bf8b);
  animation:jo-prog 1.1s ease-in-out infinite}
@keyframes jo-prog{0%{margin-left:-35%}100%{margin-left:100%}}
.jo-money-in{width:6rem;text-align:right;padding:.15rem .3rem;border:1px solid var(--line);border-radius:4px}
.jo-total-row td{border-top:2px solid var(--slate, #333c45);font-size:1.05rem;background:#f5f3ea}
.jo-addrow td{padding:.3rem .5rem;background:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);border-radius:6px;padding:.3rem .7rem;
  cursor:pointer;color:var(--slate, #333c45)}
.btn-ghost:hover{background:var(--cream, #f7f4ec)}
.jo-assign-btn,.jo-nrm,.jo-match-btn{background:none;border:0;cursor:pointer;padding:.1rem .3rem}
.jo-assign-btn:hover,.jo-nrm:hover,.jo-match-btn:hover{filter:brightness(.7)}
.jo-miles{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.jo-mile button{background:#fff;border:1px solid var(--line);border-radius:20px;padding:.35rem .8rem;cursor:pointer;font-size:.85rem;font-family:inherit}
.jo-mile.done button{background:#e3efe0;border-color:#bcd9b4;color:#3c7a34;font-weight:600}
.jo-mile{display:flex;align-items:center;gap:.3rem}
tr.jo-disc{background:#fbe9e7}
tr.jo-disc td{color:#b53d2e}
.jo-note,.jo-upload{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.jo-note input[type=text]{flex:1;min-width:200px;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.jo-noteline{border-left:2px solid var(--line);padding-left:.6rem;margin:.4rem 0}

/* Social media module */
.social-subnav{display:flex;gap:.3rem;flex-wrap:wrap;margin:.2rem 0 1rem;border-bottom:1px solid var(--line)}
.social-subnav a{padding:.5rem .9rem;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent}
.social-subnav a.active{color:var(--slate);border-bottom-color:var(--sage)}
.social-filters{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.social-filters select{padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.social-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.social-media{background:#f3f1ea;aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.social-media img,.social-media video{width:100%;height:100%;object-fit:cover}
.social-body{padding:.7rem .8rem}
.social-caption{max-height:5.5em;overflow:auto;white-space:pre-wrap;color:var(--slate)}
.social-form{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.social-form select,.social-form textarea,.social-form input{padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.social-sched{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.social-actions{display:flex;gap:.5rem}

/* ---- Phase 2: approval grid (mark-then-submit) ---- */
.sa-per{margin-left:auto}
.sa-per a{color:var(--sage-d);text-decoration:none;margin:0 .15rem}
.sa-per strong{margin:0 .15rem}
/* equal-height rows: every card in a row stretches to the tallest, so caption areas
   line up and nothing needs internal scrolling on desktop. */
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem;align-items:stretch;margin-bottom:5rem}
.sa-card{background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.sa-card--yes{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage) inset}
.sa-card--no{border-color:#c2453a;box-shadow:0 0 0 1px #c2453a inset}
.sa-media{background:#f3f1ea;aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sa-media img,.sa-media video{width:100%;height:100%;object-fit:cover}
.sa-media-missing{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.25rem;color:#8a8270;font-size:.8rem;text-align:center;padding:.5rem}
.sa-frame-missing{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:1rem;color:#8a8270;background:#ece9df}
.sa-strip{display:flex;gap:.3rem;padding:.4rem .5rem 0;overflow-x:auto}
.sa-frame{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:8px;
  overflow:hidden;cursor:pointer;border:2px solid var(--sage)}
.sa-frame img,.sa-frame video{width:100%;height:100%;object-fit:cover;display:block}
.sa-frame input{position:absolute;opacity:0;pointer-events:none}
.sa-frame-tick{position:absolute;top:1px;right:2px;font-size:.7rem;font-weight:700;
  color:#fff;text-shadow:0 0 2px #000}
.sa-frame--off{border-color:#c2453a;opacity:.45}
.sa-frame--off img,.sa-frame--off video{filter:grayscale(1)}
.sa-frame--off .sa-frame-tick{display:none}
.sa-body{padding:.6rem .75rem;display:flex;flex-direction:column;gap:.35rem;flex:1 1 auto}
.sa-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.sa-handle{color:var(--slate)}
.sa-badge{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:.12rem .45rem;border-radius:999px}
.sa-badge--staff{background:#e7efd6;color:#5f6e2a}
.sa-badge--vendor{background:#dcebf3;color:#1d4e66}
.sa-badge--studio{background:#eee9d3;color:#7a6a1e}
.sa-badge--other{background:#ececec;color:#777}
.sa-date{margin:0}
.sa-caption{white-space:pre-wrap;color:var(--slate);margin:.1rem 0;flex:1 1 auto;
  min-height:2.4em}
.sa-edit{display:flex;flex-direction:column;gap:.35rem}
.sa-edit label{display:flex;flex-direction:column;gap:.15rem;font-weight:600;color:var(--muted)}
.sa-edit textarea,.sa-edit input[type=text],.sa-edit input[type=date]{
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit;width:100%}
.sa-sched{flex-direction:row !important;flex-wrap:wrap;gap:.7rem;align-items:center}
.sa-sched label{flex-direction:row;align-items:center;gap:.35rem}
/* Tighten the schedule inputs — the date was stretching full-width. */
.sa-edit .sa-sched input[type=date]{width:auto;max-width:9.5rem}
.sa-edit .sa-sched input[type=time]{width:auto;max-width:6.5rem;
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.sa-mark{display:flex;gap:.4rem;padding:.5rem .75rem .7rem;margin-top:auto}
.sa-mark button{flex:1;padding:.45rem;border-radius:9px;border:1px solid var(--line);
  background:#fff;font:inherit;font-weight:700;cursor:pointer;color:var(--slate)}
.sa-mark .sa-yes:hover{background:#eef4e2;border-color:var(--sage)}
.sa-mark .sa-no:hover{background:#fbe9e7;border-color:#c2453a}
.sa-card--yes .sa-yes{background:var(--sage);border-color:var(--sage);color:#2c3219}
.sa-card--no .sa-no{background:#c2453a;border-color:#c2453a;color:#fff}
.sa-bar{position:sticky;bottom:0;z-index:9;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;
  padding:.7rem 1rem;background:var(--slate);color:#fff;border-radius:12px;
  box-shadow:0 -2px 12px rgba(0,0,0,.12)}
.sa-bar-counts{font-weight:600}
.sa-bar-counts .sa-count-ok{color:var(--sage)}
.sa-bar-counts .sa-count-no{color:#f0b1aa}
.sa-bar-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sa-link{background:none;border:none;color:#cfe6f0;font:inherit;font-weight:600;
  cursor:pointer;text-decoration:underline;padding:.2rem}
.sa-submit[disabled]{opacity:.5;cursor:not-allowed}
.sa-pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1rem 0}
.sa-pager a{color:var(--sage-d);text-decoration:none;font-weight:600}
/* Scheduled-Posts read-only preview cards (mirror the approval cards, no controls). */
.sa-card--readonly{cursor:default}
.sa-card--urgent{border-color:#c2453a;box-shadow:0 0 0 1px #c2453a inset}
.sa-when{margin:.1rem 0;font-weight:600;color:var(--slate)}
.sa-when .sa-when-cal{margin-right:.2rem}
.sa-when .sa-when-any{margin-right:.2rem;opacity:.8}
/* Full-row divider between the dated and "post whenever" cards. */
.sa-divider{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;margin:.4rem 0 0;
  color:var(--muted);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sa-divider::before,.sa-divider::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:640px){
  .sa-grid{grid-template-columns:1fr;align-items:start}
  .sa-card{height:auto}
  .sa-caption{min-height:0}
}

/* --- My Portfolio --- */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;margin-top:1rem}
.pf-grid-wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pf-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:grab}
.pf-card:active{cursor:grabbing}
.pf-img{position:relative;aspect-ratio:1;background:#f0eee6}
.pf-img-wide{aspect-ratio:4/3}
.pf-img img{width:100%;height:100%;object-fit:cover;display:block}
.pf-pos{position:absolute;top:.4rem;left:.4rem;z-index:2;background:rgba(51,60,69,.82);color:#fff;font-size:.78rem;font-weight:700;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-variant-numeric:tabular-nums}
.pf-del{position:absolute;top:.35rem;right:.35rem;z-index:2;width:1.7rem;height:1.7rem;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#b53d2e;font-size:.95rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.pf-card:hover .pf-del{opacity:1}
.pf-ghost{opacity:.4}
.pf-btn{background:#f4f1e6;border:1px solid var(--line);border-radius:7px;padding:.3rem .55rem;font-size:.8rem;cursor:pointer;font-family:inherit}
.pf-btn:hover{background:var(--cream)}
/* headshot block */
.pf-headshot-block{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.pf-headshot{flex:none;width:120px;height:120px;border-radius:14px;overflow:hidden;background:#f0eee6;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pf-headshot img{width:100%;height:100%;object-fit:cover;display:block}
.pf-headshot-side{flex:1;min-width:220px}
/* tabs */
.pf-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 .2rem;border-bottom:1px solid var(--line);padding-bottom:.1rem}
.pf-tab{background:none;border:none;border-bottom:2px solid transparent;padding:.45rem .7rem;font:inherit;font-weight:600;color:var(--steel);cursor:pointer;border-radius:6px 6px 0 0}
.pf-tab.active{color:var(--slate);border-bottom-color:var(--sage)}
.pf-tabcount{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:20px;font-size:.7rem;padding:.02rem .42rem;margin-left:.2rem;color:var(--muted)}
.pf-panel.hidden,.hidden{display:none}
.pf-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.pf-disabled{opacity:.5;pointer-events:none}
.pf-modal{position:fixed;inset:0;background:rgba(51,60,69,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.pf-modal[hidden]{display:none}
.pf-modal-box{background:#fff;border-radius:14px;padding:1.1rem 1.2rem;max-width:480px;width:100%}
.pf-crop-wrap{max-height:50vh;overflow:hidden}
.pf-crop-wrap img{max-width:100%;display:block}
#pfLabel{display:block;width:100%;margin:.7rem 0;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.pf-modal-actions{display:flex;gap:.6rem;justify-content:flex-end}

/* ===== Group 3: to-do backbone, compact dashboard, back button ===== */
.portal-back{display:inline-block;margin:0 0 .8rem;color:var(--steel);font-weight:600;font-size:.9rem;text-decoration:none}
.portal-back:hover{color:var(--slate)}
.todo-block{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:14px;padding:.8rem 1.1rem;margin-bottom:1rem}
.todo-list{list-style:none;margin:.2rem 0 0;padding:0}
.todo-item{display:flex;align-items:flex-start;gap:.6rem;padding:.32rem 0;border-bottom:1px solid #f2efe6}
.todo-item:last-child{border-bottom:none}
.todo-check{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid var(--sage);background:#fff;color:var(--sage-d,#8a8a52);cursor:pointer;font-size:.8rem;line-height:1}
.todo-check:hover{background:var(--sage);color:#fff}
.todo-text{flex:1;color:var(--slate);line-height:1.45}
.todo-detail{display:block;color:var(--muted);font-size:.82rem;margin-top:.1rem}
.todo-link{font-size:.82rem;font-weight:600;margin-left:.3rem}
.todo-empty{padding:.3rem 0}
.todo-add{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;align-items:center}
.todo-add input[type=text]{flex:1;min-width:160px;padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.todo-add select{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
/* compact tasks card + side-by-side notifications */
.dash-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;align-items:flex-start}
.dash-row .today{margin:0;flex:0 1 auto;display:inline-flex;align-items:center;gap:1rem;width:auto}
.dash-row .today-cta{margin-left:.4rem}
.dash-row .pending-tasks{margin:0;flex:1 1 280px}
.cal-collapse{margin-bottom:1rem}
.cal-collapse>summary{cursor:pointer;list-style:none}
.cal-collapse>summary::-webkit-details-marker{display:none}
.cal-collapse>summary::before{content:"▸ ";color:var(--sage-d,#8a8a52)}
.cal-collapse[open]>summary::before{content:"▾ "}

/* ===== Group 3: jewelry/pay table tightening + filters ===== */
.jo-filters{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin:.2rem 0 1rem}
.jo-filters label{display:flex;flex-direction:column;font-size:.78rem;font-weight:600;color:var(--muted);gap:.2rem}
.jo-filters select{font:inherit;font-size:.9rem;color:var(--slate);padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;background:#fff}
/* Table cards hug their table (no wide white border); scroll if the table is wider than the column. */
.jo-narrow{overflow-x:auto;width:fit-content;width:-moz-fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.jo-table{width:auto;min-width:auto}
.jo-table th,.jo-table td{padding:.42rem .85rem;white-space:nowrap}
.jo-table td.wish-details{white-space:normal;max-width:280px}
.pay-tight th,.pay-tight td{padding:.4rem .7rem}

/* ===== Group 3: My Contact Card — inset preview + QR + narrow link ===== */
.cc-cols{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:flex-start}
.cc-left{flex:1 1 300px;max-width:420px}
.cc-right{flex:0 0 auto}
.cc-linkrow{display:flex;gap:.4rem;align-items:center;max-width:400px}
.cc-linkrow input{flex:1;min-width:0;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font-family:Arial;font-size:.85rem}
.cc-open{width:auto;display:inline-block;margin:.6rem 0 0;padding:.5rem 1rem;background:var(--steel);text-decoration:none;text-align:center}
.cc-qr-wrap{margin-top:1.1rem}
.cc-qr{display:inline-block;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:12px}
.cc-qr img,.cc-qr canvas{display:block}
.cc-frame{width:330px;max-width:86vw;height:560px;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 34px rgba(51,60,69,.16);background:#fff}
.cc-frame iframe{width:100%;height:100%;border:none}
@media(max-width:760px){.cc-right{width:100%}.cc-frame{width:100%;height:520px}}

/* ===== Group 4: direct-deposit approval workflow ===== */
.dd-view{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:.6rem 0 1rem;font-size:.92rem}
.dd-view dt{color:var(--muted);font-weight:600}
.dd-view dd{margin:0;color:var(--slate)}
.dd-decide{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.dd-decide label{display:flex;flex-direction:column;font-size:.78rem;font-weight:600;color:var(--muted);gap:.2rem}
.dd-decide input[type=date]{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.dd-note{flex:1;min-width:200px;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.dd-decide-btns{display:flex;gap:.5rem}

/* ===== Group 6: Integrations / connectors ===== */
.conn-card{margin-bottom:1rem}
.conn-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.conn-icon{font-size:1.6rem;line-height:1}
.conn-badge{margin-left:auto;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.18rem .6rem;border-radius:20px}
.conn-badge.on{background:var(--ok-bg,#e9f3ec);color:var(--ok,#3f7d57)}
.conn-badge.ready{background:var(--due-bg,#f8f1d6);color:var(--due,#9a7d12)}
.conn-badge.off{background:#ececec;color:var(--muted)}
.conn-steps{margin:.7rem 0 .6rem;padding-left:1.3rem;color:#4a4a4a;line-height:1.55;font-size:.9rem}
.conn-steps li{margin-bottom:.32rem}
.conn-steps code{background:var(--cream);border:1px solid var(--line);border-radius:5px;padding:0 .3rem;font-size:.85em}
.conn-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* ===== Group 7: portfolio insights ===== */
.pf-stats{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.pf-stat{display:flex;flex-direction:column}
.pf-stat-num{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.8rem;color:var(--slate);line-height:1}
.pf-stat-lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pf-spark{width:100%;max-width:360px;height:44px;display:block}
.pf-spark rect{fill:var(--sage)}
.pf-top{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.pf-top-card{position:relative;border-radius:10px;overflow:hidden;background:#f0eee6}
.pf-top-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pf-top-meta{position:absolute;left:0;right:0;bottom:0;background:rgba(51,60,69,.78);color:#fff;font-size:.72rem;padding:.2rem .4rem;text-align:center}

/* contact card share buttons */
.cc-share{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .2rem}
.cc-sharebtn{font:inherit;font-size:.84rem;font-weight:600;color:var(--slate);background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:.32rem .7rem;cursor:pointer;text-decoration:none;display:inline-block}
.cc-sharebtn:hover{background:#fff;border-color:var(--sage)}

/* integrations: already-connected list */
.conn-existing{display:flex;flex-direction:column;gap:.5rem}
.conn-pill{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok,#3f7d57);border-radius:12px;padding:.6rem .9rem;text-decoration:none;color:var(--slate)}
.conn-pill:hover{border-color:var(--sage)}
.conn-pill .conn-badge{margin-left:auto}

/* integrations: quick-glance expandable rows (mirrors .opt-row) */
.conn-list{display:flex;flex-direction:column;gap:.4rem}
.conn-row{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;background:#fff}
.conn-row.conn-st-on{border-left-color:var(--ok,#3f7d57)}
.conn-row.conn-st-sandbox{border-left-color:#3b82c4}
.conn-row.conn-st-ready{border-left-color:var(--due,#9a7d12)}
.conn-row.conn-st-pending{border-left-color:#c98a2e}
.conn-row.conn-st-off{border-left-color:var(--line)}
.conn-row>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:0 .9rem;min-height:3rem}
.conn-row>summary::-webkit-details-marker{display:none}
.conn-row>summary:hover{background:var(--cream)}
.conn-row[open]>summary{background:var(--cream);border-bottom:1px solid var(--line)}
.conn-row .conn-icon{flex:none;font-size:1.4rem;line-height:1}
.conn-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--slate)}
.conn-row>summary .conn-badge{flex:none;margin-left:0}
.conn-row>summary .chev{flex:none;color:var(--muted);transition:transform .15s ease}
.conn-row[open]>summary .chev{transform:rotate(90deg)}
.conn-detail{padding:.6rem .95rem .9rem;font-size:.92rem;line-height:1.55}
.conn-detail p{margin:.35rem 0}
.conn-badge.sandbox{background:#e3eef7;color:#2f6aa3}
.conn-badge.pending{background:#f7ead6;color:#9a6a18}

/* ===== Suggestions: floating button + modal + triage cards ===== */
.suggest-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;width:3.1rem;height:3.1rem;border-radius:50%;border:none;background:var(--sage);color:#333c45;font-size:1.4rem;cursor:pointer;box-shadow:0 6px 18px rgba(51,60,69,.25)}
.suggest-fab:hover{background:var(--sage-d)}
.suggest-modal{position:fixed;inset:0;background:rgba(51,60,69,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem}
.suggest-modal[hidden]{display:none}
.suggest-box{background:#fff;border-radius:16px;padding:1.3rem 1.4rem;max-width:460px;width:100%;box-shadow:0 18px 50px rgba(51,60,69,.2)}
.suggest-kind{display:flex;gap:1rem;margin-bottom:.6rem;font-size:.9rem}
.suggest-box textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical}
.suggest-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.7rem}
.suggest-thanks{color:var(--ok);font-weight:600;text-align:center}
.sug-card{border-left:4px solid var(--sage);max-width:640px}
/* Arriving from the "Open this suggestion" button in the alert email: highlight the one
   row the link points at, so it is obvious which of the open items you were sent to. */
.sug-card:target{box-shadow:0 0 0 3px var(--lightblue);scroll-margin-top:1rem}
.sug-empty,.sug-closed{max-width:680px}
.sug-closed{margin-top:1rem}
.sug-closed>.jo-h2{margin:.1rem 0 .5rem}
.sug-card.sug-problem{border-left-color:var(--overdue)}
.sug-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.sug-tag{font-weight:700}
.sug-msg{color:var(--slate);margin:.2rem 0 .7rem;white-space:pre-line}
.sug-decide{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* direct-deposit approval — before/after diff (clear Was | Now columns) */
.ddx-table{width:100%;border-collapse:collapse;font-size:.95rem;margin:.3rem 0;table-layout:fixed}
.ddx-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:.4rem .6rem;border-bottom:2px solid var(--line)}
.ddx-table td{padding:.5rem .6rem;border-bottom:1px solid #eee7d8;vertical-align:top;word-break:break-word}
.ddx-f{font-weight:700;color:var(--slate);width:34%}
.ddx-h-old,.ddx-old{color:var(--muted);background:#faf8f2}
.ddx-old{text-decoration:line-through;border-left:1px solid var(--line)}
.ddx-h-new,.ddx-new{color:#2f6a44;background:#eef6ee;border-left:2px solid var(--ok,#3f7d57);font-weight:600}

/* My Info — address reconcile */
.recon{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.recon-col{flex:1 1 200px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.35rem}
.recon-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}

/* ===== Dashboard Layout editor (admin: arrange tiles + sections) ===== */
.lay-wrap{max-width:980px}
.lay-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1.2rem}
.lay-status{font-size:.88rem;color:var(--muted)}
.sec-grip-demo{cursor:default}
.lay-section{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem 1rem;margin-bottom:1rem;box-shadow:0 4px 14px rgba(51,60,69,.04)}
.lay-sec-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.sec-grip{cursor:grab;color:#b7b3a3;font-size:1.1rem;user-select:none;padding:0 .15rem}
.sec-grip:active{cursor:grabbing}
.sec-name{flex:1;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;color:var(--slate);
  border:1px solid transparent;border-radius:8px;padding:.15rem .4rem;background:transparent}
.sec-name:hover{border-color:var(--line)}
.sec-name:focus{outline:none;border-color:var(--sage);background:#fcfbf6}
.sec-del{background:none;border:1px solid var(--line);border-radius:50%;width:1.7rem;height:1.7rem;
  cursor:pointer;color:#b14;line-height:1;font-size:1.05rem}
.sec-del:hover{background:#f6d6d2;border-color:#eebab3}
.lay-tiles{display:flex;flex-wrap:wrap;gap:.55rem;min-height:46px;border:1px dashed #e2dece;border-radius:10px;padding:.5rem}
.lay-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--cream,#faf8f3);border:1px solid #e6e2d4;
  border-radius:24px;padding:.32rem .7rem;cursor:grab;font-size:.86rem;color:var(--slate)}
.lay-chip:active{cursor:grabbing}
.lc-icon{font-size:1rem}
.lc-title{font-weight:600}
.lay-badge{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;border-radius:10px;padding:.05rem .4rem;font-weight:700}
.lay-badge.owner{background:#e7e4c6;color:#6b6834}
.lay-badge.restrict{background:#dce9f1;color:#2f5f86}
.lay-badge.soon{background:#eee;color:#888}
.lay-ghost{opacity:.45}
.pf-btn.primary{background:var(--sage);border-color:var(--sage);color:var(--slate)}
.pf-btn.ghost{background:transparent}
@media(max-width:560px){.sec-name{font-size:1.1rem}}

/* ===== Subtle zebra striping on row-heavy lists/tables (Brad: gentle, not high-contrast) ===== */
:root{ --zebra:rgba(51,60,69,.035); }
/* tables: payroll, reports, customers, jewelry orders, cash, etc. */
.portal-main table tbody tr:nth-child(even),
.report table tbody tr:nth-child(even){ background:var(--zebra); }
/* dashboard to-do list */
.todo-list .todo-item:nth-child(even){ background:var(--zebra); border-radius:8px; }
/* calendar / bookings expandable rows */
.bk-list > .bk:nth-of-type(even),
.bk-list > details.bk:nth-of-type(even){ background:var(--zebra); }
/* sign-off board rows + pending lists */
.chore:nth-of-type(even){ background:var(--zebra); }
.pt-list li:nth-child(even){ background:var(--zebra); border-radius:8px; }

/* Dashboard: keep the to-do + bookings lists a comfortable reading width on desktop
   (they were stretching the full column unnecessarily). */
.todo-block, .bookings-summary{ max-width:600px; }

/* ===== Dashboard top row =====
   (WO-F 2026-07-27) The v1 side-by-side rules that used to live here were DEAD: a later
   `!important` layer turned the row into a full-width vertical stack, so these only ever
   confused the reader. The single surviving definition is at the end of this file. */

/* ===== To-do rows: single line, uniform height (no wrapping; full text on hover) ===== */
.todo-item{display:flex;align-items:center;gap:.5rem}
.todo-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo-link{flex:none;white-space:nowrap}

/* ===== API & Scripts page: roomier spacing + a clean URL list ===== */
.report-block + .report-block{margin-top:1.4rem}
.catalog .crow>summary{padding:.6rem .55rem}
.catalog{margin-top:.7rem}
.report-block h2{margin-bottom:.2rem}
.report-block h3.small{margin-top:1.1rem}
.url-list{list-style:none;margin:.6rem 0 0;padding:0}
.url-list > li{border-bottom:1px solid var(--line);padding:.1rem 0}
.url-list details>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.5rem;padding:.5rem .3rem}
.url-list details>summary::-webkit-details-marker{display:none}
.url-list details>summary:hover{background:var(--cream)}
.url-list .ul-label{font-weight:600;color:var(--slate)}
.url-list .ul-kind{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;border-radius:10px;padding:.05rem .4rem;font-weight:700}
.url-list .ul-kind.webhook{background:#dce9f1;color:#2f5f86}
.url-list .ul-kind.callback{background:#e7e4c6;color:#6b6834}
.url-list .ul-desc{color:var(--muted);font-size:.85rem;margin:0 .3rem .2rem}
.url-list .ul-url{display:block;margin:.1rem .3rem .6rem;padding:.5rem .6rem;background:var(--cream);border:1px solid var(--line);border-radius:8px;font-family:Arial,monospace;font-size:.8rem;word-break:break-all;color:var(--slate)}

/* ===== Portal notice bar (SiteNotice, show_portal) — e.g. "not ready for deployment" ===== */
.portal-notice{padding:.6rem 1.2rem;text-align:center;font-size:.92rem;font-weight:700;
  display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.portal-notice--info{background:#fbf0c4;color:#7a5d12;border-bottom:1px solid #f0e0a0}
.portal-notice--urgent{background:#f6d6d2;color:#9a2820;border-bottom:1px solid #eebab3}
.portal-notice a{color:inherit;text-decoration:underline;white-space:nowrap}

/* Dashboard top-row tweaks: collapsed summaries read as compact cards; add-form wraps at 1/3 width */
.dash-top .todo-add{flex-wrap:wrap;gap:.4rem}
.dash-top details:not([open]) > summary{margin:0}

/* ===== Site Notices admin page ===== */
.sn-form{display:flex;flex-direction:column;gap:.6rem}
.sn-form .sn-msg{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.sn-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.sn-row input[type=url],.sn-row input[type=text]{flex:1;min-width:160px;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.sn-row label{font-size:.9rem;color:var(--slate)}
.sn-chk{display:flex;align-items:center;gap:.35rem}
.sn-item{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.7rem .3rem;border-bottom:1px solid var(--line)}
.sn-item.off{opacity:.55}
.sn-text{font-weight:600;color:var(--slate)}
.sn-meta{margin-top:.2rem}
.sn-item-actions{display:flex;gap:.4rem;flex-shrink:0}
.sn-del{color:#9a2820}

/* ===== Wider wrapper for data-dense admin pages (API & Scripts, Connections, Integrations) ===== */
/* These pages carry tables / catalog grids that were cramped in the 720px .report column. */
.report.report-wide{max-width:clamp(1060px,92vw,1600px)}
/* Extra-wide: many-column pricing/inventory tables (Jewelry Wishlist) that feel compressed at 1060. */
.report.report-xwide{max-width:clamp(1440px,96vw,1880px)}
@media (max-width:640px){.report.report-xwide{max-width:100%}}
/* the one desktop table that genuinely relies on breaking long strings mid-token */
.conn-table td{overflow-wrap:anywhere}
.conn-table td:nth-child(2),.conn-table td:last-child{white-space:normal}
.conn-table td:nth-child(2){width:26%}
.conn-table td:last-child{width:32%}
@media (max-width:640px){.report.report-wide{max-width:100%}}

/* ===== THE CARD-HUG RULE — what makes a wide ceiling safe =====================
   A wide wrapper is only a problem when a NARROW table sits inside a white card that
   paints the whole wrapper: you get a small table marooned in a field of white (the
   June 2026 complaint). `.jo-narrow` already shrink-wraps and centres its table, so the
   card simply follows it — shrink to the content, never below a readable minimum, and
   stay centred. Genuinely wide tables still take the whole room.
   Mobile neutralises itself: `.jo-narrow>table{min-width:100%}` already forces full width
   there, so `width:fit-content` resolves to the full column. */
.report-block:has(> .jo-narrow),
.card:has(> .jo-narrow){width:fit-content;min-width:min(100%,560px);max-width:100%;
  margin-inline:auto}

/* Fixed 2-column tool layouts have nothing to gain from the extra room — cap and centre
   them so they don't stretch into a pair of very long lines. */
.tool-2col,.lz-wrap{max-width:1160px;margin-inline:auto}
.bkcard-grid{max-width:1160px}
/* Integrations page: the single-column expandable list looked stretched at the
   full 1060px wide wrapper. Cap the list to a comfortable centered reading column
   so rows aren't sprawled edge-to-edge on a wide desktop. (conn-list is unique to
   the Integrations page.) */
.conn-list{max-width:760px;margin-left:auto;margin-right:auto}

/* ===== Staff detail page ===== */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}
.sc-item{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}
.sc-label{color:var(--muted);font-weight:600}
.sc-item input{padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.sc-expired input{border-color:#d9534f;background:#fbeceb}
.sc-soon input{border-color:#caa53a;background:#fbf6e3}
.sc-ok input{border-color:#9cc4ab}
.sc-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.45rem;font-size:.9rem}
.sc-checks label{display:flex;gap:.4rem;align-items:center}

/* ===== Messages log (catalog grid) ===== */
.catalog .col-h.msg-h, .catalog .crow>summary.msg-row{grid-template-columns:1.3fr .7fr 1.5fr .85fr .9fr 1.1rem}
@media(max-width:640px){
  .catalog .col-h.msg-h{display:none}
  .catalog .crow>summary.msg-row{grid-template-columns:1.2fr .7fr .8fr 1rem}
  .crow>summary.msg-row :nth-child(3),.crow>summary.msg-row :nth-child(5){display:none}
}

/* ===== Options & Decisions — priority-grouped, equal-height collapsed rows, expand on click ===== */
.opt-tier{margin:1.5rem 0 .6rem;font-size:1.02rem;font-weight:700;color:var(--slate)}
.opt-row{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;background:#fff;margin-bottom:.5rem}
.opt-row>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:0 .9rem;min-height:3rem}
.opt-row>summary::-webkit-details-marker{display:none}
.opt-row>summary:hover{background:var(--cream)}
.opt-row[open]>summary{background:var(--cream);border-bottom:1px solid var(--line)}
.opt-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--slate)}
.opt-row>summary .chev{flex:none;color:var(--muted);transition:transform .15s ease}
.opt-row[open]>summary .chev{transform:rotate(90deg)}
/* 📱 Mobile: LET THE TITLE WRAP (2026-08-08, Brad — "roadmap titles should be reworked in mobile
   so they can be fully read"). The collapsed row is a nowrap flex line and every .opt-badge is
   flex:none, so on a phone the badges keep their full width and the title — the only part anyone
   actually reads — absorbs the whole squeeze down to an ellipsis. An item can carry up to eight
   badges (status, archived, ✅ verified, 🔎 re-verify, ⛔ blocked, 🔨 built, 🛠 ready, 🔒 claimed).
   The title=".." tooltip is a desktop hover affordance and does nothing on touch.
   At tablet width and below the title takes a full line and wraps; the badges flow onto their
   own line. Desktop keeps nowrap + ellipsis + tooltip.
   ⚠️ 900px, NOT 760px, and that was a real bug for one round: shipped at 760px first, and a blind
   verification agent caught that **iPad portrait (768px) still truncated** — a touch device, where
   the tooltip that is supposed to compensate does nothing, and one of the two widths standing
   order #14 requires checking. Confirmed by rendering it: "Vault the Cloudflare 2FA backup
   codes — the last gap in the recov…". Link review had always been covered there by its own
   900px rule, so roadmap/to-do were the odd ones out. Raised to 900px so all four .opt-row pages
   behave identically (Brad, 2026-08-08). */
@media(max-width:900px){
  .opt-row>summary{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
  .opt-title{flex:1 0 100%;white-space:normal}
}
/* Visible item number (#NNN = PortalTask pk); links to ?task=N to deep-scroll to the row. */
.opt-num{flex:none;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);
  text-decoration:none;background:#eef0f2;border-radius:8px;padding:.12rem .42rem;letter-spacing:.01em}
.opt-num:hover{background:var(--lightblue);color:var(--slate)}
.opt-detail{padding:.6rem .95rem .9rem;font-size:.92rem;line-height:1.55}
.opt-detail p{margin:.35rem 0}
/* Markdown-rendered roadmap/option notes — readable, scannable layout inside a row.
   ♻️ 2026-08-08 rework: h1–h4 used to render 0.92–1.02rem against 0.92rem body text —
   headers were visually indistinguishable from prose, which is why a long item "read
   like a novel" (Brad). h1/h2 are now eyebrow SECTION CHIPS with a rule extending
   right (## Goal / ## Plan …), h3/h4 small tracked caps, links carry a real
   affordance, and the measure is capped for readability. */
.md-note{margin:.2rem 0 .55rem;max-width:72ch}
.md-note>p:first-child{margin-top:0}
.md-note p{margin:.4rem 0}
.md-note h1,.md-note h2{display:flex;align-items:center;gap:.6rem;margin:1.15rem 0 .45rem;
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);line-height:1.3}
.md-note h1::after,.md-note h2::after{content:"";flex:1;height:1px;background:#e2e6ea}
.md-note>h1:first-child,.md-note>h2:first-child{margin-top:.25rem}
.md-note h3,.md-note h4{margin:.9rem 0 .3rem;font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.md-note ul,.md-note ol{margin:.3rem 0 .5rem;padding-left:1.3rem}
.md-note li{margin:.18rem 0}
.md-note li>ul,.md-note li>ol{margin:.15rem 0}
.md-note code{background:#eef1f3;padding:.05rem .3rem;border-radius:3px;font-size:.88em}
.md-note pre{background:#f4f6f7;padding:.5rem .7rem;border-radius:5px;overflow-x:auto}
.md-note pre code{background:none;padding:0}
.md-note hr{border:0;border-top:2px solid #d5cfae;margin:1rem 0}
.md-note table{border-collapse:collapse;margin:.4rem 0;font-size:.9em}
.md-note th,.md-note td{border:1px solid #d8dde1;padding:.25rem .5rem;text-align:left}
.md-note strong{color:#2a323a}
.md-note a{color:#1d4e66;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* The new-tab attribute IS the selector — external verify-links and /portal/docs/ deep
   links (both set target=_blank by the portal_md link policy) become "open ↗" pills. */
.md-note a[target="_blank"]{display:inline-block;background:#e8f0f5;border:1px solid var(--lightblue,#bbd6e2);
  border-radius:10px;padding:.02rem .45rem;text-decoration:none;white-space:nowrap}
.md-note a[target="_blank"]::after{content:" ↗";font-size:.85em}
.md-note a[target="_blank"]:hover{border-color:#8fb8cc}
.md-note.muted h1,.md-note.muted h2,.md-note.muted h3,.md-note.muted h4,.md-note.muted strong{color:inherit}
.opt-high{border-left-color:#d9534f}
.opt-medium{border-left-color:#caa53a}
.opt-low{border-left-color:#3f7d57}
.opt-future{border-left-color:#9aa3ad}
/* No priority yet (Brad triages by hand): a visible dashed neutral, not a broken blank. */
.opt-none{border-left-color:#c9cfd6;border-left-style:dashed}

/* ===== Options & Decisions: filters + per-row inline editor ===== */
.opt-filters{display:flex;flex-direction:column;gap:.45rem;margin:.4rem 0 1.1rem;
  padding:.7rem .8rem;background:#fff;border:1px solid var(--line);border-radius:10px}
.opt-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.opt-filter-label{font-weight:600;font-size:.82rem;color:var(--muted);min-width:4.2rem}
.opt-chip{display:inline-block;font-size:.8rem;line-height:1;padding:.4rem .65rem;border-radius:14px;
  border:1px solid var(--line);background:var(--cream);color:var(--slate);text-decoration:none;white-space:nowrap}
.opt-chip:hover{border-color:var(--sage-d)}
.opt-chip.on{background:var(--sage);border-color:var(--sage-d);font-weight:600;color:var(--slate)}
.opt-chip-untagged{font-style:italic}
.chip-count{display:inline-block;margin-left:.2rem;font-size:.72rem;font-weight:700;opacity:.55}
.opt-chip.on .chip-count{opacity:.85}

/* ----- Roadmap colored tags: a fixed, brand-harmonious palette (the single source of
   truth for tag colors — keys map to .tag-c-<key>, used by both filter chips and row pills) ----- */
.tag-pill{display:inline-block;font-size:.7rem;line-height:1.1;padding:.16rem .5rem;margin:0 .3rem .25rem 0;
  border-radius:11px;border:1px solid var(--line);background:var(--cream);color:var(--slate);white-space:nowrap}
.rm-tag-pills{margin:.15rem 0 0}
.tag-c-sage{background:#e8e9d4;border-color:#c2bf8b;color:#4a4d35}
.tag-c-blue{background:#d6eaf2;border-color:#bbd6e2;color:#2c4a57}
.tag-c-slate{background:#dfe3e7;border-color:#97a2ad;color:#333c45}
.tag-c-amber{background:#fbeccb;border-color:#e6b85c;color:#6b4e16}
.tag-c-rose{background:#f7d9df;border-color:#e08aa0;color:#6e2435}
.tag-c-violet{background:#e4dcf2;border-color:#b39ddb;color:#3f2c63}
.tag-c-teal{background:#cfeae5;border-color:#6bc2b4;color:#1f4f48}
.tag-c-coral{background:#fadbd0;border-color:#f0a085;color:#6e2f1c}
.tag-c-lime{background:#e6f0c8;border-color:#b6cf6b;color:#44521b}
.tag-c-grey{background:#e9ecef;border-color:#ccd2d8;color:#4b545c}
/* active filter chip (any color) gets an inset ring so the selection still reads */
.opt-chip.on{box-shadow:0 0 0 2px var(--slate) inset;font-weight:700}

/* Roadmap keyword filter bar */
.rm-search-bar{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .8rem}
#rm-search{flex:1;max-width:30rem;padding:.5rem .7rem;font-size:.9rem;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--slate)}
#rm-search:focus{outline:none;border-color:var(--sage-d);box-shadow:0 0 0 2px rgba(194,191,139,.25)}

/* Tag-input autocomplete dropdown (positioned in JS; appended to <body>) */
.rm-tag-suggest{position:absolute;z-index:9999;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);max-height:240px;overflow:auto;padding:.2rem}
.rm-ts-item{padding:.35rem .55rem;font-size:.82rem;border-radius:6px;cursor:pointer;white-space:nowrap}
.rm-ts-item:hover,.rm-ts-item.on{background:var(--cream)}
.rm-ts-create{color:var(--muted);border-top:1px solid var(--line);margin-top:.15rem}

/* "Manage tag colors" panel under the tag filter row */
.rm-tag-manage{margin:.45rem 0 0}
.rm-tag-manage>summary{display:inline-block;cursor:pointer;font-size:.8rem;color:var(--muted)}
.rm-tag-manage-grid{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.5rem}
.rm-tag-manage-row{display:flex;align-items:center;gap:.4rem}
.rm-tag-manage-row select{font-size:.78rem;padding:.2rem .3rem}
/* status badge on the collapsed row */
.opt-badge{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:10px;background:#eef0f2;color:#5b6671;white-space:nowrap}
.opt-st-not_started{background:#eef0f2;color:#5b6671}
.opt-st-pending{background:#fff3d6;color:#8a6d12}
.opt-st-partial{background:#dcebff;color:#3a4a7a}
.opt-st-complete{background:#dff3e4;color:#256b3c}
/* industry-standard statuses: Proposed → Planned → In Progress → Done */
.opt-st-proposed{background:#fff3d6;color:#8a6d12}
.opt-st-planned{background:#eef0f2;color:#5b6671}
.opt-st-in_progress{background:#dcebff;color:#3a4a7a}
.opt-st-done{background:#dff3e4;color:#256b3c}
/* Not planned = looked at, declined for now. Sage-tinted so it reads "parked", not failed. */
.opt-st-not_planned{background:#eceadb;color:#6b6647}
/* Careers application pipeline: New → Reviewing → Contacted → Hired / Passed */
.opt-st-new{background:#dcebff;color:#3a4a7a}
.opt-st-reviewing{background:#fff3d6;color:#8a6d12}
.opt-st-contacted{background:#ece3ff;color:#5b3a8a}
.opt-st-hired{background:#dff3e4;color:#256b3c}
.opt-st-passed{background:#eef0f2;color:#5b6671}
/* Careers tab: expandable applicant rows (summary + detail) inside the data-table. */
.ca-summary{cursor:pointer}
.ca-summary .ca-name{font-weight:600}
.ca-summary .chev{color:var(--muted);transition:transform .15s ease}
.ca-detail>td{background:var(--cream)}
.ca-detail-inner{display:flex;flex-wrap:wrap;gap:1.25rem;padding:.5rem .25rem}
.ca-message{flex:1 1 260px;min-width:0}
.ca-message h4{margin:.1rem 0 .3rem;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ca-message p{margin:0;white-space:normal}
.ca-edit{flex:1 1 300px;min-width:0}
/* Roadmap audit queues (2026-07-17): verification state on a row + the queue chips. */
.opt-vf-complete{background:#dff3e4;color:#256b3c}
.opt-vf-drift{background:#fff3d6;color:#8a6d12}
.opt-vf-blocked{background:#fde8e6;color:#9a3b34}
.opt-chip-q-verified_complete.on{background:#dff3e4;border-color:#9ccfae;color:#256b3c}
.opt-chip-q-blocked.on{background:#fde8e6;border-color:#e8b3ad;color:#9a3b34}
.opt-chip-q-drift.on{background:#fff3d6;border-color:#e0c97f;color:#8a6d12}
.opt-chip-q-obsolete.on,.opt-chip-q-auto_closed.on{background:#eef0f2;border-color:#c6ced6;color:#5b6671}
/* plan -> build -> verify (2026-08-08): the background-planning pipeline's three states. Tints
   follow this file's existing badge palette rather than the brand vars — these are status washes,
   the same family as .opt-vf-* and .opt-st-* directly above. */
.opt-built{background:#e2ecff;color:#2b4a86}
.opt-ready{background:#e3f2e6;color:#2f6b41}
.opt-claimed{background:#efe9df;color:#6b5b3e}
/* #36 half-built states: 🚧 partly built (amber, needs you) · 🧪 soaking (cool, working
   as intended, nothing owed) · ⏰ soak ended (red — the evidence is in and it is stuck). */
.opt-partial{background:#fbeccb;color:#6b4e16}
.opt-soak{background:#e4eef2;color:#2d5866}
.opt-soaked{background:#fde8e6;color:#9a3b34}
.opt-chip-q-built.on{background:#e2ecff;border-color:#a8c2ea;color:#2b4a86}
.opt-chip-q-ready.on{background:#e3f2e6;border-color:#a5cfb2;color:#2f6b41}
.opt-chip-q-claimed.on{background:#efe9df;border-color:#d3c6ac;color:#6b5b3e}
/* small shared utilities */
.inline-form{display:inline}
.nowrap{white-space:nowrap}
/* Notarization (IPEN) 2026-07-17 */
.notary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.1rem;margin:.4rem 0 1rem}
.notary-grid label,.notary-new label,.notary-seal label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
.notary-grid input,.notary-grid select,.notary-new input,.notary-new select,.notary-seal input{
  font:inherit;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px}
.notary-new{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.notary-idscan{margin:.3rem 0 1rem}
.notary-seal{border:2px solid var(--sage);margin-top:.5rem}
.notary-family{flex-direction:row!important;align-items:center;gap:.4rem;margin:.5rem 0}
.notary-search{display:flex;gap:.5rem;align-items:center;margin:.3rem 0 1rem;flex-wrap:wrap}
.notary-search input{flex:1 1 18rem;font:inherit;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px}
.notary-recent{list-style:none;padding:0;margin:.3rem 0}
.notary-recent li{padding:.35rem 0;border-bottom:1px solid var(--line)}
.sigwrap{position:relative;margin:.4rem 0}
.sigwrap canvas{width:100%;max-width:640px;height:200px;border:1px dashed var(--slate);border-radius:10px;background:#fff;touch-action:none}
.sigwrap .linkish{position:absolute;top:.3rem;right:.5rem;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem}
@media(max-width:640px){.notary-grid{grid-template-columns:1fr}}
.notary-checklist{list-style:none;padding:0;margin:.3rem 0}
.notary-checklist li{padding:.3rem 0}
.notary-checklist label{display:flex;gap:.5rem;align-items:flex-start}
.notary-external{margin-top:.8rem}
.notary-external summary{cursor:pointer;color:var(--slate);font-size:.9rem}
/* Jewelry Wishlist — v2 (2026-07-18, Brad): clear Vendor / Cost / Retail columns, generous
   spacing, note column removed (note rides under the product title when present). At the 1440px
   xwide width every column gets a DELIBERATE share so the table spreads evenly instead of
   bunching its content to the left. Product is the elastic column and absorbs the slack. */
.wl-table td{padding:1.1rem 1.2rem;vertical-align:middle;font-size:.97rem}
.wl-table th{padding:.7rem 1.2rem;white-space:nowrap}
.wl-table tbody tr{border-bottom:1px solid var(--line)}
.wl-thumb-cell{width:92px}
.wl-thumb{width:76px;height:76px;object-fit:contain;border:1px solid var(--line);border-radius:10px;
  background:#fff;display:block}
.wl-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:1.3rem;background:var(--cream)}
.wl-product{min-width:16rem}   /* elastic — absorbs whatever the fixed columns leave */
.wl-product a{font-weight:600;font-size:1.02rem}
.wl-note{display:block;margin-top:.3rem;font-style:italic}
.wl-variant{width:13%;min-width:7rem}
.wl-vendor{width:12%;min-width:8rem;white-space:nowrap;font-weight:600;color:var(--slate)}
.wl-num{width:8%;min-width:6rem;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wl-retail{font-weight:700;font-size:1.06rem;color:var(--slate)}
.wl-added{width:9%;min-width:7rem;color:var(--muted)}
.wl-added .wl-initials{margin-left:.45rem;vertical-align:middle}
.wl-actions{width:13rem;text-align:right}
.wl-actions .inline-form{display:inline-block;margin-left:.4rem}
.wl-initials{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:50%;background:var(--sage);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.02em}
/* collapsible priority groups (Roadmap) */
.rm-group{border:1px solid var(--line);border-radius:12px;background:#fff;margin:.7rem 0}
.rm-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
  padding:.7rem .95rem;font-weight:700;color:var(--slate)}
.rm-group>summary::-webkit-details-marker{display:none}
.rm-group>summary:hover{background:var(--cream)}
.rm-group[open]>summary{border-bottom:1px solid var(--line)}
.rm-group>summary .chev{margin-left:auto;color:var(--muted);transition:transform .15s ease}
.rm-group[open]>summary .chev{transform:rotate(90deg)}
.rm-group-body{padding:.6rem .8rem .8rem}
.rm-count{font-weight:500;color:var(--muted);font-size:.85rem}
.rm-tier-dot{width:.7rem;height:.7rem;border-radius:50%;flex:none}
.rm-dot-high{background:#d9534f}.rm-dot-medium{background:#caa53a}
.rm-dot-low{background:#3f7d57}.rm-dot-future{background:#9aa3ad}
.rm-dot-none{background:#fff;border:2px dashed #c9cfd6}
.rm-dot-not_planned{background:#eceadb;border:1px solid #b5ae86}
/* To-Do page */
.todo-add{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1.2rem;align-items:center}
.todo-add input[type=text]{flex:1 1 16rem;font:inherit;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:8px;background:#fff}
.todo-add select{font:inherit;padding:.5rem .55rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.todo-add button{font:inherit;font-weight:600;color:var(--slate);background:var(--sage);border:none;
  border-radius:18px;padding:.5rem 1.1rem;cursor:pointer}
.todo-add button:hover{background:var(--sage-d)}
.todo-who{margin:1.1rem 0 .5rem;font-size:1rem;font-weight:700;color:var(--slate)}
/* inline editor inside an open row */
.opt-edit{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line);display:flex;
  flex-direction:column;gap:.6rem}
.opt-edit-grid{display:flex;flex-wrap:wrap;gap:.8rem}
.opt-edit label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;font-weight:600;
  color:var(--muted);flex:1 1 12rem}
.opt-edit select,.opt-edit textarea{font:inherit;font-size:.9rem;font-weight:400;color:var(--slate);
  padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%}
.opt-edit textarea{resize:vertical;min-height:3.2rem}
.opt-edit-actions{display:flex;align-items:center;gap:.7rem}
.opt-edit .btn-sm{font:inherit;font-size:.85rem;font-weight:600;color:var(--slate);background:var(--sage);
  border:none;border-radius:18px;padding:.45rem 1.1rem;cursor:pointer}
.opt-edit .btn-sm:hover{background:var(--sage-d)}
.opt-saved{font-size:.82rem;font-weight:600;color:#256b3c}

/* Two-step delete on a to-do row (Options page) */
.task-del{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;
  padding-top:.7rem;border-top:1px solid var(--line,#e4e3d8)}
.task-del-trigger{font:inherit;font-size:.82rem;font-weight:600;color:#9a2b2b;background:transparent;
  border:1px solid #e0b4b4;border-radius:18px;padding:.35rem .9rem;cursor:pointer}
.task-del-trigger:hover{background:#fbeded}
.task-del-confirm{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.task-del-q{font-size:.85rem;font-weight:700;color:#9a2b2b}
.task-del-yes{font:inherit;font-size:.82rem;font-weight:700;color:#fff;background:#b33;
  border:none;border-radius:18px;padding:.4rem 1rem;cursor:pointer}
.task-del-yes:hover{background:#9a2b2b}
.task-del-no{font:inherit;font-size:.82rem;font-weight:600;color:var(--slate);background:#eee;
  border:none;border-radius:18px;padding:.4rem 1rem;cursor:pointer}
.task-del-no:hover{background:#e0e0e0}

/* Health-Department inspection sticky nav banner */
.hd-banner{position:sticky;top:0;z-index:60;background:#fff8e1;border-bottom:2px solid #c2bf8b;
  box-shadow:0 2px 6px #0000001a}
.hd-banner-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .7rem;
  max-width:1100px;margin:0 auto;padding:.55rem 1rem}
.hd-banner-tag{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:#7a6a3a;background:#f0e6c0;border-radius:6px;padding:.2rem .55rem;white-space:nowrap}
.hd-banner a.hd-banner-link{display:inline-block;color:#333c45;background:#fff;border:1px solid #bbd6e2;
  border-radius:999px;padding:.3rem .8rem;font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap}
.hd-banner a.hd-banner-link:hover{background:#bbd6e2}
.hd-banner-x{margin-left:auto;font:inherit;font-size:1.1rem;line-height:1;color:#7a6a3a;background:transparent;
  border:none;cursor:pointer;padding:.2rem .5rem;border-radius:6px}
.hd-banner-x:hover{background:#f0e6c0}
@media (max-width:600px){
  .hd-banner-inner{gap:.4rem}
  .hd-banner a.hd-banner-link{font-size:.8rem;padding:.28rem .65rem}
}

/* ===== Staff detail: commission table spacing (rates shown as whole %) ===== */
.sc-comm th{text-align:left;font-weight:600;color:var(--muted);padding:.4rem .7rem;font-size:.85rem;width:26%;white-space:nowrap}
.sc-comm td{padding:.4rem .7rem}
.sc-comm td.num{font-variant-numeric:tabular-nums}

/* ===== My Info: read-only summary tables + collapsed "Change" form ===== */
.mi-info th{text-align:left;font-weight:600;color:var(--muted);padding:.4rem .8rem;font-size:.85rem;width:32%;white-space:nowrap;vertical-align:top}
.mi-info td{padding:.4rem .8rem}
.mi-change{margin-top:.3rem}
.mi-change>summary{list-style:none;cursor:pointer}
.mi-change>summary::-webkit-details-marker{display:none}

/* ===== Dashboard top row v2: equal-height + equal-width cards (2 or 3), shorter Sign-offs card =====
   Overrides the earlier .dash-top rules (flex-start / 300px basis / 600px caps / align-self:flex-start)
   so the To-do · Sign-offs · Bookings cards form consistent equal columns that all fill the row height.
   (Appended; later in the cascade so these win without touching the originals.) */
/* (WO-F 2026-07-27) The v2 SIZING rules that used to sit here — including a
   `max-width:380px` per card — were dead code: the `!important` layer at the end of this
   file overrode every one of them, which is why the home cards stretch to ~1500px on a
   big monitor today rather than the 380 this claimed. Only the `.today` tweaks below were
   ever taking effect, so only they survive. The one live definition is at the file end. */
/* The Sign-offs ("today") card: fill the column height, and shrink the big number + button so the
   whole row is shorter and even. */
.dash-top > .today{
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:.55rem;
}
.dash-top > .today .today-main{flex-wrap:wrap}
.dash-top > .today .today-num{font-size:1.9rem}            /* was 2.4rem — tighten the big count */
.dash-top > .today .today-cta{                              /* smaller "SIGN-OFF LIST →" button */
  font-size:.72rem;
  padding:.42rem .8rem;
  align-self:flex-start;
}
/* (WO-F: the desktop cap this neutralised no longer exists — see the file end.) */

/* ===== Continuity Runbook — rendered markdown ===== */
.md-body{line-height:1.6;font-size:.95rem;color:var(--slate)}
.md-body h1{font-size:1.5rem;margin:1.3rem 0 .6rem}
.md-body h2{font-size:1.2rem;margin:1.5rem 0 .5rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.md-body h3{font-size:1.02rem;margin:1.1rem 0 .4rem}
.md-body p,.md-body li{margin:.4rem 0}
.md-body ul,.md-body ol{padding-left:1.5rem}
.md-body code{background:var(--cream);padding:.05rem .3rem;border-radius:4px;font-size:.85em}
.md-body pre{background:#2d2d2d;color:#eee;padding:.8rem 1rem;border-radius:8px;overflow-x:auto;font-size:.8rem;line-height:1.4}
.md-body pre code{background:none;color:inherit;padding:0}
.md-body table{border-collapse:collapse;margin:.6rem 0}
.md-body th,.md-body td{border:1px solid var(--line);padding:.35rem .6rem;text-align:left}
.md-body blockquote{border-left:3px solid #6b6f3a;margin:.6rem 0;padding:.2rem .9rem;background:var(--cream);color:var(--muted)}
.md-body hr{border:none;border-top:1px solid var(--line);margin:1.2rem 0}

/* Always-visible to-do delete in the row summary */
.task-del-inline{display:inline-flex;align-items:center;gap:.4rem;margin-left:.4rem}
.task-del-inline .task-del-trigger{padding:.05rem .35rem;font-size:1rem;line-height:1;border:1px solid transparent}
.task-del-inline .tdc{display:inline-flex;align-items:center;gap:.35rem}

/* delete confirm + trigger must honor the hidden attribute (was overridden by display:inline-flex) */
.task-del-confirm[hidden],.task-del-trigger[hidden]{display:none}

/* 🚩 Flag-for-next-session — inline row toggle + the pinned top section (brand sage/slate) */
.opt-row.opt-flagged{border-left-color:var(--sage-d);box-shadow:inset 3px 0 0 var(--sage)}
.opt-flag-mark{font-size:.85em}
.opt-flag-row{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;
  padding-top:.7rem;border-top:1px solid var(--line)}
.opt-flag-toggle{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;
  color:var(--slate);cursor:pointer}
.opt-flag-toggle input{width:1.05rem;height:1.05rem;accent-color:var(--sage-d);cursor:pointer}
.flagged-pin{background:var(--cream);border:1px solid var(--sage);border-left:5px solid var(--sage-d);
  border-radius:12px;padding:.85rem 1.05rem 1rem;margin:0 0 1.2rem}
.flagged-pin-h{margin:0 0 .15rem;font-size:1.08rem;color:var(--slate);border:none;padding:0}
.flagged-pin-count{color:var(--sage-d);font-weight:700}
.flagged-pin-sub{margin:.1rem 0 .65rem;font-size:.85rem;color:var(--muted)}
.flagged-pin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.flagged-pin-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.4rem .65rem}
.flagged-pin-title{font-weight:600;color:var(--slate);flex:1 1 12rem}
.flagged-pin-where{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--sage-d);background:#fff;border:1px solid var(--sage);border-radius:20px;padding:.05rem .55rem}
.flagged-pin-unflag{font:inherit;font-size:.8rem;font-weight:600;color:var(--slate);
  background:#eee;border:none;border-radius:6px;padding:.2rem .6rem;cursor:pointer}
.flagged-pin-unflag:hover{background:var(--sage);color:var(--slate)}

/* ====================================================================
   Portal top-navigation — single MEGA-MENU ("☰ Menu" → one click-to-open
   panel showing every group + page at once). The sole nav style.
   Built 2026-06-08.
   ==================================================================== */
.portal-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .2rem}
.portal-nav a.pn-home{margin-left:.2rem}
.pn-caret{font-size:.7em;opacity:.6;margin-left:.1em}
.pn-g-icon{font-size:.95em}

/* ---- Single click-to-open MEGA-MENU panel (all groups + pages at once) ---- */
.pn-mega{position:relative}
.pn-mega-btn{display:inline-flex;align-items:center;gap:.3em;background:var(--cream);border:1px solid var(--line);
  border-radius:8px;cursor:pointer;color:var(--slate);font-family:inherit;font-weight:600;font-size:.9rem;padding:.4rem .8rem}
.pn-mega-btn:hover{border-color:var(--sage)}
/* Viewport-anchored (fixed) so the wide all-in-one panel can never clip off either edge,
   regardless of where the ☰ Menu button sits in the top bar. Pinned just under the header,
   horizontally centered, clamped to the viewport width. */
.pn-mega-panel{position:fixed;top:60px;left:50%;transform:translateX(-50%);
  width:min(960px,96vw);margin:0;padding:1rem 1.3rem;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);border-radius:12px;
  box-shadow:0 16px 40px rgba(51,60,69,.2);z-index:62;max-height:min(80vh,660px);overflow:auto}
.pn-mega-panel[hidden]{display:none}
.pn-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem 1.4rem;align-items:start}
.pn-mega-col{break-inside:avoid;min-width:0}
.pn-mega-h{display:flex;align-items:center;gap:.45em;margin:0 0 .4rem;padding-bottom:.3rem;
  font-family:inherit;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--slate);border-bottom:1px solid var(--line)}
.pn-mega-list{list-style:none;margin:0;padding:0}
.pn-mega-item{display:flex;align-items:center;gap:.55em;padding:.32rem .45rem;border-radius:7px;
  text-decoration:none;color:var(--slate);font-size:.9rem;font-weight:500}
.pn-mega-item:hover,.pn-mega-item:focus{background:var(--lightblue);outline:none}
.pn-mega-item.pn-admin{box-shadow:inset 3px 0 0 var(--sage)}
.pn-mi-icon{width:1.2em;text-align:center;flex:0 0 auto}

/* ---- mobile ---- */
@media (max-width:760px){
  .portal-nav{gap:.1rem}
  /* Mega-menu on phones: full-width sheet, single stacked column, scrollable. */
  .pn-mega-panel{top:54px;width:96vw}
  .pn-mega-grid{grid-template-columns:1fr}
}

/* API & Scripts page — collapsible category sections (standing order #6). */
.scripts-sec{border:1px solid var(--line);border-radius:10px;margin:.55rem 0;background:#fff}
.scripts-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;padding:.7rem .85rem;border-radius:10px}
.scripts-sec>summary::-webkit-details-marker{display:none}
.scripts-sec>summary:hover{background:var(--cream)}
.scripts-sec[open]>summary{background:var(--cream);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.scripts-sec .sec-name{min-width:0}
.scripts-sec .sec-meta{display:flex;align-items:center;gap:.55rem;flex:none}
.scripts-sec .chev{color:var(--muted);transition:transform .15s ease}
.scripts-sec[open]>summary .chev{transform:rotate(90deg)}
.scripts-sec .catalog{margin:.2rem .55rem .55rem}
@media (max-width:560px){
  .scripts-sec>summary{flex-wrap:wrap;gap:.3rem}
  .scripts-sec .sec-name .small{display:block}
}

/* ── Roadmap: staged-edit dirty state, multi-select bulk bar, Done/Archive sections ── */
/* Dirty marker: an edited (unsaved) row highlights Save + shows a hint until it's saved. */
.opt-edit .rm-dirty-hint{display:none;color:#8a6d12}
.opt-edit.rm-dirty .rm-dirty-hint{display:inline}
.opt-edit.rm-dirty .btn-sm{background:#f2c94c;color:#5a4a00;box-shadow:0 0 0 2px rgba(242,201,76,.35)}
.rm-just-saved>summary{animation:rm-flash 1.1s ease}
@keyframes rm-flash{0%{background:#dff3e4}100%{background:transparent}}

/* Per-row select checkbox in the summary. */
.rm-pick{flex:none;width:1.05rem;height:1.05rem;margin-right:.1rem;cursor:pointer;accent-color:var(--sage-d)}

/* Bulk action bar — only visually prominent once something is selected. */
.rm-bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1rem;
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;
  opacity:.6;transition:opacity .15s ease,box-shadow .15s ease}
.rm-bulk-bar.rm-has-selection{opacity:1;border-color:var(--sage-d);
  box-shadow:0 1px 6px rgba(168,163,106,.18)}
.rm-bulk-label{font-weight:700;color:var(--slate);font-size:.9rem}
.rm-bulk-label #rm-bulk-count{display:inline-block;min-width:1.2rem;text-align:center;
  background:var(--sage);color:#3a3a25;border-radius:8px;padding:0 .35rem;font-weight:800}
.rm-bulk-field{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;font-weight:600;color:var(--muted)}
.rm-bulk-field select{font:inherit;font-size:.85rem;font-weight:400;color:var(--slate);
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.rm-bulk-bar .btn-sm{font:inherit;font-size:.85rem;font-weight:600;color:var(--slate);background:var(--sage);
  border:none;border-radius:18px;padding:.45rem 1rem;cursor:pointer}
.rm-bulk-bar .btn-sm:hover{background:var(--sage-d)}
.rm-bulk-bar .rm-bulk-archive{background:#eef0f2;color:#5b6671}
.rm-bulk-bar .rm-bulk-archive:hover{background:#e2e5e8}
.rm-bulk-clear{font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);background:transparent;
  border:none;cursor:pointer;text-decoration:underline}

/* Done + Archived group accents (reuse .rm-group styling). */
.rm-group.rm-done{margin-top:1.4rem;background:#fbfdfb}
.rm-group.rm-done>summary{color:#256b3c}
.rm-dot-done{background:#3f9d6a}
.rm-group.rm-archived{background:#fafafa}
.rm-group.rm-archived>summary{color:#5b6671}
.rm-dot-archived{background:#9aa3ad}
.opt-archived-badge{background:#e6e8ea;color:#5b6671}

/* Per-row archive/restore button area. */
.rm-archive-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;padding-top:.7rem;
  border-top:1px solid var(--line)}
.rm-archive-row .rm-arch-btn{background:#eef0f2;color:#5b6671}
.rm-archive-row .rm-arch-btn:hover{background:#e2e5e8}

@media (max-width:560px){
  .rm-bulk-bar{gap:.45rem;padding:.55rem .6rem}
  .rm-bulk-field{flex:1 1 8rem}
}

/* ===== #1085: sticky compact filter bar + bottom bulk dock =====
   Layering (see the roadmap item): above the rows, BELOW the portal header (z10) /
   HD banner (z60); the tag-autocomplete dropdown (z9999) stays above everything. */

/* The filter card pins under the portal header — the offset is measured by JS into
   --rm-top-offset because the header height is responsive. Once scrolled past the sentinel
   (.is-stuck via IntersectionObserver) it collapses to the slim one-row summary; tapping it
   re-opens the full rows as an absolutely-positioned overlay, so the pinned bar itself never
   changes height and nothing under it jumps. */
.rm-sticky-filters{position:sticky;top:var(--rm-top-offset,0px);z-index:7}
#rm-filterbar-sentinel{height:1px}
.rm-filters-full{display:flex;flex-direction:column;gap:.45rem}
.rm-filters-slim{display:none;align-items:center;flex-wrap:wrap;gap:.4rem;cursor:pointer}
.rm-filters-toggle{display:inline-block;font-size:.8rem;font-weight:700;line-height:1;
  padding:.4rem .65rem;border-radius:14px;border:1px solid var(--sage-d);background:var(--sage);
  color:var(--slate);white-space:nowrap}
.rm-slim-chips{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem}
.rm-sticky-filters.is-stuck{box-shadow:0 3px 10px rgba(0,0,0,.09);padding:.45rem .8rem}
.rm-sticky-filters.is-stuck .rm-filters-slim{display:flex}
.rm-sticky-filters.is-stuck:not(.rm-expanded) .rm-filters-full{display:none}
.rm-sticky-filters.is-stuck.rm-expanded .rm-filters-full{position:absolute;top:100%;left:-1px;
  right:-1px;background:#fff;border:1px solid var(--line);border-top:none;
  border-radius:0 0 12px 12px;box-shadow:0 12px 26px rgba(0,0,0,.16);
  padding:.7rem .8rem;max-height:min(70vh,30rem);overflow-y:auto}

/* The ONE bulk bar (never a clone) becomes a fixed bottom dock while anything is selected —
   aligned to the .report-wide content column (its clamp, minus .portal-main's 1.1rem side
   padding), never the raw viewport edge — and padded above the iOS home indicator.
   #roadmap-groups gets matching bottom padding (JS measures the dock into --rm-dock-h) so
   the dock never covers the last rows. */
.rm-bulk-bar.rm-has-selection{position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  z-index:8;width:min(100vw - 2.2rem,clamp(1060px,92vw,1600px));margin:0;
  border-radius:12px 12px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.2);
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
.rm-bulk-bar.rm-has-selection .rm-bulk-label{font-size:1rem}
#roadmap-groups.rm-dock-pad{padding-bottom:calc(var(--rm-dock-h,6rem) + 1.5rem)}

/* Group-header select-all checkbox (UI-only — no name/form; tri-state set by JS). */
.rm-group-pick{flex:none;width:1.05rem;height:1.05rem;cursor:pointer;accent-color:var(--sage-d)}

/* ============================================================================
   PORTAL COMPONENT LAYER (added 2026-06-10) — the canonical, reusable design
   primitives. NEW pages should use these classes instead of shipping a per-page
   <style> block. Purely ADDITIVE: nothing here overrides an existing rule, so
   it cannot change how current pages render. As pages are migrated off their
   inline styles they adopt these. See docs/portal-design-system.md.
   ========================================================================== */

/* --- design tokens: a real type + spacing scale (stop the font-size smear) --- */
:root{
  --fs-xs:.78rem; --fs-sm:.85rem; --fs-base:.95rem; --fs-lg:1.1rem;
  --fs-h2:1.4rem; --fs-h1:2.1rem;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem;
  --radius:12px; --radius-pill:24px;
  /* semantic status colors (aliases of the existing palette so they're one source) */
  --ok:#3f7a4f; --warn:#b08a1e; --danger:#9a3b3b; --danger-bg:#fdeaea;
}

/* --- one button system (.btn + modifiers) — replaces the 40+ ad-hoc names --- */
.btn{font:inherit;font-weight:600;font-size:var(--fs-base);line-height:1;
  border:1px solid var(--line);border-radius:var(--radius);padding:.55rem 1.1rem;
  background:var(--cream);color:var(--slate);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;transition:background .12s,border-color .12s}
.btn:hover{background:#f1efe4}
.btn-primary{background:var(--sage);color:var(--slate);border-color:transparent}
.btn-primary:hover{background:var(--sage-d)}
.btn-secondary{background:#fff;border-color:var(--line)}
.btn-secondary:hover{background:var(--cream)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:#e7bcbc}
.btn-danger:hover{background:#f7dada}
.btn-sm{padding:.32rem .7rem;font-size:var(--fs-sm)}
.btn-link{background:none;border:none;color:var(--slate);text-decoration:underline;padding:0}
.btn-link:hover{background:none;color:var(--sage-d)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}

/* --- one data table (.data-table) — the canonical list/report table --- */
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
/* Inside a .jo-narrow scroll wrapper the table takes its NATURAL width instead of being crushed
   to the column: headers stay on one line and the wrapper actually scrolls sideways when the
   table is wider than the page column. (Before this, width:100% meant a 10-column table could
   never overflow, so jo-narrow never scrolled and every header wrapped — /portal/performance
   was the reported case, Brad 2026-07-18.) min-width keeps narrow tables filling their card. */
.jo-narrow>table{width:max-content;min-width:100%}
.jo-narrow>table th{white-space:nowrap}
/* Dashboard tile density (Brad 2026-07-18): per-person Cards/Compact selector on the home.
   Compact = name only — icon + subtitle hidden, tighter cards, narrower grid columns. */
.tile-view-pick{display:flex;align-items:center;gap:.4rem;justify-content:flex-end;margin:0 0 .6rem}
.tv-opt{font:inherit;font-size:.82rem;padding:.25rem .7rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--muted);cursor:pointer}
.tv-opt.on{background:var(--slate);border-color:var(--slate);color:#fff}
.tiles.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem}
.tiles.compact .tile{min-height:0;padding:.55rem .8rem;gap:0}
.tiles.compact .tile-icon,.tiles.compact .tile-meta{display:none}
.tiles.compact .tile-name{font-size:1.05rem}

/* THE canonical mobile stacking (2026-07-18): add `dt-stack` to a .data-table whose cells carry
   data-label attributes and it collapses to label:value cards under 760px — ONE rule to adopt
   instead of cloning another per-page `*-table` media block (~20 clones exist; consolidate to
   this as pages get touched). Tables WITHOUT dt-stack keep their natural width on phones and
   finger-scroll inside .jo-narrow — scrolling beats letter-crushed columns. */
@media(max-width:760px){
  .jo-narrow>table.dt-stack{width:100%;min-width:0}
  .jo-narrow>table.dt-stack th{white-space:normal}
  .data-table.dt-stack thead{display:none}
  .data-table.dt-stack tr{display:block;border:1px solid #eee;border-radius:10px;
    margin-bottom:.6rem;padding:.4rem .6rem;background:#fff}
  .data-table.dt-stack td{display:flex;justify-content:space-between;gap:.75rem;
    align-items:center;      /* WO-F: label and value align on their centres, not their tops */
    border:none;padding:.25rem 0;text-align:right}
  .data-table.dt-stack td::before{content:attr(data-label);font-weight:600;
    color:#6b6b66;text-align:left;flex:0 0 auto}   /* WO-F: the label must not stretch */
  .data-table.dt-stack td .cell-ellip{max-width:60vw}
  .data-table.dt-stack td:not([data-label])::before{content:none}
}
/* `dt-stack-wide` — the SAME stacking, carried up to 900px (#1089, 2026-08-09). ☠️ 760px leaves
   iPad portrait (768) scrolling sideways, and 768 is one of the two widths standing order #14
   names. #1066 hit this exact boundary two days earlier and fixed it by raising 760 → 900 for
   `.opt-row`; this is that lesson as a reusable modifier rather than a third private breakpoint.
   Add it beside `dt-stack` on any table WIDE enough to overflow a tablet — measured: the buy
   plan's vendor table renders 1336px inside a 692px wrapper at 768. */
@media(min-width:761px) and (max-width:900px){
  .jo-narrow>table.dt-stack-wide{width:100%;min-width:0}
  .jo-narrow>table.dt-stack-wide th{white-space:normal}
  .data-table.dt-stack-wide thead{display:none}
  .data-table.dt-stack-wide tr{display:block;border:1px solid #eee;border-radius:10px;
    margin-bottom:.6rem;padding:.4rem .6rem;background:#fff}
  .data-table.dt-stack-wide td{display:flex;justify-content:space-between;gap:.75rem;
    align-items:center;border:none;padding:.25rem 0;text-align:right}
  .data-table.dt-stack-wide td::before{content:attr(data-label);font-weight:600;
    color:#6b6b66;text-align:left;flex:0 0 auto}
  .data-table.dt-stack-wide td .cell-ellip{max-width:60vw}
  .data-table.dt-stack-wide td:not([data-label])::before{content:none}
}
.data-table th{text-align:left;padding:.5rem .65rem;border-bottom:2px solid var(--line);
  color:var(--muted);font-weight:600}
.data-table td{padding:.5rem .65rem;border-bottom:1px solid var(--line);vertical-align:top}
.data-table tbody tr:hover{background:var(--cream)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== Cell primitives (WO-F 2026-07-27) =====================================
   `.cell-inline` — text plus a badge that must behave as ONE thing. Under dt-stack's
   flex `td` a bare "name + badge" becomes several flex items and gets pinned to opposite
   ends of the card; wrapped in this, it is a single item that sits where it should.
   `.cell-ellip` — a long value (an email) truncated rather than allowed to wrap and grow
   the row. The full value stays available via the element's title attribute, and the
   detail page always has it in full. */
.cell-inline{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cell-ellip{display:inline-block;max-width:36ch;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle}

/* ===== Width-cap utilities (WO-F) ===========================================
   Inline `style="max-width:…"` is BANNED (design-system rule #22) — these replace the
   ones that had accumulated across templates. Pick the smallest that still reads well. */
.cap-xs{max-width:480px;margin-inline:auto}
.cap-sm{max-width:560px;margin-inline:auto}
.cap-md{max-width:680px;margin-inline:auto}
.cap-lg{max-width:720px;margin-inline:auto}
.report-block.ddx{border-left:4px solid var(--due)}
.lz-result{max-width:560px}

/* Accidental full-bleed wrappers — these two carried no ceiling at all, so they sprawled
   to whatever the viewport gave them once the wrappers above went fluid. */
.board{max-width:880px;margin-inline:auto}
.docs{max-width:clamp(880px,92vw,1600px);margin-inline:auto}

/* --- one card + one page header (canonicalize the existing patterns) --- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.2rem;margin-bottom:1.3rem}
/* --- headline stat grid (big-number KPIs) --- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,220px));
  justify-content:center;   /* WO-F: 1fr let a handful of stat tiles balloon across a 5K
                               screen; a max keeps them tile-sized and centred */
  gap:.8rem;margin:0 0 1.2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.1rem;text-align:center}
.stat.stat-hero{border-left:5px solid var(--sage)}
.stat-num{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:2.1rem;
  line-height:1.05;color:var(--slate)}
.stat-cap{margin-top:.25rem;font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.stat-sub{margin-top:.15rem;font-size:.8rem;color:var(--muted)}
/* a thin upgrade-vs-free bar */
.split-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;
  border:1px solid var(--line);margin:.2rem 0 1.2rem}
.split-bar .seg-up{background:var(--sage)}
.split-bar .seg-free{background:var(--lightblue)}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.page-header h1{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:var(--fs-h1);margin:0}

/* --- one flash/notice system (.notice + tone modifiers) --- */
.notice{padding:.55rem .85rem;border-radius:9px;font-size:var(--fs-sm);font-weight:600;
  margin-bottom:.5rem;border:1px solid var(--line)}
.notice-ok{background:#dcefdc;color:var(--ok);border-color:#b9ddb9}
.notice-warn{background:#fff7e3;color:var(--warn);border-color:#ecd9a6}
.notice-err{background:var(--danger-bg);color:var(--danger);border-color:#e7bcbc}
.notice-info{background:#e7f0f7;color:#1d4e66;border-color:#c5dcea}

/* Staff go-live readiness (Brad 2026-06-10): every module except the 8 read-only-exempt ones
   is flagged 'not production ready' so staff know what's usable tomorrow. */
.npr-badge{display:inline-block;background:#fbe3e0;color:#9a3b2f;font-size:.64rem;font-weight:700;padding:.05rem .42rem;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
.tile-npr{opacity:.78}
.npr-tag{display:inline-block;background:#fbe3e0;color:#9a3b2f;font-size:.58rem;font-weight:700;padding:0 .32rem;border-radius:5px;margin-left:.35rem;vertical-align:middle;text-transform:uppercase}
.pn-npr{opacity:.82}

/* --- Tool pages: the shared two-column calculator anatomy (inputs left, live result right).
   The standard for calculator-style tools per docs/portal-design-system.md — not bespoke grids. --- */
.tool-2col{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:start;margin-top:1rem}
.tool-aside{background:#ecead7;background:color-mix(in srgb,var(--sage) 22%,#fff);
  border-color:#dcd9bf;position:sticky;top:1rem}
.tool-aside h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.4rem;margin:.1rem 0 .9rem}
@media(max-width:860px){.tool-2col{grid-template-columns:1fr}.tool-aside{position:static}}

/* --- module: jewelry price calculator (/portal/jewelry/price-calculator/) --- */
.jc-piece{display:flex;align-items:flex-end;gap:.5rem;margin-bottom:.7rem}
.jc-piece label{flex:1;font-weight:600;font-size:.92rem}
.jc-piece input{display:block;width:100%;margin-top:.25rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400}
.jc-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.06)}
.jc-row .lbl{font-weight:600}
.jc-total{margin-top:1rem}
.jc-total>span{font-size:1.25rem;font-weight:600}
.jc-total>div{font-size:2.1rem;font-weight:700;line-height:1.1}
@media(max-width:760px){.jc-piece input{padding:.85rem}}

/* ===== app module styles migrated from per-template <style> blocks (design fix-through 2026-06-10) ===== */

/* --- module: laser / quote_form.html --- */
.lz-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);gap:1.6rem;align-items:start;margin-top:1rem}
.lz-card{background:#fff;border:1px solid #e4e3d8;border-radius:14px;padding:1.1rem 1.25rem 1.25rem;margin-bottom:1.1rem}
.lz-form h2{display:flex;align-items:center;gap:.55rem;font-size:1.02rem;margin:0 0 .75rem}
.lz-step{display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;
         border-radius:50%;background:var(--slate);color:#fff;font-size:.85rem;font-weight:700;flex:none}
.lz-opt{font-weight:400;color:#8a8a82;font-size:.85rem}
.lz-cust{position:relative;margin-bottom:.9rem}
.lz-cust>label{display:block;font-weight:600;font-size:.9rem}
.lz-cust input{width:100%;padding:.55rem .7rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit;font-weight:400;margin-top:.25rem}
.lz-cust-results{position:absolute;z-index:20;background:#fff;border:1px solid #d8d8cf;border-radius:8px;width:100%;box-shadow:0 6px 18px #0002;display:none}
.lz-cust-results div{padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid #f0efe8;font-size:.9rem}
.lz-cust-results div:hover{background:#f4f4ee}
.lz-linked{margin-top:.45rem;font-size:.9rem;background:#e3f4e3;border:1px solid #aedcae;border-radius:8px;padding:.45rem .65rem}
.lz-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem .9rem}
.lz-form label{display:block;font-weight:600;font-size:.9rem}
.lz-form .lz-grid input{width:100%;padding:.55rem .65rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit;font-weight:400;margin-top:.25rem}
.lz-form input:focus,.lz-form select:focus{outline:2px solid var(--lightblue);border-color:#9cc0d2}
.lz-note{color:#6b6b66;font-size:.83rem;margin:.25rem 0 .6rem}
.m-row{display:grid;grid-template-columns:minmax(110px,150px) minmax(150px,200px) 2.4rem;gap:.6rem;margin-bottom:.55rem;align-items:end}
.m-row label{font-weight:600;font-size:.85rem}
.m-row input,.m-row select{width:100%;padding:.5rem .55rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit;font-weight:400;margin-top:.25rem}
.m-row .rm{border:none;background:#efeee4;border-radius:8px;height:2.35rem;cursor:pointer;color:#7a7a72}
.m-row .rm:hover{background:#e7d9d9;color:#9a3b3b}
.lz-override input{display:block;width:200px;padding:.55rem .7rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit;font-weight:400;margin-top:.25rem}
.btn-light{background:#efeee4;border:1px solid #d8d8cf;border-radius:8px;padding:.5rem .9rem;cursor:pointer;font:inherit}
.btn-light:hover{background:#e7e6da}
.lz-actions{margin:.2rem 0 0}
.btn-primary:hover{background:#222931}
.lz-result{background:color-mix(in srgb,var(--sage) 20%,#fff);border:1px solid color-mix(in srgb,var(--sage) 40%,#fff);border-radius:16px;padding:1.25rem 1.4rem 1.4rem;position:sticky;top:1rem}
.lz-result h2{margin:.1rem 0 .8rem;font-size:1.05rem}
.lz-area{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid #00000014;font-size:.92rem}
.lz-single{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem 0 .55rem;border-bottom:1px solid #00000014}
.lz-single span{font-size:.92rem}
.lz-single b{font-size:1.45rem;color:var(--slate)}
.lz-pkg{margin-top:.65rem;background:#ffffffa8;border:1px solid #00000010;border-radius:10px;padding:.55rem .7rem;font-size:.92rem}
.lz-pkg b{display:block;margin-bottom:.1rem}
.lz-over{margin-top:.85rem;background:#fff3df;border:1px solid #ecd9a6;border-radius:10px;padding:.5rem .7rem;color:#8a5a00;font-size:.85rem}
@media(max-width:900px){
  .lz-wrap{grid-template-columns:1fr}
  .lz-grid{grid-template-columns:1fr}
  .lz-result{position:static}
  .m-row{grid-template-columns:1fr 1fr 2.4rem}
}

/* --- module: laser / quote_list.html --- */
.lz-search{display:flex;gap:.5rem;margin:.4rem 0 1rem;flex-wrap:wrap}
.lz-search input{flex:1;max-width:420px;padding:.55rem .7rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit}
.lz-table{width:100%;border-collapse:collapse}
.lz-table th,.lz-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #eee;font-size:.92rem}
.lz-table thead th{font-size:.8rem;color:#6b6b66;text-transform:uppercase}
.lz-exp{color:#999}
.lz-badge{background:#eee;color:#777;border-radius:6px;padding:0 .4rem;font-size:.72rem;text-transform:uppercase}
.lz-renew{display:inline}
.lz-renew-btn{background:none;border:none;color:#1a73c0;font:inherit;font-size:.92rem;cursor:pointer;padding:0;text-decoration:underline}
@media(max-width:760px){.lz-table thead{display:none}.lz-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}.lz-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.lz-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: laser / conversion.html --- */
.lz-stats{display:flex;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.2rem}
.lz-stat{background:#fff;border:1px solid #e0ddd0;border-radius:12px;padding:.9rem 1.2rem;min-width:150px}
.lz-stat.lz-hi{background:#f4f3ea;border-color:var(--sage)}
.lz-num{font-size:1.8rem;font-weight:700;color:var(--slate)}
.lz-lbl{font-size:.8rem;color:#7c7c74}
.lz-table{width:100%;border-collapse:collapse}
.lz-table th,.lz-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.9rem}
.lz-table thead th{font-size:.76rem;text-transform:uppercase;color:#6b6b66}
.lz-conv{background:#f6faf4}
@media(max-width:760px){.lz-table thead{display:none}.lz-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}.lz-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.lz-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: laser / training_videos.html --- */
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.4rem;margin-top:1rem}
.lv-card{margin:0;background:#fff;border:1px solid #e4e3d8;border-radius:14px;padding:1rem;box-shadow:0 1px 3px #0000000d}
.lv-title{font-weight:600;color:var(--slate);margin-bottom:.6rem;font-size:1.02rem;line-height:1.3}
.lv-frame{position:relative;padding-bottom:56.5%;height:0;overflow:hidden;border-radius:10px;background:#000}
.lv-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.lv-pw{margin:.6rem 0 0;font-size:.85rem;color:#6b6f63}
.lv-pw code{background:#f4f3ea;padding:.1rem .4rem;border-radius:5px}

/* --- module: laser / quote_result.html --- */
.lz-row{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid #00000010}
.lz-row.big{font-size:1.2rem;font-weight:700;border:none}
.lz-pkg{margin-top:.5rem;font-size:.92rem}.lz-pkg b{display:block}
.btn-light{background:#efeee4;border:1px solid #d8d8cf;border-radius:10px;padding:.6rem 1.1rem}

/* --- module: signoffs / signoffs_report.html --- */
.rp-subnav{display:flex;gap:.4rem;margin:.2rem 0 1rem}
.rp-subnav a{padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--slate);background:#f0efe8;text-decoration:none}
.rp-subnav a.active{background:var(--slate);color:#fff}
.rp-bar{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin:.4rem 0 1rem}
.rp-bar label{font-weight:600;font-size:.85rem}
.rp-bar select,.rp-bar input{display:block;margin-top:.2rem;padding:.45rem .6rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit}
.rp-range{color:#6b6b66;font-size:.9rem;margin-left:auto}
.rp-h{font-size:1.05rem;margin:1.4rem 0 .4rem}.rp-h small{color:#8a8a82;font-weight:400;font-size:.8rem}
.rp-table{width:100%;border-collapse:collapse;margin-bottom:.5rem}
.rp-table th,.rp-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.9rem}
.rp-table thead th{font-size:.76rem;color:#6b6b66;text-transform:uppercase}
.rp-table .num{text-align:right}
.rp-over{background:#fff8ef}
.rp-badge{background:#f3d6d6;color:#a33;border-radius:6px;padding:0 .4rem;font-size:.74rem}
@media(max-width:760px){.rp-table thead{display:none}.rp-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.rp-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.rp-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}.rp-range{margin-left:0}}

/* --- module: signoffs / signoffs_monthly_totals.html --- */
.rp-subnav{display:flex;gap:.4rem;margin:.2rem 0 1rem}
.rp-subnav a{padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600;
  color:var(--slate);background:#f0efe8;text-decoration:none}
.rp-subnav a.active{background:var(--slate);color:#fff}
.rp-bar{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin:.4rem 0 1rem}
.rp-bar label{font-weight:600;font-size:.85rem}
.rp-bar select{display:block;margin-top:.2rem;padding:.45rem .6rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit}
.rp-range{color:#6b6b66;font-size:.9rem;margin-left:auto}
.rp-h{font-size:1.05rem;margin:1.4rem 0 .4rem}.rp-h small{color:#8a8a82;font-weight:400;font-size:.8rem}
.rp-table{width:100%;border-collapse:collapse;margin-bottom:.5rem}
.rp-table th,.rp-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.9rem}
.rp-table thead th,.rp-table tfoot td{font-size:.78rem;color:#6b6b66}
.rp-table thead th{text-transform:uppercase}
.rp-table .num{text-align:right}
.mt-name{font-weight:600}
.mt-foot td{border-top:2px solid #ddd;font-size:.85rem}
/* Mobile: each row collapses to a stacked card; tap/focus expands the per-month detail. */
@media(max-width:760px){
  .mt-table thead{display:none}
  .mt-table tfoot{display:none}
  .mt-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .6rem}
  .mt-table td{display:none;justify-content:space-between;border:none;padding:.28rem 0}
  .mt-table td.mt-name,.mt-table td.mt-total{display:flex}
  .mt-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}
  .mt-table td.mt-name::before{content:""}
  .mt-table tr.mt-row.open td{display:flex}
  .mt-table tr.mt-row .mt-name::after{content:"▸";color:#aaa;margin-left:.5rem}
  .mt-table tr.mt-row.open .mt-name::after{content:"▾"}
  .rp-range{margin-left:0}
}

/* --- module: training / training_training.html --- */
.tr-error{background:#fdecea;border:1px solid #f5c2bd;color:#a3271c;border-radius:10px;
  padding:.7rem 1rem;margin-bottom:1rem}
.tr-form{background:#fff;border:1px solid #e4e3d8;border-radius:14px;padding:1.3rem 1.4rem;
  box-shadow:0 1px 3px #0000000d}
.tr-docs{list-style:decimal;margin:.4rem 0 1.2rem;padding-left:1.4rem}
.tr-doc{margin:0 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid #efeee5}
.tr-doc:last-child{border-bottom:0}
.tr-doc-link{font-weight:600;color:#2b6a86;text-decoration:none}
.tr-doc-link:hover{text-decoration:underline}
.tr-check{display:flex;align-items:center;gap:.5rem;margin-top:.45rem;color:#4a4f44;font-size:.93rem}
.tr-check input{width:1.05rem;height:1.05rem}
.tr-sub{font-family:"Cormorant Garamond",serif;color:var(--slate);margin:1.2rem 0 .3rem}
.tr-submit{margin-top:1rem;background:var(--slate);color:#fff;border:0;border-radius:10px;
  padding:.7rem 1.4rem;font-size:1rem;cursor:pointer}
.tr-submit:hover{background:#283037}
.tr-table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.92rem}
.tr-table th,.tr-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #ececdf}
.tr-table th{color:#6b6f63;font-weight:600}

/* --- module: surveys / surveys_list.html --- */
.sv-table{width:100%;border-collapse:collapse}
.sv-table th,.sv-table td{padding:.5rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.sv-table th.num,.sv-table td.num{text-align:right;white-space:nowrap}
.sv-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
@media(max-width:640px){
.sv-table thead{display:none}
.sv-table,.sv-table tbody,.sv-table tr,.sv-table td{display:block;width:100%}
.sv-table tr{border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.2rem .4rem}
.sv-table td{border:none;text-align:right;display:flex;justify-content:space-between;gap:1rem}
.sv-table td::before{content:attr(data-label);color:#778;font-size:.8rem;text-align:left}
}

/* --- module: surveys / surveys_detail.html --- */
.sv-table{width:100%;border-collapse:collapse}
.sv-table th,.sv-table td{padding:.5rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.sv-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
.sv-head{cursor:pointer}
.sv-head:hover{background:#fafafa}
.sv-caret{color:#99a;transition:transform .12s}
.sv-head.open .sv-caret{transform:rotate(90deg)}
.sv-badge{display:inline-block;font-size:.68rem;padding:.05rem .4rem;border-radius:9px;margin-left:.3rem;color:#fff;background:#8a9}
.sv-badge.sv-email{background:#3b7}.sv-badge.sv-phone{background:#39c}.sv-badge.sv-name{background:#c93}
.sv-answers{margin:0;display:grid;grid-template-columns:minmax(180px,30%) 1fr;gap:.2rem .8rem}
.sv-answers dt{font-weight:600;color:#445}
.sv-answers dd{margin:0;color:#333}
.sv-pager{display:flex;align-items:center;gap:.8rem;margin-top:.8rem}
@media(max-width:640px){
.sv-table thead{display:none}
.sv-table,.sv-table tbody,.sv-table td{display:block;width:100%}
.sv-head{display:flex;flex-wrap:wrap;border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.3rem .5rem}
.sv-head td{border:none;padding:.2rem 0}
.sv-detail td{border:none}
.sv-answers{grid-template-columns:1fr}
.sv-answers dt{margin-top:.4rem}
}

/* --- module: waivers / waivers_list.html --- */
.sv-table{width:100%;border-collapse:collapse}
.sv-table th,.sv-table td{padding:.5rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.sv-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
.sv-head{cursor:pointer}
.sv-head:hover{background:#fafafa}
.sv-caret{color:#99a;transition:transform .12s}
.sv-head.open .sv-caret{transform:rotate(90deg)}
.sv-badge{display:inline-block;font-size:.68rem;padding:.05rem .4rem;border-radius:9px;margin-left:.3rem;color:#fff;background:#8a9}
.sv-badge.sv-email{background:#3b7}.sv-badge.sv-phone{background:#39c}.sv-badge.sv-name{background:#c93}
.sv-answers{margin:0;display:grid;grid-template-columns:minmax(180px,30%) 1fr;gap:.2rem .8rem}
.sv-answers dt{font-weight:600;color:#445}
.sv-answers dd{margin:0;color:#333}
.sv-pager{display:flex;align-items:center;gap:.8rem;margin-top:.8rem}
@media(max-width:640px){
.sv-table thead{display:none}
.sv-table,.sv-table tbody,.sv-table td{display:block;width:100%}
.sv-head{display:flex;flex-wrap:wrap;border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.3rem .5rem}
.sv-head td{border:none;padding:.2rem 0}
.sv-detail td{border:none}
.sv-answers{grid-template-columns:1fr}
.sv-answers dt{margin-top:.4rem}
}

/* --- module: reviews / reviews_list.html --- */
.rv-filters{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0 1.2rem;align-items:flex-end}
.rv-filters label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:#556;font-weight:600}
.rv-filters select{font:inherit;font-size:.9rem;padding:.35rem .5rem;border:1px solid #cdd6dc;
border-radius:7px;background:#fff;color:var(--slate)}

.rv-table{width:100%;border-collapse:collapse}
.rv-table th,.rv-table td{padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.rv-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
.rv-text{max-width:34rem}
.rv-reply{margin-top:.35rem;font-size:.85rem;color:#556;background:#f6f8fa;border-left:3px solid var(--lightblue);
padding:.3rem .5rem;border-radius:0 6px 6px 0}
.rv-badge{display:inline-block;font-size:.75rem;border-radius:6px;padding:.05rem .45rem;white-space:nowrap}
.rv-google{background:#eaf3f8;color:#2a6280;border:1px solid var(--lightblue)}
.rv-facebook{background:#eef1f8;color:#3b4a80;border:1px solid #c5cdee}
.rv-stars{font-weight:700;color:#9a7b00;white-space:nowrap}
.rv-pos{color:#2c6e2c;font-weight:600;white-space:nowrap}
.rv-neg{color:#a23a2c;font-weight:600;white-space:nowrap}

@media(max-width:680px){
.rv-table thead{display:none}
.rv-table,.rv-table tbody,.rv-table tr,.rv-table td{display:block;width:100%}
.rv-table tr{border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.2rem .4rem}
.rv-table td{border:none;text-align:right;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.rv-table td::before{content:attr(data-label);color:#778;font-size:.8rem;text-align:left;flex:0 0 auto}
.rv-text{text-align:left}
.rv-filters{flex-direction:column;align-items:stretch}
}

/* --- module: costs / costs_savings.html --- */
.cs-totals{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 1.5rem}
.cs-card{flex:1 1 200px;border:1px solid #e6e6e6;border-radius:12px;padding:1rem 1.1rem;background:#fafafa}
.cs-current{border-color:#bcd9b6;background:#f3faf1}
.cs-projected{border-color:var(--lightblue);background:#f2f8fb}
.cs-all{border-color:#d9d6b8;background:#fbfaf1}
.cs-card-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#667;font-weight:600}
.cs-amt{font-size:1.7rem;font-weight:700;color:var(--slate);margin-top:.2rem}
.cs-amt span{font-size:.9rem;font-weight:500;color:#889;margin-left:.15rem}
.cs-amt-yr{font-size:1rem;font-weight:600;color:#556;margin-bottom:.3rem}
.cs-amt-yr span{font-size:.8rem;font-weight:500;color:#99a;margin-left:.1rem}

.cs-table{width:100%;border-collapse:collapse}
.cs-table th,.cs-table td{padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.cs-table th.num,.cs-table td.num{text-align:right;white-space:nowrap}
.cs-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
.cs-notes{margin-top:.25rem;max-width:34rem}
.cs-est{color:#9a7b00}
.cs-flag{display:inline-block;font-size:.72rem;color:#9a6b00;background:#fff4d6;border:1px solid #f0d98a;
border-radius:6px;padding:.02rem .35rem;margin-left:.35rem;white-space:nowrap}
.cs-badge{display:inline-block;font-size:.75rem;border-radius:6px;padding:.05rem .45rem;white-space:nowrap}
.cs-decommissioned{background:#e3f3e0;color:#2c6e2c;border:1px solid #bcd9b6}
.cs-pending{background:#fff4d6;color:#8a6d12;border:1px solid #f0d98a}
.cs-live{background:#eaf3f8;color:#2a6280;border:1px solid var(--lightblue)}

/* Inline edit */
.cs-act{text-align:right;white-space:nowrap}
.cs-edit-btn{font:inherit;font-size:.8rem;cursor:pointer;border:1px solid #cdd6dc;background:#fff;
color:#33424d;border-radius:7px;padding:.2rem .65rem}
.cs-edit-btn:hover{background:#f2f8fb;border-color:var(--lightblue)}
.cs-editrow>td{background:#f7fafc;border-bottom:2px solid #e1e9ee}
.cs-form-grid{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:flex-end}
.cs-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:#556;font-weight:600}
.cs-form input,.cs-form select{font:inherit;font-size:.9rem;padding:.35rem .5rem;border:1px solid #cdd6dc;
border-radius:7px;background:#fff;color:var(--slate)}
.cs-money{display:inline-flex;align-items:center;gap:.2rem;border:1px solid #cdd6dc;border-radius:7px;
background:#fff;padding-left:.5rem}
.cs-money>span{color:#889;font-weight:600}
.cs-money input{border:0;padding:.35rem .5rem .35rem .2rem;width:7rem}
.cs-notes-field{flex:1 1 18rem}
.cs-notes-field input{width:100%}
.cs-form-hint{margin:.5rem 0 .3rem}
.cs-form-actions{display:flex;gap:.6rem;margin-top:.2rem}
.cs-save-btn{font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border:0;border-radius:7px;
padding:.4rem .9rem;background:#2c6e2c;color:#fff}
.cs-save-btn:hover{background:#23581f}
.cs-cancel-btn{font:inherit;font-size:.85rem;cursor:pointer;border:1px solid #cdd6dc;background:#fff;
color:#556;border-radius:7px;padding:.4rem .9rem}
.cs-cancel-btn:hover{background:#f2f4f6}

@media(max-width:680px){
.cs-table thead{display:none}
.cs-table,.cs-table tbody,.cs-table tr,.cs-table td{display:block;width:100%}
.cs-table tr{border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.2rem .4rem}
.cs-table td{border:none;text-align:right;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.cs-table td::before{content:attr(data-label);color:#778;font-size:.8rem;text-align:left;flex:0 0 auto}
.cs-table tr.cs-editrow td::before{content:none}
.cs-table tr.cs-editrow td{display:block;text-align:left}
.cs-notes{text-align:left}
.cs-act{text-align:left}
.cs-form-grid{flex-direction:column;align-items:stretch}
.cs-money input{width:auto}
}

/* --- module: counts / counts_review.html --- */
.ct-banner{padding:.7rem 1rem;border-radius:10px;margin:.4rem 0 1rem}
.ct-test{background:#fff4d6;border:1px solid #e6cf8a}.ct-live{background:#e3f4e3;border:1px solid #aedcae}
.ct-flag{display:flex;justify-content:space-between;align-items:center;background:#f7f7f0;border:1px solid #e7e7dd;border-radius:8px;padding:.5rem .7rem;margin-bottom:.4rem;font-size:.9rem}
.ct-table{width:100%;border-collapse:collapse}
.ct-table th,.ct-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee}
.ct-table input{width:90px;padding:.4rem .5rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit}
.ct-due{background:#fff8ef}
/* expandable box rows (Jewelry Counts list) */
.ct-table tr[hidden]{display:none}
.ct-boxes tr.ct-main{cursor:pointer}
.ct-boxes tr.ct-main:hover td{background:#fafaf7}
.ct-chev-cell{text-align:right;width:1.4rem}
.ct-chev{display:inline-block;transition:transform .15s;color:#9a9a90}
.ct-main.open .ct-chev{transform:rotate(90deg)}
.ct-xrow>td{background:#faf9f4}
.ct-detail{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.85rem;color:#555;padding:.2rem .2rem}
.ct-timer{display:inline-block;margin-left:.5rem;font-size:.8rem;color:#8a6d1e;white-space:nowrap}
.ct-timer.ct-soon{color:#a33;font-weight:600}
.ct-timer.ct-expired{color:#a33;font-weight:600}
/* count 3-flag pills + discontinued-bag prompt */
.ct-flags{display:flex;gap:.7rem;flex-wrap:wrap;margin:.6rem 0}
.ct-flag-pill{display:flex;flex-direction:column;align-items:center;min-width:5rem;padding:.4rem .8rem;border-radius:10px;background:#f4f3ee}
.ct-flag-pill b{font-size:1.35rem;line-height:1}
.ct-flag-pill span{font-size:.72rem;color:#6b6b66;text-transform:uppercase;letter-spacing:.02em}
.ct-flag-pill.ok{background:#e3efe0;color:#3c7a34}
.ct-flag-pill.warn{background:#f6efd8;color:#8a6d1e}
.ct-flag-pill.alert{background:#f4dcdc;color:#a33}
.ct-flag-pill.muted{background:#f1f1ee;color:#9a9a90}
.ct-discard{background:#f9efe2;border:1px solid #e7c9a0;border-radius:10px;padding:.5rem .7rem;margin:.4rem 0;font-size:.9rem}
.ct-discard .ct-keepqty{padding:.2rem .3rem;border:1px solid #d8d8cf;border-radius:6px}
@media(max-width:760px){.ct-table thead{display:none}.ct-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.ct-table td{display:flex;justify-content:space-between;border:none}.ct-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}.ct-table tr[hidden]{display:none}.ct-chev-cell{display:none}}

/* --- module: counts / counts_session.html --- */
.ct-scan{width:100%;padding:.7rem .9rem;border:2px solid var(--slate);border-radius:10px;font:inherit;margin:.4rem 0}
.ct-scanmsg{min-height:1.2rem;font-size:.85rem;color:#8a5a00;margin-bottom:.6rem}
.ct-banner{padding:.7rem 1rem;border-radius:10px;margin:.4rem 0 1rem;background:#fff4d6;border:1px solid #e6cf8a}
.ct-table{width:100%;border-collapse:collapse}
.ct-table th,.ct-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee}
.ct-table input{width:90px;padding:.4rem .5rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit}
.ct-due{background:#fff8ef}
.ct-hit{background:#e3f4e3 !important;transition:background .1s}
@media(max-width:760px){.ct-table thead{display:none}.ct-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.ct-table td{display:flex;justify-content:space-between;border:none}.ct-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: counts / counts_result.html --- */
.ct-summary{background:color-mix(in srgb,var(--sage) 20%,#fff);border-radius:14px;padding:1rem 1.3rem;max-width:420px}
.ct-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #00000010}
.ct-table{width:100%;border-collapse:collapse;margin-top:.6rem}
.ct-table th,.ct-table td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid #eee}
.ct-up{color:#2a7d2a}.ct-down{color:#b23}
@media(max-width:760px){.ct-table thead{display:none}.ct-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.ct-table td{display:flex;justify-content:space-between;border:none}.ct-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: counts / counts_boxes.html --- */
.ct-banner{padding:.7rem 1rem;border-radius:10px;margin:.6rem 0 1rem}
.ct-test{background:#fff4d6;border:1px solid #e6cf8a}.ct-live{background:#e3f4e3;border:1px solid #aedcae}
.ct-table{width:100%;border-collapse:collapse}
.ct-table th,.ct-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #eee;font-size:.93rem}
.ct-table thead th{font-size:.78rem;color:#6b6b66;text-transform:uppercase}
.ct-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.ct-chip{padding:.3rem .7rem;border-radius:999px;border:1px solid #e0ddd0;background:#fff;font-size:.82rem;color:var(--slate);text-decoration:none}
.ct-chip.on{background:var(--slate);color:#fff;border-color:var(--slate)}
.ct-sort{color:inherit;text-decoration:none}
.ct-overdue{background:#fcecec}.ct-soon{background:#fdf6e3}
.ct-pill{background:#e6cf8a;border-radius:6px;padding:0 .4rem;font-size:.75rem}
@media(max-width:760px){.ct-table thead{display:none}.ct-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}.ct-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.ct-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: counts / counts_ledger.html --- */
.ct-table{width:100%;border-collapse:collapse}
.ct-table th,.ct-table td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid #eee;font-size:.9rem}
.ct-up{color:#2a7d2a}.ct-down{color:#b23}
@media(max-width:760px){.ct-table thead{display:none}.ct-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.ct-table td{display:flex;justify-content:space-between;border:none}.ct-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: social / social_cadence.html --- */
.cadence-plain { background:#f6f7f4; border:1px solid #e3e5dd; border-radius:8px; padding:.9rem 1.1rem; }
.cadence-grid { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:.9rem 1.4rem; margin:1rem 0; }
.cadence-grid label { display:flex; flex-direction:column; gap:.25rem; }
.cadence-grid input[type=number] { max-width:120px; }
.cadence-toggle { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.cadence-times .time-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; }
.cadence-tiers { margin:1rem 0; }
.cadence-tiers .tier-row { display:flex; align-items:flex-end; gap:.8rem; margin-bottom:.5rem; }
.cadence-tiers .tier-row label { display:flex; flex-direction:column; gap:.25rem; }
.cadence-tiers .tier-row input[type=number] { max-width:110px; }
.flash-ok { color:#2e7d32; font-weight:600; }
.flash-err { color:#b3261e; font-weight:600; }
.link-btn { background:none; border:none; color:#3a6ea5; cursor:pointer; padding:0; font:inherit; }
.link-btn:hover { text-decoration:underline; }
@media (max-width:560px){ .cadence-grid { grid-template-columns:1fr; } }

/* --- module: social / social_accounts.html --- */
.bio-table .bio-diff{display:flex;gap:.75rem;flex-wrap:wrap;margin:.4rem 0}
.bio-table .bio-col{flex:1;min-width:160px;border:1px solid #d9dde0;border-radius:6px;padding:.4rem .55rem;background:#fafbfc}
.bio-table .bio-col.bio-old{background:#fbf4f4;border-color:#e6cccc}
.bio-table .bio-col.bio-new{background:#f3f8f4;border-color:#cfe2d4}
.bio-table .bio-col p{margin:.2rem 0 0;white-space:pre-wrap}
.bio-table .bio-current{max-width:34ch}
.bio-table tr.bio-flagged{background:#fffaf0}
.ord-badge.warn{background:#f5d76e;color:#5a4500}
@media (max-width:720px){
.bio-table thead{display:none}
.bio-table,.bio-table tbody,.bio-table tr,.bio-table td{display:block;width:100%}
.bio-table tr{border:1px solid #d9dde0;border-radius:8px;margin-bottom:.6rem;padding:.4rem .6rem}
.bio-table td{border:none;padding:.25rem 0}
.bio-table td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:.72rem;text-transform:uppercase;color:#7a8288;margin-bottom:.1rem}
.bio-table .bio-diff{flex-direction:column}
}

/* --- module: dmarc / dmarc_dashboard.html --- */
.dm-banner{background:#fff4d6;border:1px solid #e6cf8a;border-radius:10px;padding:.7rem 1rem;margin:.4rem 0 1rem}
.dm-cards{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.dm-card{background:#fff;border:1px solid #e0ddd0;border-radius:12px;padding:.9rem 1.2rem;min-width:120px}
.dm-card span{display:block;color:#6b6b66;font-size:.8rem;text-transform:uppercase}
.dm-card b{font-size:1.8rem}.dm-card small{color:#6b6b66}
.dm-ok b{color:#2a7d2a}.dm-bad b{color:#b23}
.dm-h{font-size:1.05rem;margin:1.2rem 0 .4rem}.dm-h small{color:#8a8a82;font-weight:400;font-size:.8rem}
.dm-table{width:100%;border-collapse:collapse}
.dm-table th,.dm-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.9rem}
.dm-table .num{text-align:right}
@media(max-width:760px){.dm-table thead{display:none}.dm-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.3rem .5rem}.dm-table td{display:flex;justify-content:space-between;border:none}.dm-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: billing / billing_list.html --- */
.bi-table{width:100%;border-collapse:collapse}
.bi-table th,.bi-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #eee;font-size:.92rem}
.bi-table thead th{font-size:.8rem;color:#6b6b66;text-transform:uppercase}
.bi-badge{background:#eef2f6;color:#5a6b78;border-radius:6px;padding:0 .4rem;font-size:.72rem;text-transform:uppercase}
.bi-st{border-radius:6px;padding:.1rem .5rem;font-size:.8rem}
.bi-paid{background:#eef6ee;color:#2e7d32}
.bi-sent{background:#eef2f6;color:#37566b}
.bi-draft{background:#f3f3ee;color:#6b6b66}
.bi-canceled{background:#fbeeee;color:#a33}
@media(max-width:760px){.bi-table thead{display:none}.bi-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}.bi-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.bi-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: billing / billing_new.html --- */
.bf{display:flex;flex-direction:column;gap:1rem;max-width:520px;margin-top:1rem}
.bf label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;color:var(--slate)}
.bf input{padding:.6rem .7rem;border:1px solid #d8d8cf;border-radius:8px;font:inherit;font-weight:400}
.bf .small{font-weight:400;color:#6b6b66}
.bx{border-radius:10px;padding:.8rem 1rem;margin:1rem 0}
.bx-ok{background:#eef6ee;border:1px solid #cbe3cb}
.bx-bad{background:#fbeeee;border:1px solid #e3cbcb}
.bx p{margin:.3rem 0}
.small{font-size:.85rem}

/* --- module: portal / phones.html --- */
.phone-table .pn-select{max-width:13rem;padding:.25rem .4rem}
.phone-table .mono,.mpk-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mpk-table tr.mpk-empty td{opacity:.6}
@media (max-width:760px){
  .phone-table thead{display:none}
  .phone-table,.phone-table tbody,.phone-table tr,.phone-table td{display:block;width:100%}
  .phone-table tr.phone-row{border:1px solid #e3e3dc;border-radius:10px;margin:0 0 .75rem;padding:.4rem .6rem;background:#fff}
  .phone-table td{display:flex;justify-content:space-between;gap:1rem;align-items:center;border:none;padding:.3rem 0}
  .phone-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}
  .phone-table .pn-select{max-width:60%}
}

/* --- module: portal / health_department.html --- */
.hd-note{background:#f4f3ea;border:1px solid #e4e3d8;border-radius:10px;padding:.9rem 1.1rem;
         color:#4a4f45;font-size:.95rem;margin:.4rem 0 1.2rem}
.hd-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.hd-chip{display:inline-block;background:#fff;border:1px solid var(--lightblue);color:var(--slate);
         border-radius:999px;padding:.4rem .9rem;font-size:.9rem;text-decoration:none;font-weight:600}
.hd-chip:hover{background:var(--lightblue)}
.hd-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.hd-card{background:#fff;border:1px solid #e4e3d8;border-radius:14px;padding:1.1rem 1.3rem;
         box-shadow:0 1px 3px #0000000d}
.hd-card h2{color:var(--slate);font-size:1.15rem;margin:0 0 .7rem;padding-bottom:.5rem;
            border-bottom:2px solid var(--sage)}
.hd-card ul{margin:0;padding-left:1.1rem}
.hd-card li{margin:.45rem 0;font-size:.92rem;line-height:1.45;color:#454a40}
.hd-card a{color:#2c6b8a}

/* --- module: portal / deposits.html --- */
.dep-filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0 1rem}
/* the small "Sort:" / "Money on the line:" lead-in that separates one group of chips from
   the previous one on the same row (replaces a per-template inline margin) */
.dep-filters-lead{margin-left:.6rem}
.dep-win{margin-left:auto;font-size:.82rem;color:#6b6b66;display:flex;gap:.3rem;align-items:center}
.dep-chip{display:inline-block;padding:.25rem .7rem;border:1px solid #d8d6c4;border-radius:999px;
          font-size:.82rem;color:#555;text-decoration:none;background:#fbfaf4}
.dep-chip.on{background:var(--slate);border-color:var(--slate);color:#fff}
.dep-subtotals{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.dep-sub{background:#f4f3ea;border:1px solid #e0ddc8;border-radius:8px;padding:.2rem .6rem;font-size:.82rem;color:#555}
.dep-table{width:100%;border-collapse:collapse}
.dep-table th,.dep-table td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #eee;font-size:.9rem;vertical-align:top}
.dep-table th.num,.dep-table td.num{text-align:right}
.dep-table thead th{font-size:.74rem;text-transform:uppercase;color:#6b6b66}
.dep-row{cursor:pointer}
.dep-row:hover{background:#fbfaf4}
.dep-row.row-warn{background:#fffaf0}
.dep-row.row-urgent{background:#fdf1f1}
.block{display:block}
.dep-dup-badge{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px;
               background:#fdecea;border:1px solid #e6b3ad;color:#c0392b;font-size:.72rem;
               font-weight:600;white-space:nowrap;cursor:help;vertical-align:middle}
.dep-dup-summary{color:#c0392b;font-weight:600}
.dep-flag{font-size:.82rem;color:#777}
.dep-flag.warn{color:#b5791f;font-weight:600}
.dep-flag.urgent{color:#c0392b;font-weight:700}
.dep-sched{font-size:.82rem;color:#2c7a4b;font-weight:600}
.dep-caret{transition:transform .15s;display:inline-block;color:#999}
.dep-row.open .dep-caret{transform:rotate(90deg)}
.dep-detail{display:none}
.dep-row.open + .dep-detail{display:table-row}
.dep-detail-inner{padding:.4rem .2rem .8rem}
.dep-clear-row{display:flex;gap:.4rem;margin:.3rem 0;flex-wrap:wrap}
.dep-clear-row input[type=text]{flex:1;min-width:240px;padding:.4rem .6rem;border:1px solid #cfcdbf;border-radius:6px}
.btn-clear{background:var(--slate);color:#fff;border:none;border-radius:6px;padding:.4rem .9rem;cursor:pointer}
.dep-pending{color:#b5791f;font-size:.86rem;font-weight:600}
.dep-review{background:#fffdf6;border:1px solid #e8e2c4;border-radius:12px;padding:.8rem 1rem;margin:0 0 1.2rem}
.dep-review h2{font-size:1.02rem;margin:.1rem 0 .6rem;color:var(--slate)}
.dep-count{background:#c0392b;color:#fff;border-radius:999px;padding:0 .5rem;font-size:.78rem;margin-left:.3rem}
.dep-review-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start;
                border-top:1px solid #eee;padding:.6rem 0}
.dep-review-row:first-of-type{border-top:none}
.dep-review-main{flex:1;min-width:260px}
.dep-reason{font-style:italic;color:#555;margin-top:.2rem}
.dep-review-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.dep-review-actions input{padding:.35rem .5rem;border:1px solid #cfcdbf;border-radius:6px}
.btn-approve{background:#2c7a4b;color:#fff;border:none;border-radius:6px;padding:.4rem .8rem;cursor:pointer}
.btn-deny{background:#fff;color:#c0392b;border:1px solid #c0392b;border-radius:6px;padding:.4rem .8rem;cursor:pointer}
@media(max-width:760px){
  .dep-table thead{display:none}
  .dep-table tbody tr.dep-row{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.5rem;padding:.4rem .6rem}
  .dep-table tbody tr.dep-row td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}
  .dep-table tbody tr.dep-row td::before{content:attr(data-label);font-weight:600;color:#6b6b66}
  .dep-toggle{display:none}
  .dep-row.open + .dep-detail{display:block;border:1px solid #eee;border-top:none;border-radius:0 0 10px 10px;margin:-0.6rem 0 .5rem}
  .dep-detail td{display:block}
}

/* --- module: portal / resideo.html --- */
.rs-panel{margin-top:.7rem;border-top:1px solid #e3e6e4;padding-top:.55rem}
.rs-title{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--slate);margin-bottom:.4rem}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.45rem}
.rs-cell{background:#f6f7f4;border:1px solid #e3e6e4;border-left:3px solid var(--sage);
  border-radius:6px;padding:.4rem .5rem}
.rs-cell-thermostat{border-left-color:#1d4e66;background:#f2f6f8}
.rs-room{font-size:.78rem;font-weight:600;color:var(--slate);line-height:1.2}
.rs-tstat{font-size:.6rem;font-weight:600;color:#1d4e66;text-transform:uppercase;
  letter-spacing:.03em;margin-left:.2rem}
.rs-readout{margin:.2rem 0 .15rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.rs-temp{font-size:1.15rem;font-weight:700;color:#1d4e66}
.rs-hum{font-size:.74rem;color:#5a6b73}
.rs-meta{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.68rem}
.rs-motion{color:#8a948a}
.rs-motion-on{color:#2e7d32;font-weight:600}
.rs-status-bad{color:#b3261e;font-weight:600}
@media (max-width:560px){.rs-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}

/* --- module: portal / ring.html --- */
.ring-relaystrip{display:flex;gap:.6rem;flex-wrap:wrap}
.ring-relay{padding:.35rem .6rem;border:1px solid #dfe3e6;border-radius:8px;background:#fafbfc}
.ring-relay.is-off{opacity:.7}
.ring-alarmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem}
.ring-alarm-card{border:1px solid #dfe3e6;border-radius:10px;padding:.6rem .9rem;background:#fafbfc}
.ring-alarm-card.mode-away{border-color:#c98b8b;background:#fbf4f4}
.ring-alarm-card.mode-home{border-color:var(--sage);background:#fbfaf2}
.ring-alarm-card.mode-disarmed{border-color:#9bbf9b;background:#f3fbf3}
.ring-alarm-details{margin:0}
.ring-alarm-details summary{list-style:none;cursor:pointer}
.ring-alarm-details summary::-webkit-details-marker{display:none}
.ring-alarm-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ring-alarm-name{font-weight:700;font-size:1.05rem}
.ring-mode-badge{font-weight:700;padding:.3rem .7rem;border-radius:20px;background:#eef1f3;white-space:nowrap}
.ring-mode-badge.mode-away{background:#e7c3c3}.ring-mode-badge.mode-home{background:#e6e3b6}.ring-mode-badge.mode-disarmed{background:#c8e6c8}
.ring-alarm-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.ring-btn{cursor:pointer;border:1px solid var(--lightblue);background:#eaf3f8;border-radius:8px;padding:.5rem .9rem;font-weight:600}
.ring-btn:hover{background:#dceaf2}
.ring-btn-sm{padding:.3rem .6rem;font-size:.85rem}
.ring-alarm-title{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.ring-rename-pencil{border:none;background:none;cursor:pointer;font-size:.85rem;opacity:.55;padding:0 .15rem}
.ring-rename-pencil:hover{opacity:1}
.ring-rename-form{display:flex;gap:.35rem;align-items:center}
.ring-rename-input{border:1px solid var(--lightblue);border-radius:6px;padding:.25rem .4rem;font-size:.9rem;max-width:150px}
.ring-sensors{margin-top:.8rem;border-top:1px solid #e7ebee;padding-top:.6rem}
.ring-sensors-h{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7580;margin-bottom:.55rem}
.ring-sensors-count{font-weight:700;font-size:.72rem;color:#5b6570;background:#eef1f3;border-radius:20px;padding:.05rem .5rem}
.ring-sensorgroups{display:flex;flex-direction:column;gap:.7rem}
.ring-sgroup{background:#fff;border:1px solid #e3e7ea;border-radius:9px;padding:.5rem .65rem .55rem}
.ring-sgroup-h{display:flex;align-items:center;gap:.4rem;margin:0 0 .4rem;font-size:.82rem;font-weight:700;color:var(--slate)}
.ring-sgroup-ic{font-size:1rem;line-height:1}
.ring-sgroup-name{flex:1 1 auto}
.ring-sgroup-count{font-weight:700;font-size:.7rem;color:#5b6570;background:#eef1f3;border-radius:20px;padding:.05rem .45rem}
.ring-sgroup-alert{font-weight:700;font-size:.7rem;color:#fff;background:#c25a5a;border-radius:20px;padding:.05rem .5rem}
.ring-sensorlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.18rem}
.ring-sensor{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.28rem .35rem;border-radius:6px}
.ring-sensor:nth-child(even){background:#f7f9fa}
.ring-sensor.is-faulted{background:#fbf0f0}
.ring-sensor-ic{font-size:.95rem;line-height:1;flex:0 0 auto;width:1.2rem;text-align:center}
.ring-sensor-name{font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring-sensor-state{flex:0 0 auto;font-size:.78rem;font-weight:600;padding:.08rem .5rem;border-radius:20px;background:#eef1f3;color:#6b7580}
.ring-sensor-state.state-ok{background:#dcefdc;color:#2f6b2f}
.ring-sensor-state.state-open{background:#f1c9c9;color:#a23232}
.ring-sensor-state.state-na{background:#eef1f3;color:#8a939c}
.ring-sensor-tamper{flex:0 0 auto;font-size:.72rem;font-weight:700;color:#fff;background:#c25a5a;border-radius:20px;padding:.05rem .5rem}
.ring-sensor-batt{flex:0 0 auto;font-size:.76rem;color:#6b7580;white-space:nowrap}
.ring-sensor-batt.is-low{color:#a23232;font-weight:700}
.ring-sensors-empty{margin:.2rem 0 0;font-style:italic}
@media(max-width:640px){.ring-alarmgrid{grid-template-columns:1fr}.ring-alarm-details:not([open]) .ring-alarm-btns{display:none}.ring-alarm-details:not([open]) .ring-sensors{display:none}.ring-sensor-name{white-space:normal}}

/* --- module: portal / jewelry_wishlist.html --- */
.wish-flash{margin:0 0 1rem}
.wish-flash-row{padding:.55rem .85rem;border-radius:9px;font-size:.9rem;margin-bottom:.4rem;font-weight:600}
.wish-flash-success{background:#dcefdc;color:#1f5e1f;border:1px solid #b9ddb9}
.wish-flash-error{background:#f7dada;color:#9a3b3b;border:1px solid #e7bcbc}
.wish-add{margin-bottom:1.1rem;border:1px solid #e0dfd4;border-radius:12px;background:#fbfaf4;padding:0}
.wish-add-summary{cursor:pointer;font-weight:700;padding:.7rem 1rem;color:var(--slate);list-style:none}
.wish-add-summary::-webkit-details-marker{display:none}
.wish-add[open] .wish-add-summary{border-bottom:1px solid #e8e7dc}
.wish-add-form{padding:.9rem 1rem 1.1rem}
.wish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem .9rem;margin-bottom:.8rem}
.wish-field{display:flex;flex-direction:column;font-size:.84rem;font-weight:600;color:#555;gap:.25rem}
.wish-field-wide{grid-column:1 / -1}
.wish-field input,.wish-field textarea{border:1px solid #ccc;border-radius:8px;padding:.5rem .6rem;
  font-size:.92rem;font-weight:400;font-family:inherit;background:#fff}
.wish-field input:focus,.wish-field textarea:focus{outline:2px solid var(--lightblue);border-color:#9cc0d2}
.wish-req{color:#9a3b3b}
.wish-add-btn{border:none;border-radius:9px;background:#1d6b4f;color:#fff;font-weight:700;
  font-size:.92rem;padding:.55rem 1.2rem;cursor:pointer}
.wish-add-btn:hover{background:#155139}
@media (max-width:768px){.wish-grid{grid-template-columns:1fr}}

/* --- module: portal / customer_detail.html --- */
.sv-table{width:100%;border-collapse:collapse}
.sv-table th,.sv-table td{padding:.5rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.sv-table thead th{font-size:.8rem;color:#667;border-bottom:2px solid #ddd}
.sv-badge{display:inline-block;font-size:.68rem;padding:.05rem .4rem;border-radius:9px;color:#fff;background:#8a9}
.sv-badge.sv-email{background:#3b7}.sv-badge.sv-phone{background:#39c}.sv-badge.sv-name{background:#c93}
@media(max-width:640px){
.sv-table thead{display:none}
.sv-table,.sv-table tbody,.sv-table tr,.sv-table td{display:block;width:100%}
.sv-table tr{border:1px solid #e6e6e6;border-radius:8px;margin:.5rem 0;padding:.2rem .4rem}
.sv-table td{border:none;text-align:right;display:flex;justify-content:space-between;gap:1rem}
.sv-table td::before{content:attr(data-label);color:#778;font-size:.8rem;text-align:left}
}

/* --- module: portal / damaged_jewelry.html --- */
.dj-brand{font-size:1.05rem;margin:1.4rem 0 .4rem;color:var(--slate)}
.dj-count{background:#f4f3ea;border:1px solid var(--sage);border-radius:999px;padding:0 .5rem;font-size:.8rem;color:#7c7c74;margin-left:.3rem}
.dj-table{width:100%;border-collapse:collapse;margin-bottom:.6rem}
.dj-table th,.dj-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.9rem;vertical-align:top}
.dj-table th.num,.dj-table td.num{text-align:right}
.dj-table thead th{font-size:.76rem;text-transform:uppercase;color:#6b6b66}
@media(max-width:760px){.dj-table thead{display:none}.dj-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}.dj-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0}.dj-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}}

/* --- module: portal / _feedback_widget.html --- */
.ecwfb-fab{position:fixed;right:18px;bottom:18px;z-index:9000;width:52px;height:52px;border-radius:50%;border:none;background:var(--slate);color:#fff;font-size:1.45rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ecwfb-modal{position:fixed;inset:0;z-index:9001;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:1rem}
.ecwfb-modal[hidden]{display:none}
.ecwfb-box{background:#fff;border-radius:14px;padding:1.4rem 1.5rem;max-width:440px;width:100%;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}
.ecwfb-h{font-size:1.15rem;color:var(--slate);margin:.1rem 0 .2rem}
.ecwfb-sub{color:#7c7c74;font-size:.85rem;margin:0 0 .8rem}
.ecwfb-kind{display:flex;gap:1.2rem;margin:0 0 .6rem;font-size:.92rem;color:var(--slate)}
.ecwfb-box textarea{width:100%;box-sizing:border-box;border:1px solid #d8d8cf;border-radius:8px;padding:.6rem;font:inherit}
.ecwfb-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.7rem}
.ecwfb-cancel{background:#eee;border:none;border-radius:8px;padding:.55rem 1rem;cursor:pointer;font:inherit}
.ecwfb-send{background:var(--slate);color:#fff;border:none;border-radius:8px;padding:.55rem 1.1rem;font-weight:600;cursor:pointer;font:inherit}
.ecwfb-thanks{color:#2c6b3f;font-weight:600;text-align:center;margin:.4rem 0 0}

/* --- module: components / signature_pad.html --- */
.sigpad-wrap{margin:1rem 0}
.sigpad-label{display:block;font-weight:600;color:var(--slate);margin-bottom:.4rem}
.sigpad-box{position:relative;border:2px dashed #b8b9ac;border-radius:12px;background:#fff;
  height:180px;touch-action:none;overflow:hidden}
.sigpad-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.sigpad-hint{position:absolute;left:12px;bottom:8px;color:#b0b2a6;font-size:.82rem;pointer-events:none}
.sigpad-clear{margin-top:.55rem;background:#eef0e8;border:1px solid #cfd1c2;color:#4a4f44;
  border-radius:8px;padding:.4rem .9rem;font-size:.88rem;cursor:pointer}
.sigpad-clear:hover{background:#e3e6da}

/* deposits: person filter + sortable headers (Brad 2026-06-10) */
.dep-sort{color:inherit;text-decoration:none}
.dep-sort:hover{text-decoration:underline}
.dep-people{margin-top:.4rem}
a.dep-sub{text-decoration:none;color:inherit}
a.dep-sub:hover{text-decoration:underline}
.dep-chip-amt{opacity:.75;font-weight:600;margin-left:.2rem}
.dep-headline{font-size:1.05rem;margin:.5rem 0 .6rem}
.dep-notes{list-style:none;margin:.2rem 0 0;padding:0;max-width:62rem}
.dep-notes li{font-size:var(--fs-sm);color:var(--muted);margin-bottom:.45rem;line-height:1.5}
.dep-notes li.dep-note-warn{color:#7a4a12;background:#fff7e3;border:1px solid #ecd9a6;border-radius:9px;padding:.5rem .7rem}

/* --- collapsed-by-default chore row (Brad 2026-06-11): name first, status below, dot for never-done --- */
.chore-head{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.chore-sub{margin-top:.25rem;display:flex;align-items:center;gap:.5rem}
.never-dot{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--slate)}
.never-flag{display:inline-block;margin:0 0 .5rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--slate);border-radius:20px;padding:.18rem .6rem}
.ci-last{margin:0 0 .4rem;font-size:.86rem;color:var(--slate)}
.ci-last.muted{color:var(--muted)}
/* --- signed-off + undo row (auto-hides) --- */
.chore.signed-off{border-left-color:var(--ok);background:#f6faf4}
.so-main{display:flex;align-items:center;gap:.5rem;min-width:0}
.so-check{flex:none;color:var(--ok);font-weight:800;font-size:1.1rem}
.so-label{font-size:.82rem;font-weight:600;color:var(--ok)}
.btn-undo{flex:none;font:inherit;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:.55rem 1.1rem;cursor:pointer}
.btn-undo:hover{background:#ece9db}
.chore.so-hiding{opacity:0;max-height:0!important;padding-top:0;padding-bottom:0;margin:0;overflow:hidden;transition:opacity .35s ease,max-height .35s ease,padding .35s ease,margin .35s ease}


/* ===== THE dashboard top row — the ONE definition (WO-F 2026-07-27) =====
   Brad 2026-06-11 stacked these vertically (To-do · Sign-offs · Bookings) because the
   side-by-side widths worked on neither desktop nor mobile. That decision stands; what
   changed is that it no longer needs `!important` to win, because the two earlier layers
   it was fighting have been deleted. It is last in the file, so it wins on order.

   ⚠️ IT DELIBERATELY CARRIES NO max-width, and that was TESTED, not assumed. The work
   order called for capping it at 880px "so the top row and the tile grid below it line
   up" — screenshots at 1920 proved the opposite: the home page's tile rows are NOT inside
   an 880px wrapper, they run to about 1580px. Capping the top row therefore left it
   floating, centred, misaligned with everything beneath it — worse than before. These
   cards are full-width by Brad's 2026-06-11 design; the "row of 3 items spanning the
   page" he objected to is a sparse TILE row, which is handled by `.stat-grid` and the
   tool-grid caps instead. */
.dash-top{display:flex;flex-direction:column;align-items:stretch;gap:1rem;
  margin-bottom:1.4rem}
.dash-top > *{flex:none;width:100%;max-width:none;min-width:0;margin-bottom:0}
.todo-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;
  padding:0 .5rem;margin-left:.35rem;border-radius:20px;background:var(--overdue,#c0552e);color:#fff;
  font-weight:800;font-size:.92rem;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.todo-block{border-left-width:5px}
.todo-block:has(.todo-count){border-left-color:var(--overdue,#c0552e)}

/* --- Piercings Offered (catalog matrix + mobile rows) --- */
.prc-cat{margin:1.6rem 0 .45rem}
.prc-tog{min-width:2.2rem}
.prc-tog-ro{display:inline-block;min-width:2.2rem;text-align:center;color:var(--muted)}
.prc-warn{color:#8a6d1e;font-size:.78rem;font-weight:700}
.prc-cats{max-width:560px}
.prc-cats input:not([type=checkbox]){width:100%;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.prc-inline{display:inline-block;margin:0 .35rem .45rem 0}
.bk.prc-row>summary{grid-template-columns:1fr auto 1rem}
.prc-auto{opacity:.45}
.prc-auto{opacity:.45}

/* ===== Jewelry order receiving (2026-06-12): clean quantity inputs + $/% pill toggle ===== */
/* Plain quantity boxes — no number-spinner arrows; whole numbers typed or blank. */
.qty-plain{width:4.5rem;text-align:right;-moz-appearance:textfield;appearance:textfield}
.qty-plain::-webkit-inner-spin-button,.qty-plain::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Side-by-side pill toggle (radio pair), like Lightspeed's $/% discount picker */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:.3rem .7rem;font-size:var(--fs-sm);font-weight:700;cursor:pointer;background:#fff;color:var(--slate)}
.seg label + label{border-left:1px solid var(--line)}
.seg input:checked + label{background:var(--slate);color:#fff}
/* Money rows appended under the items table */
.jo-money-row td{border-top:1px solid var(--line);background:#fafafa}
.jo-money-row td:first-child{font-weight:600}
/* Receipt parse badges */
.rcpt-ok{color:var(--ok);font-weight:700}
.rcpt-bad{color:var(--danger);font-weight:700}
.rcpt-wait{color:#7a5d12;font-weight:700}

/* expandable line items + tracking ETA (2026-06-12 night) */
.jo-exp{border:1px solid var(--line);background:#fff;border-radius:6px;width:1.6rem;height:1.6rem;cursor:pointer;color:var(--slate);font-size:.8rem;line-height:1}
.jo-detail-row>td{background:#f6f8f7;border-top:0}
.jo-eta{display:inline-block;background:#dcefdc;color:var(--ok);font-weight:700;padding:.25rem .6rem;border-radius:8px}

/* ---- Sign-Off board: search filter + completion-history popup (2026-06-14) ---- */
.board-search{margin:.4rem 0 .9rem}
.board-search input{width:100%;max-width:420px;font:inherit;padding:.5rem .75rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--slate)}
.board-search input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 2px rgba(194,191,139,.3)}

/* "View history" link inside an expanded chore */
.ci-history{display:inline-block;margin-top:.5rem;font:inherit;font-size:.8rem;font-weight:600;
  background:none;border:none;color:var(--slate);text-decoration:underline;cursor:pointer;padding:.15rem 0}
.ci-history:hover{color:var(--sage-d)}

/* History modal (mirrors the portal .suggest-modal pattern) */
.so-modal{position:fixed;inset:0;background:rgba(51,60,69,.5);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.so-modal[hidden]{display:none}
.so-modal-box{position:relative;background:#fff;border-radius:16px;padding:1.2rem 1.3rem;
  max-width:520px;width:100%;max-height:80vh;overflow:auto;box-shadow:0 18px 50px rgba(51,60,69,.2)}
.so-modal-x{position:absolute;top:.6rem;right:.7rem;background:none;border:none;font-size:1.1rem;
  line-height:1;color:var(--muted);cursor:pointer}
.so-modal-x:hover{color:var(--slate)}
.so-hist-title{margin:.1rem 0 .2rem;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;color:var(--slate)}
.so-hist-count{margin:0 0 .7rem;font-size:.85rem}
.so-hist-list{list-style:none;margin:0;padding:0}
.so-hist-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.5rem .2rem;border-bottom:1px solid var(--line);font-size:.9rem}
.so-hist-row:last-child{border-bottom:none}
.so-hist-date{font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.so-hist-who{color:var(--slate)}
.so-hist-note{color:var(--muted);font-style:italic;flex-basis:100%}
.so-hist-tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:.1rem .4rem;border-radius:999px;background:#eee;color:var(--muted)}
.so-hist-tag.tag-redo{background:var(--overdue-bg,#f6e0dd);color:var(--overdue,#9c3b2e)}
.so-hist-tag.tag-live{background:var(--ok-bg,#e3efe1);color:var(--ok,#3d6b3a)}
.so-hist-more{padding:.6rem .2rem 0;border-bottom:none}
.btn-mini{font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .8rem;cursor:pointer;
  background:var(--cream);border:1px solid var(--line);border-radius:8px;color:var(--slate)}
.btn-mini:hover{border-color:var(--sage)}
.so-hist-tag.tag-baseline{background:var(--lightblue);color:var(--slate)}

/* ---- Studio jewelry worksheet: match clarity / price-diff / unlinked highlight (2026-06-21) ---- */
/* A line matched to neither a catalogue product nor a custom order won't move stock on receive —
   highlight the whole row (warning tint + left accent) so it's impossible to miss. Calm states
   (stock / custom) get no row treatment. */
.jo-unlinked{background:var(--due-bg);box-shadow:inset 4px 0 0 var(--due)}
.jo-unlinked td{background:transparent}
/* Per-line stock badges: tells you BEFORE receiving whether the line will update inventory.
   Compact, fixed, never wraps — sits inline beside the product name without growing the row. */
.jo-badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.01em;
  padding:.05rem .4rem;border-radius:999px;vertical-align:middle;margin-left:.35rem;
  white-space:nowrap;line-height:1.35}
.jo-badge-stock{background:var(--ok-bg);color:var(--ok)}
.jo-badge-custom{background:var(--lightblue);color:var(--slate)}
.jo-badge-unlinked{background:var(--danger-bg);color:var(--danger)}
/* Supplier price-diff: the cost paid (from the receipt) differs from our system supplier cost.
   Purely visual — a subtle red underline on the cost cell + a small red "system $Y" note inline
   under the input; hidden when equal or unlinked. */
.cost-diff{box-shadow:inset 0 -2px 0 var(--danger)}
.cost-diff-note{display:block;color:var(--danger);font-weight:600;font-size:.7rem;margin-top:.1rem;
  white-space:nowrap}

/* Studio worksheet table — condense so each line reads on one row (Brad 2026-06-21). */
#jo-items.pay-table th,#jo-items.pay-table td{padding:.32rem .45rem}
#jo-items.pay-table{font-size:.86rem}
#jo-items .qty-plain{padding:.3rem .4rem}

/* Inbound packages: compact add row + tidy per-package actions. */
.jo-addpkg{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0 .2rem}
.jo-addpkg input[type=text]{flex:0 1 16rem;min-width:11rem;padding:.4rem .6rem;
  border:1px solid var(--line);border-radius:8px;font:inherit}
.jo-addpkg select{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.jo-pkg-actions{display:flex;gap:.6rem;align-items:center;margin-top:.2rem;flex-wrap:wrap}
.btn-x{font:inherit;font-size:.78rem;color:var(--muted);background:none;border:none;
  cursor:pointer;padding:0}
.btn-x:hover{color:var(--danger)}

/* ===== "Boxes on this order" cards — per-shipment order page (2026-07-11, #613) =====
   One card per physical box, color-striped by state: incoming (light blue), counting
   (info blue), ready/review (amber), attention (red), done/put-away (sage, collapsed). */
.jo-box{border:1px solid var(--line);border-left:6px solid #c6ccd2;border-radius:10px;
  background:#fff;margin:0 0 .7rem}
.jo-box-incoming{border-left-color:var(--lightblue)}
.jo-box-delivered{border-left-color:#3d6b80}
.jo-box-counting{border-left-color:#3d6b80}
.jo-box-review{border-left-color:#e2b93b}
.jo-box-ready{border-left-color:#e2b93b}
.jo-box-attention{border-left-color:var(--danger)}
.jo-box-done{border-left-color:var(--sage)}
.jo-box-head{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;padding:.6rem .9rem}
.jo-box-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.15rem;
  color:var(--slate);white-space:nowrap}
.jo-box-trk{font-variant-numeric:tabular-nums}
.jo-box-stat{margin-left:auto;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.jo-box-body{padding:0 .9rem .7rem}
details.jo-box>summary{list-style:none;cursor:pointer}
details.jo-box>summary::-webkit-details-marker{display:none}
.jo-box-caret{color:var(--muted);font-size:.75rem;transition:transform .15s;display:inline-block}
details.jo-box[open] .jo-box-caret{transform:rotate(90deg)}
/* vendor's expected-items list (from the shipping email) inside a box card */
.jo-exp-list{background:#eef4f7;border-radius:8px;padding:.55rem .7rem;font-size:.85rem;
  margin:.2rem 0}
.jo-exp-list ul{margin:.3rem 0 0;padding-left:1.15rem}
.jo-exp-list li{margin:.1rem 0}
/* count-sheet hint pill — what the shipping email says is in the box (never a count) */
.jo-hint{display:inline-block;background:var(--lightblue);color:var(--slate);border-radius:999px;
  padding:.05rem .45rem;font-size:.72rem;font-weight:700;white-space:nowrap;vertical-align:middle}
/* "Still owed by the vendor" strip */
.jo-owed-strip{border-left:6px solid #e2b93b;border-radius:10px}
/* the collapsed full-worksheet toggle */
.jo-worksheet-toggle{cursor:pointer;list-style:none}
.jo-worksheet-toggle::-webkit-details-marker{display:none}
@media(max-width:760px){
  .jo-box-stat{margin-left:0;flex-basis:100%;justify-content:flex-start}
  .jo-box-title{white-space:normal}
}

/* --- Weekly Buy Plan (/portal/reorder/) — expandable vendor groups --- */
.rd-vendor{margin:.6rem 0}
.rd-vendor>summary{cursor:pointer;padding:.15rem 0;font-size:var(--fs-base);list-style-position:inside}
.rd-vendor[open]>summary{margin-bottom:.55rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.rd-vendor .data-table{margin-top:.1rem}

/* Vendor-rules per-product pack/spec editor (#390 / product UoM, 2026-06-23) */
.vr-grid{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:.3rem 0}
.vr-grid label{display:flex;flex-direction:column;font-size:.8rem;color:var(--slate);gap:.15rem}
.vr-grid input,.vr-grid select{padding:.3rem;border:1px solid var(--line);border-radius:6px;max-width:9rem}
.vr-dims{display:flex;gap:.25rem}
.vr-dims input{max-width:3.2rem}

/* --- Jewelry bags to remove (/portal/jewelry-orders/bags-to-remove/) — Brad 2026-06-24 --- */
.bags-summary{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}
.bags-h{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.3rem;
  margin:1.3rem 0 .3rem;display:flex;align-items:center;gap:.5rem}
.bags-n{display:inline-block;background:var(--slate);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:700;padding:.05rem .5rem;font-family:"Raleway",sans-serif}
.bags-sort{margin-left:auto;font-weight:400;color:var(--muted)}
.bags-sort a{color:var(--muted);text-decoration:none}
.bags-sort a.active{color:var(--slate);font-weight:700;text-decoration:underline}
.bags-ck{width:5.5rem;text-align:center}
.bags-checkbox{width:1.3rem;height:1.3rem;cursor:pointer;accent-color:var(--sage)}
.bags-done{opacity:.6}
.bags-flagged{background:#fff7e3}
.chip-warn{background:#fff7e3;border-color:#ecd9a6;color:var(--warn)}
.bags-flag>summary{display:inline-block;list-style:none;cursor:pointer}
.bags-flag>summary::-webkit-details-marker{display:none}
.bags-flagform{margin-top:.45rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.bags-flagform input[type=text]{padding:.4rem .55rem;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-weight:400;min-width:210px}
.bags-removed-wrap>summary{cursor:pointer;list-style:none}
.bags-removed-wrap>summary::-webkit-details-marker{display:none}
@media(max-width:720px){
  .bags-table thead{display:none}
  .bags-table tbody tr{display:block;border:1px solid var(--line);border-radius:10px;
    margin-bottom:.6rem;padding:.35rem .55rem;background:#fff}
  .bags-table tbody td{display:flex;justify-content:space-between;gap:1rem;
    border:none;padding:.3rem .15rem;text-align:right}
  .bags-table tbody td::before{content:attr(data-label);font-weight:700;
    color:var(--muted);text-align:left}
  .bags-ck{width:auto}
}


/* ===== JEWELRY-ORDER MOBILE STACK (James/2026-06-28: detail page was h-scroll hell on phones) =====
   Bring the jewelry-order tables onto the same stacked-card mobile pattern the rest of the portal
   uses (thead hidden; each row a card; each cell a label:value flex line via data-label). Applies to
   any table marked .jo-stack — the studio worksheet (#jo-items), the custom-items table, etc. */
@media(max-width:760px){
  .report-block .jo-narrow{overflow:visible;width:auto;min-width:0;margin:0}
  table.jo-stack{display:block;width:100%;font-size:.92rem}
  table.jo-stack thead{display:none}
  table.jo-stack tbody{display:block;width:100%}
  table.jo-stack tbody tr{display:block;border:1px solid var(--line);border-radius:10px;
      margin:0 0 .55rem;padding:.45rem .65rem;background:#fff}
  table.jo-stack tbody tr > td{display:flex;justify-content:space-between;align-items:center;
      gap:.9rem;border:none;padding:.3rem 0;text-align:right;white-space:normal;min-height:1.6rem}
  table.jo-stack tbody tr > td[data-label]::before{content:attr(data-label);font-weight:600;
      color:var(--muted);text-align:left;flex:0 0 auto;text-transform:none;letter-spacing:0}
  table.jo-stack td.jo-item-cell{display:block;text-align:left;font-weight:600;font-size:1rem;
      padding:.1rem 0 .35rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
  table.jo-stack td.jo-ctl{display:inline-flex;width:auto;padding:.1rem .6rem .1rem 0;text-align:left;min-height:0}
  table.jo-stack input.qty-plain{width:6rem;max-width:48%;text-align:right}
  table.jo-stack tbody tr.jo-detail-row{border-top:none;border-radius:0 0 10px 10px;
      margin-top:-.6rem;padding:.2rem .6rem .45rem}
  table.jo-stack tbody tr.jo-detail-row > td{display:block;text-align:left;padding:.15rem 0;min-height:0}
  table.jo-stack tbody tr.jo-sep{border:none;background:transparent;padding:.35rem 0 .1rem;margin:0}
  table.jo-stack tbody tr.jo-sep > td{display:block;text-align:left;background:#f5f6f3;
      border-radius:6px;padding:.35rem .5rem;font-weight:600}
  table.jo-stack tbody tr.jo-row-warn{border-color:#e0b400}
}


/* --- water-quality / value-reading sign-offs --- */
.value-row .value-form{padding:.5rem .2rem}
.value-row .value-q{font-size:var(--fs-sm);margin-bottom:.45rem}
.value-entry{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.value-input{width:7.5rem;max-width:55%;padding:.45rem .55rem;font-size:1rem;
  border:1px solid var(--line);border-radius:8px;font-variant-numeric:tabular-nums}
.value-unit{color:var(--slate);font-weight:600;font-size:var(--fs-sm)}
.value-range{font-size:.78rem;color:#778;margin-bottom:.4rem}
.value-note{width:100%;max-width:22rem;padding:.4rem .5rem;margin-bottom:.4rem;
  border:1px solid var(--line);border-radius:8px}
.value-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ci-reading{margin:.2rem 0;color:var(--slate)}

.wq-stats{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1rem}
.wq-stat{padding:.55rem .8rem;min-width:6rem;text-align:center}
.wq-stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#7a8288}
.wq-stat-num{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--slate)}
.wq-stat-num.alert{color:#b3261e}
.wq-stat-sub{font-size:.74rem;color:#778}
@media(max-width:760px){
  .wq-table thead{display:none}
  .wq-table tr{display:block;border:1px solid #eee;border-radius:10px;margin-bottom:.6rem;padding:.4rem .6rem}
  .wq-table td{display:flex;justify-content:space-between;border:none;padding:.25rem 0;gap:1rem}
  .wq-table td::before{content:attr(data-label);font-weight:600;color:#6b6b66}
  .wq-table td.num{text-align:right}
}


/* --- jo worksheet desktop column sizing (Item gets the slack; numerics shrink to data) --- */
@media(min-width:761px){
  .jo-narrow-items{width:100%}
  #jo-items{width:100%;table-layout:auto}
  #jo-items th,#jo-items td{vertical-align:middle}
  #jo-items td.jo-item-cell{white-space:normal;width:100%;line-height:1.25}
  #jo-items th.num,#jo-items td.num{width:1%;white-space:nowrap}
  #jo-items thead th:nth-child(4){white-space:nowrap}
  #jo-items td.jo-vendor{width:9rem;white-space:normal;overflow-wrap:normal;word-break:normal;vertical-align:middle}
  #jo-items .jo-ctl{width:1%;white-space:nowrap}
  #jo-items .jo-cost{width:5rem}
  #jo-items .jo-ship{width:3.4rem}
}

/* --- inbound packages: unobtrusive "add tracking" toggle + tiny stop-watch --- */
.jo-addtrk{margin-top:.5rem}
.jo-addtrk>summary{display:inline-block;cursor:pointer;font-size:.8rem;color:var(--steel,#27506a);list-style:none}
.jo-addtrk>summary::-webkit-details-marker{display:none}
.jo-addtrk>summary:hover{text-decoration:underline}
.jo-addtrk .jo-addpkg{margin-top:.45rem}
.jo-pkg-sub{display:flex;align-items:center;gap:.7rem;margin:.15rem 0 0}
.jo-trk-x{background:none;border:none;color:#9a9a92;font-size:.74rem;cursor:pointer;padding:0;text-decoration:underline}
.jo-trk-x:hover{color:#a33}


/* --- voicemail --- */
.vm-list{display:flex;flex-direction:column;gap:.6rem}
.vm-msg{border:1px solid var(--line,#e7e4d8);border-radius:12px;padding:.7rem .85rem;background:#fff}
.vm-msg.vm-unheard{border-left:4px solid var(--steel,#27506a);background:#fbfdfe}
.vm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.vm-who{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.vm-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--steel,#27506a);display:inline-block;flex:0 0 auto}
.vm-name{font-weight:700;color:var(--slate,#333c45)}
.vm-num{color:var(--steel,#27506a);font-size:.85rem;text-decoration:none}
.vm-num:hover{text-decoration:underline}
.vm-meta{display:flex;gap:.85rem;white-space:nowrap}
.vm-dur{font-variant-numeric:tabular-nums}
.vm-audio{width:100%;margin:.55rem 0 .45rem;height:40px}
.vm-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.vm-actions form{display:inline}
.vm-actions form[hidden]{display:none}
.vm-del{color:#a33}
.vm-chip-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .35rem;border-radius:999px;background:#b3261e;color:#fff;font-size:.7rem;font-weight:800;margin-left:.2rem;vertical-align:middle}
.chip.vm-has-new{font-weight:700}
@media(max-width:760px){.vm-meta{width:100%;justify-content:space-between}}


/* --- voicemail transcripts --- */
.vm-transcript{margin:.1rem 0 .5rem}
.vm-trans>summary,.vm-trans-head{font-size:.82rem;color:var(--slate,#333c45);cursor:pointer}
.vm-trans>summary{list-style:none}
.vm-trans>summary::-webkit-details-marker{display:none}
.vm-trans-text{margin:.3rem 0 0;font-size:.9rem;background:#f7f7f3;border-left:3px solid var(--line,#e7e4d8);padding:.4rem .6rem;border-radius:0 8px 8px 0;white-space:pre-wrap}

/* ---- Jewelry order Documents table (2026-07-06 receiving-workflow cleanup) ---- */
.jo-doc-table td{vertical-align:middle}
.jo-doc-table select{font-size:.78rem;max-width:11rem}
.jo-doc-flags td{background:#fff7e3;font-size:.78rem}
.jo-doc-suggest td{background:#e7f0f7;font-size:.82rem}

/* --- v5 per-box receiving (2026-07-11): the shipping label IS the box's identity --- */
.jo-box-label{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;
  font-size:1.15rem;color:var(--slate);white-space:nowrap}
.jo-box-label .jo-tail{font-size:1.45rem;letter-spacing:.05em;color:var(--slate);
  background:#fdf3d7;border-radius:8px;padding:0 .45rem;font-variant-numeric:tabular-nums}
/* "check the label first" banner inside a counting card */
.jo-checkfirst{background:#fdf3d7;border-radius:8px;padding:.55rem .7rem;
  font-size:.9rem;margin:0 0 .6rem}
/* per-box count sheet — a details fold; JS keeps one open at a time */
details.jo-sheet>summary{list-style:none;cursor:pointer;padding:0 .9rem .55rem;
  color:var(--steel,#27506a)}
details.jo-sheet>summary::-webkit-details-marker{display:none}
details.jo-sheet[open]>summary{display:none}
@media(max-width:760px){
  .jo-box-label{white-space:normal}
  .jo-box-label .jo-tail{font-size:1.25rem}
}

/* --- Artist Performance (Brad-only page, 2026-07-11) --- */
.perf-pill{display:inline-block;border-radius:999px;padding:.05rem .55rem;font-size:.82rem;font-weight:700}
.perf-pill.p-ok{background:#e8f3ea;color:#2f7d43}
.perf-pill.p-warn{background:#fdf3d7;color:#9a6d00}
.perf-pill.p-bad{background:#fae9e9;color:#a13232}
.perf-flag{background:#fff;border:1px solid var(--line);border-left:5px solid #a13232;
  border-radius:9px;padding:.6rem .9rem;margin:.5rem 0;font-size:.92rem}
.perf-flag.f-warn{border-left-color:#e2b93b}
.perf-bad{color:#a13232;font-weight:700}
.perf-warn{color:#9a6d00;font-weight:700}

/* ---- Invoices tab (billing/list.html, 2026-07-13 live cutover) ---- */
.bi-row{cursor:pointer}
.bi-row:hover td{background:var(--cream)}
.bi-caret{color:#9a9a90;font-size:.8rem;text-align:right}
.bi-warn{background:#fdf3e2;color:#9a6d00}
.bi-detail>td{background:#fbfbf7;border-bottom:1px solid #eee}
.bi-detail-grid{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;padding:.35rem .2rem;font-size:.92rem}
.bi-detail-grid>div{min-width:220px}
.bi-lines{margin:.25rem 0 0 1.1rem;padding:0}
.bi-lines li{margin:.1rem 0}
.bi-actions{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap;margin-left:auto}
.bi-actions form{display:inline}
@media(max-width:760px){.bi-detail>td{display:block}.bi-caret{display:none!important}}

/* ---- Artist Performance red flags (Brad-only, 2026-07-13) ---- */
.perf-redflag-row td{background:#fdf0f0}
.perf-redflag-strip{border-left-color:#a13232;background:#fdf3f3}

/* ---- Waivers: the in-house form's front door (2026-07-14) ---- */
.wv-form-card{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:1rem;border-left:4px solid var(--sage)}
.wv-form-main{flex:1 1 22rem;min-width:0}
.wv-form-main h2{margin:0 0 .25rem;font-size:1.05rem}
.wv-form-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0 .5rem}
.wv-form-qr{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.wv-form-qr img{border:1px solid var(--line);border-radius:8px;background:#fff;padding:4px}
.sv-badge.wv-ours{background:var(--sage);color:var(--slate)}
.sv-badge.wv-minor{background:#c93}
@media (max-width:640px){.wv-form-card{flex-direction:column;align-items:flex-start}
  .wv-form-qr{align-self:center}}

/* ---- Manufacturer sync: crawl health (2026-07-14) ---- */
.ms-health{margin:.35rem 0 .5rem;padding:.4rem .6rem;border-radius:8px;font-size:var(--fs-sm);
  background:#f2f5f7;border:1px solid var(--line);color:var(--slate)}
.ms-health-warn{background:#fff7e3;border-color:#ecd9a6}
.ms-health-bad{background:var(--danger-bg);border-color:#e7bcbc;color:var(--danger)}
.ms-health-flag{color:var(--danger);font-weight:600}
.ms-health-cfg{display:block;margin-top:.15rem;font-size:.72rem;opacity:.75}

/* ── survey reporting (feedback app) ─────────────────────────────────────────── */
.page-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 1.2rem}
.btn-small{padding:.35rem .8rem;font-size:.82rem}
.survey-mint{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end;margin-top:.4rem}
.survey-mint label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.survey-mint select{padding:.4rem .6rem;border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--slate)}
.pill-ok{display:inline-block;font-size:.78rem;font-weight:700;color:var(--ok);
  background:var(--ok-bg);border-radius:999px;padding:.1rem .55rem}
.pill-warn{display:inline-block;font-size:.78rem;font-weight:700;color:var(--warn,#6f5512);
  background:var(--warn-bg,#fbf0c4);border-radius:999px;padding:.1rem .55rem}
.wordbreak{word-break:break-all}

/* ── customer communications timeline (customer_detail) ─────────────────────── */
.comm-log{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 1.2rem}
.comm-item{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.comm-item>summary{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;cursor:pointer;
  list-style:none;font-size:.9rem}
.comm-item>summary::-webkit-details-marker{display:none}
.comm-item>summary:hover{background:var(--cream,#faf9f4)}
.comm-item[open]>summary{border-bottom:1px solid var(--line);background:var(--cream,#faf9f4)}
.comm-icon{flex:none;font-size:1rem}
.comm-when{flex:none;white-space:nowrap}
.comm-label{flex:none;font-weight:700;color:var(--slate)}
.comm-preview{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.comm-body{padding:.7rem .9rem;font-size:.92rem;line-height:1.5;color:var(--slate)}
.comm-subj{font-weight:700;margin-bottom:.35rem}
.comm-meta{margin-top:.6rem}
@media(max-width:640px){
  .comm-item>summary{flex-wrap:wrap;gap:.3rem .6rem}
  .comm-preview{flex-basis:100%;white-space:normal}
}

/* module: newsletters (Mailchimp archive) */
.newsletter-frame{width:100%;height:80vh;min-height:480px;border:1px solid var(--slate);border-radius:8px;background:#fff;}

/* module: invoices — search + pager (added with the make.com-era Stripe backfill, which took the
   tab from a handful of rows to years of history) */
.bi-search{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 .9rem}
.bi-search-input{flex:1 1 260px;max-width:380px;padding:.4rem .6rem;border:1px solid #ddd;border-radius:8px;font-size:.92rem}
.bi-pager{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;margin:1rem 0 .2rem}

/* module: purchasing queue — the "teach it a sender" form (a vendor the matcher couldn't name) */
.pq-teach{align-items:end;padding:.5rem .6rem;border:1px dashed var(--slate);border-radius:8px;margin:.4rem 0}

/* module: ring — camera/doorbell cards (the devices were stored all along but never rendered
   until 2026-07-16; everything Ring reports is shown on purpose, trimmed later per roadmap #722) */
.ring-devgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin-top:.5rem}
.ring-devcard{border:1px solid var(--slate);border-radius:10px;padding:.6rem .7rem;background:#fff}
.ring-devcard-head{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.35rem}
.ring-devfacts{display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;margin:0;font-size:.86rem}
.ring-devfacts dt{color:#6b6b66;font-weight:600}
.ring-devfacts dd{margin:0}
.ring-devcard-foot{margin-top:.5rem}

/* ===== Booking (v141): calendar grid, appointment card, queue ===== */
.bkcal-page { max-width: 1680px; }
.bkcal-tools { display:flex; gap:.5rem; flex-wrap:wrap; }
.bkcal-nav { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.bkcal-nav strong { font-size:1.05rem; }
.bkcal-scope { margin-left:auto; display:flex; gap:.35rem; }
.bkcal-grid { display:flex; gap:2px; overflow-x:auto; background:var(--panel-bg, #fff);
  border:1px solid var(--line, #dfe3e6); border-radius:8px; padding:4px; }
.bkcal-hours { flex:0 0 52px; position:relative; }
.bkcal-hours .bkcal-hour { height:56px; font-size:.7rem; color:#8a94a0;
  border-top:1px solid transparent; }
.bkcal-hours .bkcal-hour span { position:relative; top:-0.55em; }
.bkcal-col { flex:1 1 0; min-width:130px; }
.bkcal-col-head { text-align:center; font-weight:600; font-size:.85rem; padding:.25rem 0;
  border-bottom:2px solid var(--slate); position:sticky; top:0; background:inherit; }
.bkcal-col-head a { text-decoration:none; }
.bkcal-col-body { position:relative; height:784px; } /* 14h × 56px */
.bkcal-slotline { height:56px; border-top:1px solid #eef1f3; }
.bkcal-appt { position:absolute; left:2%; width:96%; text-align:left; border:0;
  border-left:4px solid var(--slate); border-radius:6px; padding:.2rem .4rem;
  background:var(--appt-color, var(--sage)); color:#26303a; font-size:.75rem;
  overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.bkcal-appt .bkcal-appt-t { font-weight:700; }
.bkcal-appt .bkcal-appt-s { display:block; opacity:.8; font-size:.68rem; }
.bkcal-appt.is-here { outline:2px solid #2e7d32; }
.bkcal-appt.is-noshow { opacity:.45; text-decoration:line-through; }
.bkcal-appt.is-syncbad { border-left-color:#c62828; }
.bkcal-exc { position:absolute; left:0; width:100%; background:repeating-linear-gradient(
  45deg, #e8eaec, #e8eaec 8px, #f3f4f6 8px, #f3f4f6 16px); color:#7c8794;
  font-size:.68rem; padding:.15rem .35rem; border-radius:4px; }
.bkcal-machine .bkcal-col-head { color:#7a5c96; border-bottom-color:#7a5c96; }
.bkcard-holder { position:sticky; bottom:0; z-index:30; }
.bkcard { margin-top:1rem; border:1px solid var(--line, #dfe3e6); }
.bkcard-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.bkcard-head h2 { margin:0; font-size:1.15rem; }
.bkcard-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:1.25rem; }
.bkcard-grid h3 { margin:.9rem 0 .25rem; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.06em; color:#66707a; }
.bkcard-when { font-size:1rem; font-weight:600; }
.bkcard-answers { margin:.25rem 0; padding-left:1.1rem; }
.bkcard-answers li { font-size:.85rem; }
.bkcard-actions form { margin:.35rem 0; }
.bkcard-actions .btn { width:100%; }
.bkcard-panel { border:1px solid var(--line, #dfe3e6); border-radius:6px;
  padding:.4rem .6rem; margin:.4rem 0; }
.bkcard-panel summary { cursor:pointer; font-weight:600; font-size:.85rem; }
.bkcard-panel label { display:block; font-size:.8rem; margin:.4rem 0; }
.bkcard-panel input[type=text], .bkcard-panel input[type=datetime-local],
.bkcard-panel select { width:100%; }
.bk-check input { width:auto !important; margin-right:.35rem; }
.bkcard-events { list-style:none; padding:0; font-size:.75rem; }
.bkcard-events li { padding:.15rem 0; border-bottom:1px dotted #e5e8ea; }
.bk-quickform label, .bk-quickform select, .bk-quickform input { display:block; width:100%;
  margin:.35rem 0; }
.bk-quickform button { margin-top:.75rem; }
.bk-queueform { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.bk-queueform input, .bk-queueform select { flex:1 1 160px; }
.bk-queue-actions { display:flex; gap:.35rem; flex-wrap:wrap; }
.bk-feedurl { display:block; word-break:break-all; padding:.6rem; background:#f4f6f7;
  border-radius:6px; }
@media (max-width: 760px) {
  .bkcard-grid { grid-template-columns: 1fr; }
  .bkcal-col { min-width:110px; }
}

/* Japanese Projects — owner-only evidence folder (2026-07-18) */
.owner-badge{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:var(--cream);
  background:var(--slate);border-radius:var(--radius-pill);padding:.1em .6em;vertical-align:middle;margin-left:.4em}
.jp-thread{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.jp-msg{border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem;background:var(--cream);max-width:90%}
.jp-msg-owner{align-self:flex-end;background:var(--lightblue)}
.jp-msg-head{margin-bottom:.25rem}
.jp-msg-body{white-space:pre-wrap;font-size:var(--fs-sm)}

/* --- customer link review (the dedupe queue, 2026-07-19) --- */
.lk-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.6rem 0}
@media(max-width:760px){.lk-pair{grid-template-columns:1fr}}
.lk-card{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;background:#fff}
.lk-card h3{margin:.1rem 0 .2rem;font-size:1.05rem;color:var(--slate)}
/* middle name lives IN the name header (a real disambiguator on this queue) but reads
   subordinate to the first/last name — lighter + slightly smaller, never hidden. */
.lk-card h3 .lk-mid{font-weight:400;font-size:.94em;color:var(--slate);opacity:.65}
.lk-card .lk-ls{margin:.5rem 0 .3rem}
.lk-card .lk-ls th,.lk-card .lk-ls td{padding:.25rem .5rem;font-size:.85rem}
.lk-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.lk-actions form{display:inline-flex;gap:.4rem;align-items:center;margin:0}
.lk-family select{font:inherit;font-size:.88rem;padding:.25rem .4rem;border:1px solid var(--line);border-radius:8px}
.opt-badge.lk-dollars{background:#dff3e4;color:#256b3c;font-size:.78rem}
.lk-row>summary .opt-title{white-space:normal}
/* link review: matched-evidence highlighting (2026-07-19) */
.lk-match{background:#dcefdc;color:#256b3c;border-radius:6px;padding:0 .3rem;font-weight:600}
.lk-caution{background:#fdeaea;color:#a33;border-radius:6px;padding:0 .3rem;font-weight:600}
/* link review: an outstanding tattoo deposit sitting on one side of the pair (2026-07-22).
   Uses the shared "money still owed / due" tokens rather than a new colour so it reads the
   same as every other due-money surface in the portal. */
.opt-badge.lk-dep{background:var(--due-bg);color:var(--due);font-size:.78rem}
/* The collapsed row is a nowrap flex line, so every badge steals width from the pair's NAMES —
   the one thing a reviewer reads first. With the deposit badge added, a tablet squeezed the
   title to about one character per line. Below tablet the badges drop onto their own line and
   the names get the full width.
   ♻️ 2026-08-08: this block is now FULLY REDUNDANT — the same fix applies to every .opt-row page
   at the same 900px breakpoint (see the .opt-title block near line 990), which is where link
   review's own rule had been all along. Kept rather than deleted only because it is the origin of
   the pattern and deleting it would lose the reason the 900px number was chosen: a side-by-side
   pair squeezes the names earlier than a single-column row does. The declarations are identical,
   so the overlap costs nothing. If you are tidying this file, this is safe to remove. */
@media(max-width:900px){
  .lk-row>summary{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
  .lk-row>summary .opt-title{flex:1 0 100%}
}
.lk-outstanding{background:var(--due-bg);color:var(--due);border-radius:6px;padding:0 .3rem;font-weight:600}

/* ============================================================================
   MY INFO (2026-07-21 rebuild) — the staffer's own record in one page: identity,
   contact details, pay, business entity, credentials, documents, sign-in.
   The first four blocks here are GENERIC primitives (card header row, key/value
   table, button-as-summary disclosure, missing-field flag) — new pages should
   reuse them rather than cloning another per-page <style> block. Everything
   prefixed .mi- is specific to the My Info page.
   ========================================================================== */

/* --- card header row: title on the left, its actions on the right --- */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;margin:0 0 .55rem}
.card-head h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:var(--fs-h2);
  margin:0;line-height:1.2}
.card-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.card-eyebrow{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .2rem}
.card-note{margin:0 0 .8rem;color:var(--muted);font-size:var(--fs-sm);max-width:60ch}
.card-foot{margin:.8rem 0 0;color:var(--muted);font-size:var(--fs-sm);max-width:60ch}

/* --- key/value table: label left, value right; stacks on a phone --- */
.kv{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.kv th{text-align:left;width:12rem;padding:.55rem .9rem .55rem 0;font-weight:600;
  color:var(--muted);vertical-align:top;border-bottom:1px solid var(--line)}
.kv td{padding:.55rem 0;vertical-align:top;border-bottom:1px solid var(--line)}
.kv tr:last-child>th,.kv tr:last-child>td{border-bottom:none}
@media(max-width:600px){
  .kv th{display:block;width:auto;padding:.6rem 0 0;border-bottom:none;font-size:var(--fs-sm)}
  .kv td{display:block;padding:.1rem 0 .6rem}
}

/* --- disclosure whose summary IS a button (no naked <details> chrome) --- */
summary.btn{list-style:none}
summary.btn::-webkit-details-marker{display:none}
summary.btn::marker{content:""}
.reveal{margin:0}
.reveal-panel{margin-top:.75rem;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:.9rem 1rem}
.reveal-panel>:first-child{margin-top:0}
.reveal-panel .dd-form input,.reveal-panel .dd-form textarea,
.reveal-panel .dd-form select{background:#fff}
.reveal-inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* --- a missing-detail marker, tied to the "what's missing" notice --- */
.gap-flag{display:inline-block;margin-left:.4rem;color:var(--due);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.02em}

/* --- identity card: the cover of the file --- */
.mi-identity{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.mi-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--sage);background:#f0eee6}
.mi-ident-name{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.75rem;
  line-height:1.1;margin:0;color:var(--slate)}
.mi-ident-meta{margin:.3rem 0 0;color:var(--muted);font-size:var(--fs-sm)}
.mi-ident-meta span+span::before{content:"·";margin:0 .45rem;color:var(--line)}

/* --- credential + document rows --- */
.mi-cred-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.mi-pending{margin:.3rem 0 0;color:var(--muted);font-size:var(--fs-sm)}
.mi-hist summary{cursor:pointer;color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.mi-hist[open] summary{margin-bottom:.5rem}

/* --- ID scan panel (camera + confirm), formerly a pile of inline styles --- */
.cred-scanbox{max-width:26rem}
.cred-scanbox .cs-step{margin:.15rem 0 .5rem;color:var(--muted);font-size:var(--fs-sm)}
.cred-scanbox .cs-video{width:100%;border-radius:10px;background:var(--slate);display:block}
.cred-scanbox .cs-stage{margin-top:.5rem}
.cred-scanbox .cs-err{color:var(--overdue);font-size:var(--fs-sm);margin:.35rem 0 0}
.cred-scanbox .cs-file-wrap{display:block;margin-top:.5rem;font-size:var(--fs-sm)}
.cred-scanbox .cs-file-wrap input,.cred-scanbox .cs-confirm input[type=file]{
  display:block;margin-top:.3rem}
.cred-scanbox .cs-confirm{margin-top:.6rem}
.cred-scanbox .cs-read{margin:.2rem 0 .5rem;font-size:var(--fs-sm)}
.cred-scanbox label{font-size:var(--fs-sm);display:block;margin-bottom:.5rem}

/* --- security & sign-in --- */
.mi-security-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* --- business entity + document review cards on Credential Reviews --- */
.rev-card{border-left:4px solid var(--due)}
.rev-card.rev-entity{border-left-color:var(--lightblue)}
.rev-meta{margin:0 0 .7rem;color:var(--muted);font-size:var(--fs-sm)}
.rev-flags{margin:.2rem 0 .7rem;padding-left:1.1rem;color:var(--overdue);font-size:var(--fs-sm)}
.rev-form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.rev-field{display:flex;flex-direction:column;gap:.2rem;font-size:var(--fs-sm)}
.rev-field>span{color:var(--muted);font-weight:600}
.rev-field input,.rev-field select,.rev-field textarea{font:inherit;padding:.45rem .55rem;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.rev-field.rev-grow{flex:1;min-width:14rem}
.rev-actions{display:flex;gap:.5rem}
/* A card-level disclosure needs air under the content it follows (the contact-edit and
   W-9 panels sat flush against the last table row). Row-level ones inside a cell don't. */
.card>.reveal{margin-top:.9rem}
.card>.reveal+.reveal{margin-top:.6rem}

/* =========================================================================================
   ANNUAL TRAINING (rebuilt 2026-07-21)
   The design idea: a training is a linear read with a gate at the end, so the page states
   both facts physically. A sage RAIL down the left edge fills with reading depth, and the
   signature panel is visibly SEALED until the server confirms you reached the end. The lock
   is real — training.views.sign refuses a signature with no server-side read receipt — so
   showing it as a lock is honest, not theatre.
   ========================================================================================= */

/* Shared: an actions cluster on the right of a .page-header. */
.page-header-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* ---- the queue ---- */
.tq-lead{margin:.2rem 0 1.1rem}
.tq-count{margin:0;font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--slate)}
.tq-lead p.muted{margin:.15rem 0 0;font-size:var(--fs-sm)}

.tq-item{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-bottom:.7rem}
.tq-item-main{min-width:0;flex:1 1 20rem}
.tq-item-next{border-left:4px solid var(--sage)}
.tq-title{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.28rem;
  color:var(--slate);margin:.25rem 0 .1rem}
.tq-meta{margin:.4rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
.tq-item-action{flex:0 0 auto}
.tq-queued{font-size:var(--fs-xs);color:var(--muted);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em}
.tq-state{display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:.1rem .5rem;border-radius:20px;border:1px solid var(--line)}
.tq-state-never{background:var(--overdue-bg);color:var(--overdue);border-color:#e7bcbc}
.tq-state-expired{background:var(--overdue-bg);color:var(--overdue);border-color:#e7bcbc}
.tq-state-due{background:var(--due-bg);color:var(--due);border-color:#ecd9a6}
.tq-section{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.35rem;
  color:var(--slate);margin:2rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}

/* ---- the reading page ---- */
.tr-read{position:relative}
/* The rail sits in the gutter on desktop; on narrow screens it becomes a top bar so it never
   steals reading width. */
.tr-rail{position:fixed;left:max(.6rem,calc(50vw - 420px));top:5.2rem;bottom:3rem;width:3px;
  background:var(--line);border-radius:3px;z-index:5}
.tr-rail-fill{display:block;width:100%;height:0;background:var(--sage);border-radius:3px;
  transition:height .12s linear}
@media (max-width:900px){
  .tr-rail{position:fixed;left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:0}
  .tr-rail-fill{width:0;height:100%;transition:width .12s linear}
}

.tr-standfirst{margin:.1rem 0 1.1rem;color:var(--slate);font-size:1.02rem;line-height:1.6;
  border-left:3px solid var(--lightblue);padding-left:.85rem}

.tr-reference{background:#fff;border:1px solid var(--line);border-radius:var(--radius,12px);
  padding:.8rem .95rem;margin-bottom:1.4rem}
.tr-reference-tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-right:.5rem}
.tr-reference a{font-weight:600;color:var(--slate)}
.tr-reference p{margin:.35rem 0 0}

/* Reading comfort IS the design here — the whole feature depends on someone actually reading. */
.tr-body{font-size:1.03rem;line-height:1.72;color:var(--slate);max-width:68ch}
.tr-body h2{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.5rem;
  margin:2rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.tr-body h3{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.2rem;margin:1.4rem 0 .35rem}
.tr-body p{margin:0 0 .95rem}
.tr-body ul,.tr-body ol{margin:0 0 1.1rem;padding-left:1.4rem}
.tr-body li{margin-bottom:.45rem}
.tr-body strong{font-weight:700}
.tr-body table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:var(--fs-sm)}
.tr-body th,.tr-body td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line)}
.tr-body th{color:var(--muted);font-weight:700}
.tr-body blockquote{margin:0 0 1.1rem;padding:.6rem .95rem;background:#fff;
  border-left:3px solid var(--sage);color:var(--slate)}

.tr-end{display:flex;align-items:center;gap:.8rem;margin:2.2rem 0 1.2rem;color:var(--muted)}
.tr-end::before,.tr-end::after{content:"";flex:1;height:1px;background:var(--line)}
.tr-end-mark{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em}

/* The seal. data-locked flips on the SERVER's answer to the read beacon. */
.tr-sign{position:relative;overflow:hidden}
.tr-sign[data-locked="1"] .tr-sign-form{display:none}
.tr-sign[data-locked="0"] .tr-sign-locked{display:none}
.tr-sign-locked{text-align:center;padding:1.6rem .8rem}
.tr-lock-title{margin:0 0 .3rem;font-family:"Cormorant Garamond",serif;font-size:1.3rem;
  color:var(--slate)}
.tr-lock-title::before{content:"⊘";display:block;font-size:1.7rem;color:var(--sage-d);
  margin-bottom:.2rem;line-height:1}
.tr-sign-locked p.muted{margin:0;font-size:var(--fs-sm)}
.tr-sign-title{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.4rem;
  color:var(--slate);margin:0 0 .5rem}
.tr-certify{margin:0 0 1rem;line-height:1.6}
.tr-field{display:block;margin:0 0 1rem}
.tr-field-label{display:block;font-weight:600;color:var(--slate);margin-bottom:.3rem;
  font-size:var(--fs-sm)}
.tr-field input{font:inherit;width:100%;padding:.55rem .65rem;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--slate)}
.tr-field input:focus{outline:2px solid var(--lightblue);outline-offset:1px}
.tr-esign{margin:.9rem 0 1.1rem;line-height:1.55}

/* ---- roster cells ---- */
.tr-pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:.08rem .45rem;border-radius:20px;border:1px solid var(--line)}
.tr-pill-ok{background:var(--ok-bg);color:var(--ok);border-color:#b9ddb9}
.tr-pill-due{background:var(--due-bg);color:var(--due);border-color:#ecd9a6}
.tr-pill-bad{background:var(--overdue-bg);color:var(--overdue);border-color:#e7bcbc}
.tr-pill-none{background:var(--cream);color:var(--muted)}
.tr-pill-sub{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}
.tr-pill-link{display:inline-block;font-size:var(--fs-xs);margin-top:.1rem}

@media (prefers-reduced-motion:reduce){
  .tr-rail-fill{transition:none}
}

/* --- W-9 (2026-07-21) — reuses the training form primitives (.tr-field/.tr-esign) and adds
   only what a tax form needs: a numbered-line reading rhythm and the Part II certification. */
.w9-standfirst{margin:.1rem 0 1.1rem;color:var(--slate);line-height:1.6;
  border-left:3px solid var(--lightblue);padding-left:.85rem}
.w9-h2{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.3rem;
  color:var(--slate);margin:0 0 .5rem}
.w9-form .tr-field{margin-bottom:1.1rem}
.w9-form select{font:inherit;width:100%;padding:.55rem .65rem;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--slate)}
.w9-hint{display:block;margin-top:.25rem;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.w9-tin{border:1px solid var(--line);border-radius:var(--radius,12px);padding:.85rem 1rem;
  margin:0 0 1.1rem;background:var(--cream)}
.w9-tin legend{padding:0 .35rem}
.w9-tin-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.5rem}
.w9-tin-row input[type="text"]{flex:1 1 10rem;font:inherit;padding:.55rem .65rem;
  border:1px solid var(--line);border-radius:9px;background:#fff}
.w9-radio{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;
  font-size:var(--fs-sm);color:var(--slate)}
.w9-certify{margin:0 0 .4rem;font-weight:600}
.w9-certify-list{margin:0 0 1rem;padding-left:1.3rem;font-size:var(--fs-sm);
  line-height:1.6;color:var(--slate)}
.w9-certify-list li{margin-bottom:.4rem}
.w9-check{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .8rem;
  font-size:var(--fs-sm);line-height:1.5}
.w9-check input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:0 0 auto}
.w9-check-required{font-weight:600}
.w9-current{border-left:4px solid var(--sage)}

/* Generic filter row for list pages (artist/year selects above a .data-table).
   Same shape as .social-filters, named for the job rather than one page — new pages
   should use THIS one. */
.filter-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.filter-row label{display:flex;gap:.4rem;align-items:center;font-size:var(--fs-sm);
  font-weight:600;color:var(--slate)}
.filter-row select{padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}

/* Statim machine-report table (compliance). The raw email stays available but must not
   dominate the row — the decoded fault is the thing a piercer needs to read. */
.statim-reports{margin-top:1.2rem}
.statim-detail{margin-top:.35rem}
.statim-detail>summary{cursor:pointer}
.statim-detail-body{margin-top:.5rem;padding:.6rem .75rem;border-left:3px solid var(--sage);
  background:#fafafa;border-radius:0 8px 8px 0}
.statim-detail-body ul{margin:.25rem 0 .6rem;padding-left:1.2rem;line-height:1.55}
.statim-raw{white-space:pre-wrap;font-size:.72rem;max-height:16rem;overflow:auto;
  margin:.4rem 0 0;color:var(--slate)}

/* Jewelry box cards v6 (2026-07-22): every box collapses to one line, so the classes below
   replace the per-element inline styles the card used to carry. */
.jo-next-step{margin:0 0 .7rem}
/* The action button lives inside the card's <summary>; the JS in _jo_shipments.html stops
   its clicks reaching the toggle. Keep controls inside this wrapper. */
.jo-box-actions{display:inline-flex;gap:.4rem;align-items:center}
.jo-box-actions form{display:inline}
.jo-inline{display:inline}
.jo-exp-note{margin-top:.3rem}
.jo-hints-extra{margin:.1rem 0 .4rem}
.jo-sheet-actions{margin:.6rem 0 0}
.jo-subdetail{margin-top:.5rem}
.jo-subdetail>summary{cursor:pointer}
.jo-subdetail-body{margin-top:.4rem}
.jo-note-line{margin:.3rem 0 0}
.jo-approve-box{margin:.4rem 0 0}
.jo-untracked{margin-top:.35rem}

/* Sortable column headers on the Customers list. */
.cust-sort{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line)}
.cust-sort:hover{border-bottom-style:solid}
.cust-sort-on{font-weight:700;border-bottom:none;color:var(--sage)}

/* Business-records archive: the shared period filter + the review queue. */
.pf-group{display:inline-flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.rec-review{padding:.8rem .9rem}
.rec-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.2rem}
.rec-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.rec-form input[type=text]{flex:1 1 12rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.rec-check{display:inline-flex;gap:.35rem;align-items:center;font-size:var(--fs-sm)}
.rec-folders{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
.rec-folder-name{min-width:9rem}
/* Paste-capture textarea (vendor customizer options) — full-width monospace so pasted page
   source is readable and wraps predictably. */
.paste-box{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm)}
/* Custom-order customizer option pickers (vendor upcharges shown inline). */
.co-opt{display:flex;gap:.5rem;align-items:center;margin:.3rem 0;flex-wrap:wrap}
.co-opt-name{min-width:12rem;font-weight:600}
.co-opt-req{color:var(--slate);font-weight:400;font-size:var(--fs-sm)}
.co-opt-pick{min-width:14rem}
/* Booking calendar: full-bleed. A calendar is inherently wide — the standard report max-width
   squeezed 7+ columns into a narrow strip. Horizontal scroll IS the mobile behaviour here (a
   conscious, stated deviation from the expandable-rows rule, which cannot express a time grid). */
.bkcal-full{max-width:none;width:100%}
.bkcal-full .bkcal-grid{overflow-x:auto}
/* Social sign-in buttons on the login page. */
.login-social{margin-top:.5rem}
.login-btn-social{width:100%}
.login-social-note{margin-top:.6rem;text-align:center}

/* Inline action form (e.g. the Remove button beside a linked sign-in account) — a form that
   sits in flowing text without breaking the line. */
.inline-form{display:inline}

/* ---- Custom-order vendor catalogue (workstreams Q + S, 2026-07-24) ----------------------
   The page renders in portal chrome; these replace what was 19 inline style= attributes
   (standing order #22). Product-card grid + the per-vendor category rail + the "New" chip. */
.co-wrap{max-width:1100px;margin:0 auto;padding:1rem}
.co-sub{font-size:.6em;color:var(--slate);opacity:.55}
.co-muted{color:var(--slate);opacity:.7}
.co-small{font-size:.9em}
.co-count{color:var(--slate);opacity:.55}
.co-toolbar{margin:1rem 0;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.co-toolbar .co-search{min-width:240px}
.co-toolbar .co-right{margin-left:auto}
.co-rail{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.co-rail a{border:1px solid #e3e3e3;border-radius:16px;padding:.2rem .75rem;font-size:.85em;
  text-decoration:none;color:inherit;white-space:nowrap}
.co-rail a.on{background:var(--slate);color:#fff;border-color:var(--slate)}
.co-rail a.on .co-count{color:#fff;opacity:.8}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.co-card{position:relative;display:block;border:1px solid #e3e3e3;border-radius:8px;
  padding:.6rem;text-decoration:none;color:inherit}
.co-card img{width:100%;aspect-ratio:1;object-fit:contain}
.co-mfr{font-size:.8em;color:var(--slate);opacity:.6}
.co-title{font-weight:600;font-size:.9em}
.co-price{font-size:.85em;color:var(--slate)}
.co-variants{font-size:.78em;color:var(--slate);opacity:.6}
.co-oos{font-size:.78em;font-weight:600;color:#c00}
.co-partial{font-size:.78em;color:#a66}
.co-chip-new{position:absolute;top:.45rem;left:.45rem;z-index:2;background:var(--sage);
  color:#fff;font-size:.68em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.18rem .55rem;border-radius:12px}
.co-pager{margin:1.5rem 0}
.co-page-n{margin:0 1rem}
.co-chip-inline{position:static;vertical-align:middle;margin-left:.4rem}

/* ---- Booking rules + fee worklist (Batch 34–39) --------------------------------------
   Generic primitives, not page-specific hacks: an inline settings row and a two-button
   decision form both recur elsewhere. */
.bk-inline-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;
  margin:.8rem 0 0;padding:.7rem .8rem;background:rgba(0,0,0,.025);border-radius:8px}
.bk-inline-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;
  color:var(--muted);font-weight:600}
.bk-inline-form input[type=number]{width:6rem}
.bk-inline-form .small{flex-basis:100%;margin:0}
.bk-fee-form{display:flex;gap:.4rem;flex-wrap:wrap}
/* The "not yet / pending" counterpart to .badge-ok, which had no sibling. */
.badge-warn{background:var(--due-bg);color:var(--due)}

/* Communications hub (WO-D stage 2) — the three-pane "mail client" layout Brad picked.
   Collapses to a single column on narrow screens; the list becomes the page and the detail
   pane follows it, which is the expandable-row behaviour every other portal list uses. */
.ch-split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1.2rem;align-items:start}
.ch-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.ch-cat{margin:0;padding:.5rem .8rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
        color:var(--muted);background:var(--cream);border-bottom:1px solid var(--line);font-weight:700}
.ch-item{display:flex;flex-direction:column;gap:.25rem;width:100%;text-align:left;padding:.6rem .8rem;
         background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;font:inherit}
.ch-item:hover{background:var(--cream)}
.ch-item-unwired .ch-name{color:var(--muted)}
.ch-name{font-weight:600;color:var(--slate)}
.ch-meta{display:flex;gap:.3rem;flex-wrap:wrap}
.ch-detail{min-width:0}
.ch-preview{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin:.8rem 0}
.ch-preview iframe{display:block;width:100%;height:520px;border:0}

/* WO-D stages 3–4: the filter bar, the variant switches, the raw view and the metadata
   side panel — the rest of the approved v2 mockup. */
.ch-list{max-height:min(72vh,880px);overflow-y:auto}
.ch-item.on{background:var(--lightblue)}
.ch-count{float:right;font-weight:600;color:var(--muted)}
.ch-coverage{margin-bottom:.9rem}
.ch-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 1rem}
.ch-search{flex:1 1 220px;min-width:180px;font:inherit;padding:.4rem .7rem;
           border:1px solid var(--line);border-radius:8px;background:#fff}
.ch-flabel{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
           font-weight:700;margin-left:.4rem}
.ch-chips{display:flex;gap:.3rem;flex-wrap:wrap}
.ch-chips .chip{cursor:pointer}
.ch-chips .chip.on{background:var(--sage);color:var(--slate)}

.ch-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .5rem}
.ch-head h2{margin:0;font-size:1.15rem}
.ch-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.5rem .6rem;
        background:var(--cream);border:1px solid var(--line);border-radius:8px;margin:0 0 .9rem}
.ch-tabs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
         background:#fff}
.ch-tab{padding:.3rem .8rem;font-size:.82rem;font-weight:600;text-decoration:none;
        color:var(--muted);border-right:1px solid var(--line)}
.ch-tab:last-child{border-right:0}
.ch-tab.on{background:var(--slate);color:#fff}
.ch-switch{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;
           color:var(--muted);text-decoration:none;padding:.2rem .5rem;border-radius:999px}
.ch-switch.on{color:var(--slate)}
.ch-track{width:30px;height:17px;border-radius:999px;background:#d9d6c9;position:relative;
          transition:background .12s;flex:0 0 auto}
.ch-track::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
                 border-radius:50%;background:#fff;transition:left .12s}
.ch-switch.on .ch-track{background:var(--sage-d)}
.ch-switch.on .ch-track::after{left:15px}

.ch-stage{display:grid;grid-template-columns:1fr minmax(220px,290px);gap:1rem;align-items:start}
.ch-device{min-width:0}
.ch-meta-panel{border:1px solid var(--line);border-radius:10px;background:#fff;padding:.8rem}
.ch-meta-panel h3{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
                  color:var(--muted)}
.ch-subject{font-size:.85rem;color:var(--muted);margin:0 0 .4rem}
.ch-frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
          margin:0 0 .5rem}
.ch-frame iframe{display:block;width:100%;height:520px;border:0}
.ch-frame-sms iframe{height:230px}
.ch-test{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.7rem}

.ch-raw{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.ch-seg{border-bottom:1px solid var(--line);padding:.55rem .7rem}
.ch-seg:last-child{border-bottom:0}
.ch-seg-name{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.72rem;
             font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:.25rem}
.ch-seg-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
             line-height:1.5;white-space:pre-wrap;color:var(--slate)}
.ch-master{margin-bottom:1rem}
.ch-usedby{margin:.5rem 0 0;padding-left:1.1rem;font-size:.85rem;color:var(--slate)}

@media(max-width:1080px){
  .ch-stage{grid-template-columns:1fr}
}
@media(max-width:860px){
  .ch-split{grid-template-columns:1fr}
  .ch-list{max-height:none}
  .ch-preview iframe{height:420px}
  .ch-frame iframe{height:430px}
}

/* --- project sessions: the studio hourly minimum (2026-07-31) ------------------------------ */
/* A subordinate heading inside a card, under .jo-h2. */
.jo-h3{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.05rem;
       margin:1.1rem 0 .4rem;color:var(--slate)}
/* One .kv table per pending session, each its own form — separated so two sessions awaiting
   hours never read as a single row of inputs. */
.kv-form{border-top:1px solid var(--line);padding-top:.6rem;margin-bottom:.9rem}
.kv-form:first-of-type{border-top:none;padding-top:0}
.kv-form input[type=datetime-local]{font:inherit;padding:.35rem .5rem;
       border:1px solid var(--line);border-radius:6px;max-width:100%}

/* --- page family: cross-links between pages that sound like each other (2026-08-04) --------- */
/* Rendered by {% comms_family %} → templates/portal/_page_family.html. Sits directly under the
   .page-header, above the page's own content, so it reads as orientation rather than as an
   action bar. Wraps on narrow screens instead of scrolling — four short labels always fit. */
.famnav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.famnav-label{font-size:var(--fs-sm);color:var(--muted);margin-right:.15rem}
.famnav-item{display:inline-block;padding:.25rem .6rem;border:1px solid var(--line);
       border-radius:999px;font-size:var(--fs-sm);line-height:1.35;text-decoration:none;
       color:var(--slate);background:#fff;white-space:nowrap}
a.famnav-item:hover{background:var(--cream, #f7f4ec)}
/* The page you are on: same pill, no border, muted — present in the row so the family reads as
   complete, but visibly not a place to click. */
.famnav-here{border-color:transparent;background:none;color:var(--muted);font-weight:600}

/* ==========================================================================
   CUSTOMER PROFILE — the A1 bento (WO-E Part 2 stage 2, 2026-08-04)
   ==========================================================================
   The staff customer page rebuilt to the approved design
   (docs/customer-portal-STAFF-spec.html). The spec is an HTML mockup with a
   full inline stylesheet; these are its INTENTIONS translated into the staff
   design system — brand tokens only, no raw hex, no per-page <style> block.

   ⚠️ Namespaced `cd-` on purpose. portal.css already owns `.card`, `.kv`,
   `.chip`, `.fold`-adjacent and `.so-*` names with different meanings, and the
   customer-facing A1 stylesheet (clientportal/portal-page.css) owns the
   un-prefixed versions of these. Two stylesheets claiming `.half` is how a
   staff page starts inheriting customer chrome, or the reverse.

   The pieces the page reuses rather than redefining: .card, .btn*,
   .data-table(.dt-stack), .ord-badge, .tag-pill, .muted, .jo-narrow. */

.cd-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:start}
.cd-bento>*{min-width:0}
.cd-next{grid-column:span 5;display:flex;flex-direction:column;margin-bottom:0}
.cd-pass{grid-column:span 7;position:relative}
.cd-money{grid-column:span 3;margin-bottom:0}
.cd-info{grid-column:span 5;margin-bottom:0}
.cd-access{grid-column:span 4;margin-bottom:0}
.cd-half{grid-column:span 6}
.cd-full{grid-column:span 12}

/* card heading: the spec's tracked uppercase eyebrow, not a serif h2 */
.cd-h{font-family:Raleway,Arial,sans-serif;font-size:var(--fs-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 .7rem}

/* STAFF ONLY marker. Loud on purpose: the two pages share a design so a staffer
   reading over somebody's shoulder sees what they see, and the badge is the only
   thing that says "do not read this bit aloud". */
.cd-so{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warn);background:#fff7e3;border:1px solid #ecd9a6;
  border-radius:999px;padding:.1rem .5rem;vertical-align:.15em;margin-left:.45rem;white-space:nowrap}

/* identity header */
.cd-idsub{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin:.35rem 0 0}
.cd-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;color:var(--slate)}
.cd-chip.on{border-color:var(--sage);background:#f4f3e6;color:var(--slate);font-weight:600}
.cd-chip.off{border-color:#ecd9a6;background:#fff7e3;color:var(--warn);font-weight:600}
.cd-chip.unknown{color:var(--muted)}
.cd-goesby{font-family:"Cormorant Garamond",serif;font-size:1.3rem;color:var(--muted)}
.cd-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cd-actions form{display:inline}

/* next appointment */
.cd-when{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.9rem;
  line-height:1.1;color:var(--slate)}
.cd-when small{font-family:Raleway,Arial,sans-serif;font-size:1rem;font-weight:600}
.cd-appt{padding:.55rem 0;border-top:1px solid var(--line)}
.cd-appt:first-of-type{border-top:0;padding-top:0}
.cd-foot{margin-top:auto;padding-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}

/* money */
.cd-amt{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.8rem;color:var(--slate);line-height:1.1}
.cd-row{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;
  padding:.45rem 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.cd-row:first-of-type{border-top:0}
.cd-rows{margin-top:.6rem}
.cd-row b{color:var(--slate);font-variant-numeric:tabular-nums}

/* contact & identity */
.cd-kv{display:grid;grid-template-columns:6.5rem 1fr;row-gap:.5rem;column-gap:.6rem;
  font-size:var(--fs-sm);align-items:start}
.cd-kv>dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0;padding-top:.1rem}
.cd-kv>dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* ⚠️ Only the PROVENANCE line breaks onto its own row. A blanket `dd span{display:block}` also
   caught the inline `primary` pill and stretched it into a full-width green bar across the card
   — visible only once it was rendered against real data. */
.cd-kv>dd>.cd-src{display:block;margin-left:0}
.cd-src{font-size:var(--fs-xs);color:var(--muted);margin-left:.35rem}

/* portal access + the preview audit */
.cd-audit{margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--line);
  font-size:var(--fs-xs);color:var(--muted)}

/* the collapsible cards */
details.cd-fold{background:#fff;border:1px solid var(--line);border-radius:14px;position:relative}
details.cd-fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:.6rem;padding:.9rem 1.2rem;font-weight:700;color:var(--slate)}
details.cd-fold>summary::-webkit-details-marker{display:none}
details.cd-fold>summary::after{content:"+";font-family:"Cormorant Garamond",serif;font-size:1.5rem;
  line-height:1;color:var(--sage-d);margin-left:auto;flex:0 0 auto}
details.cd-fold[open]>summary::after{content:"–"}
details.cd-fold>summary:hover{background:var(--cream);border-radius:14px 14px 0 0}
.cd-count{font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.cd-foldbody{padding:0 1.2rem 1rem}
/* ⚠️ A table in a HALF-WIDTH card is not a "wide table". `.jo-narrow` sets width:fit-content +
   nowrap headers so a big report can scroll sideways; inside a 6-of-12 grid cell that turns a
   four-column visit list into a scroller whose Status column reads "COMPL". Here the table
   FILLS and WRAPS instead — the overflow-x stays as the last-resort escape on a tiny screen. */
.cd-foldbody>.jo-narrow{margin-left:0;margin-right:0;width:auto}
.cd-foldbody>.jo-narrow>table{width:100%;min-width:0}
.cd-foldbody>.jo-narrow>table th{white-space:normal}
.cd-empty{padding:0 1.2rem 1rem;color:var(--muted);font-size:var(--fs-sm)}

/* communications timeline rows */
.cd-cm{display:flex;gap:.7rem;align-items:baseline;padding:.55rem 1.2rem;
  border-top:1px solid var(--line);font-size:var(--fs-sm)}
.cd-cm .cd-cw{flex:0 0 7.5rem;color:var(--muted);font-size:var(--fs-xs)}
.cd-cm .cd-ck{flex:0 0 5.5rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.cd-cm .cd-ck.out{color:var(--ok)}
.cd-cm .cd-ck.in{color:var(--slate)}
.cd-cm .cd-ck.call{color:var(--warn)}
.cd-cm .cd-cb{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.cd-cbody{margin:.25rem 0 0;color:var(--muted)}
.cd-prov{display:block;margin-top:.2rem;font-size:var(--fs-xs);color:var(--warn)}
/* The recording SLOT. There is no route that can serve a PBX recording yet (roadmap #1015),
   so the row states that the audio exists and stops there — a link that 404s on ~84% of calls
   is worse than no link, because a staffer will read the silence as "nothing was said". */
.cd-rec{display:inline-block;margin-left:.4rem;font-size:var(--fs-xs);color:var(--muted);
  border:1px dashed var(--line);border-radius:999px;padding:0 .45rem;white-space:nowrap}

/* receipts */
details.cd-rcpt>summary{display:flex;justify-content:space-between;gap:.75rem;cursor:pointer;
  list-style:none;padding:.5rem 1.2rem;border-top:1px solid var(--line);font-size:var(--fs-sm)}
details.cd-rcpt>summary::-webkit-details-marker{display:none}
details.cd-rcpt>summary:hover{background:var(--cream)}
details.cd-rcpt>summary b{font-variant-numeric:tabular-nums}
.cd-lines{padding:.2rem 1.2rem .8rem;font-size:var(--fs-sm)}
.cd-lines div{display:flex;justify-content:space-between;gap:.75rem;padding:.25rem 0;
  border-top:1px dotted var(--line)}
.cd-lines div:first-child{border-top:0}
.cd-lines .cd-tot{border-top:1px solid var(--line);font-weight:700;color:var(--slate)}

/* the loyalty boarding pass — WO-C concept 4, staff variant */
.cd-notlive{position:absolute;z-index:2;top:-.55rem;left:1.1rem;font-size:.62rem;font-weight:800;
  letter-spacing:.12em;background:var(--overdue);color:#fff;border-radius:4px;padding:.15rem .55rem}
.cd-bp{display:flex;height:100%}
.cd-bp-main{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-right:none;
  border-radius:14px 0 0 14px;padding:1rem 1.2rem;display:flex;flex-direction:column}
.cd-bp-stub{width:14rem;flex:0 0 14rem;background:#f4f3e6;border:1px solid var(--line);
  border-left:2px dashed var(--sage-d);border-radius:0 14px 14px 0;padding:.9rem 1rem;
  display:flex;flex-direction:column}
.cd-bp-brand{display:flex;justify-content:space-between;gap:.6rem;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.cd-bp-brand b{color:var(--sage-d)}
.cd-leg{display:flex;align-items:center;gap:1rem;margin:.8rem 0 .2rem}
.cd-leg-code{font-family:"SF Mono",Menlo,monospace}
.cd-leg-code .cd-big{font-size:1.5rem;font-weight:700;color:var(--slate)}
.cd-leg-code .cd-sm{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.cd-leg-code.dest .cd-big{color:var(--muted)}
.cd-leg-line{flex:1;height:1px;background:var(--line);position:relative}
.cd-leg-prog{position:absolute;left:0;top:0;height:1px;background:var(--sage-d)}
.cd-leg-plane{position:absolute;top:-.7rem;transform:translateX(-50%);font-style:normal;
  color:var(--slate);background:#fff;padding:0 .25rem}
.cd-headline{font-size:1.3rem;font-weight:800;color:var(--slate);line-height:1.15;margin:.2rem 0 0}
.cd-bp-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin:.7rem 0 0;padding-top:.6rem;
  border-top:1px solid var(--line)}
.cd-bp-meta dt{font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cd-bp-meta dd{margin:0;font-weight:700;color:var(--slate)}
.cd-bp-staff{margin:auto 0 0;padding-top:.6rem;font-size:var(--fs-xs);color:var(--muted)}
.cd-itin{list-style:none;margin:.4rem 0 0;padding:0}
.cd-itin li{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;font-size:var(--fs-xs);
  border-bottom:1px solid #e6e3c9}
.cd-itin li:last-child{border-bottom:none}
.cd-itin .cd-mark{flex:0 0 .9rem;text-align:center;color:var(--sage-d)}
.cd-itin .cd-nm{flex:1;font-weight:600;color:var(--muted)}
.cd-itin .cd-pc{font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.cd-itin li.current .cd-nm{color:var(--slate);font-weight:800}
.cd-itin li.current .cd-mark{color:var(--slate)}
.cd-itin li.ahead .cd-nm,.cd-itin li.ahead .cd-pc{color:#b3b7bc}
.cd-barcode{margin-top:auto;padding-top:.6rem}
.cd-barcode i{display:block;height:1.2rem;opacity:.7;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--slate) 0 2px,transparent 2px 4px,
    var(--slate) 4px 7px,transparent 7px 9px,var(--slate) 9px 10px,transparent 10px 14px)}

/* --- tablet: the 3/5/4 row is the first thing that cramps --- */
@media(max-width:1150px){
  .cd-money{grid-column:span 4}
  .cd-info{grid-column:span 8}
  .cd-access{grid-column:span 12}
  .cd-bp-stub{width:12rem;flex:0 0 12rem}
}
/* --- one column, and the pass tears along its perforation --- */
@media(max-width:900px){
  .cd-bento{grid-template-columns:1fr;gap:.8rem}
  .cd-next,.cd-pass,.cd-money,.cd-info,.cd-access,.cd-half,.cd-full{grid-column:span 1}
  .cd-bp{flex-direction:column;height:auto}
  .cd-bp-main{border-right:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0}
  .cd-bp-stub{width:auto;flex:none;border-left:1px solid var(--line);
    border-top:2px dashed var(--sage-d);border-radius:0 0 14px 14px}
  .cd-kv{grid-template-columns:5rem 1fr}
  .cd-cm{flex-wrap:wrap;gap:.35rem .6rem}
  .cd-cm .cd-cw,.cd-cm .cd-ck{flex:0 0 auto}
  .cd-cm .cd-cb{flex:1 1 100%}
  details.cd-fold>summary,.cd-foldbody,.cd-cm,.cd-lines,.cd-empty,
  details.cd-rcpt>summary{padding-left:.8rem;padding-right:.8rem}
}

/* --- device batteries (2026-08-04) --------------------------------------------------------- */
/* /portal/battery-links/. The level pill is the only new visual idea on the page: everything
   else reuses .report-block / .data-table / .btn. Three states, because there are only three
   things a reader needs from a glance — fine, watch it, deal with it. Colours come from the
   existing status variables so a palette change carries, and so the page agrees with the
   sign-off board, which already paints overdue/due/done from exactly these. */
.bat-pill{display:inline-block;border-radius:20px;padding:.05rem .55rem;font-size:var(--fs-sm);
  font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.bat-good{background:var(--ok-bg);color:var(--ok)}
.bat-warn{background:var(--due-bg);color:var(--due)}
.bat-bad{background:var(--overdue-bg);color:var(--overdue)}
/* The "name the new chore" field, which has to hold a full chore title without pushing the
   table sideways on a tablet. */
.bat-name{font:inherit;font-size:var(--fs-sm);padding:.3rem .5rem;border:1px solid var(--line);
  border-radius:6px;width:min(30rem,100%);margin-bottom:.3rem}
/* Each action is its own <form>, so without this the buttons stack one per line and a row
   three actions deep gets very tall. */
#bat-queue td form{display:inline-block;margin:0 .25rem .25rem 0}

/* Work-order docs viewer (/portal/docs/) — HTML mockups render inside portal chrome. */
.docs-frame{width:100%;min-height:82vh;border:1px solid var(--line,#d8dde1);border-radius:10px;background:#fff}
.docs-kind{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.14rem .45rem;border-radius:8px;background:#eef0f2;color:#5b6671;margin-left:.4rem}

/* --- buy-plan mark-ordered picker (#1089, 2026-08-09) -------------------------------------- */
/* /portal/reorder/. Marking a vendor's order used to be all-or-nothing; the picker lets
   management tick exactly the lines they bought and fix quantities. Reuses .data-table /
   .jo-narrow / .btn — the only new visual ideas are the dashed fold and the small qty box. */
.rd-markpanel{margin:.4rem 0 .9rem;border:1px dashed var(--line);border-radius:8px;
  padding:.4rem .65rem;background:#fafbfc}
.rd-markpanel>summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--slate)}
.rd-markpanel[open]>summary{margin-bottom:.4rem}
.rd-markpanel .btn{margin-top:.4rem}
.rd-qty{width:4.6rem;font:inherit;font-size:var(--fs-sm);padding:.25rem .4rem;
  border:1px solid var(--line);border-radius:6px;text-align:right}
.rd-picktable td{vertical-align:middle}
/* #1088 — the per-vendor Claude ordering script rides in a hidden textarea; the copy button
   reads .value, so it must exist in the DOM without occupying the page. */
.rd-script{display:none}