@font-face{font-family:'Cutesy';src:url(/static/fonts/Cutesy.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Montserrat';src:url(/static/fonts/Montserrat-Light.woff2) format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Montserrat';src:url(/static/fonts/Montserrat-Regular.woff2) format('woff2');font-weight:400 500;font-display:swap;}
@font-face{font-family:'Montserrat';src:url(/static/fonts/Montserrat-SemiBold.woff2) format('woff2');font-weight:600 800;font-display:swap;}

/* =====================================================================
   Bloom Platform — shared design system
   Tokens, shell and reusable components. Individual staff templates
   should lean on the classes defined here rather than re-declaring them.
   Light-first; dark honoured via prefers-color-scheme and [data-theme].
   ===================================================================== */

:root,:root[data-theme="light"]{
  color-scheme:light;
  --ground:#fbfcf9;--panel:#fff;--panel2:#f3f7f4;--line:#e3eae4;--line2:#d3ded6;
  --ink:#243029;--ink2:#5d6d63;--ink3:#8a988f;
  --sage:#8cb8a0;--sage-deep:#4c7a61;--sage-ink:#39604b;--sage-tint:#e9f1ec;--sage-tint2:#dce9e1;
  --coral:#f79a6f;--coral-deep:#c85f31;--coral-tint:#fdeee6;
  --danger:#b3564d;--danger-tint:#f9ebe9;
  --on-sage:#20372a;
  --shadow:0 1px 2px rgba(36,48,41,.05),0 8px 24px -12px rgba(36,48,41,.12);
  --shadow-lift:0 2px 4px rgba(36,48,41,.06),0 18px 40px -18px rgba(36,48,41,.20);
  --radius:13px;--radius-sm:9px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#181d1a;--panel:#202722;--panel2:#262e28;--line:#2e372f;--line2:#3a453b;
  --ink:#e8ede9;--ink2:#a9b5ac;--ink3:#77837a;
  --sage:#9cc5ad;--sage-deep:#a8d0b9;--sage-ink:#c4e0cf;--sage-tint:#2a352d;--sage-tint2:#31403a;
  --coral:#f7a37c;--coral-deep:#f7b191;--coral-tint:#3a2c23;
  --danger:#d98a82;--danger-tint:#392724;
  --on-sage:#122019;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.6);
}
/* dark is opt-in via the toggle only — platform defaults to light */
@media (prefers-color-scheme:dark){
  :root[data-theme="dark"]{
    --ground:#181d1a;--panel:#202722;--panel2:#262e28;--line:#2e372f;--line2:#3a453b;
    --ink:#e8ede9;--ink2:#a9b5ac;--ink3:#77837a;
    --sage:#9cc5ad;--sage-deep:#a8d0b9;--sage-ink:#c4e0cf;--sage-tint:#2a352d;--sage-tint2:#31403a;
    --coral:#f7a37c;--coral-deep:#f7b191;--coral-tint:#3a2c23;
    --danger:#d98a82;--danger-tint:#392724;
    --on-sage:#122019;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lift:0 2px 4px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;margin:0;}
html{color-scheme:light dark;}
body{background:var(--ground);color:var(--ink);font-family:'Montserrat',system-ui,sans-serif;font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--sage-deep);}
h1,h2,h3,h4{line-height:1.2;}

/* ---- brand type ---- */
.brand-script,.wordmark{font-family:'Cutesy',cursive;color:var(--sage-deep);font-weight:400;}

/* ---- generic helpers ---- */
.muted{color:var(--ink3);}
.num{font-variant-numeric:tabular-nums;}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
hr.split,.split{border:none;border-top:1px solid var(--line);margin:18px 0;}

/* ============================ buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--sage);color:var(--on-sage);font-weight:700;font-size:13px;border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 18px;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.2;transition:filter .12s ease,background .12s ease,border-color .12s ease;}
.btn:hover{filter:brightness(.96);}
.btn:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px;}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.btn.small{padding:7px 13px;font-size:12px;}
.btn.tiny{padding:5px 12px;font-size:11px;border-radius:99px;}
.btn.block{width:100%;}
/* secondary / ghost — no colour weight, for "not the primary action" */
.btn.ghost,.btn.quiet{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);font-weight:600;}
.btn.ghost:hover,.btn.quiet:hover{background:var(--panel);border-color:var(--line2);filter:none;}
.btn.outline{background:transparent;color:var(--sage-ink);border:1px dashed var(--line2);font-weight:600;}
.btn.outline:hover{border-color:var(--sage);filter:none;}
/* danger / destructive — coral is legitimate attention here */
.btn.danger{background:var(--coral-tint);color:var(--coral-deep);border:1px solid var(--coral);}
.btn.danger:hover{background:var(--coral);color:var(--on-sage);filter:none;}

/* ============================ forms ============================ */
input,select,textarea{font-family:inherit;font-size:13.5px;border:1px solid var(--line2);border-radius:var(--radius-sm);padding:9px 12px;width:100%;background:var(--panel);color:var(--ink);}
/* selects: consistent custom chevron in both themes (muted grey reads on light + dark) */
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23848E86' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
select::-ms-expand{display:none;}
/* checkboxes & radios: brand accent instead of the browser default blue */
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--sage-deep);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sage);outline-offset:0;border-color:var(--sage);}
input::placeholder,textarea::placeholder{color:var(--ink3);}
label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:block;margin:14px 0 5px;}
label.inline,.checkline{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);display:flex;align-items:center;gap:8px;cursor:pointer;}
label .opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink3);}
/* two-column form body */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;align-items:start;}
.form-grid .col-2{grid-column:1 / -1;}
.form-grid > .field:nth-child(-n+2) label,.form-grid > div:nth-child(-n+2) label{margin-top:0;}
.field label{margin-top:14px;}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px;}
.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.inline-form > div{flex:1;min-width:160px;}
.inline-form select,.inline-form input{width:100%;}
.inline-form label{margin-top:0;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}.form-grid > .field:nth-child(2) label,.form-grid > div:nth-child(2) label{margin-top:14px;}}

/* ============================ cards ============================ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;min-width:0;}
.card + .card{margin-top:16px;}
.card.flush{padding:8px 20px;}
.card.pad0{padding:0;}
.card.tint{background:linear-gradient(140deg,var(--sage-tint),var(--panel));}
.card.hint{background:var(--panel2);border-style:dashed;box-shadow:none;}
.card-title{font-weight:700;font-size:13.5px;margin-bottom:4px;color:var(--ink);}
/* uppercase section label inside a card */
.sect{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px;}
.sect + .sect,.card > .sect ~ .sect{margin-top:18px;}
.chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.chead h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);}
.chead a{font-size:11.5px;color:var(--sage-deep);font-weight:600;text-decoration:none;}
.chead a:hover{text-decoration:underline;}

/* ============================ page shell (base.html) ============================ */
.navtoggle{display:none;}
.appframe{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh;background:var(--ground);}
.appside{background:var(--panel2);border-right:1px solid var(--line);padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow:hidden;}
.logoplate{padding:6px 10px 5px;margin:0 4px 6px;display:flex;justify-content:flex-start;text-decoration:none;}
.wordmark{font-size:26px;line-height:1.15;}
.logoplate img{width:104px;height:auto;display:block;}
.ngroup{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:7px 10px 2px;}
/* main nav scrolls independently; Settings / My profile stay pinned in .sidefoot.
   The sticky ::after paints a bottom fade only while there is more nav to scroll. */
.navscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.navscroll::after{content:"";position:sticky;bottom:0;display:block;height:20px;margin-top:-20px;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--panel2));}
.appnav{display:flex;flex-direction:column;gap:2px;}
.appnav a,.appnav .navbtn{display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:8px;color:var(--ink2);text-decoration:none;font-weight:500;font-size:12.8px;font-family:inherit;background:none;border:none;width:100%;cursor:pointer;text-align:left;line-height:1.35;transition:background .12s ease,color .12s ease;}
.appnav a:hover,.appnav .navbtn:hover{background:var(--sage-tint);color:var(--sage-ink);}
.appnav a:focus-visible,.appnav .navbtn:focus-visible{outline:2px solid var(--sage);outline-offset:1px;}
.appnav a.on{background:var(--sage);color:var(--on-sage);font-weight:600;}
.appnav a.on svg{stroke:var(--on-sage);}
.appnav svg{width:15px;height:15px;stroke:var(--ink3);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.appnav a:hover svg,.appnav .navbtn:hover svg{stroke:var(--sage-ink);}
.appnav .dot{margin-left:auto;background:var(--coral);color:#5c2a10;font-size:10px;font-weight:700;border-radius:99px;padding:1px 7px;}
.sidefoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}

.appmain{display:flex;flex-direction:column;min-width:0;}
.apptop{display:flex;align-items:center;gap:12px;padding:11px 22px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:30;}
.pagetitle{font-size:13px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scope{display:inline-flex;align-items:center;gap:7px;background:var(--sage-tint);color:var(--sage-ink);font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--sage-tint2);white-space:nowrap;}
.scope svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;flex:none;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.apptop .envtag{position:static;}
.iconbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:var(--panel);cursor:pointer;color:var(--ink2);flex:none;}
.iconbtn:hover{border-color:var(--line2);background:var(--panel2);}
.iconbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.avatar{width:32px;height:32px;border-radius:99px;background:var(--sage);color:var(--on-sage);font-weight:700;font-size:12px;display:grid;place-items:center;flex:none;}
.appcontent{padding:26px 24px 46px;flex:1;min-width:0;}
.pagewrap{max-width:1180px;margin:0 auto;}
.pagewrap[style*='max-width']{max-width:1180px!important;}
.hamb{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:var(--panel);place-items:center;flex:none;}
.hamb svg{width:16px;height:16px;stroke:var(--ink2);stroke-width:2;fill:none;stroke-linecap:round;}
.envtag{position:fixed;top:10px;right:12px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;}

/* impersonation banner */
.imp-banner{position:sticky;top:0;z-index:200;background:var(--coral);color:#5c2a10;padding:7px 16px;font-size:12.5px;font-weight:600;display:flex;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap;}
.imp-banner button{background:#5c2a10;color:#fff;border:none;border-radius:99px;padding:3px 12px;font-size:11.5px;font-weight:700;cursor:pointer;}

@media (max-width:980px){
  .appframe{grid-template-columns:1fr;}
  .appside{display:none;position:static;height:auto;overflow:visible;}
  .navtoggle:checked ~ .appframe .appside{display:flex;}
  .navscroll{flex:none;overflow:visible;}
  .navscroll::after{display:none;}
  .hamb{display:grid;}
  .appcontent{padding:20px 14px 40px;}
}

/* ============================ page header ============================ */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.page-head .titles{min-width:0;}
.page-head h1{font-family:'Montserrat',system-ui,sans-serif;font-weight:600;font-size:23px;color:var(--ink);line-height:1.15;letter-spacing:-.01em;}
.page-head .page-sub,.page-sub{color:var(--ink2);font-size:12.5px;margin-top:4px;}
.page-head .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.page-head .pill,.page-head .tag{vertical-align:middle;}
/* breadcrumb / back-link above a title */
.back,.topnav{font-size:12.5px;margin-bottom:6px;color:var(--ink3);}
.back a,.topnav a{text-decoration:none;font-weight:600;color:var(--sage-deep);}
.back a:hover,.topnav a:hover{text-decoration:underline;}

/* ============================ sub-navigation tabs ============================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.tab{border:1px solid var(--line2);border-radius:99px;padding:5px 14px;font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none;background:var(--panel);cursor:pointer;transition:background .12s ease,color .12s ease;}
.tab:hover{background:var(--panel2);color:var(--ink);}
.tab.on{background:var(--sage);color:var(--on-sage);border-color:var(--sage);}
/* right-aligned primary-coloured tab (e.g. New tour) */
.tab.cta{margin-left:auto;background:var(--sage);color:var(--on-sage);border-color:var(--sage);font-weight:700;}
.tab.cta:hover{background:var(--sage);color:var(--on-sage);filter:brightness(.96);}

/* ============================ pills / status ============================ */
.pill{display:inline-block;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 9px;white-space:nowrap;vertical-align:middle;line-height:1.55;}
/* semantic variants — the canonical vocabulary */
.pill.ok,.pill.good,.pill.success{background:var(--sage-tint);color:var(--sage-ink);}    /* positive / active (tinted) */
.pill.soft{background:var(--sage-tint2);color:var(--sage-ink);}                            /* mild positive / in-progress */
.pill.neutral,.pill.info{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);} /* informational */
.pill.warn,.pill.attn,.pill.pending{background:var(--coral-tint);color:var(--coral-deep);}/* NEEDS ATTENTION only */
.pill.bad,.pill.danger,.pill.error{background:var(--danger-tint);color:var(--danger);}    /* error / declined */
.pill.quiet{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);}
.pill.mute,.pill.off{background:transparent;color:var(--ink3);border:1px dashed var(--line2);} /* inactive / dismissed */

/* --- domain status pills (st-*) : one canonical semantic mapping --- */
.st-open,.st-confirmed,.st-approved,.st-enrolled,.st-hired,.st-published,.st-in_progress,
.st-interview_booked,.st-interviewed,.st-offered,.st-fulfilled,.st-accepted,.st-join,
.st-started{background:var(--sage);color:var(--on-sage);}
.st-active,.st-scheduled,.st-dispatched,.st-done,.st-complete,.st-shortlisted,.st-waitlisted,
.st-registered,.st-entered_ccms,.st-interview_requested,.st-ok,.st-receipt{background:var(--sage-tint2);color:var(--sage-ink);}
.st-completed,.st-deferred,.st-prospect,.st-future_potential,.st-pending,.st-submitted,
.st-archived,.st-closed{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);}
.st-requested,.st-awaiting_approval,.st-applied,.st-draft,.st-over,.st-void,.st-interview_requested_new{background:var(--coral-tint);color:var(--coral-deep);}
.st-no_show,.st-declined,.st-unsuccessful,.st-issue{background:var(--danger-tint);color:var(--danger);}
.st-cancelled,.st-exited,.st-aged_out,.st-none,.st-todo,.st-unqualified,.st-withdrawn,.st-retired,.st-inactive{background:transparent;color:var(--ink3);border:1px dashed var(--line2);}

/* --- kind tags (k-*) : informational categories --- */
.k-tour{background:var(--sage);color:var(--on-sage);}
.k-call,.k-receipt,.k-waitlist,.k-term{background:var(--sage-tint2);color:var(--sage-ink);}
.k-web,.k-neutral,.k-adjust{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);}
.k-walkin,.k-grey{background:var(--line);color:var(--ink2);}
.k-email,.k-import,.k-training{background:transparent;color:var(--ink3);border:1px dashed var(--line2);}
.k-issue{background:var(--coral-tint);color:var(--coral-deep);}
/* small neutral category chip (e.g. budget category) */
.tag,.cat{display:inline-block;font-size:11px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);padding:1px 8px;border-radius:99px;white-space:nowrap;}
.badge-attn{display:inline-block;background:var(--coral-tint);color:var(--coral-deep);border-radius:8px;font-size:11.5px;font-weight:700;padding:2px 9px;}
.attn{color:var(--coral-deep);font-weight:700;}
.neg,.over{color:var(--coral-deep);font-weight:700;}

/* ============================ flash / notices ============================ */
.flash{background:var(--sage-tint);color:var(--sage-ink);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;font-weight:600;margin:0 0 16px;}
.flash.ok,.flash-ok{background:var(--sage-tint);color:var(--sage-ink);}
.flash.warn,.flash-warn{background:var(--coral-tint);color:var(--coral-deep);}
.flash.err,.flash.error{background:var(--danger-tint);color:var(--danger);}
.error{background:var(--danger-tint);color:var(--danger);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;margin-top:14px;}
.error.flush,.flash.flush{margin:0 0 16px;}
/* free-text message / body panel */
.msg{background:var(--panel2);border-radius:11px;padding:12px 16px;font-size:13.5px;margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere;}

/* ============================ key / value ============================ */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:7px 18px;font-size:13px;align-items:baseline;}
.kv .k{color:var(--ink3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.kv .v{overflow-wrap:anywhere;}
.two-col{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
@media (max-width:820px){.two-col,.grid2{grid-template-columns:1fr;}}

/* ============================ result meta / count ============================ */
.count{color:var(--ink2);font-size:12.5px;margin:16px 2px 6px;}
.count b{color:var(--ink);}
.footnote{color:var(--ink3);font-size:11.5px;margin:14px 2px 0;}

/* ============================ data tables ============================ */
/* real <table> */
.data-table{width:100%;border-collapse:collapse;font-size:12.7px;}
.data-table th{text-align:left;padding:12px 16px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line);white-space:nowrap;}
.data-table td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover td{background:var(--panel2);}
.data-table td.num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.data-table a{font-weight:700;text-decoration:none;color:var(--ink);}
.data-table a:hover{color:var(--sage-deep);}
.tablecard{padding:0;overflow-x:auto;}
/* generic grid-row "table" chrome — pages set their own grid-template-columns */
.drow{display:grid;gap:14px;padding:11px 4px;border-top:1px solid var(--line);align-items:center;font-size:13px;}
.drow:first-of-type{border-top:none;}
.drow.head{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:6px 4px;}
.drow .num{text-align:right;font-variant-numeric:tabular-nums;justify-self:end;}

/* ============================ empty states ============================ */
.empty{color:var(--ink3);padding:30px 4px;text-align:center;font-size:12.5px;}
.empty::before{content:'';display:block;width:84px;height:58px;margin:0 auto 10px;background:url(/static/brand-sprig.png) center/contain no-repeat;opacity:.55;}
.empty a{font-weight:600;}
.empty .em-lead{display:block;font-family:'Cutesy',cursive;font-size:22px;color:var(--sage-deep);margin-bottom:4px;}
.empty svg{width:26px;height:26px;stroke:var(--sage);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;opacity:.8;}

/* ============================ pagination ============================ */
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12.5px;color:var(--ink2);}
.pager a{font-weight:700;text-decoration:none;}
.pager a:hover{text-decoration:underline;}
.pager .off{color:var(--ink3);font-weight:600;}

/* ============================ note lists ============================ */
.note-row{padding:10px 2px;border-top:1px solid var(--line);font-size:13px;}
.note-row:first-of-type{border-top:none;}
.note-meta{color:var(--ink3);font-size:11.5px;margin-top:2px;}
.note-body{white-space:pre-wrap;overflow-wrap:anywhere;}

/* ============================ responsive utility ============================ */
@media (max-width:820px){.hide-sm{display:none!important;}}

/* ============================ leaf divider (tasteful garden touch) ============================ */
.leafdiv{display:flex;align-items:center;gap:12px;margin:30px 0 20px;color:var(--sage-deep);}
.leafdiv::before,.leafdiv::after{content:"";height:1px;background:var(--line2);flex:1;}
.leafdiv svg{width:18px;height:18px;fill:var(--sage);flex:none;}

/* ============================ dashboard (role-aware home) ============================ */
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.greet h1{font-family:'Cutesy',cursive;font-weight:400;font-size:34px;color:var(--sage-deep);line-height:1.1;text-wrap:balance;}
.greet p{color:var(--ink2);font-size:12.5px;margin-top:4px;}
.greet .daymeta,.fortnight{font-size:11.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);padding:6px 12px;border-radius:var(--radius-sm);text-align:right;line-height:1.6;font-variant-numeric:tabular-nums;}
.greet .daymeta b,.fortnight b{color:var(--ink);}
.dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.dgrid .card{grid-column:span 6;}
.dgrid .card.w4{grid-column:span 4;}
.dgrid .card.w8{grid-column:span 8;}
.dgrid .card.w12{grid-column:span 12;}
.qactions{display:flex;gap:10px;flex-wrap:wrap;}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.modcard{display:block;border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--panel2);text-decoration:none;transition:border-color .12s ease;}
.modcard:hover{border-color:var(--sage);}
.modcard b{color:var(--ink);font-size:12.8px;}
.modcard span{display:block;color:var(--ink3);font-size:11.3px;margin-top:2px;line-height:1.45;}
.dash-note{margin-top:16px;font-size:11px;color:var(--ink3);text-align:center;}
@media (max-width:980px){.dgrid .card,.dgrid .card.w4,.dgrid .card.w8,.dgrid .card.w12{grid-column:span 12;}}

.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:14px;}
.wgrid .card{display:flex;flex-direction:column;gap:7px;}
.kpi{font-size:31px;font-weight:800;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.kpi small{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:0;}
.kpi.over{color:var(--coral-deep);}
.ksub{font-size:11.6px;color:var(--ink2);line-height:1.45;}
.kfoot{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;}
.kfoot a{text-decoration:none;}
.kfoot a:hover{text-decoration:underline;}
.allclear{font-size:15px;font-weight:700;color:var(--sage-deep);padding:7px 0 2px;}
.wbar{height:8px;border-radius:99px;background:var(--sage-tint2);overflow:hidden;display:flex;margin:2px 0;}
.wbar i{display:block;height:100%;background:var(--sage);}
.wbar i.over{background:var(--coral);}
.blegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink2);}
.blegend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;background:var(--sage);}
.wrow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.3px;}
.wrow:last-of-type{border-bottom:none;}
.wrow time{color:var(--ink3);font-size:11px;white-space:nowrap;padding-top:1px;}
.linkcard{background:linear-gradient(135deg,var(--sage-tint),var(--panel));}
.hintcard{background:var(--panel2);border-style:dashed;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* remove duplicate page title in topbar (page-head h1 carries it) */
.apptop .pagetitle{display:none;}

/* mobile: horizontal-scroll tables (prevents header/value overlap & right-edge clipping) */
@media (max-width:760px){
  /* make the table itself the horizontal-scroll container — guaranteed no overlap/clip */
  .tablecard,.card:has(.data-table){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .data-table{min-width:640px;}
  .data-table th,.data-table td{white-space:nowrap;}
  .tablecard{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* mobile: grid-row 'tables' (.drow/.brow) scroll horizontally inside their card instead of collapsing */
@media (max-width:760px){
  .card:has(.drow),.card:has(.brow){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .drow,.brow{min-width:560px;}
}

/* ===== Rich dashboard widgets (design-direction fidelity) ===== */
.dwrap{display:grid;grid-template-columns:repeat(12,1fr);gap:15px;align-items:stretch;}
.dwrap .card + .card{margin-top:0;}
.dwrap .card{grid-column:span 4;min-width:0;}
.dwrap .card.w6{grid-column:span 6;} .dwrap .card.w8{grid-column:span 8;} .dwrap .card.w12{grid-column:span 12;}
.dwrap .wchead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.dwrap .wchead h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);}
.dwrap .wchead a{font-size:11.5px;color:var(--sage-deep);font-weight:600;text-decoration:none;}
.dwrap .wchead a:hover{text-decoration:underline;}
.dwrap .bignum{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);}
.dwrap .bignum small{font-size:12.5px;color:var(--ink2);font-weight:500;letter-spacing:0;}
.dwrap .bar{height:9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);margin:10px 0 6px;overflow:hidden;display:flex;}
.dwrap .bar i{display:block;height:100%;}
.dwrap .bar .spent{background:var(--sage);} .bar .pend{background:var(--coral);opacity:.75;}
.dwrap .blegend{display:flex;gap:14px;font-size:11px;color:var(--ink2);margin-bottom:10px;flex-wrap:wrap;}
.dwrap .blegend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;}
.dwrap .brow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12.3px;gap:8px;}
.dwrap .brow .bdesc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dwrap .brow .cat{color:var(--ink2);font-size:11px;background:var(--panel2);border:1px solid var(--line);padding:1px 8px;border-radius:99px;white-space:nowrap;flex:none;}
.dwrap .brow .amt{font-variant-numeric:tabular-nums;font-weight:600;margin-left:auto;flex:none;white-space:nowrap;}
.dwrap .brow .amt.over{color:var(--coral-deep);}
/* "Open budgets →" on its own line under the card title (never wraps into a sliver) */
.dwrap .wcmore{display:block;font-size:11.5px;color:var(--sage-deep);font-weight:600;text-decoration:none;margin:-6px 0 10px;}
.dwrap .wcmore:hover{text-decoration:underline;}
.dwrap .wrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12.6px;}
.dwrap .wrow:first-of-type{border-top:0;}
.dwrap .wrow time{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600;min-width:92px;font-size:12px;flex:none;}
.dwrap .wrow .who{flex:1 1 auto;min-width:0;}
.dwrap .wrow .who b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .wrow .who span{display:block;color:var(--ink3);font-size:11.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dwrap .wrow .pill{margin-left:auto;flex:none;white-space:nowrap;}
/* tinted centre chip on widget rows (All-centres scope only) */
.dwrap .cpill{flex:none;text-transform:none;letter-spacing:.02em;}
.dwrap .wrow .cpill{margin-left:auto;}
.dwrap .wrow .cpill ~ .pill{margin-left:0;}
/* status pill abbreviation at phone widths ("Awaiting Approval" → "Approval") */
.dwrap .p-abbr{display:none;}
@media (max-width:480px){.dwrap .p-full{display:none;}.dwrap .p-abbr{display:inline;}}
/* greeting attention checklist (deep links share widget queries; count can't drift) */
.attn-list{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:7px;}
.attn-list a{font-size:12px;font-weight:600;color:var(--coral-deep);text-decoration:none;}
.attn-list a:hover{text-decoration:underline;}
/* phone: budget rows wrap instead of horizontal-scrolling; category chip drops out */
@media (max-width:760px){
  .dwrap .card:has(.brow){overflow:visible;}
  .dwrap .brow{min-width:0;flex-wrap:wrap;row-gap:2px;}
  .dwrap .brow .cat{display:none;}
}
.dwrap .stripe{width:3px;align-self:stretch;border-radius:2px;flex:none;min-height:30px;}
.dwrap .stripe.hi{background:var(--coral);} .stripe.md{background:#e0b24a;} .stripe.lo{background:var(--sage);} .stripe.def{background:var(--line2);}
.dwrap .steps{display:flex;align-items:center;gap:0;margin:14px 0 8px;}
.dwrap .step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;font-size:10.6px;color:var(--ink3);text-align:center;}
.dwrap .step i{width:22px;height:22px;border-radius:99px;border:2px solid var(--line2);background:var(--panel);display:grid;place-items:center;font-style:normal;font-size:11px;color:var(--ink3);font-weight:700;}
.dwrap .step.done i{background:var(--sage);border-color:var(--sage);color:#20372a;}
.dwrap .step.now i{border-color:var(--coral);color:var(--coral-deep);}
.dwrap .step.done{color:var(--sage-ink);font-weight:600;} .step.now{color:var(--coral-deep);font-weight:600;}
.dwrap .connector{height:2px;background:var(--line2);flex:1;margin-bottom:22px;}
.dwrap .connector.done{background:var(--sage);}
.dwrap .pol{display:flex;gap:12px;align-items:center;}
.dwrap .pol .doc{width:38px;height:46px;border-radius:6px;background:var(--sage-tint);border:1px solid var(--sage-tint2);display:grid;place-items:center;flex:none;}
.dwrap .pol .doc svg{width:17px;height:17px;stroke:var(--sage-ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.dwrap .pol b{font-size:12.8px;} .pol span{display:block;font-size:11.3px;color:var(--ink3);}
/* role-adaptive stat widgets (waitlist / resources / incidents / credentials / careers) */
.dwrap .statcard{display:flex;flex-direction:column;}
.dwrap .statcard .bignum{margin-top:2px;}
.dwrap .statcard .bignum.stat-warn{color:var(--coral-deep);}
.dwrap .statcard .bignum.stat-ok{color:var(--sage-ink);}
.dwrap .statnote{font-size:11.8px;color:var(--ink2);margin-top:7px;}
/* owner-view callout — exec cockpit entry point */
.dwrap .ownercallout{grid-column:span 12;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(100deg,var(--sage-tint),var(--panel));border-color:var(--sage-tint2);}
.dwrap .ownercallout h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-ink);margin-bottom:4px;}
.dwrap .ownercallout p{font-size:12.5px;color:var(--ink2);max-width:52ch;}
.dwrap .ownercallout .btn{flex:none;}
.mylinks{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.mylinks a{display:flex;align-items:center;gap:8px;font-size:12.6px;color:var(--ink);text-decoration:none;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);font-weight:500;}
.mylinks a:hover{border-color:var(--sage);color:var(--sage-ink);}
.mylinks svg{width:13px;height:13px;stroke:var(--ink3);stroke-width:1.8;fill:none;stroke-linecap:round;}
/* topbar scope chip + search + bell */
.tscope{display:inline-flex;align-items:center;gap:7px;background:var(--sage-tint);color:var(--sage-ink);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:99px;border:1px solid var(--sage-tint2);white-space:nowrap;}
.tscope svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}
.tsearch{flex:1;max-width:340px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 13px;color:var(--ink);font-size:12.5px;}
.tbell{position:relative;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:var(--panel);flex:none;}
.tbell svg{width:15px;height:15px;stroke:var(--ink2);stroke-width:1.8;fill:none;stroke-linecap:round;}
.tbell.on::after{content:"";position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:99px;background:var(--coral);border:1.5px solid var(--panel);}
@media (max-width:900px){.dwrap .card,.dwrap .card.w6,.dwrap .card.w8{grid-column:span 12;}.tsearch{display:none;}}
.greet-h1{font-family:"Cutesy",cursive;font-weight:400;font-size:32px;color:var(--sage-deep);line-height:1.1;}

/* forms library: keep category chip pinned so wrapped titles don't stagger chips */
.fcard{display:flex;flex-direction:column;}
.fcard .cat{margin-top:auto;}

/* success toast (?m= flash) */
/* toast notifications — stacked, animated, top-right */
.toaststack{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px));}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:12px;padding:12px 12px 12px 14px;font-size:13px;box-shadow:0 12px 32px -12px rgba(36,48,41,.42);opacity:0;transform:translateX(16px);transition:opacity .24s ease,transform .24s ease;}
.toast.in{opacity:1;transform:none;}
.toast.gone{opacity:0;transform:translateX(16px);}
.toast .ti{flex:none;display:flex;margin-top:1px;}
.toast .ti svg{width:16px;height:16px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.toast.ok{border-left-color:var(--sage);} .toast.ok .ti svg{stroke:var(--sage-deep);}
.toast.err{border-left-color:var(--danger);} .toast.err .ti svg{stroke:var(--danger);}
.toast.warn{border-left-color:var(--coral);} .toast.warn .ti svg{stroke:var(--coral-deep);}
.toast .tmsg{flex:1;line-height:1.4;font-weight:600;}
.toast .tx{flex:none;border:none;background:none;color:var(--ink3);cursor:pointer;font-size:17px;line-height:1;padding:0 2px;}
.toast .tx:hover{color:var(--ink);}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .2s ease;transform:none;}.toast.gone{transform:none;}}
@media (max-width:520px){.toaststack{left:16px;right:16px;max-width:none;}}
/* branded confirm dialog — replaces native browser confirm(); shares the
   toast design language (panel card, coral accent bar, same shadow/radius) */
.confirmveil{position:fixed;inset:0;z-index:1200;background:rgba(22,30,25,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s ease;}
.confirmveil.in{opacity:1;}
.confirmbox{display:flex;align-items:flex-start;gap:11px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:14px;
  padding:18px 18px 16px 18px;font-size:13.5px;max-width:min(420px,92vw);width:100%;
  box-shadow:0 18px 48px -12px rgba(36,48,41,.5);transform:translateY(8px) scale(.98);transition:transform .18s ease;}
.confirmveil.in .confirmbox{transform:none;}
.confirmbox .ci{flex:none;display:flex;margin-top:1px;}
.confirmbox .ci svg{width:17px;height:17px;fill:none;stroke:var(--coral-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.confirmbox .cbody{flex:1;min-width:0;}
.confirmbox .cmsg{line-height:1.5;font-weight:600;}
.confirmbox .cbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
@media (prefers-reduced-motion:reduce){.confirmveil,.confirmbox{transition:opacity .15s ease;transform:none;}}

/* ============================================================
   Shared responsive utilities (P1) — opt-in classes for other
   screens to ADOPT in their own templates. Nothing below targets
   existing markup; adding these classes is always an explicit act.
   ============================================================ */

/* .scroll-x — horizontal scroll container for wide content.
   Wrap in .scroll-x-fade to get a right-edge fade cue on narrow screens:
   <div class="scroll-x-fade"><div class="scroll-x"> …wide thing… </div></div> */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroll-x-fade{position:relative;}
.scroll-x-fade::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0),var(--panel));}
@media (min-width:981px){.scroll-x-fade::after{display:none;}}

/* .mobile-line-card — table-collapse pattern. Render the table (add .mlc-hide
   to its scroll wrapper) AND a parallel list of .mobile-line-card elements;
   below 768px the table hides and the cards show.
   Inner helpers: .mlc-title (bold first line), .mlc-sub (muted second line),
   .mlc-stats (compact dot-separated stat row). */
.mobile-line-card{display:none;}
@media (max-width:767px){
  .mlc-hide{display:none;}
  .mobile-line-card{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);text-decoration:none;}
  .mobile-line-card + .mobile-line-card{margin-top:10px;}
  .mobile-line-card .mlc-title{font-weight:700;font-size:13.5px;}
  .mobile-line-card .mlc-sub{font-size:11.5px;color:var(--ink2);margin-top:4px;}
  .mobile-line-card .mlc-stats{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:11.3px;color:var(--ink2);margin-top:7px;}
  .mobile-line-card .mlc-stats b{color:var(--ink);font-variant-numeric:tabular-nums;}
}

/* coral-tint "pending approval" pill — attention-only, dashed ring
   distinguishes it from plain .pill.warn states */
.pill.pending-approval{background:var(--coral-tint);color:var(--coral-deep);border:1px dashed var(--coral);}

/* .filter-disclosure — collapsible filter bar for phones. Use on a
   <details class="filter-disclosure" open> wrapping the filter form with a
   <summary>Filters</summary>. Ship it open: desktop hides the summary and
   always shows the filters; phones show the summary as a toggle button. */
.filter-disclosure > summary{display:none;list-style:none;cursor:pointer;}
.filter-disclosure > summary::-webkit-details-marker{display:none;}
@media (max-width:767px){
  .filter-disclosure > summary{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 13px;margin-bottom:10px;}
  .filter-disclosure > summary::after{content:"▾";font-size:10px;color:var(--ink3);}
  .filter-disclosure[open] > summary::after{content:"▴";}
}

/* sidebar scroller hidden — scroll still works, the bottom fade hints at more */
.navscroll{scrollbar-width:none;-ms-overflow-style:none;}
.navscroll::-webkit-scrollbar{width:0;height:0;display:none;}