/* Commercial section: This week (pages/week.js) and Sign-offs (pages/signoffs.js), with their dialogs.
 * The week is a Sunday–Thursday planner (late pile first, today highlighted); at ≤900px the days stack as lists.
 * The diary dialog folds an optional "Add the next step as a to-do" part under the entry.
 * Sign-offs are routing slips: five boxes in order, the one waiting highlighted. Health colours (#0ca30c, #fab219,
 * #d03b3b) only mark lateness and decisions, always with a word or an icon. */

/* ------------------------------------------------------------------ This week */
.wk-tools{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.wk-person{width:auto;min-width:170px;max-width:100%}
.wk-sum{font-size:13px;color:#3B4758;margin-left:auto}
.wk-late-n{color:#A32020;font-weight:500}
.wk-plan{display:flex;flex-direction:column;gap:12px}
.wk-week{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:start}
@media (min-width:1360px){.wk-week{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}}
.wk-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.wk-more .wk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.wk-col{background:#fff;border:1px solid #E3E7EC;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.wk-ch{display:flex;align-items:center;gap:4px;padding:2px 4px;min-height:24px;min-width:0}
.wk-ch h2{font-size:14px;font-weight:600;color:#0E1726;white-space:nowrap}
.wk-cs{font-size:12px;color:#5E6B7D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wk-n{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:500;color:#3B4758;background:#EEF1F5;border-radius:6px;padding:1px 8px}
.wk-today{flex:0 0 auto;font-size:12px;font-weight:500;color:#fff;background:#0B7A6B;border-radius:4px;padding:1px 6px}
.wk-col.today{border-color:#0B7A6B;box-shadow:0 0 0 2px rgba(11,122,107,.16);background:#F2FAF8}
.wk-col.late{border-color:#F1C4C3;background:#FFF8F8}
.wk-col.late .wk-ch h2{color:#A32020}
.wk-col.late .wk-n{background:#FCE8E8;color:#A32020}
.wk-col.past{background:#F8F9FB}
.wk-col.past .wk-ch h2,.wk-col.past .wk-cs{color:#8A96A8}
.wk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wk-empty{font-size:12px;color:#8A96A8;padding:2px 4px 4px}
.wk-it{--k:#9FB3C8;background:#fff;border:1px solid #E3E7EC;border-left:3px solid var(--k);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.wk-it.k-step{--k:#2a78d6}.wk-it.k-signoff{--k:#7B61C9}.wk-it.k-task{--k:#0B7A6B}.wk-it.k-followup,.wk-it.k-revisit{--k:#b3ab9a}.wk-it.k-renewal{--k:#1c5cab}.wk-it.k-decision{--k:#eb6834}.wk-it.k-savings{--k:#1baf7a}
.wk-it.late{border-left-color:#d03b3b}
.wk-k{display:flex;align-items:center;gap:4px;font-size:12px;color:#5E6B7D;font-weight:500}
.wk-k svg{flex:0 0 14px;color:var(--k)}
.wk-it.late .wk-k svg{color:#d03b3b}
.wk-hi{margin-left:4px;font-size:12px;font-weight:500;color:#7A4E00;background:#FFF4D6;border-radius:4px;padding:0 6px}
.wk-tt{font-size:13px;font-weight:500;color:#0E1726;line-height:1.35;overflow-wrap:anywhere;text-align:left}
button.wk-tt{color:#0E1726;font-weight:500}
button.wk-tt:hover{color:#0B7A6B}
.wk-pj{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.wk-ft{display:flex;align-items:center;gap:8px 8px;flex-wrap:wrap;margin-top:2px;font-size:12px;min-width:0}
.wk-ft .xu{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wk-act{margin-left:auto;display:flex;gap:8px}
.wk-tick{color:#0B7A6B}
/* "Log" on a step: phones and tablets only (on a desktop the project page is one click away). */
.wk-log{display:none}
@media (max-width:900px),(pointer:coarse){.wk-log{display:inline-flex}}
/* The diary dialog */
.wk-lg-k{margin:2px 0 16px}
.wk-lg-k .chip svg{flex:0 0 14px;color:#5E6B7D}
.wk-lg-k .chip.on svg{color:#0B7A6B}
/* (Its own fields sit in the form's grid; the wrapper is only there so they can be checked on their own.) */
.wk-lg-main{display:contents}
/* "Add the next step as a to-do": folded away under the entry, one column (stacks the same on phones). */
.wk-lg-nx{border-top:1px solid #EEF1F4;padding-top:8px;min-width:0}
.wk-lg-nx > summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:13px;font-weight:500;color:#0B7A6B;min-height:32px}
.wk-lg-nx > summary::-webkit-details-marker{display:none}
.wk-lg-nx > summary svg{flex:0 0 14px;transition:transform .15s}
.wk-lg-nx[open] > summary svg{transform:rotate(90deg)}
.wk-lg-nf{margin-top:8px}
@media (max-width:900px),(pointer:coarse){.wk-lg-nx > summary{min-height:36px}}
/* A to-do due tomorrow: the team's reminders have started (amber, as "Today"). */
.xdue.wk-soon{color:#7A4E00;font-weight:500}
.wk-mtitle{font-size:14px;font-weight:600;color:#0E1726;margin:4px 0 8px;overflow-wrap:anywhere}
.wk-mnote{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;font-weight:400;color:#3B4758;margin-top:4px;text-align:left}
.wk-mfacts{margin-top:16px}
@media (max-width:900px){
  .wk-week,.wk-more{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .wk-more .wk-list{display:flex}
  .wk-col.past{display:none}
  .wk-sum{margin-left:0;width:100%}
  .wk-person{flex:1 1 170px}
}

/* ------------------------------------------------------------------ Sign-offs: routing slips */
.so-list{display:flex;flex-direction:column;gap:12px}
.so-slip{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.so-hd{display:flex;flex-direction:column;gap:2px;min-width:0}
.so-pj{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.so-pn{color:#0E1726}
.so-what{font-size:12px;color:#5E6B7D;overflow-wrap:anywhere}
.so-boxes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.so-slip.single .so-boxes{grid-template-columns:minmax(0,360px)}
.so-box{position:relative;border:1px solid #E3E7EC;border-radius:8px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;background:#fff}
.so-box.st-yes{background:#F5FBF5;border-color:#CFE8CF}
.so-box.st-no{background:#FFF7F7;border-color:#F1C4C3}
.so-box.st-queued,.so-box.st-cancelled{background:#F8F9FB}
.so-box.st-queued .so-t,.so-box.st-cancelled .so-t{color:#5E6B7D}
.so-box.now{border:2px solid #0B7A6B;padding:11px;box-shadow:0 0 0 3px rgba(11,122,107,.12)}
.so-box.now.close{border-color:#fab219;box-shadow:0 0 0 3px rgba(250,178,25,.18)}
.so-box.now.late{border-color:#d03b3b;box-shadow:0 0 0 3px rgba(208,59,59,.14)}
.so-t{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;color:#0E1726;line-height:1.35;overflow-wrap:anywhere}
.so-n{flex:0 0 20px;height:20px;border-radius:50%;background:#EEF1F5;color:#3B4758;font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.so-box.now .so-n{background:#0B7A6B;color:#fff}
.so-box.st-yes .so-n{background:#0ca30c;color:#fff}
.so-box.st-no .so-n{background:#d03b3b;color:#fff}
.so-who{max-width:100%;overflow:hidden}
.so-st{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%}
.so-st .xp,.so-rs .xp,.so-earlier .xp{white-space:normal;height:auto;min-height:20px;padding:2px 8px;line-height:1.3}
.so-d,.so-by{font-size:12px;color:#5E6B7D}
.so-note{display:block;font-size:12px;color:#3B4758;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.so-link{font-size:12px}
.so-wait{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#0B5F54}
.so-wait svg{flex:0 0 14px}
.so-wait.close{color:#7A4E00}
.so-wait.late{color:#A32020}
.so-go{margin-top:2px}
/* Nobody to decide it yet; a parked project's sign-offs (on hold, not counted) */
.so-nobody{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#7A4E00}
.so-nobody svg{flex:0 0 14px}
.so-hold{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:2px;height:20px;padding:0 8px;border-radius:999px;background:#F1EEE8;color:#5E5648;font-size:12px;font-weight:500;white-space:nowrap}
.so-hold svg{flex:0 0 13px}
.so-held{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.so-held-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#3B4758}
.so-held-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:6px;background:#EEF1F4;color:#5E6B7D;font-size:12px;font-weight:500}
.so-held .so-list{margin-top:8px}
.so-held .so-box.now{border-color:#C9C3B6;box-shadow:none}
/* Five boxes in one row, with an arrow between them, when there is room. */
@media (min-width:1180px){
  .so-boxes{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .so-box + .so-box::before{content:"›";position:absolute;left:-12px;top:12px;width:10px;text-align:center;font-size:18px;line-height:1;color:#9FB3C8}
}
@media (max-width:900px){
  .so-boxes{display:flex;flex-direction:column;gap:8px}
  .so-slip{padding:12px}
}

/* Decided */
.so-rows{list-style:none;margin:0;padding:0}
.so-row{display:flex;gap:12px;padding:12px 16px;border-top:1px solid #EEF1F4;align-items:flex-start}
.so-row:first-child{border-top:0}
.so-rs{flex:0 0 130px;min-width:0}
.so-rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;overflow-wrap:anywhere}
@media (max-width:640px){.so-row{flex-direction:column;gap:8px}.so-rs{flex:none}}

/* The decide dialog */
.so-mhd{display:flex;flex-direction:column;gap:4px;margin:4px 0 12px;overflow-wrap:anywhere}
.so-mwhat{font-size:14px;font-weight:600;color:#0E1726}
.so-mhd .xp{margin-left:4px}
.so-min{display:block;font-size:12px;font-weight:400;color:#5E6B7D}
.so-min.low{color:#A32020;font-weight:500}
.so-earlier{list-style:none;margin:8px 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.so-earlier li{display:flex;gap:8px;align-items:flex-start;font-size:13px;min-width:0;overflow-wrap:anywhere}
.so-earlier li>span:last-child{min-width:0}
.so-mform{margin-top:16px}
.modal .note + .form-sec,.modal .so-mhd + .form-sec{margin-top:12px}