/* ============ U GOOD LOGISTICS — "The Nest" design system ============ */
/* Ported from the Lovable mockup: cream/terracotta/mustard/teal/plum,   */
/* Fraunces display + Plus Jakarta Sans + Caveat hand font, stickers.    */

:root{
  color-scheme:light;
  /* sRGB hex first — guaranteed everywhere */
  --cream:#f6efdd;
  --cream-card:#fbf7ec;
  --ink:#122238;
  --terracotta:#c26a3f;
  --mustard:#e4b94a;
  --teal:#305d5b;
  --plum:#7c4667;
  --muted:#75655a;
  --border:#e2d5bf;
  --good:#3f9b63;
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-hand:"Caveat",cursive;
}
/* wide-gamut upgrade where supported */
@supports (color: oklch(0.5 0.1 100)){
  :root{
    --cream:oklch(0.965 0.028 85);
    --cream-card:oklch(0.985 0.015 85);
    --terracotta:oklch(0.65 0.16 42);
    --mustard:oklch(0.82 0.15 85);
    --teal:#305d5b;
    --plum:oklch(0.42 0.11 350);
    --muted:oklch(0.45 0.04 50);
    --border:#e2d5bf;
    --good:oklch(0.63 0.15 155);
  }
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0}
html{overflow-x:clip}
html{background:#f6efdd}
body{
  background-color:#f6efdd;
  background-color:var(--cream);
  color:#122238;
  color:var(--ink);
  font-family:var(--font-sans);
  /* The gradient wash used to live here with `background-attachment:fixed`. iOS Safari does not
     honour that value, and worse, it puts the page into a compositing mode where OTHER
     position:fixed elements get painted at stale positions — which is the bottom tab bar
     floating mid-page that Ben kept reporting (25 Aug 2026), on HR and elsewhere. The same look
     without the broken property: paint the wash on a fixed pseudo-element behind everything.
     It is a sibling layer, not an ancestor, so it creates no containing block of its own. */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(228,185,74,.35), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(194,106,63,.22), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(48,93,91,.18), transparent 50%);
}
button,a,input,select,label,textarea{touch-action:manipulation;font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;margin:0}
img{max-width:100%;display:block}

/* ---------- animations ---------- */
@keyframes float-slow{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blob{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}50%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}}
@keyframes pop-in{0%{transform:scale(.9) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.animate-float{animation:float-slow 6s ease-in-out infinite}
.animate-wiggle{animation:wiggle 3s ease-in-out infinite}
.animate-marquee{animation:marquee 32s linear infinite}
.animate-blob{animation:blob 10s ease-in-out infinite}
.animate-pop{animation:pop-in .6s cubic-bezier(.22,1,.36,1) both}
.animate-pulse{animation:pulse 2s ease-in-out infinite}

/* ---------- utilities ---------- */
.sticker{box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 30px -12px rgba(80,40,20,.25),inset 0 0 0 1px rgba(255,255,255,.4)}
.paper{background-image:radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) .5px, transparent 1px),radial-gradient(circle at 70% 60%, rgba(0,0,0,.02) .5px, transparent 1px);background-size:24px 24px,32px 32px}
.tape{position:absolute;width:90px;height:22px;background:linear-gradient(180deg, rgba(240,205,110,.85), rgba(232,190,90,.7));box-shadow:0 2px 6px rgba(0,0,0,.08);left:50%;transform:translateX(-50%) rotate(-2deg);top:-10px}
.hand{font-family:var(--font-hand)}
.kicker{font-family:var(--font-hand);font-size:1.5rem;color:var(--terracotta)}
.wrap{max-width:80rem;margin:0 auto;padding:0 1.25rem}
.hidden{display:none!important}
.mutetext{color:var(--muted)}
.login-label{display:block;margin:1.25rem 0 .4rem;text-align:left;font-size:.88rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.login-help{margin:.75rem 0 0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.login-support{display:inline-block;margin-top:.65rem;color:var(--teal);font-size:.95rem;font-weight:700;text-underline-offset:3px}

/* ---------- header / shell ---------- */
.shell-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(246,239,221,.82);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.shell-header .bar{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand .logo{height:2.5rem;border-radius:.7rem;background:#fff;display:flex;align-items:center;padding:.25rem .45rem;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.brand .logo img{height:100%;width:auto;display:block}
.brand .name{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.shell-nav{display:flex;gap:.25rem;font-size:.86rem;font-weight:600;overflow-x:auto;scrollbar-width:none}
.shell-nav::-webkit-scrollbar{display:none}
.shell-nav a{padding:.4rem .8rem;border-radius:999px;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .15s}
.shell-nav a:hover{background:rgba(228,185,74,.4)}
.shell-nav a.active{background:var(--terracotta);color:var(--cream)}
.signout{background:var(--ink);color:var(--cream);border:none;border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.95rem;cursor:pointer;flex-shrink:0}
.adminbar{background:rgba(124,70,103,.12);border-bottom:1px solid var(--border)}
.adminbar .inner{max-width:80rem;margin:0 auto;padding:.5rem 1.25rem;display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:600;flex-wrap:wrap}
.adminbar select{border:1px solid var(--border);border-radius:.6rem;padding:.35rem .6rem;background:var(--cream-card);font:inherit;max-width:240px}
.admin-pill{background:var(--plum);color:var(--cream);border-radius:999px;padding:.15rem .7rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}

/* ---------- mobile bottom tab bar ---------- */
.mobilenav{display:none}
@media(max-width:767px){
  .shell-nav{display:none}
  .shell-header .bar{gap:.5rem;padding:.7rem .9rem}
  .brand{flex-shrink:1;min-width:0}
  .brand .name{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* At 375px and below the name needs 136px but only gets 125, so the header read
     "U Good Logistic…" — the company name itself, ellipsised. Step the type down on the
     narrow phones rather than truncate it; 402pt devices keep 1.05rem. */
  @media(max-width:390px){.brand .name{font-size:.9rem}}
  .brand .logo{height:2.65rem}
  .signout{min-height:44px;padding:.55rem .85rem}
  .refreshbtn{min-width:44px;padding:.18rem;display:inline-flex;align-items:center;justify-content:center}
  .refreshbtn svg{width:22px;height:22px}
  body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .mobilenav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;align-items:stretch;
    background:#f6efdd;
    border-top:1px solid var(--border);padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(18,34,56,.08);transform:translateZ(0);-webkit-transform:translateZ(0)}
  .mobilenav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;text-decoration:none;
    color:var(--muted);font-size:.88rem;font-weight:700;padding:.3rem .1rem;border-radius:.8rem}
  .mobilenav a .mic{font-size:1.25rem;line-height:1.2}
  .mobilenav a.active{color:var(--ink);background:rgba(228,185,74,.35)}
  /* An admin gets a 7th tab appended at runtime. Flex items will not shrink below their
     own content unless min-width is cleared, so the 7th was being pushed off the right
     edge and was unreachable on a phone. Clear it, and step the type down once there are
     more than six. */
  .mobilenav a{min-width:0}
  .mobilenav .mlb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobilenav.many a{font-size:.76rem;padding:.3rem .05rem}
  .mobilenav.many a .mic{font-size:1.1rem}
  /* A focused text field is the OTHER thing that strands a fixed bar on iOS: the keyboard
     shrinks the VISUAL viewport while the layout viewport stays tall, so bottom:0 lands
     mid-screen with page content showing underneath it. Confirmed on iOS 26 in the
     installed PWA, 25 Aug 2026. Crew do not need tabs mid-typing — park the bar off-screen
     and give it back on blur. body keeps its padding-bottom so nothing reflows. */
  /* display:none, not a transform — the bar is already sitting at a stranded offset when
     the keyboard opens, so translating it by a multiple of its own height does not reliably
     clear the screen (130% left a visible sliver on iOS 26). It is position:fixed, so taking
     it out of flow reflows nothing, and body keeps its padding-bottom either way. */
  .mobilenav.kbd{display:none}
}

/* ---------- run bar: the primary action, pinned, while a run is open ----------
   Sits ABOVE the fixed mobile tab bar (4.4rem + safe area). Nothing here may
   cause horizontal scroll at 360px, so everything wraps and nothing is nowrap. */
.runbar{position:fixed;left:0;right:0;bottom:0;z-index:60;box-sizing:border-box;
  background:#f6efdd;border-top:2px solid var(--border);
  box-shadow:0 -8px 24px rgba(18,34,56,.16);
  padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
  max-width:100%;overflow-x:hidden}
.runbarbtn{width:100%;justify-content:center;font-size:1.05rem;min-height:52px}
.runbarout{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin-bottom:.4rem}
.runbarchip{font:inherit;font-size:.85rem;font-weight:800;border:1.5px solid #c26a3f;
  background:rgba(194,106,63,.14);color:#8f4526;border-radius:999px;padding:.22rem .6rem;
  cursor:pointer;max-width:100%;overflow-wrap:anywhere;min-height:32px}
.runbarchip.bad{border-color:#a33326;background:rgba(163,51,38,.16);color:#a33326}
.runbarok{text-align:center;font-size:.88rem;font-weight:800;color:#2e7d4f;margin-bottom:.4rem}
/* Same keyboard strand as .mobilenav above. The runbar carries the primary action, so it
   only gets parked when the field being typed into is somewhere ELSE on the page — never
   when the focus is inside the runbar itself. */
.runbar.kbd{display:none}
@media(max-width:767px){
  .runbar{bottom:calc(4.4rem + env(safe-area-inset-bottom));padding-bottom:.55rem}
}
/* the "not on the server yet" card — persistent, never a toast */
.runq{background:rgba(194,106,63,.14);border:2px solid #c26a3f;border-radius:.9rem;
  padding:.65rem .85rem;margin:0 0 .6rem;overflow-wrap:anywhere}
.runq.bad{background:rgba(163,51,38,.14);border-color:#a33326}
.runqt{font-size:.8rem;font-weight:800;letter-spacing:.06em;color:#8f4526}
.runq.bad .runqt{color:#a33326}
.runqb{font-size:.95rem;margin-top:.15rem}
.runqr{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.5rem}

/* ---------- live photo status: what the phone is doing, right now ---------- */
/* This rides in a position:fixed host OVER the page, so its background has to be
   OPAQUE. At 12–16% alpha the card underneath read straight through it and the
   "Saved ✓" looked like it was printed on top of the POC guidance — seen twice
   in one run on iOS 26. Same hues, flattened, plus a shadow so it reads as
   floating above the page rather than as part of it. */
.pstat{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;padding:.55rem .7rem;
  border-radius:.8rem;background:#eef1f0;border:1.5px solid var(--border);
  box-shadow:0 6px 20px rgba(18,34,56,.20);
  font-size:.95rem;font-weight:700;min-height:46px;box-sizing:border-box;overflow-wrap:anywhere}
.pstat.ok{background:#e4f0e8;border-color:#2e7d4f;color:#1f5c39}
.pstat.warn{background:#fbead9;border-color:#c26a3f;color:#8f4526}
.pstat.bad{background:#f8e3e0;border-color:#a33326;color:#8c2b20}
.pstat .psspin{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:3px solid rgba(18,34,56,.18);border-top-color:var(--teal,#305d5b);
  animation:pspin .9s linear infinite}
.pstat .pstxt{flex:1 1 auto;min-width:0}
.pstat .psretry{flex:0 0 auto}
@keyframes pspin{to{transform:rotate(360deg)}}
.psbar{height:6px;border-radius:999px;background:rgba(18,34,56,.14);overflow:hidden;margin-top:.35rem}
.psbar>i{display:block;height:100%;width:40%;border-radius:999px;background:var(--teal,#305d5b);
  animation:psslide 1.1s ease-in-out infinite}
@keyframes psslide{0%{margin-left:-40%}100%{margin-left:100%}}
@media(prefers-reduced-motion:reduce){
  .pstat .psspin{animation:none}
  .psbar>i{animation:none;width:100%;opacity:.5}
}

.shell-footer{max-width:80rem;margin:0 auto;padding:3.5rem 1.25rem;text-align:center}
.shell-footer .bye{font-family:var(--font-hand);font-size:1.9rem;color:var(--terracotta)}
.shell-footer .fine{margin-top:.5rem;font-size:.95rem;color:var(--muted)}

/* ---------- page head ---------- */
.page-head{max-width:80rem;margin:0 auto;padding:3rem 1.25rem 1.5rem}
.page-head h1{font-size:clamp(2.4rem,6vw,3.75rem);font-weight:600}
.page-head .sub{margin-top:1rem;color:var(--muted);max-width:42rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;border:none;border-radius:999px;min-height:44px;padding:.7rem 1.4rem;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:hover{transform:scale(1.04)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-terra{background:var(--terracotta);color:var(--cream)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-teal{background:var(--teal);color:var(--cream)}
.btn-line{background:var(--cream);color:var(--ink);border:2px solid var(--ink)}
.btn-ghost{background:rgba(228,185,74,.45);color:var(--ink)}
.btn-sm{padding:.45rem .95rem;font-size:.95rem}
.btn-danger{background:#c74130;color:#fff}

/* ---------- cards ---------- */
.card{background:var(--cream-card);border-radius:1.5rem;padding:1.5rem}
.notecard{position:relative;background:var(--cream-card);border-radius:1.5rem;padding:1.5rem;transition:transform .3s}
.notecard:hover{transform:translateY(-4px) rotate(0deg)!important}
.badge{position:absolute;top:-.7rem;right:-.7rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.3rem .75rem;border-radius:999px}
.tagchip{font-size:.88rem;font-weight:600;padding:.25rem .75rem;border-radius:999px;background:rgba(228,185,74,.5);display:inline-block}
/* A pill is one object. Left inline, a two-word role ("OWNER SUPPORT") breaks
   across lines and the rounded background breaks with it — two half-pills
   overlapping the site code. inline-block + nowrap makes it wrap as a unit,
   dropping whole onto its own line when there isn't room beside the title. */
.statustag{display:inline-block;white-space:nowrap;vertical-align:baseline;
  font-size:.78rem;font-weight:800;text-transform:uppercase;border-radius:999px;padding:.2rem .6rem;background:var(--mustard);color:var(--ink)}

/* ---- day-of layout: on a day you're working, your run leads --------------
   The hero keeps its words and its link to the board — it loses the big
   illustration and drops a size, so the run fits above the fold. A day with
   nothing scheduled is untouched. */
#jobsHero.dayof{padding-top:1.1rem!important;padding-bottom:.6rem!important}
#jobsHero.dayof #jobsHeroWrap{display:none}
#jobsHero.dayof h1{font-size:1.65rem!important}
#jobsHero.dayof .kicker{margin-bottom:.15rem}
#jobsHero.dayof p{font-size:.95rem;margin-top:.5rem}
.statustag.accepted{background:var(--teal);color:var(--cream)}

/* ---------- marquee band ---------- */
.marquee-band{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:1rem 0;overflow:hidden;background:var(--terracotta)}
.marquee-track{display:flex;white-space:nowrap;width:max-content}
.marquee-track .seg{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--cream)}

/* ---------- home tiles & stats ---------- */
.tilegrid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.tilegrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.tilegrid{grid-template-columns:1fr 1fr 1fr}}
.tile{position:relative;display:block;border-radius:1.75rem;padding:1.5rem;text-decoration:none;overflow:hidden;transition:transform .3s}
.tile:hover{transform:translateY(-5px) rotate(0deg)!important}
.tile .emoji{font-size:2.8rem}
.tile .label{margin-top:1.4rem;font-family:var(--font-display);font-size:1.8rem;font-weight:600}
.tile .note{margin-top:.2rem;font-size:.95rem;opacity:.82}
.tile .arrow{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--font-display);font-size:1.4rem;opacity:.4;transition:.2s}
.tile:hover .arrow{opacity:1;transform:translateX(4px)}
.statfloat{padding:.8rem 1.25rem;border-radius:1.25rem;color:var(--cream)}
.statfloat .n{font-family:var(--font-display);font-size:1.5rem;font-weight:700}
.statfloat .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.9}

/* ---------- hero ---------- */
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:768px){.hero-grid{grid-template-columns:3fr 2fr}}
.hero-img-wrap{position:relative}
.hero-img-wrap .blobby{position:absolute;inset:-1.5rem;background:rgba(228,185,74,.4);z-index:-1}
/* The halo is inset -1.5rem (24px) but the page gutter is only 20px, so on a phone it stuck out
   4px past the right edge. That is enough to make the whole page scroll sideways — and because
   .mobilenav is position:fixed with left:0/right:0, the tab bar then stretched to the new 379px
   scroll width too. Pull the halo in on narrow screens: it stays a halo, the page stops rocking. */
@media(max-width:767px){.hero-img-wrap .blobby{inset:-1rem}}
.hero-img{border-radius:2rem;width:100%;aspect-ratio:4/3;object-fit:cover;transform:rotate(2deg);transition:transform .5s}
.hero-img:hover{transform:rotate(0)}
.hero-img-fallback{border-radius:2rem;width:100%;aspect-ratio:4/3;display:grid;place-items:center;font-size:4rem;background:linear-gradient(135deg,var(--teal),var(--plum));transform:rotate(2deg);color:var(--cream)}
.floaty-note{position:absolute;border-radius:1.25rem;padding:.6rem 1rem;font-family:var(--font-hand);font-size:1.25rem}
.livepill{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:999px;background:var(--mustard);color:var(--ink);font-size:.88rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.livepill .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--terracotta)}
.hero-h1{font-size:clamp(2.6rem,7vw,4.5rem);line-height:.98;font-weight:600}

/* ---------- mobile: pictures lead ---------- */
@media(max-width:767px){.hero-grid .hero-img-wrap{order:-1;margin:0 0 1.4rem}}

/* ---------- calendar ---------- */
.calhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.calmonth{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.calnav{background:rgba(228,185,74,.35);border:none;border-radius:.6rem;width:2.75rem;height:2.75rem;font-size:1.2rem;color:var(--ink);cursor:pointer;line-height:1}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.caldow{font-size:.72rem;color:var(--muted);text-transform:uppercase;text-align:center;font-weight:800;padding-bottom:2px}
.calcell{min-height:2.9rem;border-radius:.7rem;background:rgba(228,185,74,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.95rem;position:relative;border:1px solid transparent;padding:.25rem 0}
.calcell.empty{background:transparent}
.calcell.today{border-color:var(--terracotta);font-weight:800}
.calcell.range{background:rgba(194,106,63,.16)}
.caldots{display:flex;gap:3px;margin-top:3px;min-height:6px}
.cdot{width:6px;height:6px;border-radius:50%;display:inline-block}
.cdot.oj{background:var(--terracotta)}
.cdot.mine{background:var(--good)}
.cdot.hist{background:transparent;border:1.5px solid #6b7f96;box-sizing:border-box}
.callegend{display:flex;gap:1.2rem;margin-top:.8rem;font-size:.88rem;color:var(--muted);font-weight:600}
.callegend .cdot{margin-right:5px;vertical-align:1px}

/* ---------- my schedule ---------- */
.sched{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 1.1rem;border-bottom:1px dashed var(--border)}
.sched:last-child{border-bottom:none}
.sdate{flex:none;width:3.6rem;text-align:center;background:rgba(228,185,74,.25);border-radius:.8rem;padding:.5rem .2rem}
.sdate .mo{font-size:.72rem;font-weight:800;color:var(--terracotta);text-transform:uppercase}
.sdate .dy{font-size:1.25rem;font-weight:800;line-height:1.1;font-family:var(--font-display)}
.sdate .wd{font-size:.72rem;color:var(--muted)}
.sbody{flex:1;min-width:0}
.sbody .s1{font-weight:700;font-size:.95rem}
.sbody .s2{font-size:.95rem;color:var(--muted);margin-top:.35rem;line-height:1.55}

/* ---------- job cards ---------- */
.jobgrid{display:grid;gap:1.25rem}
@media(min-width:768px){.jobgrid{grid-template-columns:1fr 1fr}}
.jobcard{position:relative;background:var(--cream-card);border-radius:1.5rem;padding:1.5rem;transition:transform .3s}
.jobcard:hover{transform:translateY(-4px) rotate(0)!important}
.jobcard .jtitle{font-family:var(--font-display);font-size:1.45rem;font-weight:600}
.jobcard .jmeta{font-size:.95rem;color:var(--muted);margin-top:.5rem;line-height:1.7}
.jobcard .pay{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--terracotta);text-align:right}
.jobcard .paysub{font-size:.72rem;text-transform:uppercase;color:var(--muted);text-align:right}
.jobphotos{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.jobphotos img{width:74px;height:74px;object-fit:cover;border-radius:.8rem;cursor:pointer}
.daypick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.95rem;font-weight:600;background:rgba(228,185,74,.35);border-radius:999px;min-height:44px;box-sizing:border-box;padding:.6rem 1rem;cursor:pointer}
.bidrow{display:flex;align-items:center;justify-content:space-between;gap:.9rem;font-size:.95rem;padding:.45rem 0;border-top:1px dashed var(--border);flex-wrap:wrap}
.acceptbtn{background:var(--teal);color:var(--cream);border:none;border-radius:999px;min-height:44px;padding:.6rem 1.1rem;font-weight:700;font-size:.95rem;cursor:pointer}

/* ---------- corkboard (HR) ---------- */
.corkgrid{display:grid;gap:1.5rem}
@media(min-width:768px){.corkgrid{grid-template-columns:repeat(3,1fr)}}
.hr-banner{position:relative;border-radius:2rem;overflow:hidden;min-height:20rem}
@media(min-width:768px){.hr-banner{min-height:26rem}}
.hr-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-banner .scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(18,34,56,.85) 8%, rgba(18,34,56,.15) 55%, transparent)}
.hr-banner .txt{position:absolute;bottom:0;left:0;right:0;padding:2rem;color:var(--cream)}

/* ---------- payroll ---------- */
.payhero{position:relative;border-radius:2rem;padding:2.5rem;overflow:hidden;background:linear-gradient(135deg,var(--plum),var(--terracotta));color:var(--cream)}
.payhero .bigamt{font-family:var(--font-display);font-size:clamp(3rem,9vw,4.5rem);font-weight:700}
.paystats{margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(min-width:768px){.paystats{grid-template-columns:repeat(4,1fr)}}
.paystat{border-radius:1.25rem;background:rgba(246,239,221,.22);backdrop-filter:blur(4px);padding:.8rem 1rem}
.paystat .k{font-size:.72rem;text-transform:uppercase;opacity:.8}
.paystat .v{font-family:var(--font-display);font-size:1.45rem;font-weight:600}
.histwrap{background:var(--cream-card);border-radius:1.5rem;overflow:hidden}
.histrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;transition:background .15s}
.histrow+.histrow{border-top:1px dashed var(--border)}
.histrow:hover{background:rgba(228,185,74,.25)}
.histrow .d{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.histrow .s{font-size:.88rem;color:var(--muted)}
.histrow .amt{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--terracotta)}

/* ---------- trainings ---------- */
.trgrid{display:grid;gap:1rem}
@media(min-width:768px){.trgrid{grid-template-columns:1fr 1fr}}
.trcard{background:var(--cream-card);border-radius:1.25rem;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;transition:transform .2s}
.trcard:hover{transform:translateY(-3px)}
.trtop{display:flex;align-items:flex-start;gap:1rem}
.ring{position:relative;width:3.5rem;height:3.5rem;flex:none}
.ring svg{width:3.5rem;height:3.5rem;transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:.88rem;font-weight:800}
.trname{font-weight:700;font-size:1.08rem;line-height:1.35}
.trsub{font-size:.95rem;color:var(--muted);line-height:1.5;margin-top:.2rem}
.trbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:4.5rem}
/* on a phone the 4.5rem indent squeezes the buttons into a column — drop it */
@media(max-width:34rem){.trbtns{margin-left:0}}
.certbtn{width:100%;background:var(--teal);color:var(--cream);border:none;border-radius:.8rem;padding:.8rem 1rem;font-weight:700;font-size:1rem;min-height:44px;cursor:pointer}
.certbtn:disabled{background:#d8d2c4;color:var(--muted);cursor:not-allowed}
.certhint{font-size:.95rem;color:var(--muted);text-align:center;margin-top:.35rem;line-height:1.5}
.trkchip{display:inline-block;background:rgba(48,93,91,.16);color:var(--teal);border-radius:999px;padding:.15rem .7rem;margin:.15rem .2rem .15rem 0;font-weight:700;font-size:.95rem}

/* ---------- profile ---------- */
.inkpanel{position:relative;border-radius:2.25rem;padding:2.2rem;overflow:hidden;background:var(--ink);color:var(--cream)}
.inkpanel .blob1{position:absolute;top:-5rem;left:-5rem;width:20rem;height:20rem;background:rgba(194,106,63,.3)}
.inkpanel .blob2{position:absolute;bottom:-6rem;right:-4rem;width:20rem;height:20rem;background:rgba(48,93,91,.3)}
.profgrid{position:relative;display:grid;gap:2.5rem}
@media(min-width:768px){.profgrid{grid-template-columns:1fr 1fr}}
.daysrow{margin-top:1.2rem;display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;max-width:26rem}
.daybtn{aspect-ratio:1;border-radius:1rem;font-family:var(--font-display);font-size:1.1rem;font-weight:600;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer;transition:transform .15s}
.daybtn:hover{transform:scale(1.08)}
.daybtn.on{background:var(--terracotta);border:none}
.glassfield{background:rgba(255,255,255,.06);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;padding:1rem;display:flex;align-items:center;gap:1rem}
.glassfield .ic{font-size:1.5rem}
.glassfield .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.6}
.glassfield input{width:100%;background:transparent;border:none;outline:none;color:var(--cream);font-weight:600;font-size:.95rem;padding:0}

/* ---------- forms (admin, light bg) ---------- */
.formrow{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-top:.8rem}
.formrow .full{grid-column:1/-1}
.formrow label{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.3rem}
.formrow input,.formrow select,.formrow textarea{width:100%;border:1px solid var(--border);border-radius:.8rem;padding:.65rem .8rem;font:inherit;background:#fff;color:var(--ink)}
.chkrow{display:flex;flex-wrap:wrap;gap:.4rem}
.adminform summary{cursor:pointer;font-weight:800;font-family:var(--font-display);font-size:1.15rem;
  padding:.2rem 0;list-style:none;display:flex;align-items:center;gap:.6rem;min-height:44px}
.adminform summary::-webkit-details-marker{display:none}

/* ── one fold indicator for the whole app ──────────────────────────────────
   These were 1rem grey carets you could barely see on a phone. Now every
   <details> gets the same chevron: a 2rem circle in ink, not muted grey, that
   turns when the section opens — and the whole summary row is a 44px target.
   Pages that supply their own <span class="fold">▾</span> keep it; everything
   else gets one automatically, so a new collapsible is never left bare. */
details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:.6rem;min-height:44px;user-select:none}
details>summary::-webkit-details-marker{display:none}

.fold,.carat,
details>summary:not(:has(.fold)):not(:has(.carat))::after{
  margin-left:auto;flex:none;width:2rem;height:2rem;border-radius:50%;
  display:inline-grid;place-items:center;font-size:1.35rem;line-height:1;font-weight:400;
  color:var(--ink);background:rgba(18,34,56,.08);
  transition:transform .18s,background .18s}
details>summary:not(:has(.fold)):not(:has(.carat))::after{content:"▾"}

details[open]>summary .fold,
details[open]>summary .carat,
details[open]>summary:not(:has(.fold)):not(:has(.carat))::after{transform:rotate(180deg)}

summary:hover .fold,summary:hover .carat,
details>summary:not(:has(.fold)):not(:has(.carat)):hover::after{background:rgba(18,34,56,.16)}
summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:.5rem}

@media (prefers-reduced-motion:reduce){
  .fold,.carat,details>summary::after{transition:none}
}
.msg{font-size:.95rem;font-weight:700;margin-top:.5rem}
.msg.ok{color:var(--good)}.msg.err{color:#c74130}
.filebtn{display:inline-flex;align-items:center;min-height:44px;background:var(--ink);color:var(--cream);border-radius:.7rem;padding:.7rem 1.1rem;font-size:.95rem;font-weight:700;cursor:pointer}
.filebtn input{display:none}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.thumb{position:relative}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:.6rem}
.thumb .rm{position:absolute;top:-6px;right:-6px;background:var(--ink);color:#fff;border-radius:999px;width:30px;height:30px;display:grid;place-items:center;font-size:11px;cursor:pointer}

/* ---------- alerts card (push/email) ---------- */
.alertscard{background:var(--cream-card);border-radius:1.5rem;padding:1.3rem 1.4rem}
.alertscard .head{display:flex;align-items:center;gap:.8rem}
.alertscard .bellbox{width:2.6rem;height:2.6rem;border-radius:.8rem;background:rgba(228,185,74,.45);display:grid;place-items:center;font-size:1.25rem;flex:none}
.na-row{display:flex;align-items:center;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--border);margin-top:.4rem}
.na-ic{width:2.2rem;height:2.2rem;border-radius:.6rem;background:rgba(228,185,74,.3);display:grid;place-items:center;flex:none}
.chip{font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:.25rem .8rem;border-radius:999px;background:oklch(0.82 0.15 85/.5);color:var(--ink)}
.chip.on{background:rgba(48,93,91,.2);color:var(--teal)}
.tgl{appearance:none;-webkit-appearance:none;width:47px;height:28px;border-radius:999px;background:#d5cdbd;position:relative;transition:background .18s;cursor:pointer;flex:none;margin:0;outline:none}
.tgl:checked{background:var(--teal)}
.tgl::after{content:"";position:absolute;top:2.5px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:left .18s}
.tgl:checked::after{left:21px}
.tgl:disabled{opacity:.45;cursor:not-allowed}

/* ---------- doc viewer ---------- */
#docViewer{display:none;position:fixed;inset:0;z-index:9999;background:var(--ink)}
#docViewer .topbar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top))}
#docViewer .backbtn{background:var(--cream);color:var(--ink);border:none;border-radius:.6rem;padding:.6rem 1.1rem;font-weight:800;font-size:.95rem;cursor:pointer}
#docViewer .ttl{color:var(--cream);font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#docViewer iframe{width:100%;height:calc(100% - 3.6rem - env(safe-area-inset-top));border:0;background:#fff}

/* ---------- login ---------- */
.loginwrap{min-height:70vh;display:grid;place-items:center;padding:2rem 1.25rem}
.logincard{max-width:26rem;width:100%;background:var(--cream-card);border-radius:2rem;padding:2.2rem;text-align:center}
.logincard input{width:100%;border:1px solid var(--border);border-radius:.9rem;padding:.85rem 1rem;font:inherit;margin-top:1.1rem;text-align:center;font-weight:600}
.empty{color:var(--muted);text-align:center;padding:2rem 1rem;font-weight:600}
.sec-title{font-family:var(--font-display);font-size:1.7rem;font-weight:600;margin:2rem 0 1rem}

/* refresh button (header) */
.refreshbtn{padding:.2rem;line-height:0;margin-right:-.3rem;border-radius:50%}
.refreshbtn svg{width:26px;height:26px}
@keyframes nestspin{to{transform:rotate(360deg)}}

/* ---------- "Report something from the yard" ----------
   AVP8, 24 Aug 2026: Amazon moved the trailer to another dock and damaged a
   trailer jack, and the app could hold neither. The damage was photographed at
   2:53 PM — every photo stage had closed at 2:39. So this control is NOT a
   stage: it is reachable at every stage of a live run AND on a job that has
   already finished, which is the case that actually failed. */
.increpwrap{margin:.6rem 0 0}
.increpwide{width:100%;justify-content:center;border-color:#c26a3f;color:#8f4526;background:rgba(194,106,63,.10)}
.increphint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:.25rem;overflow-wrap:anywhere}
.increpq{color:#a33326}
/* the run bar keeps ONE primary action; the report rides beside it, never instead of it */
.increprow{display:flex;gap:.5rem;align-items:stretch;max-width:100%}
.increprow .runbarbtn{flex:1 1 auto;width:auto;min-width:0}
.increpmini{flex:0 0 auto;font:inherit;font-size:1.2rem;line-height:1;border:2px solid #c26a3f;
  background:rgba(194,106,63,.16);color:#8f4526;border-radius:999px;min-height:52px;
  min-width:52px;padding:0 .8rem;cursor:pointer}

/* the sheet */
.incsheet{position:fixed;inset:0;background:rgba(18,34,56,.5);z-index:10000;
  display:flex;align-items:flex-end;justify-content:center}
.incbox{background:var(--cream,#f6efdd);border-radius:1.4rem 1.4rem 0 0;width:100%;
  max-width:28rem;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.1rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(18,34,56,.25);overflow-wrap:anywhere}
.inch{font-family:var(--font-display,serif);font-weight:700;font-size:1.15rem;text-align:center;margin-top:.1rem}
.incback{font:inherit;font-weight:800;font-size:.9rem;background:none;border:0;color:var(--muted);
  padding:.3rem .1rem .5rem;cursor:pointer;min-height:44px}
.incl{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  margin:.9rem 0 .25rem;color:var(--muted)}
.increq{color:#a33326}
.incopt{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
/* 16px minimum or iOS zooms the page on focus and the crew has to pinch back out */
.incbox input[type=text],.incbox input[type=number],.incbox select,.incbox textarea{
  width:100%;box-sizing:border-box;border:2px solid var(--border);border-radius:.7rem;
  padding:.65rem .8rem;font:inherit;font-size:16px;background:#fff;min-height:48px;max-width:100%}
.incbox textarea{min-height:5.4rem;resize:vertical;line-height:1.35}
.incmenu{display:grid;gap:.55rem;margin-top:.9rem}
.incmenu .btn{width:100%;justify-content:flex-start;text-align:left;min-height:60px;
  font-size:1rem;padding:.7rem 1rem;gap:.65rem}
.incnote{background:rgba(48,93,91,.14);border-radius:.8rem;padding:.6rem .8rem;font-size:.95rem;margin-top:.5rem}
.incclient{background:rgba(228,185,74,.28);border-radius:.8rem;padding:.6rem .8rem;font-size:.9rem;margin-top:.9rem}
.incint{background:rgba(18,34,56,.08);border-radius:.8rem;padding:.6rem .8rem;font-size:.9rem;margin-top:.9rem}
.incgo{width:100%;justify-content:center;margin-top:.7rem;min-height:52px;font-size:1.05rem}
.incfile{margin-top:.1rem;max-width:100%}
.incchk{display:flex;align-items:flex-start;gap:.6rem;background:rgba(228,185,74,.30);
  border-radius:.8rem;padding:.7rem .8rem;margin-top:.9rem;font-size:.95rem;cursor:pointer;min-height:44px}
.incchk input{flex:0 0 auto;width:22px;height:22px;margin-top:.1rem}
.incradios{display:grid;gap:.5rem}
.incradios .incchk{margin-top:0}
.incnoimg{display:grid;place-items:center;width:64px;height:64px;border-radius:.6rem;
  background:rgba(194,106,63,.18);font-size:1.3rem}
.incqf{position:absolute;bottom:-4px;left:-4px;background:#c26a3f;color:#fff;border-radius:999px;
  width:22px;height:22px;display:grid;place-items:center;font-size:11px}
.incpast{margin-top:1rem;border-top:1px dashed var(--border);padding-top:.7rem}
.incpastt{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.incpastr{font-size:.9rem;margin-top:.4rem}
.incpastd{color:var(--muted);font-size:.88rem}
.incdone{margin-top:.7rem;display:grid;gap:.45rem}
.incdoner{background:var(--cream-card);border-radius:.8rem;padding:.6rem .8rem;font-size:.95rem}