/* HELM design v1 applied to the crew phone app (dark). Glass for sections, bevel for anything tapped. */
.card{background:rgba(255,255,255,.075);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 40px -22px rgba(0,0,0,.7);border-radius:24px}
.hub-tile,.hzp-t,.jstate button,.bv{background-color:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.3),0 14px 30px -18px rgba(0,0,0,.8)}
.hub-tile{border-radius:24px}.hzp-t,.jstate button{border-radius:18px}
.hub-tile:active,.hzp-t:active,.jstate button:active,.job:active,.sch:active{transform:scale(.97)}
.hzp-t.late{background:rgba(230,57,70,.25);border-color:rgba(230,57,70,.5)}
.jstate button.on.st-doing{background:#F4A261;color:#1D3557;border-color:#F4A261}
.jstate button.on.st-done{background:#7FD1A8;color:#1D3557;border-color:#7FD1A8}
.hub-t,.jh,h1{font-family:'Cormorant Garamond',Georgia,serif}
.btn{border-radius:16px;min-height:48px}
.job,.sch{min-height:60px}
/* status is never colour alone: the late line carries a mark */
.jts{color:rgba(241,250,238,.62)}
.jwhen.late::before{content:'!';display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;background:#E63946;color:#fff;font-size:11px;font-weight:900;vertical-align:1px}
#homeBtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -10px #000}
@media (prefers-reduced-transparency: reduce){.card,.hub-tile,.hzp-t{-webkit-backdrop-filter:none;backdrop-filter:none;background:#22395C}}

/* parts */
.cp-row{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;width:100%;min-height:56px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.cp-row .grow{flex:1;min-width:0}
.cp-q{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.card input[type=text],.card input[type=date]{width:100%;box-sizing:border-box;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:inherit;padding:0 12px;font:inherit;font-size:16px;margin-top:6px}
.chip.c-ok{background:rgba(127,209,168,.22);color:#C9F2DA}.chip.c-amb{background:rgba(244,162,97,.25);color:#FFD9B8}
.cp-sel{width:100%;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:inherit;padding:0 12px;font:inherit;font-size:16px}
.cp-sel option{color:#1D3557}

/* ---------- light mode (phone set to Light): the new screens were drawn for dark; give them ink that reads on honeydew ---------- */
@media (prefers-color-scheme: light){
  html:not(.night) .card{background:rgba(255,255,255,.72);border-color:rgba(29,53,87,.08);box-shadow:inset 0 1px 0 #fff,0 14px 30px -20px rgba(29,53,87,.35)}
  html:not(.night) .hub-tile,html:not(.night) .hzp-t,html:not(.night) .jstate button,html:not(.night) .bv{background-color:rgba(255,255,255,.85);border-color:rgba(29,53,87,.10);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(29,53,87,.06),0 12px 26px -18px rgba(29,53,87,.45)}
  html:not(.night) .hub-tile.works{background:linear-gradient(135deg,#FFFFFF,#E4EEF5)}html:not(.night) .hub-tile.charter{background:linear-gradient(135deg,#FFFFFF,#DDF0F1)}html:not(.night) .hub-tile.me{background:linear-gradient(135deg,#FFFFFF,#FFEBD9)}
  html:not(.night) .hub-k,html:not(.night) .back,html:not(.night) .sch-d,html:not(.night) .sch.ms,html:not(.night) .jwhen{color:#2E5E7E}
  html:not(.night) .hub-t,html:not(.night) .hzp-t b,html:not(.night) .jact-h b{color:#1D3557}
  html:not(.night) .hub-s,html:not(.night) .jts,html:not(.night) .jact-h,html:not(.night) .sch-t span{color:#4A6178}
  html:not(.night) .hub-go{color:rgba(29,53,87,.35)}
  html:not(.night) .hzp-t span{color:#2E5E7E}
  html:not(.night) .hzp-t.on{background:#fff;border-color:#457B9D;box-shadow:0 0 0 2px #457B9D}
  html:not(.night) .hzp-t.late{background:#FDE3E5;border-color:#E8A6AC}html:not(.night) .hzp-t.late b,html:not(.night) .hzp-t.late span{color:#B3202C}
  html:not(.night) .jseg{background:rgba(29,53,87,.07)}html:not(.night) .jseg button{color:#4A6178}html:not(.night) .jseg button.on{background:#fff;color:#1D3557;box-shadow:0 4px 12px -6px rgba(29,53,87,.4)}
  html:not(.night) .job,html:not(.night) .sch,html:not(.night) .jact,html:not(.night) .jseg-l,html:not(.night) .cp-row{border-top-color:rgba(29,53,87,.08)}
  html:not(.night) .job.mine,html:not(.night) .sch.mine{background:linear-gradient(90deg,#FFE6CF,#FFF6EE)}
  html:not(.night) .jdot,html:not(.night) .wdot{border-color:rgba(29,53,87,.35)}html:not(.night) .jdot.done,html:not(.night) .wdot.done{border-color:#2F7A55;background:#2F7A55}
  html:not(.night) .jstate button{color:#355C7D}html:not(.night) .jstate button.on.st-todo{background:#1D3557;color:#fff}
  html:not(.night) .jc{background:rgba(29,53,87,.08);color:#1D3557}html:not(.night) .jc.hi{background:#FDE3E5;color:#B3202C}
  html:not(.night) .chip.c-ok{background:#DFF2E6;color:#23603F}html:not(.night) .chip.c-amb{background:#FFEBD9;color:#8A4200}
  html:not(.night) .card textarea,html:not(.night) .card input[type=text],html:not(.night) .card input[type=date],html:not(.night) .card input[type=email],html:not(.night) .cp-sel{background:#fff;border-color:rgba(29,53,87,.18);color:#1D3557}
  html:not(.night) .jact.state div:last-child{color:#8A4200}html:not(.night) .jact.photo div:last-child{color:#2E5E7E}
  html:not(.night) .jwhen.late{color:#B3202C}
  html:not(.night) .wthumbs img{box-shadow:inset 0 -3px 0 #457B9D}
  html:not(.night) .btn.gh{background:rgba(255,255,255,.85);color:#1D3557;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(29,53,87,.16)}
  html:not(.night) .jmine{background:#F4A261;color:#1D3557}
  html:not(.night) .phases .ph{color:#fff}
}

/* watch: the week ahead grid */
.wg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0 -6px}
.wg-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:92px;padding:8px 0 6px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-align:center}
.wg-dow{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#A8DADC}
.wg-date{font-family:Georgia,serif;font-size:22px;font-weight:700;line-height:1.1}
.wg-who{font-size:10.5px;font-weight:700;letter-spacing:-.02em;padding:0 1px;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:auto}
.wg-c.now{border-color:#A8DADC;box-shadow:0 0 0 1px #A8DADC}
.wg-c.mine{background:linear-gradient(180deg,rgba(230,57,70,.55),rgba(230,57,70,.3));border-color:rgba(255,160,168,.6)}
.wg-c.swa{background:rgba(168,218,220,.14)}.wg-c.swa .wg-who{color:#A8DADC}
.wg-me{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;font-size:0;background:#F4A261}
.wg-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.wg-sw{width:11px;height:11px;border-radius:4px;margin-left:8px}.wg-sw.mine{background:#E63946}.wg-sw.swa{background:#A8DADC}.wg-sw.off{background:#F4A261;border-radius:50%;width:8px;height:8px}
@media (prefers-color-scheme: light){
  html:not(.night) .wg-c{background:#fff;border-color:rgba(29,53,87,.10);color:#1D3557}
  html:not(.night) .wg-dow{color:#2E5E7E}html:not(.night) .wg-c.now{border-color:#457B9D;box-shadow:0 0 0 1px #457B9D}
  html:not(.night) .wg-c.mine{background:#FDE3E5;border-color:#E8A6AC;color:#B3202C}
  html:not(.night) .wg-c.swa{background:#E4EEF5}html:not(.night) .wg-c.swa .wg-who{color:#2E5E7E}
}

/* HoD: who a job is on */
.jassign{width:100%;min-height:48px;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid rgba(168,218,220,.35);background:rgba(255,255,255,.08);color:inherit}
.jlist{display:flex;flex-direction:column;gap:8px}
@media (prefers-color-scheme: light){html:not(.night) .jassign{background:#fff;border-color:rgba(29,53,87,.18);color:#1D3557}}

/* log a job */
.jlog{float:right;min-height:44px;margin-top:-4px}
.nj-f{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}.nj-f>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.nj-f input,.nj-f select,.nj-f textarea{width:100%;box-sizing:border-box;min-height:48px;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid rgba(168,218,220,.35);background:rgba(255,255,255,.08);color:inherit}
@media (prefers-color-scheme: light){html:not(.night) .nj-f input,html:not(.night) .nj-f select,html:not(.night) .nj-f textarea{background:#fff;border-color:rgba(29,53,87,.18);color:#1D3557}}

/* department chips in light mode */
@media (prefers-color-scheme: light){html:not(.night) .jdc{background:#fff;border-color:rgba(29,53,87,.18);color:#1D3557}html:not(.night) .jdc.on{background:#1D3557;color:#fff;border-color:#1D3557}}

/* log a job: is it one of these? */
.nj-like{margin:0 0 12px;padding:10px 12px;border-radius:14px;background:rgba(244,162,97,.12);border:1px solid rgba(244,162,97,.4)}.nj-like .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
@media (prefers-color-scheme: light){html:not(.night) .nj-like{background:#FFF4E8;border-color:#F5D3B3}}