: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 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{max-width:880px;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}
.act-as{display:flex;align-items:center;gap:.45rem;background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:.3rem .65rem}
.act-as-tag{font-size:.6rem;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--steel);border-radius:20px;padding:.12rem .45rem}
.act-as label{font-size:.82rem;font-weight:600;color:var(--muted)}
.act-as select{font:inherit;font-weight:700;color:var(--slate);border:none;background:transparent;cursor:pointer;padding:.15rem}
.act-as select:focus{outline:none}
@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-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: a comfortable, centered width (Brad: pages were
   too wide with a "sea of white"). Wide tables scroll inside their block. */
.report{max-width:720px;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}
.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}

/* --- 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)}
@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 */
td,th,.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}
/* wide tables scroll WITHIN their card instead of widening the page */
.report-block{overflow-x:auto}
.report,.dash,.portal-main{max-width:100%;width:100%}
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}
.ord-badge.done{background:#e3efe0;color:#3c7a34}
.ord-badge.due{background:#f6efd8;color:#8a6d1e}
.ord-badge.muted{background:#ececec;color:#777}

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

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

/* ===== 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)}
.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: signoff-access + bookings side by side (wrap on mobile) ===== */
.dash-top{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.dash-top > *{flex:1 1 300px;min-width:0;margin-bottom:0!important}
@media(max-width:700px){.dash-top > *{flex-basis:100%}}

/* ===== 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-block, .dash-top > .bookings-summary{align-self:flex-start}
.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:1060px}
.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%}}

/* ===== 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)}
.opt-detail{padding:.6rem .95rem .9rem;font-size:.92rem;line-height:1.55}
.opt-detail p{margin:.35rem 0}
.opt-high{border-left-color:#d9534f}
.opt-medium{border-left-color:#caa53a}
.opt-low{border-left-color:#3f7d57}
.opt-future{border-left-color:#9aa3ad}

/* ===== 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.) */
.dash-top{align-items:stretch}                 /* was flex-start → stretch so cards equalize height */
.dash-top > *{
  flex:1 1 0;                                  /* equal share regardless of content (was 1 1 300px) */
  flex-basis:0;
  min-width:260px;                             /* don't get cramped before wrapping */
  max-width:380px;                             /* keep 2-card view from sprawling; ~matches a 3-col width */
  display:flex;                                /* make each card a column so inner content can fill height */
  flex-direction:column;
}
/* These two had max-width:600px (general) and align-self:flex-start — neutralize inside the top row only
   so the cards are equal width and stretch to full row height. */
.dash-top > .todo-block,
.dash-top > .bookings-summary{align-self:stretch;max-width:none}
/* 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;
}
/* On narrow screens the cards already wrap to full width; let them shrink past the desktop cap. */
@media(max-width:700px){
  .dash-top > *{max-width:none;min-width:0}
}

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