/* DCFS Control Centre — admin UI. "Guided Index" visual language (from Claude Design):
   forest / cream / surface / muted gold / sage · Newsreader (serif) + Public Sans (UI). */
@import url(https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Public+Sans:wght@400;500;600;700&display=swap);
:root{
  /* ── Imported Claude Design palette · "Crymble Hub.dc.html" (forest / cream / gold / sage) ── */
  --bg:#EEE7D9; --surface:#FBF8F1; --surface-2:#F4EEE1; --raise:#FFFFFF;
  --sidebar:#1F3A2C; --sidebar-2:#182E22; --sidebar-line:#2E4B3A;
  --text:#2A2A22; --muted:#6E6A5A; --faint:#9C9482;
  --border:#E2D9C6; --border-2:#D3C8B0; --hair:#EBE3D3;
  --green:#1F3A2C; --green-mid:#356049; --green-soft:#E4EDE3;
  --gold:#B08830; --gold-2:#C6A353; --gold-soft:#F0E7CF;
  --sage:#7C9784; --sage-soft:#DEE7DD;
  --ok:#3F7455; --ok-bg:#E3EDE2; --warn:#9E7A22; --warn-bg:#F2E8CC;
  --idle:#A99F87; --idle-bg:#ECE4D3; --alert:#A24A38; --alert-bg:#F1DED7;
  --info:#3C6580; --info-bg:#DCE7ED;
  --shadow-sm:0 1px 2px rgba(31,58,44,.06),0 1px 3px rgba(31,58,44,.05);
  --shadow-md:0 2px 6px rgba(31,58,44,.07),0 8px 24px rgba(31,58,44,.06);
  --r:10px; --r-lg:14px; --r-sm:7px; --r-pill:999px;
  /* ── Legacy aliases mapped onto the palette above (so every existing component picks up the refresh) ── */
  --a-bg:var(--bg); --a-panel:var(--surface); --a-ink:var(--text); --a-soft:var(--muted); --a-mut:var(--faint);
  --a-line:var(--border); --a-moss:var(--green); --a-moss-2:var(--green-mid); --a-sage:var(--sage-soft); --a-gold:var(--gold); --a-gold-2:#8f6f28;
  --a-fg:#29abe2; --a-fg-2:#1f9bd0; --a-fg-lab:#eef1e6;
  --a-side:var(--sidebar); --a-side-ink:#c5cfc4; --a-side-mut:#7c9483; --a-side-active:var(--green-mid);
  --a-ok-bg:var(--ok-bg);--a-ok:var(--ok); --a-rev-bg:var(--info-bg);--a-rev:var(--info);
  --a-part-bg:var(--warn-bg);--a-part:var(--warn); --a-con-bg:var(--alert-bg);--a-con:var(--alert);
  --a-serif:"Newsreader",Georgia,serif; --a-ui:"Public Sans",system-ui,sans-serif;
  --a-radius:var(--r-lg); --a-shadow:var(--shadow-sm);
}
/* ── Dark theme · OS-driven by default, overridable by the topbar toggle ── */
:root[data-theme="dark"]{
  --bg:#141E18; --surface:#1C2820; --surface-2:#213026; --raise:#243329;
  --sidebar:#101913; --sidebar-2:#0C130E; --sidebar-line:#243329;
  --text:#E9E3D3; --muted:#A7A48F; --faint:#78775F;
  --border:#2C3A30; --border-2:#37473B; --hair:#273329;
  --green:#0F1D15; --green-mid:#4C7A5F; --green-soft:#22332A;
  --gold:#C6A353; --gold-2:#D8BC75; --gold-soft:#33301F;
  --sage:#88A18E; --sage-soft:#25332A;
  --ok:#69A07E; --ok-bg:#20302A; --warn:#C7A24A; --warn-bg:#332C15;
  --idle:#7C7660; --idle-bg:#28281F; --alert:#C46B58; --alert-bg:#33231E;
  --info:#6E9BB6; --info-bg:#1E2B33;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.35);
  --a-gold-2:#b7973f; --a-fg:#2f86a8; --a-fg-2:#276e8c; --a-fg-lab:#22302a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141E18; --surface:#1C2820; --surface-2:#213026; --raise:#243329;
  --sidebar:#101913; --sidebar-2:#0C130E; --sidebar-line:#243329;
  --text:#E9E3D3; --muted:#A7A48F; --faint:#78775F;
  --border:#2C3A30; --border-2:#37473B; --hair:#273329;
  --green:#0F1D15; --green-mid:#4C7A5F; --green-soft:#22332A;
  --gold:#C6A353; --gold-2:#D8BC75; --gold-soft:#33301F;
  --sage:#88A18E; --sage-soft:#25332A;
  --ok:#69A07E; --ok-bg:#20302A; --warn:#C7A24A; --warn-bg:#332C15;
  --idle:#7C7660; --idle-bg:#28281F; --alert:#C46B58; --alert-bg:#33231E;
  --info:#6E9BB6; --info-bg:#1E2B33;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.35);
  --a-gold-2:#b7973f; --a-fg:#2f86a8; --a-fg-2:#276e8c; --a-fg-lab:#22302a;
}}
*{box-sizing:border-box}
body.dcfs{margin:0;background:var(--a-bg);color:var(--a-ink);
  font-family:var(--a-ui);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.dcfs-top h1,.dcfs-sec__head h2,.dcfs-card .v,.dcfs-brand b,.dcfs-tile .n,.dcfs-stat .n{font-family:var(--a-serif);font-weight:500;letter-spacing:-.01em}
a{color:var(--a-gold);text-decoration:none}
a:hover{text-decoration:underline}

/* layout */
.dcfs-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.dcfs-side{background:var(--a-side);color:var(--a-side-ink);padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.dcfs-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.dcfs-brand img{width:30px;height:30px}
.dcfs-brand b{font-size:15px;color:#fff;font-weight:600;line-height:1.15}
.dcfs-brand span{display:block;font-size:11px;color:var(--a-side-mut);letter-spacing:.04em}
.dcfs-nav-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--a-side-mut);margin:16px 10px 6px}
.dcfs-nav a{display:flex;align-items:center;gap:9px;color:var(--a-side-ink);padding:8px 10px;border-radius:8px;font-size:13.5px;margin-bottom:1px}
.dcfs-nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.dcfs-nav a.is-active{background:rgba(182,145,63,.18);color:#f4efe1;font-weight:600;box-shadow:inset 3px 0 0 var(--gold-2)}
.dcfs-nav a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.dcfs-main{padding:clamp(18px,2vw,30px) clamp(16px,2.4vw,40px) 60px;max-width:2200px;min-width:0}

/* top bar */
.dcfs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.dcfs-top h1{font-size:24px;font-weight:650;margin:0 0 3px}
.dcfs-top p{margin:0;color:var(--a-soft);font-size:14px}
.dcfs-user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--a-soft)}
.dcfs-avatar{width:34px;height:34px;border-radius:50%;background:var(--a-moss);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.dcfs-role{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--a-mut)}

/* cards */
.dcfs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 26px}
.dcfs-card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);padding:16px 18px;box-shadow:var(--a-shadow)}
.dcfs-card .k{font-size:12.5px;color:var(--a-soft);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.dcfs-card .v{font-size:26px;font-weight:680;letter-spacing:-.01em;line-height:1}
.dcfs-card .v small{font-size:13px;font-weight:500;color:var(--a-mut)}
.dcfs-card .s{font-size:12px;color:var(--a-mut);margin-top:6px}
.dcfs-card.is-alert .v{color:#9a5a2f}
.dcfs-card a.v{color:inherit}

/* quick actions */
.dcfs-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.dcfs-btn{display:inline-flex;align-items:center;gap:7px;background:var(--a-panel);border:1px solid var(--a-line);color:var(--a-ink);
  padding:9px 14px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;box-shadow:var(--a-shadow)}
.dcfs-btn:hover{border-color:var(--a-moss);text-decoration:none}
.dcfs-btn--primary{background:var(--a-gold);border-color:var(--a-gold);color:#fff}
.dcfs-btn--primary:hover{background:var(--a-gold-2)}
.dcfs-btn--sm{padding:6px 11px;font-size:12.5px}

/* section + table */
.dcfs-sec{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:var(--a-shadow);margin:0 0 24px;overflow:hidden}
.dcfs-sec__head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--a-line)}
.dcfs-sec__head h2{font-size:16px;font-weight:620;margin:0}
.dcfs-sec__body{padding:6px 0}
/* Record-style panels: filled green header bar + label-left field rows (Crymble brand) */
.dcfs-sec--rec{margin:0 0 16px}
.dcfs-sec--rec>.dcfs-sec__head{background:var(--a-fg);border-bottom:0;padding:11px 16px}
.dcfs-sec--rec>.dcfs-sec__head h2{color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.dcfs-sec--rec>.dcfs-sec__head .dcfs-btn{color:#fff;border-color:rgba(255,255,255,.4)}
.dcfs-frows{display:flex;flex-wrap:wrap;border-top:1px solid var(--a-line)}
/* FuneralGo-style sub-panel heading band — splits one tab into titled sections */
.dcfs-fsub{width:100%;background:var(--a-fg);color:#fff;font:600 11px/1 var(--a-ui);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-bottom:1px solid var(--a-line);order:0}
.dcfs-frow{display:grid;grid-template-columns:150px 1fr;width:50%;border-bottom:1px solid var(--a-line);box-sizing:border-box}
.dcfs-frow:nth-child(odd){border-right:1px solid var(--a-line)}
.dcfs-frow.span2{width:100%;border-right:0}
.dcfs-frow>.k{background:var(--a-fg-lab);padding:0 11px;font-size:12px;color:var(--a-soft);font-weight:600;display:flex;align-items:center;border-right:1px solid var(--a-line);min-height:36px;line-height:1.2}
.dcfs-frow>.v{padding:4px 9px;display:flex;align-items:center;min-width:0}
.dcfs-frow>.v>*{width:100%}
.dcfs-frow input,.dcfs-frow select,.dcfs-frow textarea{width:100%;border:1px solid var(--a-line);border-radius:6px;padding:7px 9px;font:inherit;background:#fff;box-sizing:border-box;color:var(--a-ink)}
.dcfs-frow input:focus,.dcfs-frow select:focus,.dcfs-frow textarea:focus{outline:2px solid var(--a-moss);outline-offset:0;border-color:var(--a-moss)}
.dcfs-frow textarea{min-height:62px;resize:vertical}
.dcfs-recnote{margin:0;padding:9px 16px;background:#fbf6ec;color:var(--a-part);font-size:12.5px;border-top:1px solid var(--a-line)}
.dcfs-recsave{padding:13px 16px;border-top:1px solid var(--a-line);background:var(--a-bg)}
@media(max-width:780px){.dcfs-frow,.dcfs-frow:nth-child(odd){width:100%;border-right:0}}
table.dcfs-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.dcfs-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--a-mut);font-weight:600;padding:10px 20px;border-bottom:1px solid var(--a-line)}
.dcfs-tbl td{padding:12px 20px;border-bottom:1px solid var(--a-line);vertical-align:top}
.dcfs-tbl tr:last-child td{border-bottom:none}
.dcfs-tbl tr:hover td{background:#fafbfa}
.dcfs-empty{padding:34px 20px;text-align:center;color:var(--a-mut);font-size:14px}

/* badges */
.b{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.b--new{background:var(--a-part-bg);color:var(--a-part);border-color:#efe2c4}
.b--reviewing{background:var(--a-rev-bg);color:var(--a-rev);border-color:#dde2e8}
.b--accepted{background:var(--a-ok-bg);color:var(--a-ok);border-color:#cfe3d2}
.b--rejected{background:var(--a-con-bg);color:var(--a-con);border-color:#ecd6cf}
.b--super_admin{background:var(--a-moss);color:#fff}
.b--admin{background:var(--a-ok-bg);color:var(--a-ok)}
.b--editor{background:var(--a-rev-bg);color:var(--a-rev)}
.b--viewer{background:#eee;color:#666}

/* login */
.dcfs-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,#eef1ec,#f6f7f5)}
.dcfs-login__box{width:100%;max-width:380px;background:#fff;border:1px solid var(--a-line);border-radius:16px;padding:34px 32px;box-shadow:0 20px 50px rgba(20,30,20,.12)}
.dcfs-login__brand{text-align:center;margin-bottom:22px}
.dcfs-login__brand img{width:46px;height:46px}
.dcfs-login__brand b{display:block;font-size:17px;margin-top:8px}
.dcfs-login__brand span{display:block;font-size:12px;color:var(--a-gold);letter-spacing:.03em;margin-top:5px;font-weight:500}
.dcfs-login__welcome{font-size:13px;color:var(--a-soft);text-align:center;line-height:1.6;margin:2px 0 20px;max-width:300px;margin-left:auto;margin-right:auto}
.dcfs-field{margin-bottom:14px}
.dcfs-field label{display:block;font-size:12.5px;font-weight:600;color:var(--a-soft);margin-bottom:5px}
.dcfs-field input{width:100%;padding:10px 12px;border:1px solid var(--a-line);border-radius:9px;font-size:14.5px;font-family:inherit}
.dcfs-field input:focus{outline:none;border-color:var(--a-moss);box-shadow:0 0 0 3px rgba(60,78,64,.12)}
.dcfs-login button{width:100%;margin-top:6px;background:var(--a-moss);color:#fff;border:none;padding:11px;border-radius:9px;font-size:14.5px;font-weight:600;cursor:pointer}
.dcfs-login button:hover{background:var(--a-moss-2)}
.dcfs-err{background:#fbe9e6;border:1px solid #f1cfc7;color:#8a3b2b;font-size:13px;padding:9px 12px;border-radius:8px;margin-bottom:14px}
.dcfs-note{font-size:11.5px;color:var(--a-mut);text-align:center;margin-top:16px;line-height:1.5}

.dcfs-flash{background:var(--a-ok-bg);border:1px solid #cfe3d2;color:var(--a-ok);font-size:13px;padding:10px 14px;border-radius:9px;margin-bottom:18px}
select.dcfs-mini{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--a-line);border-radius:7px;background:#fff}
.dcfs-muted{color:var(--a-mut)}

/* collapsible sidebar */
.dcfs-navtoggle{all:unset;cursor:pointer;font-size:19px;line-height:1;color:var(--a-soft);padding:7px 10px;border-radius:8px;flex:none}
.dcfs-navtoggle:hover{background:var(--a-sage);color:var(--a-ink)}
.dcfs-toprow{display:flex;align-items:center;gap:8px;min-width:0}
html.dcfs-nav-collapsed .dcfs-shell{grid-template-columns:1fr}
html.dcfs-nav-collapsed .dcfs-side{display:none}

/* dashboard grouping */
.dcfs-grouplabel{font-size:12.5px;font-weight:600;color:var(--a-soft);margin:0 2px 11px;display:flex;align-items:center;gap:8px}
.dcfs-grouplabel span{color:var(--a-mut);font-weight:400}
.dcfs-grouplabel a{margin-left:auto;font-size:12px;font-weight:500}

/* attention bar */
.dcfs-attn{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--a-part-bg);border:1px solid #efe2c4;border-radius:var(--a-radius);padding:11px 15px;margin:0 0 24px}
.dcfs-attn__lab{font-size:12.5px;font-weight:600;color:var(--a-part);display:flex;align-items:center;gap:6px}
.dcfs-attn a{background:#fff;border:1px solid var(--a-line);border-radius:8px;padding:5px 11px;font-size:13px;color:var(--a-ink)}
.dcfs-attn a:hover{border-color:var(--a-moss);text-decoration:none}
.dcfs-attn a b{font-weight:680}
.dcfs-attn--clear{background:var(--a-ok-bg);border-color:#cfe3d2}
.dcfs-attn--clear .dcfs-attn__lab{color:var(--a-ok)}

/* today's work — side-by-side ops panels */
.dcfs-ops{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 26px}
.dcfs-ops .dcfs-sec{margin:0}
.dcfs-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;padding:14px 18px}
.dcfs-stat{display:block;padding:5px 4px;border-radius:8px}
.dcfs-stat .n{display:block;font-size:22px;font-weight:680;letter-spacing:-.01em;color:var(--a-ink);line-height:1}
.dcfs-stat .l{display:block;font-size:11.5px;color:var(--a-soft);margin-top:4px}
.dcfs-stat .s{display:block;font-size:11px;color:var(--a-ink);margin-top:3px;white-space:nowrap;font-weight:600}
.dcfs-stat .s em{font-style:normal;color:var(--a-mut);font-weight:400;font-size:10px}
.dcfs-stat.is-alert .n{color:#9a5a2f}
a.dcfs-stat:hover{background:var(--a-sage);text-decoration:none}

/* website-at-a-glance — lighter tiles */
.dcfs-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 26px}
.dcfs-tile{background:var(--a-panel);border:1px solid var(--a-line);border-radius:13px;padding:13px 15px}
.dcfs-tile .n{font-size:22px;font-weight:500;color:var(--a-ink);line-height:1.1}
.dcfs-tile .l{font-size:11.5px;color:var(--a-soft);margin-top:3px}
.dcfs-tile a{color:inherit}
.dcfs-tile a:hover{text-decoration:none}

/* Crymble Assistant — chat */
.asst-chat{max-width:720px;border:1px solid var(--a-line);border-radius:14px;overflow:hidden;background:var(--a-bg);display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(20,30,20,.06)}
.asst-log{padding:16px;max-height:54vh;min-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.asst-msg{padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5;max-width:86%;white-space:pre-wrap;word-wrap:break-word}
.asst-msg.bot{background:var(--a-sage);color:var(--a-ink);align-self:flex-start;border-bottom-left-radius:4px}
.asst-msg.me{background:var(--a-moss);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.asst-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--a-line)}
.asst-input textarea{flex:1;resize:none;padding:10px 12px;border:1px solid var(--a-line);border-radius:10px;font:inherit;max-height:140px;background:var(--a-bg);color:var(--a-ink)}
.asst-choices{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;margin:-2px 0 2px}
.asst-choice{padding:8px 14px;border:1px solid var(--a-moss);background:var(--a-bg);color:var(--a-moss);border-radius:999px;font:inherit;font-size:13px;cursor:pointer;transition:background .12s,color .12s}
.asst-choice:hover{background:var(--a-moss);color:#fff}
.asst-choice:disabled{opacity:.45;cursor:default;background:var(--a-bg);color:var(--a-moss)}
.asst-search{max-width:720px;margin-top:22px}
.asst-search>summary{cursor:pointer;font-size:13px;color:var(--a-soft);font-weight:600;padding:6px 0}

/* Crymble Assistant — inline action forms */
.asst-do{display:block;margin-top:8px;max-width:520px}
.asst-do label{display:block;font-size:11.5px;color:var(--a-soft);font-weight:600;margin:9px 0 3px}
.asst-do input,.asst-do select,.asst-do textarea{width:100%;padding:8px 10px;border:1px solid var(--a-line);border-radius:8px;font:inherit;box-sizing:border-box;background:var(--a-bg);color:var(--a-ink)}
.asst-do .row{display:flex;gap:10px}
.asst-do .row>div{flex:1}
.asst-do button{margin-top:12px}
.asst-do .asst-warn{display:block;margin-top:10px}

/* iPad-style app grid (dashboard home) */
.dcfs-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:20px 10px;margin:4px 0 30px}
.dcfs-app{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.dcfs-app:hover{text-decoration:none}
.dcfs-app__i{position:relative;width:58px;height:58px;border-radius:16px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 3px 10px rgba(20,30,20,.14);transition:transform .12s ease}
.dcfs-app:hover .dcfs-app__i{transform:translateY(-2px)}
.dcfs-app__l{font-size:12.5px;color:var(--a-ink);text-align:center;line-height:1.2}
.dcfs-app__b{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:10px;background:#b6452f;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--a-bg)}
@media(max-width:880px){.dcfs-apps{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:16px 8px}.dcfs-app__i{width:54px;height:54px;font-size:24px}}

/* collapsible / minimisable sections */
.dcfs-min-btn{all:unset;cursor:pointer;color:var(--a-soft);font-size:13px;padding:5px 8px;border-radius:7px;display:inline-flex;align-items:center;line-height:1}
.dcfs-min-btn:hover{background:var(--a-sage);color:var(--a-ink)}
.dcfs-min-btn .chev{transition:transform .15s ease}
.dcfs-sec.is-min .dcfs-sec__body{display:none}
.dcfs-sec.is-min .dcfs-min-btn .chev{transform:rotate(-90deg)}

/* personal to-do list */
.dcfs-todoadd{display:flex;gap:8px;margin-bottom:10px}
.dcfs-todoadd input[type=text]{flex:1;padding:8px 11px;border:1px solid var(--a-line);border-radius:8px;font:inherit}
.dcfs-todo{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--a-line)}
.dcfs-todo:last-child{border-bottom:none}
.dcfs-todo .t{flex:1;font-size:14px;color:var(--a-ink)}
.dcfs-todo .due{font-size:11.5px;color:var(--a-mut);white-space:nowrap}
.dcfs-todo.done .t{text-decoration:line-through;color:var(--a-mut)}
.dcfs-todo form{margin:0}
.dcfs-todo .tick{all:unset;cursor:pointer;width:19px;height:19px;border:1.5px solid var(--a-line);border-radius:6px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.dcfs-todo .tick:hover{border-color:var(--a-moss)}
.dcfs-todo.done .tick{background:var(--a-moss);border-color:var(--a-moss)}
.dcfs-todo .del{all:unset;cursor:pointer;color:var(--a-mut);font-size:13px;padding:3px 7px;border-radius:6px;flex:none}
.dcfs-todo .del:hover{background:var(--a-sage);color:var(--a-con)}

/* to-do boards (all lists side by side on the dashboard) */
.dcfs-boards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start}
@media(max-width:1280px){.dcfs-boards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:960px){.dcfs-boards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.dcfs-boards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dcfs-board{background:var(--a-sage);border:1px solid var(--a-line);border-radius:12px;padding:12px 12px 10px;min-width:0;display:flex;flex-direction:column}
.dcfs-board h3{font-size:12.5px;font-weight:700;margin:0 0 8px;color:var(--a-ink);display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1.3;overflow-wrap:anywhere}
.dcfs-board h3 .c{font-size:11px;color:var(--a-soft);font-weight:600;background:#fff;border:1px solid var(--a-line);border-radius:20px;padding:1px 8px;flex:none}
.dcfs-board .dcfs-todo{padding:7px 0;gap:8px;align-items:flex-start;border-bottom:1px solid rgba(60,78,64,.09)}
.dcfs-board .dcfs-todo:last-of-type{border-bottom:none}
.dcfs-board .dcfs-todo .t{font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.dcfs-board .dcfs-todo .tick{margin-top:1px}
.dcfs-board .dcfs-todoadd{margin:10px 0 0}
.dcfs-board .dcfs-todoadd input[type=text]{padding:6px 9px;font-size:12.5px;background:#fff}

/* Crymble Assistant */
.dcfs-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:8px;background:var(--a-moss);color:#fff;border:none;border-radius:99px;padding:12px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(20,30,20,.18)}
.dcfs-fab:hover{background:var(--a-moss-2);text-decoration:none;color:#fff}
.dcfs-fab .spark{font-size:15px}
.asst-bar{display:flex;gap:8px;margin-bottom:14px}
.asst-bar input{flex:1;padding:12px 14px;border:1px solid var(--a-line);border-radius:10px;font:inherit;font-size:15px;background:#fff}
.asst-bar input:focus{outline:none;border-color:var(--a-moss);box-shadow:0 0 0 3px rgba(60,78,64,.1)}
.asst-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.asst-chip{background:var(--a-panel);border:1px solid var(--a-line);border-radius:99px;padding:7px 13px;font-size:13px;color:var(--a-ink);box-shadow:var(--a-shadow)}
.asst-chip:hover{border-color:var(--a-moss);text-decoration:none}
.asst-card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:12px;box-shadow:var(--a-shadow);padding:14px 16px;margin-bottom:12px}
.asst-card h3{font-size:15px;margin:0 0 5px;font-weight:600}
.asst-card .src{font-size:11.5px;color:var(--a-mut);margin-top:9px}
.asst-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.asst-warn{display:block;background:var(--a-part-bg);border:1px solid #efe2c4;color:var(--a-part);font-size:12.5px;padding:8px 12px;border-radius:8px;margin-top:8px}
@media(max-width:880px){.dcfs-fab{right:14px;bottom:14px;padding:11px 15px}}

@media(max-width:880px){.dcfs-shell{grid-template-columns:1fr}.dcfs-side{position:static;height:auto}.dcfs-navtoggle{display:none}.dcfs-grid{grid-template-columns:repeat(2,1fr)}.dcfs-ops{grid-template-columns:1fr}.dcfs-tiles{grid-template-columns:repeat(2,1fr)}.dcfs-main{padding:20px}}

/* ============================================================
   iOS-premium layer — softer, calmer, touch-friendly. Brand kept.
   CSS only: no markup, routes, data or logic changed.
   ============================================================ */
:root{
  --a-radius:16px;
  --a-shadow:0 1px 2px rgba(20,30,20,.04),0 8px 24px -8px rgba(20,30,20,.10);
  --a-shadow-lift:0 2px 4px rgba(20,30,20,.05),0 18px 38px -10px rgba(20,30,20,.16);
}
/* calm motion, honouring reduced-motion */
.dcfs-btn,.dcfs-card,.dcfs-sec,.dcfs-tile,.dcfs-app__i,.asst-chip,.dcfs-stat,.dcfs-attn a{transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,background .16s ease,border-color .16s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* buttons → pill, generous touch target, soft press */
.dcfs-btn{border-radius:999px;padding:10px 18px;min-height:40px;font-weight:560;letter-spacing:.01em;box-shadow:0 1px 1px rgba(20,30,20,.04)}
.dcfs-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(20,30,20,.10)}
.dcfs-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(20,30,20,.08)}
.dcfs-btn--sm{padding:7px 14px;min-height:32px;font-size:12.5px}
.dcfs-btn--primary{box-shadow:0 2px 9px rgba(60,78,64,.22)}
.dcfs-btn--primary:hover{box-shadow:0 7px 18px rgba(60,78,64,.30)}
.dcfs-btn--gold{background:var(--a-gold);border-color:var(--a-gold);color:#fff}
.dcfs-btn--gold:hover{background:#876c37;color:#fff}
.dcfs-btn--danger{background:#fff;border-color:#e7ccc4;color:var(--a-con)}
.dcfs-btn--danger:hover{background:#fbeeea;border-color:var(--a-con)}
/* accessible keyboard focus everywhere */
a:focus-visible,.dcfs-btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--a-moss);outline-offset:2px}
/* cards & panels — softer edges, gentle lift */
.dcfs-card,.dcfs-sec{border-color:#eceee9;box-shadow:var(--a-shadow)}
.dcfs-card:hover{box-shadow:var(--a-shadow-lift);transform:translateY(-1px)}
.dcfs-sec__head{padding:16px 20px}
.dcfs-sec__head h2{font-weight:640;letter-spacing:-.01em}
/* calm input fields */
input:not([type=checkbox]):not([type=radio]),select,textarea{transition:border-color .14s ease,box-shadow .14s ease}
.dcfs-frow input:focus,.dcfs-frow select:focus,.dcfs-frow textarea:focus{outline:none;border-color:var(--a-moss);box-shadow:0 0 0 3px rgba(60,78,64,.13)}
/* sidebar — rounded active pill */
.dcfs-side{padding:18px 12px}
.dcfs-nav a{border-radius:10px;padding:9px 12px}
/* status chips — softer */
.b{padding:4px 11px}
/* lighter tiles, gentle hover */
.dcfs-tile{border-radius:13px}.dcfs-tile:hover{background:#f7f1e5}
/* opt-in: iOS segmented control */
.dcfs-seg{display:inline-flex;background:var(--a-sage);border-radius:13px;padding:3px;gap:2px}
.dcfs-seg a{padding:7px 15px;border-radius:10px;font-size:13px;color:var(--a-soft);font-weight:560;text-decoration:none}
.dcfs-seg a.is-active{background:#fff;color:var(--a-ink);box-shadow:0 1px 3px rgba(20,30,20,.13)}
/* opt-in: iOS toggle switch (class ios-sw on a checkbox) */
.ios-sw{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:99px;background:#d7dcd5;position:relative;cursor:pointer;flex:none;transition:background .18s ease;margin:0}
.ios-sw:checked{background:var(--a-moss)}
.ios-sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.ios-sw:checked::after{transform:translateX(18px)}
/* opt-in: progress ring (set style="--p:NN") */
.dcfs-ring{position:relative;width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(var(--a-moss) calc(var(--p,0)*1%),var(--a-sage) 0)}
.dcfs-ring::before{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:#fff}
.dcfs-ring>span{position:relative;font-size:11.5px;font-weight:700;color:var(--a-moss)}
/* opt-in: sticky action bar */
.dcfs-stickybar{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--a-line);padding:12px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* bigger, friendlier checkboxes/radios */
.dcfs-frow input[type=checkbox],.dcfs-frow input[type=radio]{width:18px;height:18px;accent-color:var(--a-moss)}

/* ---- Action sheet / bottom sheet ---- */
.ios-ovl{position:fixed;inset:0;background:rgba(20,30,20,.34);z-index:90;animation:iosovl .2s ease}
.ios-ovl.is-out{animation:iosovlout .22s ease forwards}
@keyframes iosovl{from{opacity:0}to{opacity:1}}@keyframes iosovlout{to{opacity:0}}
.ios-sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -12px 44px rgba(20,30,20,.22);transform:translateY(101%);transition:transform .28s cubic-bezier(.22,.61,.36,1);max-height:85vh;overflow:auto;padding:0 0 calc(14px + env(safe-area-inset-bottom,0))}
.ios-sheet.is-open{transform:translateY(0)}
.ios-sheet__grip{width:38px;height:5px;border-radius:3px;background:#d7dcd5;margin:10px auto 4px}
.ios-sheet h3{margin:6px 20px 6px;font-size:13px;color:var(--a-mut);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ios-sheet a,.ios-sheet .sheetbtn{display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;padding:15px 20px;font-size:16px;color:var(--a-ink);border:0;border-top:1px solid var(--a-line);background:none;text-align:left;cursor:pointer}
.ios-sheet a:hover,.ios-sheet .sheetbtn:hover{background:var(--a-sage);text-decoration:none}
.ios-sheet a:first-of-type{border-top:0}
.ios-sheet .ic{font-size:18px;width:24px;text-align:center;flex:none}
.ios-sheet .danger{color:var(--a-con)}
.ios-sheet .cancel{margin-top:8px;justify-content:center;font-weight:600;color:var(--a-soft)}
@media(min-width:781px){.ios-sheet{left:50%;right:auto;bottom:auto;top:50%;width:340px;border-radius:18px;transform:translate(-50%,-44%) scale(.98);opacity:0;transition:opacity .18s ease,transform .2s cubic-bezier(.22,.61,.36,1);max-height:80vh;box-shadow:0 24px 60px rgba(20,30,20,.28)}.ios-sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}.ios-sheet__grip{display:none}}

/* ---- Slide-in drawer ---- */
.ios-drawer{position:fixed;inset:0;z-index:95;pointer-events:none}
.ios-drawer__ov{position:absolute;inset:0;background:rgba(20,30,20,.3);opacity:0;transition:opacity .26s ease}
.ios-drawer__panel{position:absolute;top:0;right:0;height:100%;width:430px;max-width:92vw;background:#fff;box-shadow:-12px 0 44px rgba(20,30,20,.2);transform:translateX(101%);transition:transform .3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.ios-drawer.is-open{pointer-events:auto}.ios-drawer.is-open .ios-drawer__ov{opacity:1}.ios-drawer.is-open .ios-drawer__panel{transform:translateX(0)}
.ios-drawer__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--a-line)}
.ios-drawer__t{font-size:15px}
.ios-drawer__x{all:unset;cursor:pointer;font-size:17px;color:var(--a-soft);padding:5px 9px;border-radius:9px}
.ios-drawer__x:hover{background:var(--a-sage);color:var(--a-ink)}
.ios-drawer__frame{flex:1;border:0;width:100%}
@media(max-width:780px){.ios-drawer__panel{width:100%;max-width:100%;top:auto;bottom:0;height:90vh;border-radius:20px 20px 0 0;transform:translateY(101%)}.ios-drawer.is-open .ios-drawer__panel{transform:translateY(0)}}

/* ---- Swipe-to-reveal row ---- */
.swipe-wrap{position:relative;overflow:hidden}
.swipe{position:relative;background:#fff;will-change:transform}
.swipe-act{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center}

/* ===== WhatsApp conversations (dashboard panel + threads + chat view) ===== */
.dcfs-wathreads{display:flex;flex-direction:column}
.dcfs-wathread{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid var(--a-line);text-decoration:none;color:inherit;transition:background .12s}
.dcfs-wathread:last-child{border-bottom:0}
.dcfs-wathread:hover{background:rgba(60,78,64,.05)}
.dcfs-wathread__av{flex:0 0 40px;height:40px;border-radius:50%;background:var(--a-moss,var(--a-moss));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.dcfs-wathread__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dcfs-wathread__mid b{font-weight:600;font-size:14px}
.dcfs-wathread__snip{color:var(--a-soft,#6b746e);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcfs-wathread__meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--a-soft,#6b746e);font-size:12px}
.dcfs-wathread__b{background:#25D366;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.wa-thread{display:flex;flex-direction:column;gap:8px;padding:8px 4px 16px;max-height:60vh;overflow-y:auto}
.wa-b{max-width:74%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa-b__x{white-space:pre-wrap;word-wrap:break-word}
.wa-b__m{font-size:11px;color:var(--a-soft,#6b746e);margin-top:4px}
.wa-b--in{align-self:flex-start;background:#fff;border:1px solid var(--a-line);border-bottom-left-radius:4px}
.wa-b--out{align-self:flex-end;background:#d9fdd3;border:1px solid #bfeeb5;border-bottom-right-radius:4px}
.wa-b--out .wa-b__m{text-align:right}
.wa-composer{display:flex;gap:8px;align-items:flex-end;padding-top:10px;border-top:1px solid var(--a-line)}
.wa-b__who{font-size:12px;font-weight:700;color:var(--a-moss,var(--a-moss));margin-bottom:2px}

/* ===== Guided arrangement experience ===== */
.arr-guide{background:rgba(60,78,64,.05);border:1px solid var(--a-line);border-left:3px solid var(--a-moss,var(--a-moss));border-radius:10px;padding:12px 15px;margin:0 0 14px;font-size:13.5px;line-height:1.5}
.arr-guide__intro{color:var(--a-ink);font-weight:500}
.arr-guide__need,.arr-guide__cost{color:var(--a-soft,#6b746e);margin-top:5px}
.arr-prompt{margin-top:9px;background:rgba(201,138,43,.1);border:1px solid rgba(201,138,43,.35);border-radius:8px;padding:8px 11px;color:#7a5312}
.arr-next{margin-top:16px;display:flex;justify-content:flex-end}
.arr-track{display:flex;flex-direction:column}
.arr-track__row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--a-line);text-decoration:none;color:inherit;font-size:14px;transition:background .12s}
.arr-track__row:last-child{border-bottom:0}
.arr-track__row:hover{background:rgba(60,78,64,.05)}
.arr-track__dot{width:11px;height:11px;border-radius:50%;flex:none}
.arr-track__l{flex:1}
.arr-track__s{font-size:12.5px;font-weight:600;white-space:nowrap}

.arr-cost{border:1px solid var(--a-line);border-radius:10px;margin:0 0 14px;overflow:hidden}
.arr-cost__h{background:rgba(154,123,63,.1);color:#7a5312;font-size:12.5px;font-weight:600;padding:9px 14px;border-bottom:1px solid var(--a-line)}
.arr-cost__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--a-line);font-size:13.5px;margin:0}
.arr-cost__row:last-child{border-bottom:0}
.arr-cost__done{color:#2f8a6f;font-weight:600;font-size:12.5px;white-space:nowrap}

.coffin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:10px}
.coffin-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;border:1px solid var(--a-line);border-radius:10px;background:#fff;cursor:pointer;text-align:center;font:inherit;transition:border-color .12s,box-shadow .12s}
.coffin-card:hover{border-color:var(--a-moss,var(--a-moss))}
.coffin-card.is-sel{border-color:var(--a-gold,#9a7b3f);box-shadow:0 0 0 2px rgba(154,123,63,.28)}
.coffin-card__img{width:100%;height:92px;object-fit:cover;border-radius:7px}
.coffin-card__ph{width:100%;height:92px;display:flex;align-items:center;justify-content:center;background:var(--a-sage,#eef1ec);border-radius:7px;font-size:26px;color:var(--a-soft)}
.coffin-card__n{font-size:13px;font-weight:600;color:var(--a-ink);line-height:1.25}
.coffin-card__p{font-size:12.5px;color:var(--a-soft)}

/* ===== Funeral record — big, touch-first section buttons (iPad · phone · web) ===== */
.arr-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 18px}
.arr-tab{display:flex;align-items:center;gap:9px;padding:13px 14px;border:1px solid var(--a-line);border-radius:12px;background:#fff;text-decoration:none;color:var(--a-ink);font-weight:600;font-size:14px;line-height:1.2;transition:border-color .12s,box-shadow .12s,transform .06s}
.arr-tab:hover{border-color:var(--tc)}
.arr-tab:active{transform:scale(.98)}
.arr-tab__dot{width:11px;height:11px;border-radius:50%;background:var(--tc);flex:none}
.arr-tab.is-on{background:var(--tc);color:#fff;border-color:var(--tc);box-shadow:0 2px 8px var(--tc)44}
.arr-tab.is-on .arr-tab__dot{background:rgba(255,255,255,.9)}
@media(max-width:640px){.arr-tabs{grid-template-columns:repeat(2,1fr)}.arr-tab{padding:15px 13px;font-size:15px}}
.arr-saved{margin-left:10px;color:#2f8a6f;font-size:12.5px;font-weight:600;transition:opacity .4s}

/* ===== Funeral record — guided step-through flow ===== */
.arr-step{margin:0 0 12px}
.arr-step__bar{height:7px;background:var(--a-line);border-radius:4px;overflow:hidden;margin-bottom:9px}
.arr-step__fill{height:100%;background:var(--a-moss,var(--a-moss));border-radius:4px;transition:width .35s}
.arr-step__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.arr-step__lbl{font-weight:600;font-size:17px;color:var(--a-ink)}
.arr-step__n{font-size:12.5px;color:var(--a-soft);white-space:nowrap}
.arr-more{margin:0 0 16px}
.arr-more>summary{cursor:pointer;font-size:13px;color:var(--a-soft);padding:7px 0;list-style:none;font-weight:600}
.arr-more>summary::-webkit-details-marker{display:none}
.arr-more>summary::after{content:" ⌄"}
.arr-more[open]>summary::after{content:" ⌃"}
.arr-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.arr-nav .dcfs-btn{padding:13px 22px;font-size:15px}
.arr-nav__next{margin-left:auto}
@media(max-width:640px){.arr-nav{gap:8px}.arr-nav .dcfs-btn{flex:1;text-align:center;padding:15px 10px}}
.arr-need{margin-top:9px;background:rgba(47,138,111,.09);border:1px solid rgba(47,138,111,.32);border-radius:8px;padding:8px 11px;color:#1f5e4a;font-size:13px}
.arr-step__out{text-decoration:none;color:#c0392b;font-weight:600}

/* ===== Guided conversational arranger ===== */
.wiz{max-width:640px;margin:0 auto}
.wiz__log{display:flex;flex-direction:column;gap:10px;min-height:120px;margin-bottom:16px}
.wiz-b{max-width:82%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.45}
.wiz-b--bot{align-self:flex-start;background:#fff;border:1px solid var(--a-line);border-bottom-left-radius:5px}
.wiz-b--me{align-self:flex-end;background:var(--a-moss,var(--a-moss));color:#fff;border-bottom-right-radius:5px}
.wiz__input{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wiz-opt{font:inherit;font-weight:600;font-size:15px;padding:13px 18px;border:1px solid var(--a-line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s}
.wiz-opt:hover{border-color:var(--a-moss,var(--a-moss));background:rgba(60,78,64,.05)}
.wiz-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.wiz-text{flex:1;min-width:200px;padding:13px 15px;border:1px solid var(--a-line);border-radius:12px;font:inherit;font-size:16px}
.wiz-coffins{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;width:100%}
.wiz-coffin{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px;border:1px solid var(--a-line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;text-align:center}
.wiz-coffin:hover{border-color:var(--a-gold,#9a7b3f)}
.wiz-coffin img{width:100%;height:88px;object-fit:cover;border-radius:8px}
.wiz-coffin .ph{width:100%;height:88px;background:var(--a-sage,#eef1ec);border-radius:8px}
.wiz-coffin .nm{font-size:13px;font-weight:600}
.wiz-coffin .pr{font-size:12.5px;color:var(--a-soft)}
.wiz-coffin.is-sel{border-color:var(--a-gold,#9a7b3f);box-shadow:0 0 0 2px rgba(154,123,63,.3)}

/* ===== Top-bar search trigger ===== */
.dcfs-search{display:inline-flex;align-items:center;gap:8px;background:var(--a-panel);border:1px solid var(--a-line);color:var(--a-soft);
  padding:7px 10px;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;box-shadow:var(--a-shadow);margin-right:4px}
.dcfs-search:hover{border-color:var(--a-moss);color:var(--a-ink)}
.dcfs-search .ti{font-size:16px}
.dcfs-search kbd{font-family:inherit;font-size:11px;color:var(--a-mut);background:var(--a-bg);border:1px solid var(--a-line);border-radius:5px;padding:1px 5px}
@media(max-width:760px){.dcfs-search__t{display:none}.dcfs-search kbd{display:none}}

/* ===== ⌘K command palette ===== */
.dcfs-cmdk{position:fixed;inset:0;z-index:1000;display:none}
.dcfs-cmdk.is-open{display:block}
.dcfs-cmdk__ov{position:absolute;inset:0;background:rgba(20,28,22,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cmdkfade .16s ease}
.dcfs-cmdk__panel{position:relative;max-width:600px;margin:11vh auto 0;background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:16px;box-shadow:0 20px 60px rgba(20,30,20,.28),0 2px 8px rgba(20,30,20,.12);overflow:hidden;animation:cmdkpop .18s cubic-bezier(.22,.61,.36,1)}
@keyframes cmdkfade{from{opacity:0}to{opacity:1}}
@keyframes cmdkpop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.dcfs-cmdk__in{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--a-line)}
.dcfs-cmdk__in .ti{font-size:20px;color:var(--a-mut);flex:none}
.dcfs-cmdk__in input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--a-ink)}
.dcfs-cmdk__in kbd{font-family:inherit;font-size:11px;color:var(--a-mut);background:var(--a-bg);border:1px solid var(--a-line);border-radius:5px;padding:2px 6px;flex:none}
.dcfs-cmdk__list{max-height:52vh;overflow-y:auto;padding:6px}
.dcfs-cmdk__row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--a-ink);cursor:pointer}
.dcfs-cmdk__row:hover{text-decoration:none}
.dcfs-cmdk__row.is-sel{background:var(--a-sage)}
.dcfs-cmdk__row>.ti{font-size:18px;color:var(--a-moss);flex:none}
.dcfs-cmdk__lab{flex:1;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcfs-cmdk__lab small{font-weight:400;color:var(--a-mut);font-size:12.5px}
.dcfs-cmdk__type{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--a-mut);background:var(--a-bg);border:1px solid var(--a-line);border-radius:6px;padding:2px 7px;flex:none}
.dcfs-cmdk__empty{padding:26px;text-align:center;color:var(--a-mut);font-size:14px}
.dcfs-cmdk__hint{display:flex;gap:16px;padding:9px 18px;border-top:1px solid var(--a-line);color:var(--a-mut);font-size:11.5px;background:var(--a-bg)}
@media(max-width:600px){.dcfs-cmdk__panel{margin:0;max-width:none;height:100%;border-radius:0}.dcfs-cmdk__list{max-height:calc(100vh - 118px)}}

/* ===== Save-state indicator (sticky bar) ===== */
.dcfs-savestate{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--a-soft);transition:color .2s ease}
.dcfs-savestate .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dcfs-savestate.is-saved{color:#2f6b45}
.dcfs-savestate.is-saving{color:#8a6d3b}
.dcfs-savestate.is-saving .dot{animation:savepulse 1s ease-in-out infinite}
@keyframes savepulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ===== Toasts ===== */
.dcfs-toasts{position:fixed;right:20px;bottom:20px;z-index:1200;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.dcfs-toast{display:inline-flex;align-items:center;gap:9px;background:var(--a-side);color:#fff;padding:11px 15px;border-radius:12px;
  font-size:13.5px;font-weight:500;box-shadow:0 8px 28px rgba(20,30,20,.26);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .24s ease,transform .24s cubic-bezier(.22,.61,.36,1);max-width:340px}
.dcfs-toast.is-in{opacity:1;transform:none}
.dcfs-toast.is-out{opacity:0;transform:translateY(6px) scale(.98)}
.dcfs-toast .ti{font-size:17px;color:#8fd6a6;flex:none}
.dcfs-toast.is-error{background:#7a3327}
.dcfs-toast.is-error .ti{color:#ffc9bd}
@media(max-width:600px){.dcfs-toasts{right:12px;left:12px;bottom:12px;align-items:stretch}.dcfs-toast{max-width:none}}

/* ===== AI assistant panel (arrangement review) ===== */
.arr-ai__out{margin-top:12px}
.arr-ai__busy{padding:14px;color:var(--a-soft);font-size:13.5px;background:var(--a-bg);border-radius:10px;text-align:center}
.arr-ai__ok{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#eaf5ef;border:1px solid #bfe3cf;color:#1f5e4a;border-radius:10px;font-size:13.5px;font-weight:500}
.arr-ai__ok .ti{font-size:18px}
.arr-ai__list{display:flex;flex-direction:column;gap:7px}
.arr-ai__item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--a-line);border-radius:10px;background:var(--a-panel);font-size:13.5px;line-height:1.45}
.arr-ai__item .ti{font-size:17px;flex:none;margin-top:1px}
.arr-ai__item.ai-cost{border-left:3px solid var(--a-gold)}.arr-ai__item.ai-cost .ti{color:var(--a-gold)}
.arr-ai__item.ai-missing{border-left:3px solid #c0392b}.arr-ai__item.ai-missing .ti{color:#c0392b}
.arr-ai__item.ai-note{border-left:3px solid var(--a-rev)}.arr-ai__item.ai-note .ti{color:var(--a-rev)}
.arr-ai__draft{margin-bottom:12px}
.arr-ai__draft-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.arr-ai__draft-h strong{font-size:13px;color:var(--a-soft)}
.arr-ai__draft textarea{width:100%;border:1px solid var(--a-line);border-radius:10px;padding:11px 13px;font:inherit;font-size:13.5px;line-height:1.5;background:#fff;box-sizing:border-box;color:var(--a-ink);resize:vertical}

/* ===== Social Studio ===== */
.soc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.soc-field{margin-bottom:12px}
.soc-field__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.soc-field__h strong{font-size:13px;color:var(--a-soft)}
.soc-field textarea{width:100%;border:1px solid var(--a-line);border-radius:10px;padding:11px 13px;font:inherit;font-size:13.5px;line-height:1.5;background:#fff;box-sizing:border-box;color:var(--a-ink);resize:vertical}

/* ===== Collapsible sidebar areas ===== */
.dcfs-nav--pinned{margin-bottom:8px}
.dcfs-nav--pinned a{font-weight:500}
.dcfs-area{margin-bottom:1px}
.dcfs-area__h{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--a-side-mut);padding:10px 10px 8px;font-weight:700}
.dcfs-area__h:hover{color:var(--a-side-ink)}
.dcfs-area__h .chev{font-size:10px;opacity:.65;transition:transform .18s ease}
.dcfs-area.is-open>.dcfs-area__h{color:var(--a-side-ink)}
.dcfs-area.is-open>.dcfs-area__h .chev{transform:rotate(90deg)}
.dcfs-area__items{display:none}
.dcfs-area.is-open>.dcfs-area__items{display:block}

/* ===== WhatsApp desktop pop-out window ===== */
.wa-embed{padding:0}
.wa-embed .dcfs-sec{border-left:0;border-right:0;border-radius:0;margin:0;box-shadow:none}
.wa-embed__hd{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:0;position:sticky;top:0;background:#008069;z-index:5}
.wa-embed__hd b{font-size:17px;color:#fff;letter-spacing:.01em}
.wa-embed__hd .dcfs-btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.wa-embed__hd .dcfs-btn:hover{background:rgba(255,255,255,.28)}
.wa-embed .wa-search{margin:12px 12px 8px}
.wa-embed .dcfs-wathreads{max-height:none;padding:0 4px}
.wa-embed .dcfs-wathread{padding:11px 12px}
/* green header on an open conversation too */
.wa-embed .dcfs-sec__head{background:#008069;border-bottom:0;padding:11px 14px}
.wa-embed .dcfs-sec__head h2,.wa-embed .dcfs-sec__head h2 .dcfs-muted{color:#fff}
.wa-embed .dcfs-sec__head .dcfs-btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}

/* ===== Per-message actions in the WhatsApp thread ===== */
.wa-b .wa-act{margin-top:5px}
.wa-act__t{all:unset;cursor:pointer;font-size:15px;line-height:1;color:var(--a-mut);padding:2px 9px;border:1px solid var(--a-line);border-radius:8px;background:#fff}
.wa-act__t:hover{color:var(--a-ink);border-color:var(--a-moss)}
.wa-act__p{display:none;margin-top:6px;padding:9px;border:1px solid var(--a-line);border-radius:10px;background:#fff;box-shadow:var(--a-shadow);max-width:270px}
.wa-mf{margin:0 0 6px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.wa-mf:last-child{margin-bottom:0}
.wa-mi{all:unset;cursor:pointer;font-size:12.5px;padding:5px 9px;border:1px solid var(--a-line);border-radius:7px;background:var(--a-panel);white-space:nowrap}
.wa-mi:hover{border-color:var(--a-moss)}
.wa-sel{padding:4px 6px;border:1px solid var(--a-line);border-radius:7px;font:inherit;font-size:12.5px;max-width:130px}

/* ===== Social Studio — AI image ===== */
.soc-imggen{margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--a-line)}
.soc-img{margin-top:6px}
.soc-imgout{width:100%;max-width:380px;border-radius:12px;border:1px solid var(--a-line);display:block}

/* ===== Social Studio — multi-platform pack ===== */
.soc-plat{margin:0 0 16px;padding:12px 14px;border:1px solid var(--a-line);border-radius:12px;background:var(--a-bg)}
.soc-plat__h{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--a-moss)}

/* ===== WhatsApp-style skin (chat search + thread) ===== */
.wa-search{display:flex;align-items:center;gap:9px;background:#f0f2f5;border:1px solid var(--a-line);border-radius:10px;padding:8px 13px;margin:0 0 12px}
.wa-search .ti{color:var(--a-mut);font-size:17px}
.wa-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--a-ink)}
.wa-thread{background:#efeae2;background-image:radial-gradient(rgba(0,0,0,.018) 1px,transparent 1px);background-size:20px 20px;border-radius:10px;padding:14px 12px 16px;gap:3px}
.wa-b{position:relative;max-width:78%;box-shadow:0 1px .6px rgba(11,20,26,.13);border:0!important}
.wa-b--in{align-self:flex-start;background:#fff;border-radius:8px;border-top-left-radius:0}
.wa-b--out{align-self:flex-end;background:#d9fdd3;border-radius:8px;border-top-right-radius:0}
.wa-b--in::before{content:"";position:absolute;top:0;left:-7px;width:8px;height:12px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-b--out::before{content:"";position:absolute;top:0;right:-7px;width:8px;height:12px;background:#d9fdd3;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-b__m{font-size:10.5px;color:#667781;margin-top:2px;text-align:right}
.wa-b__who{color:#0b846b}
.wa-composer{background:#f0f2f5;border-top:0!important;padding:9px;border-radius:0 0 10px 10px;margin-top:2px}
.wa-composer textarea{border-radius:22px!important;background:#fff!important;padding-left:15px!important;padding-right:15px!important}
.wa-composer button{border-radius:22px!important}
@media(prefers-reduced-motion:no-preference){.wa-b{animation:wapop .12s ease}}
@keyframes wapop{from{opacity:.4;transform:translateY(2px)}to{opacity:1;transform:none}}

/* ===== User avatars + profile (Phase 0.2) ===== */
.dcfs-ava{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;background-size:cover;background-position:center;background-repeat:no-repeat;flex:none;vertical-align:middle;line-height:1;overflow:hidden;text-transform:uppercase}
.dcfs-user a:hover .dcfs-ava{box-shadow:0 0 0 2px var(--a-moss)}
.dcfs-uchip{display:inline-flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.dcfs-uchip--auto{color:var(--a-soft);font-weight:500}
.dcfs-uchip--auto .dcfs-ava{color:#fff}
.prof-sws{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:150px}
.prof-sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--a-line);cursor:pointer;padding:0;transition:transform .1s ease}
.prof-sw:hover{transform:scale(1.12)}
.prof-sw.is-sel{box-shadow:0 0 0 2px var(--a-moss)}
/* Phase 2: notifications bell + centre */
.dcfs-bellwrap{position:relative}
.dcfs-bell{position:relative;background:none;border:0;font-size:18px;line-height:1;cursor:pointer;padding:6px;border-radius:8px;color:var(--a-ink)}
.dcfs-bell:hover{background:var(--a-line)}
.dcfs-bell__c{position:absolute;top:-1px;right:-1px;min-width:16px;height:16px;padding:0 4px;background:#c0392b;color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.dcfs-bellpanel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--a-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:60}
.dcfs-bellpanel__h{padding:12px 14px;font-weight:700;border-bottom:1px solid var(--a-line);font-size:13px}
.dcfs-bellpanel__e{padding:22px 14px;text-align:center;color:var(--a-soft);font-size:13px}
.dcfs-bellitem{padding:10px 14px;border-bottom:1px solid var(--a-line)}
.dcfs-bellitem.is-new{background:#f3f8f5}
.dcfs-bellitem__t{font-size:13px;font-weight:600;color:var(--a-ink)}
.dcfs-bellitem__b{font-size:12px;color:var(--a-soft);margin-top:2px;white-space:pre-line;max-height:44px;overflow:hidden}
.dcfs-bellitem__m{font-size:11px;color:var(--a-soft);margin-top:4px}
.dcfs-bellpanel__f{display:block;padding:11px 14px;text-align:center;font-size:12.5px;font-weight:600;color:var(--a-moss);text-decoration:none}
.dcfs-bellpanel__f:hover{background:var(--a-line)}
.dcfs-notif{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:13px 18px;border-bottom:1px solid var(--a-line)}
.dcfs-notif.is-new{background:#f3f8f5}
.dcfs-notif__t{font-weight:600;font-size:14px;color:var(--a-ink);display:flex;align-items:center;gap:7px}
.dcfs-notif__dot{width:8px;height:8px;border-radius:50%;background:#2f8a6f;flex:none}
.dcfs-notif__b{font-size:13px;color:var(--a-soft);margin-top:3px;white-space:pre-line}
.dcfs-notif__meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
/* Phase 3: connected apps (SSO launcher) — own classes so they never clash with the dashboard app grid */
.dcfs-capps{display:grid;gap:12px;padding:16px 18px}
.dcfs-capp{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--a-line);border-radius:14px;background:#fff}
.dcfs-capp__i{font-size:24px;flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--a-sage);border-radius:12px}
.dcfs-capp__b{flex:1;min-width:0}
.dcfs-capp .dcfs-btn{margin-left:auto}

/* ===== WhatsApp Web-style two-pane standalone page (/admin/whatsapp) ===== */
.wa-web-body{margin:0;height:100vh;overflow:hidden;background:#fff}
.wa-web{display:grid;grid-template-columns:minmax(300px,370px) 1fr;height:100vh}
.wa-web__list{border-right:1px solid var(--a-line);display:flex;flex-direction:column;min-width:0;background:#fff}
.wa-web__lh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#008069;color:#fff;flex:none}
.wa-web__lh b{font-size:16px}
.wa-web__st{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.wa-web__list .wa-search{margin:10px 12px;flex:none}
.wa-web__items{flex:1;overflow-y:auto;padding:0 6px 10px}
.wa-web__items .dcfs-wathread{padding:10px 12px;border-radius:10px;border-bottom:1px solid var(--a-line)}
.wa-web__items .dcfs-wathread:hover{background:rgba(0,128,105,.06)}
.wa-web__items .dcfs-wathread.is-active{background:rgba(0,128,105,.12)}
.wa-web__main{position:relative;min-width:0;background:#efeae2}
.wa-web__frame{width:100%;height:100vh;border:0;display:block;background:#efeae2}
.wa-web__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--a-soft);background:#efeae2;gap:4px;padding:20px}
.wa-web__emoji{font-size:58px;opacity:.45}
.wa-web__empty p{font-size:19px;margin:8px 0 0;color:var(--a-ink);font-weight:600}
.wa-web__empty span{font-size:13px;max-width:320px}
.wa-web__back{display:none}
@media(max-width:780px){
  .wa-web{grid-template-columns:1fr}
  .wa-web__main{position:fixed;inset:0;z-index:40;transform:translateX(100%);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
  .wa-web.is-open .wa-web__main{transform:none}
  .wa-web__back{display:inline-flex;align-items:center;position:absolute;top:10px;left:10px;z-index:42;background:#008069;color:#fff;border:0;border-radius:20px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
}

/* ===== iOS dashboard refinements (frosted header, glossy app icons, calmer rhythm) ===== */
.dcfs-top{position:sticky;top:0;z-index:30;margin:-26px -34px 22px;padding:20px 34px 15px;
  background:rgba(246,247,245,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(60,78,64,.07)}
.dcfs-top h1{font-size:25px;letter-spacing:-.02em}
/* iOS home-screen app icons: soft depth + glossy top-light + lift on hover */
.dcfs-app__i{box-shadow:0 5px 14px rgba(20,30,20,.15)}
.dcfs-app__i::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.26),rgba(255,255,255,0) 52%)}
.dcfs-app:hover .dcfs-app__i{transform:translateY(-3px);box-shadow:0 11px 24px rgba(20,30,20,.20)}
/* a touch more air between widgets */
.dcfs-sec{margin-bottom:22px;border-radius:18px}
.dcfs-card{border-radius:18px}
.dcfs-grouplabel{margin-top:4px}
@media(max-width:880px){.dcfs-top{margin:-20px -20px 16px;padding:16px 20px 12px}}
/* ---- Phone-first shell: off-canvas sidebar drawer + fixed bottom tab bar ---- */
.dcfs-mobnav,.dcfs-mnav-back{display:none}
@media(max-width:880px){
  .dcfs-shell{display:block}
  .dcfs-side{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;height:100vh;z-index:60;overflow-y:auto;transform:translateX(-103%);transition:transform .22s ease;box-shadow:0 0 44px rgba(15,25,18,.34);will-change:transform}
  .dcfs-mnav-open .dcfs-side{transform:translateX(0)}
  .dcfs-mnav-back{display:block;position:fixed;inset:0;background:rgba(16,24,18,.46);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s ease}
  .dcfs-mnav-open .dcfs-mnav-back{opacity:1;pointer-events:auto}
  .dcfs-main{padding:16px 15px calc(84px + env(safe-area-inset-bottom))}
  .dcfs-navtoggle{display:none}
  .dcfs-fab{display:none}
  .dcfs-mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:58;background:var(--a-side);border-top:1px solid rgba(255,255,255,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:stretch;box-shadow:0 -6px 20px rgba(15,25,18,.2)}
  .dcfs-mobnav a,.dcfs-mobnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--a-side-mut);font:inherit;font-size:10px;text-decoration:none;padding:4px 2px;cursor:pointer;min-width:0}
  .dcfs-mobnav a.is-active{color:#fff}
  .dcfs-mobnav .mi{font-size:20px;line-height:1}
  .dcfs-mobnav a:active,.dcfs-mobnav button:active{opacity:.6}
}
/* ---- Responsive foundation: office monitors (1920/2560) → laptops → tablets → phones ---- */
/* Guarantee no page-level horizontal scrollbar. overflow-x:clip (not hidden) so position:sticky
   sidebar/headers keep working. */
body.dcfs{overflow-x:clip}
/* Media never overflows its container. */
img,svg,video,canvas{max-width:100%}
/* Long unbroken strings (emails, URLs, references) wrap instead of pushing the layout wide. */
.text-wrap{overflow-wrap:anywhere;word-break:break-word}
/* Reusable scroll container for wide data tables: <div class="table-wrapper"><table>… */
.table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Flex/grid children must be allowed to shrink below their content's intrinsic width,
   otherwise long labels/tables force the whole track (and page) wider. */
.dcfs-ops>*,.dcfs-grid>*,.dcfs-tiles>*,.dcfs-boards>*,.grid-stack-item>*{min-width:0}

/* ═══ Imported design: theme toggle + dark-mode hardening ═══ */
/* Topbar light/dark toggle */
.dcfs-themebtn{all:unset;cursor:pointer;font-size:16px;line-height:1;padding:7px;border-radius:9px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.dcfs-themebtn:hover{background:var(--a-sage)}
/* Form controls follow the theme everywhere (light: white as before; dark: raised surface).
   Placed last so it wins over component-level `background:#fff`; brand inputs using !important keep their colour. */
body.dcfs input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
body.dcfs select,body.dcfs textarea{background:var(--raise);color:var(--text)}
/* Re-point the surfaces that hardcode light colours so they read correctly on the dark ground.
   Duplicated across the explicit toggle and the OS-preference selector; branded colours (WhatsApp) left intact. */
:root[data-theme="dark"] .dcfs-attn a,
:root[data-theme="dark"] .dcfs-board h3 .c,
:root[data-theme="dark"] .dcfs-seg a.is-active,
:root[data-theme="dark"] .arr-tab,
:root[data-theme="dark"] .coffin-card,
:root[data-theme="dark"] .wiz-opt,:root[data-theme="dark"] .wiz-coffin,:root[data-theme="dark"] .wiz-b--bot,
:root[data-theme="dark"] .dcfs-bellpanel,
:root[data-theme="dark"] .dcfs-capp,
:root[data-theme="dark"] .ios-sheet,:root[data-theme="dark"] .ios-drawer__panel,
:root[data-theme="dark"] .dcfs-app__b{background:var(--surface)}
:root[data-theme="dark"] .dcfs-tile:hover,
:root[data-theme="dark"] .dcfs-tbl tr:hover td,
:root[data-theme="dark"] .dcfs-recnote,
:root[data-theme="dark"] .dcfs-bellitem.is-new,:root[data-theme="dark"] .dcfs-notif.is-new{background:var(--surface-2)}
:root[data-theme="dark"] .b--new,:root[data-theme="dark"] .b--reviewing,:root[data-theme="dark"] .b--accepted,:root[data-theme="dark"] .b--rejected{border-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dcfs-attn a,
:root:not([data-theme="light"]) .dcfs-board h3 .c,
:root:not([data-theme="light"]) .dcfs-seg a.is-active,
:root:not([data-theme="light"]) .arr-tab,
:root:not([data-theme="light"]) .coffin-card,
:root:not([data-theme="light"]) .wiz-opt,:root:not([data-theme="light"]) .wiz-coffin,:root:not([data-theme="light"]) .wiz-b--bot,
:root:not([data-theme="light"]) .dcfs-bellpanel,
:root:not([data-theme="light"]) .dcfs-capp,
:root:not([data-theme="light"]) .ios-sheet,:root:not([data-theme="light"]) .ios-drawer__panel{background:var(--surface)}
:root:not([data-theme="light"]) .dcfs-tile:hover,
:root:not([data-theme="light"]) .dcfs-tbl tr:hover td,
:root:not([data-theme="light"]) .dcfs-recnote,
:root:not([data-theme="light"]) .dcfs-bellitem.is-new,:root:not([data-theme="light"]) .dcfs-notif.is-new{background:var(--surface-2)}
:root:not([data-theme="light"]) .b--new,:root:not([data-theme="light"]) .b--reviewing,:root:not([data-theme="light"]) .b--accepted,:root:not([data-theme="light"]) .b--rejected{border-color:transparent}}

/* ============================================================
   iPad & touch layer — the Hub is worked from an iPad daily.
   Three jobs: kill Safari's zoom-on-focus, finger-size every
   control, and let wide tables scroll inside their own card.
   `body.dcfs` prefixes beat the inline DASH_CW_CSS block that
   appears later in the document at equal specificity.
   ============================================================ */
@media (pointer:coarse){
  /* 1 — Safari zooms the whole page when a focused control is under 16px.
     Force 16px on touch devices; !important also beats inline font-sizes
     (e.g. the Team board's ⇄ hand-over select). */
  body.dcfs input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
  body.dcfs select,body.dcfs textarea{font-size:16px !important;min-height:42px}
  body.dcfs select.dcfs-mini{min-height:38px;padding:7px 10px}
  /* 2 — Finger-sized targets (Apple HIG: ≥44pt for primary, ≥38 for dense lists) */
  body.dcfs .dcfs-btn--sm{min-height:38px;padding:9px 16px}
  body.dcfs .dcfs-todo{padding:11px 0}
  body.dcfs .dcfs-todo .tick{width:27px;height:27px;border-radius:8px;font-size:15px}
  body.dcfs .dcfs-todo .del{padding:9px 12px;font-size:15px}
  body.dcfs .cwd-td{padding:12px 10px}
  body.dcfs .cwd-td__box{width:23px;height:23px;border-radius:7px}
  body.dcfs .dcfs-min-btn{padding:10px 12px}
  body.dcfs .cwd-attn__it{padding:16px 20px}
  body.dcfs .cwd-l{padding:15px 16px}
  /* 3 — Hover lift effects are meaningless on touch and cause sticky-hover
     states after a tap — hold everything still. */
  body.dcfs .dcfs-btn:hover,body.dcfs .dcfs-tile:hover,body.dcfs .asst-chip:hover{transform:none}
  body.dcfs .dcfs-app:hover .dcfs-app__i{transform:none}
}
/* 4 — Wide data tables scroll inside their card, never the page.
   (:has is fine on iPadOS 16+; older engines just keep today's behaviour.) */
.dcfs-sec__body:has(> .dcfs-tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
.dcfs-sec__body:has(> .dcfs-tbl) .dcfs-tbl{min-width:560px}
/* 5 — iPad landscape (881–1200px: full sidebar but a narrow content column):
   calmer main padding and two-up stat tiles so cards keep breathing room. */
@media (min-width:881px) and (max-width:1200px){
  .dcfs-main{padding:22px 24px}
  .dcfs-tiles{grid-template-columns:repeat(2,1fr)}
  .dcfs-boards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 6 — iPad portrait (641–880px: phone shell active): the drawer + bottom bar
   stay, but give content tablet-grade padding rather than phone-tight. */
@media (min-width:641px) and (max-width:880px){
  .dcfs-main{padding:20px 24px calc(88px + env(safe-area-inset-bottom))}
}

/* ── Outlook mail panel ─────────────────────────────────────────────────────
   Unread is carried by weight and a gold dot, not colour alone, so it still
   reads in dark mode and for anyone who does not separate the two easily. */
.dcfs-mail{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:start;padding:9px 20px;text-decoration:none;color:inherit;border-bottom:1px solid var(--hair)}
.dcfs-mail:last-child{border-bottom:0}
.dcfs-mail:hover{background:var(--surface-2);text-decoration:none}
.dcfs-mail__dot{width:7px;height:7px;border-radius:99px;background:transparent;margin-top:6px;flex:none}
.dcfs-mail.is-unread .dcfs-mail__dot{background:var(--gold)}
.dcfs-mail__b{min-width:0;display:flex;flex-direction:column;gap:1px}
.dcfs-mail__from{font-size:12.5px;color:var(--muted)}
.dcfs-mail.is-unread .dcfs-mail__from{color:var(--text);font-weight:600}
.dcfs-mail__subj{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcfs-mail.is-unread .dcfs-mail__subj{font-weight:600}
.dcfs-mail__prev{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcfs-mail__when{font-size:11.5px;color:var(--faint);white-space:nowrap;margin-top:2px}

/* ── WhatsApp panel legibility ──────────────────────────────────────────────
   The conversation is identified by WHO it is with, so the name carries the
   weight and the preview recedes. Previously both sat at similar size and
   colour and the name was lost in the message text. */
.dcfs-wathread__mid b{font-size:14.5px;font-weight:650;letter-spacing:-.005em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.dcfs-wathread__snip{font-size:12.5px;color:var(--faint);line-height:1.3}
.dcfs-wathread__av{font-size:15px}
/* Unread pulls the whole row forward rather than relying on the green pill alone. */
.dcfs-wathread:has(.dcfs-wathread__b) .dcfs-wathread__mid b{font-weight:750}
.dcfs-wathread:has(.dcfs-wathread__b) .dcfs-wathread__snip{color:var(--muted)}
/* Reply box — the point of the panel, so it should read as the primary action. */
.dcfs-wareply{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--a-line);background:var(--surface-2)}
.dcfs-wareply input{flex:1;padding:10px 13px;border:1px solid var(--border-2);border-radius:10px;font:inherit;font-size:13.5px;background:var(--raise);color:var(--text)}
.dcfs-wareply input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* ── Collapsed panels should read as collapsed ──────────────────────────────
   .is-min hides the body, leaving a bare header that is indistinguishable from
   a panel that loaded nothing. The Outlook calendar sat collapsed and was read
   as broken more than once. Say so, and make the chevron findable. */
.is-min .dcfs-sec__head::after{content:"collapsed";margin-left:auto;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:99px;padding:2px 9px;white-space:nowrap}
.is-min .dcfs-sec{border-style:dashed}
.dcfs-min-btn{color:var(--muted)}
.dcfs-min-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   iOS-style refresh (2026-08-14)
   Kept as one appended block rather than rewritten through the file, so it
   reads as a single decision and can be lifted out in one piece if it isn't
   wanted. It only retunes surfaces, radii, type and controls — no layout is
   moved, so every existing page keeps its structure.
   The heritage green stays the accent: this is iOS's *manner*, not its palette.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Apple's own text stack first, so macOS/iOS get SF Pro and Windows gets
     Segoe UI Variable; Public Sans remains the fallback. */
  --a-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI","Public Sans",system-ui,sans-serif;
  /* Rounder, in iOS's proportions: controls ~12, cards ~18. */
  --r:12px; --r-lg:18px; --r-sm:9px;
  --a-radius:18px;
  /* Shadows are near-invisible in iOS — depth comes from separation, not drop. */
  --shadow-sm:0 1px 2px rgba(31,58,44,.04);
  --shadow-md:0 6px 24px rgba(31,58,44,.07);
  --a-shadow:var(--shadow-sm);
  /* A touch cooler and flatter behind the content, so white cards lift.
     Set --bg, NOT --a-bg: the alias chain is --a-bg:var(--bg), and pinning the
     alias froze the page background light in dark mode. */
  --bg:#EFEAE0;
  /* iOS's own fill is ~10%, but that sits on a grey grouped background. Ours
     sit on white cards, where 10% is invisible and a field's edge disappears —
     .16 is the point where the boundary reads without looking like a box. */
  --ios-fill:rgba(120,120,128,.16);
  --ios-sep:rgba(60,60,67,.13);       /* iOS hairline separator */
}
:root[data-theme="dark"]{
  --ios-fill:rgba(120,120,128,.24);
  --ios-sep:rgba(255,255,255,.10);
}

body.dcfs{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}

/* ── Top bar: sticky and translucent, the way an iOS navigation bar behaves ── */
.dcfs-top{
  position:sticky;top:0;z-index:40;
  margin:-18px -22px 22px;padding:14px 22px;
  background:color-mix(in srgb,var(--a-bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--ios-sep);
}
.dcfs-toprow h1{letter-spacing:-.022em;font-weight:700}

/* ── Sidebar: iPad-sidebar manner — selected row is a filled rounded pill,
      section headers are quiet uppercase labels, rows breathe. ── */
.dcfs-side{padding:20px 12px}
.dcfs-nav a{border-radius:10px;padding:9px 11px;font-size:14px;margin-bottom:2px;transition:background .15s ease}
.dcfs-nav a.is-active{background:rgba(255,255,255,.14);font-weight:600}
.dcfs-area__h{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.dcfs-nav--pinned{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.10)}

/* ── Cards and sections: iOS "inset grouped" — generous radius, hairline
      instead of a drawn border, white against the tinted page. ── */
.dcfs-card,.dcfs-sec{border-radius:var(--r-lg);border:1px solid var(--ios-sep);background:var(--raise)}
.dcfs-card{padding:18px 20px}
.dcfs-card .v{letter-spacing:-.025em;font-weight:700}
.dcfs-card .k{font-size:13px}
.dcfs-sec__head{padding:16px 20px;border-bottom:1px solid var(--ios-sep)}
.dcfs-sec__body{padding:18px 20px}

/* Table rows read as list rows: inset separators, no lines at the outer edge. */
.dcfs-tbl th{border-bottom:1px solid var(--ios-sep);font-size:11.5px;letter-spacing:.05em;padding:11px 20px}
.dcfs-tbl td{padding:13px 20px;border-bottom:1px solid var(--ios-sep)}
.dcfs-tbl tr:last-child td{border-bottom:0}

/* ── Controls ── */
.dcfs-btn{
  border-radius:11px;padding:9px 15px;font-weight:590;letter-spacing:-.01em;
  border:1px solid transparent;background:var(--ios-fill);color:var(--a-ink);
  transition:transform .12s ease,filter .15s ease;
}
.dcfs-btn:hover{filter:brightness(.97)}
.dcfs-btn:active{transform:scale(.97)}          /* the small press iOS gives you */
.dcfs-btn--primary{background:var(--a-moss);border-color:transparent;color:#fff}
.dcfs-btn--gold{background:var(--a-gold);border-color:transparent;color:#fff}
.dcfs-btn--danger{background:color-mix(in srgb,var(--alert) 14%,transparent);border-color:transparent;color:var(--alert)}

.dcfs-field label{font-size:13px;color:var(--a-soft);letter-spacing:-.005em}
.dcfs-field input,.dcfs-field select,.dcfs-field textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;font-size:15px;font-family:inherit;
  border:1px solid transparent;border-radius:11px;color:var(--a-ink);
}
/* The theme rule above (`body.dcfs input:not(...)`) sets every control to
   var(--raise) and outranks a plain `.dcfs-field input`, so the fill has to be
   restated at the same weight. Same negations, plus the field class. */
body.dcfs .dcfs-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
body.dcfs .dcfs-field select,
body.dcfs .dcfs-field textarea{background:var(--ios-fill)}
body.dcfs .dcfs-field input:focus,
body.dcfs .dcfs-field select:focus,
body.dcfs .dcfs-field textarea:focus{background:var(--raise)}
.dcfs-field input:focus,.dcfs-field select:focus,.dcfs-field textarea:focus{
  outline:none;background:var(--raise);border-color:var(--a-moss);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--a-moss) 18%,transparent);
}

/* Segmented control: grey track, white selected pill — straight from iOS. */
.dcfs-seg{background:var(--ios-fill);border-radius:11px;padding:2px}
.dcfs-seg button{border-radius:9px;padding:6px 14px;font-size:13.5px;font-weight:560;border:0;background:transparent;color:var(--a-ink);cursor:pointer}
.dcfs-seg button.is-active{background:var(--raise);box-shadow:0 1px 3px rgba(0,0,0,.10);font-weight:620}

/* ── .dcfs-input ───────────────────────────────────────────────────────────
   Used all over the Hub — search boxes, pickers, the call-note panel — and it
   had no styling whatsoever, so every one of them rendered as a raw browser
   control with hard square edges. Same treatment as the .dcfs-field controls
   above; restated at the weight of the theme rule so the fill actually lands. */
.dcfs-input{
  box-sizing:border-box;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid transparent;border-radius:11px;color:var(--a-ink);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
body.dcfs input.dcfs-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
body.dcfs select.dcfs-input,
body.dcfs textarea.dcfs-input{background:var(--ios-fill)}
body.dcfs .dcfs-input:focus{
  outline:none;background:var(--raise);border-color:var(--a-moss);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--a-moss) 18%,transparent);
}
.dcfs-input::placeholder{color:var(--a-mut)}
.dcfs-input--sm{padding:8px 11px;font-size:14px;border-radius:9px}

/* Call note: a form people use with a phone against their ear, so it is capped
   at a readable measure instead of stretching the full width of a monitor. */
.cn-form{max-width:760px}
.cn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cn-grid--3{grid-template-columns:1.2fr 1fr 1fr}
.cn-lab{display:block;font-size:12.5px;font-weight:600;color:var(--a-soft);margin:0 0 4px}
.cn-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.cn-later{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid var(--ios-sep)}
@media (max-width:760px){ .cn-grid,.cn-grid--3{grid-template-columns:1fr} }

/* Calls taken today, listed under the call-note form. Rows, not a table: it is
   a running log to glance down, not data to compare column by column. */
.cn-today{margin-top:16px;padding-top:14px;border-top:1px solid var(--ios-sep)}
.cn-today__h{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--a-soft);margin-bottom:6px}
.cn-list{list-style:none;margin:0;padding:0}
.cn-item{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--ios-sep);font-size:14px}
.cn-item:last-child{border-bottom:0}
.cn-time{flex:0 0 42px;color:var(--a-mut);font-variant-numeric:tabular-nums;font-size:13px}
.cn-body{flex:1 1 auto;min-width:0}
.cn-note{display:block;color:var(--a-soft);font-size:13.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-via{flex:0 0 auto;font-size:12px;color:var(--a-mut);white-space:nowrap}

/* Per-row tools on the calls list: quiet until you look for them. */
.cn-tools{flex:0 0 auto;display:flex;gap:2px;opacity:.45;transition:opacity .15s ease}
.cn-item:hover .cn-tools,.cn-tools:focus-within{opacity:1}
.cn-x{all:unset;cursor:pointer;padding:2px 6px;border-radius:7px;font-size:13px;line-height:1;color:var(--a-soft)}
.cn-x:hover{background:var(--ios-fill);color:var(--a-ink)}
.cn-item.is-done{opacity:.5}
.cn-item.is-done .cn-body b{text-decoration:line-through}

/* Arrangement notes — a running log per funeral. Entries read as a column of
   short records: stamp line, then what was said. */
.arrn-add{margin:0 0 16px}
.arrn-add__row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.arrn-list{list-style:none;margin:0;padding:0}
.arrn-item{padding:11px 0;border-bottom:1px solid var(--ios-sep)}
.arrn-item:last-child{border-bottom:0}
.arrn-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--a-mut);margin-bottom:3px}
.arrn-when{font-variant-numeric:tabular-nums}
.arrn-cat{background:var(--ios-fill);border-radius:999px;padding:2px 9px;color:var(--a-soft);font-weight:600}
.arrn-who{margin-left:auto;font-weight:600;color:var(--a-soft)}
.arrn-body{font-size:14.5px;line-height:1.55;color:var(--a-ink);white-space:pre-wrap}
.arrn-x{all:unset;cursor:pointer;padding:1px 6px;border-radius:6px;color:var(--a-mut);font-size:12px;opacity:.5}
.arrn-item:hover .arrn-x{opacity:1}
.arrn-x:hover{background:var(--ios-fill);color:var(--alert)}
.arrn-follow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:10px;border-top:1px dashed var(--ios-sep)}
.arrn-follow__l{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--a-mut)}

/* Family page link — pinned above every arrangement record so it is always to
   hand, rather than living on one tab behind a "create link" button. */
.arc-famlink{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;background:var(--a-sage);border:1px solid var(--ios-sep);border-radius:var(--r-lg)}
.arc-famlink__l{font-size:12.5px;font-weight:700;color:var(--a-soft);white-space:nowrap}
.arc-famlink__in{flex:1 1 260px;min-width:0;padding:8px 11px;border:1px solid transparent;border-radius:10px;background:var(--raise);font:inherit;font-size:13px;color:var(--a-ink)}
@media (max-width:640px){ .arc-famlink__l{flex:1 1 100%} }

/* Dashboard to-dos: one block per list, each with its own name and add box. */
.cwd-tdlists{display:flex;flex-direction:column;gap:14px}
.cwd-tdlist{border:1px solid var(--ios-sep);border-radius:var(--r);padding:10px 12px;background:var(--raise)}
.cwd-tdlist__h{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cwd-tdlist__h b{font-size:14px;color:var(--a-ink)}
.cwd-tdlist__n{margin-left:auto;font-size:11.5px;color:var(--a-mut);white-space:nowrap}
.cwd-tdlist__empty{margin:2px 0 4px;font-size:12.5px;color:var(--a-mut)}
.cwd-tdlist__more{display:inline-block;margin:2px 0 4px;font-size:12px;color:var(--a-soft)}
.cwd-td__due{margin-left:auto;font-size:11px;color:var(--a-mut);white-space:nowrap}
.cwd-td__due.is-over{color:var(--alert);font-weight:700}
.cwd-td__due.is-today{color:var(--gold);font-weight:700}
.cwd-tdadd{display:flex;gap:6px;margin-top:8px}
.cwd-tdadd__in{flex:1;min-width:0;padding:7px 10px;border:1px solid transparent;border-radius:9px;background:var(--ios-fill);font:inherit;font-size:13px;color:var(--a-ink)}
.cwd-tdadd__in:focus{outline:none;background:var(--raise);border-color:var(--a-moss)}
.cwd-tdadd__b{all:unset;cursor:pointer;padding:0 11px;border-radius:9px;background:var(--a-moss);color:#fff;font-size:15px;line-height:1;display:flex;align-items:center}
.cwd-tdadd__b:hover{filter:brightness(1.08)}

/* Each to-do list is its own dashboard card now, so it needs the card's own
   breathing room rather than the tighter in-card block spacing. */
.cwd-tdcard .cwd-tdbody{padding:2px 0 0}
.cwd-tdcard .cwd-td{display:flex;align-items:center;gap:8px}

/* Draggable dashboard panels. The grab cursor only appears on the card's
   heading, so text inside a panel can still be selected normally. */
.cwd-slot{position:relative}
.cwd-slot .cwd-hd{cursor:grab}
.cwd-slot .cwd-hd:active{cursor:grabbing}
.cwd-slot.is-dragging{opacity:.4;transform:scale(.99)}
.cwd-slot.is-dragging .cwd-card{outline:2px dashed var(--a-moss);outline-offset:3px}
.cwd-dnd-hint{font-size:12px;color:var(--a-mut);margin:0 0 10px}

/* Panel size + colour, chosen per user from the toolbar on each card. */
:root{--slot-green:#3C4E40;--slot-gold:#B08830;--slot-sage:#7C9784;--slot-blue:#3C6580;--slot-rose:#A24A38;--slot-plum:#6B4A6B}
.cwd.cwd--slots > .cwd-slot.is-w4{grid-column:span 4}
.cwd.cwd--slots > .cwd-slot.is-w6{grid-column:span 6}
.cwd.cwd--slots > .cwd-slot.is-w8{grid-column:span 8}
.cwd.cwd--slots > .cwd-slot.is-w12{grid-column:1 / -1}
@media (max-width:1100px){ .cwd.cwd--slots > .cwd-slot.is-w4{grid-column:span 6} .cwd.cwd--slots > .cwd-slot.is-w8{grid-column:1 / -1} }
@media (max-width:760px){ .cwd.cwd--slots > .cwd-slot{grid-column:1 / -1 !important} }

.cwd-slot[data-accent] > .cwd-card,
.cwd-slot[data-accent] > .dcfs-sec{border-top:3px solid var(--slot-accent);}
.cwd-slot[data-accent="green"]{--slot-accent:var(--slot-green)}
.cwd-slot[data-accent="gold"]{--slot-accent:var(--slot-gold)}
.cwd-slot[data-accent="sage"]{--slot-accent:var(--slot-sage)}
.cwd-slot[data-accent="blue"]{--slot-accent:var(--slot-blue)}
.cwd-slot[data-accent="rose"]{--slot-accent:var(--slot-rose)}
.cwd-slot[data-accent="plum"]{--slot-accent:var(--slot-plum)}

/* The toolbar stays out of the way until the panel is hovered. */
.cwd-tools{position:absolute;top:6px;right:8px;z-index:3;display:flex;gap:3px;align-items:center;
  padding:3px 5px;border-radius:999px;background:var(--raise);border:1px solid var(--ios-sep);
  box-shadow:0 2px 8px rgba(0,0,0,.08);opacity:0;transition:opacity .15s ease;pointer-events:none}
.cwd-slot:hover .cwd-tools,.cwd-tools:focus-within{opacity:1;pointer-events:auto}
.cwd-tools__b{all:unset;cursor:pointer;font-size:11px;line-height:1;padding:3px 4px;border-radius:5px;color:var(--a-soft)}
.cwd-tools__b:hover{background:var(--ios-fill);color:var(--a-ink)}
.cwd-tools__sep{width:1px;height:12px;background:var(--ios-sep);margin:0 2px}
.cwd-tools__c{all:unset;cursor:pointer;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.cwd-tools__c:hover{transform:scale(1.2)}

/* ── Paper notice editor ─────────────────────────────────────────── */
.npx{margin:0 0 14px;padding:14px;border:1px solid var(--a-line);border-radius:14px;background:var(--a-card,#fff)}
.npx + .npx{margin-top:0}
.npx__top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.npx__top .dcfs-input{max-width:220px}
.npx .arrn-price{font-size:12.5px;font-weight:600;color:var(--a-part,#8a6d3b)}
.npx__del{margin-left:auto;border:1px solid var(--a-line);background:transparent;color:var(--a-muted,#6b7280);
  border-radius:9px;width:28px;height:28px;line-height:1;cursor:pointer;font-size:13px}
.npx__del:hover{border-color:#d98a8a;color:#b44;background:#fdf3f3}
.npx__ta{width:100%;box-sizing:border-box;border:1px solid var(--a-line);border-radius:11px;padding:11px 12px;
  font:inherit;font-size:14px;line-height:1.55;background:var(--a-bg2,#fbfbfa);color:inherit;resize:vertical}
.npx__ta:focus{outline:none;border-color:var(--a-accent,#3d6b52);box-shadow:0 0 0 3px rgba(61,107,82,.12)}

/* Preview and price sit side by side on a desk, stacked on a phone. */
.npx__out{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;margin-top:12px;align-items:start}
@media (max-width:640px){.npx__out{grid-template-columns:minmax(0,1fr)}}

/* The preview is the paper's column, so it is set the way the paper sets it:
   a narrow justified measure in a condensed face, the name in bold, and exactly
   as wide as the lines being counted — the wrap you see is the wrap being
   charged for. The line numbers sit outside the column in a gutter so the
   printed text is not disturbed by them. */
.npx__prev{border:1px solid var(--a-line);border-radius:11px;padding:12px;background:#fff;
  max-height:300px;overflow:auto}
.npx__paper{display:inline-block;padding:8px 10px;background:#fff;border:1px solid #e3e3e0}
.npx__line{display:flex;gap:9px;align-items:baseline}
.npx__no{color:#b9bec3;min-width:1.5em;text-align:right;user-select:none;
  font:11px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;flex:none}
/* The measure is set so a full 24-character line very nearly fills it — the
   words then close up the way they do in print instead of drifting apart. */
.npx__txt{display:block;width:140px;color:#111;
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;
  font-size:13px;line-height:1.42;text-align:justify;text-align-last:justify;
  hyphens:none;overflow-wrap:normal}
/* The closing line of a notice is set short, not stretched across the column. */
.npx__txt--last{text-align-last:left}
.npx__txt b{font-weight:700}
.npx__empty{color:var(--a-muted,#9aa3ab);font-style:italic;font-size:13px}
.npx__calc{border:1px solid var(--a-line);border-radius:11px;padding:11px 12px;background:var(--a-sage,#eef3ec);
  font-size:12.5px;line-height:1.6}
.npx__calc b{display:block;margin-bottom:3px;font-size:13px}
.npx__cost{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--a-line);
  font-size:14.5px;font-weight:700;color:var(--a-accent,#3d6b52)}
.npx__total{margin:4px 0 12px;font-size:14px}
.npx__add{margin-top:4px}
.npx__add > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--a-accent,#3d6b52);
  padding:8px 2px;list-style:none}
.npx__add > summary::-webkit-details-marker{display:none}
.npx__add[open] > summary{margin-bottom:8px}
/* The shared actions bar carries a 30px bottom margin for page-level use; inside
   a notice card it needs the space above it instead. */
.npx .dcfs-actions{margin:14px 0 0}

/* ── The deceased header ─────────────────────────────────────────────────────
   Carried on every screen of a funeral record and at the head of every printed
   sheet. The person leads; everything else is data around them.
   Rules that must not be undone: the portrait is not a control and nothing
   happens to it on hover; the name never ellipses and never drops below 20px;
   with no photograph the frame holds initials, never a silhouette.            */
.dh{container-type:inline-size;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:20px;align-items:center;padding:18px 26px;
  background:var(--a-panel,#fff);border-bottom:1px solid var(--a-line);
  view-transition-name:deceased-header}
.dh-pcol{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.dh-portrait{display:block;width:60px;aspect-ratio:4/5;margin:0;flex:none;
  border:1px solid var(--a-line);background:var(--a-bg);overflow:hidden;
  view-transition-name:deceased-portrait}
.dh-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* no photograph: a nameplate, not a silhouette */
.dh-plate{display:grid;place-items:center;background:var(--a-sage,#eef1e6);
  border-color:var(--a-line);box-shadow:inset 0 0 0 2px #fff}
.dh-plate span{font-family:var(--a-serif);font-size:17px;line-height:1;
  letter-spacing:.06em;padding-left:.06em;white-space:nowrap;color:var(--a-soft)}
.dh-portrait.plate-sm{display:block;width:34px;margin-top:1px}
.dh-plate.plate-sm span{font-size:12px;letter-spacing:.04em;padding-left:.04em}
.dh-up{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.dh-add{font:inherit;font-size:11px;color:var(--a-soft);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;background:none;border:0;padding:0}
.dh-add:hover{color:var(--a-moss)}
.dh-add:focus-within,.dh-add:focus-visible{outline:2px solid var(--a-moss);outline-offset:2px}
.dh-idcol{min-width:0}
.dh-name{margin:0;font-family:var(--a-serif);font-weight:400;font-size:29px;
  line-height:1.08;letter-spacing:-.012em;color:var(--a-ink);
  text-wrap:pretty;overflow-wrap:break-word}
.dh-dates{margin:3px 0 0;font-size:13px;color:var(--a-soft);font-variant-numeric:tabular-nums}
.dh-dates .sep{padding:0 .45em;color:var(--a-line)}
.dh-meta{margin:0;display:flex;gap:26px}
.dh-meta dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a-soft)}
.dh-meta dd{margin:1px 0 0;font-size:13px;color:var(--a-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dh-meta dd.ref{font-family:var(--a-serif);font-size:15px}
.dh-meta dd a{color:inherit}
/* the family's side: warmer, larger, less data */
.dh--family{background:#fff;padding:20px 22px;column-gap:22px;grid-template-columns:auto minmax(0,1fr)}
.dh--family .dh-portrait{width:76px}
.dh--family .dh-plate span{font-size:22px}
.dh--family .dh-name{font-size:30px}
/* narrow: a phone, or a split pane. Container query, not viewport. */
@container (max-width:640px){
  .dh{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px;padding:10px 14px}
  .dh-portrait{width:44px}
  .dh-name{font-size:20px}
  .dh-plate span{font-size:13px}
  .dh-meta{grid-column:1 / -1;gap:18px;border-top:1px solid var(--a-line);padding-top:8px}
}
@container (max-width:380px){.dh-meta div:nth-child(n+3){display:none}}
@media print{
  .dh{position:static;background:#fff;border-bottom:1.5pt solid #000;padding:0 0 8pt;break-inside:avoid}
  .dh *{color:#000}
  .dh-portrait{width:18mm;border-color:#000}
  .dh-portrait img{filter:grayscale(1) contrast(1.05)}
  .dh-name{font-size:17pt}
  .dh-up{display:none}
}
thead .dh{display:grid}