/* ===== Regional Hub visual refresh (Dan, 11 Nov 2026; approved from design/refresh.css) =====
   Yellow (#F2FA0C, the logo's) is the accent, used on purpose: section heading bars, the active tab / menu item,
   focus rings, each screen's primary button, a thin left edge on panels that need attention, and action numbers.
   Yellow TEXT only on dark backgrounds; on light ones yellow is a fill behind dark text, or a bar/edge. */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;          /* spacing scale */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;                         /* radii */
  --e1:0 1px 2px rgba(20,24,26,.06),0 2px 8px rgba(20,24,26,.06);           /* panels lift off the background */
  --e2:0 4px 14px rgba(20,24,26,.10),0 1px 3px rgba(20,24,26,.06);
  --yel:#F2FA0C; --on-yel:#1D2124;
  --line-soft:#E4E7E5;                                                       /* dividers: softer */
  --field-line:#858E8A;                                                      /* input borders: 3.4:1 on white */
  --field-bg:#FFFFFF;
  --rail-dim:#99A39F;                                                        /* 5.8:1 on the rail (was 4.1) */
  --ink3:#5B635F;                                                            /* hint text 5.3:1+ */
  --pill-red:#A3372A; --pill-green:#266A43;                                  /* 4.5:1+ on their soft fills */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5450' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5450' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --e1:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25); --e2:0 6px 18px rgba(0,0,0,.45);
  --line-soft:#2A2F32; --field-line:#6B7470; --field-bg:#191C1E; --pill-red:#E27A66; --pill-green:#6CC392;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3BBB7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3BBB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ink3:#848D89;
}}
:root[data-theme="dark"]{
  --e1:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25); --e2:0 6px 18px rgba(0,0,0,.45);
  --line-soft:#2A2F32; --field-line:#6B7470; --field-bg:#191C1E; --pill-red:#E27A66; --pill-green:#6CC392;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3BBB7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3BBB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ink3:#848D89;
}

/* Halftone: two sources, both on the right (Dan, 11 Nov). Drawn as real halftone (dot SIZE shrinks with distance)
   by refresh.js: (1) the page header band, from the top right, fading left and down; (2) fixed to the window's
   bottom-right corner, fading up the right side and inwards. Middle and left stay clear; panels sit solid on top. */
:root{--dotc:rgba(29,33,36,.10)}
:root[data-theme="dark"]{--dotc:rgba(242,250,12,.115)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dotc:rgba(242,250,12,.115)}}
body{isolation:isolate}
.top{position:relative;isolation:isolate;overflow:hidden}
.top > :not(.hdots){position:relative;z-index:1}
.hdots{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--dotc)}
#brdots{position:fixed;right:0;bottom:0;z-index:-1;pointer-events:none;color:var(--dotc)}
.hdots svg,#brdots svg{display:block}
body.nodots .hdots,body.nodots #brdots{display:none}
@media print{.hdots,#brdots{display:none}}
/* text that can sit on a dot uses the darker grey: 5.5:1+ even on a full-strength dot */
.top p,.top .sync,.top .who,.view > p,.view > .sub2,.view > div > p.hello,.hello,.sub2{color:var(--ink2)}

/* Focus: a dark ring inside a yellow one, so it shows on white and on dark */
:focus-visible{outline:3px solid var(--yel) !important;outline-offset:2px !important;box-shadow:0 0 0 2px var(--ink) !important;border-radius:var(--r-sm)}

/* Type hierarchy */
.top h1{font-size:26px;letter-spacing:-.005em}
.view{padding:var(--s5) var(--s6) 48px}
.block{margin-bottom:var(--s5)}
.block > h2, .thd > h2, .view section > h2:not(.thello){display:flex;align-items:center;gap:var(--s2);font-size:19px;margin-bottom:var(--s3);padding-bottom:var(--s2);position:relative}
.block > h2::after, .thd > h2::after, .view section > h2:not(.thello)::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--yel);box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.hico{width:18px;height:18px;flex:none;color:var(--ink2)}

/* Top strip: solid, quieter rule */
.top{border-bottom:1px solid var(--line-soft);box-shadow:0 1px 0 rgba(0,0,0,.02)}

/* Rail: icons, active item in yellow */
.rail .foot{color:var(--rail-dim)} .brand small{color:var(--rail-dim)}
.nav a{border-radius:var(--r-sm);padding:9px 10px;gap:10px;transition:background .15s}
.nav a > span:first-child{display:flex;align-items:center;gap:10px}
.nav .nico{width:18px;height:18px;flex:none;opacity:.85}
.nav a[aria-current="page"]{background:var(--rail-2);color:#fff;box-shadow:inset 3px 0 0 var(--yel)}
.nav a[aria-current="page"] .nico{color:var(--yel);opacity:1}

/* Panels: larger radii, soft borders, a little lift */
.queue,.tablewrap,.formcard,.flow,.vlist,.map,.empty,.mini,.cal,.calwrap,.hrsec,.qcard,.vbox,.kpis > div,.tfig,.tlist,.tpiles > div,.tvans > *{
  border-radius:var(--r) !important;border-color:var(--line-soft) !important;box-shadow:var(--e1)}
.drawer{border-left:1px solid var(--line-soft);box-shadow:-18px 0 40px rgba(0,0,0,.18);
  transition:transform .32s cubic-bezier(.22,.8,.24,1) !important}
.drawer header{border-bottom-color:var(--line-soft) !important}
td{border-bottom-color:var(--line-soft)}
th{background:var(--sunk);border-bottom-color:var(--line-soft);font-size:12.5px;text-transform:none;letter-spacing:.01em}
.qrow{border-bottom-color:var(--line-soft)}

/* Panels needing attention: a thin yellow left edge (the to-do list keeps one, thinner) */
.tlist{border-left:1px solid var(--line-soft) !important;box-shadow:inset 3px 0 0 var(--yel),var(--e1) !important}
.attn{box-shadow:inset 3px 0 0 var(--yel),var(--e1) !important}
.queue.attn,.tablewrap.attn,.mini.attn{border-left-color:var(--yel) !important}
.note{border-left-color:var(--yel)}

/* Row hover */
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--sunk) 70%,transparent)}
.qrow:hover,.mail:hover{background:var(--sunk)}

/* Status pills */
.chip{border-radius:var(--r-pill);padding:2px 10px;font-size:12px;letter-spacing:.01em}
.k-unmatched{color:var(--pill-red)} .k-existing,.k-ready{color:var(--pill-green)}
.k-info{background:var(--blue-soft);color:var(--blue)}                 /* in progress / for information: calm */
.k-act{background:var(--yel) !important;color:var(--on-yel) !important}   /* action needed: yellow */

/* Tabs / segmented controls / filters: active = yellow fill, dark text */
.seg{border-radius:var(--r-pill) !important;border-color:var(--line-soft) !important;padding:3px;gap:2px;box-shadow:var(--e1)}
.seg button{border-radius:var(--r-pill) !important;padding:6px 14px}
.seg button[aria-pressed="true"],.filters button[aria-pressed="true"],.settabs [aria-selected="true"],.settabs [aria-current="page"]{
  background:var(--yel) !important;color:var(--on-yel) !important;border-color:var(--yel) !important}
.filters{border-bottom-color:var(--line-soft)}
.filters button{border-radius:var(--r-pill)}

/* Buttons: the primary one on each screen is yellow */
.btn{border-radius:var(--r-sm);border-color:var(--field-line);transition:background .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--sunk)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--yel);border-color:var(--yel);color:var(--on-yel);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.btn.primary:hover{filter:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--yel) 35%,transparent)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Key numbers that need acting on (Today, Quotations): yellow */
.flow > button:last-child b,.flow div:last-child b{color:inherit}
.tfig button.hot b{color:inherit}
.tfig button{border-right-color:var(--line-soft) !important}
.tfig .act b{display:table;background:var(--yel);color:var(--on-yel) !important;border-radius:var(--r-sm);padding:1px 8px;margin-left:-8px}
.flow .act b{display:table;background:var(--yel);color:var(--on-yel) !important;border-radius:var(--r-sm);padding:2px 8px;margin-left:-8px}
.flow > button,.flow div{border-right-color:var(--line-soft) !important}

/* Every input, select and date picker styled; no browser defaults */
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=time],input:not([type]),select,textarea{
  -webkit-appearance:none;appearance:none;font:15px/1.35 var(--body);color:var(--ink);background-color:var(--field-bg);
  border:1px solid var(--field-line);border-radius:var(--r-sm);padding:9px 12px;min-height:40px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--ink2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none !important;border-color:var(--ink) !important;box-shadow:0 0 0 3px var(--yel) !important}
select{background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;padding-right:34px;cursor:pointer}
input[type=date],input[type=time]{background-image:var(--cal);background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;width:22px;height:22px}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:1}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;flex:none;border:1.5px solid var(--field-line);
  background:var(--field-bg);border-radius:5px;display:inline-grid;place-content:center;cursor:pointer;vertical-align:-3px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--yel);border-color:var(--on-yel)}
input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border:2px solid var(--on-yel);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-yel)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.formcard input,.formcard select,.formcard textarea,.rfilters select,.ownsel select,.tadd input,.tadd select{background-color:var(--field-bg);border-color:var(--field-line);border-radius:var(--r-sm)}
.formcard label{gap:6px}

/* Skeleton loaders while a page loads */
.skel{display:grid;gap:var(--s4)}
.skel i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--sunk) 0%,var(--line-soft) 40%,var(--sunk) 80%);background-size:300% 100%;animation:skel 1.1s ease-in-out infinite}
.skel .sk-card{background:var(--panel);border-radius:var(--r);box-shadow:var(--e1);padding:var(--s4);display:grid;gap:10px}
.skel .sk-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.skel .sk-row i{height:64px;border-radius:var(--r)}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}.drawer{transition:none !important}}

/* Phone */
@media (max-width:700px){
  .view{padding:var(--s4) var(--s4) 40px}
  .jsqrow{grid-template-columns:minmax(0,1fr) !important}       /* a long one-line summary can't push the row off the screen */
  .skel .sk-row{grid-template-columns:repeat(2,1fr)}
  .formcard .frow{grid-template-columns:1fr}
}
@media (max-width:860px){.navg{display:none}}
.navg{color:var(--rail-dim)}                                         /* on the dark rail: 5.8:1 */
.sugg{color:var(--pill-green)}
.warn b,.alertbar b{color:var(--pill-red)}                           /* 4.5:1+ on the soft red */
:root[data-theme="dark"] .k-urgent{background:#B5402F}               /* white on it: 5.6:1 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-urgent{background:#B5402F}}
button.r.tline{background:none;border:0;color:var(--ink);text-align:left;width:100%;padding:8px 12px}   /* no browser button grey */

.onpage{color:var(--ink2) !important}                                 /* hint text on the page background */

/* ---- built into the Hub (Dan, 11 Nov) ---- */
body::after{display:none !important}                                   /* the earlier dot pattern: replaced by the halftone */
.hdrbtns{display:contents}
/* My to-do: no edge on the list; a yellow edge only on items overdue or waiting more than 3 days */
.tlist{border-left:1px solid var(--line-soft) !important;box-shadow:var(--e1) !important}
.trow.late{box-shadow:inset 3px 0 0 var(--yel)}
/* money and number columns line up on the right */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
time[title]{cursor:help;text-decoration:none}
/* score bars: the number always sits on the yellow fill (dark on yellow, 14:1), however short the bar */
.sbar i{opacity:1;min-width:44px}
.sbar b{color:var(--on-yel)}
/* overdue to-do rows (soft red): their small text in the darker grey */
.trow.overdue small,.trow.overdue .tgo{color:var(--ink2)}
.top .sync,.top .who,.hdrbtns .btn{white-space:nowrap}

/* ---- Nothing overflows its panel (Dan, 11 Nov): checked on every page by tests/test_layout_overflow.py ---- */
input,select,textarea{min-width:0;max-width:100%}
.frow > *,.formcard label,.fld{min-width:0}
/* side-by-side fields share the width and stack when there's no room */
.formcard .frow{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)) !important}
.formcard .frow input,.formcard .frow select{width:100%}
.formcard > .btn.wide{width:100%}
/* button rows wrap to a second line rather than clipping */
.actions,.jtools,.qtact,.jcrow,.tside{flex-wrap:wrap}
.btn{max-width:100%;white-space:normal}
.seg button,.filters button,.hdrbtns .btn,.top .btn{white-space:nowrap}
/* lists with a status chip: the text column shrinks and wraps, the chip keeps its line */
.vrow{grid-template-columns:12px minmax(0,1fr) auto !important}
.vrow > span{min-width:0;overflow-wrap:anywhere}
/* the intake activity log: three columns where there's room, two (detail underneath) where there isn't */
.alog{container-type:inline-size}
.arow{grid-template-columns:minmax(70px,96px) minmax(0,150px) minmax(0,1fr)}
.arow > *{min-width:0;overflow-wrap:anywhere}
@container (max-width:460px){ .arow{grid-template-columns:72px minmax(0,1fr)} .arow .ad{grid-column:1 / -1} }
button,input,select,textarea{box-sizing:border-box}                   /* widths include their padding */
.top{flex-wrap:wrap;row-gap:8px}                                       /* the header wraps rather than widening the page */
.top > div:first-child{min-width:min(100%,240px);flex:1 1 240px}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap}   /* long tab strips scroll inside themselves */
.seg button{flex:none}

/* ===== "REGIONAL HUB" wordmark (Dan, 11 Nov 2026): Montserrat ExtraBold, self-hosted (OFL, fonts/OFL.txt) =====
   The sidebar is dark in light and dark mode, so: REGIONAL in light text, HUB in brand yellow (13:1 on the rail).
   On phones the sidebar is a top bar: the R icon stands in for the wordmark. */
@font-face{font-family:"Hub Mark";src:url("/static/fonts/montserrat-latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
.rbrand{padding:2px 6px 22px !important}
.hubmark{display:inline-flex;align-items:baseline;gap:.34em;text-decoration:none;white-space:nowrap;
  font:800 19px/1 "Hub Mark","Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F2F4F3;
  padding:6px 4px 8px;border-radius:var(--r-sm,8px);position:relative}
.hubmark .hub{color:#F2FA0C}
.hubmark::after{content:"";position:absolute;left:4px;bottom:0;width:30px;height:3px;border-radius:2px;background:#F2FA0C}
.hubmark:hover{background:rgba(255,255,255,.05)}
.rmark{display:none;width:34px;height:34px;border-radius:8px}
@media (max-width:860px){ .hubmark{display:none} .rmark{display:block} .rbrand{padding:0 !important} }

/* Settings -> Vans: suggested driver from job visits */
.vsugg{margin-top:8px;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.vsugg small{color:var(--ink2);font-size:12.5px}
.vsbtn{display:flex;gap:6px;flex-wrap:wrap}

/* Job intake: shadow-read emails in the list (directors) */
.shadowhead{padding:10px 14px 4px;font-size:12.5px;font-weight:600;color:var(--ink2);border-top:1px solid var(--line-soft)}
.mail.shadowmail{background:var(--sunk)}
.mail .sugg2{display:block;margin-top:4px;font-size:12.5px;color:var(--ink2)}

/* ---- Page header (Dan, 11 Nov): title left; name, Sign out and Dark mode on one line top right; page buttons under them ---- */
.top{display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ttl acct" "ttl acts";align-items:start;column-gap:20px;row-gap:8px}
.top .ttl{grid-area:ttl;min-width:0}
.top .acct{grid-area:acct;justify-self:end;position:relative}
.top .tacts{grid-area:acts;justify-self:end;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end}
.acctmenu{display:flex;align-items:center;gap:10px;white-space:nowrap}
.acctmenu .who{display:flex;align-items:center;gap:8px}
.acctbtn{display:none;border:0;background:none;padding:0;border-radius:50%;cursor:pointer}
@media (max-width:900px){
  .top{grid-template-areas:"ttl acct" "acts acts"}
  .top .tacts{justify-self:start;justify-content:flex-start}
  .acctbtn{display:block}
  .acctmenu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:30;flex-direction:column;align-items:stretch;gap:8px;
    background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--e2);padding:12px;min-width:220px;white-space:normal}
  .acctmenu.open{display:flex}
  .acctmenu .tog{width:100%}
}
/* job refs never wrap */
.isref,.ref,td.ref,.jref{white-space:nowrap}
.nowrap{white-space:nowrap}
/* Today figures: two even rows of four (two columns on phones) */
.tfig{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media (max-width:700px){ .tfig{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
.tfig button{border-bottom:1px solid var(--line-soft)}

/* ===== Job card (built from design/jobcard.css, Dan 11 Nov) ===== */
/* ===== Job card redesign (prototype, Dan 11 Nov 2026), in the refresh style =====
   Order: header, summary strip, Your actions, Change in Mitti, Description, Job sheets, Comments. */
.jc-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.jc-head h2{font-size:22px;line-height:1.2}
.jc-head .meta{margin-top:2px;color:var(--ink2)}
/* summary strip: each chip jumps to its control */
.jcsum{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}
.jcsum button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);background:var(--sunk);border-radius:var(--r-pill);
  padding:5px 12px 5px 8px;font-size:13px;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.jcsum button:hover{border-color:var(--field-line);background:var(--panel)}
.jcsum .k{color:var(--ink2);font-weight:500}
.jcsum b{font-weight:600}
.jcsum svg{width:15px;height:15px;color:var(--ink2);flex:none}
.jcsum .late{background:var(--red-soft);border-color:transparent}
.jcsum .late b,.jcsum .late .k,.jcsum .late svg{color:var(--pill-red)}
.jcsum .stage{background:var(--blue-soft);border-color:transparent}
.jcsum .stage b{color:var(--blue)}
.jcsum .unset b{color:var(--ink2);font-weight:500}
/* panels */
.jcpanel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--e1);padding:var(--s4) var(--s4) var(--s4);margin:var(--s4) 0 0}
.jcpanel > h3{display:flex;align-items:center;gap:var(--s2);font-size:16px;margin:0 0 var(--s3);position:relative;padding-bottom:var(--s2)}
.jcpanel > h3::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:3px;border-radius:2px;background:var(--yel);box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.jcpanel > h3 svg{width:17px;height:17px;color:var(--ink2)}
.jcpanel > h3 small{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink2);margin-left:auto}
.jcgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.jcgrid .full{grid-column:1 / -1}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld > span{font-size:13px;font-weight:600;color:var(--ink2)}
.fld > small{font-size:12.5px;color:var(--ink2)}
.fld select,.fld input,.fld textarea{width:100%}
.fld textarea{min-height:0;height:calc(3 * 1.35em + 20px);resize:vertical}
.jcrow{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s2)}
.jcnotes{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.jcnotes li{background:var(--sunk);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:14px}
.jcnotes small{display:block;color:var(--ink2);font-size:12.5px;margin-top:2px}
.jcflash{animation:jcflash 1.2s ease}
@keyframes jcflash{0%,40%{box-shadow:0 0 0 4px var(--yel)}100%{box-shadow:0 0 0 0 transparent}}
/* Change in Mitti: its own panel, locked until Regional approves */
.jclock{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;background:var(--sunk);border:1px dashed var(--field-line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s3);margin:0 0 var(--s3)}
.jclock svg{width:18px;height:18px;color:var(--ink2);flex:none}
.jclock p{margin:0;flex:1;min-width:180px;font-size:14px;color:var(--ink)}
.jclock p small{display:block;color:var(--ink2);font-size:12.5px}
.jcpanel.locked .jcgrid{opacity:.55}
.jcpanel.locked .jcgrid *{cursor:not-allowed}
/* Description: a tidy timeline */
.jctl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.jctl li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line-soft)}
.jctl li:first-child{border-top:0}
.jctl time{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.jctl time b{display:block;color:var(--ink);font-weight:600}
.jctl p{margin:0;font-size:14px}
.jctl p small{display:block;color:var(--ink2);font-size:12.5px}
/* job sheets */
.jcsheets{display:grid;gap:var(--s2)}
.jcsheet{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;background:var(--sunk);border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
.jcsheet b{display:block;font-size:14px}
.jcsheet small{color:var(--ink2);font-size:12.5px}
/* comments */
.jccom{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.jccom li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s2)}
.jccom .who{font-weight:600;font-size:14px}
.jccom .who time{font-weight:400;color:var(--ink2);font-size:12.5px;margin-left:6px}
.jccom p{margin:2px 0 0;font-size:14px}
/* phone: one column, full-width buttons */
@media (max-width:640px){
  .jcgrid{grid-template-columns:1fr}
  .jcrow{flex-direction:column}
  .jcrow .btn,.jclock .btn,.jcsheet .btn{width:100%}
  .jcsheet{grid-template-columns:1fr}
  .jctl li{grid-template-columns:76px minmax(0,1fr)}
  .jcpanel{padding:var(--s3)}
}

/* action bar right under the title and summary (Dan, 11 Nov): Email, Text, Add photo, Open in Mitti */
.jcbar{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.jcbar .btn{display:inline-flex;align-items:center}
.jccompose{border-color:var(--field-line);margin-top:var(--s3)}
.jcnote{margin:var(--s2) 0 0;font-size:12.5px;color:var(--ink2)}
.jccom .k{font-weight:400;color:var(--ink2)}
.jccom .chip{margin-top:6px}
@media (max-width:640px){ .jcbar{display:grid;grid-template-columns:1fr 1fr} .jcbar .btn{justify-content:center} }

/* greyed actions that say why (hover or tap), instead of a list of reasons (Dan, 11 Nov) */
.btn.is-off{opacity:.55;cursor:help}
.btn.is-off:hover{background:none}
.jcbar{flex-wrap:nowrap}
.jcbar .btn{gap:6px;white-space:nowrap}
.jcwhynote{margin:8px 0 0;font-size:12.5px;color:var(--ink2);background:var(--sunk);border-radius:var(--r-sm);padding:6px 10px}
@media (max-width:640px){ .jcbar{display:grid;grid-template-columns:1fr 1fr} }
.jcpanel:first-child{margin-top:0}

/* team picker (directors and operations managers) */
.teampick{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink2);margin:0 12px 12px 0}
.teampick select{min-height:34px;padding:5px 30px 5px 10px}